Spaces:

REALBOSS
/

anycoder-6671ee06

Running

App Files Files Community

REALBOSS commited on 29 days ago

Commit

469152e

verified ·

1 Parent(s): c9b8c51

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +745 -570

index.html CHANGED Viewed

@@ -1,586 +1,761 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Oráculo - Planos Futuros</title>
-    <!-- Google Fonts: Rajdhani for a techy 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=Rajdhani:wght@300;500;700&family=Roboto+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 {
-            --primary: #00f3ff;
-            --secondary: #bc13fe;
-            --bg-dark: #050505;
-            --bg-panel: rgba(20, 20, 30, 0.7);
-            --text-main: #e0e0e0;
-            --glass-border: 1px solid rgba(255, 255, 255, 0.1);
-            --neon-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Rajdhani', sans-serif;
-            background-color: var(--bg-dark);
-            color: var(--text-main);
-            overflow-x: hidden;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-        /* --- Canvas Background --- */
-        #bg-canvas {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            opacity: 0.6;
-        }
-        /* --- Header --- */
-        header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1.5rem 5%;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(10px);
-            border-bottom: var(--glass-border);
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-        .logo {
-            font-size: 1.8rem;
-            font-weight: 700;
-            color: var(--primary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            text-shadow: var(--neon-shadow);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .anycoder-link {
-            font-family: 'Roboto Mono', monospace;
-            font-size: 0.9rem;
-            color: var(--secondary);
-            text-decoration: none;
-            border: 1px solid var(--secondary);
-            padding: 8px 16px;
-            border-radius: 4px;
-            transition: all 0.3s ease;
-            background: rgba(188, 19, 254, 0.1);
-        }
-        .anycoder-link:hover {
-            background: var(--secondary);
-            color: #fff;
-            box-shadow: 0 0 15px var(--secondary);
-        }
-        /* --- Main Content --- */
-        main {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 3rem 1rem;
-            max-width: 1200px;
-            margin: 0 auto;
-            width: 100%;
-        }
-        /* --- Hero Section --- */
-        .hero {
-            text-align: center;
-            margin-bottom: 4rem;
-            animation: fadeInDown 1s ease-out;
-        }
-        h1 {
-            font-size: 3.5rem;
-            margin-bottom: 1rem;
-            background: linear-gradient(90deg, #fff, var(--primary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .subtitle {
-            font-size: 1.2rem;
-            color: #aaa;
-            max-width: 600px;
-            margin: 0 auto;
-        }
-        /* --- Input Interface --- */
-        .interface-panel {
-            width: 100%;
-            max-width: 700px;
-            background: var(--bg-panel);
-            backdrop-filter: blur(15px);
-            border: var(--glass-border);
-            border-radius: 15px;
-            padding: 2rem;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-            position: relative;
-            overflow: hidden;
-        }
-        .interface-panel::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, var(--primary), transparent);
-            animation: scanline 3s infinite linear;
-        }
-        .input-group {
-            display: flex;
-            gap: 10px;
-            position: relative;
-        }
-        input[type="text"] {
-            flex: 1;
-            background: rgba(0, 0, 0, 0.5);
-            border: 1px solid #333;
-            color: #fff;
-            padding: 15px 20px;
-            font-family: 'Roboto Mono', monospace;
-            font-size: 1rem;
-            border-radius: 8px;
-            outline: none;
-            transition: border-color 0.3s;
-        }
-        input[type="text"]:focus {
-            border-color: var(--primary);
-            box-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
-        }
-        button#ask-btn {
-            background: linear-gradient(135deg, var(--primary), #00a8ff);
-            color: #000;
-            font-weight: 700;
-            border: none;
-            padding: 0 30px;
-            border-radius: 8px;
-            cursor: pointer;
-            text-transform: uppercase;
-            font-family: 'Rajdhani', sans-serif;
-            letter-spacing: 1px;
-            transition: transform 0.2s, box-shadow 0.2s;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        button#ask-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
-        }
-        button#ask-btn:active {
-            transform: translateY(0);
-        }
-        /* --- Loading State --- */
-        .loader {
-            display: none;
-            margin-top: 2rem;
-            text-align: center;
-            color: var(--primary);
-            font-family: 'Roboto Mono', monospace;
-        }
-        .loader.active {
-            display: block;
-        }
-        .spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid rgba(0, 243, 255, 0.3);
-            border-top: 3px solid var(--primary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 10px;
-        }
-        /* --- Results Grid --- */
-        .results-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            width: 100%;
-            margin-top: 3rem;
-            opacity: 0;
-            transform: translateY(20px);
-            transition: all 0.8s ease;
-        }
-        .results-container.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-        .card {
-            background: rgba(20, 20, 30, 0.6);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-            border-radius: 12px;
-            padding: 1.5rem;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-        .card:hover {
-            transform: translateY(-5px);
-            border-color: var(--primary);
-            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
-        }
-        .card-icon {
-            font-size: 2rem;
-            color: var(--secondary);
-            margin-bottom: 1rem;
-        }
-        .card h3 {
-            color: var(--primary);
-            margin-bottom: 0.5rem;
-            font-size: 1.4rem;
-        }
-        .card p {
-            color: #ccc;
-            line-height: 1.6;
-            font-size: 0.95rem;
-        }
-        .probability-bar {
-            height: 4px;
-            background: #333;
-            margin-top: 1rem;
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        .probability-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--secondary), var(--primary));
-            width: 0%;
-            transition: width 1.5s ease-out;
-        }
-        /* --- Footer --- */
-        footer {
-            text-align: center;
-            padding: 2rem;
-            color: #555;
-            font-size: 0.8rem;
-            border-top: var(--glass-border);
-            margin-top: auto;
-        }
-        /* --- Animations --- */
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        @keyframes scanline {
-            0% { left: -100%; }
-            100% { left: 100%; }
-        }
-        @keyframes fadeInDown {
-            from { opacity: 0; transform: translateY(-20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        /* --- Responsive --- */
-        @media (max-width: 768px) {
-            h1 { font-size: 2.2rem; }
-            .interface-panel { padding: 1.5rem; }
-            .input-group { flex-direction: column; }
-            button#ask-btn { width: 100%; justify-content: center; padding: 15px; }
-        }
-    </style>
 </head>
-<body>
-    <!-- Canvas for Particle Background -->
-    <canvas id="bg-canvas"></canvas>
-    <header>
-        <div class="logo">
-            <i class="fa-solid fa-brain"></i>
-            NEXUS AI
-        </div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-            Built with anycoder
-        </a>
-    </header>
-    <main>
-        <section class="hero">
-            <h1>Quais planos tem para nós?</h1>
-            <p class="subtitle">Consulte a inteligência artificial central para descobrir os cenários futuros destinados à humanidade.</p>
-        </section>
-        <section class="interface-panel">
-            <div class="input-group">
-                <input type="text" id="user-input" placeholder="Digite um setor (ex: tecnologia, espaço, saúde) ou deixe em branco..." autocomplete="off">
-                <button id="ask-btn">
-                    <i class="fa-solid fa-microchip"></i> Consultar
-                </button>
-            </div>
-            <div class="loader" id="loader">
-                <div class="spinner"></div>
-                <p id="loading-text">Processando dados temporais...</p>
-            </div>
-        </section>
-        <section class="results-container" id="results">
-            <!-- Cards will be injected here via JS -->
-        </section>
-    </main>
-    <footer>
-        &copy; 2023 Nexus AI Systems. Todos os cenários são probabilísticos.
-    </footer>
-    <script>
-        // --- 1. Canvas Background Animation (Particle Network) ---
-        const canvas = document.getElementById('bg-canvas');
-        const ctx = canvas.getContext('2d');
-        let width, height;
-        let particles = [];
-        function resize() {
-            width = canvas.width = window.innerWidth;
-            height = canvas.height = window.innerHeight;
-        }
-        class Particle {
-            constructor() {
-                this.x = Math.random() * width;
-                this.y = Math.random() * height;
-                this.vx = (Math.random() - 0.5) * 0.5;
-                this.vy = (Math.random() - 0.5) * 0.5;
-                this.size = Math.random() * 2 + 1;
-            }
-            update() {
-                this.x += this.vx;
-                this.y += this.vy;
-                if (this.x < 0 || this.x > width) this.vx *= -1;
-                if (this.y < 0 || this.y > height) this.vy *= -1;
-            }
-            draw() {
-                ctx.beginPath();
-                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-                ctx.fillStyle = 'rgba(0, 243, 255, 0.5)';
-                ctx.fill();
-            }
-        }
-        function initParticles() {
-            particles = [];
-            const count = Math.min(Math.floor(window.innerWidth / 10), 100);
-            for (let i = 0; i < count; i++) {
-                particles.push(new Particle());
-            }
-        }
-        function animate() {
-            ctx.clearRect(0, 0, width, height);
-            particles.forEach((p, index) => {
-                p.update();
-                p.draw();
-                // Draw connections
-                for (let j = index + 1; j < particles.length; j++) {
-                    const p2 = particles[j];
-                    const dx = p.x - p2.x;
-                    const dy = p.y - p2.y;
-                    const dist = Math.sqrt(dx * dx + dy * dy);
-                    if (dist < 150) {
-                        ctx.beginPath();
-                        ctx.strokeStyle = `rgba(0, 243, 255, ${1 - dist/150})`;
-                        ctx.lineWidth = 0.5;
-                        ctx.moveTo(p.x, p.y);
-                        ctx.lineTo(p2.x, p2.y);
-                        ctx.stroke();
-                    }
-                }
-            });
-            requestAnimationFrame(animate);
-        }
-        window.addEventListener('resize', () => {
-            resize();
-            initParticles();
-        });
-        resize();
-        initParticles();
-        animate();
-        // --- 2. Application Logic (The Oracle) ---
-        const plansDatabase = [
-            {
-                title: "Fusão a Frio Comercial",
-                desc: "A humanidade dominará a fusão nuclear estável, eliminando a crise energética global e permitindo a dessalinização em massa dos oceanos.",
-                icon: "fa-atom",
-                probability: 87
-            },
-            {
-                title: "Colonização de Marte",
-                desc: "O primeiro assentamento autossustentável será estabelecido no Planeta Vermelho, marcando o início da espécie humana como multiplanetária.",
-                icon: "fa-rocket",
-                probability: 64
-            },
-            {
-                title: "Interfaces Neurais Diretas",
-                desc: "A linguagem verbal se tornará obsoleta. O pensamento será transmitido via dados diretos entre cérebros e redes digitais.",
-                icon: "fa-network-wired",
-                probability: 92
-            },
-            {
-                title: "Longevidade Extrema",
-                desc: "Com a edição genética avançada e nanobots, a expectativa de vida média ultrapassará os 150 anos com boa qualidade de saúde.",
-                icon: "fa-dna",
-                probability: 78
-            },
-            {
-                title: "Economia Pós-Escassez",
-                desc: "A automação completa da produção levará a um sistema onde os bens materiais são gratuitos, focando a sociedade na criatividade e exploração.",
-                icon: "fa-robot",
-                probability: 45
-            },
-            {
-                title: "Terraformação Local",
-                desc: "Tecnologias atmosféricas avançadas permitirão reverter o efeito estufa em áreas críticas da Terra em questão de anos, não décadas.",
-                icon: "fa-earth-americas",
-                probability: 71
-            }
-        ];
-        const askBtn = document.getElementById('ask-btn');
-        const userInput = document.getElementById('user-input');
-        const loader = document.getElementById('loader');
-        const resultsContainer = document.getElementById('results');
-        const loadingText = document.getElementById('loading-text');
-        const loadingMessages = [
-            "Analisando parâmetros caóticos...",
-            "Consultando banco de dados do futuro...",
-            "Calculando probabilidades deTimeline...",
-            "Sincronizando com a rede neural global..."
-        ];
-        function getRandomPlans(count) {
-            const shuffled = [...plansDatabase].sort(() => 0.5 - Math.random());
-            return shuffled.slice(0, count);
-        }
-        function createCard(plan) {
-            const card = document.createElement('div');
-            card.className = 'card';
-            card.innerHTML = `
-                <div class="card-icon"><i class="fa-solid ${plan.icon}"></i></div>
-                <h3>${plan.title}</h3>
-                <p>${plan.desc}</p>
-                <div style="display:flex; justify-content:space-between; margin-top:10px; font-size:0.8rem; color:#888;">
-                    <span>Probabilidade</span>
-                    <span>${plan.probability}%</span>
-                </div>
-                <div class="probability-bar">
-                    <div class="probability-fill" style="width: 0%" data-width="${plan.probability}%"></div>
-                </div>
-            `;
-            return card;
-        }
-        askBtn.addEventListener('click', () => {
-            // UI Feedback: Start loading
-            resultsContainer.innerHTML = '';
-            resultsContainer.classList.remove('visible');
-            loader.classList.add('active');
-            // Cycle loading text
-            let msgIndex = 0;
-            const msgInterval = setInterval(() => {
-                loadingText.innerText = loadingMessages[msgIndex % loadingMessages.length];
-                msgIndex++;
-            }, 800);
-            // Simulate processing delay
-            setTimeout(() => {
-                clearInterval(msgInterval);
-                loader.classList.remove('active');
-                // Logic: Determine number of plans (random 2 to 4)
-                const count = Math.floor(Math.random() * 3) + 2;
-                const selectedPlans = getRandomPlans(count);
-                // Generate Cards
-                selectedPlans.forEach(plan => {
-                    const card = createCard(plan);
-                    resultsContainer.appendChild(card);
-                });
-                // Show container with animation
-                resultsContainer.classList.add('visible');
-                // Animate probability bars after cards appear
-                setTimeout(() => {
-                    document.querySelectorAll('.probability-fill').forEach(bar => {
-                        bar.style.width = bar.getAttribute('data-width');
-                    });
-                }, 300);
-            }, 2500); // 2.5s delay
-        });
-        // Allow 'Enter' key to trigger search
-        userInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                askBtn.click();
-            }
         });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Oráculo - Planos Futuros</title>
