Spaces:

REALBOSS
/

anycoder-6671ee06

Running

App Files Files Community

REALBOSS commited on 25 days ago

Commit

973dd56

verified ·

1 Parent(s): 45792f2

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +586 -19

index.html CHANGED Viewed

@@ -1,19 +1,586 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</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.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>