Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Arcane Nexus - The Wizards' Social Network</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=Cinzel+Decorative:wght@400;700;900&family=Eczar:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Eczar', serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .title-font { | |
| font-family: 'Cinzel Decorative', cursive; | |
| } | |
| .spell-card { | |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); | |
| border: 1px solid #3b82f6; | |
| box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .spell-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(59, 130, 246, 0.4); | |
| } | |
| .avatar { | |
| border: 2px solid #8b5cf6; | |
| box-shadow: 0 0 10px rgba(139, 92, 246, 0.7); | |
| } | |
| .post-area { | |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%); | |
| border: 1px solid #8b5cf6; | |
| } | |
| .shop-item { | |
| transition: all 0.3s ease; | |
| } | |
| .shop-item:hover { | |
| transform: scale(1.05); | |
| } | |
| .monster-card { | |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); | |
| border: 1px solid #ef4444; | |
| box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3); | |
| } | |
| .guild-card { | |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%); | |
| border: 1px solid #10b981; | |
| box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #8b5cf6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .sparkle { | |
| position: absolute; | |
| width: 5px; | |
| height: 5px; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| opacity: 0; | |
| } | |
| @keyframes sparkle-fall { | |
| 0% { | |
| transform: translateY(-20px) rotate(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(20px) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Sparkle effect container --> | |
| <div id="sparkle-container"></div> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-blue-900 via-purple-900 to-indigo-900 py-4 px-6 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-hat-wizard text-3xl text-purple-300"></i> | |
| <h1 class="title-font text-3xl text-transparent bg-clip-text bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300"> | |
| Arcane Nexus | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <a href="#" class="nav-link text-purple-200 hover:text-white">Home</a> | |
| <a href="#" class="nav-link text-purple-200 hover:text-white">Spellbook</a> | |
| <a href="#" class="nav-link text-purple-200 hover:text-white">Guilds</a> | |
| <a href="#" class="nav-link text-purple-200 hover:text-white">Shop</a> | |
| <div class="relative"> | |
| <img src="https://i.pravatar.cc/40?img=5" alt="User Avatar" class="avatar rounded-full cursor-pointer"> | |
| <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-gray-800"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto py-6 px-4 grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- User Profile Card --> | |
| <div class="bg-slate-800 rounded-lg p-4 shadow-lg border border-purple-600"> | |
| <div class="flex flex-col items-center"> | |
| <img src="https://i.pravatar.cc/100?img=5" alt="User Avatar" class="avatar rounded-full mb-4 w-24 h-24"> | |
| <h3 class="text-xl font-bold text-purple-300">Merlin Ambrosius</h3> | |
| <p class="text-sm text-slate-300 mb-2">Archmage of the Northern Realms</p> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-blue-900 text-blue-200 text-xs px-2 py-1 rounded">Fire</span> | |
| <span class="bg-purple-900 text-purple-200 text-xs px-2 py-1 rounded">Divination</span> | |
| <span class="bg-green-900 text-green-200 text-xs px-2 py-1 rounded">Healing</span> | |
| </div> | |
| <div class="w-full bg-slate-700 rounded-full h-2 mb-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <p class="text-xs text-slate-400">Mana Level: 85%</p> | |
| </div> | |
| </div> | |
| <!-- Contacts List --> | |
| <div class="bg-slate-800 rounded-lg p-4 shadow-lg border border-blue-600"> | |
| <h3 class="text-lg font-bold text-blue-300 mb-4 flex items-center"> | |
| <i class="fas fa-scroll mr-2"></i> Fellow Mages | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3 hover:bg-slate-700 p-2 rounded cursor-pointer"> | |
| <img src="https://i.pravatar.cc/40?img=10" alt="Contact" class="rounded-full border-2 border-green-500"> | |
| <div> | |
| <p class="text-sm font-medium">Morgana LeFay</p> | |
| <p class="text-xs text-slate-400">Online</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 hover:bg-slate-700 p-2 rounded cursor-pointer"> | |
| <img src="https://i.pravatar.cc/40?img=12" alt="Contact" class="rounded-full border-2 border-yellow-500"> | |
| <div> | |
| <p class="text-sm font-medium">Gandalf the Grey</p> | |
| <p class="text-xs text-slate-400">Casting spells</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 hover:bg-slate-700 p-2 rounded cursor-pointer"> | |
| <img src="https://i.pravatar.cc/40?img=15" alt="Contact" class="rounded-full border-2 border-red-500"> | |
| <div> | |
| <p class="text-sm font-medium">Saruman the White</p> | |
| <p class="text-xs text-slate-400">Last seen 2h ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 hover:bg-slate-700 p-2 rounded cursor-pointer"> | |
| <img src="https://i.pravatar.cc/40?img=20" alt="Contact" class="rounded-full border-2 border-purple-500"> | |
| <div> | |
| <p class="text-sm font-medium">Hermione Granger</p> | |
| <p class="text-xs text-slate-400">Studying</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3 hover:bg-slate-700 p-2 rounded cursor-pointer"> | |
| <img src="https://i.pravatar.cc/40?img=25" alt="Contact" class="rounded-full border-2 border-blue-500"> | |
| <div> | |
| <p class="text-sm font-medium">Albus Dumbledore</p> | |
| <p class="text-xs text-slate-400">In meeting</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-blue-900 hover:bg-blue-800 text-blue-200 rounded-lg text-sm font-medium transition"> | |
| <i class="fas fa-plus mr-1"></i> Add Mage | |
| </button> | |
| </div> | |
| <!-- Recommended Monsters --> | |
| <div class="bg-slate-800 rounded-lg p-4 shadow-lg border border-red-600"> | |
| <h3 class="text-lg font-bold text-red-300 mb-4 flex items-center"> | |
| <i class="fas fa-dragon mr-2"></i> Monster Hunts | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="monster-card rounded-lg p-3 cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-red-900 rounded-full p-2"> | |
| <i class="fas fa-dragon text-red-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Ancient Red Dragon</p> | |
| <p class="text-xs text-slate-400">Difficulty: ★★★★★</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="monster-card rounded-lg p-3 cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-purple-900 rounded-full p-2"> | |
| <i class="fas fa-spider text-purple-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Giant Phase Spider</p> | |
| <p class="text-xs text-slate-400">Difficulty: ★★★☆☆</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="monster-card rounded-lg p-3 cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="bg-green-900 rounded-full p-2"> | |
| <i class="fas fa-skull text-green-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Lich King</p> | |
| <p class="text-xs text-slate-400">Difficulty: ★★★★★</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-red-900 hover:bg-red-800 text-red-200 rounded-lg text-sm font-medium transition"> | |
| <i class="fas fa-search mr-1"></i> Find More | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Middle Content --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Post Creation --> | |
| <div class="post-area rounded-lg p-4 shadow-lg"> | |
| <div class="flex space-x-3"> | |
| <img src="https://i.pravatar.cc/40?img=5" alt="User Avatar" class="avatar rounded-full"> | |
| <div class="flex-1"> | |
| <textarea | |
| placeholder="What mystical thoughts occupy your mind today, oh wise one?" | |
| class="w-full bg-slate-800 border border-purple-700 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-purple-600" | |
| rows="3" | |
| ></textarea> | |
| <div class="flex justify-between items-center mt-2"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-400 hover:text-blue-300"> | |
| <i class="fas fa-magic"></i> | |
| </button> | |
| <button class="text-green-400 hover:text-green-300"> | |
| <i class="fas fa-scroll"></i> | |
| </button> | |
| <button class="text-yellow-400 hover:text-yellow-300"> | |
| <i class="fas fa-camera"></i> | |
| </button> | |
| <button class="text-purple-400 hover:text-purple-300"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </button> | |
| </div> | |
| <button class="bg-purple-700 hover:bg-purple-600 text-white px-4 py-1 rounded-lg text-sm font-medium transition"> | |
| Cast Post | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Spells --> | |
| <div class="bg-slate-800 rounded-lg p-4 shadow-lg border border-blue-600"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-blue-300 flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> New Spells | |
| </h3> | |
| <a href="#" class="text-sm text-blue-400 hover:text-blue-300">See All</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="spell-card rounded-lg p-4 cursor-pointer"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-blue-900 rounded-full p-2"> | |
| <i class="fas fa-fire text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-blue-200">Inferno Conflagration</h4> | |
| <p class="text-xs text-slate-400 mb-2">Fire • Level 8</p> | |
| <p class="text-sm text-slate-300">Unleashes a devastating wave of magical fire that incinerates everything in a 60-foot cone.</p> | |
| <div class="flex justify-between items-center mt-3"> | |
| <span class="text-xs bg-blue-900 text-blue-200 px-2 py-1 rounded">120 Mana</span> | |
| <button class="text-xs text-blue-400 hover:text-blue-300">Learn <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="spell-card rounded-lg p-4 cursor-pointer"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-purple-900 rounded-full p-2"> | |
| <i class="fas fa-eye text-purple-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-purple-200">Eldritch Revelation</h4> | |
| <p class="text-xs text-slate-400 mb-2">Divination • Level 5</p> | |
| <p class="text-sm text-slate-300">Grants the caster visions of possible futures for the next 24 hours.</p> | |
| <div class="flex justify-between items-center mt-3"> | |
| <span class="text-xs bg-purple-900 text-purple-200 px-2 py-1 rounded">75 Mana</span> | |
| <button class="text-xs text-purple-400 hover:text-purple-300">Learn <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="spell-card rounded-lg p-4 cursor-pointer"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-green-900 rounded-full p-2"> | |
| <i class="fas fa-leaf text-green-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-green-200">Nature's Embrace</h4> | |
| <p class="text-xs text-slate-400 mb-2">Healing • Level 3</p> | |
| <p class="text-sm text-slate-300">Heals all allies within 30 feet for moderate damage and removes poison effects.</p> | |
| <div class="flex justify-between items-center mt-3"> | |
| <span class="text-xs bg-green-900 text-green-200 px-2 py-1 rounded">45 Mana</span> | |
| <button class="text-xs text-green-400 hover:text-green-300">Learn <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="spell-card rounded-lg p-4 cursor-pointer"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-yellow-900 rounded-full p-2"> | |
| <i class="fas fa-shield-alt text-yellow-300"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-yellow-200">Arcane Aegis</h4> | |
| <p class="text-xs text-slate-400 mb-2">Abjuration • Level 4</p> | |
| <p class="text-sm text-slate-300">Creates a protective barrier that absorbs magical and physical attacks for 1 minute.</p> | |
| <div class="flex justify-between items-center mt-3"> | |
| <span class="text-xs bg-yellow-900 text-yellow-200 px-2 py-1 rounded">60 Mana</span> | |
| <button class="text-xs text-yellow-400 hover:text-yellow-300">Learn <i class="fas fa-arrow-right ml-1"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Posts --> | |
| <div class="bg-slate-800 rounded-lg p-4 shadow-lg border border-purple-600"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-purple-300 flex items-center"> | |
| <i class="fas fa-scroll mr-2"></i> Arcane Chatter | |
| </h3> | |
| <a href="#" class="text-sm text-purple-400 hover:text-purple-300">See All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Post 1 --> | |
| <div class="bg-slate-700 rounded-lg p-4"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://i.pravatar.cc/40?img=10" alt="User" class="avatar rounded-full"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-bold text-purple-200">Morgana LeFay</h4> | |
| <p class="text-xs text-slate-400">2 hours ago • <i class="fas fa-globe-europe"></i></p> | |
| </div> | |
| <button class="text-slate-400 hover:text-purple-300"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mt-2 text-sm">Just perfected a new curse that turns the target's hair into snakes. Anyone want to test it out? 🐍✨ #DarkArts #ExperimentalMagic</p> | |
| <div class="flex space-x-4 mt-3"> | |
| <button class="flex items-center text-slate-400 hover:text-red-400 text-xs"> | |
| <i class="fas fa-fire mr-1"></i> 12 | |
| </button> | |
| <button class="flex items-center text-slate-400 hover:text-blue-400 text-xs"> | |
| <i class="fas fa-comment-alt mr-1"></i> 5 | |
| </button> | |
| <button class="flex items-center text-slate-400 hover:text-green-400 text-xs"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post 2 --> | |
| <div class="bg-slate-700 rounded-lg p-4"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://i.pravatar.cc/40?img=12" alt="User" class="avatar rounded-full"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-bold text-blue-200">Gandalf the Grey</h4> | |
| <p class="text-xs text-slate-400">5 hours ago • <i class="fas fa-users"></i> Fellowship</p> | |
| </div> | |
| <button class="text-slate-400 hover:text-blue-300"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <p class="mt-2 text-sm">A wizard is never late, nor is he early. He arrives precisely when he means to. Unless he miscalculates the teleportation coordinates. Again. #WizardProblems #Portals</p> | |
| <div class="mt-3 rounded-lg overflow-hidden"> | |
| <img src="https://source.unsplash.com/random/600x300/?fantasy,wizard" alt="Post image" class="w-full h-auto"> | |
| </div> | |
| <div class="flex space-x-4 mt-3"> | |
| <button class="flex items-center text-slate-400 hover:text-red-400 text-xs"> | |
| <i class="fas fa-fire mr-1"></i> 42 | |
| </button> | |
| <button class="flex items-center text-slate-400 hover:text-blue-400 text-xs"> | |
| <i class="fas fa-comment-alt mr-1"></i> 8 | |
| </button> | |
| <button class="flex items-center text-slate-400 hover:text-green-400 text-xs"> | |
| <i class="fas fa-share mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Open Quests --> | |
| <div class="bg-slate-800 rounded-lg p-4 shadow-lg border border-yellow-600"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-yellow-300 flex items-center"> | |
| <i class="fas fa-quest mr-2"></i> Open Quests | |
| </h3> | |
| <a href="#" class="text-sm text-yellow-400 hover:text-yellow-300">See All</a> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="bg-slate-700 rounded-lg p-3 cursor-pointer hover:bg-slate-600 transition"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-yellow-900 rounded-full p-2"> | |
| <i class="fas fa-crown text-yellow-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">The Lost Crown of Eldoria</p> | |
| <p class="text-xs text-slate-400">Reward: 5000 Gold, +3 Staff</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-700 rounded-lg p-3 cursor-pointer hover:bg-slate-600 transition"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-blue-900 rounded-full p-2"> | |
| <i class="fas fa-flask text-blue-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Potion Master's Challenge</p> | |
| <p class="text-xs text-slate-400">Reward: Rare Ingredients</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-700 rounded-lg p-3 cursor-pointer hover:bg-slate-600 transition"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-red-900 rounded-full p-2"> | |
| <i class="fas fa-skull text-red-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Lich's Crypt Exploration</p> | |
| <p class="text-xs text-slate-400">Reward: Ancient Spell Tome</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-yellow-900 hover:bg-yellow-800 text-yellow-200 rounded-lg text-sm font-medium transition"> | |
| <i class="fas fa-search mr-1"></i> Find More Quests | |
| </button> | |
| </div> | |
| <!-- Open Guilds --> | |
| <div class="bg-slate-800 rounded-lg p-4 shadow-lg border border-green-600"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-green-300 flex items-center"> | |
| <i class="fas fa-landmark mr-2"></i> Open Guilds | |
| </h3> | |
| <a href="#" class="text-sm text-green-400 hover:text-green-300">See All</a> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="guild-card rounded-lg p-3 cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://source.unsplash.com/random/50x50/?wizard,guild" alt="Guild" class="rounded-full w-10 h-10"> | |
| <div> | |
| <p class="font-medium">Order of the Phoenix</p> | |
| <p class="text-xs text-slate-400">Fire Magic • 127 Members</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="guild-card rounded-lg p-3 cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://source.unsplash.com/random/50x50/?wizard,guild,2" alt="Guild" class="rounded-full w-10 h-10"> | |
| <div> | |
| <p class="font-medium">Arcane Researchers</p> | |
| <p class="text-xs text-slate-400">All Schools • 89 Members</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="guild-card rounded-lg p-3 cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://source.unsplash.com/random/50x50/?wizard,guild,3" alt="Guild" class="rounded-full w-10 h-10"> | |
| <div> | |
| <p class="font-medium">Druids of the Moon</p> | |
| <p class="text-xs text-slate-400">Nature Magic • 64 Members</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-green-900 hover:bg-green-800 text-green-200 rounded-lg text-sm font-medium transition"> | |
| <i class="fas fa-plus mr-1"></i> Create Guild | |
| </button> | |
| </div> | |
| <!-- Mini Shop --> | |
| <div class="bg-slate-800 rounded-lg p-4 shadow-lg border border-purple-600"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-purple-300 flex items-center"> | |
| <i class="fas fa-shopping-bag mr-2"></i> Arcane Emporium | |
| </h3> | |
| <a href="#" class="text-sm text-purple-400 hover:text-purple-300">See All</a> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="shop-item bg-slate-700 rounded-lg p-3 cursor-pointer"> | |
| <div class="bg-purple-900 rounded-lg p-2 mb-2 flex justify-center"> | |
| <i class="fas fa-hat-wizard text-2xl text-purple-300"></i> | |
| </div> | |
| <p class="text-xs font-medium text-center">Enchanted Wizard Hat</p> | |
| <p class="text-xs text-purple-300 text-center">250 Gold</p> | |
| </div> | |
| <div class="shop-item bg-slate-700 rounded-lg p-3 cursor-pointer"> | |
| <div class="bg-blue-900 rounded-lg p-2 mb-2 flex justify-center"> | |
| <i class="fas fa-staff text-2xl text-blue-300"></i> | |
| </div> | |
| <p class="text-xs font-medium text-center">Elderwood Staff</p> | |
| <p class="text-xs text-blue-300 text-center">500 Gold</p> | |
| </div> | |
| <div class="shop-item bg-slate-700 rounded-lg p-3 cursor-pointer"> | |
| <div class="bg-red-900 rounded-lg p-2 mb-2 flex justify-center"> | |
| <i class="fas fa-book-dead text-2xl text-red-300"></i> | |
| </div> | |
| <p class="text-xs font-medium text-center">Necronomicon</p> | |
| <p class="text-xs text-red-300 text-center">1200 Gold</p> | |
| </div> | |
| <div class="shop-item bg-slate-700 rounded-lg p-3 cursor-pointer"> | |
| <div class="bg-green-900 rounded-lg p-2 mb-2 flex justify-center"> | |
| <i class="fas fa-robe text-2xl text-green-300"></i> | |
| </div> | |
| <p class="text-xs font-medium text-center">Robes of Protection</p> | |
| <p class="text-xs text-green-300 text-center">350 Gold</p> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full py-2 bg-purple-900 hover:bg-purple-800 text-purple-200 rounded-lg text-sm font-medium transition"> | |
| <i class="fas fa-coins mr-1"></i> Visit Shop | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 border-t border-slate-700 py-6 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i class="fas fa-hat-wizard text-xl text-purple-400"></i> | |
| <span class="title-font text-xl text-purple-400">Arcane Nexus</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-slate-400 hover:text-purple-300">About</a> | |
| <a href="#" class="text-slate-400 hover:text-purple-300">Privacy</a> | |
| <a href="#" class="text-slate-400 hover:text-purple-300">Terms</a> | |
| <a href="#" class="text-slate-400 hover:text-purple-300">Help</a> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center text-xs text-slate-500"> | |
| © 2023 Arcane Nexus. All spells and enchantments reserved. Use of this site constitutes acceptance of our | |
| <a href="#" class="text-purple-500 hover:underline">Terms of Service</a> and | |
| <a href="#" class="text-purple-500 hover:underline">Privacy Policy</a>. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Sparkle effect | |
| document.addEventListener('mousemove', function(e) { | |
| const sparkle = document.createElement('div'); | |
| sparkle.className = 'sparkle'; | |
| sparkle.style.left = e.pageX + 'px'; | |
| sparkle.style.top = e.pageY + 'px'; | |
| document.getElementById('sparkle-container').appendChild(sparkle); | |
| // Random size | |
| const size = Math.random() * 5 + 3; | |
| sparkle.style.width = size + 'px'; | |
| sparkle.style.height = size + 'px'; | |
| // Random color | |
| const colors = ['#8b5cf6', '#3b82f6', '#ec4899', '#10b981', '#f59e0b']; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| sparkle.style.backgroundColor = color; | |
| sparkle.style.boxShadow = `0 0 ${size}px ${size/2}px ${color}80`; | |
| // Animation | |
| sparkle.style.animation = 'sparkle-fall ' + (Math.random() * 1 + 0.5) + 's linear'; | |
| // Remove after animation | |
| setTimeout(() => { | |
| sparkle.remove(); | |
| }, 1000); | |
| }); | |
| // Toggle mobile menu (would need implementation for mobile view) | |
| // Simple alert for demo purposes | |
| document.querySelectorAll('.spell-card, .monster-card, .guild-card, .shop-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| const type = item.classList.contains('spell-card') ? 'spell' : | |
| item.classList.contains('monster-card') ? 'monster' : | |
| item.classList.contains('guild-card') ? 'guild' : 'shop item'; | |
| alert(`You selected a ${type}! (In a real app, this would open a detailed view)`); | |
| }); | |
| }); | |
| </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=robb-0/arcane-nexus" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |