Spaces:
Running
Running
You are an AI web-developer and designer. Build a high-fidelity, production-ready React/Next.js front-end (with Tailwind CSS) for Web3 District’s marketing site, using the “Quest Box” aesthetic as the core visual language. Follow these specs: 1. **Global Look & Feel** - **Shape Language**: Use 2xl rounded corners and layered tab slices on all major blocks (hero sections, feature panels, footers). - **Color Palette**: • Primary Magenta: #FF1D93 • Deep Charcoal: #121212 • White Accents: #FFFFFF - **Background Patterns**: Subtly incorporate circuit-line motifs behind cards and section backgrounds at 10% opacity. - **Shadows & Elevation**: Soft, diffuse shadows under every card and modal (hover lifts by 4px). - **Micro-Animations**: Framer Motion for hover lifts, tab slides, and progress-bar fills. 2. **Typography & Branding** - Headings: Bold, uppercase sans-serif with magenta highlights on key words. - Body: Clean, legible sans-serif in white on charcoal or charcoal on white where appropriate. - Buttons & Links: Full-bleed magenta buttons with white text, ghost buttons with white borders on charcoal. 3. **Core Pages & Components** - **Hero Section**: Full-screen magenta background with layered charcoal tab slices peeking in; headline sits in a rounded-corner white card with soft shadow. - **Feature Cards**: Use the Quest Thumbnail layout—tab slices at top, circuit-pattern backdrop, title + icon row, progress bar—repurposed for each service feature (e.g., “Mapping Web3 Hubs,” “Sandbox Experiments,” “Governance Integrations”). - **About/How It Works**: Vertical timeline across a charcoal panel, each step in a magenta-tab card with white text and mini-icons. - **Team & Partners**: Grid of rounded-corner logo cards on a white background, each card lifting on hover with a magenta border. - **Footer**: Charcoal base with layered magenta tab at the top, social icons in white, circuit-pattern overlay at 5% opacity. 4. **Navigation & Interactions** - **Navbar**: Fixed, translucent charcoal with a slight blur and magenta active-tab underline. - **Mobile**: Collapse to a bottom nav using tab slices as nav items, icons in white, active state magenta. - **Modals & Drawers**: Rounded, shadowed, slide in from right with tab-slice animation at the top edge. 5. **File Structure & Deliverables** - Generate React/Next.js components and pages with Tailwind classes matching the above. - Use shadcn/ui and lucide-react for UI primitives and icons. - Include a Tailwind config file defining the magenta and charcoal palettes and custom border radii/shadows. - Hook up placeholder functions for any interactive elements. Deliver the complete codebase structure, component files, pages, and minimal mock data so the site renders end-to-end. Don’t stub out styling—apply the quest-box look & feel across every element. - Initial Deployment
b83f6fe verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuestForge - Web3 Marketing Platform</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: { | |
| teal: { | |
| 500: '#0d9488', | |
| 600: '#0f766e', | |
| }, | |
| sunset: { | |
| 500: '#f97316', | |
| 600: '#ea580c', | |
| } | |
| }, | |
| borderRadius: { | |
| '2xl': '1.5rem', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: #0f172a; | |
| color: #f1f5f9; | |
| overflow-x: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(13, 148, 136, 0.15); | |
| animation: float 15s infinite linear; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0) translateX(0); } | |
| 25% { transform: translateY(-20px) translateX(10px); } | |
| 50% { transform: translateY(0) translateX(20px); } | |
| 75% { transform: translateY(20px) translateX(10px); } | |
| 100% { transform: translateY(0) translateX(0); } | |
| } | |
| .card-hover { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.3s; | |
| transform: rotate(90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .drawer { | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .ripple { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ripple-effect { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.7); | |
| transform: scale(0); | |
| animation: ripple-animation 0.6s linear; | |
| } | |
| @keyframes ripple-animation { | |
| to { | |
| transform: scale(4); | |
| opacity: 0; | |
| } | |
| } | |
| /* Skeleton loading */ | |
| .skeleton { | |
| background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| /* Toast animations */ | |
| .toast-enter { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .toast-enter-active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| transition: opacity 300ms, transform 300ms; | |
| } | |
| .toast-exit { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .toast-exit-active { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 300ms, transform 300ms; | |
| } | |
| /* Mobile sidebar */ | |
| @media (max-width: 768px) { | |
| .mobile-nav { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 50; | |
| backdrop-filter: blur(10px); | |
| background: rgba(15, 23, 42, 0.85); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800"> | |
| <!-- Navigation Bar --> | |
| <nav class="bg-slate-900/80 backdrop-blur-md border-b border-slate-700 fixed top-0 left-0 right-0 z-40"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="bg-teal-500 h-8 w-8 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-cube text-white"></i> | |
| </div> | |
| <span class="ml-3 font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-cyan-400">QuestForge</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="text-teal-400 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="#" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Leaderboard</a> | |
| <a href="#" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Rewards</a> | |
| <a href="#" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Documentation</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="ripple bg-gradient-to-r from-sunset-500 to-orange-500 text-white px-4 py-2 rounded-2xl font-medium text-sm flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Create Campaign | |
| </button> | |
| <button id="connect-wallet-btn" class="ml-4 ripple bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-2xl font-medium text-sm flex items-center"> | |
| <i class="fas fa-wallet mr-2"></i> Connect Wallet | |
| </button> | |
| <div class="ml-4 relative"> | |
| <div class="bg-slate-800 border border-slate-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-user text-slate-300"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button id="mobile-menu-btn" class="text-slate-300 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Navigation --> | |
| <div class="mobile-nav md:hidden fixed bottom-0 left-0 right-0 border-t border-slate-700 py-3"> | |
| <div class="flex justify-around"> | |
| <a href="#" class="flex flex-col items-center text-teal-400"> | |
| <i class="fas fa-home mb-1"></i> | |
| <span class="text-xs">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-slate-300"> | |
| <i class="fas fa-trophy mb-1"></i> | |
| <span class="text-xs">Leaderboard</span> | |
| </a> | |
| <button class="ripple bg-gradient-to-r from-sunset-500 to-orange-500 text-white w-12 h-12 rounded-full flex items-center justify-center -mt-4 shadow-lg"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <a href="#" class="flex flex-col items-center text-slate-300"> | |
| <i class="fas fa-gift mb-1"></i> | |
| <span class="text-xs">Rewards</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-slate-300"> | |
| <i class="fas fa-user mb-1"></i> | |
| <span class="text-xs">Profile</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="pt-20 pb-24 md:pb-16 px-4"> | |
| <!-- Dashboard Heading --> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold">Active Campaigns</h1> | |
| <div class="hidden md:flex space-x-3"> | |
| <button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-2xl text-sm">All</button> | |
| <button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-2xl text-sm">Popular</button> | |
| <button class="px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 rounded-2xl text-sm">New</button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"> | |
| <div class="card-hover bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Total Earnings</p> | |
| <p class="text-2xl font-bold mt-1">$1,245.50</p> | |
| </div> | |
| <div class="bg-teal-500/20 p-3 rounded-full"> | |
| <i class="fas fa-coins text-teal-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-green-400"> | |
| <i class="fas fa-arrow-up mr-1"></i> | |
| <span>+12.5% from last month</span> | |
| </div> | |
| </div> | |
| <div class="card-hover bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Completed Quests</p> | |
| <p class="text-2xl font-bold mt-1">42</p> | |
| </div> | |
| <div class="bg-sunset-500/20 p-3 rounded-full"> | |
| <i class="fas fa-tasks text-sunset-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-green-400"> | |
| <i class="fas fa-fire mr-1"></i> | |
| <span>3 quests ahead of peers</span> | |
| </div> | |
| </div> | |
| <div class="card-hover bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Referral Rewards</p> | |
| <p class="text-2xl font-bold mt-1">$385.75</p> | |
| </div> | |
| <div class="bg-cyan-500/20 p-3 rounded-full"> | |
| <i class="fas fa-user-friends text-cyan-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-yellow-400"> | |
| <i class="fas fa-user-plus mr-1"></i> | |
| <span>Invite friends to earn more</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Campaign Card 1 --> | |
| <div class="card-hover bg-[#121212] border border-[#333] rounded-2xl overflow-hidden shadow-lg"> | |
| <div class="relative"> | |
| <!-- Layered tab layout --> | |
| <div class="h-2 bg-[#FF1D93]"></div> | |
| <div class="h-40 bg-[#121212] flex items-center justify-center relative overflow-hidden"> | |
| <!-- Circuit pattern background --> | |
| <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cGF0aCBkPSJNMCA1MEg1ME01MCAwVjEwME0yNSAyNUgyNVYyNU03NSA3NUg3NVY3NSIgc3Ryb2tlPSIjRkYxRDkzIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');"></div> | |
| <i class="fas fa-gamepad text-6xl text-white/20"></i> | |
| </div> | |
| <div class="absolute top-6 right-4"> | |
| <span class="bg-[#121212] text-white text-xs font-medium px-3 py-1 rounded-full border border-[#333]">Gaming</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-white">DeFi Adventure Quest</h3> | |
| <span class="text-xs bg-emerald-900/50 text-emerald-400 px-2 py-1 rounded-lg">Active</span> | |
| </div> | |
| <p class="text-gray-400 mt-2 text-sm">Complete DeFi tasks and earn crypto rewards</p> | |
| <!-- Progress bar --> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-white text-sm mb-1"> | |
| <span>3 / 6</span> | |
| <span>70 XP</span> | |
| </div> | |
| <div class="h-2 bg-[#333] rounded-full overflow-hidden"> | |
| <div class="h-full bg-[#FF1D93] w-1/2"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mt-4 text-gray-500 text-sm"> | |
| <i class="fas fa-gem mr-1 text-[#FF1D93]"></i> | |
| <span class="text-white">Reward: 250 QFT</span> | |
| </div> | |
| <div class="flex items-center mt-2 text-gray-500 text-sm"> | |
| <i class="fas fa-users mr-1 text-[#FF1D93]"></i> | |
| <span class="text-white">4,521 participants</span> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="ripple w-full bg-[#FF1D93] text-white py-3 rounded-xl font-medium text-sm shadow-[0_0_15px_rgba(255,29,147,0.5)] hover:shadow-[0_0_20px_rgba(255,29,147,0.7)] transition-all"> | |
| Continue a Quest | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Card 2 --> | |
| <div class="card-hover bg-[#121212] border border-[#333] rounded-2xl overflow-hidden shadow-lg"> | |
| <div class="relative"> | |
| <!-- Layered tab layout --> | |
| <div class="h-2 bg-[#FF1D93]"></div> | |
| <div class="h-40 bg-[#121212] flex items-center justify-center relative overflow-hidden"> | |
| <!-- Circuit pattern background --> | |
| <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cGF0aCBkPSJNMCA1MEg1ME01MCAwVjEwME0yNSAyNUgyNVYyNU03NSA3NUg3NVY3NSIgc3Ryb2tlPSIjRkYxRDkzIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');"></div> | |
| <i class="fab fa-twitter text-6xl text-white/20"></i> | |
| </div> | |
| <div class="absolute top-6 right-4"> | |
| <span class="bg-[#121212] text-white text-xs font-medium px-3 py-1 rounded-full border border-[#333]">Social</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-white">Twitter Buzz Challenge</h3> | |
| <span class="text-xs bg-amber-900/50 text-amber-400 px-2 py-1 rounded-lg">Ending Soon</span> | |
| </div> | |
| <p class="text-gray-400 mt-2 text-sm">Engage with our tweets and grow your influence</p> | |
| <!-- Progress bar --> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-white text-sm mb-1"> | |
| <span>4 / 6</span> | |
| <span>90 XP</span> | |
| </div> | |
| <div class="h-2 bg-[#333] rounded-full overflow-hidden"> | |
| <div class="h-full bg-[#FF1D93] w-2/3"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mt-4 text-gray-500 text-sm"> | |
| <i class="fas fa-gem mr-1 text-[#FF1D93]"></i> | |
| <span class="text-white">Reward: 180 QFT</span> | |
| </div> | |
| <div class="flex items-center mt-2 text-gray-500 text-sm"> | |
| <i class="fas fa-users mr-1 text-[#FF1D93]"></i> | |
| <span class="text-white">8,942 participants</span> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="ripple w-full bg-[#FF1D93] text-white py-3 rounded-xl font-medium text-sm shadow-[0_0_15px_rgba(255,29,147,0.5)] hover:shadow-[0_0_20px_rgba(255,29,147,0.7)] transition-all"> | |
| Continue a Quest | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Card 3 --> | |
| <div class="card-hover bg-[#121212] border border-[#333] rounded-2xl overflow-hidden shadow-lg"> | |
| <div class="relative"> | |
| <!-- Layered tab layout --> | |
| <div class="h-2 bg-[#FF1D93]"></div> | |
| <div class="h-40 bg-[#121212] flex items-center justify-center relative overflow-hidden"> | |
| <!-- Circuit pattern background --> | |
| <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cGF0aCBkPSJNMCA1MEg1ME01MCAwVjEwME0yNSAyNUgyNVYyNU03NSA3NUg3NVY3NSIgc3Ryb2tlPSIjRkYxRDkzIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');"></div> | |
| <i class="fas fa-ethereum text-6xl text-white/20"></i> | |
| </div> | |
| <div class="absolute top-6 right-4"> | |
| <span class="bg-[#121212] text-white text-xs font-medium px-3 py-1 rounded-full border border-[#333]">DeFi</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-bold text-lg text-white">Liquidity Provider Quest</h3> | |
| <span class="text-xs bg-sky-900/50 text-sky-400 px-2 py-1 rounded-lg">New</span> | |
| </div> | |
| <p class="text-gray-400 mt-2 text-sm">Provide liquidity and earn bonus rewards</p> | |
| <!-- Progress bar --> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-white text-sm mb-1"> | |
| <span>1 / 6</span> | |
| <span>30 XP</span> | |
| </div> | |
| <div class="h-2 bg-[#333] rounded-full overflow-hidden"> | |
| <div class="h-full bg-[#FF1D93] w-1/6"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mt-4 text-gray-500 text-sm"> | |
| <i class="fas fa-gem mr-1 text-[#FF1D93]"></i> | |
| <span class="text-white">Reward: 500 QFT</span> | |
| </div> | |
| <div class="flex items-center mt-2 text-gray-500 text-sm"> | |
| <i class="fas fa-users mr-1 text-[#FF1D93]"></i> | |
| <span class="text-white">1,243 participants</span> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="ripple w-full bg-[#FF1D93] text-white py-3 rounded-xl font-medium text-sm shadow-[0_0_15px_rgba(255,29,147,0.5)] hover:shadow-[0_0_20px_rgba(255,29,147,0.7)] transition-all"> | |
| Continue a Quest | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Detail View (Hidden by default) --> | |
| <div id="campaign-detail" class="hidden mt-12"> | |
| <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl overflow-hidden"> | |
| <!-- Campaign Header --> | |
| <div class="h-64 bg-gradient-to-r from-teal-500/40 to-cyan-500/40 relative"> | |
| <div class="absolute top-0 left-0 right-0 p-6 flex justify-between items-start"> | |
| <button id="back-to-dashboard" class="text-white bg-slate-900/50 rounded-full p-2"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <div class="flex space-x-3"> | |
| <span class="bg-slate-900/80 text-xs font-medium px-3 py-1 rounded-full">Gaming</span> | |
| <span class="bg-emerald-900/80 text-emerald-400 text-xs font-medium px-3 py-1 rounded-full">Active</span> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-slate-800 to-transparent"> | |
| <h1 class="text-3xl font-bold">DeFi Adventure Quest</h1> | |
| <p class="mt-2 text-slate-300 max-w-2xl">Embark on a journey through decentralized finance. Complete tasks, earn XP, and unlock exclusive rewards.</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex items-center bg-slate-900/50 px-4 py-2 rounded-xl"> | |
| <i class="fas fa-clock text-teal-500 mr-2"></i> | |
| <span class="font-mono">02:45:18</span> | |
| </div> | |
| <div class="ml-4 flex items-center bg-slate-900/50 px-4 py-2 rounded-xl"> | |
| <i class="fas fa-users text-purple-500 mr-2"></i> | |
| <span>4,521 participants</span> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/50 px-4 py-2 rounded-xl"> | |
| <span>Reward: <span class="font-bold text-teal-400">250 QFT</span></span> | |
| </div> | |
| </div> | |
| <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Quest List --> | |
| <div class="lg:col-span-2"> | |
| <h2 class="text-xl font-bold mb-4">Quest Tasks</h2> | |
| <div class="space-y-4"> | |
| <!-- Task 1 --> | |
| <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-teal-500/20 p-3 rounded-xl mr-4"> | |
| <i class="fab fa-twitter text-teal-400 text-xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-bold">Follow on Twitter</h3> | |
| <span class="bg-emerald-900/50 text-emerald-400 text-xs px-2 py-1 rounded-lg">Completed</span> | |
| </div> | |
| <p class="text-slate-400 mt-1 text-sm">Follow our official Twitter account</p> | |
| <div class="mt-3"> | |
| <button class="text-xs bg-slate-800 px-3 py-1 rounded-lg opacity-50 cursor-not-allowed"> | |
| <i class="fas fa-check mr-1"></i> Completed | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task 2 --> | |
| <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-500/20 p-3 rounded-xl mr-4"> | |
| <i class="fab fa-discord text-blue-400 text-xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-bold">Join Discord Community</h3> | |
| <span class="bg-emerald-900/50 text-emerald-400 text-xs px-2 py-1 rounded-lg">Completed</span> | |
| </div> | |
| <p class="text-slate-400 mt-1 text-sm">Join our Discord server and stay connected</p> | |
| <div class="mt-3"> | |
| <button class="text-xs bg-slate-800 px-3 py-1 rounded-lg opacity-50 cursor-not-allowed"> | |
| <i class="fas fa-check mr-1"></i> Completed | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task 3 --> | |
| <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-amber-500/20 p-3 rounded-xl mr-4"> | |
| <i class="fas fa-wallet text-amber-400 text-xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-bold">Swap Tokens</h3> | |
| <span class="bg-sky-900/50 text-sky-400 text-xs px-2 py-1 rounded-lg">In Progress</span> | |
| </div> | |
| <p class="text-slate-400 mt-1 text-sm">Swap at least 0.1 ETH on our platform</p> | |
| <div class="mt-3 flex space-x-3"> | |
| <button class="ripple bg-gradient-to-r from-sky-600 to-blue-600 text-white px-4 py-2 rounded-lg font-medium text-sm"> | |
| Execute Swap | |
| </button> | |
| <button class="text-slate-400 hover:text-white text-sm px-3 py-2"> | |
| Skip Task | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task 4 --> | |
| <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-500/20 p-3 rounded-xl mr-4"> | |
| <i class="fas fa-user-plus text-purple-400 text-xl"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between"> | |
| <h3 class="font-bold">Invite Friends</h3> | |
| <span class="bg-slate-700 text-slate-400 text-xs px-2 py-1 rounded-lg">Locked</span> | |
| </div> | |
| <p class="text-slate-400 mt-1 text-sm">Invite 3 friends to join this campaign</p> | |
| <div class="mt-3"> | |
| <button class="text-xs bg-slate-800 px-3 py-1 rounded-lg opacity-50 cursor-not-allowed"> | |
| Complete previous tasks | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Referral Panel --> | |
| <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-6 h-fit"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Referral Program</h2> | |
| <button class="text-teal-400"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| <div class="bg-slate-800/70 rounded-xl p-4 mb-6"> | |
| <p class="text-slate-400 text-sm mb-2">Your referral link</p> | |
| <div class="flex"> | |
| <input type="text" readonly value="https://questforge.xyz/r/8x3k9l2" class="bg-slate-900 border border-slate-700 rounded-l-xl px-4 py-2 w-full text-sm"> | |
| <button class="ripple bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-r-xl text-sm"> | |
| Copy | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="font-medium mb-3">Your referral stats</p> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <div class="bg-slate-800/70 rounded-xl p-3 text-center"> | |
| <p class="text-2xl font-bold">12</p> | |
| <p class="text-slate-400 text-xs mt-1">Invites</p> | |
| </div> | |
| <div class="bg-slate-800/70 rounded-xl p-3 text-center"> | |
| <p class="text-2xl font-bold">8</p> | |
| <p class="text-slate-400 text-xs mt-1">Active</p> | |
| </div> | |
| <div class="bg-slate-800/70 rounded-xl p-3 text-center"> | |
| <p class="text-2xl font-bold">$38.50</p> | |
| <p class="text-slate-400 text-xs mt-1">Earned</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-medium mb-3">Leaderboard</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 hover:bg-slate-800/50 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-amber-500/20 rounded-full flex items-center justify-center mr-3"> | |
| <span class="text-amber-500 font-bold">1</span> | |
| </div> | |
| <span>crypt0wizard.eth</span> | |
| </div> | |
| <span class="text-teal-400">142 pts</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 hover:bg-slate-800/50 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-slate-700 rounded-full flex items-center justify-center mr-3"> | |
| <span class="text-slate-400 font-bold">2</span> | |
| </div> | |
| <span>degen_queen.eth</span> | |
| </div> | |
| <span class="text-teal-400">128 pts</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 hover:bg-slate-800/50 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-orange-800/30 rounded-full flex items-center justify-center mr-3"> | |
| <span class="text-orange-500 font-bold">3</span> | |
| </div> | |
| <span>nft_guru.eth</span> | |
| </div> | |
| <span class="text-teal-400">117 pts</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Claim Rewards Footer --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-slate-900/80 backdrop-blur-lg border-t border-slate-700 z-30"> | |
| <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Your campaign rewards</p> | |
| <p class="text-xl font-bold">125.75 <span class="text-teal-400">QFT</span></p> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="ripple border border-teal-500 text-teal-400 px-6 py-3 rounded-xl font-medium"> | |
| Track Rewards | |
| </button> | |
| <button class="ripple bg-gradient-to-r from-teal-600 to-cyan-600 text-white px-6 py-3 rounded-xl font-medium"> | |
| Claim Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wallet Connect Modal --> | |
| <div id="wallet-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4"> | |
| <div class="bg-slate-800 border border-slate-700 rounded-2xl w-full max-w-md"> | |
| <div class="p-6 border-b border-slate-700"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">Connect Wallet</h3> | |
| <button id="close-wallet-modal" class="text-slate-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-slate-400 mt-2 text-sm">Connect with one of our available wallet providers</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-3"> | |
| <button class="ripple w-full bg-slate-900/50 hover:bg-slate-700/50 border border-slate-700 rounded-xl p-4 flex items-center"> | |
| <div class="w-10 h-10 bg-orange-500/20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fab fa-ethereum text-orange-500"></i> | |
| </div> | |
| <div class="text-left"> | |
| <p class="font-medium">MetaMask</p> | |
| <p class="text-slate-400 text-sm">Popular Ethereum Wallet</p> | |
| </div> | |
| <div class="ml-auto bg-emerald-900/50 text-emerald-400 text-xs px-2 py-1 rounded-lg"> | |
| Recommended | |
| </div> | |
| </button> | |
| <button class="ripple w-full bg-slate-900/50 hover:bg-slate-700/50 border border-slate-700 rounded-xl p-4 flex items-center"> | |
| <div class="w-10 h-10 bg-indigo-500/20 rounded-full flex items-center justify-center mr-4"> | |
| <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzU0NEVFQyIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuODIyIDE4LjY5N0MxMi4wMzIgMTguNTEyIDEyLjMxOCAxOC40NjkgMTIuNTYgMTguNTc2TDE1LjUgMjAuMDc4VjE1LjY5M0wxMS44MjIgMTMuODMzVjE4LjY5N1pNMTIuMzI3IDEyLjMwNkwxNS41IDEzLjkzNFY5LjYzOUwxMi43NTIgOC4xNzZDMTIuNTU0IDguMDY0IDEyLjMxOCA4LjA2NCAxMi4xMiA4LjE3Nkw4LjUgMTAuMDA3VjE0Ljg0MkwxMi4zMjcgMTIuMzA2Wk0xNi41IDE1LjY5M1YyMC4wNzhMMTkuNDQgMTguNTc2QzE5LjY4MiAxOC40NjkgMTkuOTY4IDE4LjUxMiAyMC4xNzggMTguNjk3VjEzLjgzM0wxNi41IDE1LjY5M1pNMTkuNjczIDEyLjMwNkwyMy41IDE0Ljg0MlYxMC4wMDdMMTkuODggOC4xNzZDMTkuNjgyIDguMDY0IDE5LjQ0NiA4LjA2NCAxOS4yNDggOC4xNzZMMTYuNSA5LjYzOVYxMy45MzRMMTkuNjczIDEyLjMwNlpNMjMuNSAxNy4xNTZWMTQuODQyTDE5LjY3MyAxMi4zMDZMMTYuNSAxMy45MzRMMjAuMTc4IDE1LjgzM1YxOC42OTdDMjAuMjIgMTguODQ5IDIwLjI5MyAxOC45OSAyMC4zOTQgMTkuMTE0QzIwLjQ5NSAxOS4yMzggMjAuNjE5IDE5LjM0IDIwLjc1OSAxOS40MTJMMjMuMTQ3IDIwLjc4MkMyMy41MjIgMjEuMDA1IDI0IDIwLjc1MiAyNCAyMC4zMlYxNy4xNTZIMjMuNVpNOC41IDE0Ljg0MlYxNy4xNTZIOC4wMDFWMjAuMzJDOC4wMDEgMjAuNzUyIDguNDc4IDIxLjAwNSA4Ljg1MyAyMC43ODJMMTEuMjQxIDE5LjQxMkMxMS4zODEgMTkuMzQgMTEuNTA1IDE5LjIzOCAxMS42MDYgMTkuMTE0QzExLjcwNyAxOC45OSAxMS43OCAxOC44NDkgMTEuODIyIDE4LjY5N1YxNS44MzNMOC41IDE0Ljg0MlpNMTUuNSAyMC4wNzhMMjAuMTc4IDE4LjE3OFYxNi40MzJMMTUuNSAxOC44MTZWMjAuMDc4Wk0xMS44MjIgMTMuODMzTDguNSAxMi4wMDdWMTQuODQyTDExLjgyMiAxMy44MzNWMTMuODMzWk04LjUgMTIuMDA3TDEyLjMyNyA5LjQ3MUwxMi4zMjcgMTIuMzA2TDguNSAxNC44NDJWMTIuMDA3Wk0xMi4zMjcgOS40NzFMMTUuNSA3Ljg0NFY5LjYzOUwxMi4zMjcgMTIuMzA2VjkuNDcxWk0xOS42NzMgOS40NzFMMTYuNSA3Ljg0NFY5LjYzOUwxOS42NzMgMTIuMzA2VjkuNDcxWk0xNi41IDcuODQ0TDE5LjY3MyA5LjQ3MUwyMy41IDEyLjAwN1Y5LjE3NkwxOS44OCA3LjM0NEMxOS42ODIgNy4yMzIgMTkuNDQ2IDcuMjMyIDE5LjI0OCA3LjM0NEwxNi41IDguODA3VjcuODQ0Wk0xMi4zMjcgOS40NzFDMTIuMzI3IDkuNDcxIDEyLjMwMiA5LjQ4OCAxMi4yNzYgOS41MDZDMTIuMjUxIDkuNTI0IDEyLjIyOSA5LjUzOSAxMi4yMDggOS41NTFDMTIuMTg4IDkuNTYzIDEyLjE2OSA5LjU3MiAxMi4xNSA5LjU4QzEyLjEzMSA5LjU4OCAxMi4xMTMgOS41OTUgMTIuMDk1IDkuNjAxQzEyLjA4IDkuNjA2IDEyLjA2NyA5LjYxIDEyLjA1MyA5LjYxNUMxMi4wNCA5LjYxOSAxMi4wMjggOS42MjMgMTIuMDE2IDkuNjI3QzEyLjAwNSA5LjYzMSAxMS45OTQgOS42MzQgMTEuOTgzIDkuNjM4QzExLjk3MyA5LjY0MSAxMS45NjQgOS42NDQgMTEuOTU0IDkuNjQ3QzExLjk0NSA5LjY1IDExLjkzNiA5LjY1MyAxMS45MjcgOS42NTZDMTEuOTE4IDkuNjU4IDExLjkxIDkuNjYgMTEuOTAxIDkuNjYzQzExLjg5MyA5LjY2NSAxMS44ODUgOS42NjcgMTEuODc3IDkuNjY5QzExLjg3IDkuNjcxIDExLjg2MyA5LjY3MiAxMS44NTYgOS42NzRDMTEuODQ5IDkuNjc1IDExLjg0MiA5LjY3NyAxMS44MzYgOS42NzhDMTEuODMgOS42NzkgMTEuODI0IDkuNjggMTEuODE4IDkuNjgxQzExLjgxMiA5LjY4MiAxMS44MDcgOS42ODIgMTEuODAyIDkuNjgzQzExLjc5NyA5LjY4NCAxMS43OTEgOS42ODQgMTEuNzg2IDkuNjg0QzExLjc4MSA5LjY4NCAxMS43NzcgOS42ODQgMTEuNzcyIDkuNjg0QzExLjc2NyA5LjY4NCAxMS43NjMgOS42ODQgMTEuNzU4IDkuNjgzQzExLjc1MyA5LjY4MyAxMS43NDkgOS42ODMgMTEuNzQ0IDkuNjgyQzExLjczOSA5LjY4MSAxMS43MzQgOS42OCAxMS43MjkgOS42NzlDMTEuNzI0IDkuNjc4IDExLjcxOSA5LjY3NiAxMS43MTQgOS42NzVDMTEuNzA5IDkuNjc0IDExLjcwNCA5LjY3MiAxMS42OTkgOS42NzFDMTEuNjk0IDkuNjc0IDExLjY4OSA5LjY3NyAxMS42ODQgOS42ODFDMTEuNjc5IDkuNjg0IDExLjY3NSA5LjY4NyAxMS42NyA5LjY5QzExLjY2NSA5LjY5MyAxMS42NiA5LjY5NSAxMS42NTUgOS42OThDMTEuNjUgOS43IDEuNzYgOS4wIDguNSA5LjA0OEM4LjUgOS4wNDggOC41IDkuMDQ4IDguNSA5LjA0OEM4LjU3NiA5LjA5MyA4LjY0MiA5LjE0NSA4LjcgOS4yMDVDOC43NTggOS4yNjYgOC44MDYgOS4zMzYgOC44NDEgOS40MTRDOC44NzYgOS40OTIgOC45IDkuNTc4IDguOTA5IDkuNjY3QzguOTE4IDkuNzU2IDguOTI0IDkuODQ4IDguOTI0IDkuOTQyTDguOTI0IDEyLjAwN0w4LjUgMTIuMDA3VjkuMTc2QzguNSA5LjA0OCA4LjUyIDguOTIxIDguNTU5IDguODAyQzguNTk4IDguNjgzIDguNjU2IDguNTcxIDguNzI5IDguNDcyQzguODAzIDguMzcyIDguODkxIDguMjg0IDguOTkgOC4yMTJDOS4wODkgOC4xNCA5LjE5OSA4LjA4MiA5LjMxNSA4LjA0MUM5LjQzMiA4IDkuNTU0IDcuOTc3IDkuNjc3IDcuOTc3QzkuOCA3Ljk3NyA5LjkyMSA4IDEwLjA0IDguMDQzQzEwLjE1OSA4LjA4NSAxMC4yNzMgOC4xNDYgMTAuMzc5IDguMjI0QzEwLjQ4NSA4LjMwMiAxMC41ODIgOC4zOTYgMTAuNjY2IDguNTA0QzEwLjc1MSA4LjYxMiAxMC44MiA4LjczMyAxMC44NzQgOC44NjJDMTAuOTI3IDguOTkxIDEwLjk2NSA5LjEyNyAxMC45ODYgOS4yNjdDMTEuMDA3IDkuNDA4IDExLjAxMiA5LjU1MiAxMSA5LjY5NkwxMSA5LjYzOUwxMi4zMjcgOS40NzFaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==" class="w-5 h-5"> | |
| </div> | |
| <div class="text-left"> | |
| <p class="font-medium">WalletConnect</p> | |
| <p class="text-slate-400 text-sm">Multi-chain connectivity</p> | |
| </div> | |
| </button> | |
| <button class="ripple w-full bg-slate-900/50 hover:bg-slate-700/50 border border-slate-700 rounded-xl p-4 flex items-center"> | |
| <div class="w-10 h-10 bg-blue-500/20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fab fa-bitcoin text-blue-500"></i> | |
| </div> | |
| <div class="text-left"> | |
| <p class="font-medium">Coinbase Wallet</p> | |
| <p class="text-slate-400 text-sm">Easy-to-use wallet</p> | |
| </div> | |
| </button> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <p class="text-slate-400 text-sm">By connecting, I accept QuestForge's <a href="#" class="text-teal-400 hover:underline">Terms of Service</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Container --> | |
| <div id="toast-container" class="fixed top-4 right-4 z-50 space-y-3"></div> | |
| <script> | |
| // DOM Elements | |
| const walletModal = document.getElementById('wallet-modal'); | |
| const connectWalletBtn = document.getElementById('connect-wallet-btn'); | |
| const closeWalletModal = document.getElementById('close-wallet-modal'); | |
| const campaignDetail = document.getElementById('campaign-detail'); | |
| const backToDashboard = document.getElementById('back-to-dashboard'); | |
| const toastContainer = document.getElementById('toast-container'); | |
| // Event Listeners | |
| connectWalletBtn.addEventListener('click', () => { | |
| walletModal.classList.remove('hidden'); | |
| walletModal.classList.add('flex'); | |
| }); | |
| closeWalletModal.addEventListener('click', () => { | |
| walletModal.classList.add('hidden'); | |
| walletModal.classList.remove('flex'); | |
| }); | |
| // Show campaign detail on card click | |
| document.querySelectorAll('[class*="grid-cols-3"] button').forEach(button => { | |
| if (button.textContent.includes('View Quest')) { | |
| button.addEventListener('click', () => { | |
| document.querySelector('.pt-20').scrollIntoView({ behavior: 'smooth' }); | |
| campaignDetail.classList.remove('hidden'); | |
| }); | |
| } | |
| }); | |
| backToDashboard.addEventListener('click', () => { | |
| campaignDetail.classList.add('hidden'); | |
| }); | |
| // Ripple effect | |
| document.querySelectorAll('.ripple').forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| const ripple = document.createElement('span'); | |
| ripple.classList.add('ripple-effect'); | |
| const rect = this.getBoundingClientRect(); | |
| const size = Math.max(rect.width, rect.height); | |
| const x = e.clientX - rect.left - size / 2; | |
| const y = e.clientY - rect.top - size / 2; | |
| ripple.style.width = ripple.style.height = `${size}px`; | |
| ripple.style.left = `${x}px`; | |
| ripple.style.top = `${y}px`; | |
| this.appendChild(ripple); | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| }); | |
| }); | |
| // Show success toast when wallet is connected | |
| connectWalletBtn.addEventListener('click', () => { | |
| setTimeout(() => { | |
| showToast('Wallet connected successfully!', 'success'); | |
| }, 1000); | |
| }); | |
| // Toast function | |
| function showToast(message, type = 'info') { | |
| const toast = document.createElement('div'); | |
| toast.classList.add('toast-enter'); | |
| let bgColor = 'bg-slate-800'; | |
| let borderColor = 'border-slate-700'; | |
| let iconColor = 'text-slate-400'; | |
| let icon = 'fas fa-info-circle'; | |
| if (type === 'success') { | |
| bgColor = 'bg-emerald-900/50'; | |
| borderColor = 'border-emerald-800'; | |
| iconColor = 'text-emerald-400'; | |
| icon = 'fas fa-check-circle'; | |
| } else if (type === 'error') { | |
| bgColor = 'bg-rose-900/50'; | |
| borderColor = 'border-rose-800'; | |
| iconColor = 'text-rose-400'; | |
| icon = 'fas fa-exclamation-circle'; | |
| } | |
| toast.innerHTML = ` | |
| <div class="${bgColor} border ${borderColor} rounded-xl px-4 py-3 flex items-center max-w-md"> | |
| <i class="${icon} ${iconColor} mr-3"></i> | |
| <span>${message}</span> | |
| </div> | |
| `; | |
| toastContainer.appendChild(toast); | |
| // Trigger reflow to enable animation | |
| setTimeout(() => { | |
| toast.classList.add('toast-enter-active'); | |
| toast.classList.remove('toast-enter'); | |
| }, 10); | |
| // Remove toast after delay | |
| setTimeout(() => { | |
| toast.classList.add('toast-exit'); | |
| toast.classList.add('toast-exit-active'); | |
| setTimeout(() => { | |
| toast.remove(); | |
| }, 300); | |
| }, 5000); | |
| } | |
| // Create animated particles | |
| function createParticles() { | |
| const particleContainer = document.createElement('div'); | |
| particleContainer.classList.add('particle-background', 'fixed', 'inset-0', '-z-10'); | |
| document.body.appendChild(particleContainer); | |
| for (let i = 0; i < 20; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| const size = Math.random() * 80 + 20; | |
| const posX = Math.random() * 100; | |
| const posY = Math.random() * 100; | |
| const animationDuration = Math.random() * 20 + 15; | |
| const opacity = Math.random() * 0.1 + 0.05; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}%`; | |
| particle.style.top = `${posY}%`; | |
| particle.style.animationDuration = `${animationDuration}s`; | |
| particle.style.opacity = opacity; | |
| particleContainer.appendChild(particle); | |
| } | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createParticles(); | |
| }); | |
| </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=web3district/web3quest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |