Spaces:

REALBOSS
/

anycoder-6671ee06

Running

File size: 20,878 Bytes

<!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>