+  <!-- Google Fonts: Rajdhani for a techy 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=Rajdhani:wght@300;500;700&family=Roboto+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 {
+      --primary: #00f3ff;
+      --secondary: #bc13fe;
+      --bg-dark: #050505;
+      --bg-panel: rgba(20, 20, 30, 0.85);
+      --text-main: #e0e0e0;
+      --glass-border: 1px solid rgba(255, 255, 255, 0.1);
+      --neon-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Rajdhani', sans-serif;
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      overflow-x: hidden;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    /* --- Canvas Background --- */
+    #bg-canvas {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      opacity: 0.6;
+    }
+    /* --- Header --- */
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1.5rem 5%;
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(10px);
+      border-bottom: var(--glass-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .logo {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: var(--primary);
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      text-shadow: var(--neon-shadow);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .header-actions {
+      display: flex;
+      gap: 15px;
+      align-items: center;
+    }
+    .anycoder-link, .about-btn {
+      font-family: 'Roboto Mono', monospace;
+      font-size: 0.9rem;
+      text-decoration: none;
+      border: 1px solid var(--secondary);
+      padding: 8px 16px;
+      border-radius: 4px;
+      transition: all 0.3s ease;
+      background: rgba(188, 19, 254, 0.1);
+      cursor: pointer;
+      color: var(--secondary);
+      border: 1px solid var(--secondary);
+    }
+    .about-btn:hover, .anycoder-link:hover {
+      background: var(--secondary);
+      color: #fff;
+      box-shadow: 0 0 15px var(--secondary);
+    }
+    /* --- Main Content --- */
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 3rem 1rem;
+      max-width: 1200px;
+      margin: 0 auto;
+      width: 100%;
+    }
+    /* --- Hero Section --- */
+    .hero {
+      text-align: center;
+      margin-bottom: 4rem;
+      animation: fadeInDown 1s ease-out;
+    }
+    h1 {
+      font-size: 3.5rem;
+      margin-bottom: 1rem;
+      background: linear-gradient(90deg, #fff, var(--primary));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .subtitle {
+      font-size: 1.2rem;
+      color: #aaa;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    /* --- Input Interface --- */
+    .interface-panel {
+      width: 100%;
+      max-width: 700px;
+      background: var(--bg-panel);
+      backdrop-filter: blur(15px);
+      border: var(--glass-border);
+      border-radius: 15px;
+      padding: 2rem;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+      position: relative;
+      overflow: hidden;
+    }
+    .interface-panel::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, var(--primary), transparent);
+      animation: scanline 3s infinite linear;
+    }
+    .input-group {
+      display: flex;
+      gap: 10px;
+      position: relative;
+    }
+    input[type="text"] {
+      flex: 1;
+      background: rgba(0, 0, 0, 0.5);
+      border: 1px solid #333;
+      color: #fff;
+      padding: 15px 20px;
+      font-family: 'Roboto Mono', monospace;
+      font-size: 1rem;
+      border-radius: 8px;
+      outline: none;
+      transition: border-color 0.3s;
+    }
+    input[type="text"]:focus {
+      border-color: var(--primary);
+      box-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
+    }
+    button#ask-btn {
+      background: linear-gradient(135deg, var(--primary), #00a8ff);
+      color: #000;
+      font-weight: 700;
+      border: none;
+      padding: 0 30px;
+      border-radius: 8px;
+      cursor: pointer;
+      text-transform: uppercase;
+      font-family: 'Rajdhani', sans-serif;
+      letter-spacing: 1px;
+      transition: transform 0.2s, box-shadow 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    button#ask-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
+    }
+    button#ask-btn:active {
+      transform: translateY(0);
+    }
+    /* --- Loading State --- */
+    .loader {
+      display: none;
+      margin-top: 2rem;
+      text-align: center;
+      color: var(--primary);
+      font-family: 'Roboto Mono', monospace;
+    }
+    .loader.active {
+      display: block;
+    }
+    .spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid rgba(0, 243, 255, 0.3);
+      border-top: 3px solid var(--primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 10px;
+    }
+    /* --- Results Grid --- */
+    .results-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+      width: 100%;
+      margin-top: 3rem;
+      opacity: 0;
+      transform: translateY(20px);
+      transition: all 0.8s ease;
+    }
+    .results-container.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .card {
+      background: rgba(20, 20, 30, 0.6);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      border-radius: 12px;
+      padding: 1.5rem;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .card:hover {
+      transform: translateY(-5px);
+      border-color: var(--primary);
+      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
+    }
+    .card-icon {
+      font-size: 2rem;
+      color: var(--secondary);
+      margin-bottom: 1rem;
+    }
+    .card h3 {
+      color: var(--primary);
+      margin-bottom: 0.5rem;
+      font-size: 1.4rem;
+    }
+    .card p {
+      color: #ccc;
+      line-height: 1.6;
+      font-size: 0.95rem;
+    }
+    .probability-bar {
+      height: 4px;
+      background: #333;
+      margin-top: 1rem;
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .probability-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--secondary), var(--primary));
+      width: 0%;
+      transition: width 1.5s ease-out;
+    }
+    /* --- Footer --- */
+    footer {
+      text-align: center;
+      padding: 2rem;
+      color: #555;
+      font-size: 0.8rem;
+      border-top: var(--glass-border);
+      margin-top: auto;
+    }
+    /* --- Modal Styles --- */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(5px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+    }
+    .modal-overlay.open {
+      opacity: 1;
+      pointer-events: all;
+    }
+    .modal-content {
+      background: #0f0f15;
+      border: 1px solid var(--primary);
+      box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
+      padding: 2.5rem;
+      border-radius: 12px;
+      max-width: 600px;
+      width: 90%;
+      position: relative;
+      transform: translateY(20px);
+      transition: transform 0.3s ease;
+    }
+    .modal-overlay.open .modal-content {
+      transform: translateY(0);
+    }
+    .close-modal {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      background: transparent;
+      border: none;
+      color: #888;
+      font-size: 1.5rem;
+      cursor: pointer;
+      transition: color 0.3s;
+    }
+    .close-modal:hover {
+      color: var(--primary);
+    }
+    .modal-body h2 {
+      color: var(--primary);
+      margin-bottom: 1.5rem;
+      font-size: 2rem;
+      border-bottom: 1px solid rgba(255,255,255,0.1);
+      padding-bottom: 10px;
+    }
+    .modal-body h3 {
+      color: var(--secondary);
+      margin-top: 1.5rem;
+      margin-bottom: 0.5rem;
+      font-size: 1.2rem;
+    }
+    .modal-body p, .modal-body li {
+      color: #ccc;
+      line-height: 1.6;
+      font-size: 0.95rem;
+    }
+    .modal-body ul {
+      padding-left: 20px;
+      margin-bottom: 1rem;
+    }
+    .tech-tag {
+      display: inline-block;
+      background: rgba(255, 255, 255, 0.05);
+      padding: 4px 8px;
+      border-radius: 4px;
+      margin-right: 5px;
+      margin-bottom: 5px;
+      font-family: 'Roboto Mono', monospace;
+      font-size: 0.8rem;
+      color: var(--primary);
+    }
+    /* --- Animations --- */
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    @keyframes scanline {
+      0% { left: -100%; }
+      100% { left: 100%; }
+    }
+    @keyframes fadeInDown {
+      from { opacity: 0; transform: translateY(-20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    /* --- Responsive --- */
+    @media (max-width: 768px) {
+      h1 { font-size: 2.2rem; }
+      .interface-panel { padding: 1.5rem; }
+      .input-group { flex-direction: column; }
+      button#ask-btn { width: 100%; justify-content: center; padding: 15px; }
+      .header-actions { gap: 10px; }
+      .anycoder-link, .about-btn { padding: 6px 10px; font-size: 0.8rem; }
+    }
+  </style>
 </head>
+<body>
+  <!-- Canvas for Particle Background -->
+  <canvas id="bg-canvas"></canvas>
+  <header>
+    <div class="logo">
+      <i class="fa-solid fa-brain"></i>
+      NEXUS AI
+    </div>
+    <div class="header-actions">
+      <button id="about-btn" class="about-btn">
+        <i class="fa-solid fa-circle-info"></i> Sobre
+      </button>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+        Built with anycoder
+      </a>
+    </div>
+  </header>
+  <main>
+    <section class="hero">
+      <h1>Quais planos tem para nós?</h1>
+      <p class="subtitle">Consulte a inteligência artificial central para descobrir os cenários futuros destinados à
+        humanidade.</p>
+    </section>
+    <section class="interface-panel">
+      <div class="input-group">
+        <input type="text" id="user-input" placeholder="Digite um setor (ex: tecnologia, espaço, saúde) ou deixe em branco..." autocomplete="off">
+        <button id="ask-btn">
+          <i class="fa-solid fa-microchip"></i> Consultar
+        </button>
+      </div>
+      <div class="loader" id="loader">
+        <div class="spinner"></div>
+        <p id="loading-text">Processando dados temporais...</p>
+      </div>
+    </section>
+    <section class="results-container" id="results">
+      <!-- Cards will be injected here via JS -->
+    </section>
+  </main>
+  <footer>
+    &copy; 2023 Nexus AI Systems. Todos os cenários são probabilísticos.
+  </footer>
+  <!-- Modal de Descrição do App -->
+  <div class="modal-overlay" id="about-modal">
+    <div class="modal-content">
+      <button class="close-modal" id="close-about"><i class="fa-solid fa-xmark"></i></button>
+      <div class="modal-body">
+        <h2>Sobre o NEXUS AI</h2>
+        <p>O <strong>NEXUS AI</strong> é uma aplicação web interativa que simula uma interface de "Oráculo Futurista". O objetivo é fornecer uma experiência imersiva de como uma Inteligência Artificial avançada poderia apresentar previsões sobre o destino da humanidade.</p>
+        <h3><i class="fa-solid fa-palette"></i> Design & Estética</h3>
+        <p>Inspirado no movimento <em>Cyberpunk</em> e interfaces Sci-Fi, o app utiliza:</p>
+        <ul>
+          <li><strong>Paleta Neon:</strong> Ciano e Roxo sobre fundo escuro para alto contraste.</li>
+          <li><strong>Glassmorphism:</strong> Painéis translúcidos com desfoque de fundo.</li>
+          <li><strong>Fundo Vivo:</strong> Uma rede neural animada usando HTML5 Canvas.</li>
+        </ul>
+        <h3><i class="fa-solid fa-gears"></i> Funcionalidades</h3>
+        <ul>
+          <li>Simulação de processamento de dados com feedback visual.</li>
+          <li>Geração dinâmica de cenários baseados em um banco de dados fictício.</li>
+          <li>Visualização de probabilidade através de barras de progresso animadas.</li>
+          <li>Interface totalmente responsiva para dispositivos móveis e desktop.</li>
+        </ul>
+        <h3><i class="fa-solid fa-code"></i> Stack Tecnológico</h3>
+        <div style="margin-top: 10px;">
+          <span class="tech-tag">HTML5 Semântico</span>
+          <span class="tech-tag">CSS3 Moderno</span>
+          <span class="tech-tag">JavaScript (ES6+)</span>
+          <span class="tech-tag">Canvas API</span>
+          <span class="tech-tag">FontAwesome</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    // --- 1. Canvas Background Animation (Particle Network) ---
+    const canvas = document.getElementById('bg-canvas');
+    const ctx = canvas.getContext('2d');
+    let width, height;
+    let particles = [];
+    function resize() {
+      width = canvas.width = window.innerWidth;
+      height = canvas.height = window.innerHeight;
+    }
+    class Particle {
+      constructor() {
+        this.x = Math.random() * width;
+        this.y = Math.random() * height;
+        this.vx = (Math.random() - 0.5) * 0.5;
+        this.vy = (Math.random() - 0.5) * 0.5;
+        this.size = Math.random() * 2 + 1;
+      }
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        if (this.x < 0 || this.x > width) this.vx *= -1;
+        if (this.y < 0 || this.y > height) this.vy *= -1;
+      }
+      draw() {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(0, 243, 255, 0.5)';
+        ctx.fill();
+      }
+    }
+    function initParticles() {
+      particles = [];
+      const count = Math.min(Math.floor(window.innerWidth / 10), 100);
+      for (let i = 0; i < count; i++) {
+        particles.push(new Particle());
+      }
+    }
+    function animate() {
+      ctx.clearRect(0, 0, width, height);
+      particles.forEach((p, index) => {
+        p.update();
+        p.draw();
+        // Draw connections
+        for (let j = index + 1; j < particles.length; j++) {
+          const p2 = particles[j];
+          const dx = p.x - p2.x;
+          const dy = p.y - p2.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < 150) {
+            ctx.beginPath();
+            ctx.strokeStyle = `rgba(0, 243, 255, ${1 - dist/150})`;
+            ctx.lineWidth = 0.5;
+            ctx.moveTo(p.x, p.y);
+            ctx.lineTo(p2.x, p2.y);
+            ctx.stroke();
+          }
+        }
+      });
+      requestAnimationFrame(animate);
+    }
+    window.addEventListener('resize', () => {
+      resize();
+      initParticles();
+    });
+    resize();
+    initParticles();
+    animate();
+    // --- 2. Application Logic (The Oracle) ---
+    const plansDatabase = [
+      {
+        title: "Fusão a Frio Comercial",
+        desc: "A humanidade dominará a fusão nuclear estável, eliminando a crise energética global e permitindo a dessalinização em massa dos oceanos.",
+        icon: "fa-atom",
+        probability: 87
+      },
+      {
+        title: "Colonização de Marte",
+        desc: "O primeiro assentamento autossustentável será estabelecido no Planeta Vermelho, marcando o início da espécie humana como multiplanetária.",
+        icon: "fa-rocket",
+        probability: 64
+      },
+      {
+        title: "Interfaces Neurais Diretas",
+        desc: "A linguagem verbal se tornará obsoleta. O pensamento será transmitido via dados diretos entre cérebros e redes digitais.",
+        icon: "fa-network-wired",
+        probability: 92
+      },
+      {
+        title: "Longevidade Extrema",
+        desc: "Com a edição genética avançada e nanobots, a expectativa de vida média ultrapassará os 150 anos com boa qualidade de saúde.",
+        icon: "fa-dna",
+        probability: 78
+      },
+      {
+        title: "Economia Pós-Escassez",
+        desc: "A automação completa da produção levará a um sistema onde os bens materiais são gratuitos, focando a sociedade na criatividade e exploração.",
+        icon: "fa-robot",
+        probability: 45
+      },
+      {
+        title: "Terraformação Local",
+        desc: "Tecnologias atmosféricas avançadas permitirão reverter o efeito estufa em áreas críticas da Terra em questão de anos, não décadas.",
+        icon: "fa-earth-americas",
+        probability: 71
+      }
+    ];
+    const askBtn = document.getElementById('ask-btn');
+    const userInput = document.getElementById('user-input');
+    const loader = document.getElementById('loader');
+    const resultsContainer = document.getElementById('results');
+    const loadingText = document.getElementById('loading-text');
+    const loadingMessages = [
+      "Analisando parâmetros caóticos...",
+      "Consultando banco de dados do futuro...",
+      "Calculando probabilidades de Timeline...",
+      "Sincronizando com a rede neural global..."
+    ];
+    function getRandomPlans(count) {
+      const shuffled = [...plansDatabase].sort(() => 0.5 - Math.random());
+      return shuffled.slice(0, count);
+    }
+    function createCard(plan) {
+      const card = document.createElement('div');
+      card.className = 'card';
+      card.innerHTML = `
+        <div class="card-icon"><i class="fa-solid ${plan.icon}"></i></div>
+        <h3>${plan.title}</h3>
+        <p>${plan.desc}</p>
+        <div style="display:flex; justify-content:space-between; margin-top:10px; font-size:0.8rem; color:#888;">
+          <span>Probabilidade</span>
+          <span>${plan.probability}%</span>
+        </div>
+        <div class="probability-bar">
+          <div class="probability-fill" style="width: 0%" data-width="${plan.probability}%"></div>
+        </div>
+      `;
+      return card;
+    }
+    askBtn.addEventListener('click', () => {
+      // UI Feedback: Start loading
+      resultsContainer.innerHTML = '';
+      resultsContainer.classList.remove('visible');
+      loader.classList.add('active');
+      // Cycle loading text
+      let msgIndex = 0;
+      const msgInterval = setInterval(() => {
+        loadingText.innerText = loadingMessages[msgIndex % loadingMessages.length];
+        msgIndex++;
+      }, 800);
+      // Simulate processing delay
+      setTimeout(() => {
+        clearInterval(msgInterval);
+        loader.classList.remove('active');
+        // Logic: Determine number of plans (random 2 to 4)
+        const count = Math.floor(Math.random() * 3) + 2;
+        const selectedPlans = getRandomPlans(count);
+        // Generate Cards
+        selectedPlans.forEach(plan => {
+          const card = createCard(plan);
+          resultsContainer.appendChild(card);
         });
+        // Show container with animation
+        resultsContainer.classList.add('visible');
+        // Animate probability bars after cards appear
+        setTimeout(() => {
+          document.querySelectorAll('.probability-fill').forEach(bar => {
+            bar.style.width = bar.getAttribute('data-width');
+          });
+        }, 300);
+      }, 2500); // 2.5s delay
+    });
+    // Allow 'Enter' key to trigger search
+    userInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        askBtn.click();
+      }
+    });
+    // --- 3. Modal Logic (About Section) ---
+    const aboutBtn = document.getElementById('about-btn');
+    const modal = document.getElementById('about-modal');
+    const closeBtn = document.getElementById('close-about');
+    function openModal() {
+      modal.classList.add('open');
+    }
+    function closeModal() {
+      modal.classList.remove('open');
+    }
+    aboutBtn.addEventListener('click', openModal);
+    closeBtn.addEventListener('click', closeModal);
+    // Close modal when clicking outside content
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) {
+        closeModal();
+      }
+    });
+  </script>
 </body>
 </html>