Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Blind Justice - Retro Cartoon Hero</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap'); | |
| :root { | |
| --primary: #FF5252; | |
| --secondary: #42A5F5; | |
| --accent: #FFD600; | |
| --dark: #212121; | |
| --light: #FAFAFA; | |
| } | |
| body { | |
| font-family: 'Comic Neue', cursive; | |
| background-color: var(--light); | |
| color: var(--dark); | |
| } | |
| .comic-font { | |
| font-family: 'Bangers', cursive; | |
| letter-spacing: 1px; | |
| } | |
| .speech-bubble { | |
| position: relative; | |
| background: white; | |
| border-radius: 1em; | |
| border: 3px solid var(--dark); | |
| padding: 1rem; | |
| } | |
| .speech-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 20px; | |
| border-width: 15px 15px 0; | |
| border-style: solid; | |
| border-color: white transparent; | |
| display: block; | |
| width: 0; | |
| } | |
| .speech-bubble:before { | |
| content: ''; | |
| position: absolute; | |
| bottom: -19px; | |
| left: 18px; | |
| border-width: 17px 17px 0; | |
| border-style: solid; | |
| border-color: var(--dark) transparent; | |
| display: block; | |
| width: 0; | |
| } | |
| .comic-button { | |
| transform: skew(-10deg); | |
| transition: all 0.3s ease; | |
| box-shadow: 5px 5px 0px rgba(0,0,0,0.2); | |
| } | |
| .comic-button:hover { | |
| transform: skew(-10deg) translateY(-3px); | |
| box-shadow: 8px 8px 0px rgba(0,0,0,0.2); | |
| } | |
| .comic-panel { | |
| border: 4px solid var(--dark); | |
| box-shadow: 8px 8px 0px rgba(0,0,0,0.2); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .comic-panel:before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| radial-gradient(circle, transparent 20%, var(--light) 20%, var(--light) 80%, transparent 80%, transparent), | |
| radial-gradient(circle, transparent 20%, var(--light) 20%, var(--light) 80%, transparent 80%, transparent) 10px 10px; | |
| background-size: 20px 20px; | |
| opacity: 0.1; | |
| } | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .character-card { | |
| transition: all 0.3s ease; | |
| } | |
| .character-card:hover { | |
| transform: translateY(-5px) rotate(2deg); | |
| box-shadow: 10px 10px 0px rgba(0,0,0,0.2); | |
| } | |
| .nav-item { | |
| position: relative; | |
| } | |
| .nav-item:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 3px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--accent); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-item:hover:after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-yellow-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-red-600 py-4 px-6 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-blind text-white text-3xl"></i> | |
| <h1 class="comic-font text-3xl text-white">BLIND JUSTICE</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition" onclick="showPage('home')">HOME</a> | |
| <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition" onclick="showPage('characters')">CHARACTERS</a> | |
| <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition">MERCH</a> | |
| <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition">EPISODES</a> | |
| <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition">BLOG</a> | |
| </div> | |
| <button class="md:hidden text-white text-2xl" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-red-700 py-2 px-4" id="mobile-menu"> | |
| <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition" onclick="showPage('home')">HOME</a> | |
| <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition" onclick="showPage('characters')">CHARACTERS</a> | |
| <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition">MERCH</a> | |
| <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition">EPISODES</a> | |
| <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition">BLOG</a> | |
| </div> | |
| </nav> | |
| <!-- Home Page --> | |
| <div id="home" class="page active"> | |
| <!-- Hero Section --> | |
| <section class="comic-panel bg-gradient-to-r from-blue-500 to-purple-600 py-16 px-4 md:px-0"> | |
| <div class="container mx-auto flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <img src="https://placehold.co/600x400/FF5252/FFFFFF?text=Blind+Justice+%26+Fluffy" alt="Blind Justice and Fluffy" class="w-full rounded-lg comic-panel"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 text-center md:text-left"> | |
| <h2 class="comic-font text-5xl md:text-6xl text-white mb-4">JUSTICE NEVER BLINKS.</h2> | |
| <h3 class="comic-font text-3xl md:text-4xl text-yellow-300 mb-6">BUT IT TRIPS A LOT.</h3> | |
| <p class="text-white text-lg mb-8">The most visually impaired hero and his sarcastic guide dog fight crime (and common sense) in this action-comedy series!</p> | |
| <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6 justify-center md:justify-start"> | |
| <button class="comic-button bg-yellow-400 text-black font-bold py-3 px-6 rounded-lg comic-font text-xl"> | |
| <i class="fas fa-play mr-2"></i> WATCH EPISODES | |
| </button> | |
| <button class="comic-button bg-white text-red-600 font-bold py-3 px-6 rounded-lg comic-font text-xl"> | |
| <i class="fas fa-shopping-bag mr-2"></i> BROWSE MERCH | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Teaser Video --> | |
| <section class="py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <h2 class="comic-font text-4xl text-center mb-8 text-red-600">LATEST EPISODE TEASER</h2> | |
| <div class="comic-panel bg-white p-2 max-w-4xl mx-auto"> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-200 relative"> | |
| <img src="https://placehold.co/800x450/212121/FFFFFF?text=Episode+Teaser+Video" alt="Episode Teaser" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button class="bg-red-600 text-white rounded-full p-4 hover:bg-red-700 transition"> | |
| <i class="fas fa-play text-3xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="comic-font text-2xl text-red-600 mb-2">"The Case of the Missing Donut"</h3> | |
| <p class="text-gray-800">Fluffy's favorite snack has disappeared! Blind Justice must use his other heightened senses to track down the culprit... if he can stop bumping into walls long enough.</p> | |
| <div class="flex items-center mt-4"> | |
| <div class="flex"> | |
| <i class="fas fa-paw text-yellow-500"></i> | |
| <i class="fas fa-paw text-yellow-500"></i> | |
| <i class="fas fa-paw text-yellow-500"></i> | |
| <i class="fas fa-paw text-gray-300"></i> | |
| </div> | |
| <span class="ml-2 text-sm text-gray-600">Fluffy's Rating: 3/4 Paws (Moderate Chaos)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Characters --> | |
| <section class="py-12 px-4 bg-blue-100"> | |
| <div class="container mx-auto"> | |
| <h2 class="comic-font text-4xl text-center mb-8 text-blue-600">MEET THE TEAM</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Blind Justice --> | |
| <div class="comic-panel bg-white p-6 text-center character-card"> | |
| <img src="https://placehold.co/200x200/FF5252/FFFFFF?text=Blind+Justice" alt="Blind Justice" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-red-500"> | |
| <h3 class="comic-font text-2xl text-red-600 mb-2">BLIND JUSTICE</h3> | |
| <p class="text-gray-700 mb-4">"I don't need eyes to see crime... I just need someone to point me in the right direction."</p> | |
| <button class="comic-button bg-red-500 text-white py-2 px-4 rounded-md text-sm" onclick="showPage('characters')"> | |
| VIEW PROFILE | |
| </button> | |
| </div> | |
| <!-- Fluffy --> | |
| <div class="comic-panel bg-white p-6 text-center character-card"> | |
| <img src="https://placehold.co/200x200/FFD600/FFFFFF?text=Fluffy" alt="Fluffy" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-yellow-500"> | |
| <h3 class="comic-font text-2xl text-yellow-600 mb-2">FLUFFY</h3> | |
| <p class="text-gray-700 mb-4">"I'm not just a guide dog, I'm a life coach for the visually impaired and sarcastically gifted."</p> | |
| <button class="comic-button bg-yellow-500 text-black py-2 px-4 rounded-md text-sm" onclick="showPage('characters')"> | |
| VIEW PROFILE | |
| </button> | |
| </div> | |
| <!-- Dr. Fruitloop --> | |
| <div class="comic-panel bg-white p-6 text-center character-card"> | |
| <img src="https://placehold.co/200x200/42A5F5/FFFFFF?text=Dr.+Fruitloop" alt="Dr. Fruitloop" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-blue-500"> | |
| <h3 class="comic-font text-2xl text-blue-600 mb-2">DR. FRUITLOOP</h3> | |
| <p class="text-gray-700 mb-4">"My evil plans are 100% organic, gluten-free, and packed with vitamin C for your destruction!"</p> | |
| <button class="comic-button bg-blue-500 text-white py-2 px-4 rounded-md text-sm" onclick="showPage('characters')"> | |
| VIEW PROFILEå | |
| </button> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="comic-button bg-blue-600 text-white font-bold py-3 px-8 rounded-lg comic-font text-xl" onclick="showPage('characters')"> | |
| MEET THE FULL CAST | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Merch Preview --> | |
| <section class="py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <h2 class="comic-font text-4xl text-center mb-8 text-purple-600">FAN FAVORITE MERCH</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="comic-panel bg-white p-4 text-center"> | |
| <div class="bg-gray-100 h-48 mb-4 flex items-center justify-center"> | |
| <img src="https://placehold.co/150x150/FFFFFF/212121?text=Justice+Never+Blinks+T-Shirt" alt="Justice Never Blinks T-Shirt" class="max-h-full"> | |
| </div> | |
| <h3 class="comic-font text-xl text-purple-600 mb-2">Justice Never Blinks Tee</h3> | |
| <p class="text-gray-700 mb-3">$24.99</p> | |
| <button class="comic-button bg-purple-500 text-white py-2 px-4 rounded-md text-sm w-full"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="comic-panel bg-white p-4 text-center"> | |
| <div class="bg-gray-100 h-48 mb-4 flex items-center justify-center"> | |
| <img src="https://placehold.co/150x150/FFFFFF/212121?text=Fluffy's+Snark+Mug" alt="Fluffy's Snark Mug" class="max-h-full"> | |
| </div> | |
| <h3 class="comic-font text-xl text-red-600 mb-2">Fluffy's Snark Mug</h3> | |
| <p class="text-gray-700 mb-3">$18.99</p> | |
| <button class="comic-button bg-red-500 text-white py-2 px-4 rounded-md text-sm w-full"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="comic-panel bg-white p-4 text-center"> | |
| <div class="bg-gray-100 h-48 mb-4 flex items-center justify-center"> | |
| <img src="https://placehold.co/150x150/FFFFFF/212121?text=Villain+Socks" alt="Villain Socks" class="max-h-full"> | |
| </div> | |
| <h3 class="comic-font text-xl text-blue-600 mb-2">Villain Crew Socks</h3> | |
| <p class="text-gray-700 mb-3">$14.99</p> | |
| <button class="comic-button bg-blue-500 text-white py-2 px-4 rounded-md text-sm w-full"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="comic-panel bg-white p-4 text-center"> | |
| <div class="bg-gray-100 h-48 mb-4 flex items-center justify-center"> | |
| <img src="https://placehold.co/150x150/FFFFFF/212121?text=Blindfold+Gag" alt="Blindfold Gag" class="max-h-full"> | |
| </div> | |
| <h3 class="comic-font text-xl text-yellow-600 mb-2">"Justice Vision" Blindfold</h3> | |
| <p class="text-gray-700 mb-3">$9.99</p> | |
| <button class="comic-button bg-yellow-500 text-black py-2 px-4 rounded-md text-sm w-full"> | |
| ADD TO CART | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 px-4 bg-red-100"> | |
| <div class="container mx-auto max-w-3xl text-center comic-panel bg-white p-8"> | |
| <h2 class="comic-font text-4xl text-red-600 mb-4">JOIN THE MISSION</h2> | |
| <p class="text-xl mb-6">Want to see justice stumble into your inbox? Sign up for exclusive content, wallpapers, and Fluffy's sarcastic commentary!</p> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-red-500"> | |
| <button class="comic-button bg-red-600 text-white font-bold py-3 px-6 rounded-lg comic-font text-xl"> | |
| SIGN UP NOW | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-4">"We promise not to spam you... much." - Fluffy</p> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Characters Page --> | |
| <div id="characters" class="page"> | |
| <section class="py-12 px-4 bg-blue-600"> | |
| <div class="container mx-auto"> | |
| <h1 class="comic-font text-5xl text-white text-center mb-4">MEET THE CAST</h1> | |
| <p class="text-white text-center max-w-2xl mx-auto">From the heroic to the hilariously villainous, get to know the colorful characters of Blind Justice!</p> | |
| </div> | |
| </section> | |
| <section class="py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <!-- Hero Team --> | |
| <h2 class="comic-font text-3xl text-red-600 mb-6 border-b-2 border-red-600 pb-2">THE HERO TEAM</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <!-- Blind Justice --> | |
| <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card"> | |
| <div class="md:w-1/3 mb-4 md:mb-0"> | |
| <img src="https://placehold.co/300x400/FF5252/FFFFFF?text=Blind+Justice" alt="Blind Justice" class="w-full h-auto rounded-lg"> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="bg-blue-500 text-white rounded-full p-3 hover:bg-blue-600 transition"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-6"> | |
| <h3 class="comic-font text-3xl text-red-600 mb-2">DORIAN DORKE / BLIND JUSTICE</h3> | |
| <div class="speech-bubble bg-yellow-100 mb-4"> | |
| <p class="text-gray-800 italic">"I don't need eyes to see crime... I just need someone to point me in the right direction. And maybe tie my shoes."</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg text-gray-800">POWERS & ABILITIES:</h4> | |
| <ul class="list-disc pl-5 text-gray-700"> | |
| <li>Heightened senses (except vision, obviously)</li> | |
| <li>Unwavering sense of justice</li> | |
| <li>Ability to trip over absolutely nothing</li> | |
| <li>Master of the "blindly confident" pose</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800">BIO:</h4> | |
| <p class="text-gray-700">Formerly a mild-mannered accountant, Dorian Dorke gained his "powers" after a bizarre accident involving a vat of expired energy drinks and a rogue Roomba. Now as Blind Justice, he fights crime with the help of his sarcastic guide dog Fluffy, often solving cases entirely by accident.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fluffy --> | |
| <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card"> | |
| <div class="md:w-1/3 mb-4 md:mb-0"> | |
| <img src="https://placehold.co/300x400/FFD600/FFFFFF?text=Fluffy" alt="Fluffy" class="w-full h-auto rounded-lg"> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="bg-blue-500 text-white rounded-full p-3 hover:bg-blue-600 transition"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-6"> | |
| <h3 class="comic-font text-3xl text-yellow-600 mb-2">FLUFFY THE GUIDE DOG</h3> | |
| <div class="speech-bubble bg-red-100 mb-4"> | |
| <p class="text-gray-800 italic">"I'm not just a guide dog, I'm a life coach for the visually impaired and sarcastically gifted. Also, I do all the actual detective work."</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg text-gray-800">SPECIAL SKILLS:</h4> | |
| <ul class="list-disc pl-5 text-gray-700"> | |
| <li>Expert-level sarcasm</li> | |
| <li>Actual crime-solving abilities</li> | |
| <li>Keeping Blind Justice from walking into traffic</li> | |
| <li>Snack detection (especially donuts)</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800">BIO:</h4> | |
| <p class="text-gray-700">Fluffy was the top of his class at Guide Dog University before being paired with Dorian Dorke. What was supposed to be a simple service dog assignment turned into a full-time job of crime-fighting and keeping his human from embarrassing himself. Fluffy provides the brains of the operation, though he'd never admit it to Blind Justice's face.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Supporting Cast --> | |
| <h2 class="comic-font text-3xl text-blue-600 mb-6 border-b-2 border-blue-600 pb-2">SUPPORTING CAST</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <!-- Detective Lena Hardcase --> | |
| <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card"> | |
| <div class="md:w-1/3 mb-4 md:mb-0"> | |
| <img src="https://placehold.co/300x400/42A5F5/FFFFFF?text=Detective+Hardcase" alt="Detective Lena Hardcase" class="w-full h-auto rounded-lg"> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button class="bg-blue-500 text-white rounded-full p-3 hover:bg-blue-600 transition"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-6"> | |
| <h3 class="comic-font text-3xl text-blue-600 mb-2">DETECTIVE LENA HARDCASE</h3> | |
| <div class="speech-bubble bg-purple-100 mb-4"> | |
| <p class="text-gray-800 italic">"I don't care if you solved the case, Justice. You still can't park your 'Justice Mobile' in a handicap spot without a permit!"</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg text-gray-800">ROLE:</h4> | |
| <ul class="list-disc pl-5 text-gray-700"> | |
| <li>By-the-book police detective</li> | |
| <li>Reluctant ally to Blind Justice</li> | |
| <li>Only person Fluffy respects</li> | |
| <li>Constantly filing paperwork for Blind Justice's collateral damage</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800">BIO:</h4> | |
| <p class="text-gray-700">Detective Hardcase is the no-nonsense cop who keeps getting dragged into Blind Justice's cases. While she appreciates his crime-fighting results, she could do without the property damage and bizarre explanations. She has a soft spot for Fluffy, who is the only one who seems to understand police procedure.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Master Dorke --> | |
| <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card"> | |
| <div class="md:w-1/3 mb-4 md:mb-0"> | |
| <img src="https://placehold.co/300x400/6A1B9A/FFFFFF?text=Master+Dorke" alt="Master Dorke" class="w-full h-auto rounded-lg"> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button class="bg-purple-500 text-white rounded-full p-3 hover:bg-purple-600 transition"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-6"> | |
| <h3 class="comic-font text-3xl text-purple-600 mb-2">MASTER DORKE</h3> | |
| <div class="speech-bubble bg-green-100 mb-4"> | |
| <p class="text-gray-800 italic">"My son, to truly see, you must first close your eyes. Also, maybe get a white cane that doesn't double as a nunchuck."</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg text-gray-800">ROLE:</h4> | |
| <ul class="list-disc pl-5 text-gray-700"> | |
| <li>Blind Justice's eccentric father</li> | |
| <li>Retired "sensei" of questionable martial arts</li> | |
| <li>Source of terrible advice</li> | |
| <li>Fluffy's favorite naptime companion</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800">BIO:</h4> | |
| <p class="text-gray-700">Master Dorke claims to have trained in ancient martial arts on a mountaintop, though evidence suggests it might have been a timeshare in Florida. He dispenses wisdom that's 10% profound and 90% nonsense, but his heart is in the right place. He's the only one who thinks Blind Justice's crime-fighting methods make perfect sense.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Villains --> | |
| <h2 class="comic-font text-3xl text-green-600 mb-6 border-b-2 border-green-600 pb-2">THE VILLAINS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Dr. Fruitloop --> | |
| <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card"> | |
| <div class="md:w-1/3 mb-4 md:mb-0"> | |
| <img src="https://placehold.co/300x400/4CAF50/FFFFFF?text=Dr.+Fruitloop" alt="Dr. Fruitloop" class="w-full h-auto rounded-lg"> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button class="bg-green-500 text-white rounded-full p-3 hover:bg-green-600 transition"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-6"> | |
| <h3 class="comic-font text-3xl text-green-600 mb-2">DR. FRUITLOOP</h3> | |
| <div class="speech-bubble bg-pink-100 mb-4"> | |
| <p class="text-gray-800 italic">"My evil plans are 100% organic, gluten-free, and packed with vitamin C for your destruction! Also, have you tried my new kale smoothie?"</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg text-gray-800">CRIMINAL SPECIALTY:</h4> | |
| <ul class="list-disc pl-5 text-gray-700"> | |
| <li>Health food-based crimes</li> | |
| <li>Turning city water supplies into kombucha</li> | |
| <li>Forcing people to recycle</li> | |
| <li>Generally being too enthusiastic about nutrition</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800">BIO:</h4> | |
| <p class="text-gray-700">Once a promising nutritionist, Dr. Fruitloop went rogue when the world refused to adopt his extreme diet plans. Now he forces his health-conscious villainy on the city, one superfood at a time. His battles with Blind Justice usually end with someone getting a face full of quinoa or being trapped in a juice cleanse.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mayor Pibbles --> | |
| <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card"> | |
| <div class="md:w-1/3 mb-4 md:mb-0"> | |
| <img src="https://placehold.co/300x400/9C27B0/FFFFFF?text=Mayor+Pibbles" alt="Mayor Pibbles" class="w-full h-auto rounded-lg"> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <button class="bg-purple-500 text-white rounded-full p-3 hover:bg-purple-600 transition"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-6"> | |
| <h3 class="comic-font text-3xl text-purple-600 mb-2">MAYOR PIBBLES</h3> | |
| <div class="speech-bubble bg-blue-100 mb-4"> | |
| <p class="text-gray-800 italic">"As your mayor, I promise to clean up this city! Starting with getting rid of that meddling Blind Justice and his mutt!"</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg text-gray-800">CRIMINAL SPECIALTY:</h4> | |
| <ul class="list-disc pl-5 text-gray-700"> | |
| <li>Corruption with a smile</li> | |
| <li>Fake political campaigns</li> | |
| <li>Scheming behind cute cat videos</li> | |
| <li>Hating dogs (especially Fluffy)</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800">BIO:</h4> | |
| <p class="text-gray-700">Mayor Pibbles rose to power on a platform of cuteness and empty promises. Behind his adorable exterior lies a corrupt politician who will stop at nothing to maintain power - including framing Blind Justice for crimes. His public image as a cat-loving mayor is only rivaled by his private hatred for Fluffy, who keeps uncovering his schemes.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Back to Home --> | |
| <section class="py-8 px-4 bg-red-100"> | |
| <div class="container mx-auto text-center"> | |
| <button class="comic-button bg-red-600 text-white font-bold py-3 px-8 rounded-lg comic-font text-xl" onclick="showPage('home')"> | |
| <i class="fas fa-arrow-left mr-2"></i> BACK TO HOME | |
| </button> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-8 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-blind text-red-500 text-3xl"></i> | |
| <h2 class="comic-font text-2xl">BLIND JUSTICE</h2> | |
| </div> | |
| <p class="text-gray-400 mt-2">"Justice Never Blinks. But It Trips a Lot."</p> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-youtube text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-tiktok text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-gray-400">© 2023 Blind Justice</p> | |
| <p class="text-gray-500 text-sm">All rights reserved. Justice may be blind, but our lawyers aren't.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Show/hide pages | |
| function showPage(pageId) { | |
| document.querySelectorAll('.page').forEach(page => { | |
| page.classList.remove('active'); | |
| }); | |
| document.getElementById(pageId).classList.add('active'); | |
| // Scroll to top | |
| window.scrollTo(0, 0); | |
| } | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Character audio play simulation | |
| document.querySelectorAll('[onclick*="playAudio"]').forEach(button => { | |
| button.addEventListener('click', function() { | |
| // In a real implementation, this would play character audio | |
| alert("Character voice line would play here!"); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dwilcox24/funny-stuff" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |