Spaces:

ninjacricket
/

raine

Running

App Files Files Community

ninjacricket commited on Jun 21

Commit

fb766d6

verified ·

1 Parent(s): 4096677

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +741 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Raine
-emoji: 🐨
-colorFrom: gray
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: raine
+emoji: 🐳
+colorFrom: pink
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,741 @@
-<!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="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>