Spaces:
Running
Running
| <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"> | |
| <title>Aether Ruins | Built with anycoder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <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=Cinzel:wght@400;700;900&family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| 'ancient': ['Cinzel', 'serif'], | |
| 'tech': ['Orbitron', 'sans-serif'], | |
| 'data': ['Rajdhani', 'sans-serif'], | |
| }, | |
| colors: { | |
| 'ruin-stone': '#1a1a2e', | |
| 'ruin-dark': '#0f0f1a', | |
| 'energy-blue': '#00d4ff', | |
| 'energy-gold': '#ffd700', | |
| 'energy-cyan': '#00f5d4', | |
| 'energy-purple': '#9d4edd', | |
| }, | |
| animation: { | |
| 'pulse-glow': 'pulse-glow 3s ease-in-out infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'scan': 'scan 4s linear infinite', | |
| 'energy-flow': 'energy-flow 8s linear infinite', | |
| 'ancient-breathe': 'ancient-breathe 8s ease-in-out infinite', | |
| 'flicker': 'flicker 0.15s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| 'pulse-glow': { | |
| '0%, 100%': { boxShadow: '0 0 20px rgba(0, 212, 255, 0.3), 0 0 60px rgba(0, 212, 255, 0.1)' }, | |
| '50%': { boxShadow: '0 0 40px rgba(0, 212, 255, 0.6), 0 0 100px rgba(0, 212, 255, 0.2)' }, | |
| }, | |
| 'float': { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| 'scan': { | |
| '0%': { transform: 'translateY(-100%)' }, | |
| '100%': { transform: 'translateY(100vh)' }, | |
| }, | |
| 'energy-flow': { | |
| '0%': { backgroundPosition: '0% 50%' }, | |
| '100%': { backgroundPosition: '200% 50%' }, | |
| }, | |
| 'ancient-breathe': { | |
| '0%, 100%': { opacity: '0.4', transform: 'scale(1)' }, | |
| '50%': { opacity: '0.8', transform: 'scale(1.02)' }, | |
| }, | |
| 'flicker': { | |
| '0%, 100%': { opacity: '1' }, | |
| '50%': { opacity: '0.3' }, | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background: #0a0a12; | |
| font-family: 'Rajdhani', sans-serif; | |
| touch-action: none; | |
| user-select: none; | |
| } | |
| /* ===== LOADING SCREEN ===== */ | |
| #loader { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| background: #0a0a12; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| transition: opacity 1.5s ease, visibility 1.5s ease; | |
| } | |
| #loader.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| } | |
| .loader-ring { | |
| width: 120px; | |
| height: 120px; | |
| border: 2px solid rgba(0, 212, 255, 0.1); | |
| border-top: 2px solid #00d4ff; | |
| border-radius: 50%; | |
| animation: spin 2s linear infinite; | |
| position: relative; | |
| } | |
| .loader-ring::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 10px; | |
| border: 2px solid rgba(157, 78, 221, 0.1); | |
| border-top: 2px solid #9d4edd; | |
| border-radius: 50%; | |
| animation: spin 3s linear infinite reverse; | |
| } | |
| .loader-ring::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 25px; | |
| border: 1px solid rgba(0, 245, 212, 0.2); | |
| border-radius: 50%; | |
| animation: pulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } } | |
| /* ===== 3D SCENE ===== */ | |
| #scene-container { | |
| position: fixed; | |
| inset: 0; | |
| perspective: 1200px; | |
| overflow: hidden; | |
| } | |
| #world { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| transform-style: preserve-3d; | |
| transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| /* ===== ENVIRONMENT ZONES ===== */ | |
| .zone { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| transform-style: preserve-3d; | |
| backface-visibility: hidden; | |
| } | |
| /* Center - The Grand Plaza */ | |
| .zone-center { | |
| transform: translateZ(0); | |
| } | |
| /* North - The Monolith */ | |
| .zone-north { | |
| transform: translateZ(-100vh) rotateY(180deg); | |
| } | |
| /* South - The Energy Core */ | |
| .zone-south { | |
| transform: translateZ(100vh) rotateY(0deg); | |
| } | |
| /* East - The Star Gate */ | |
| .zone-east { | |
| transform: translateX(100vw) rotateY(-90deg); | |
| transform-origin: left center; | |
| } | |
| /* West - The Archive */ | |
| .zone-west { | |
| transform: translateX(-100vw) rotateY(90deg); | |
| transform-origin: right center; | |
| } | |
| /* ===== ATMOSPHERIC EFFECTS ===== */ | |
| .starfield { | |
| position: absolute; | |
| inset: -50%; | |
| width: 200%; | |
| height: 200%; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .star { | |
| position: absolute; | |
| background: white; | |
| border-radius: 50%; | |
| animation: twinkle var(--duration) ease-in-out infinite; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: var(--min-opacity); transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.5); } | |
| } | |
| .nebula { | |
| position: absolute; | |
| inset: -30%; | |
| width: 160%; | |
| height: 160%; | |
| pointer-events: none; | |
| z-index: 1; | |
| opacity: 0.15; | |
| background: radial-gradient(ellipse at 30% 20%, rgba(0, 212, 255, 0.3) 0%, transparent 50%), | |
| radial-gradient(ellipse at 70% 80%, rgba(157, 78, 221, 0.25) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 50%, rgba(0, 245, 212, 0.1) 0%, transparent 60%); | |
| filter: blur(60px); | |
| animation: nebula-drift 30s ease-in-out infinite; | |
| } | |
| @keyframes nebula-drift { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(5%, -3%) scale(1.05); } | |
| 66% { transform: translate(-3%, 5%) scale(0.95); } | |
| } | |
| /* Energy particles */ | |
| .energy-stream { | |
| position: absolute; | |
| width: 2px; | |
| height: 100px; | |
| background: linear-gradient(to bottom, transparent, #00d4ff, transparent); | |
| opacity: 0.6; | |
| animation: stream-float var(--speed) linear infinite; | |
| animation-delay: var(--delay); | |
| } | |
| @keyframes stream-float { | |
| 0% { transform: translateY(110vh) translateX(0); opacity: 0; } | |
| 10% { opacity: 0.6; } | |
| 90% { opacity: 0.6; } | |
| 100% { transform: translateY(-10vh) translateX(var(--drift)); opacity: 0; } | |
| } | |
| /* ===== ANCIENT STRUCTURES ===== */ | |
| .ancient-pillar { | |
| position: absolute; | |
| background: linear-gradient(180deg, | |
| #1a1a2e 0%, | |
| #2a2a4e 20%, | |
| #1e1e3a 50%, | |
| #2a2a4e 80%, | |
| #1a1a2e 100%); | |
| border-left: 1px solid rgba(0, 212, 255, 0.15); | |
| border-right: 1px solid rgba(0, 212, 255, 0.1); | |
| overflow: hidden; | |
| } | |
| .ancient-pillar::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 30%; | |
| width: 40%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.05), transparent); | |
| } | |
| .ancient-pillar::after { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -5px; | |
| right: -5px; | |
| height: 8px; | |
| background: linear-gradient(90deg, #ffd700, #00d4ff, #ffd700); | |
| border-radius: 2px; | |
| box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), 0 0 40px rgba(255, 215, 0, 0.2); | |
| animation: pulse-glow 3s ease-in-out infinite; | |
| } | |
| .pillar-glow { | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 150%; | |
| height: 30%; | |
| background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.2) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| /* Floating crystal */ | |
| .floating-crystal { | |
| position: absolute; | |
| width: 60px; | |
| height: 100px; | |
| background: linear-gradient(135deg, | |
| rgba(0, 212, 255, 0.1) 0%, | |
| rgba(0, 212, 255, 0.3) 30%, | |
| rgba(157, 78, 221, 0.2) 70%, | |
| rgba(157, 78, 221, 0.05) 100%); | |
| clip-path: polygon(50% 0%, 100% 30%, 85% 100%, 15% 100%, 0% 30%); | |
| animation: float 6s ease-in-out infinite, crystal-pulse 4s ease-in-out infinite; | |
| box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), inset 0 0 20px rgba(0, 212, 255, 0.1); | |
| } | |
| @keyframes crystal-pulse { | |
| 0%, 100% { filter: brightness(1); } | |
| 50% { filter: brightness(1.3); } | |
| } | |
| /* Energy ring */ | |
| .energy-ring { | |
| position: absolute; | |
| border: 2px solid rgba(0, 212, 255, 0.3); | |
| border-radius: 50%; | |
| animation: ring-expand 4s ease-out infinite; | |
| } | |
| @keyframes ring-expand { | |
| 0% { transform: scale(0.5); opacity: 1; border-width: 3px; } | |
| 100% { transform: scale(2); opacity: 0; border-width: 0px; } | |
| } | |
| /* Ground texture */ | |
| .ruin-ground { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 35%; | |
| background: | |
| linear-gradient(to top, rgba(10, 10, 18, 0.95) 0%, transparent 100%), | |
| repeating-linear-gradient(90deg, | |
| transparent 0px, | |
| transparent 48px, | |
| rgba(0, 212, 255, 0.03) 48px, | |
| rgba(0, 212, 255, 0.03) 50px), | |
| repeating-linear-gradient(0deg, | |
| transparent 0px, | |
| transparent 48px, | |
| rgba(0, 212, 255, 0.02) 48px, | |
| rgba(0, 212, 255, 0.02) 50px); | |
| } | |
| /* ===== INTERACTIVE HOTSPOTS ===== */ | |
| .hotspot { | |
| position: absolute; | |
| cursor: pointer; | |
| transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| z-index: 20; | |
| } | |
| .hotspot:hover { | |
| transform: scale(1.15); | |
| } | |
| .hotspot-ring { | |
| position: absolute; | |
| inset: -15px; | |
| border: 1px solid rgba(0, 212, 255, 0.4); | |
| border-radius: 50%; | |
| animation: hotspot-pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes hotspot-pulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.6; } | |
| 50% { transform: scale(1.3); opacity: 0; } | |
| } | |
| .hotspot-inner { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, rgba(0, 212, 255, 0.05) 100%); | |
| border: 1px solid rgba(0, 212, 255, 0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .hotspot-inner::after { | |
| content: ''; | |
| width: 10px; | |
| height: 10px; | |
| background: #00d4ff; | |
| border-radius: 50%; | |
| box-shadow: 0 0 15px #00d4ff, 0 0 30px rgba(0, 212, 255, 0.5); | |
| animation: flicker 3s ease-in-out infinite; | |
| } | |
| /* ===== SCAN LINE OVERLAY ===== */ | |
| .scan-overlay { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 100; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0, 212, 255, 0.015) 2px, | |
| rgba(0, 212, 255, 0.015) 4px | |
| ); | |
| } | |
| .scan-line { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.15), transparent); | |
| animation: scan 6s linear infinite; | |
| pointer-events: none; | |
| z-index: 101; | |
| } | |
| /* ===== UI LAYER ===== */ | |
| #ui-layer { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 200; | |
| } | |
| #ui-layer > * { | |
| pointer-events: auto; | |
| } | |
| .compass-ring { | |
| width: 80px; | |
| height: 80px; | |
| border: 1px solid rgba(0, 212, 255, 0.2); | |
| border-radius: 50%; | |
| position: relative; | |
| background: rgba(10, 10, 18, 0.6); | |
| backdrop-filter: blur(10px); | |
| } | |
| .compass-ring::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 8px; | |
| border: 1px dashed rgba(0, 212, 255, 0.15); | |
| border-radius: 50%; | |
| } | |
| .compass-needle { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 2px; | |
| height: 28px; | |
| background: linear-gradient(to top, transparent, #00d4ff); | |
| transform-origin: bottom center; | |
| transform: translate(-50%, -100%) rotate(0deg); | |
| transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| } | |
| .compass-needle::after { | |
| content: ''; | |
| position: absolute; | |
| top: -4px; | |
| left: -3px; | |
| width: 0; | |
| height: 0; | |
| border-left: 4px solid transparent; | |
| border-right: 4px solid transparent; | |
| border-bottom: 8px solid #00d4ff; | |
| } | |
| .nav-arrow { | |
| width: 44px; | |
| height: 44px; | |
| border: 1px solid rgba(0, 212, 255, 0.2); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: rgba(0, 212, 255, 0.6); | |
| background: rgba(10, 10, 18, 0.5); | |
| backdrop-filter: blur(5px); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .nav-arrow:hover, .nav-arrow:active { | |
| border-color: rgba(0, 212, 255, 0.6); | |
| color: #00d4ff; | |
| background: rgba(0, 212, 255, 0.1); | |
| box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); | |
| } | |
| .nav-arrow.active { | |
| border-color: #00d4ff; | |
| color: #00d4ff; | |
| box-shadow: 0 0 15px rgba(0, 212, 255, 0.3); | |
| } | |
| .zone-label { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.7rem; | |
| letter-spacing: 3px; | |
| color: rgba(0, 212, 255, 0.4); | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| transition: all 0.5s ease; | |
| } | |
| .zone-label.active { | |
| color: rgba(0, 212, 255, 0.8); | |
| text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); | |
| } | |
| .zone-label.left { left: -100px; transform: translateY(-50%) rotate(-90deg); transform-origin: center; } | |
| .zone-label.right { right: -100px; transform: translateY(-50%) rotate(90deg); transform-origin: center; } | |
| .zone-label.top { top: -50px; left: 50%; transform: translateX(-50%); } | |
| .zone-label.bottom { bottom: -50px; top: auto; left: 50%; transform: translateX(-50%); } | |
| /* ===== MODAL ===== */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(5, 5, 10, 0.85); | |
| backdrop-filter: blur(20px); | |
| z-index: 500; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.5s ease; | |
| } | |
| .modal-overlay.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .modal-content { | |
| max-width: 600px; | |
| width: 90%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 26, 0.98) 100%); | |
| border: 1px solid rgba(0, 212, 255, 0.2); | |
| border-radius: 4px; | |
| padding: 2.5rem; | |
| transform: scale(0.9) translateY(30px); | |
| transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| position: relative; | |
| } | |
| .modal-overlay.open .modal-content { | |
| transform: scale(1) translateY(0); | |
| } | |
| .modal-content::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #00d4ff, #9d4edd, #00d4ff, transparent); | |
| animation: energy-flow 3s linear infinite; | |
| background-size: 200% 100%; | |
| } | |
| .rune-decoration { | |
| font-family: 'Cinzel', serif; | |
| color: rgba(0, 212, 255, 0.15); | |
| font-size: 4rem; | |
| position: absolute; | |
| pointer-events: none; | |
| line-height: 1; | |
| } | |
| /* ===== GLYPH ANIMATION ===== */ | |
| .glyph-text { | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 2px; | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 2px solid #00d4ff; | |
| white-space: nowrap; | |
| animation: typing 2s steps(30) forwards, blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { from { width: 0 } to { width: 100% } } | |
| @keyframes blink-caret { 50% { border-color: transparent; } } | |
| /* ===== SCROLLBAR ===== */ | |
| ::-webkit-scrollbar { width: 4px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.2); border-radius: 2px; } | |
| /* ===== PARTICLE CANVAS ===== */ | |
| #particle-canvas { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 50; | |
| } | |
| /* ===== SWIPE INDICATOR ===== */ | |
| .swipe-hint { | |
| animation: swipe-hint 2s ease-in-out infinite; | |
| } | |
| @keyframes swipe-hint { | |
| 0%, 100% { transform: translateX(0); opacity: 0.3; } | |
| 50% { transform: translateX(15px); opacity: 0.8; } | |
| } | |
| /* ===== RESPONSIVE ===== */ | |
| @media (max-width: 768px) { | |
| .compass-ring { width: 60px; height: 60px; } | |
| .nav-arrow { width: 38px; height: 38px; } | |
| .modal-content { padding: 1.5rem; } | |
| } | |
| /* ===== HOLOGRAM EFFECT ===== */ | |
| .hologram { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hologram::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 180deg, | |
| transparent 0%, | |
| rgba(0, 212, 255, 0.03) 50%, | |
| transparent 100% | |
| ); | |
| animation: hologram-scan 3s linear infinite; | |
| } | |
| @keyframes hologram-scan { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100%); } | |
| } | |
| /* ===== ENERGY BEAMS ===== */ | |
| .energy-beam { | |
| position: absolute; | |
| width: 1px; | |
| height: 200px; | |
| background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.6), transparent); | |
| animation: beam-pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes beam-pulse { | |
| 0%, 100% { opacity: 0.3; height: 150px; } | |
| 50% { opacity: 0.8; height: 250px; } | |
| } | |
| /* ===== ANCIENT TEXT PANEL ===== */ | |
| .ancient-panel { | |
| background: linear-gradient(135deg, | |
| rgba(26, 26, 46, 0.8) 0%, | |
| rgba(15, 15, 26, 0.9) 100%); | |
| border: 1px solid rgba(0, 212, 255, 0.15); | |
| position: relative; | |
| } | |
| .ancient-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: 20px; | |
| right: 20px; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #00d4ff, transparent); | |
| } | |
| .ancient-panel::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 20px; | |
| right: 20px; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #00d4ff, transparent); | |
| } | |
| /* ===== MONOLITH ===== */ | |
| .monolith { | |
| position: absolute; | |
| background: linear-gradient(180deg, | |
| #0f0f1a 0%, | |
| #1a1a2e 10%, | |
| #252545 30%, | |
| #1e1e3a 60%, | |
| #151530 90%, | |
| #0a0a15 100%); | |
| border-left: 1px solid rgba(0, 212, 255, 0.1); | |
| border-right: 1px solid rgba(0, 212, 255, 0.1); | |
| box-shadow: | |
| 0 0 60px rgba(0, 212, 255, 0.1), | |
| inset 0 0 40px rgba(0, 212, 255, 0.02); | |
| } | |
| .monolith::before { | |
| content: ''; | |
| position: absolute; | |
| top: 15%; | |
| left: 20%; | |
| right: 20%; | |
| bottom: 20%; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 20px, | |
| rgba(0, 212, 255, 0.03) 20px, | |
| rgba(0, 212, 255, 0.03) 21px | |
| ); | |
| } | |
| /* ===== CORE CHAMBER ===== */ | |
| .core-chamber { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, | |
| rgba(0, 212, 255, 0.4) 0%, | |
| rgba(0, 212, 255, 0.1) 30%, | |
| rgba(157, 78, 221, 0.05) 60%, | |
| transparent 80%); | |
| animation: core-pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes core-pulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.7; } | |
| 50% { transform: scale(1.1); opacity: 1; } | |
| } | |
| /* ===== GATE ARCH ===== */ | |
| .gate-arch { | |
| position: absolute; | |
| border: 3px solid rgba(0, 212, 255, 0.2); | |
| border-bottom: none; | |
| border-radius: 50% 50% 0 0; | |
| } | |
| .gate-energy { | |
| position: absolute; | |
| background: linear-gradient(180deg, | |
| rgba(0, 212, 255, 0.3) 0%, | |
| rgba(0, 245, 212, 0.1) 50%, | |
| transparent 100%); | |
| border-radius: 50% 50% 0 0; | |
| animation: gate-shimmer 4s ease-in-out infinite; | |
| } | |
| @keyframes gate-shimmer { | |
| 0%, 100% { opacity: 0.5; filter: hue-rotate(0deg); } | |
| 50% { opacity: 0.9; filter: hue-rotate(30deg); } | |
| } | |
| /* ===== ARCHIVE WALL ===== */ | |
| .archive-wall { | |
| position: absolute; | |
| background: linear-gradient(180deg, | |
| #0f0f1a 0%, | |
| #1a1a2e 50%, | |
| #0f0f1a 100%); | |
| border: 1px solid rgba(0, 212, 255, 0.1); | |
| } | |
| .data-scroll { | |
| position: absolute; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.6rem; | |
| color: rgba(0, 212, 255, 0.2); | |
| white-space: nowrap; | |
| animation: data-scroll 20s linear infinite; | |
| } | |
| @keyframes data-scroll { | |
| 0% { transform: translateX(100%); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| /* ===== FOOTER CREDIT ===== */ | |
| .anycoder-badge { | |
| position: fixed; | |
| bottom: 12px; | |
| right: 16px; | |
| z-index: 300; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 0.65rem; | |
| color: rgba(0, 212, 255, 0.5); | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-badge:hover { | |
| color: #00d4ff; | |
| text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); | |
| } | |
| .anycoder-badge a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| /* ===== VIGNETTE ===== */ | |
| .vignette { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 90; | |
| box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.6); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- LOADING SCREEN --> | |
| <div id="loader"> | |
| <div class="loader-ring"></div> | |
| <p class="mt-8 font-tech text-energy-blue text-sm tracking-[0.3em] uppercase animate-pulse">Initializing Aether Link</p> | |
| <p class="mt-2 font-data text-white/30 text-xs tracking-wider">Calibrating dimensional anchors...</p> | |
| </div> | |
| <!-- PARTICLE CANVAS --> | |
| <canvas id="particle-canvas"></canvas> | |
| <!-- SCAN OVERLAY --> | |
| <div class="scan-overlay"></div> | |
| <div class="scan-line"></div> | |
| <!-- VIGNETTE --> | |
| <div class="vignette"></div> | |
| <!-- 3D SCENE --> | |
| <div id="scene-container"> | |
| <div id="world"> | |
| <!-- ========== CENTER: THE GRAND PLAZA ========== --> | |
| <div class="zone zone-center"> | |
| <!-- Starfield --> | |
| <div class="starfield" id="stars-center"></div> | |
| <!-- Nebula --> | |
| <div class="nebula"></div> | |
| <!-- Ground --> | |
| <div class="ruin-ground"></div> | |
| <!-- Ancient Pillars --> | |
| <div class="ancient-pillar" style="left: 8%; bottom: 0; width: 60px; height: 65%;"> | |
| <div class="pillar-glow"></div> | |
| </div> | |
| <div class="ancient-pillar" style="right: 8%; bottom: 0; width: 60px; height: 65%;"> | |
| <div class="pillar-glow"></div> | |
| </div> | |
| <div class="ancient-pillar" style="left: 22%; bottom: 0; width: 45px; height: 50%; opacity: 0.7;"> | |
| <div class="pillar-glow" style="opacity: 0.5;"></div> | |
| </div> | |
| <div class="ancient-pillar" style="right: 22%; bottom: 0; width: 45px; height: 50%; opacity: 0.7;"> | |
| <div class="pillar-glow" style="opacity: 0.5;"></div> | |
| </div> | |
| <!-- Floating Crystal --> | |
| <div class="floating-crystal" style="left: 50%; top: 25%; transform: translateX(-50%);"></div> | |
| <div class="floating-crystal" style="left: 30%; top: 35%; width: 30px; height: 50px; animation-delay: -2s;"></div> | |
| <div class="floating-crystal" style="right: 30%; top: 30%; width: 40px; height: 65px; animation-delay: -4s;"></div> | |
| <!-- Energy Rings --> | |
| <div class="energy-ring" style="left: 50%; top: 35%; width: 200px; height: 200px; transform: translate(-50%, -50%); animation-delay: 0s;"></div> | |
| <div class="energy-ring" style="left: 50%; top: 35%; width: 200px; height: 200px; transform: translate(-50%, -50%); animation-delay: 1.3s;"></div> | |
| <div class="energy-ring" style="left: 50%; top: 35%; width: 200px; height: 200px; transform: translate(-50%, -50%); animation-delay: 2.6s;"></div> | |
| <!-- Energy Beams --> | |
| <div class="energy-beam" style="left: 15%; top: 20%; animation-delay: 0s;"></div> | |
| <div class="energy-beam" style="left: 85%; top: 15%; animation-delay: 1s;"></div> | |
| <div class="energy-beam" style="left: 50%; top: 10%; animation-delay: 2s;"></div> | |
| <!-- Energy Streams --> | |
| <div id="streams-center"></div> | |
| <!-- Zone Title --> | |
| <div class="absolute top-[12%] left-1/2 -translate-x-1/2 text-center z-10"> | |
| <p class="font-tech text-energy-blue/40 text-[0.6rem] tracking-[0.5em] uppercase mb-2">Sector Alpha-7</p> | |
| <h1 class="font-ancient text-white/80 text-3xl md:text-5xl tracking-wider">The Grand Plaza</h1> | |
| <div class="w-24 h-px bg-gradient-to-r from-transparent via-energy-blue/50 to-transparent mx-auto mt-3"></div> | |
| <p class="font-data text-white/30 text-xs mt-3 tracking-wider max-w-xs mx-auto">Ancient nexus point where all pathways converge. The energy hums with memories of a civilization long forgotten.</p> | |
| </div> | |
| <!-- Hotspots --> | |
| <div class="hotspot" style="left: 50%; top: 35%; transform: translate(-50%, -50%);" onclick="openModal('crystal')"> | |
| <div class="hotspot-ring"></div> | |
| <div class="hotspot-inner"></div> | |
| </div> | |
| <div class="hotspot" style="left: 12%; top: 55%;" onclick="openModal('pillar')"> | |
| <div class="hotspot-ring" style="animation-delay: 0.5s;"></div> | |
| <div class="hotspot-inner"></div> | |
| </div> | |
| <div class="hotspot" style="right: 12%; top: 50%;" onclick="openModal('glyphs')"> | |
| <div class="hotspot-ring" style="animation-delay: 1s;"></div> | |
| <div class="hotspot-inner"></div> | |
| </div> | |
| <!-- Direction Indicators --> | |
| <div class="absolute top-4 left-1/2 -translate-x-1/2 flex items-center gap-2 z-10"> | |
| <span class="font-tech text-energy-blue/30 text-[0.55rem] tracking-[0.3em]">NORTH</span> | |
| <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1L6 11M6 1L2 5M6 1L10 5" stroke="rgba(0,212,255,0.3)" stroke-width="1"/></svg> | |
| </div> | |
| <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-2 z-10"> | |
| <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 11L6 1M6 11L2 7M6 11L10 7" stroke="rgba(0,212,255,0.3)" stroke-width="1"/></svg> | |
| <span class="font-tech text-energy-blue/30 text-[0.55rem] tracking-[0.3em]">SOUTH</span> | |
| </div> | |
| </div> | |
| <!-- ========== NORTH: THE MONOLITH ========== --> | |
| <div class="zone zone-north"> | |
| <div class="starfield" id="stars-north"></div> | |
| <div class="nebula"></div> | |
| <div class="ruin-ground"></div> | |
| <!-- The Monolith --> | |
| <div class="monolith" style="left: 50%; bottom: 0; width: 180px; height: 80%; transform: translateX(-50%);"> | |
| <!-- Glowing Runes on Monolith --> | |
| <div class="absolute top-[15%] left-1/2 -translate-x-1/2 text-center"> | |
| <p class="font-tech text-energy-cyan/20 text-2xl tracking-[0.5em]" style="text-shadow: 0 0 20px rgba(0,245,212,0.3);">ᚠᚢᚱ</p> | |
| </div> | |
| <div class="absolute top-[35%] left-1/2 -translate-x-1/2 text-center"> | |
| <p class="font-tech text-energy-blue/15 text-xl tracking-[0.3em]" style="text-shadow: 0 0 15px rgba(0,212,255,0.2);">ᛇᛚᚹ</p> | |
| </div> | |
| <div class="absolute top-[55%] left-1/2 -translate-x-1/2 text-center"> | |
| <p class="font-tech text-energy-purple/15 text-lg tracking-[0.4em]" style="text-shadow: 0 0 15px rgba(157,78,221,0.2);">ᚨᚾᛁ</p> | |
| </div> | |
| <div class="absolute top-[75%] left-1/2 -translate-x-1/2 text-center"> | |
| <p class="font-tech text-energy-gold/15 text-sm tracking-[0.5em]" style="text-shadow: 0 0 10px rgba(255,215,0,0.2);">ᛒᛠᚠ</p> | |
| </div> | |
| </div> | |
| <!-- Side Pillars --> | |
| <div class="ancient-pillar" style="left: 5%; bottom: 0; width: 50px; height: 55%; opacity: 0.5;"></div> | |
| <div class="ancient-pillar" style="right: 5%; bottom: 0; width: 50px; height: 55%; opacity: 0.5;"></div> | |
| <!-- Floating Orbs --> | |
| <div class="absolute left-[30%] top-[20%] w-3 h-3 rounded-full bg-energy-cyan/40" style="box-shadow: 0 0 20px rgba(0,245,212,0.4); animation: float 5s ease-in-out infinite;"></div> | |
| <div class="absolute right-[25%] top-[30%] w-2 h-2 rounded-full bg-energy-blue/40" style="box-shadow: 0 0 15px rgba(0,212,255,0.4); animation: float 7s ease-in-out infinite; animation-delay: - |