index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeCraft Symphony</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <script>
        // Quantum Terminal Animation
        const quantumTerminal = document.getElementById('quantum-terminal');
        const commands = [
            "Analyzing syntax patterns...",
            "Compiling multi-platform adapters...",
            "Weaving quantum syntax mesh...",
            "Self-healing matrix active",
            "READY"
        ];
        
        let cmdIndex = 0;
        function typeNextCommand() {
            if(cmdIndex < commands.length) {
                const line = document.createElement('div');
                line.className = 'mb-2 terminal-line';
                line.innerHTML = `$ ${commands[cmdIndex]}`;
                quantumTerminal.appendChild(line);
                quantumTerminal.scrollTop = quantumTerminal.scrollHeight;
                cmdIndex++;
                setTimeout(typeNextCommand, 1500);
            } else {
                const cursor = document.createElement('span');
                cursor.className = 'terminal-cursor';
                cursor.innerHTML = '█';
                quantumTerminal.appendChild(cursor);
            }
        }

        // Initialize terminal animation
        setTimeout(typeNextCommand, 2000);

        tailwind.config = {
theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        dark: '#1e293b'
                    }
                }
            }
        }
    </script>
    <style>
        .vanta-canvas {
            position: absolute !important;
            opacity: 0.3;
        }
        .code-block {
            font-family: 'Courier New', monospace;
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
        }
        .glow-text {
            text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
        }
        .terminal-cursor {
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .terminal-line {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/ansi_up@5.1.0/ansi_up.min.js"></script>
</head>
<body class="bg-dark text-gray-100 min-h-screen overflow-x-hidden">
    <div id="vanta-bg"></div>
    
    <!-- Quantum Syntax Terminal -->
    <div class="fixed bottom-4 right-4 w-96 h-64 bg-gray-900 bg-opacity-90 rounded-lg shadow-xl overflow-hidden border border-primary border-opacity-30 z-50">
        <div class="flex items-center px-4 py-2 bg-gray-800 border-b border-gray-700">
            <div class="flex space-x-2 mr-4">
                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                <div class="w-3 h-3 rounded-full bg-green-500"></div>
            </div>
            <div class="text-xs text-gray-400">quantum://syntax/weaver</div>
        </div>
        <div class="p-4 h-full overflow-y-auto font-mono text-sm text-green-400" id="quantum-terminal">
            <div class="mb-2">$ <span class="terminal-line">Initializing Quantum Syntax Weaver...</span></div>
            <div class="mb-2">$ <span class="terminal-line">Loading cross-platform adapters...</span></div>
            <div class="mb-2">$ <span class="terminal-line">Activating self-healing protocols...</span></div>
            <div class="mb-2">$ <span class="terminal-line blink">█</span></div>
        </div>
    </div>

    <header class="relative z-10">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i data-feather="code" class="text-primary"></i>
                <span class="text-xl font-bold bg-gradient-to-r from
</body>
</html>