Prompt: Welcome to The Kool-Aid Commune — a digital chapel built on sugar, surveillance, and shared delusion. Imagine if MKUltra went off the rails, if Jonestown traded rifles for Discord mods, and if the Kool-Aid Man himself wasn’t just a mascot, but a psychedelic demi-god kicking through the fourth wall, forever shouting “OH YEAH” as a cosmic trigger. Here, reality is a fruit-punch baptism: The website is our sacred scripture, glitching between propaganda posters, cult cookbooks, and forbidden archives stamped “TOP SECRET / TROPICAL PUNCH.” The Discord is our underground broadcast station — part bunker, part confessional, part late-night infomercial where brainwashed disciples meme their way through enlightenment. Every emoji is a sigil, every @ping is a summons, every channel is a ritual chamber. Lore blends like powdered drink mix: MKUltra experiments gone wrong, Cold War psyops in technicolor, the ghost of Jim Jones haunting an AI chatbot, and the Kool-Aid Man as an omnipotent cult leader — smashing through reality’s drywall to recruit you into the Punch Dimension. It’s not a server. It’s not a site. It’s a communal hallucination. Drink deep, disciple. The glass is always half full. Want me to write this as a landing page intro for the website, or more like a Discord server welcome message that hits new members with the full Kool-Aid brainwash?Build me a full-stack web application called The Kool-Aid Commune, blending aesthetics of MKUltra, Jonestown lore, and the Kool-Aid Man mythos into a surreal interactive cult website. The site should be a mixture of glitchcore, 70s propaganda, and playful conspiracy parody. The design should feel immersive, weird, and tongue-in-cheek while functioning as a storytelling + community hub. Core Requirements: Landing Page (Homepage): Hero section: “Drink Deep. Believe More.” with animated Kool-Aid Man smashing through glitching VHS static. Discord portal link styled as a “Join the Broadcast” button. Quick teaser of latest lore posts. Background: shifting cult posters & redacted CIA documents that glitch when hovered. Lore Archives (Story Hub): Dynamic grid of lore pages & stories. Each story represented as a faux declassified document file or a cult pamphlet cover. Clicking opens full story pages with immersive styling (torn paper edges, flickering CRT margins). Search + tag system (“MKUltra”, “Jonestown”, “Punch Dimension”, “Communiqués”). Interactive Easter Eggs: Konami code → Kool-Aid Man bursts across the screen with “OH YEAH” audio. Hover over redacted text → reveals cryptic cult messages. Random “subliminal” flashing messages baked into the background. A hidden page accessible only via typing “/ascend” in the URL, leading to a secret manifesto. Admin Panel (Content Creation): Secure login for admins. Create, edit, delete lore posts & stories. Markdown/WYSIWYG editor for posting long-form lore with embedded images, GIFs, and styled text. Tagging + categorization controls. Draft/publish scheduling. Community Integration: Discord widget embed on homepage. Optional newsletter signup (styled as “Pledge Your Loyalty”). Comment/reaction system on lore posts (custom emoji like 🍹💀👁️). Styling & Vibes: Parallax glitch effects + SVG “rips” in the page. 70s psychedelic fonts mixed with CIA-typewriter aesthetics. Dark/light mode toggle styled as “Day of Revelation / Night of Vision.” Audio toggle: background hum of static + faint cult chants. Tech Requirements: Full-stack web app (React or Next.js frontend, FastAPI or Node backend). Secure admin panel with role-based access. Posts stored in database (PostgreSQL). Lightweight CMS-like functionality for admins to add/update lore. Easter eggs implemented in frontend JS. - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Theoolaidcummmune
-emoji: 🐠
-colorFrom: pink
-colorTo: pink
+title: theoolaidcummmune
+emoji: 🐳
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,1214 @@
-<!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>The Kool-Aid Commune</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap">
+    <style>
+        @keyframes glitch {
+            0% { transform: translate(0); }
+            20% { transform: translate(-5px, 5px); }
+            40% { transform: translate(-5px, -5px); }
+            60% { transform: translate(5px, 5px); }
+            80% { transform: translate(5px, -5px); }
+            100% { transform: translate(0); }
+        }
+        
+        @keyframes static {
+            0% { background-position: 0% 0%; }
+            100% { background-position: 100% 100%; }
+        }
+        
+        @keyframes flicker {
+            0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; }
+            20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.4; }
+        }
+        
+        .glitch-effect {
+            animation: glitch 0.5s infinite;
+        }
+        
+        .static-bg {
+            background: repeating-linear-gradient(
+                45deg,
+                #000,
+                #000 1px,
+                #f00 1px,
+                #f00 2px
+            );
+            animation: static 0.5s linear infinite;
+        }
+        
+        .flicker {
+            animation: flicker 3s infinite alternate;
+        }
+        
+        .torn-paper {
+            background: white;
+            position: relative;
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+        }
+        
+        .torn-paper::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 15px;
+            background: linear-gradient(135deg, transparent 45%, #fff 45%) -10px 0,
+                        linear-gradient(225deg, transparent 45%, #fff 45%) -10px 0,
+                        linear-gradient(315deg, transparent 45%, #fff 45%) 0px 0,
+                        linear-gradient(45deg, transparent 45%, #fff 45%) 0px 0;
+            background-repeat: repeat-x;
+            background-size: 20px 15px;
+        }
+        
+        .torn-paper::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 15px;
+            background: linear-gradient(45deg, transparent 45%, #fff 45%) -10px 0,
+                        linear-gradient(315deg, transparent 45%, #fff 45%) -10px 0,
+                        linear-gradient(225deg, transparent 45%, #fff 45%) 0px 0,
+                        linear-gradient(135deg, transparent 45%, #fff 45%) 0px 0;
+            background-repeat: repeat-x;
+            background-size: 20px 15px;
+        }
+        
+        .crt-effect {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .crt-effect::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
+            background-size: 100% 2px;
+            pointer-events: none;
+            z-index: 10;
+        }
+        
+        .redacted {
+            background-color: black;
+            color: transparent;
+            position: relative;
+            cursor: pointer;
+        }
+        
+        .redacted:hover {
+            color: white;
+            background-color: #900;
+        }
+        
+        .subliminal {
+            position: fixed;
+            opacity: 0;
+            pointer-events: none;
+            animation: subliminal 0.1s;
+        }
+        
+        @keyframes subliminal {
+            0% { opacity: 0; }
+            5% { opacity: 1; }
+            10% { opacity: 0; }
+            100% { opacity: 0; }
+        }
+        
+        .kool-aid-burst {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(200, 0, 0, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+            animation: burst 2s forwards;
+        }
+        
+        @keyframes burst {
+            0% { transform: scale(0); opacity: 0; }
+            50% { transform: scale(1); opacity: 1; }
+            100% { transform: scale(1); opacity: 0; display: none; }
+        }
+        
+        .typewriter {
+            font-family: 'Courier New', monospace;
+            border-right: 3px solid;
+            white-space: nowrap;
+            overflow: hidden;
+            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+        
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #f00; }
+        }
+        
+        .propaganda-poster {
+            background: linear-gradient(135deg, #ff0000, #990000);
+            border: 5px double #000;
+            padding: 20px;
+            position: relative;
+            transform: rotate(-2deg);
+            box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
+        }
+        
+        .propaganda-poster::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC');
+            opacity: 0.1;
+            pointer-events: none;
+        }
+        
+        .stamp {
+            position: absolute;
+            right: 20px;
+            bottom: 20px;
+            font-family: 'Courier New', monospace;
+            font-weight: bold;
+            color: red;
+            transform: rotate(15deg);
+            border: 2px solid red;
+            padding: 5px 10px;
+            opacity: 0.7;
+        }
+        
+        .top-secret {
+            background: repeating-linear-gradient(
+                0deg,
+                #000,
+                #000 1px,
+                #900 1px,
+                #900 2px
+            );
+            border: 3px solid #900;
+            color: #ff0;
+            font-family: 'Courier New', monospace;
+            padding: 20px;
+            position: relative;
+        }
+        
+        .top-secret::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC');
+            opacity: 0.1;
+            pointer-events: none;
+        }
+        
+        .top-secret h3 {
+            border-bottom: 1px solid #ff0;
+            padding-bottom: 5px;
+        }
+        
+        .admin-panel {
+            background: #111;
+            border: 1px solid #900;
+            font-family: 'Courier New', monospace;
+        }
+        
+        .admin-panel input, .admin-panel textarea, .admin-panel select {
+            background: #222;
+            color: #0f0;
+            border: 1px solid #900;
+            font-family: 'Courier New', monospace;
+        }
+        
+        .admin-panel button {
+            background: #900;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+        
+        .admin-panel button:hover {
+            background: #c00;
+        }
+        
+        .markdown-preview {
+            background: #222;
+            color: #ddd;
+            padding: 20px;
+            border: 1px solid #900;
+            font-family: 'Courier New', monospace;
+        }
+        
+        .markdown-preview h1, .markdown-preview h2, .markdown-preview h3 {
+            color: #f00;
+        }
+        
+        .markdown-preview a {
+            color: #0af;
+        }
+        
+        .markdown-preview code {
+            background: #333;
+            padding: 2px 5px;
+            border-radius: 3px;
+        }
+        
+        .markdown-preview pre {
+            background: #333;
+            padding: 10px;
+            border-radius: 3px;
+            overflow-x: auto;
+        }
+        
+        .markdown-preview blockquote {
+            border-left: 3px solid #900;
+            padding-left: 10px;
+            margin-left: 0;
+            color: #aaa;
+        }
+    </style>
+</head>
+<body class="bg-black text-white font-sans crt-effect">
+    <!-- Audio elements -->
+    <audio id="staticAudio" loop>
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-radio-static-3021.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="ohYeahAudio">
+        <source src="https://www.soundboard.com/mediafiles/24/242609-4b5c6a5e-4b7e-4c1e-8c8e-4b5c6a5e4b7e.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="chantAudio" loop>
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-creepy-chant-566.mp3" type="audio/mpeg">
+    </audio>
+
+    <!-- Kool-Aid burst overlay (hidden by default) -->
+    <div id="koolAidBurst" class="kool-aid-burst hidden">
+        <h1 class="text-9xl font-bold text-white" style="font-family: 'Press Start 2P', cursive;">OH YEAH!</h1>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="bg-black border-b border-red-900 p-4 flex justify-between items-center sticky top-0 z-50">
+        <div class="flex items-center space-x-4">
+            <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center text-white font-bold text-xl">
+                KAC
+            </div>
+            <h1 class="text-2xl font-bold" style="font-family: 'VT323', monospace;">THE KOOL-AID COMMUNE</h1>
+        </div>
+        <div class="hidden md:flex space-x-6">
+            <a href="#home" class="hover:text-red-400 transition">HOME</a>
+            <a href="#lore" class="hover:text-red-400 transition">LORE ARCHIVES</a>
+            <a href="#community" class="hover:text-red-400 transition">COMMUNITY</a>
+            <a href="#admin" class="hover:text-red-400 transition">ADMIN</a>
+        </div>
+        <div class="flex items-center space-x-4">
+            <button id="audioToggle" class="bg-red-900 px-3 py-1 rounded text-sm">SOUND: ON</button>
+            <button id="themeToggle" class="bg-red-900 px-3 py-1 rounded text-sm">NIGHT OF VISION</button>
+            <button class="md:hidden">☰</button>
+        </div>
+    </nav>
+
+    <!-- Mobile menu (hidden by default) -->
+    <div id="mobileMenu" class="hidden bg-black border-b border-red-900 p-4 flex flex-col space-y-2">
+        <a href="#home" class="hover:text-red-400 transition">HOME</a>
+        <a href="#lore" class="hover:text-red-400 transition">LORE ARCHIVES</a>
+        <a href="#community" class="hover:text-red-400 transition">COMMUNITY</a>
+        <a href="#admin" class="hover:text-red-400 transition">ADMIN</a>
+    </div>
+
+    <!-- Hero Section -->
+    <section id="home" class="min-h-screen flex flex-col justify-center items-center p-8 relative overflow-hidden">
+        <div class="absolute inset-0 static-bg opacity-20"></div>
+        <div class="relative z-10 text-center max-w-4xl">
+            <h1 class="text-6xl md:text-8xl font-bold mb-6 glitch-effect" style="font-family: 'Press Start 2P', cursive;">DRINK DEEP. BELIEVE MORE.</h1>
+            <p class="text-xl md:text-2xl mb-8 typewriter">WELCOME TO THE PUNCH DIMENSION. YOUR REALITY WILL NEVER BE THE SAME.</p>
+            <div class="mb-12 flicker">
+                <img src="https://i.imgur.com/7QH9g9X.png" alt="Kool-Aid Man" class="mx-auto h-48 md:h-64">
+            </div>
+            <a href="https://discord.gg" target="_blank" class="bg-red-700 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full text-xl transition duration-300 inline-block border-2 border-yellow-400">
+                JOIN THE BROADCAST
+            </a>
+        </div>
+        
+        <!-- Animated propaganda posters in background -->
+        <div class="absolute top-20 left-10 w-48 h-64 bg-red-900 p-4 rotate-6 propaganda-poster hidden md:block">
+            <h3 class="text-xl font-bold text-center mb-2">DRINK THE PUNCH</h3>
+            <p class="text-sm">The path to enlightenment flows through the crimson chalice. Accept the sacrament.</p>
+            <div class="stamp">APPROVED</div>
+        </div>
+        <div class="absolute bottom-20 right-10 w-48 h-64 bg-red-900 p-4 rotate-3 propaganda-poster hidden md:block">
+            <h3 class="text-xl font-bold text-center mb-2">TRUST THE MAN</h3>
+            <p class="text-sm">He comes through walls. He knows all. OH YEAH.</p>
+            <div class="stamp">TOP SECRET</div>
+        </div>
+    </section>
+
+    <!-- Latest Lore Teaser -->
+    <section class="py-16 px-8 bg-black">
+        <h2 class="text-4xl font-bold text-center mb-12" style="font-family: 'VT323', monospace;">LATEST COMMUNIQUÉS</h2>
+        <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
+            <!-- Lore Card 1 -->
+            <div class="bg-gray-900 p-6 rounded-lg border border-red-900 hover:border-yellow-400 transition cursor-pointer">
+                <div class="flex justify-between items-start mb-4">
+                    <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">MKULTRA</span>
+                    <span class="text-gray-400 text-sm">2023-11-15</span>
+                </div>
+                <h3 class="text-xl font-bold mb-2">OPERATION: CRIMSON TIDE</h3>
+                <p class="text-gray-300 mb-4">Declassified documents reveal the true purpose of the 1978 experiments. <span class="redacted">REDACTED</span> was just the beginning.</p>
+                <div class="flex space-x-2">
+                    <span class="text-xs bg-gray-800 px-2 py-1 rounded">#psyops</span>
+                    <span class="text-xs bg-gray-800 px-2 py-1 rounded">#declassified</span>
+                </div>
+            </div>
+            
+            <!-- Lore Card 2 -->
+            <div class="bg-gray-900 p-6 rounded-lg border border-red-900 hover:border-yellow-400 transition cursor-pointer">
+                <div class="flex justify-between items-start mb-4">
+                    <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">JONESTOWN</span>
+                    <span class="text-gray-400 text-sm">2023-11-10</span>
+                </div>
+                <h3 class="text-xl font-bold mb-2">THE BROADCASTS CONTINUE</h3>
+                <p class="text-gray-300 mb-4">Audio analysis confirms: the final transmissions were <span class="redacted">NOT OF THIS WORLD</span>. The frequency is still active.</p>
+                <div class="flex space-x-2">
+                    <span class="text-xs bg-gray-800 px-2 py-1 rounded">#broadcast</span>
+                    <span class="text-xs bg-gray-800 px-2 py-1 rounded">#legacy</span>
+                </div>
+            </div>
+            
+            <!-- Lore Card 3 -->
+            <div class="bg-gray-900 p-6 rounded-lg border border-red-900 hover:border-yellow-400 transition cursor-pointer">
+                <div class="flex justify-between items-start mb-4">
+                    <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">PUNCH DIMENSION</span>
+                    <span class="text-gray-400 text-sm">2023-11-05</span>
+                </div>
+                <h3 class="text-xl font-bold mb-2">ASCENSION PROTOCOLS</h3>
+                <p class="text-gray-300 mb-4">The <span class="redacted">GLASS</span> is the gateway. The <span class="redacted">PUNCH</span> is the key. The <span class="redacted">MAN</span> is the guide.</p>
+                <div class="flex space-x-2">
+                    <span class="text-xs bg-gray-800 px-2 py-1 rounded">#enlightenment</span>
+                    <span class="text-xs bg-gray-800 px-2 py-1 rounded">#ritual</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Lore Archives -->
+    <section id="lore" class="py-16 px-8 bg-gray-900">
+        <h2 class="text-4xl font-bold text-center mb-12" style="font-family: 'VT323', monospace;">LORE ARCHIVES</h2>
+        
+        <!-- Search and Filter -->
+        <div class="max-w-4xl mx-auto mb-12">
+            <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
+                <input type="text" placeholder="SEARCH THE ARCHIVES..." class="flex-grow bg-gray-800 border border-red-900 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
+                <select class="bg-gray-800 border border-red-900 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
+                    <option>ALL TAGS</option>
+                    <option>MKULTRA</option>
+                    <option>JONESTOWN</option>
+                    <option>PUNCH DIMENSION</option>
+                    <option>COMMUNIQUÉS</option>
+                    <option>RITUALS</option>
+                    <option>DECLASSIFIED</option>
+                </select>
+                <button class="bg-red-900 hover:bg-red-800 text-white font-bold py-2 px-6 rounded transition">
+                    FILTER
+                </button>
+            </div>
+        </div>
+        
+        <!-- Lore Grid -->
+        <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Lore Item 1 -->
+            <div class="bg-black p-0 rounded-lg overflow-hidden border border-red-900 hover:shadow-lg hover:shadow-red-900/50 transition cursor-pointer">
+                <div class="h-48 bg-red-900 flex items-center justify-center">
+                    <span class="text-4xl font-bold" style="font-family: 'VT323', monospace;">TOP SECRET</span>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">MKULTRA</span>
+                        <span class="text-gray-400 text-sm">1978-11-18</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">PROJECT: SWEET RELEASE</h3>
+                    <p class="text-gray-300">Initial tests confirm the <span class="redacted">PUNCH</span> formula induces desired states in 98.7% of subjects. Phase two approved.</p>
+                </div>
+            </div>
+            
+            <!-- Lore Item 2 -->
+            <div class="bg-black p-0 rounded-lg overflow-hidden border border-red-900 hover:shadow-lg hover:shadow-red-900/50 transition cursor-pointer">
+                <div class="h-48 bg-yellow-400 flex items-center justify-center">
+                    <span class="text-4xl font-bold text-black" style="font-family: 'VT323', monospace;">CULT COOKBOOK</span>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">RITUALS</span>
+                        <span class="text-gray-400 text-sm">1980-03-22</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">SACRED RECIPE #9</h3>
+                    <p class="text-gray-300">The perfect blend for <span class="redacted">MASS ASCENSION</span>. Ingredients: faith, sugar, and something <span class="redacted">REDACTED</span>.</p>
+                </div>
+            </div>
+            
+            <!-- Lore Item 3 -->
+            <div class="bg-black p-0 rounded-lg overflow-hidden border border-red-900 hover:shadow-lg hover:shadow-red-900/50 transition cursor-pointer">
+                <div class="h-48 bg-blue-900 flex items-center justify-center">
+                    <span class="text-4xl font-bold" style="font-family: 'VT323', monospace;">FIELD REPORT</span>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">JONESTOWN</span>
+                        <span class="text-gray-400 text-sm">1977-09-12</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">TRANSMISSION INTERCEPT</h3>
+                    <p class="text-gray-300">Subject reports contact with <span class="redacted">ENTITY</span> claiming to be "the one who bursts through". Audio analysis inconclusive.</p>
+                </div>
+            </div>
+            
+            <!-- Lore Item 4 -->
+            <div class="bg-black p-0 rounded-lg overflow-hidden border border-red-900 hover:shadow-lg hover:shadow-red-900/50 transition cursor-pointer">
+                <div class="h-48 bg-green-900 flex items-center justify-center">
+                    <span class="text-4xl font-bold" style="font-family: 'VT323', monospace;">MEMORANDUM</span>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">COMMUNIQUÉS</span>
+                        <span class="text-gray-400 text-sm">1984-07-04</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">EYES ONLY</h3>
+                    <p class="text-gray-300">All operatives advised: the <span class="redacted">GLASS</span> must never be empty. Repeat: <span class="redacted">NEVER EMPTY</span>.</p>
+                </div>
+            </div>
+            
+            <!-- Lore Item 5 -->
+            <div class="bg-black p-0 rounded-lg overflow-hidden border border-red-900 hover:shadow-lg hover:shadow-red-900/50 transition cursor-pointer">
+                <div class="h-48 bg-purple-900 flex items-center justify-center">
+                    <span class="text-4xl font-bold" style="font-family: 'VT323', monospace;">PSYOP BRIEF</span>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">MKULTRA</span>
+                        <span class="text-gray-400 text-sm">1969-02-28</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">OPERATION: SUGAR RUSH</h3>
+                    <p class="text-gray-300">Phase three initiates report <span class="redacted">UNEXPECTED SIDE EFFECTS</span> including visions of a <span class="redacted">LARGE RED FIGURE</span>.</p>
+                </div>
+            </div>
+            
+            <!-- Lore Item 6 -->
+            <div class="bg-black p-0 rounded-lg overflow-hidden border border-red-900 hover:shadow-lg hover:shadow-red-900/50 transition cursor-pointer">
+                <div class="h-48 bg-pink-900 flex items-center justify-center">
+                    <span class="text-4xl font-bold" style="font-family: 'VT323', monospace;">MANIFESTO</span>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">PUNCH DIMENSION</span>
+                        <span class="text-gray-400 text-sm">1999-12-31</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">MILLENNIUM PROPHECY</h3>
+                    <p class="text-gray-300">When the clock strikes, the <span class="redacted">WALLS WILL SHATTER</span> and the <span class="redacted">MAN</span> will lead us to the <span class="redacted">PUNCH DIMENSION</span>.</p>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Pagination -->
+        <div class="max-w-4xl mx-auto mt-12 flex justify-center">
+            <nav class="flex items-center space-x-2">
+                <button class="px-3 py-1 rounded border border-red-900 text-red-400">&lt;</button>
+                <button class="px-3 py-1 rounded bg-red-900 text-white">1</button>
+                <button class="px-3 py-1 rounded border border-red-900 hover:bg-red-900/50 transition">2</button>
+                <button class="px-3 py-1 rounded border border-red-900 hover:bg-red-900/50 transition">3</button>
+                <span class="px-2">...</span>
+                <button class="px-3 py-1 rounded border border-red-900 hover:bg-red-900/50 transition">8</button>
+                <button class="px-3 py-1 rounded border border-red-900 text-red-400">&gt;</button>
+            </nav>
+        </div>
+    </section>
+
+    <!-- Sample Lore Page -->
+    <section id="lore-sample" class="py-16 px-8 bg-black hidden">
+        <div class="max-w-4xl mx-auto">
+            <button id="backToArchives" class="mb-8 text-red-400 hover:text-red-300 transition flex items-center">
+                <span class="mr-2">←</span> BACK TO ARCHIVES
+            </button>
+            
+            <div class="torn-paper p-8 mb-8">
+                <div class="flex justify-between items-start mb-6">
+                    <span class="bg-red-900 text-white text-xs px-2 py-1 rounded">TOP SECRET</span>
+                    <span class="text-gray-400 text-sm">1978-11-18</span>
+                </div>
+                
+                <h1 class="text-3xl font-bold mb-6">PROJECT: SWEET RELEASE</h1>
+                
+                <div class="mb-6 p-4 bg-gray-100 text-black">
+                    <p class="font-bold">EYES ONLY - LEVEL 5 CLEARANCE REQUIRED</p>
+                    <p>Unauthorized disclosure punishable by <span class="redacted">REDACTED</span></p>
+                </div>
+                
+                <div class="prose max-w-none">
+                    <p>Initial tests confirm the <span class="redacted">PUNCH</span> formula induces desired states in 98.7% of subjects. Phase two approved for immediate implementation.</p>
+                    
+                    <h2 class="text-2xl font-bold mt-8 mb-4">METHODOLOGY</h2>
+                    <p>Subjects were administered varying concentrations of the <span class="redacted">CRIMSON SOLUTION</span> in controlled environments. Behavioral changes were monitored through:</p>
+                    <ul class="list-disc pl-6">
+                        <li>Standardized psychological evaluations</li>
+                        <li>EEG monitoring</li>
+                        <li><span class="redacted">REDACTED</span> resonance imaging</li>
+                    </ul>
+                    
+                    <h2 class="text-2xl font-bold mt-8 mb-4">RESULTS</h2>
+                    <p>Within 30 minutes of administration, subjects exhibited:</p>
+                    <ul class="list-disc pl-6">
+                        <li>Increased suggestibility (87% above baseline)</li>
+                        <li>Vivid hallucinations of a <span class="redacted">LARGE RED ENTITY</span></li>
+                        <li>Compulsive desire to <span class="redacted">CONSUME MORE</span></li>
+                        <li>Spontaneous chanting of "<span class="redacted">OH YEAH</span>"</li>
+                    </ul>
+                    
+                    <div class="mt-8 p-4 border-l-4 border-red-900 bg-gray-900">
+                        <p class="font-bold">NOTE:</p>
+                        <p>Several subjects reported the entity communicating directly, referring to itself as "<span class="redacted">THE MAN</span>" and promising "<span class="redacted">ASCENSION</span>" through continued consumption.</p>
+                    </div>
+                    
+                    <h2 class="text-2xl font-bold mt-8 mb-4">RECOMMENDATIONS</h2>
+                    <ol class="list-decimal pl-6">
+                        <li>Proceed with mass production of <span class="redacted">PUNCH</span> formula</li>
+                        <li>Establish <span class="redacted">COMMUNE</span> for controlled testing</li>
+                        <li>Develop <span class="redacted">BROADCAST SYSTEM</span> for dissemination</li>
+                        <li>Prepare <span class="redacted">FINAL PROTOCOLS</span></li>
+                    </ol>
+                    
+                    <div class="mt-8 p-4 bg-red-900/20 border border-red-900">
+                        <p class="font-bold">WARNING:</p>
+                        <p>Subjects who attempted to refuse further doses exhibited extreme distress, with several experiencing <span class="redacted">CATATONIC STATES</span> or <span class="redacted">SPONTANEOUS COMBUSTION</span>.</p>
+                    </div>
+                </div>
+                
+                <div class="mt-8 pt-4 border-t border-gray-300">
+                    <div class="flex items-center space-x-4">
+                        <span class="text-sm text-gray-400">TAGS:</span>
+                        <span class="text-xs bg-gray-800 px-2 py-1 rounded">#mkultra</span>
+                        <span class="text-xs bg-gray-800 px-2 py-1 rounded">#declassified</span>
+                        <span class="text-xs bg-gray-800 px-2 py-1 rounded">#experiments</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Comments Section -->
+            <div class="bg-gray-900 p-6 rounded-lg">
+                <h3 class="text-xl font-bold mb-4">COMMUNIQUÉS</h3>
+                
+                <div class="mb-6">
+                    <textarea class="w-full bg-gray-800 border border-red-900 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-red-600" placeholder="ADD YOUR TESTIMONY..."></textarea>
+                    <div class="mt-2 flex justify-between">
+                        <div class="flex space-x-2">
+                            <button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm">🍹</button>
+                            <button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm">💀</button>
+                            <button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm">👁️</button>
+                        </div>
+                        <button class="bg-red-900 hover:bg-red-800 text-white font-bold py-1 px-4 rounded text-sm">
+                            SUBMIT
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Comment 1 -->
+                <div class="mb-4 pb-4 border-b border-gray-700">
+                    <div class="flex justify-between items-start mb-2">
+                        <span class="font-bold">DISCIPLE_47</span>
+                        <span class="text-sm text-gray-400">2023-11-20</span>
+                    </div>
+                    <p class="mb-2">I've seen HIM in my dreams. The walls melted and HE came through. OH YEAH.</p>
+                    <div class="flex space-x-4 text-sm">
+                        <span class="flex items-center text-gray-400"><span class="mr-1">🍹</span> 12</span>
+                        <span class="flex items-center text-gray-400"><span class="mr-1">💀</span> 3</span>
+                        <span class="flex items-center text-gray-400"><span class="mr-1">👁️</span> 7</span>
+                    </div>
+                </div>
+                
+                <!-- Comment 2 -->
+                <div class="mb-4 pb-4 border-b border-gray-700">
+                    <div class="flex justify-between items-start mb-2">
+                        <span class="font-bold">BROADCAST_9</span>
+                        <span class="text-sm text-gray-400">2023-11-18</span>
+                    </div>
+                    <p class="mb-2">The formula works. I've mixed it exactly as described and now I hear THE VOICES in the static.</p>
+                    <div class="flex space-x-4 text-sm">
+                        <span class="flex items-center text-gray-400"><span class="mr-1">🍹</span> 8</span>
+                        <span class="flex items-center text-gray-400"><span class="mr-1">💀</span> 2</span>
+                        <span class="flex items-center text-gray-400"><span class="mr-1">👁️</span> 5</span>
+                    </div>
+                </div>
+                
+                <!-- Comment 3 -->
+                <div class="mb-4">
+                    <div class="flex justify-between items-start mb-2">
+                        <span class="font-bold">WATCHER_13</span>
+                        <span class="text-sm text-gray-400">2023-11-15</span>
+                    </div>
+                    <p class="mb-2">They told me this was declassified but I see REDACTIONS everywhere. What are they hiding?</p>
+                    <div class="flex space-x-4 text-sm">
+                        <span class="flex items-center text-gray-400"><span class="mr-1">🍹</span> 15</span>
+                        <span class="flex items-center text-gray-400"><span class="mr-1">💀</span> 9</span>
+                        <span class="flex items-center text-gray-400"><span class="mr-1">👁️</span> 11</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Community Section -->
+    <section id="community" class="py-16 px-8 bg-black">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-12" style="font-family: 'VT323', monospace;">JOIN THE BROADCAST</h2>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <!-- Discord Widget -->
+                <div class="bg-gray-900 rounded-lg overflow-hidden border border-red-900">
+                    <div class="bg-red-900 p-4">
+                        <h3 class="text-xl font-bold">DISCORD TRANSMISSIONS</h3>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex items-center mb-6">
+                            <div class="w-12 h-12 bg-red-900 rounded-full flex items-center justify-center text-white font-bold text-xl mr-4">
+                                <span>KAC</span>
+                            </div>
+                            <div>
+                                <p class="font-bold">THE KOOL-AID COMMUNE</p>
+                                <p class="text-sm text-gray-400">24/7 BROADCAST</p>
+                            </div>
+                        </div>
+                        
+                        <div class="mb-6">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-sm font-bold">ACTIVE CHANNELS</span>
+                                <span class="text-xs bg-red-900/50 px-2 py-1 rounded">LIVE</span>
+                            </div>
+                            
+                            <div class="space-y-2">
+                                <div class="flex items-center p-2 hover:bg-gray-800 rounded cursor-pointer">
+                                    <span class="text-red-400 mr-2">#</span>
+                                    <span>welcome-ceremony</span>
+                                    <span class="ml-auto text-xs text-gray-400">342 online</span>
+                                </div>
+                                <div class="flex items-center p-2 hover:bg-gray-800 rounded cursor-pointer">
+                                    <span class="text-red-400 mr-2">#</span>
+                                    <span>punch-recipes</span>
+                                    <span class="ml-auto text-xs text-gray-400">127 online</span>
+                                </div>
+                                <div class="flex items-center p-2 hover:bg-gray-800 rounded cursor-pointer">
+                                    <span class="text-red-400 mr-2">#</span>
+                                    <span>declassified</span>
+                                    <span class="ml-auto text-xs text-gray-400">89 online</span>
+                                </div>
+                                <div class="flex items-center p-2 hover:bg-gray-800 rounded cursor-pointer">
+                                    <span class="text-red-400 mr-2">#</span>
+                                    <span>ritual-chants</span>
+                                    <span class="ml-auto text-xs text-gray-400">56 online</span>
+                                </div>
+                                <div class="flex items-center p-2 hover:bg-gray-800 rounded cursor-pointer">
+                                    <span class="text-red-400 mr-2">#</span>
+                                    <span>wall-breakers</span>
+                                    <span class="ml-auto text-xs text-gray-400">203 online</span>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <a href="https://discord.gg" target="_blank" class="block w-full bg-red-900 hover:bg-red-800 text-white font-bold py-3 px-4 rounded text-center transition">
+                            JOIN THE BROADCAST
+                        </a>
+                    </div>
+                </div>
+                
+                <!-- Newsletter Signup -->
+                <div class="bg-gray-900 rounded-lg overflow-hidden border border-red-900">
+                    <div class="bg-red-900 p-4">
+                        <h3 class="text-xl font-bold">PLEDGE YOUR LOYALTY</h3>
+                    </div>
+                    <div class="p-6">
+                        <p class="mb-6">Receive weekly communiqués directly to your inbox. Stay informed of the latest revelations, recipes, and ritual schedules.</p>
+                        
+                        <form class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-bold mb-2">NAME OF INITIATE</label>
+                                <input type="text" class="w-full bg-gray-800 border border-red-900 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-bold mb-2">EMAIL OF ASCENSION</label>
+                                <input type="email" class="w-full bg-gray-800 border border-red-900 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
+                            </div>
+                            
+                            <div class="flex items-center">
+                                <input type="checkbox" id="pledge" class="mr-2">
+                                <label for="pledge" class="text-sm">I pledge to keep the glass half full and the faith overflowing.</label>
+                            </div>
+                            
+                            <button type="submit" class="w-full bg-red-900 hover:bg-red-800 text-white font-bold py-3 px-4 rounded transition">
+                                SUBMIT PLEDGE
+                            </button>
+                        </form>
+                        
+                        <div class="mt-6 p-4 bg-red-900/20 border border-red-900 rounded">
+                            <p class="text-sm">By submitting, you agree to receive transmissions from THE KOOL-AID COMMUNE. You may experience <span class="font-bold">VIVID DREAMS</span>, <span class="font-bold">UNEXPLAINABLE KNOWLEDGE</span>, and <span class="font-bold">UNCONTROLLABLE URGE TO CHANT</span>. These are features, not bugs.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Admin Panel -->
+    <section id="admin" class="py-16 px-8 bg-gray-900 hidden">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-12" style="font-family: 'VT323', monospace;">ADMIN PORTAL</h2>
+            
+            <!-- Login Form (shown by default) -->
+            <div id="loginForm" class="max-w-md mx-auto bg-black p-8 rounded-lg border border-red-900">
+                <h3 class="text-2xl font-bold mb-6 text-center">HIGH PRIEST ACCESS</h3>
+                
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-bold mb-2">INITIATE NAME</label>
+                        <input type="text" class="w-full admin-panel px-4 py-2 rounded">
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-bold mb-2">SACRED PASSWORD</label>
+                        <input type="password" class="w-full admin-panel px-4 py-2 rounded">
+                    </div>
+                    
+                    <div class="flex items-center">
+                        <input type="checkbox" id="remember" class="mr-2">
+                        <label for="remember" class="text-sm">Remember my devotion</label>
+                    </div>
+                    
+                    <button id="adminLogin" class="w-full bg-red-900 hover:bg-red-800 text-white font-bold py-3 px-4 rounded transition mt-4">
+                        ASCEND
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Admin Dashboard (hidden by default) -->
+            <div id="adminDashboard" class="hidden">
+                <div class="flex flex-col lg:flex-row gap-8">
+                    <!-- Sidebar -->
+                    <div class="lg:w-1/4">
+                        <div class="bg-black p-4 rounded-lg border border-red-900 mb-4">
+                            <h3 class="text-xl font-bold mb-4">NAVIGATION</h3>
+                            <ul class="space-y-2">
+                                <li><button class="admin-nav-btn w-full text-left px-3 py-2 rounded hover:bg-red-900/50 transition" data-section="dashboard">DASHBOARD</button></li>
+                                <li><button class="admin-nav-btn w-full text-left px-3 py-2 rounded hover:bg-red-900/50 transition" data-section="posts">MANAGE LORE</button></li>
+                                <li><button class="admin-nav-btn w-full text-left px-3 py-2 rounded hover:bg-red-900/50 transition" data-section="new-post">NEW REVELATION</button></li>
+                                <li><button class="admin-nav-btn w-full text-left px-3 py-2 rounded hover:bg-red-900/50 transition" data-section="comments">COMMUNIQUÉS</button></li>
+                                <li><button class="admin-nav-btn w-full text-left px-3 py-2 rounded hover:bg-red-900/50 transition" data-section="settings">RITUAL SETTINGS</button></li>
+                            </ul>
+                        </div>
+                        
+                        <div class="bg-black p-4 rounded-lg border border-red-900">
+                            <h3 class="text-xl font-bold mb-4">QUICK STATS</h3>
+                            <div class="space-y-4">
+                                <div>
+                                    <p class="text-sm text-gray-400">ACTIVE DISCIPLES</p>
+                                    <p class="text-2xl font-bold">1,427</p>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-400">TODAY'S VISIONS</p>
+                                    <p class="text-2xl font-bold">324</p>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-400">GLASSES CONSUMED</p>
+                                    <p class="text-2xl font-bold">9,871</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Main Content -->
+                    <div class="lg:w-3/4">
+                        <!-- Dashboard Section -->
+                        <div id="dashboardSection" class="admin-section bg-black p-6 rounded-lg border border-red-900">
+                            <h3 class="text-2xl font-bold mb-6">DASHBOARD</h3>
+                            <p>Welcome back, High Priest. The glass is half full and the faith is overflowing.</p>
+                            
+                            <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div class="bg-gray-900 p-4 rounded-lg">
+                                    <h4 class="font-bold mb-2">RECENT VISIONS</h4>
+                                    <div class="h-40 overflow-y-auto">
+                                        <p class="text-sm mb-2">• New disciple reported wall breakthrough</p>
+                                        <p class="text-sm mb-2">• 12 new pledges received</p>
+                                        <p class="text-sm mb-2">• Ritual #9 completed successfully</p>
+                                        <p class="text-sm mb-2">• Broadcast signal strength increasing</p>
+                                    </div>
+                                </div>
+                                
+                                <div class="bg-gray-900 p-4 rounded-lg">
+                                    <h4 class="font-bold mb-2">UPCOMING RITUALS</h4>
+                                    <div class="h-40 overflow-y-auto">
+                                        <p class="text-sm mb-2">• Full Moon Punch Ceremony - Tomorrow</p>
+                                        <p class="text-sm mb-2">• Weekly Broadcast - 3 days</p>
+                                        <p class="text-sm mb-2">• Wall Breaking Workshop - Next week</p>
+                                        <p class="text-sm mb-2">• Annual Ascension Day - 47 days</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Posts Section -->
+                        <div id="postsSection" class="admin-section bg-black p-6 rounded-lg border border-red-900 hidden">
+                            <h3 class="text-2xl font-bold mb-6">MANAGE LORE</h3>
+                            
+                            <div class="mb-6 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4">
+                                <input type="text" placeholder="SEARCH LORE..." class="flex-grow admin-panel px-4 py-2 rounded">
+                                <select class="admin-panel px-4 py-2 rounded">
+                                    <option>ALL TAGS</option>
+                                    <option>MKULTRA</option>
+                                    <option>JONESTOWN</option>
+                                    <option>PUNCH DIMENSION</option>
+                                </select>
+                                <button class="admin-panel bg-red-900 px-4 py-2 rounded">
+                                    FILTER
+                                </button>
+                            </div>
+                            
+                            <div class="overflow-x-auto">
+                                <table class="w-full">
+                                    <thead>
+                                        <tr class="border-b border-red-900">
+                                            <th class="text-left py-2">TITLE</th>
+                                            <th class="text-left py-2">TAGS</th>
+                                            <th class="text-left py-2">DATE</th>
+                                            <th class="text-left py-2">STATUS</th>
+                                            <th class="text-left py-2">ACTIONS</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr class="border-b border-red-900/50">
+                                            <td class="py-3">Operation: Crimson Tide</td>
+                                            <td class="py-3">
+                                                <span class="text-xs bg-gray-800 px-2 py-1 rounded">#mkultra</span>
+                                                <span class="text-xs bg-gray-800 px-2 py-1 rounded">#declassified</span>
+                                            </td>
+                                            <td class="py-3">2023-11-15</td>
+                                            <td class="py-3">
+                                                <span class="text-xs bg-green-900/50 px-2 py-1 rounded">PUBLISHED</span>
+                                            </td>
+                                            <td class="py-3">
+                                                <button class="text-xs bg-blue-900/50 px-2 py-1 rounded mr-1">EDIT</button>
+                                                <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                            </td>
+                                        </tr>
+                                        <tr class="border-b border-red-900/50">
+                                            <td class="py-3">Sacred Recipe #9</td>
+                                            <td class="py-3">
+                                                <span class="text-xs bg-gray-800 px-2 py-1 rounded">#rituals</span>
+                                            </td>
+                                            <td class="py-3">2023-11-10</td>
+                                            <td class="py-3">
+                                                <span class="text-xs bg-green-900/50 px-2 py-1 rounded">PUBLISHED</span>
+                                            </td>
+                                            <td class="py-3">
+                                                <button class="text-xs bg-blue-900/50 px-2 py-1 rounded mr-1">EDIT</button>
+                                                <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                            </td>
+                                        </tr>
+                                        <tr class="border-b border-red-900/50">
+                                            <td class="py-3">Millennium Prophecy</td>
+                                            <td class="py-3">
+                                                <span class="text-xs bg-gray-800 px-2 py-1 rounded">#punch-dimension</span>
+                                            </td>
+                                            <td class="py-3">2023-11-05</td>
+                                            <td class="py-3">
+                                                <span class="text-xs bg-yellow-900/50 px-2 py-1 rounded">DRAFT</span>
+                                            </td>
+                                            <td class="py-3">
+                                                <button class="text-xs bg-blue-900/50 px-2 py-1 rounded mr-1">EDIT</button>
+                                                <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class="py-3">The Broadcasts Continue</td>
+                                            <td class="py-3">
+                                                <span class="text-xs bg-gray-800 px-2 py-1 rounded">#jonestown</span>
+                                                <span class="text-xs bg-gray-800 px-2 py-1 rounded">#broadcast</span>
+                                            </td>
+                                            <td class="py-3">2023-10-28</td>
+                                            <td class="py-3">
+                                                <span class="text-xs bg-green-900/50 px-2 py-1 rounded">PUBLISHED</span>
+                                            </td>
+                                            <td class="py-3">
+                                                <button class="text-xs bg-blue-900/50 px-2 py-1 rounded mr-1">EDIT</button>
+                                                <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            
+                            <div class="mt-4 flex justify-between items-center">
+                                <div class="text-sm text-gray-400">Showing 1 to 4 of 12 entries</div>
+                                <div class="flex space-x-2">
+                                    <button class="px-3 py-1 rounded border border-red-900 text-red-400 text-sm">&lt;</button>
+                                    <button class="px-3 py-1 rounded bg-red-900 text-white text-sm">1</button>
+                                    <button class="px-3 py-1 rounded border border-red-900 text-sm">2</button>
+                                    <button class="px-3 py-1 rounded border border-red-900 text-sm">3</button>
+                                    <button class="px-3 py-1 rounded border border-red-900 text-red-400 text-sm">&gt;</button>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- New Post Section -->
+                        <div id="newPostSection" class="admin-section bg-black p-6 rounded-lg border border-red-900 hidden">
+                            <h3 class="text-2xl font-bold mb-6">NEW REVELATION</h3>
+                            
+                            <div class="mb-4">
+                                <label class="block text-sm font-bold mb-2">TITLE</label>
+                                <input type="text" class="w-full admin-panel px-4 py-2 rounded" placeholder="THE TRUTH ABOUT...">
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label class="block text-sm font-bold mb-2">DOCUMENT TYPE</label>
+                                <select class="w-full admin-panel px-4 py-2 rounded">
+                                    <option>TOP SECRET</option>
+                                    <option>CULT COOKBOOK</option>
+                                    <option>FIELD REPORT</option>
+                                    <option>MEMORANDUM</option>
+                                    <option>PSYOP BRIEF</option>
+                                    <option>MANIFESTO</option>
+                                </select>
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label class="block text-sm font-bold mb-2">TAGS</label>
+                                <div class="flex flex-wrap gap-2">
+                                    <span class="text-xs bg-gray-800 px-2 py-1 rounded flex items-center">
+                                        MKULTRA
+                                        <button class="ml-1 text-red-400">&times;</button>
+                                    </span>
+                                    <span class="text-xs bg-gray-800 px-2 py-1 rounded flex items-center">
+                                        JONESTOWN
+                                        <button class="ml-1 text-red-400">&times;</button>
+                                    </span>
+                                    <input type="text" class="text-xs bg-gray-800 px-2 py-1 rounded" placeholder="Add tag...">
+                                </div>
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label class="block text-sm font-bold mb-2">CONTENT</label>
+                                <div class="flex border-b border-red-900">
+                                    <button class="px-3 py-2 border-b-2 border-red-400">WRITE</button>
+                                    <button class="px-3 py-2">PREVIEW</button>
+                                </div>
+                                <textarea class="w-full admin-panel px-4 py-2 rounded mt-2 h-64" placeholder="Begin your revelation..."></textarea>
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label class="block text-sm font-bold mb-2">REDACTED TEXT</label>
+                                <p class="text-sm mb-2">Highlight text and click to redact:</p>
+                                <div class="flex space-x-2">
+                                    <button class="text-xs bg-black px-2 py-1 rounded border border-red-900">REDACT</button>
+                                    <button class="text-xs bg-black px-2 py-1 rounded border border-red-900">UNREDACT</button>
+                                </div>
+                            </div>
+                            
+                            <div class="mb-4">
+                                <label class="block text-sm font-bold mb-2">STATUS</label>
+                                <div class="flex space-x-4">
+                                    <label class="flex items-center">
+                                        <input type="radio" name="status" checked class="mr-2">
+                                        <span>DRAFT</span>
+                                    </label>
+                                    <label class="flex items-center">
+                                        <input type="radio" name="status" class="mr-2">
+                                        <span>PUBLISH</span>
+                                    </label>
+                                    <label class="flex items-center">
+                                        <input type="radio" name="status" class="mr-2">
+                                        <span>SCHEDULE</span>
+                                        <input type="datetime-local" class="ml-2 admin-panel px-2 py-1 text-sm rounded">
+                                    </label>
+                                </div>
+                            </div>
+                            
+                            <div class="flex justify-end space-x-4">
+                                <button class="px-4 py-2 rounded border border-red-900">SAVE DRAFT</button>
+                                <button class="px-4 py-2 rounded bg-red-900">PUBLISH REVELATION</button>
+                            </div>
+                        </div>
+                        
+                        <!-- Comments Section -->
+                        <div id="commentsSection" class="admin-section bg-black p-6 rounded-lg border border-red-900 hidden">
+                            <h3 class="text-2xl font-bold mb-6">COMMUNIQUÉS</h3>
+                            
+                            <div class="mb-6 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4">
+                                <input type="text" placeholder="SEARCH TESTIMONIES..." class="flex-grow admin-panel px-4 py-2 rounded">
+                                <select class="admin-panel px-4 py-2 rounded">
+                                    <option>ALL LORE</option>
+                                    <option>Operation: Crimson Tide</option>
+                                    <option>Sacred Recipe #9</option>
+                                    <option>Millennium Prophecy</option>
+                                </select>
+                                <button class="admin-panel bg-red-900 px-4 py-2 rounded">
+                                    FILTER
+                                </button>
+                            </div>
+                            
+                            <div class="overflow-y-auto h-96">
+                                <div class="mb-4 pb-4 border-b border-red-900/50">
+                                    <div class="flex justify-between items-start mb-2">
+                                        <span class="font-bold">DISCIPLE_47</span>
+                                        <span class="text-sm text-gray-400">2023-11-20</span>
+                                    </div>
+                                    <p class="mb-2">I've seen HIM in my dreams. The walls melted and HE came through. OH YEAH.</p>
+                                    <div class="flex justify-between items-center">
+                                        <div class="flex space-x-4 text-sm">
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">🍹</span> 12</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">💀</span> 3</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">👁️</span> 7</span>
+                                        </div>
+                                        <div class="flex space-x-2">
+                                            <button class="text-xs bg-blue-900/50 px-2 py-1 rounded">APPROVE</button>
+                                            <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div class="mb-4 pb-4 border-b border-red-900/50">
+                                    <div class="flex justify-between items-start mb-2">
+                                        <span class="font-bold">BROADCAST_9</span>
+                                        <span class="text-sm text-gray-400">2023-11-18</span>
+                                    </div>
+                                    <p class="mb-2">The formula works. I've mixed it exactly as described and now I hear THE VOICES in the static.</p>
+                                    <div class="flex justify-between items-center">
+                                        <div class="flex space-x-4 text-sm">
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">🍹</span> 8</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">💀</span> 2</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">👁️</span> 5</span>
+                                        </div>
+                                        <div class="flex space-x-2">
+                                            <button class="text-xs bg-blue-900/50 px-2 py-1 rounded">APPROVE</button>
+                                            <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div class="mb-4 pb-4 border-b border-red-900/50">
+                                    <div class="flex justify-between items-start mb-2">
+                                        <span class="font-bold">WATCHER_13</span>
+                                        <span class="text-sm text-gray-400">2023-11-15</span>
+                                    </div>
+                                    <p class="mb-2">They told me this was declassified but I see REDACTIONS everywhere. What are they hiding?</p>
+                                    <div class="flex justify-between items-center">
+                                        <div class="flex space-x-4 text-sm">
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">🍹</span> 15</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">💀</span> 9</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">👁️</span> 11</span>
+                                        </div>
+                                        <div class="flex space-x-2">
+                                            <button class="text-xs bg-blue-900/50 px-2 py-1 rounded">APPROVE</button>
+                                            <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div class="mb-4 pb-4 border-b border-red-900/50">
+                                    <div class="flex justify-between items-start mb-2">
+                                        <span class="font-bold">INITIATE_33</span>
+                                        <span class="text-sm text-gray-400">2023-11-12</span>
+                                    </div>
+                                    <p class="mb-2">I followed the recipe but my walls remain intact. Am I doing something wrong?</p>
+                                    <div class="flex justify-between items-center">
+                                        <div class="flex space-x-4 text-sm">
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">🍹</span> 4</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">💀</span> 1</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">👁️</span> 2</span>
+                                        </div>
+                                        <div class="flex space-x-2">
+                                            <button class="text-xs bg-blue-900/50 px-2 py-1 rounded">APPROVE</button>
+                                            <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div class="mb-4">
+                                    <div class="flex justify-between items-start mb-2">
+                                        <span class="font-bold">SEEKER_5</span>
+                                        <span class="text-sm text-gray-400">2023-11-10</span>
+                                    </div>
+                                    <p class="mb-2">The broadcast last night... I understood everything. The glass IS half full!</p>
+                                    <div class="flex justify-between items-center">
+                                        <div class="flex space-x-4 text-sm">
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">🍹</span> 7</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">💀</span> 0</span>
+                                            <span class="flex items-center text-gray-400"><span class="mr-1">👁️</span> 3</span>
+                                        </div>
+                                        <div class="flex space-x-2">
+                                            <button class="text-xs bg-blue-900/50 px-2 py-1 rounded">APPROVE</button>
+                                            <button class="text-xs bg-red-900/50 px-2 py-1 rounded">DELETE</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Settings Section -->
+                        <div id="settingsSection" class="admin-section bg-black p-6 rounded-lg border border-red-900 hidden">
+                            <h3 class="text-2xl font-bold mb-6">RITUAL SETTINGS</h3>
+                            
+                            <div class="space-y-6">
+                                <div>
+                                    <h4 class="font-bold mb-4">GENERAL</h4>
+                                    <div class="space-y-4">
+                                        <div class="flex items-center justify-between">
+                                            <label>Enable subliminal messages</label>
+                                            <label class="relative inline-flex items-center cursor-pointer">
+                                                <input type="checkbox" checked class="sr-only peer">
+                                                <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-900"></div>
+                                            </label>
+                                        </div>
+                                        <div class="flex items-center justify-between">
+                                            <label>Enable audio transmissions</label>
+                                            <label class="relative inline-flex items-center cursor-pointer">
+                                                <input type="checkbox" checked class="sr-only peer">
+                                                <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-900"></div>
+                                            </label>
+                                        </div>
+                                        <div class="flex items-center justify-between">
+                                            <label>Enable wall break detection</label>
+                                            <label class="relative inline-flex items-center cursor-pointer">
+                                                <input type="checkbox" class="sr-only peer">
+                                                <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-900"></div>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div>
+                                    <h4 class="font-bold mb-4">APPEARANCE</h4>
+                                    <div class="space-y-4">
+                                        <div>
+                                            <label class="block text-sm font-bold mb-2">PRIMARY COLOR</label>
+                                            <div class="flex space-x-4">
+                                                <label class="flex items-center">
+                                                    <input type="radio" name="primary-color" checked class="mr-2">
+                                                    <span class="w-6 h-6 bg-red-900 rounded-full"></span>
+                                               
+<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=banditfrombluey/theoolaidcummmune" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>