Spaces:

Ivan1008
/

anycoder-319bed1e

Running

File size: 17,562 Bytes

d8a239e

<!DOCTYPE html>
<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>&copy; 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>