Hugging Face's logo

Spaces:
web3district
/
web3quest
Running

App Files Community
web3district commited on
Commit
b83f6fe
·
verified ·
1 Parent(s): 5deb550

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

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +862 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Web3quest
3
- emoji: 🐠
4
- colorFrom: pink
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: web3quest
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,862 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QuestForge - Web3 Marketing Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ teal: {
15
+ 500: '#0d9488',
16
+ 600: '#0f766e',
17
+ },
18
+ sunset: {
19
+ 500: '#f97316',
20
+ 600: '#ea580c',
21
+ }
22
+ },
23
+ borderRadius: {
24
+ '2xl': '1.5rem',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
32
+
33
+ body {
34
+ font-family: 'Inter', sans-serif;
35
+ background: #0f172a;
36
+ color: #f1f5f9;
37
+ overflow-x: hidden;
38
+ }
39
+
40
+ .particle {
41
+ position: absolute;
42
+ border-radius: 50%;
43
+ background: rgba(13, 148, 136, 0.15);
44
+ animation: float 15s infinite linear;
45
+ }
46
+
47
+ @keyframes float {
48
+ 0% { transform: translateY(0) translateX(0); }
49
+ 25% { transform: translateY(-20px) translateX(10px); }
50
+ 50% { transform: translateY(0) translateX(20px); }
51
+ 75% { transform: translateY(20px) translateX(10px); }
52
+ 100% { transform: translateY(0) translateX(0); }
53
+ }
54
+
55
+ .card-hover {
56
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
57
+ }
58
+
59
+ .card-hover:hover {
60
+ transform: translateY(-5px);
61
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
62
+ }
63
+
64
+ .progress-ring {
65
+ transform: rotate(-90deg);
66
+ }
67
+
68
+ .progress-ring__circle {
69
+ transition: stroke-dashoffset 0.3s;
70
+ transform: rotate(90deg);
71
+ transform-origin: 50% 50%;
72
+ }
73
+
74
+ .drawer {
75
+ transition: transform 0.3s ease-in-out;
76
+ }
77
+
78
+ .ripple {
79
+ position: relative;
80
+ overflow: hidden;
81
+ }
82
+
83
+ .ripple-effect {
84
+ position: absolute;
85
+ border-radius: 50%;
86
+ background: rgba(255, 255, 255, 0.7);
87
+ transform: scale(0);
88
+ animation: ripple-animation 0.6s linear;
89
+ }
90
+
91
+ @keyframes ripple-animation {
92
+ to {
93
+ transform: scale(4);
94
+ opacity: 0;
95
+ }
96
+ }
97
+
98
+ /* Skeleton loading */
99
+ .skeleton {
100
+ background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
101
+ background-size: 200% 100%;
102
+ animation: shimmer 1.5s infinite;
103
+ }
104
+
105
+ @keyframes shimmer {
106
+ 0% {
107
+ background-position: 200% 0;
108
+ }
109
+ 100% {
110
+ background-position: -200% 0;
111
+ }
112
+ }
113
+
114
+ /* Toast animations */
115
+ .toast-enter {
116
+ opacity: 0;
117
+ transform: translateY(20px);
118
+ }
119
+
120
+ .toast-enter-active {
121
+ opacity: 1;
122
+ transform: translateY(0);
123
+ transition: opacity 300ms, transform 300ms;
124
+ }
125
+
126
+ .toast-exit {
127
+ opacity: 1;
128
+ transform: translateY(0);
129
+ }
130
+
131
+ .toast-exit-active {
132
+ opacity: 0;
133
+ transform: translateY(20px);
134
+ transition: opacity 300ms, transform 300ms;
135
+ }
136
+
137
+ /* Mobile sidebar */
138
+ @media (max-width: 768px) {
139
+ .mobile-nav {
140
+ position: fixed;
141
+ bottom: 0;
142
+ left: 0;
143
+ right: 0;
144
+ z-index: 50;
145
+ backdrop-filter: blur(10px);
146
+ background: rgba(15, 23, 42, 0.85);
147
+ }
148
+ }
149
+ </style>
150
+ </head>
151
+ <body class="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800">
152
+ <!-- Navigation Bar -->
153
+ <nav class="bg-slate-900/80 backdrop-blur-md border-b border-slate-700 fixed top-0 left-0 right-0 z-40">
154
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
155
+ <div class="flex items-center justify-between h-16">
156
+ <div class="flex items-center">
157
+ <div class="flex-shrink-0 flex items-center">
158
+ <div class="bg-teal-500 h-8 w-8 rounded-lg flex items-center justify-center">
159
+ <i class="fas fa-cube text-white"></i>
160
+ </div>
161
+ <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>
162
+ </div>
163
+ <div class="hidden md:block">
164
+ <div class="ml-10 flex items-baseline space-x-4">
165
+ <a href="#" class="text-teal-400 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
166
+ <a href="#" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Leaderboard</a>
167
+ <a href="#" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Rewards</a>
168
+ <a href="#" class="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Documentation</a>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ <div class="hidden md:block">
173
+ <div class="ml-4 flex items-center md:ml-6">
174
+ <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">
175
+ <i class="fas fa-plus mr-2"></i> Create Campaign
176
+ </button>
177
+ <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">
178
+ <i class="fas fa-wallet mr-2"></i> Connect Wallet
179
+ </button>
180
+ <div class="ml-4 relative">
181
+ <div class="bg-slate-800 border border-slate-700 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer">
182
+ <i class="fas fa-user text-slate-300"></i>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ <div class="-mr-2 flex md:hidden">
188
+ <button id="mobile-menu-btn" class="text-slate-300 hover:text-white focus:outline-none">
189
+ <i class="fas fa-bars h-6 w-6"></i>
190
+ </button>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </nav>
195
+
196
+ <!-- Mobile Navigation -->
197
+ <div class="mobile-nav md:hidden fixed bottom-0 left-0 right-0 border-t border-slate-700 py-3">
198
+ <div class="flex justify-around">
199
+ <a href="#" class="flex flex-col items-center text-teal-400">
200
+ <i class="fas fa-home mb-1"></i>
201
+ <span class="text-xs">Home</span>
202
+ </a>
203
+ <a href="#" class="flex flex-col items-center text-slate-300">
204
+ <i class="fas fa-trophy mb-1"></i>
205
+ <span class="text-xs">Leaderboard</span>
206
+ </a>
207
+ <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">
208
+ <i class="fas fa-plus"></i>
209
+ </button>
210
+ <a href="#" class="flex flex-col items-center text-slate-300">
211
+ <i class="fas fa-gift mb-1"></i>
212
+ <span class="text-xs">Rewards</span>
213
+ </a>
214
+ <a href="#" class="flex flex-col items-center text-slate-300">
215
+ <i class="fas fa-user mb-1"></i>
216
+ <span class="text-xs">Profile</span>
217
+ </a>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Main Content -->
222
+ <div class="pt-20 pb-24 md:pb-16 px-4">
223
+ <!-- Dashboard Heading -->
224
+ <div class="max-w-7xl mx-auto">
225
+ <div class="flex justify-between items-center mb-8">
226
+ <h1 class="text-3xl font-bold">Active Campaigns</h1>
227
+ <div class="hidden md:flex space-x-3">
228
+ <button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-2xl text-sm">All</button>
229
+ <button class="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-2xl text-sm">Popular</button>
230
+ <button class="px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 rounded-2xl text-sm">New</button>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Stats Cards -->
235
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
236
+ <div class="card-hover bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
237
+ <div class="flex justify-between items-start">
238
+ <div>
239
+ <p class="text-slate-400 text-sm">Total Earnings</p>
240
+ <p class="text-2xl font-bold mt-1">$1,245.50</p>
241
+ </div>
242
+ <div class="bg-teal-500/20 p-3 rounded-full">
243
+ <i class="fas fa-coins text-teal-400 text-xl"></i>
244
+ </div>
245
+ </div>
246
+ <div class="mt-4 flex items-center text-sm text-green-400">
247
+ <i class="fas fa-arrow-up mr-1"></i>
248
+ <span>+12.5% from last month</span>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="card-hover bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
253
+ <div class="flex justify-between items-start">
254
+ <div>
255
+ <p class="text-slate-400 text-sm">Completed Quests</p>
256
+ <p class="text-2xl font-bold mt-1">42</p>
257
+ </div>
258
+ <div class="bg-sunset-500/20 p-3 rounded-full">
259
+ <i class="fas fa-tasks text-sunset-400 text-xl"></i>
260
+ </div>
261
+ </div>
262
+ <div class="mt-4 flex items-center text-sm text-green-400">
263
+ <i class="fas fa-fire mr-1"></i>
264
+ <span>3 quests ahead of peers</span>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="card-hover bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl p-6">
269
+ <div class="flex justify-between items-start">
270
+ <div>
271
+ <p class="text-slate-400 text-sm">Referral Rewards</p>
272
+ <p class="text-2xl font-bold mt-1">$385.75</p>
273
+ </div>
274
+ <div class="bg-cyan-500/20 p-3 rounded-full">
275
+ <i class="fas fa-user-friends text-cyan-400 text-xl"></i>
276
+ </div>
277
+ </div>
278
+ <div class="mt-4 flex items-center text-sm text-yellow-400">
279
+ <i class="fas fa-user-plus mr-1"></i>
280
+ <span>Invite friends to earn more</span>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Campaign Grid -->
286
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
287
+ <!-- Campaign Card 1 -->
288
+ <div class="card-hover bg-[#121212] border border-[#333] rounded-2xl overflow-hidden shadow-lg">
289
+ <div class="relative">
290
+ <!-- Layered tab layout -->
291
+ <div class="h-2 bg-[#FF1D93]"></div>
292
+ <div class="h-40 bg-[#121212] flex items-center justify-center relative overflow-hidden">
293
+ <!-- Circuit pattern background -->
294
+ <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cGF0aCBkPSJNMCA1MEg1ME01MCAwVjEwME0yNSAyNUgyNVYyNU03NSA3NUg3NVY3NSIgc3Ryb2tlPSIjRkYxRDkzIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');"></div>
295
+ <i class="fas fa-gamepad text-6xl text-white/20"></i>
296
+ </div>
297
+ <div class="absolute top-6 right-4">
298
+ <span class="bg-[#121212] text-white text-xs font-medium px-3 py-1 rounded-full border border-[#333]">Gaming</span>
299
+ </div>
300
+ </div>
301
+ <div class="p-6">
302
+ <div class="flex justify-between items-start">
303
+ <h3 class="font-bold text-lg text-white">DeFi Adventure Quest</h3>
304
+ <span class="text-xs bg-emerald-900/50 text-emerald-400 px-2 py-1 rounded-lg">Active</span>
305
+ </div>
306
+ <p class="text-gray-400 mt-2 text-sm">Complete DeFi tasks and earn crypto rewards</p>
307
+
308
+ <!-- Progress bar -->
309
+ <div class="mt-4">
310
+ <div class="flex justify-between text-white text-sm mb-1">
311
+ <span>3 / 6</span>
312
+ <span>70 XP</span>
313
+ </div>
314
+ <div class="h-2 bg-[#333] rounded-full overflow-hidden">
315
+ <div class="h-full bg-[#FF1D93] w-1/2"></div>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="flex items-center mt-4 text-gray-500 text-sm">
320
+ <i class="fas fa-gem mr-1 text-[#FF1D93]"></i>
321
+ <span class="text-white">Reward: 250 QFT</span>
322
+ </div>
323
+ <div class="flex items-center mt-2 text-gray-500 text-sm">
324
+ <i class="fas fa-users mr-1 text-[#FF1D93]"></i>
325
+ <span class="text-white">4,521 participants</span>
326
+ </div>
327
+ <div class="mt-6">
328
+ <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">
329
+ Continue a Quest
330
+ </button>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Campaign Card 2 -->
336
+ <div class="card-hover bg-[#121212] border border-[#333] rounded-2xl overflow-hidden shadow-lg">
337
+ <div class="relative">
338
+ <!-- Layered tab layout -->
339
+ <div class="h-2 bg-[#FF1D93]"></div>
340
+ <div class="h-40 bg-[#121212] flex items-center justify-center relative overflow-hidden">
341
+ <!-- Circuit pattern background -->
342
+ <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cGF0aCBkPSJNMCA1MEg1ME01MCAwVjEwME0yNSAyNUgyNVYyNU03NSA3NUg3NVY3NSIgc3Ryb2tlPSIjRkYxRDkzIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');"></div>
343
+ <i class="fab fa-twitter text-6xl text-white/20"></i>
344
+ </div>
345
+ <div class="absolute top-6 right-4">
346
+ <span class="bg-[#121212] text-white text-xs font-medium px-3 py-1 rounded-full border border-[#333]">Social</span>
347
+ </div>
348
+ </div>
349
+ <div class="p-6">
350
+ <div class="flex justify-between items-start">
351
+ <h3 class="font-bold text-lg text-white">Twitter Buzz Challenge</h3>
352
+ <span class="text-xs bg-amber-900/50 text-amber-400 px-2 py-1 rounded-lg">Ending Soon</span>
353
+ </div>
354
+ <p class="text-gray-400 mt-2 text-sm">Engage with our tweets and grow your influence</p>
355
+
356
+ <!-- Progress bar -->
357
+ <div class="mt-4">
358
+ <div class="flex justify-between text-white text-sm mb-1">
359
+ <span>4 / 6</span>
360
+ <span>90 XP</span>
361
+ </div>
362
+ <div class="h-2 bg-[#333] rounded-full overflow-hidden">
363
+ <div class="h-full bg-[#FF1D93] w-2/3"></div>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="flex items-center mt-4 text-gray-500 text-sm">
368
+ <i class="fas fa-gem mr-1 text-[#FF1D93]"></i>
369
+ <span class="text-white">Reward: 180 QFT</span>
370
+ </div>
371
+ <div class="flex items-center mt-2 text-gray-500 text-sm">
372
+ <i class="fas fa-users mr-1 text-[#FF1D93]"></i>
373
+ <span class="text-white">8,942 participants</span>
374
+ </div>
375
+ <div class="mt-6">
376
+ <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">
377
+ Continue a Quest
378
+ </button>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Campaign Card 3 -->
384
+ <div class="card-hover bg-[#121212] border border-[#333] rounded-2xl overflow-hidden shadow-lg">
385
+ <div class="relative">
386
+ <!-- Layered tab layout -->
387
+ <div class="h-2 bg-[#FF1D93]"></div>
388
+ <div class="h-40 bg-[#121212] flex items-center justify-center relative overflow-hidden">
389
+ <!-- Circuit pattern background -->
390
+ <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cGF0aCBkPSJNMCA1MEg1ME01MCAwVjEwME0yNSAyNUgyNVYyNU03NSA3NUg3NVY3NSIgc3Ryb2tlPSIjRkYxRDkzIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');"></div>
391
+ <i class="fas fa-ethereum text-6xl text-white/20"></i>
392
+ </div>
393
+ <div class="absolute top-6 right-4">
394
+ <span class="bg-[#121212] text-white text-xs font-medium px-3 py-1 rounded-full border border-[#333]">DeFi</span>
395
+ </div>
396
+ </div>
397
+ <div class="p-6">
398
+ <div class="flex justify-between items-start">
399
+ <h3 class="font-bold text-lg text-white">Liquidity Provider Quest</h3>
400
+ <span class="text-xs bg-sky-900/50 text-sky-400 px-2 py-1 rounded-lg">New</span>
401
+ </div>
402
+ <p class="text-gray-400 mt-2 text-sm">Provide liquidity and earn bonus rewards</p>
403
+
404
+ <!-- Progress bar -->
405
+ <div class="mt-4">
406
+ <div class="flex justify-between text-white text-sm mb-1">
407
+ <span>1 / 6</span>
408
+ <span>30 XP</span>
409
+ </div>
410
+ <div class="h-2 bg-[#333] rounded-full overflow-hidden">
411
+ <div class="h-full bg-[#FF1D93] w-1/6"></div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="flex items-center mt-4 text-gray-500 text-sm">
416
+ <i class="fas fa-gem mr-1 text-[#FF1D93]"></i>
417
+ <span class="text-white">Reward: 500 QFT</span>
418
+ </div>
419
+ <div class="flex items-center mt-2 text-gray-500 text-sm">
420
+ <i class="fas fa-users mr-1 text-[#FF1D93]"></i>
421
+ <span class="text-white">1,243 participants</span>
422
+ </div>
423
+ <div class="mt-6">
424
+ <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">
425
+ Continue a Quest
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Campaign Detail View (Hidden by default) -->
433
+ <div id="campaign-detail" class="hidden mt-12">
434
+ <div class="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-2xl overflow-hidden">
435
+ <!-- Campaign Header -->
436
+ <div class="h-64 bg-gradient-to-r from-teal-500/40 to-cyan-500/40 relative">
437
+ <div class="absolute top-0 left-0 right-0 p-6 flex justify-between items-start">
438
+ <button id="back-to-dashboard" class="text-white bg-slate-900/50 rounded-full p-2">
439
+ <i class="fas fa-arrow-left"></i>
440
+ </button>
441
+ <div class="flex space-x-3">
442
+ <span class="bg-slate-900/80 text-xs font-medium px-3 py-1 rounded-full">Gaming</span>
443
+ <span class="bg-emerald-900/80 text-emerald-400 text-xs font-medium px-3 py-1 rounded-full">Active</span>
444
+ </div>
445
+ </div>
446
+ <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-slate-800 to-transparent">
447
+ <h1 class="text-3xl font-bold">DeFi Adventure Quest</h1>
448
+ <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>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="p-6">
453
+ <div class="flex justify-between items-center">
454
+ <div class="flex items-center">
455
+ <div class="flex items-center bg-slate-900/50 px-4 py-2 rounded-xl">
456
+ <i class="fas fa-clock text-teal-500 mr-2"></i>
457
+ <span class="font-mono">02:45:18</span>
458
+ </div>
459
+ <div class="ml-4 flex items-center bg-slate-900/50 px-4 py-2 rounded-xl">
460
+ <i class="fas fa-users text-purple-500 mr-2"></i>
461
+ <span>4,521 participants</span>
462
+ </div>
463
+ </div>
464
+ <div class="bg-slate-900/50 px-4 py-2 rounded-xl">
465
+ <span>Reward: <span class="font-bold text-teal-400">250 QFT</span></span>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
470
+ <!-- Quest List -->
471
+ <div class="lg:col-span-2">
472
+ <h2 class="text-xl font-bold mb-4">Quest Tasks</h2>
473
+ <div class="space-y-4">
474
+ <!-- Task 1 -->
475
+ <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-4">
476
+ <div class="flex items-start">
477
+ <div class="bg-teal-500/20 p-3 rounded-xl mr-4">
478
+ <i class="fab fa-twitter text-teal-400 text-xl"></i>
479
+ </div>
480
+ <div class="flex-1">
481
+ <div class="flex justify-between">
482
+ <h3 class="font-bold">Follow on Twitter</h3>
483
+ <span class="bg-emerald-900/50 text-emerald-400 text-xs px-2 py-1 rounded-lg">Completed</span>
484
+ </div>
485
+ <p class="text-slate-400 mt-1 text-sm">Follow our official Twitter account</p>
486
+ <div class="mt-3">
487
+ <button class="text-xs bg-slate-800 px-3 py-1 rounded-lg opacity-50 cursor-not-allowed">
488
+ <i class="fas fa-check mr-1"></i> Completed
489
+ </button>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+
495
+ <!-- Task 2 -->
496
+ <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-4">
497
+ <div class="flex items-start">
498
+ <div class="bg-blue-500/20 p-3 rounded-xl mr-4">
499
+ <i class="fab fa-discord text-blue-400 text-xl"></i>
500
+ </div>
501
+ <div class="flex-1">
502
+ <div class="flex justify-between">
503
+ <h3 class="font-bold">Join Discord Community</h3>
504
+ <span class="bg-emerald-900/50 text-emerald-400 text-xs px-2 py-1 rounded-lg">Completed</span>
505
+ </div>
506
+ <p class="text-slate-400 mt-1 text-sm">Join our Discord server and stay connected</p>
507
+ <div class="mt-3">
508
+ <button class="text-xs bg-slate-800 px-3 py-1 rounded-lg opacity-50 cursor-not-allowed">
509
+ <i class="fas fa-check mr-1"></i> Completed
510
+ </button>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+
516
+ <!-- Task 3 -->
517
+ <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-4">
518
+ <div class="flex items-start">
519
+ <div class="bg-amber-500/20 p-3 rounded-xl mr-4">
520
+ <i class="fas fa-wallet text-amber-400 text-xl"></i>
521
+ </div>
522
+ <div class="flex-1">
523
+ <div class="flex justify-between">
524
+ <h3 class="font-bold">Swap Tokens</h3>
525
+ <span class="bg-sky-900/50 text-sky-400 text-xs px-2 py-1 rounded-lg">In Progress</span>
526
+ </div>
527
+ <p class="text-slate-400 mt-1 text-sm">Swap at least 0.1 ETH on our platform</p>
528
+ <div class="mt-3 flex space-x-3">
529
+ <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">
530
+ Execute Swap
531
+ </button>
532
+ <button class="text-slate-400 hover:text-white text-sm px-3 py-2">
533
+ Skip Task
534
+ </button>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <!-- Task 4 -->
541
+ <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-4">
542
+ <div class="flex items-start">
543
+ <div class="bg-purple-500/20 p-3 rounded-xl mr-4">
544
+ <i class="fas fa-user-plus text-purple-400 text-xl"></i>
545
+ </div>
546
+ <div class="flex-1">
547
+ <div class="flex justify-between">
548
+ <h3 class="font-bold">Invite Friends</h3>
549
+ <span class="bg-slate-700 text-slate-400 text-xs px-2 py-1 rounded-lg">Locked</span>
550
+ </div>
551
+ <p class="text-slate-400 mt-1 text-sm">Invite 3 friends to join this campaign</p>
552
+ <div class="mt-3">
553
+ <button class="text-xs bg-slate-800 px-3 py-1 rounded-lg opacity-50 cursor-not-allowed">
554
+ Complete previous tasks
555
+ </button>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Referral Panel -->
564
+ <div class="bg-slate-900/50 border border-slate-700 rounded-2xl p-6 h-fit">
565
+ <div class="flex justify-between items-center mb-6">
566
+ <h2 class="text-xl font-bold">Referral Program</h2>
567
+ <button class="text-teal-400">
568
+ <i class="fas fa-expand"></i>
569
+ </button>
570
+ </div>
571
+
572
+ <div class="bg-slate-800/70 rounded-xl p-4 mb-6">
573
+ <p class="text-slate-400 text-sm mb-2">Your referral link</p>
574
+ <div class="flex">
575
+ <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">
576
+ <button class="ripple bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-r-xl text-sm">
577
+ Copy
578
+ </button>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="mb-6">
583
+ <p class="font-medium mb-3">Your referral stats</p>
584
+ <div class="grid grid-cols-3 gap-3">
585
+ <div class="bg-slate-800/70 rounded-xl p-3 text-center">
586
+ <p class="text-2xl font-bold">12</p>
587
+ <p class="text-slate-400 text-xs mt-1">Invites</p>
588
+ </div>
589
+ <div class="bg-slate-800/70 rounded-xl p-3 text-center">
590
+ <p class="text-2xl font-bold">8</p>
591
+ <p class="text-slate-400 text-xs mt-1">Active</p>
592
+ </div>
593
+ <div class="bg-slate-800/70 rounded-xl p-3 text-center">
594
+ <p class="text-2xl font-bold">$38.50</p>
595
+ <p class="text-slate-400 text-xs mt-1">Earned</p>
596
+ </div>
597
+ </div>
598
+ </div>
599
+
600
+ <div>
601
+ <p class="font-medium mb-3">Leaderboard</p>
602
+ <div class="space-y-3">
603
+ <div class="flex items-center justify-between p-3 hover:bg-slate-800/50 rounded-xl">
604
+ <div class="flex items-center">
605
+ <div class="w-8 h-8 bg-amber-500/20 rounded-full flex items-center justify-center mr-3">
606
+ <span class="text-amber-500 font-bold">1</span>
607
+ </div>
608
+ <span>crypt0wizard.eth</span>
609
+ </div>
610
+ <span class="text-teal-400">142 pts</span>
611
+ </div>
612
+ <div class="flex items-center justify-between p-3 hover:bg-slate-800/50 rounded-xl">
613
+ <div class="flex items-center">
614
+ <div class="w-8 h-8 bg-slate-700 rounded-full flex items-center justify-center mr-3">
615
+ <span class="text-slate-400 font-bold">2</span>
616
+ </div>
617
+ <span>degen_queen.eth</span>
618
+ </div>
619
+ <span class="text-teal-400">128 pts</span>
620
+ </div>
621
+ <div class="flex items-center justify-between p-3 hover:bg-slate-800/50 rounded-xl">
622
+ <div class="flex items-center">
623
+ <div class="w-8 h-8 bg-orange-800/30 rounded-full flex items-center justify-center mr-3">
624
+ <span class="text-orange-500 font-bold">3</span>
625
+ </div>
626
+ <span>nft_guru.eth</span>
627
+ </div>
628
+ <span class="text-teal-400">117 pts</span>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+
640
+ <!-- Claim Rewards Footer -->
641
+ <div class="fixed bottom-0 left-0 right-0 bg-slate-900/80 backdrop-blur-lg border-t border-slate-700 z-30">
642
+ <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
643
+ <div>
644
+ <p class="text-slate-400 text-sm">Your campaign rewards</p>
645
+ <p class="text-xl font-bold">125.75 <span class="text-teal-400">QFT</span></p>
646
+ </div>
647
+ <div class="flex space-x-3">
648
+ <button class="ripple border border-teal-500 text-teal-400 px-6 py-3 rounded-xl font-medium">
649
+ Track Rewards
650
+ </button>
651
+ <button class="ripple bg-gradient-to-r from-teal-600 to-cyan-600 text-white px-6 py-3 rounded-xl font-medium">
652
+ Claim Now
653
+ </button>
654
+ </div>
655
+ </div>
656
+ </div>
657
+
658
+ <!-- Wallet Connect Modal -->
659
+ <div id="wallet-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
660
+ <div class="bg-slate-800 border border-slate-700 rounded-2xl w-full max-w-md">
661
+ <div class="p-6 border-b border-slate-700">
662
+ <div class="flex justify-between items-center">
663
+ <h3 class="text-xl font-bold">Connect Wallet</h3>
664
+ <button id="close-wallet-modal" class="text-slate-400 hover:text-white">
665
+ <i class="fas fa-times"></i>
666
+ </button>
667
+ </div>
668
+ <p class="text-slate-400 mt-2 text-sm">Connect with one of our available wallet providers</p>
669
+ </div>
670
+
671
+ <div class="p-6">
672
+ <div class="space-y-3">
673
+ <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">
674
+ <div class="w-10 h-10 bg-orange-500/20 rounded-full flex items-center justify-center mr-4">
675
+ <i class="fab fa-ethereum text-orange-500"></i>
676
+ </div>
677
+ <div class="text-left">
678
+ <p class="font-medium">MetaMask</p>
679
+ <p class="text-slate-400 text-sm">Popular Ethereum Wallet</p>
680
+ </div>
681
+ <div class="ml-auto bg-emerald-900/50 text-emerald-400 text-xs px-2 py-1 rounded-lg">
682
+ Recommended
683
+ </div>
684
+ </button>
685
+
686
+ <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">
687
+ <div class="w-10 h-10 bg-indigo-500/20 rounded-full flex items-center justify-center mr-4">
688
+ <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzU0NEVFQyIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuODIyIDE4LjY5N0MxMi4wMzIgMTguNTEyIDEyLjMxOCAxOC40NjkgMTIuNTYgMTguNTc2TDE1LjUgMjAuMDc4VjE1LjY5M0wxMS44MjIgMTMuODMzVjE4LjY5N1pNMTIuMzI3IDEyLjMwNkwxNS41IDEzLjkzNFY5LjYzOUwxMi43NTIgOC4xNzZDMTIuNTU0IDguMDY0IDEyLjMxOCA4LjA2NCAxMi4xMiA4LjE3Nkw4LjUgMTAuMDA3VjE0Ljg0MkwxMi4zMjcgMTIuMzA2Wk0xNi41IDE1LjY5M1YyMC4wNzhMMTkuNDQgMTguNTc2QzE5LjY4MiAxOC40NjkgMTkuOTY4IDE4LjUxMiAyMC4xNzggMTguNjk3VjEzLjgzM0wxNi41IDE1LjY5M1pNMTkuNjczIDEyLjMwNkwyMy41IDE0Ljg0MlYxMC4wMDdMMTkuODggOC4xNzZDMTkuNjgyIDguMDY0IDE5LjQ0NiA4LjA2NCAxOS4yNDggOC4xNzZMMTYuNSA5LjYzOVYxMy45MzRMMTkuNjczIDEyLjMwNlpNMjMuNSAxNy4xNTZWMTQuODQyTDE5LjY3MyAxMi4zMDZMMTYuNSAxMy45MzRMMjAuMTc4IDE1LjgzM1YxOC42OTdDMjAuMjIgMTguODQ5IDIwLjI5MyAxOC45OSAyMC4zOTQgMTkuMTE0QzIwLjQ5NSAxOS4yMzggMjAuNjE5IDE5LjM0IDIwLjc1OSAxOS40MTJMMjMuMTQ3IDIwLjc4MkMyMy41MjIgMjEuMDA1IDI0IDIwLjc1MiAyNCAyMC4zMlYxNy4xNTZIMjMuNVpNOC41IDE0Ljg0MlYxNy4xNTZIOC4wMDFWMjAuMzJDOC4wMDEgMjAuNzUyIDguNDc4IDIxLjAwNSA4Ljg1MyAyMC43ODJMMTEuMjQxIDE5LjQxMkMxMS4zODEgMTkuMzQgMTEuNTA1IDE5LjIzOCAxMS42MDYgMTkuMTE0QzExLjcwNyAxOC45OSAxMS43OCAxOC44NDkgMTEuODIyIDE4LjY5N1YxNS44MzNMOC41IDE0Ljg0MlpNMTUuNSAyMC4wNzhMMjAuMTc4IDE4LjE3OFYxNi40MzJMMTUuNSAxOC44MTZWMjAuMDc4Wk0xMS44MjIgMTMuODMzTDguNSAxMi4wMDdWMTQuODQyTDExLjgyMiAxMy44MzNWMTMuODMzWk04LjUgMTIuMDA3TDEyLjMyNyA5LjQ3MUwxMi4zMjcgMTIuMzA2TDguNSAxNC44NDJWMTIuMDA3Wk0xMi4zMjcgOS40NzFMMTUuNSA3Ljg0NFY5LjYzOUwxMi4zMjcgMTIuMzA2VjkuNDcxWk0xOS42NzMgOS40NzFMMTYuNSA3Ljg0NFY5LjYzOUwxOS42NzMgMTIuMzA2VjkuNDcxWk0xNi41IDcuODQ0TDE5LjY3MyA5LjQ3MUwyMy41IDEyLjAwN1Y5LjE3NkwxOS44OCA3LjM0NEMxOS42ODIgNy4yMzIgMTkuNDQ2IDcuMjMyIDE5LjI0OCA3LjM0NEwxNi41IDguODA3VjcuODQ0Wk0xMi4zMjcgOS40NzFDMTIuMzI3IDkuNDcxIDEyLjMwMiA5LjQ4OCAxMi4yNzYgOS41MDZDMTIuMjUxIDkuNTI0IDEyLjIyOSA5LjUzOSAxMi4yMDggOS41NTFDMTIuMTg4IDkuNTYzIDEyLjE2OSA5LjU3MiAxMi4xNSA5LjU4QzEyLjEzMSA5LjU4OCAxMi4xMTMgOS41OTUgMTIuMDk1IDkuNjAxQzEyLjA4IDkuNjA2IDEyLjA2NyA5LjYxIDEyLjA1MyA5LjYxNUMxMi4wNCA5LjYxOSAxMi4wMjggOS42MjMgMTIuMDE2IDkuNjI3QzEyLjAwNSA5LjYzMSAxMS45OTQgOS42MzQgMTEuOTgzIDkuNjM4QzExLjk3MyA5LjY0MSAxMS45NjQgOS42NDQgMTEuOTU0IDkuNjQ3QzExLjk0NSA5LjY1IDExLjkzNiA5LjY1MyAxMS45MjcgOS42NTZDMTEuOTE4IDkuNjU4IDExLjkxIDkuNjYgMTEuOTAxIDkuNjYzQzExLjg5MyA5LjY2NSAxMS44ODUgOS42NjcgMTEuODc3IDkuNjY5QzExLjg3IDkuNjcxIDExLjg2MyA5LjY3MiAxMS44NTYgOS42NzRDMTEuODQ5IDkuNjc1IDExLjg0MiA5LjY3NyAxMS44MzYgOS42NzhDMTEuODMgOS42NzkgMTEuODI0IDkuNjggMTEuODE4IDkuNjgxQzExLjgxMiA5LjY4MiAxMS44MDcgOS42ODIgMTEuODAyIDkuNjgzQzExLjc5NyA5LjY4NCAxMS43OTEgOS42ODQgMTEuNzg2IDkuNjg0QzExLjc4MSA5LjY4NCAxMS43NzcgOS42ODQgMTEuNzcyIDkuNjg0QzExLjc2NyA5LjY4NCAxMS43NjMgOS42ODQgMTEuNzU4IDkuNjgzQzExLjc1MyA5LjY4MyAxMS43NDkgOS42ODMgMTEuNzQ0IDkuNjgyQzExLjczOSA5LjY4MSAxMS43MzQgOS42OCAxMS43MjkgOS42NzlDMTEuNzI0IDkuNjc4IDExLjcxOSA5LjY3NiAxMS43MTQgOS42NzVDMTEuNzA5IDkuNjc0IDExLjcwNCA5LjY3MiAxMS42OTkgOS42NzFDMTEuNjk0IDkuNjc0IDExLjY4OSA5LjY3NyAxMS42ODQgOS42ODFDMTEuNjc5IDkuNjg0IDExLjY3NSA5LjY4NyAxMS42NyA5LjY5QzExLjY2NSA5LjY5MyAxMS42NiA5LjY5NSAxMS42NTUgOS42OThDMTEuNjUgOS43IDEuNzYgOS4wIDguNSA5LjA0OEM4LjUgOS4wNDggOC41IDkuMDQ4IDguNSA5LjA0OEM4LjU3NiA5LjA5MyA4LjY0MiA5LjE0NSA4LjcgOS4yMDVDOC43NTggOS4yNjYgOC44MDYgOS4zMzYgOC44NDEgOS40MTRDOC44NzYgOS40OTIgOC45IDkuNTc4IDguOTA5IDkuNjY3QzguOTE4IDkuNzU2IDguOTI0IDkuODQ4IDguOTI0IDkuOTQyTDguOTI0IDEyLjAwN0w4LjUgMTIuMDA3VjkuMTc2QzguNSA5LjA0OCA4LjUyIDguOTIxIDguNTU5IDguODAyQzguNTk4IDguNjgzIDguNjU2IDguNTcxIDguNzI5IDguNDcyQzguODAzIDguMzcyIDguODkxIDguMjg0IDguOTkgOC4yMTJDOS4wODkgOC4xNCA5LjE5OSA4LjA4MiA5LjMxNSA4LjA0MUM5LjQzMiA4IDkuNTU0IDcuOTc3IDkuNjc3IDcuOTc3QzkuOCA3Ljk3NyA5LjkyMSA4IDEwLjA0IDguMDQzQzEwLjE1OSA4LjA4NSAxMC4yNzMgOC4xNDYgMTAuMzc5IDguMjI0QzEwLjQ4NSA4LjMwMiAxMC41ODIgOC4zOTYgMTAuNjY2IDguNTA0QzEwLjc1MSA4LjYxMiAxMC44MiA4LjczMyAxMC44NzQgOC44NjJDMTAuOTI3IDguOTkxIDEwLjk2NSA5LjEyNyAxMC45ODYgOS4yNjdDMTEuMDA3IDkuNDA4IDExLjAxMiA5LjU1MiAxMSA5LjY5NkwxMSA5LjYzOUwxMi4zMjcgOS40NzFaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==" class="w-5 h-5">
689
+ </div>
690
+ <div class="text-left">
691
+ <p class="font-medium">WalletConnect</p>
692
+ <p class="text-slate-400 text-sm">Multi-chain connectivity</p>
693
+ </div>
694
+ </button>
695
+
696
+ <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">
697
+ <div class="w-10 h-10 bg-blue-500/20 rounded-full flex items-center justify-center mr-4">
698
+ <i class="fab fa-bitcoin text-blue-500"></i>
699
+ </div>
700
+ <div class="text-left">
701
+ <p class="font-medium">Coinbase Wallet</p>
702
+ <p class="text-slate-400 text-sm">Easy-to-use wallet</p>
703
+ </div>
704
+ </button>
705
+ </div>
706
+
707
+ <div class="mt-6 text-center">
708
+ <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>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div>
713
+
714
+ <!-- Toast Container -->
715
+ <div id="toast-container" class="fixed top-4 right-4 z-50 space-y-3"></div>
716
+
717
+ <script>
718
+ // DOM Elements
719
+ const walletModal = document.getElementById('wallet-modal');
720
+ const connectWalletBtn = document.getElementById('connect-wallet-btn');
721
+ const closeWalletModal = document.getElementById('close-wallet-modal');
722
+ const campaignDetail = document.getElementById('campaign-detail');
723
+ const backToDashboard = document.getElementById('back-to-dashboard');
724
+ const toastContainer = document.getElementById('toast-container');
725
+
726
+ // Event Listeners
727
+ connectWalletBtn.addEventListener('click', () => {
728
+ walletModal.classList.remove('hidden');
729
+ walletModal.classList.add('flex');
730
+ });
731
+
732
+ closeWalletModal.addEventListener('click', () => {
733
+ walletModal.classList.add('hidden');
734
+ walletModal.classList.remove('flex');
735
+ });
736
+
737
+ // Show campaign detail on card click
738
+ document.querySelectorAll('[class*="grid-cols-3"] button').forEach(button => {
739
+ if (button.textContent.includes('View Quest')) {
740
+ button.addEventListener('click', () => {
741
+ document.querySelector('.pt-20').scrollIntoView({ behavior: 'smooth' });
742
+ campaignDetail.classList.remove('hidden');
743
+ });
744
+ }
745
+ });
746
+
747
+ backToDashboard.addEventListener('click', () => {
748
+ campaignDetail.classList.add('hidden');
749
+ });
750
+
751
+ // Ripple effect
752
+ document.querySelectorAll('.ripple').forEach(button => {
753
+ button.addEventListener('click', function(e) {
754
+ const ripple = document.createElement('span');
755
+ ripple.classList.add('ripple-effect');
756
+
757
+ const rect = this.getBoundingClientRect();
758
+ const size = Math.max(rect.width, rect.height);
759
+ const x = e.clientX - rect.left - size / 2;
760
+ const y = e.clientY - rect.top - size / 2;
761
+
762
+ ripple.style.width = ripple.style.height = `${size}px`;
763
+ ripple.style.left = `${x}px`;
764
+ ripple.style.top = `${y}px`;
765
+
766
+ this.appendChild(ripple);
767
+
768
+ setTimeout(() => {
769
+ ripple.remove();
770
+ }, 600);
771
+ });
772
+ });
773
+
774
+ // Show success toast when wallet is connected
775
+ connectWalletBtn.addEventListener('click', () => {
776
+ setTimeout(() => {
777
+ showToast('Wallet connected successfully!', 'success');
778
+ }, 1000);
779
+ });
780
+
781
+ // Toast function
782
+ function showToast(message, type = 'info') {
783
+ const toast = document.createElement('div');
784
+ toast.classList.add('toast-enter');
785
+
786
+ let bgColor = 'bg-slate-800';
787
+ let borderColor = 'border-slate-700';
788
+ let iconColor = 'text-slate-400';
789
+ let icon = 'fas fa-info-circle';
790
+
791
+ if (type === 'success') {
792
+ bgColor = 'bg-emerald-900/50';
793
+ borderColor = 'border-emerald-800';
794
+ iconColor = 'text-emerald-400';
795
+ icon = 'fas fa-check-circle';
796
+ } else if (type === 'error') {
797
+ bgColor = 'bg-rose-900/50';
798
+ borderColor = 'border-rose-800';
799
+ iconColor = 'text-rose-400';
800
+ icon = 'fas fa-exclamation-circle';
801
+ }
802
+
803
+ toast.innerHTML = `
804
+ <div class="${bgColor} border ${borderColor} rounded-xl px-4 py-3 flex items-center max-w-md">
805
+ <i class="${icon} ${iconColor} mr-3"></i>
806
+ <span>${message}</span>
807
+ </div>
808
+ `;
809
+
810
+ toastContainer.appendChild(toast);
811
+
812
+ // Trigger reflow to enable animation
813
+ setTimeout(() => {
814
+ toast.classList.add('toast-enter-active');
815
+ toast.classList.remove('toast-enter');
816
+ }, 10);
817
+
818
+ // Remove toast after delay
819
+ setTimeout(() => {
820
+ toast.classList.add('toast-exit');
821
+ toast.classList.add('toast-exit-active');
822
+
823
+ setTimeout(() => {
824
+ toast.remove();
825
+ }, 300);
826
+ }, 5000);
827
+ }
828
+
829
+ // Create animated particles
830
+ function createParticles() {
831
+ const particleContainer = document.createElement('div');
832
+ particleContainer.classList.add('particle-background', 'fixed', 'inset-0', '-z-10');
833
+ document.body.appendChild(particleContainer);
834
+
835
+ for (let i = 0; i < 20; i++) {
836
+ const particle = document.createElement('div');
837
+ particle.classList.add('particle');
838
+
839
+ const size = Math.random() * 80 + 20;
840
+ const posX = Math.random() * 100;
841
+ const posY = Math.random() * 100;
842
+ const animationDuration = Math.random() * 20 + 15;
843
+ const opacity = Math.random() * 0.1 + 0.05;
844
+
845
+ particle.style.width = `${size}px`;
846
+ particle.style.height = `${size}px`;
847
+ particle.style.left = `${posX}%`;
848
+ particle.style.top = `${posY}%`;
849
+ particle.style.animationDuration = `${animationDuration}s`;
850
+ particle.style.opacity = opacity;
851
+
852
+ particleContainer.appendChild(particle);
853
+ }
854
+ }
855
+
856
+ // Initialize
857
+ document.addEventListener('DOMContentLoaded', () => {
858
+ createParticles();
859
+ });
860
+ </script>
861
+ <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>
862
+ </html>