Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Eldritch Emporium - Dark Fantasy Merchandise</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| eldritch: { | |
| purple: '#3a0ca3', | |
| dark: '#10002b', | |
| blood: '#9d0208', | |
| bone: '#f8f0e3', | |
| rust: '#b08968', | |
| } | |
| }, | |
| fontFamily: { | |
| gothic: ['Cinzel', 'serif'], | |
| grotesk: ['UnifrakturMaguntia', 'cursive'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap'); | |
| body { | |
| background-color: #10002b; | |
| color: #f8f0e3; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(58, 12, 163, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(157, 2, 8, 0.1) 0%, transparent 20%); | |
| min-height: 100vh; | |
| } | |
| .gothic-text { | |
| font-family: 'Cinzel', serif; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .grotesk-text { | |
| font-family: 'UnifrakturMaguntia', cursive; | |
| } | |
| .eldritch-border { | |
| border: 2px solid #3a0ca3; | |
| box-shadow: 0 0 15px rgba(58, 12, 163, 0.5); | |
| } | |
| .blood-border { | |
| border: 2px solid #9d0208; | |
| box-shadow: 0 0 15px rgba(157, 2, 8, 0.5); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(58, 12, 163, 0.7); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #9d0208; | |
| transition: width .3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .candle-flicker { | |
| animation: flicker 3s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0%, 100% { opacity: 0.9; } | |
| 20% { opacity: 0.8; } | |
| 40% { opacity: 0.7; } | |
| 60% { opacity: 0.9; } | |
| 80% { opacity: 0.8; } | |
| } | |
| .scroll-down { | |
| animation: float 2s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-gothic"> | |
| <!-- Cursed Navigation --> | |
| <nav class="bg-eldritch-dark py-4 px-6 flex justify-between items-center sticky top-0 z-50 border-b border-eldritch-purple"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-skull text-eldritch-blood text-2xl"></i> | |
| <span class="grotesk-text text-2xl text-eldritch-purple">ELDRITCH EMPORIUM</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-eldritch-bone hover:text-eldritch-blood transition">Relics</a> | |
| <a href="#" class="nav-link text-eldritch-bone hover:text-eldritch-blood transition">Tomes</a> | |
| <a href="#" class="nav-link text-eldritch-bone hover:text-eldritch-blood transition">Grimoires</a> | |
| <a href="#" class="nav-link text-eldritch-bone hover:text-eldritch-blood transition">Ritual Kits</a> | |
| <a href="#" class="nav-link text-eldritch-bone hover:text-eldritch-blood transition">About</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-shopping-cart text-eldritch-bone hover:text-eldritch-blood cursor-pointer"></i> | |
| <i class="fas fa-user text-eldritch-bone hover:text-eldritch-blood cursor-pointer"></i> | |
| <i class="fas fa-bars text-eldritch-bone hover:text-eldritch-blood cursor-pointer md:hidden"></i> | |
| </div> | |
| </nav> | |
| <!-- Blood Moon Banner --> | |
| <div class="relative overflow-hidden h-96 flex items-center justify-center"> | |
| <div class="absolute inset-0 bg-black opacity-50"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-64 h-64 rounded-full bg-gradient-to-br from-eldritch-blood to-eldritch-purple opacity-30 blur-xl"></div> | |
| </div> | |
| <div class="relative z-10 text-center px-4"> | |
| <h1 class="grotesk-text text-5xl md:text-7xl text-eldritch-bone mb-4">FORBIDDEN ARTIFACTS</h1> | |
| <p class="text-xl text-eldritch-bone mb-8 max-w-2xl mx-auto">Unearth relics of forgotten gods and cursed treasures from the abyss</p> | |
| <button class="bg-eldritch-blood hover:bg-eldritch-purple text-eldritch-bone px-8 py-3 rounded-none border border-eldritch-bone transition-all duration-300 hover:scale-105"> | |
| ENTER THE VAULT | |
| </button> | |
| </div> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 scroll-down"> | |
| <i class="fas fa-chevron-down text-eldritch-bone text-2xl"></i> | |
| </div> | |
| </div> | |
| <!-- Featured Cursed Items --> | |
| <section class="py-16 px-4 md:px-16"> | |
| <div class="text-center mb-16"> | |
| <h2 class="grotesk-text text-4xl text-eldritch-blood mb-4">CURATED BY THE OLD ONES</h2> | |
| <div class="w-24 h-1 bg-eldritch-purple mx-auto mb-6"></div> | |
| <p class="text-eldritch-bone max-w-3xl mx-auto">Each artifact in our collection has been personally selected by entities beyond mortal comprehension. Handle with care.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card bg-eldritch-dark eldritch-border p-6 transition-all duration-300 cursor-pointer relative overflow-hidden group"> | |
| <div class="absolute -inset-1 bg-gradient-to-br from-eldritch-purple to-transparent opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="h-64 bg-gradient-to-br from-eldritch-dark to-eldritch-purple flex items-center justify-center mb-4"> | |
| <i class="fas fa-book-dead text-8xl text-eldritch-bone opacity-70"></i> | |
| </div> | |
| <h3 class="text-xl text-eldritch-bone mb-2">Necronomicon Replica</h3> | |
| <p class="text-eldritch-rust text-sm mb-4">The infamous grimoire of Abdul Alhazred</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-eldritch-blood text-lg">$89.99</span> | |
| <button class="bg-eldritch-purple hover:bg-eldritch-blood text-eldritch-bone px-4 py-1 text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card bg-eldritch-dark eldritch-border p-6 transition-all duration-300 cursor-pointer relative overflow-hidden group"> | |
| <div class="absolute -inset-1 bg-gradient-to-br from-eldritch-purple to-transparent opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="h-64 bg-gradient-to-br from-eldritch-dark to-eldritch-purple flex items-center justify-center mb-4"> | |
| <i class="fas fa-ring text-8xl text-eldritch-bone opacity-70"></i> | |
| </div> | |
| <h3 class="text-xl text-eldritch-bone mb-2">Sign of the Yellow King</h3> | |
| <p class="text-eldritch-rust text-sm mb-4">Wrought silver pendant with eldritch inscriptions</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-eldritch-blood text-lg">$49.99</span> | |
| <button class="bg-eldritch-purple hover:bg-eldritch-blood text-eldritch-bone px-4 py-1 text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="product-card bg-eldritch-dark eldritch-border p-6 transition-all duration-300 cursor-pointer relative overflow-hidden group"> | |
| <div class="absolute -inset-1 bg-gradient-to-br from-eldritch-purple to-transparent opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="h-64 bg-gradient-to-br from-eldritch-dark to-eldritch-purple flex items-center justify-center mb-4"> | |
| <i class="fas fa-candle-holder text-8xl text-eldritch-bone opacity-70 candle-flicker"></i> | |
| </div> | |
| <h3 class="text-xl text-eldritch-bone mb-2">Black Mass Candles</h3> | |
| <p class="text-eldritch-rust text-sm mb-4">Set of 13 ritual candles with bone wax</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-eldritch-blood text-lg">$34.99</span> | |
| <button class="bg-eldritch-purple hover:bg-eldritch-blood text-eldritch-bone px-4 py-1 text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="product-card bg-eldritch-dark eldritch-border p-6 transition-all duration-300 cursor-pointer relative overflow-hidden group"> | |
| <div class="absolute -inset-1 bg-gradient-to-br from-eldritch-purple to-transparent opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div> | |
| <div class="relative z-10"> | |
| <div class="h-64 bg-gradient-to-br from-eldritch-dark to-eldritch-purple flex items-center justify-center mb-4"> | |
| <i class="fas fa-hand-holding-magic text-8xl text-eldritch-bone opacity-70"></i> | |
| </div> | |
| <h3 class="text-xl text-eldritch-bone mb-2">Shoggoth Plush</h3> | |
| <p class="text-eldritch-rust text-sm mb-4">"Cute" amorphous horror from beyond</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-eldritch-blood text-lg">$29.99</span> | |
| <button class="bg-eldritch-purple hover:bg-eldritch-blood text-eldritch-bone px-4 py-1 text-sm transition"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Ritual Collection Section --> | |
| <section class="py-16 px-4 md:px-16 bg-gradient-to-b from-eldritch-dark to-black"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="grotesk-text text-4xl text-eldritch-purple mb-6">THE RITUAL COLLECTION</h2> | |
| <p class="text-eldritch-bone mb-6">Our most powerful artifacts, reserved for those who dare to peer beyond the veil. These items have been used in actual occult ceremonies and may retain... residual energies.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-skull-crossbones text-eldritch-blood mr-3"></i> | |
| <span class="text-eldritch-bone">Hand-forged ritual daggers</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-pentagram text-eldritch-blood mr-3"></i> | |
| <span class="text-eldritch-bone">Authentic summoning circles</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-book-dead text-eldritch-blood mr-3"></i> | |
| <span class="text-eldritch-bone">Cursed manuscripts</span> | |
| </li> | |
| </ul> | |
| <button class="bg-transparent border border-eldritch-purple hover:bg-eldritch-purple text-eldritch-bone px-8 py-3 transition"> | |
| EXPLORE THE DARKNESS | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="blood-border p-1"> | |
| <div class="relative h-96 bg-gradient-to-br from-eldritch-dark to-eldritch-blood flex items-center justify-center"> | |
| <i class="fas fa-eye text-8xl text-eldritch-bone opacity-20 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></i> | |
| <div class="relative z-10 text-center p-8"> | |
| <i class="fas fa-quote-left text-eldritch-rust text-4xl opacity-50 mb-4"></i> | |
| <p class="text-eldritch-bone italic mb-6">"That is not dead which can eternal lie, And with strange aeons even death may die."</p> | |
| <p class="text-eldritch-rust">- Abdul Alhazred</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-eldritch-blood text-eldritch-bone px-4 py-2 text-sm"> | |
| WARNING: FOR EXPERIENCED PRACTITIONERS ONLY | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials from Beyond --> | |
| <section class="py-16 px-4 md:px-16"> | |
| <div class="text-center mb-16"> | |
| <h2 class="grotesk-text text-4xl text-eldritch-purple mb-4">WHISPERS FROM THE VOID</h2> | |
| <div class="w-24 h-1 bg-eldritch-blood mx-auto mb-6"></div> | |
| <p class="text-eldritch-bone max-w-3xl mx-auto">What our customers (and the entities they've summoned) have to say</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-eldritch-dark eldritch-border p-6 relative"> | |
| <div class="absolute top-0 left-0 bg-eldritch-blood text-eldritch-bone px-3 py-1 text-xs">CARCOSA</div> | |
| <div class="flex items-center mb-4 mt-6"> | |
| <div class="w-12 h-12 rounded-full bg-eldritch-purple flex items-center justify-center mr-4"> | |
| <i class="fas fa-mask text-xl text-eldritch-bone"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-eldritch-bone">The King in Yellow</h4> | |
| <div class="flex text-eldritch-rust"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-eldritch-bone italic">"The Sign brought me more worshippers than anticipated. The screams were... delightful."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-eldritch-dark eldritch-border p-6 relative"> | |
| <div class="absolute top-0 left-0 bg-eldritch-blood text-eldritch-bone px-3 py-1 text-xs">ARKHAM</div> | |
| <div class="flex items-center mb-4 mt-6"> | |
| <div class="w-12 h-12 rounded-full bg-eldritch-purple flex items-center justify-center mr-4"> | |
| <i class="fas fa-user-graduate text-xl text-eldritch-bone"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-eldritch-bone">Dr. Henry Armitage</h4> | |
| <div class="flex text-eldritch-rust"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-eldritch-bone italic">"The Necronomicon replica is disturbingly accurate. We've had to implement new security measures at the library."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-eldritch-dark eldritch-border p-6 relative"> | |
| <div class="absolute top-0 left-0 bg-eldritch-blood text-eldritch-bone px-3 py-1 text-xs">R'LYEH</div> | |
| <div class="flex items-center mb-4 mt-6"> | |
| <div class="w-12 h-12 rounded-full bg-eldritch-purple flex items-center justify-center mr-4"> | |
| <i class="fas fa-water text-xl text-eldritch-bone"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-eldritch-bone">Cthulhu fhtagn</h4> | |
| <div class="flex text-eldritch-rust"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-eldritch-bone italic">"Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn. Ia! Ia!"</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Signup (The Black Scrolls) --> | |
| <section class="py-16 px-4 md:px-16 bg-gradient-to-b from-black to-eldritch-dark"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="blood-border p-8 relative"> | |
| <i class="fas fa-scroll text-6xl text-eldritch-rust opacity-20 absolute top-4 right-4"></i> | |
| <h2 class="grotesk-text text-3xl text-eldritch-blood mb-4">SUBSCRIBE TO THE BLACK SCROLLS</h2> | |
| <p class="text-eldritch-bone mb-8 max-w-2xl mx-auto">Receive forbidden knowledge, exclusive offers, and whispers from beyond in our monthly newsletter</p> | |
| <div class="flex flex-col md:flex-row gap-4 max-w-md mx-auto"> | |
| <input type="email" placeholder="Your cursed email" class="flex-grow bg-eldritch-dark border border-eldritch-purple text-eldritch-bone px-4 py-3 focus:outline-none focus:ring-2 focus:ring-eldritch-blood"> | |
| <button class="bg-eldritch-blood hover:bg-eldritch-purple text-eldritch-bone px-6 py-3 transition"> | |
| SIGN IN BLOOD | |
| </button> | |
| </div> | |
| <p class="text-eldritch-rust text-xs mt-4">By subscribing, you agree to our <a href="#" class="text-eldritch-blood hover:underline">Terms of Damnation</a></p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Eldritch Footer --> | |
| <footer class="bg-black py-12 px-4 md:px-16 border-t border-eldritch-purple"> | |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="grotesk-text text-xl text-eldritch-purple mb-4">ELDRITCH EMPORIUM</h3> | |
| <p class="text-eldritch-rust text-sm">Providing cursed artifacts and forbidden knowledge since the stars were right.</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <i class="fab fa-instagram text-eldritch-bone hover:text-eldritch-blood cursor-pointer"></i> | |
| <i class="fab fa-twitter text-eldritch-bone hover:text-eldritch-blood cursor-pointer"></i> | |
| <i class="fab fa-discord text-eldritch-bone hover:text-eldritch-blood cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-eldritch-bone font-bold mb-4">EXPLORE</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">New Arrivals</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Best Sellers</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Sale Items</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Ritual Kits</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-eldritch-bone font-bold mb-4">SUPPORT</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Contact Us</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">FAQ</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Shipping</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Returns</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-eldritch-bone font-bold mb-4">LEGAL</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Terms</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Privacy</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Cookie Policy</a></li> | |
| <li><a href="#" class="text-eldritch-rust hover:text-eldritch-blood transition">Sanity Disclaimer</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-eldritch-purple mt-12 pt-8 text-center"> | |
| <p class="text-eldritch-rust text-sm">© 2023 Eldritch Emporium. All rights reserved. All rituals performed at your own risk.</p> | |
| </div> | |
| </footer> | |
| <!-- Floating Candle --> | |
| <div class="fixed bottom-8 right-8 cursor-pointer"> | |
| <div class="relative"> | |
| <div class="w-12 h-16 bg-gradient-to-b from-eldritch-rust to-eldritch-dark rounded-sm"></div> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-eldritch-blood rounded-full candle-flicker"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple script to make the candle toggle dark mode | |
| document.querySelector('.fixed.bottom-8.right-8').addEventListener('click', function() { | |
| document.body.classList.toggle('bg-black'); | |
| }); | |
| </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=misri/necromantic-design" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |