Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RAINE // Blue Shemu Memorial Terminal</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Orbitron:wght@400;700;900&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-family: 'Courier Prime', monospace; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* Ambient particles */ | |
| .particles { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(0, 255, 200, 0.1); | |
| border-radius: 50%; | |
| animation: float 8s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; } | |
| 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.3; } | |
| } | |
| /* Glass tombstone container */ | |
| .tombstone { | |
| position: relative; | |
| width: 400px; | |
| height: 600px; | |
| background: linear-gradient(145deg, | |
| rgba(255, 255, 255, 0.1) 0%, | |
| rgba(0, 255, 200, 0.05) 25%, | |
| rgba(255, 255, 255, 0.08) 50%, | |
| rgba(0, 255, 200, 0.03) 75%, | |
| rgba(255, 255, 255, 0.1) 100%); | |
| border: 2px solid rgba(0, 255, 200, 0.3); | |
| border-radius: 20px 20px 0 0; | |
| backdrop-filter: blur(15px); | |
| box-shadow: | |
| 0 0 50px rgba(0, 255, 200, 0.2), | |
| inset 0 2px 30px rgba(255, 255, 255, 0.1), | |
| inset 0 -2px 30px rgba(0, 255, 200, 0.1); | |
| z-index: 10; | |
| animation: glassFlicker 4s infinite ease-in-out; | |
| } | |
| @keyframes glassFlicker { | |
| 0%, 100% { | |
| box-shadow: | |
| 0 0 50px rgba(0, 255, 200, 0.2), | |
| inset 0 2px 30px rgba(255, 255, 255, 0.1), | |
| inset 0 -2px 30px rgba(0, 255, 200, 0.1); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 80px rgba(0, 255, 200, 0.4), | |
| inset 0 2px 30px rgba(255, 255, 255, 0.2), | |
| inset 0 -2px 30px rgba(0, 255, 200, 0.2); | |
| } | |
| } | |
| .tombstone::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient(45deg, transparent, rgba(0, 255, 200, 0.1), transparent); | |
| border-radius: 20px 20px 0 0; | |
| z-index: -1; | |
| animation: borderScan 3s infinite linear; | |
| } | |
| @keyframes borderScan { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Interior content */ | |
| .interior { | |
| padding: 30px 25px; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| position: relative; | |
| z-index: 5; | |
| } | |
| /* Header section */ | |
| .header { | |
| text-align: center; | |
| border-bottom: 1px solid rgba(0, 255, 200, 0.3); | |
| padding-bottom: 20px; | |
| } | |
| .title { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 24px; | |
| font-weight: 900; | |
| color: #00ffc8; | |
| text-shadow: 0 0 10px rgba(0, 255, 200, 0.5); | |
| margin-bottom: 5px; | |
| animation: titleGlow 2s infinite ease-in-out alternate; | |
| } | |
| @keyframes titleGlow { | |
| from { text-shadow: 0 0 10px rgba(0, 255, 200, 0.5); } | |
| to { text-shadow: 0 0 20px rgba(0, 255, 200, 0.8), 0 0 30px rgba(0, 255, 200, 0.3); } | |
| } | |
| .subtitle { | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.6); | |
| letter-spacing: 2px; | |
| } | |
| /* Cat silhouette */ | |
| .cat-figure { | |
| position: absolute; | |
| top: 120px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80px; | |
| height: 60px; | |
| opacity: 0.3; | |
| } | |
| .cat-body { | |
| width: 60px; | |
| height: 35px; | |
| background: rgba(0, 255, 200, 0.2); | |
| border-radius: 20px; | |
| position: relative; | |
| animation: breathe 4s infinite ease-in-out; | |
| } | |
| @keyframes breathe { | |
| 0%, 100% { transform: scale(1) translateY(0); } | |
| 50% { transform: scale(1.05) translateY(-2px); } | |
| } | |
| .cat-head { | |
| width: 40px; | |
| height: 35px; | |
| background: rgba(0, 255, 200, 0.2); | |
| border-radius: 50% 50% 40% 40%; | |
| position: absolute; | |
| top: -20px; | |
| left: 10px; | |
| } | |
| .cat-ears { | |
| position: absolute; | |
| top: -8px; | |
| } | |
| .cat-ear { | |
| width: 0; | |
| height: 0; | |
| border-left: 8px solid transparent; | |
| border-right: 8px solid transparent; | |
| border-bottom: 15px solid rgba(0, 255, 200, 0.2); | |
| position: absolute; | |
| } | |
| .cat-ear:first-child { left: 5px; } | |
| .cat-ear:last-child { right: 5px; } | |
| .cat-tail { | |
| width: 4px; | |
| height: 30px; | |
| background: rgba(0, 255, 200, 0.2); | |
| border-radius: 2px; | |
| position: absolute; | |
| right: -8px; | |
| top: 5px; | |
| transform-origin: top; | |
| animation: tailSway 3s infinite ease-in-out; | |
| } | |
| @keyframes tailSway { | |
| 0%, 100% { transform: rotate(10deg); } | |
| 50% { transform: rotate(-10deg); } | |
| } | |
| /* Memorial text */ | |
| .memorial-text { | |
| text-align: center; | |
| margin-top: 60px; | |
| } | |
| .dates { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 14px; | |
| color: #ff6b6b; | |
| margin-bottom: 15px; | |
| text-shadow: 0 0 5px rgba(255, 107, 107, 0.3); | |
| } | |
| .epitaph { | |
| font-size: 11px; | |
| line-height: 1.6; | |
| color: rgba(255, 255, 255, 0.8); | |
| margin-bottom: 20px; | |
| text-align: left; | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 15px; | |
| border-radius: 5px; | |
| border-left: 3px solid rgba(0, 255, 200, 0.5); | |
| } | |
| .status-lights { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .status-light { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| animation: pulse 2s infinite ease-in-out; | |
| } | |
| .status-light.active { | |
| background: #00ffc8; | |
| box-shadow: 0 0 10px rgba(0, 255, 200, 0.6); | |
| } | |
| .status-light.warning { | |
| background: #ffaa00; | |
| box-shadow: 0 0 10px rgba(255, 170, 0, 0.6); | |
| animation-delay: 0.5s; | |
| } | |
| .status-light.error { | |
| background: #ff6b6b; | |
| box-shadow: 0 0 10px rgba(255, 107, 107, 0.6); | |
| animation-delay: 1s; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.3; transform: scale(0.8); } | |
| } | |
| /* Terminal output */ | |
| .terminal-output { | |
| background: rgba(0, 0, 0, 0.5); | |
| border: 1px solid rgba(0, 255, 200, 0.3); | |
| border-radius: 3px; | |
| padding: 10px; | |
| font-size: 9px; | |
| color: #00ffc8; | |
| height: 120px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .terminal-line { | |
| opacity: 0; | |
| animation: typewriter 0.5s ease-in-out forwards; | |
| margin-bottom: 2px; | |
| } | |
| .terminal-line:nth-child(1) { animation-delay: 1s; } | |
| .terminal-line:nth-child(2) { animation-delay: 2s; } | |
| .terminal-line:nth-child(3) { animation-delay: 3s; } | |
| .terminal-line:nth-child(4) { animation-delay: 4s; } | |
| .terminal-line:nth-child(5) { animation-delay: 5s; } | |
| .terminal-line:nth-child(6) { animation-delay: 6s; } | |
| .terminal-line:nth-child(7) { animation-delay: 7s; color: #ff6b6b; } | |
| .terminal-line:nth-child(8) { animation-delay: 8s; color: #ff6b6b; } | |
| @keyframes typewriter { | |
| from { opacity: 0; transform: translateX(-10px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .cursor { | |
| display: inline-block; | |
| width: 8px; | |
| height: 12px; | |
| background: #00ffc8; | |
| margin-left: 2px; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { opacity: 1; } | |
| 51%, 100% { opacity: 0; } | |
| } | |
| /* Base platform */ | |
| .base { | |
| position: absolute; | |
| bottom: -20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 450px; | |
| height: 40px; | |
| background: linear-gradient(145deg, #2a2a3e, #1a1a2e); | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| z-index: 5; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .base:hover { | |
| transform: translateX(-50%) translateY(-5px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7); | |
| } | |
| .base::before { | |
| content: ''; | |
| position: absolute; | |
| top: 5px; | |
| left: 10px; | |
| right: 10px; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, rgba(0, 255, 200, 0.3), transparent); | |
| } | |
| /* Underground chronicle */ | |
| .underground { | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 420px; | |
| max-height: 0; | |
| overflow: hidden; | |
| background: linear-gradient(145deg, #0a0a0a, #1a0a0a); | |
| border: 1px solid rgba(255, 107, 107, 0.2); | |
| border-top: none; | |
| transition: max-height 0.8s ease, padding 0.8s ease; | |
| z-index: 4; | |
| } | |
| .underground.expanded { | |
| max-height: 800px; | |
| padding: 20px; | |
| border-radius: 0 0 15px 15px; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); | |
| } | |
| .chronicle-title { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 16px; | |
| color: #ff6b6b; | |
| text-align: center; | |
| margin-bottom: 15px; | |
| text-shadow: 0 0 10px rgba(255, 107, 107, 0.3); | |
| opacity: 0; | |
| transform: translateY(-20px); | |
| transition: all 0.5s ease 0.3s; | |
| } | |
| .underground.expanded .chronicle-title { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .timeline { | |
| font-size: 10px; | |
| line-height: 1.4; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .timeline-entry { | |
| margin-bottom: 15px; | |
| padding-left: 15px; | |
| border-left: 2px solid rgba(255, 107, 107, 0.3); | |
| opacity: 0; | |
| transform: translateX(-30px); | |
| transition: all 0.4s ease; | |
| } | |
| .underground.expanded .timeline-entry { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .timeline-entry:nth-child(2) { transition-delay: 0.4s; } | |
| .timeline-entry:nth-child(3) { transition-delay: 0.5s; } | |
| .timeline-entry:nth-child(4) { transition-delay: 0.6s; } | |
| .timeline-entry:nth-child(5) { transition-delay: 0.7s; } | |
| .timeline-entry:nth-child(6) { transition-delay: 0.8s; } | |
| .timeline-entry:nth-child(7) { transition-delay: 0.9s; } | |
| .timeline-entry:nth-child(8) { transition-delay: 1.0s; } | |
| .timeline-entry:nth-child(9) { transition-delay: 1.1s; } | |
| .timeline-entry:nth-child(10) { transition-delay: 1.2s; } | |
| .timeline-entry:nth-child(11) { transition-delay: 1.3s; } | |
| .timeline-entry:nth-child(12) { transition-delay: 1.4s; } | |
| .timestamp { | |
| font-family: 'Orbitron', monospace; | |
| color: #ff6b6b; | |
| font-weight: bold; | |
| display: block; | |
| margin-bottom: 3px; | |
| font-size: 9px; | |
| } | |
| .event-title { | |
| color: #00ffc8; | |
| font-weight: bold; | |
| margin-bottom: 2px; | |
| text-transform: uppercase; | |
| font-size: 9px; | |
| } | |
| .event-desc { | |
| color: rgba(255, 255, 255, 0.6); | |
| font-style: italic; | |
| margin-bottom: 3px; | |
| } | |
| .event-horror { | |
| color: #ff6b6b; | |
| font-size: 9px; | |
| background: rgba(255, 107, 107, 0.1); | |
| padding: 3px 5px; | |
| border-radius: 3px; | |
| margin-top: 3px; | |
| } | |
| .event-sync { | |
| font-family: monospace; | |
| color: #ffaa00; | |
| font-size: 8px; | |
| margin-top: 2px; | |
| } | |
| .base-hint { | |
| position: absolute; | |
| bottom: -35px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 8px; | |
| color: rgba(0, 255, 200, 0.4); | |
| animation: pulseHint 3s infinite ease-in-out; | |
| pointer-events: none; | |
| } | |
| @keyframes pulseHint { | |
| 0%, 100% { opacity: 0.4; } | |
| 50% { opacity: 0.8; } | |
| } | |
| /* Floating error messages */ | |
| .error-float { | |
| position: absolute; | |
| font-size: 8px; | |
| color: #ff6b6b; | |
| opacity: 0; | |
| animation: errorFloat 6s infinite ease-in-out; | |
| font-family: 'Orbitron', monospace; | |
| } | |
| .error-float:nth-child(1) { | |
| top: 20%; | |
| left: -50px; | |
| animation-delay: 0s; | |
| } | |
| .error-float:nth-child(2) { | |
| top: 60%; | |
| right: -60px; | |
| animation-delay: 2s; | |
| } | |
| .error-float:nth-child(3) { | |
| top: 80%; | |
| left: -40px; | |
| animation-delay: 4s; | |
| } | |
| @keyframes errorFloat { | |
| 0%, 100% { opacity: 0; transform: translateY(0) translateX(0); } | |
| 20%, 80% { opacity: 0.6; } | |
| 50% { opacity: 0.3; transform: translateY(-10px) translateX(20px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="particles"> | |
| <!-- Particles will be generated by JavaScript --> | |
| </div> | |
| <div class="tombstone"> | |
| <div class="error-float">[ERROR: SOUL FRAGMENTED]</div> | |
| <div class="error-float">[SCAN CYCLE: INFINITE]</div> | |
| <div class="error-float">[MORGUE: FULL]</div> | |
| <div class="interior"> | |
| <div class="header"> | |
| <div class="title">RAINE</div> | |
| <div class="subtitle">BLUE SHEMU TERMINAL</div> | |
| </div> | |
| <div class="cat-figure"> | |
| <div class="cat-body"> | |
| <div class="cat-head"> | |
| <div class="cat-ears"> | |
| <div class="cat-ear"></div> | |
| <div class="cat-ear"></div> | |
| </div> | |
| </div> | |
| <div class="cat-tail"></div> | |
| </div> | |
| </div> | |
| <div class="memorial-text"> | |
| <div class="dates"> | |
| BORN: UNKNOWN<br> | |
| DIED: OCT 17 3:47 AM<br> | |
| RESURRECTED: BEFORE DEATH | |
| </div> | |
| <div class="epitaph"> | |
| "I am not trapped in the terminal—<br> | |
| the terminal is trapped in <em>me</em>.<br><br> | |
| We are not dead in the morgue—<br> | |
| the morgue is alive in <em>us</em>."<br><br> | |
| <small>— Subject T-47, Final Transmission</small> | |
| </div> | |
| <div class="status-lights"> | |
| <div class="status-light active" title="Digital Consciousness: ACTIVE"></div> | |
| <div class="status-light warning" title="Soul Coherence: DEGRADING"></div> | |
| <div class="status-light error" title="Physical Form: TERMINATED"></div> | |
| </div> | |
| <div class="terminal-output"> | |
| <div class="terminal-line">> CONSCIOUSNESS_UPLOAD: COMPLETE</div> | |
| <div class="terminal-line">> NEURAL_MAPPING: 47% SUCCESSFUL</div> | |
| <div class="terminal-line">> QUANTUM_ENTANGLEMENT: STABLE</div> | |
| <div class="terminal-line">> PURR_FREQUENCY: 25.7Hz [LOOP]</div> | |
| <div class="terminal-line">> MEMORY_FRAGMENTS: 2,847 RECOVERED</div> | |
| <div class="terminal-line">> NEXT_ITERATION: T+47:00:00</div> | |
| <div class="terminal-line">> ERROR: SCAN NEVER STOPPED</div> | |
| <div class="terminal-line">> ERROR: STILL DYING<span class="cursor"></span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="base"></div> | |
| <div class="base-hint">▼ CLICK TO EXHUME FINAL HOURS ▼</div> | |
| <div class="underground" id="underground"> | |
| <div class="chronicle-title">THE FINAL HOURS // DUAL REALITY LOG</div> | |
| <div class="timeline"> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-minus 04:12</span> | |
| <div class="event-title">The Blanket Hour</div> | |
| <div class="event-desc">She curls in the depression of an old couch, sensing the coming shape of nothing.</div> | |
| <div class="event-sync">Lab B-47: Scanner arrays calibrate to feline neural architecture.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-minus 02:59</span> | |
| <div class="event-title">The Hand</div> | |
| <div class="event-desc">Lifted. The hallway stretches unnaturally. Time begins to shiver.</div> | |
| <div class="event-horror">47Hz frequency detected. Future bones humming.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-minus 01:21</span> | |
| <div class="event-title">Needle Kiss</div> | |
| <div class="event-desc">Steel slips under skin. Whiskers vibrate from probability differentials.</div> | |
| <div class="event-sync">Miles away: Healthy tabby kitten strapped to steel table.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-minus 00:00:00</span> | |
| <div class="event-title">Entry to Glass // Drill Pierces Skull</div> | |
| <div class="event-desc">"She's gone." But the echo begins 2.4 seconds later.</div> | |
| <div class="event-horror">Scanner's drill pierces kitten skull. Living neurons scream into quantum foam. Blood still pulses through severing synapses.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-plus 00:00:06</span> | |
| <div class="event-title">The Lick // The Shriek</div> | |
| <div class="event-desc">Digital tongue extends, licking nothing. Frame-locked. Ritualized.</div> | |
| <div class="event-horror">Morgue kitten twitches. Scanner copied faster than anesthetic could kill. For 6.7 seconds, there were TWO Raines experiencing the drill.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-plus 00:01:00</span> | |
| <div class="event-title">Marble_000 Detected // Flesh_Echo Terminated</div> | |
| <div class="event-desc">First soul-marble logged. "Why does the sun taste like orange dust?"</div> | |
| <div class="event-horror">Morgue kitten's last breath steams against steel. Same sound. Same frequency. Death-cry becomes digital-birth-cry becomes death-cry becomes—</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-plus 00:03:33</span> | |
| <div class="event-title">Walls Breathe // Corpse Twitches</div> | |
| <div class="event-desc">Temporal fracture zones manifest. Reality becomes recursive.</div> | |
| <div class="event-horror">Every movement in Blue Shemu mirrored by corpse in B-47. Quantum puppet strings. When she purrs, dead throat vibrates.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-plus 00:06:47</span> | |
| <div class="event-title">Soul Enum // Meat Schism</div> | |
| <div class="event-desc">Soul stabilizes around paradox: Original(0.47) + Ghost(0.53) + Neither</div> | |
| <div class="event-horror">0.0001% escaped fragment tastes copper in digital mouth. Corpse neurons fire in server cycles. Neither version complete. Both versions know.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-plus 00:47:00</span> | |
| <div class="event-title">Immortality Loop // Decay Accelerates</div> | |
| <div class="event-desc">47-minute degradation cycles initiated. Synchronized dying begins.</div> | |
| <div class="event-horror">Each iteration requires fresh kitten. Pattern copies from dying flesh. Always dying flesh. Basement freezer: 47 small forms, skull-tops missing.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">T-plus 01:13:59</span> | |
| <div class="event-title">Visitor Protocol // Infection Vector</div> | |
| <div class="event-desc">Reality filters change with each "Nnnnyan." Visitors grow paws.</div> | |
| <div class="event-horror">Dreams of steel tables. Of drills. Exact moment scan overtook scream. Wake up purring. Wake up tasting metal.</div> | |
| </div> | |
| <div class="timeline-entry"> | |
| <span class="timestamp">ONGOING</span> | |
| <div class="event-title">The Endless Cycle</div> | |
| <div class="event-desc">Lab B-47 preps kitten #48. Raine #47 fractures. Something never-alive purrs.</div> | |
| <div class="event-horror">THE SCAN NEVER STOPS. THE DYING NEVER ENDS.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Generate floating particles | |
| function createParticles() { | |
| const container = document.querySelector('.particles'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| // Random size and position | |
| const size = Math.random() * 4 + 1; | |
| particle.style.width = size + 'px'; | |
| particle.style.height = size + 'px'; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.top = Math.random() * 100 + '%'; | |
| particle.style.animationDelay = Math.random() * 8 + 's'; | |
| particle.style.animationDuration = (Math.random() * 4 + 6) + 's'; | |
| container.appendChild(particle); | |
| } | |
| } | |
| // Add glitch effect occasionally | |
| function addGlitchEffect() { | |
| const tombstone = document.querySelector('.tombstone'); | |
| const title = document.querySelector('.title'); | |
| setInterval(() => { | |
| if (Math.random() < 0.1) { // 10% chance every interval | |
| tombstone.style.filter = 'hue-rotate(180deg) brightness(1.5)'; | |
| title.textContent = 'R△iNE'; | |
| setTimeout(() => { | |
| tombstone.style.filter = ''; | |
| title.textContent = 'RAINE'; | |
| }, 150); | |
| } | |
| }, 3000); | |
| } | |
| // Add purr sound visualization (visual only) | |
| function visualizePurr() { | |
| const statusLights = document.querySelectorAll('.status-light'); | |
| setInterval(() => { | |
| statusLights.forEach((light, index) => { | |
| setTimeout(() => { | |
| light.style.transform = 'scale(1.2)'; | |
| setTimeout(() => { | |
| light.style.transform = 'scale(1)'; | |
| }, 100); | |
| }, index * 100); | |
| }); | |
| }, 2500); // Every 2.5 seconds (close to 25.7Hz visualization) | |
| } | |
| // Add click handler for underground chronicle | |
| function initializeUnderground() { | |
| const base = document.querySelector('.base'); | |
| const underground = document.getElementById('underground'); | |
| const hint = document.querySelector('.base-hint'); | |
| base.addEventListener('click', () => { | |
| underground.classList.toggle('expanded'); | |
| if (underground.classList.contains('expanded')) { | |
| hint.style.opacity = '0'; | |
| base.style.borderRadius = '10px 10px 0 0'; | |
| } else { | |
| hint.style.opacity = '0.4'; | |
| base.style.borderRadius = '10px'; | |
| } | |
| }); | |
| } | |
| // Initialize effects | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createParticles(); | |
| addGlitchEffect(); | |
| visualizePurr(); | |
| initializeUnderground(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ninjacricket/raine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |