Spaces:
Running
Running
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
1f9a624 verified | <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"><</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">></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"><</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">></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">×</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">×</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> |