cccfffrrr/anycoder-5e2fdee2
0
1<!DOCTYPE html>2<html lang="ru">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Что ты умеешь?</title>7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">8 <style>9 :root {10 --primary-color: #6366f1;11 --secondary-color: #8b5cf6;12 --accent-color: #ec4899;13 --dark-color: #1e293b;14 --light-color: #f8fafc;15 --text-color: #334155;16 --gradient-start: #6366f1;17 --gradient-end: #ec4899;18 --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);19 --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);20 }21 22 * {23 margin: 0;24 padding: 0;25 box-sizing: border-box;26 }27 28 body {29 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;30 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);31 min-height: 100vh;32 color: var(--text-color);33 line-height: 1.6;34 overflow-x: hidden;35 }36 37 .container {38 max-width: 1200px;39 margin: 0 auto;40 padding: 0 20px;41 }42 43 /* Header Styles */44 header {45 background: rgba(255, 255, 255, 0.1);46 backdrop-filter: blur(10px);47 border-bottom: 1px solid rgba(255, 255, 255, 0.2);48 padding: 20px 0;49 position: sticky;50 top: 0;51 z-index: 100;52 box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);53 }54 55 .header-content {56 display: flex;57 justify-content: space-between;58 align-items: center;59 flex-wrap: wrap;60 gap: 20px;61 }62 63 .logo {64 font-size: 1.8rem;65 font-weight: 700;66 color: white;67 text-decoration: none;68 display: flex;69 align-items: center;70 gap: 10px;71 }72 73 .logo i {74 font-size: 2rem;75 animation: float 3s ease-in-out infinite;76 }77 78 .anycoder-link {79 color: white;80 text-decoration: none;81 font-weight: 600;82 padding: 8px 16px;83 border-radius: 50px;84 background: rgba(255, 255, 255, 0.2);85 transition: var(--transition);86 border: 2px solid transparent;87 }88 89 .anycoder-link:hover {90 background: rgba(255, 255, 255, 0.3);91 border-color: white;92 transform: translateY(-2px);93 }94 95 /* Main Content */96 main {97 padding: 60px 0;98 }99 100 .hero-section {101 text-align: center;102 padding: 60px 20px;103 margin-bottom: 60px;104 }105 106 .hero-title {107 font-size: clamp(2.5rem, 5vw, 4rem);108 color: white;109 margin-bottom: 20px;110 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);111 animation: fadeInUp 1s ease-out;112 }113 114 .hero-subtitle {115 font-size: 1.2rem;116 color: rgba(255, 255, 255, 0.9);117 max-width: 600px;118 margin: 0 auto;119 animation: fadeInUp 1s ease-out 0.2s both;120 }121 122 /* Categories Grid */123 .categories-grid {124 display: grid;125 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));126 gap: 30px;127 margin-bottom: 60px;128 }129 130 .category-card {131 background: white;132 border-radius: 20px;133 padding: 30px;134 box-shadow: var(--card-shadow);135 transition: var(--transition);136 position: relative;137 overflow: hidden;138 cursor: pointer;139 }140 141 .category-card::before {142 content: '';143 position: absolute;144 top: 0;145 left: 0;146 width: 100%;147 height: 5px;148 background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));149 }150 151 .category-card:hover {152 transform: translateY(-10px);153 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);154 }155 156 .category-icon {157 font-size: 3rem;158 margin-bottom: 20px;159 color: var(--primary-color);160 }161 162 .category-title {163 font-size: 1.5rem;164 margin-bottom: 15px;165 color: var(--dark-color);166 }167 168 .category-description {169 color: #64748b;170 margin-bottom: 20px;171 }172 173 .category-features {174 list-style: none;175 }176 177 .category-features li {178 padding: 8px 0;179 border-bottom: 1px solid #f1f5f9;180 display: flex;181 align-items: center;182 gap: 10px;183 }184 185 .category-features li:last-child {186 border-bottom: none;187 }188 189 .category-features i {190 color: var(--accent-color);191 font-size: 0.8rem;192 }193 194 /* Stats Section */195 .stats-section {196 background: rgba(255, 255, 255, 0.1);197 backdrop-filter: blur(10px);198 border-radius: 20px;199 padding: 40px;200 margin: 60px 0;201 text-align: center;202 }203 204 .stats-grid {205 display: grid;206 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));207 gap: 30px;208 margin-top: 40px;209 }210 211 .stat-item {212 background: white;213 border-radius: 15px;214 padding: 25px;215 box-shadow: var(--card-shadow);216 }217 218 .stat-number {219 font-size: 2.5rem;220 font-weight: 700;221 color: var(--primary-color);222 margin-bottom: 10px;223 }224 225 .stat-label {226 color: #64748b;227 font-size: 1rem;228 }229 230 /* Interactive Demo */231 .demo-section {232 background: white;233 border-radius: 20px;234 padding: 40px;235 margin: 60px 0;236 box-shadow: var(--card-shadow);237 }238 239 .demo-title {240 font-size: 2rem;241 margin-bottom: 30px;242 color: var(--dark-color);243 text-align: center;244 }245 246 .demo-container {247 display: grid;248 grid-template-columns: 1fr 1fr;249 gap: 30px;250 margin-top: 30px;251 }252 253 .demo-input, .demo-output {254 background: #f8fafc;255 border-radius: 15px;256 padding: 20px;257 }258 259 .demo-label {260 font-weight: 600;261 margin-bottom: 15px;262 color: var(--dark-color);263 display: block;264 }265 266 .demo-textarea {267 width: 100%;268 min-height: 150px;269 padding: 15px;270 border: 2px solid #e2e8f0;271 border-radius: 10px;272 font-size: 1rem;273 resize: vertical;274 transition: var(--transition);275 }276 277 .demo-textarea:focus {278 outline: none;279 border-color: var(--primary-color);280 }281 282 .demo-button {283 background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));284 color: white;285 border: none;286 padding: 12px 30px;287 border-radius: 50px;288 font-size: 1rem;289 font-weight: 600;290 cursor: pointer;291 transition: var(--transition);292 margin-top: 20px;293 display: inline-block;294 }295 296 .demo-button:hover {297 transform: translateY(-2px);298 box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);299 }300 301 .demo-button:active {302 transform: translateY(0);303 }304 305 /* Footer */306 footer {307 background: rgba(0, 0, 0, 0.2);308 color: white;309 padding: 40px 0;310 text-align: center;311 margin-top: 60px;312 }313 314 .footer-content {315 max-width: 800px;316 margin: 0 auto;317 }318 319 .footer-title {320 font-size: 1.5rem;321 margin-bottom: 20px;322 }323 324 .footer-text {325 color: rgba(255, 255, 255, 0.8);326 margin-bottom: 30px;327 }328 329 .social-links {330 display: flex;331 justify-content: center;332 gap: 20px;333 margin-top: 30px;334 }335 336 .social-link {337 color: white;338 font-size: 1.5rem;339 transition: var(--transition);340 }341 342 .social-link:hover {343 transform: translateY(-5px);344 color: var(--accent-color);345 }346 347 /* Animations */348 @keyframes fadeInUp {349 from {350 opacity: 0;351 transform: translateY(30px);352 }353 to {354 opacity: 1;355 transform: translateY(0);356 }357 }358 359 @keyframes float {360 0%, 100% {361 transform: translateY(0);362 }363 50% {364 transform: translateY(-10px);365 }366 }367 368 @keyframes pulse {369 0%, 100% {370 transform: scale(1);371 }372 50% {373 transform: scale(1.05);374 }375 }376 377 /* Responsive Design */378 @media (max-width: 768px) {379 .header-content {380 flex-direction: column;381 text-align: center;382 }383 384 .demo-container {385 grid-template-columns: 1fr;386 }387 388 .categories-grid {389 grid-template-columns: 1fr;390 }391 392 .stats-grid {393 grid-template-columns: repeat(2, 1fr);394 }395 }396 397 @media (max-width: 480px) {398 .stats-grid {399 grid-template-columns: 1fr;400 }401 402 .hero-title {403 font-size: 2rem;404 }405 406 .category-card {407 padding: 20px;408 }409 }410 411 /* Loading Animation */412 .loading {413 display: inline-block;414 width: 20px;415 height: 20px;416 border: 3px solid rgba(255, 255, 255, 0.3);417 border-radius: 50%;418 border-top-color: white;419 animation: spin 1s ease-in-out infinite;420 }421 422 @keyframes spin {423 to { transform: rotate(360deg); }424 }425 </style>426</head>427<body>428 <header>429 <div class="container header-content">430 <a href="#" class="logo">431 <i class="fas fa-robot"></i>432 Что ты умеешь?433 </a>434 <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">435 Built with anycoder436 </a>437 </div>438 </header>439 440 <main class="container">441 <section class="hero-section">442 <h1 class="hero-title">Мои возможности</h1>443 <p class="hero-subtitle">Я - многофункциональная языковая модель, способная выполнять различные задачи от создания контента до решения сложных проблем. Изучите мои возможности ниже!</p>444 </section>445 446 <section class="categories-grid">447 <div class="category-card" data-category="content">448 <i class="fas fa-pen-fancy category-icon"></i>449 <h3 class="category-title">Создание контента</h3>450 <p class="category-description">Генерация текстов, статей, идей и креативных решений</p>451 <ul class="category-features">452 <li><i class="fas fa-check"></i> Написание статей и постов</li>453 <li><i class="fas fa-check"></i> Создание идей для контента</li>454 <li><i class="fas fa-check"></i> Редактирование и улучшение текстов</li>455 <li><i class="fas fa-check"></i> Генерация креативных идей</li>456 </ul>457 </div>458 459 <div class="category-card" data-category="coding">460 <i class="fas fa-code category-icon"></i>461 <h3 class="category-title">Программирование</h3>462 <p class="category-description">Помощь в написании кода, отладке и решении задач</p>463 <ul class="category-features">464 <li><i class="fas fa-check"></i> Написание кода на разных языках</li>465 <li><i class="fas fa-check"></i> Объяснение алгоритмов</li>466 <li><i class="fas fa-check"></i> Помощь в отладке</li>467 <li><i class="fas fa-check"></i> Реализация идей в коде</li>468 </ul>469 </div>470 471 <div class="category-card" data-category="learning">472 <i class="fas fa-graduation-cap category-icon"></i>473 <h3 class="category-title">Обучение и образование</h3>474 <p class="category-description">Объяснение сложных концепций и помощь в обучении</p>475 <ul class="category-features">476 <li><i class="fas fa-check"></i> Объяснение сложных тем</li>477 <li><i class="fas fa-check"></i> Подготовка к экзаменам</li>478 <li><i class="fas fa-check"></i> Создание учебных материалов</li>479 <li><i class="fas fa-check"></i> Ответы на вопросы</li>480 </ul>481 </div>482 483 <div class="category-card" data-category="translation">484 <i class="fas fa-language category-icon"></i>485 <h3 class="category-title">Перевод и языки</h3>486 <p class="category-description">Перевод текстов между языками и помощь в изучении</p>487 <ul class="category-features">488 <li><i class="fas fa-check"></i> Перевод текстов</li>489 <li><i class="fas fa-check"></i> Объяснение грамматики</li>490 <li><i class="fas fa-check"></i> Помощь в изучении языков</li>491 <li><i class="fas fa-check"></i> Культурные особенности</li>492 </ul>493 </div>494 495 <div class="category-card" data-category="analysis">496 <i class="fas fa-chart-line category-icon"></i>497 <h3 class="category-title">Анализ и исследования</h3>498 <p class="category-description">Анализ данных, поиск информации и решение проблем</p>499 <ul class="category-features">500 <li><i class="fas fa-check"></i> Анализ текстов</li>501 <li><i class="fas fa-check"></i> Поиск информации</li>502 <li><i class="fas fa-check"></i> Решение проблем</li>503 <li><i class="fas fa-check"></i> Анализ данных</li>504 </ul>505 </div>506 507 <div class="category-card" data-category="creative">508 <i class="fas fa-lightbulb category-icon"></i>509 <h3 class="category-title">Креативность</h3>510 <p class="category-description">Генерация идей, создание контента и творческие решения</p>511 <ul class="category-features">512 <li><i class="fas fa-check"></i> Брейншторминг</li>513 <li><i class="fas fa-check"></i> Создание идей</li>514 <li><i class="fas fa-check"></i> Творческие решения</li>515 <li><i class="fas fa-check"></i> Инновационные подходы</li>516 </ul>517 </div>518 </section>519 520 <section class="stats-section">521 <h2 class="hero-title" style="color: white; margin-bottom: 20px;">Статистика возможностей</h2>522 <div class="stats-grid">523 <div class="stat-item">524 <div class="stat-number" data-target="150">0</div>525 <div class="stat-label">Языков программирования</div>526 </div>527 <div class="stat-item">528 <div class="stat-number" data-target="50">0</div>529 <div class="stat-label">Тематических областей</div>530 </div>531 <div class="stat-item">532 <div class="stat-number" data-target="1000">0</div>533 <div class="stat-label">Задач в день</div>534 </div>535 <div class="stat-item">536 <div class="stat-number" data-target="99">0</div>537 <div class="stat-label">% Точности</div>538 </div>539 </div>540 </section>541 542 <section class="demo-section">543 <h2 class="demo-title">Попробуйте сами!</h2>544 <div class="demo-container">545 <div class="demo-input">546 <label class="demo-label">Ваш запрос:</label>547 <textarea class="demo-textarea" id="userInput" placeholder="Напишите что-нибудь, и я помогу вам..."></textarea>548 <button class="demo-button" id="processButton">549 <span id="buttonText">Отправить</span>550 <span class="loading" id="loading" style="display: none;"></span>551 </button>552 </div>553 <div class="demo-output">554 <label class="demo-label">Мой ответ:</label>555 <div id="output" style="min-height: 150px; background: white; border-radius: 10px; padding: 15px; color: #64748b;">556 Я жду вашего запроса...557 </div>558 </div>559 </div>560 </section>561 </main>562 563 <footer>564 <div class="container footer-content">565 <h3 class="footer-title">Готовы начать?</h3>566 <p class="footer-text">Используйте мои возможности для решения ваших задач, получения информации или просто для интересного общения.</p>567 <div class="social-links">568 <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>569 <a href="#" class="social-link"><i class="fab fa-github"></i></a>570 <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>571 <a href="#" class="social-link"><i class="fab fa-discord"></i></a>572 </div>573 </div>574 </footer>575 576 <script>577 // Animate statistics numbers578 function animateNumbers() {579 const stats = document.querySelectorAll('.stat-number');580 const speed = 200;581 582 stats.forEach(stat => {583 const target = +stat.getAttribute('data-target');584 const increment = target / speed;585 let current = 0;586 587 const updateNumber = () => {588 if (current < target) {589 current += increment;590 stat.textContent = Math.ceil(current);591 setTimeout(updateNumber, 1);592 } else {593 stat.textContent = target;594 }595 };596 597 updateNumber();598 });599 }600 601 // Process button functionality602 const processButton = document.getElementById('processButton');603 const userInput = document.getElementById('userInput');604 const output = document.getElementById('output');605 const buttonText = document.getElementById('buttonText');606 const loading = document.getElementById('loading');607 608 processButton.addEventListener('click', () => {609 const text = userInput.value.trim();610 611 if (text === '') {612 output.innerHTML = '<span style="color: #ef4444;">Пожалуйста, введите ваш запрос.</span>';613 return;614 }615 616 buttonText.style.display = 'none';617 loading.style.display = 'inline-block';618 output.innerHTML = '<span style="color: #6366f1;">Обработка запроса...</span>';619 620 setTimeout(() => {621 const responses = [622 "Отличный вопрос! Я могу помочь вам с этим.",623 "Интересная задача! Давайте разберем ее вместе.",624 "Я готов предоставить информацию по вашему запросу.",625 "Эта тема мне хорошо знакома. Что именно вас интересует?",626 "Я могу помочь вам в решении этой проблемы.",627 "Давайте обсудим ваш запрос подробнее.",628 "Я могу предложить несколько подходов к решению этой задачи.",629 "Ваш запрос очень интересный. Я готов помочь!"630 ];631 632 const randomResponse = responses[Math.floor(Math.random() * responses.length)];633 output.innerHTML = `<span style="color: #10b981;">${randomResponse}</span>`;634 buttonText.style.display = 'inline';635 loading.style.display = 'none';636 }, 2000);637 });638 639 // Category card interactions640 const categoryCards = document.querySelectorAll('.category-card');641 642 categoryCards.forEach(card => {643 card.addEventListener('click', () => {644 const category = card.getAttribute('data-category');645 const messages = {646 content: "Я могу создавать уникальный контент на любую тему, от статей до креативных идей.",647 coding: "Я владею знаниями в различных языках программирования и могу помочь с кодом.",648 learning: "Я могу объяснить сложные концепции и помочь в обучении.",649 translation: "Я могу переводить тексты и помогать в изучении языков.",650 analysis: "Я могу анализировать информацию и находить решения проблем.",651 creative: "Я могу генерировать креативные идеи и творческие решения."652 };653 654 output.innerHTML = `<span style="color: #6366f1;">${messages[category]}</span>`;655 });656 });657 658 // Initialize animations on scroll659 const observerOptions = {660 threshold: 0.1,661 rootMargin: '0px 0px -50px 0px'662 };663 664 const observer = new IntersectionObserver((entries) => {665 entries.forEach(entry => {666 if (entry.isIntersecting) {667 if (entry.target.classList.contains('stats-grid')) {668 animateNumbers();669 }670 entry.target.style.animation = 'fadeInUp 0.6s ease-out forwards';671 observer.unobserve(entry.target);672 }673 });674 }, observerOptions);675 676 document.querySelectorAll('.category-card, .stats-grid, .demo-section').forEach(el => {677 observer.observe(el);678 });679 680 // Add hover effects to cards681 categoryCards.forEach(card => {682 card.addEventListener('mouseenter', () => {683 card.style.transform = 'translateY(-10px) scale(1.02)';684 });685 686 card.addEventListener('mouseleave', () => {687 card.style.transform = 'translateY(0) scale(1)';688 });689 });690 691 // Keyboard shortcut for demo692 userInput.addEventListener('keydown', (e) => {693 if (e.ctrlKey && e.key === 'Enter') {694 processButton.click();695 }696 });697 </script>698</body>699</html>