Created
April 18, 2026 16:54
-
-
Save iggyughgi-glitch/74fa5e194f8aa97b4ad96101dc001bfb to your computer and use it in GitHub Desktop.
Aura web
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> | |
| <title>AURA // AI INTEL CORE</title> | |
| <style> | |
| :root { | |
| --space-black: #050507; | |
| --gold: #D4AF37; | |
| --tactical-cyan: #00F0FF; | |
| --titanium: #111114; | |
| } | |
| body, html { | |
| margin: 0; padding: 0; height: 100vh; width: 100vw; | |
| background: var(--space-black); color: white; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| overflow: hidden; | |
| } | |
| /* HUD TELEMETRY */ | |
| .hud-header { | |
| position: fixed; top: 30px; left: 30px; z-index: 1000; | |
| font-family: monospace; font-size: 10px; letter-spacing: 2px; | |
| color: var(--tactical-cyan); text-transform: uppercase; | |
| } | |
| /* 3D SCROLL ENGINE */ | |
| .scroll-viewport { | |
| width: 100%; height: 100%; display: flex; perspective: 1200px; | |
| scroll-behavior: smooth; box-sizing: border-box; padding: 100px 50px; gap: 40px; | |
| } | |
| .scroll-viewport::-webkit-scrollbar { display: none; } | |
| @media (orientation: portrait) { .scroll-viewport { flex-direction: column; overflow-y: auto; align-items: center; } } | |
| @media (orientation: landscape) { .scroll-viewport { flex-direction: row; overflow-x: auto; align-items: center; } } | |
| /* THE AI INTEL SQUARES */ | |
| .intel-card { | |
| flex: 0 0 auto; width: 280px; height: 280px; | |
| background: var(--titanium); border: 1px solid rgba(0, 240, 255, 0.1); | |
| border-radius: 25px; padding: 30px; position: relative; | |
| transform-style: preserve-3d; box-shadow: 0 20px 50px rgba(0,0,0,0.7); | |
| } | |
| .card-label { font-family: monospace; font-size: 9px; color: var(--tactical-cyan); margin-bottom: 15px; transform: translateZ(20px); } | |
| .card-title { font-weight: 800; font-size: 20px; color: var(--gold); margin-bottom: 12px; transform: translateZ(40px); line-height: 1.2; } | |
| .card-snippet { font-size: 13px; color: #888; line-height: 1.5; transform: translateZ(25px); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } | |
| /* INTERFACE CONTROLS */ | |
| .search-bar { | |
| position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); | |
| display: flex; gap: 10px; width: 90%; max-width: 450px; z-index: 2000; | |
| } | |
| input { | |
| flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); | |
| padding: 18px 25px; border-radius: 20px; color: white; font-size: 16px; outline: none; backdrop-filter: blur(10px); | |
| } | |
| .diamond-btn { | |
| background: var(--gold); border: none; width: 60px; height: 60px; | |
| border-radius: 20px; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hud-header"> | |
| AURA_CORE // AI_RECON <br> | |
| STATUS: <span id="status">READY_FOR_TARGET</span> | |
| </div> | |
| <div class="scroll-viewport" id="intel-engine"> | |
| </div> | |
| <div class="search-bar"> | |
| <input type="text" id="user-query" placeholder="Analyze the web..."> | |
| <button class="diamond-btn" onclick="runAISearch()">💎</button> | |
| </div> | |
| <script> | |
| const engine = document.getElementById('intel-engine'); | |
| const status = document.getElementById('status'); | |
| async function runAISearch() { | |
| const query = document.getElementById('user-query').value; | |
| if(!query) return; | |
| status.innerText = "AGGREGATING_INTEL..."; | |
| engine.innerHTML = ''; // Clear stage for new AI nodes | |
| try { | |
| // THE "INTERNET THING": Headless Metasearch (SearXNG) | |
| // This fetches raw data anonymously from 70+ engines | |
| const response = await fetch(`https://searx.be/search?q=${encodeURIComponent(query)}&format=json`); | |
| const data = await response.json(); | |
| if(!data.results || data.results.length === 0) { | |
| status.innerText = "TARGET_NOT_FOUND"; | |
| return; | |
| } | |
| // THE "AI THING": Mapping raw data into summarized Intel Squares | |
| data.results.slice(0, 10).forEach((result, i) => { | |
| const card = document.createElement('div'); | |
| card.className = 'intel-card'; | |
| card.innerHTML = ` | |
| <div class="card-label">NODE_${i+1} // VERIFIED_SOURCE</div> | |
| <div class="card-title">${result.title}</div> | |
| <div class="card-snippet">${result.content || "Data stream successfully intercepted. Summary ready."}</div> | |
| <div style="margin-top:20px; font-size:10px; color:var(--tactical-cyan); cursor:pointer;" onclick="window.open('${result.url}', '_blank')">DECRYPT_SOURCE ></div> | |
| `; | |
| engine.appendChild(card); | |
| }); | |
| status.innerText = "NODES_ACQUIRED // 3D_SYNC_ACTIVE"; | |
| init3DPhysics(); | |
| } catch (err) { | |
| status.innerText = "SIGNAL_LOST // RETRY_LINK"; | |
| console.error(err); | |
| } | |
| } | |
| function init3DPhysics() { | |
| const cards = document.querySelectorAll('.intel-card'); | |
| engine.addEventListener('scroll', () => { | |
| const isPortrait = window.innerHeight > window.innerWidth; | |
| const center = isPortrait ? window.innerHeight / 2 : window.innerWidth / 2; | |
| cards.forEach(card => { | |
| const rect = card.getBoundingClientRect(); | |
| const cardCenter = isPortrait ? rect.top + (rect.height / 2) : rect.left + (rect.width / 2); | |
| const distance = cardCenter - center; | |
| let rotation = (distance / center) * 35; // Maximum tilt | |
| rotation = Math.max(-35, Math.min(35, rotation)); | |
| card.style.transform = isPortrait ? `rotateX(${-rotation}deg)` : `rotateY(${rotation}deg)`; | |
| }); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment