Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Capabilities Showcase</title> | |
| <!-- Google Fonts: Inter and JetBrains Mono for a tech feel --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| /* Color Palette - Cyberpunk / Deep Space */ | |
| --bg-color: #0f172a; | |
| --bg-gradient: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%); | |
| --accent-primary: #38bdf8; /* Sky Blue */ | |
| --accent-secondary: #818cf8; /* Indigo */ | |
| --accent-glow: rgba(56, 189, 248, 0.5); | |
| --glass-bg: rgba(30, 41, 59, 0.7); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --text-main: #f1f5f9; | |
| --text-muted: #94a3b8; | |
| --card-hover: rgba(56, 189, 248, 0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg-color); | |
| background-image: var(--bg-gradient); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| /* --- Background Animation --- */ | |
| .bg-orb { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| z-index: -1; | |
| opacity: 0.6; | |
| animation: float 10s infinite ease-in-out alternate; | |
| } | |
| .orb-1 { | |
| width: 400px; | |
| height: 400px; | |
| background: var(--accent-secondary); | |
| top: -100px; | |
| left: -100px; | |
| } | |
| .orb-2 { | |
| width: 300px; | |
| height: 300px; | |
| background: var(--accent-primary); | |
| bottom: -50px; | |
| right: -50px; | |
| animation-delay: -5s; | |
| } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(30px, 50px); } | |
| } | |
| /* --- Layout --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| position: relative; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| padding: 2rem 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| backdrop-filter: blur(5px); | |
| } | |
| .logo { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| color: var(--text-main); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| color: var(--accent-primary); | |
| } | |
| .anycoder-link { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| text-decoration: none; | |
| color: var(--text-muted); | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .anycoder-link:hover { | |
| background: var(--accent-primary); | |
| color: var(--bg-color); | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 15px var(--accent-glow); | |
| } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| text-align: center; | |
| padding: 6rem 0 4rem; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 5vw, 5rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| background: linear-gradient(to right, #fff, var(--accent-primary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| opacity: 0; | |
| animation: fadeIn 1s ease forwards 0.2s; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin: 0 auto 3rem; | |
| opacity: 0; | |
| animation: fadeIn 1s ease forwards 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| to { opacity: 1; transform: translateY(0); } | |
| from { opacity: 0; transform: translateY(20px); } | |
| } | |
| /* --- Features Grid --- */ | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| padding-bottom: 6rem; | |
| } | |
| .card { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| cursor: pointer; | |
| opacity: 0; | |
| animation: slideUp 0.8s ease forwards; | |
| } | |
| .card:nth-child(1) { animation-delay: 0.6s; } | |
| .card:nth-child(2) { animation-delay: 0.8s; } | |
| .card:nth-child(3) { animation-delay: 1.0s; } | |
| .card:nth-child(4) { animation-delay: 1.2s; } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| background: var(--card-hover); | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5); | |
| } | |
| .card-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: var(--accent-primary); | |
| margin-bottom: 1.5rem; | |
| transition: transform 0.3s ease; | |
| } | |
| .card:hover .card-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| background: var(--accent-primary); | |
| color: var(--bg-color); | |
| } | |
| .card h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| } | |
| /* --- Interactive Demo Section --- */ | |
| .demo-section { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 24px; | |
| padding: 3rem; | |
| margin-bottom: 4rem; | |
| text-align: center; | |
| } | |
| .demo-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .chat-interface { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .chat-box { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| min-height: 120px; | |
| text-align: left; | |
| border: 1px solid transparent; | |
| transition: border-color 0.3s; | |
| } | |
| .chat-box.active { | |
| border-color: var(--accent-secondary); | |
| } | |
| .chat-input-group { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| input[type="text"] { | |
| flex: 1; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--glass-border); | |
| padding: 1rem; | |
| border-radius: 12px; | |
| color: white; | |
| font-family: 'Inter', sans-serif; | |
| outline: none; | |
| transition: all 0.3s; | |
| } | |
| input[type="text"]:focus { | |
| border-color: var(--accent-primary); | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| button { | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); | |
| border: none; | |
| padding: 0 2rem; | |
| border-radius: 12px; | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| button:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| button:active { | |
| transform: scale(0.95); | |
| } | |
| .typing-indicator { | |
| display: none; | |
| font-size: 0.9rem; | |
| color: var(--accent-primary); | |
| margin-top: 10px; | |
| } | |
| .typing-indicator span { | |
| animation: blink 1.4s infinite both; | |
| } | |
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes blink { | |
| 0% { opacity: 0.2; } | |
| 20% { opacity: 1; } | |
| 100% { opacity: 0.2; } | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| border-top: 1px solid var(--glass-border); | |
| margin-top: auto; | |
| } | |
| /* --- Responsive Tweaks --- */ | |
| @media (max-width: 768px) { | |
| header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .demo-section { | |
| padding: 1.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Decoration --> | |
| <div class="bg-orb orb-1"></div> | |
| <div class="bg-orb orb-2"></div> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header> | |
| <a href="#" class="logo"> | |
| <i class="fa-solid fa-robot"></i> | |
| <span>AI Assistant</span> | |
| </a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| <i class="fa-solid fa-code-branch"></i> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <h1>Что ты умеешь?</h1> | |
| <p> | |
| Отвечаю на вопросы, пишу код, помогаю с анализом данных и переводами. | |
| Превращаю сложные задачи в простые решения. | |
| </p> | |
| </section> | |
| <!-- Features Grid --> | |
| <section class="features"> | |
| <div class="card"> | |
| <div class="card-icon"><i class="fa-solid fa-code"></i></div> | |
| <h3>Программирование</h3> | |
| <p>Пишет чистый, эффективный код на HTML, CSS, JavaScript и других языках. Помогает отлаживать и оптимизировать.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon"><i class="fa-solid fa-pen-nib"></i></div> | |
| <h3>Написание текстов</h3> | |
| <p>Создает контент, статьи, посты для социальных сетей и креативные тексты на русском и английском.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon"><i class="fa-solid fa-language"></i></div> | |
| <h3>Перевод</h3> | |
| <p>Точный перевод между множеством языков, сохраняя контекст и стиль оригинала.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon"><i class="fa-solid fa-brain"></i></div> | |
| <h3>Анализ данных</h3> | |
| <p>Интерпретирует информацию, находит закономерности и помогает принимать решения на основе данных.</p> | |
| </div> | |
| </section> | |
| <!-- Interactive Demo --> | |
| <section class="demo-section"> | |
| <h2 class="demo-title">Попробуй сам</h2> | |
| <div class="chat-interface"> | |
| <div class="chat-box" id="chatBox"> | |
| <p id="chatText">Привет! Я готов помочь. Напиши мне ваш вопрос...</p> | |
| <div class="typing-indicator" id="typingIndicator"> | |
| <span>.</span><span>.</span><span>.</span> | |
| </div> | |
| </div> | |
| <div class="chat-input-group"> | |
| <input type="text" id="userInput" placeholder="Введите вопрос..." autocomplete="off"> | |
| <button type="button" id="sendBtn">Отправить</button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <p>© 2023 AI Demo. All rights reserved.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const userInput = document.getElementById('userInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const chatBox = document.getElementById('chatBox'); | |
| const chatText = document.getElementById('chatText'); | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| // Simple logic to simulate AI response | |
| const responses = [ | |
| "Я могу помочь вам с написанием кода, созданием контента или решением логических задач!", | |
| "Конечно! Мои возможности включают генерацию текста, анализ данных и создание веб-страниц.", | |
| "Я обучен на большом объеме данных, поэтому могу поддерживать разговор на множество тем.", | |
| "Если вы ищете решение, попробуйте сформулировать вопрос точнее. Я постараюсь помочь!" | |
| ]; | |
| function addMessage(text, isUser = false) { | |
| // Clear typing indicator if visible | |
| typingIndicator.style.display = 'none'; | |
| // Add fade-in effect | |
| const p = document.createElement('p'); | |
| p.style.opacity = '0'; | |
| p.style.transition = 'opacity 0.5s ease'; | |
| if (isUser) { | |
| p.style.textAlign = 'right'; | |
| p.style.color = 'var(--accent-primary)'; | |
| p.style.fontWeight = 'bold'; | |
| } | |
| p.textContent = text; | |
| chatBox.insertBefore(p, typingIndicator); | |
| // Trigger animation | |
| setTimeout(() => p.style.opacity = '1', 10); | |
| // Scroll to bottom | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| function handleInteraction() { | |
| const text = userInput.value.trim(); | |
| if (!text) return; | |
| // 1. Add User Message | |
| addMessage(text, true); | |
| userInput.value = ''; | |
| // 2. Show Typing Indicator | |
| chatBox.classList.add('active'); | |
| typingIndicator.style.display = 'block'; | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| // 3. Simulate AI Thinking Delay | |
| setTimeout(() => { | |
| // Randomly select a response if specific keywords aren't found (simplified logic) | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| addMessage(randomResponse, false); | |
| chatBox.classList.remove('active'); | |
| }, 1500); | |
| } | |
| // Event Listeners | |
| sendBtn.addEventListener('click', handleInteraction); | |
| userInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| handleInteraction(); | |
| } | |
| }); | |
| // Add some interactivity to cards | |
| document.querySelectorAll('.card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| // Click effect | |
| this.style.transform = 'scale(0.95)'; | |
| setTimeout(() => { | |
| this.style.transform = ''; | |
| }, 150); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |