Spaces:
Running
Running
| <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> | |
| © 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> |