Created
April 18, 2026 12:57
-
-
Save iggyughgi-glitch/fdc2e5c05e9c90bc75a30ffed174795e to your computer and use it in GitHub Desktop.
Dev
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 // Tactical Search UI Prototype</title> | |
| <style> | |
| :root { | |
| --space-black: #050507; | |
| --titanium: #111114; | |
| --hud-accent: #00F0FF; /* Tactical Cyan */ | |
| --text-main: #E0E0E0; | |
| --grid-line: rgba(0, 240, 255, 0.05); | |
| } | |
| body, html { | |
| margin: 0; padding: 0; height: 100vh; width: 100vw; | |
| background-color: var(--space-black); | |
| color: var(--text-main); | |
| font-family: -apple-system, sans-serif; | |
| overflow: hidden; /* Scroll is handled by the container */ | |
| /* Tactical Radar Grid Background */ | |
| background-image: | |
| linear-gradient(var(--grid-line) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| /* HUD Overlay Text */ | |
| .hud-overlay { | |
| position: fixed; top: 20px; left: 20px; z-index: 9999; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 11px; color: var(--hud-accent); letter-spacing: 2px; | |
| pointer-events: none; | |
| } | |
| /* The 3D Viewport */ | |
| .scroll-viewport { | |
| width: 100%; height: 100%; | |
| display: flex; | |
| perspective: 1000px; /* Gives the 3D depth */ | |
| scroll-behavior: smooth; | |
| box-sizing: border-box; | |
| padding: 50px; | |
| gap: 40px; /* Space between cards */ | |
| } | |
| /* HIDE SCROLLBARS FOR SLEEK LOOK */ | |
| .scroll-viewport::-webkit-scrollbar { display: none; } | |
| /* ----------------------------------- | |
| ADAPTIVE ORIENTATION LOGIC | |
| ----------------------------------- */ | |
| /* UPRIGHT (PORTRAIT) */ | |
| @media (orientation: portrait) { | |
| .scroll-viewport { | |
| flex-direction: column; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| align-items: center; /* Centers the boxes horizontally */ | |
| } | |
| } | |
| /* SIDEWAYS (LANDSCAPE) */ | |
| @media (orientation: landscape) { | |
| .scroll-viewport { | |
| flex-direction: row; | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| align-items: center; /* Centers the boxes vertically */ | |
| } | |
| } | |
| /* ----------------------------------- | |
| THE 3D SQUARE CARDS | |
| ----------------------------------- */ | |
| .tactical-card { | |
| flex: 0 0 auto; | |
| width: 260px; | |
| height: 260px; /* Perfect Square */ | |
| background: var(--titanium); | |
| border: 1px solid rgba(0, 240, 255, 0.15); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.9), inset 0 0 20px rgba(0, 240, 255, 0.03); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| padding: 25px; | |
| position: relative; | |
| transform-style: preserve-3d; /* Allows elements inside to pop out */ | |
| transition: box-shadow 0.3s; | |
| } | |
| /* Corner Targeting Brackets */ | |
| .tactical-card::before, .tactical-card::after { | |
| content: ''; position: absolute; width: 15px; height: 15px; | |
| } | |
| .tactical-card::before { top: -1px; left: -1px; border-top: 2px solid var(--hud-accent); border-left: 2px solid var(--hud-accent); } | |
| .tactical-card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--hud-accent); border-right: 2px solid var(--hud-accent); } | |
| /* Inner Content with 3D Pop (TranslateZ) */ | |
| .card-telemetry { font-family: 'Courier New', monospace; font-size: 10px; color: var(--hud-accent); transform: translateZ(20px); } | |
| .card-title { font-weight: 800; font-size: 22px; margin: 10px 0; transform: translateZ(40px); /* Pops out significantly */ text-shadow: 0 5px 10px rgba(0,0,0,0.5); } | |
| .card-body { font-size: 13px; color: #888; line-height: 1.5; transform: translateZ(25px); } | |
| .card-footer { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px; transform: translateZ(15px); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="hud-overlay"> | |
| AURA_CORE // ENG_SANDBOX<br> | |
| <span id="orientation-status">SYS_ALIGN: INITIATING...</span> | |
| </div> | |
| <div class="scroll-viewport" id="scroll-engine"> | |
| </div> | |
| <script> | |
| const engine = document.getElementById('scroll-engine'); | |
| const statusText = document.getElementById('orientation-status'); | |
| // 1. Generate Dummy Data (Simulated Search Results) | |
| const dummyResults = [ | |
| { id: "01", title: "Target Acquired", desc: "First node identified in the data stream. Privacy protocols are holding steady." }, | |
| { id: "02", title: "Quantum Routing", desc: "Bypassing standard trackers. Routing query through encrypted proxy networks." }, | |
| { id: "03", title: "Data Scrubbing", desc: "Removing 43 ad-trackers from the destination URL. Safe payload ready." }, | |
| { id: "04", title: "Node Alpha", desc: "Historical data retrieval complete. Cross-referencing against secure databases." }, | |
| { id: "05", title: "Signal Lost", desc: "Attempted interference blocked by Aura Shield. Connection re-established." }, | |
| { id: "06", title: "Telemetry Sync", desc: "Finalizing data array. UI rendering engine operating at maximum efficiency." } | |
| ]; | |
| // 2. Inject Cards into the HTML | |
| dummyResults.forEach(data => { | |
| const card = document.createElement('div'); | |
| card.className = 'tactical-card'; | |
| card.innerHTML = ` | |
| <div class="card-telemetry">OBJ_${data.id} // SECURE</div> | |
| <div class="card-title">${data.title}</div> | |
| <div class="card-body">${data.desc}</div> | |
| <div class="card-footer">TAP TO ENGAGE</div> | |
| `; | |
| engine.appendChild(card); | |
| }); | |
| // 3. THE 3D PHYSICS ENGINE | |
| const cards = document.querySelectorAll('.tactical-card'); | |
| function calculateParallax() { | |
| // Determine if the phone is upright or sideways | |
| const isPortrait = window.innerHeight > window.innerWidth; | |
| statusText.innerText = isPortrait ? "SYS_ALIGN: VERTICAL (Y-AXIS)" : "SYS_ALIGN: HORIZONTAL (X-AXIS)"; | |
| // Find the exact center of the screen | |
| const centerPoint = isPortrait ? window.innerHeight / 2 : window.innerWidth / 2; | |
| cards.forEach(card => { | |
| const rect = card.getBoundingClientRect(); | |
| // Find the center of this specific card | |
| const cardCenter = isPortrait | |
| ? rect.top + (rect.height / 2) | |
| : rect.left + (rect.width / 2); | |
| // Calculate how far the card is from the center of the screen | |
| const distance = cardCenter - centerPoint; | |
| // Convert that distance into a rotation angle (Max 40 degrees) | |
| let rotation = (distance / centerPoint) * 40; | |
| // Cap the rotation so it doesn't spin wildly | |
| rotation = Math.max(-40, Math.min(40, rotation)); | |
| // Apply the 3D transform based on orientation | |
| if (isPortrait) { | |
| // Upright: Tilt on the X-axis (Pitch) | |
| card.style.transform = `rotateX(${-rotation}deg)`; | |
| } else { | |
| // Sideways: Tilt on the Y-axis (Yaw) | |
| card.style.transform = `rotateY(${rotation}deg)`; | |
| } | |
| }); | |
| } | |
| // Attach the physics engine to the scroll wheel and screen rotation | |
| engine.addEventListener('scroll', calculateParallax); | |
| window.addEventListener('resize', calculateParallax); | |
| // Run once on load to set initial tilts | |
| calculateParallax(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment