Spaces:
Running
Running
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Operation Glitterbomb - Fight Back Against Surveillance</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> .glitter-bg { background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ffcc00); background-size: 400% 400%; animation: glitter 8s ease infinite; } @keyframes glitter { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } .typewriter { overflow: hidden; border-right: .15em solid #ff00cc; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #ff00cc; } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } </style> </head> <body class="bg-black text-white font-mono"> <!-- Glitter Bomb Header --> <header class="glitter-bg py-10 px-4 text-center"> <div class="max-w-4xl mx-auto"> <h1 class="text-5xl md:text-7xl font-bold mb-4 text-black">OPERATION GLITTERBOMB</h1> <p class="text-xl md:text-2xl font-bold text-black">Because fuck surveillance capitalism</p> </div> </header> <!-- Main Content --> <main class="max-w-4xl mx-auto px-4 py-10"> <!-- Tagline --> <div class="mb-16 text-center"> <h2 class="typewriter text-3xl md:text-4xl font-bold mb-6 text-pink-500">WHAT KIND OF WORLD DO YOU WANT YOUR KIDS TO LIVE IN?</h2> <p class="text-xl md:text-2xl mb-8">One where every USB drive is a glitter-filled middle finger to the surveillance state.</p> <div class="flex justify-center"> <div class="border-2 border-pink-500 p-4 max-w-lg"> <p class="text-lg italic">"The most subversive people are those who ask questions."</p> <p class="text-right">- Some anarchist probably</p> </div> </div> </div> <!-- The Problem --> <section class="mb-16 bg-gray-900 p-6 rounded-lg border-l-4 border-red-500"> <h2 class="text-3xl font-bold mb-4 text-red-400">THE PROBLEM</h2> <p class="mb-4 text-lg">Cops and three-letter agencies are vacuuming up every USB drive they find, hoping to scrape data about activists, organizers, and anyone who makes them nervous.</p> <p class="text-lg">We say: <span class="text-red-400 font-bold">LET'S WASTE THEIR TIME.</span></p> </section> <!-- The Solution --> <section class="mb-16"> <h2 class="text-3xl font-bold mb-6 text-green-400">THE GLITTERBOMB SOLUTION</h2> <div class="grid md:grid-cols-3 gap-6"> <div class="bg-gray-800 p-4 rounded-lg border-t-4 border-yellow-400"> <h3 class="text-xl font-bold mb-2 text-yellow-300">1. USB Drives That Fight Back</h3> <p>Custom firmware that:</p> <ul class="list-disc pl-5 mt-2"> <li>Shows fake network maps</li> <li>Corrupts itself when scanned</li> <li>Spams glitter gifs endlessly</li> <li>Maybe even makes a little spark</li> </ul> </div> <div class="bg-gray-800 p-4 rounded-lg border-t-4 border-blue-400"> <h3 class="text-xl font-bold mb-2 text-blue-300">2. Strategic Distribution</h3> <p>We'll seed them:</p> <ul class="list-disc pl-5 mt-2"> <li>On the Red Line</li> <li>At protest sites</li> <li>Near cop bars</li> <li>Anywhere sketchy</li> </ul> </div> <div class="bg-gray-800 p-4 rounded-lg border-t-4 border-purple-400"> <h3 class="text-xl font-bold mb-2 text-purple-300">3. Maximum Annoyance</h3> <p>Label them with things like:</p> <ul class="list-disc pl-5 mt-2"> <li>"ANTIFA NETWORK MAP"</li> <li>"DRUG DEALER CONTACTS"</li> <li>"CPD CORRUPTION PROOF"</li> <li>"FBI SURVEILLANCE LOGS"</li> </ul> </div> </div> </section> <!-- Funding --> <section class="mb-16 bg-gray-900 p-6 rounded-lg"> <h2 class="text-3xl font-bold mb-6 text-center text-yellow-400">FUND THE CHAOS</h2> <div class="grid md:grid-cols-2 gap-6"> <div class="border-2 border-pink-500 p-6 rounded-lg"> <h3 class="text-2xl font-bold mb-4 text-center text-pink-400">GLITTER TIER - $20</h3> <ul class="space-y-2"> <li class="flex items-start"><i class="fas fa-check text-pink-500 mt-1 mr-2"></i> <span>1 custom glitterbomb USB</span></li> <li class="flex items-start"><i class="fas fa-check text-pink-500 mt-1 mr-2"></i> <span>Your name on our "Wall of Mischief"</span></li> <li class="flex items-start"><i class="fas fa-check text-pink-500 mt-1 mr-2"></i> <span>Digital "I funded the revolution" sticker</span></li> </ul> <button class="w-full mt-6 bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded pulse"> FUND 1 USB </button> </div> <div class="border-2 border-red-500 p-6 rounded-lg"> <h3 class="text-2xl font-bold mb-4 text-center text-red-400">ANARCHY TIER - $100</h3> <ul class="space-y-2"> <li class="flex items-start"><i class="fas fa-check text-red-500 mt-1 mr-2"></i> <span>5 glitterbomb USBs deployed in Chicago</span></li> <li class="flex items-start"><i class="fas fa-check text-red-500 mt-1 mr-2"></i> <span>Video proof of deployment</span></li> <li class="flex items-start"><i class="fas fa-check text-red-500 mt-1 mr-2"></i> <span>Custom label suggestion</span></li> <li class="flex items-start"><i class="fas fa-check text-red-500 mt-1 mr-2"></i> <span>"Agent of Chaos" digital badge</span></li> </ul> <button class="w-full mt-6 bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded pulse"> FUND CHAOS </button> </div> </div> </section> <!-- FAQ --> <section class="mb-16"> <h2 class="text-3xl font-bold mb-6 text-center text-purple-400">FREQUENTLY ASKED QUESTIONS</h2> <div class="space-y-4"> <div class="border-b border-gray-700 pb-4"> <h3 class="text-xl font-bold text-green-400">Is this legal?</h3> <p class="mt-2">We're not lawyers, but we're pretty sure wasting police time isn't a crime. The USBs won't actually damage equipment (probably). This is art. Performance art.</p> </div> <div class="border-b border-gray-700 pb-4"> <h3 class="text-xl font-bold text-green-400">Won't this just make cops more paranoid?</h3> <p class="mt-2">Yes. That's the point. Maybe they'll stop grabbing random USBs looking for evidence and actually do some real police work.</p> </div> <div class="border-b border-gray-700 pb-4"> <h3 class="text-xl font-bold text-green-400">Can I suggest USB contents?</h3> <p class="mt-2">Absolutely. Higher funding tiers get to suggest what shows up when they scan the drive. Rickrolls? Endless goatse? The possibilities are endless.</p> </div> </div> </section> <!-- Call to Action --> <section class="text-center py-10 border-t border-b border-pink-500"> <h2 class="text-4xl font-bold mb-6">READY TO JOIN THE RESISTANCE?</h2> <p class="text-xl mb-8">Every dollar funds another USB drive that will waste hours of police forensic time.</p> <button class="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-bold py-4 px-8 rounded-full text-xl pulse"> FUND THE GLITTER REVOLUTION </button> <p class="mt-4 text-sm text-gray-400">(This is totally a joke, officer. Unless...?)</p> </section> </main> <!-- Footer --> <footer class="bg-gray-900 py-8 px-4 text-center"> <div class="max-w-4xl mx-auto"> <div class="flex justify-center space-x-6 mb-6"> <a href="#" class="text-pink-500 hover:text-pink-300 text-2xl"><i class="fab fa-twitter"></i></a> <a href="#" class="text-pink-500 hover:text-pink-300 text-2xl"><i class="fab fa-instagram"></i></a> <a href="#" class="text-pink-500 hover:text-pink-300 text-2xl"><i class="fab fa-github"></i></a> </div> <p class="text-gray-400">Operation Glitterbomb is a conceptual art project. Probably.</p> <p class="text-gray-500 text-sm mt-2">No law enforcement agencies were harmed in the making of this website.</p> </div> </footer> <script> // Simple animation for buttons document.querySelectorAll('button').forEach(button => { button.addEventListener('mouseover', function() { this.classList.add('transform', 'scale-105'); }); button.addEventListener('mouseout', function() { this.classList.remove('transform', 'scale-105'); }); }); // Fake "funding" counter const fundingCounter = document.createElement('div'); fundingCounter.className = 'fixed bottom-4 right-4 bg-pink-600 text-white px-4 py-2 rounded-full shadow-lg z-50'; fundingCounter.innerHTML = `<span class="font-bold">$${Math.floor(Math.random() * 50000) + 10000}</span> raised so far`; document.body.appendChild(fundingCounter); setInterval(() => { const current = parseInt(fundingCounter.textContent.replace(/\D/g,'')); fundingCounter.innerHTML = `<span class="font-bold">$${current + Math.floor(Math.random() * 100) + 10}</span> raised so far`; }, 5000); </script> </body> </html> Make the above, only brighter, a little less edgy, and a little more clear that we're putting these labelled to misdirect on present weed dealers |