Hugging Face's logo

Spaces:
meni150723
/
editcraft-pro-studio
Running

App Files Community
meni150723 commited on
Commit
0b1f2ac
·
verified ·
1 Parent(s): a6ca756

🧠 Quiz & Brain Game – Features & Options

Browse files

1. Game Modes

Classic Quiz – multiple-choice questions.

True or False – quick yes/no questions.

Puzzle Mode – riddles, logic puzzles, and brain teasers.

Memory Game – card-matching memory challenge.

Speed Round – answer as many questions as possible in limited time.

Survival Mode – one wrong answer and you’re out.

Daily Challenge – new quiz every day.

Trivia Battle – play against another player.

Tournament – compete in rounds until a champion is crowned.

2. Categories

General Knowledge

Science

History

Geography

Math

Literature

Technology

Movies & TV

Music

Sports

Art & Culture

Brain Teasers

Riddles

Logic & Strategy

3. Question Types

Multiple Choice

True/False

Fill in the Blank

Match the Pairs

Drag & Drop Answers

Sequence Ordering (put in the right order)

Image-based Questions (choose from pictures)

Audio-based Questions (guess the sound/music)

4. Game Features

Score System

Levels & Difficulty Progression

Time Limit / Stopwatch

Leaderboard (Global & Friends)

Achievements & Badges

Hints (50/50, skip, extra time)

Lifelines (ask a friend, poll the audience)

Power-ups (double points, shield, freeze time)

Player Profiles

Customizable Avatars

Multiplayer (real-time or turn-based)

Chat & Emojis in multiplayer

Offline Mode

Daily Rewards

5. Advanced Features

AI Question Generator

Question Editor (create your own quizzes)

Sharing Quizzes with Friends

Cloud Save & Sync

Cross-platform (Web, Mobile, Tablet)

Multiple Languages Support

Analytics (track performance)

Adaptive Difficulty (AI adjusts based on player skill)

Gamification (XP, Levels, Ranking)

Event Mode (special seasonal quizzes)

Team Play (groups vs groups)

Files changed (2) hide show
  1. index.html +0 -329
  2. quiz.html +109 -0
index.html CHANGED
@@ -1,329 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" class="h-full">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>EditCraft Pro - All-in-one Creative Studio</title>
7
- <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <script src="https://unpkg.com/feather-icons"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
- <style>
13
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
14
- body {
15
- font-family: 'Poppins', sans-serif;
16
- overflow-x: hidden;
17
- }
18
- .vanta-bg {
19
- position: absolute;
20
- top: 0;
21
- left: 0;
22
- width: 100%;
23
- height: 100%;
24
- z-index: -1;
25
- opacity: 0.3;
26
- }
27
- .feature-card:hover {
28
- transform: translateY(-5px);
29
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
- }
31
- .gradient-text {
32
- background: linear-gradient(90deg, #6EE7B7 0%, #3B82F6 50%, #9333EA 100%);
33
- -webkit-background-clip: text;
34
- background-clip: text;
35
- color: transparent;
36
- }
37
- </style>
38
- </head>
39
- <body class="min-h-full bg-gray-50">
40
- <div id="vanta-bg" class="vanta-bg"></div>
41
-
42
- <!-- Navigation -->
43
- <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-50">
44
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
45
- <div class="flex justify-between h-16">
46
- <div class="flex items-center">
47
- <div class="flex-shrink-0 flex items-center">
48
- <i data-feather="edit-3" class="h-8 w-8 text-indigo-600"></i>
49
- <span class="ml-2 text-xl font-bold text-gray-900">EditCraft<span class="text-indigo-600">Pro</span></span>
50
- </div>
51
- <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
52
- <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
53
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>
54
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Templates</a>
55
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>
56
- </div>
57
- </div>
58
- <div class="hidden sm:ml-6 sm:flex sm:items-center">
59
- <a href="/login" class="px-4 py-2 rounded-md text-sm font-medium text-indigo-600 hover:bg-indigo-50">Sign In</a>
60
- <a href="/register" class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">Get Started</a>
61
- </div>
62
- <div class="-mr-2 flex items-center sm:hidden">
63
- <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
64
- <span class="sr-only">Open main menu</span>
65
- <i data-feather="menu"></i>
66
- </button>
67
- </div>
68
- </div>
69
- </div>
70
-
71
- <!-- Mobile menu -->
72
- <div class="sm:hidden hidden" id="mobile-menu">
73
- <div class="pt-2 pb-3 space-y-1">
74
- <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
75
- <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a>
76
- <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Templates</a>
77
- <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Pricing</a>
78
- <div class="pt-4 pb-3 border-t border-gray-200">
79
- <div class="flex items-center px-4">
80
- <div class="flex-shrink-0">
81
- <i data-feather="user" class="h-10 w-10 rounded-full text-gray-400"></i>
82
- </div>
83
- <div class="ml-3">
84
- <div class="text-base font-medium text-gray-800">Account</div>
85
- </div>
86
- </div>
87
- <div class="mt-3 space-y-1">
88
- <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign in</a>
89
- <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign up</a>
90
- </div>
91
- </div>
92
- </div>
93
- </div>
94
- </nav>
95
-
96
- <!-- Hero Section -->
97
- <div class="pt-24 pb-12 sm:pt-32 sm:pb-20 lg:pt-40 lg:pb-28">
98
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
99
- <div class="lg:grid lg:grid-cols-12 lg:gap-8">
100
- <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
101
- <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
102
- <span class="block">Create Stunning</span>
103
- <span class="block gradient-text">Multimedia Magic</span>
104
- </h1>
105
- <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
106
- The ultimate all-in-one creative suite for photos, videos, audio, and beyond. Powered by AI and packed with professional tools to bring your ideas to life.
107
- </p>
108
- <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
109
- <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
110
- <div class="rounded-md shadow">
111
- <a href="editor.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
112
- Start Creating Free
113
- </a>
114
- </div>
115
- <div class="mt-3 sm:mt-0 sm:ml-3">
116
- <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
117
- <i data-feather="play-circle" class="mr-2"></i> See Demo
118
- </a>
119
- </div>
120
- </div>
121
- <p class="mt-3 text-sm text-gray-500">
122
- No credit card required. Premium plans start at $9.99/month.
123
- </p>
124
- </div>
125
- </div>
126
- <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
127
- <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
128
- <div class="relative block w-full bg-white overflow-hidden rounded-lg">
129
- <img class="w-full" src="http://static.photos/technology/1200x630/42" alt="EditCraft Pro interface">
130
- <div class="absolute inset-0 bg-gradient-to-t from-indigo-600 to-transparent opacity-30"></div>
131
- <div class="absolute bottom-0 left-0 right-0 p-6">
132
- <p class="text-white text-lg font-medium">Experience the most advanced editing suite</p>
133
- <p class="mt-1 text-indigo-100">Real-time collaboration • AI-powered tools • Cloud storage</p>
134
- </div>
135
- </div>
136
- </div>
137
- </div>
138
- </div>
139
- </div>
140
- </div>
141
-
142
- <!-- Features Section -->
143
- <div class="py-12 bg-white">
144
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
145
- <div class="lg:text-center">
146
- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
147
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
148
- Everything you need in one place
149
- </p>
150
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
151
- From basic editing to advanced AI-powered tools, we've got you covered.
152
- </p>
153
- </div>
154
-
155
- <div class="mt-10">
156
- <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
157
- <!-- Feature 1 -->
158
- <div class="feature-card bg-white rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out">
159
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-50 text-indigo-600">
160
- <i data-feather="film"></i>
161
- </div>
162
- <div class="mt-4">
163
- <h3 class="text-lg font-medium text-gray-900">Professional Video Editor</h3>
164
- <p class="mt-2 text-base text-gray-500">
165
- Multi-track timeline, keyframe animations, transitions, and effects for cinematic results.
166
- </p>
167
- </div>
168
- </div>
169
-
170
- <!-- Feature 2 -->
171
- <div class="feature-card bg-white rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out">
172
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-50 text-indigo-600">
173
- <i data-feather="cpu"></i>
174
- </div>
175
- <div class="mt-4">
176
- <h3 class="text-lg font-medium text-gray-900">AI-Powered Tools</h3>
177
- <p class="mt-2 text-base text-gray-500">
178
- Auto-enhancement, smart composition, object removal, and intelligent editing suggestions.
179
- </p>
180
- </div>
181
- </div>
182
-
183
- <!-- Feature 3 -->
184
- <div class="feature-card bg-white rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out">
185
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-50 text-indigo-600">
186
- <i data-feather="users"></i>
187
- </div>
188
- <div class="mt-4">
189
- <h3 class="text-lg font-medium text-gray-900">Real-Time Collaboration</h3>
190
- <p class="mt-2 text-base text-gray-500">
191
- Work simultaneously with team members from anywhere in the world.
192
- </p>
193
- </div>
194
- </div>
195
-
196
- <!-- Feature 4 -->
197
- <div class="feature-card bg-white rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out">
198
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-50 text-indigo-600">
199
- <i data-feather="cloud"></i>
200
- </div>
201
- <div class="mt-4">
202
- <h3 class="text-lg font-medium text-gray-900">Cloud Storage</h3>
203
- <p class="mt-2 text-base text-gray-500">
204
- Access your projects from any device with automatic versioning and backup.
205
- </p>
206
- </div>
207
- </div>
208
-
209
- <!-- Feature 5 -->
210
- <div class="feature-card bg-white rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out">
211
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-50 text-indigo-600">
212
- <i data-feather="sliders"></i>
213
- </div>
214
- <div class="mt-4">
215
- <h3 class="text-lg font-medium text-gray-900">Advanced Audio Tools</h3>
216
- <p class="mt-2 text-base text-gray-500">
217
- Voice enhancement, noise reduction, automatic sync, and professional mixing.
218
- </p>
219
- </div>
220
- </div>
221
-
222
- <!-- Feature 6 -->
223
- <div class="feature-card bg-white rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out">
224
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-50 text-indigo-600">
225
- <i data-feather="share-2"></i>
226
- </div>
227
- <div class="mt-4">
228
- <h3 class="text-lg font-medium text-gray-900">Publish & Share</h3>
229
- <p class="mt-2 text-base text-gray-500">
230
- One-click publishing to social platforms with optimized formats for each network.
231
- </p>
232
- </div>
233
- </div>
234
- </div>
235
- </div>
236
- </div>
237
- </div>
238
-
239
- <!-- CTA Section -->
240
- <div class="bg-indigo-700">
241
- <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
242
- <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
243
- <span class="block">Ready to unleash your creativity?</span>
244
- <span class="block">Start editing for free today.</span>
245
- </h2>
246
- <p class="mt-4 text-lg leading-6 text-indigo-200">
247
- Join over 500,000 creators who trust EditCraft Pro for their multimedia projects.
248
- </p>
249
- <a href="login.html" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
250
- Sign In / Register
251
- </a>
252
- </div>
253
- </div>
254
-
255
- <!-- Footer -->
256
- <footer class="bg-gray-50">
257
- <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
258
- <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
259
- <div class="px-5 py-2">
260
- <a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a>
261
- </div>
262
- <div class="px-5 py-2">
263
- <a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a>
264
- </div>
265
- <div class="px-5 py-2">
266
- <a href="#" class="text-base text-gray-500 hover:text-gray-900">Jobs</a>
267
- </div>
268
- <div class="px-5 py-2">
269
- <a href="#" class="text-base text-gray-500 hover:text-gray-900">Press</a>
270
- </div>
271
- <div class="px-5 py-2">
272
- <a href="#" class="text-base text-gray-500 hover:text-gray-900">Accessibility</a>
273
- </div>
274
- <div class="px-5 py-2">
275
- <a href="#" class="text-base text-gray-500 hover:text-gray-900">Partners</a>
276
- </div>
277
- </nav>
278
- <div class="mt-8 flex justify-center space-x-6">
279
- <a href="#" class="text-gray-400 hover:text-gray-500">
280
- <span class="sr-only">Facebook</span>
281
- <i data-feather="facebook"></i>
282
- </a>
283
- <a href="#" class="text-gray-400 hover:text-gray-500">
284
- <span class="sr-only">Instagram</span>
285
- <i data-feather="instagram"></i>
286
- </a>
287
- <a href="#" class="text-gray-400 hover:text-gray-500">
288
- <span class="sr-only">Twitter</span>
289
- <i data-feather="twitter"></i>
290
- </a>
291
- <a href="#" class="text-gray-400 hover:text-gray-500">
292
- <span class="sr-only">GitHub</span>
293
- <i data-feather="github"></i>
294
- </a>
295
- <a href="#" class="text-gray-400 hover:text-gray-500">
296
- <span class="sr-only">YouTube</span>
297
- <i data-feather="youtube"></i>
298
- </a>
299
- </div>
300
- <p class="mt-8 text-center text-base text-gray-400">
301
- &copy; 2023 EditCraft Pro. All rights reserved.
302
- </p>
303
- </div>
304
- </footer>
305
-
306
- <script>
307
- VANTA.GLOBE({
308
- el: "#vanta-bg",
309
- mouseControls: true,
310
- touchControls: true,
311
- gyroControls: false,
312
- minHeight: 200.00,
313
- minWidth: 200.00,
314
- scale: 1.00,
315
- scaleMobile: 1.00,
316
- color: 0x3b82f6,
317
- backgroundColor: 0xf8fafc,
318
- size: 0.8
319
- });
320
- </script>
321
- <script>
322
- feather.replace();
323
- document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
324
- const menu = document.getElementById('mobile-menu');
325
- menu.classList.toggle('hidden');
326
- });
327
- </script>
328
- </body>
329
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
quiz.html ADDED
@@ -0,0 +1,109 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Brain Game Quiz</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <style>
10
+ .option:hover {
11
+ transform: scale(1.02);
12
+ transition: transform 0.2s;
13
+ }
14
+ .timer-pulse {
15
+ animation: pulse 1s infinite;
16
+ }
17
+ @keyframes pulse {
18
+ 0% { transform: scale(1); }
19
+ 50% { transform: scale(1.1); }
20
+ 100% { transform: scale(1); }
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="bg-gray-100">
25
+ <div class="container mx-auto p-4 max-w-4xl">
26
+ <header class="flex justify-between items-center mb-8">
27
+ <h1 class="text-3xl font-bold text-indigo-700">🧠 Brain Game Quiz</h1>
28
+ <div class="flex space-x-4">
29
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
30
+ <i class="fas fa-user mr-2"></i>Player
31
+ </button>
32
+ <button class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition">
33
+ <i class="fas fa-cog mr-2"></i>Settings
34
+ </button>
35
+ </div>
36
+ </header>
37
+
38
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
39
+ <!-- Game Modes -->
40
+ <div class="bg-white p-6 rounded-xl shadow-md">
41
+ <h2 class="text-xl font-semibold mb-4 text-indigo-600 border-b pb-2">Game Modes</h2>
42
+ <div class="space-y-3">
43
+ <button class="w-full text-left p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition option">
44
+ <i class="fas fa-list-ol mr-2 text-blue-500"></i> Classic Quiz
45
+ </button>
46
+ <button class="w-full text-left p-3 bg-green-50 rounded-lg hover:bg-green-100 transition option">
47
+ <i class="fas fa-check-circle mr-2 text-green-500"></i> True/False
48
+ </button>
49
+ <button class="w-full text-left p-3 bg-purple-50 rounded-lg hover:bg-purple-100 transition option">
50
+ <i class="fas fa-puzzle-piece mr-2 text-purple-500"></i> Puzzle Mode
51
+ </button>
52
+ <button class="w-full text-left p-3 bg-yellow-50 rounded-lg hover:bg-yellow-100 transition option">
53
+ <i class="fas fa-brain mr-2 text-yellow-500"></i> Memory Game
54
+ </button>
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Categories -->
59
+ <div class="bg-white p-6 rounded-xl shadow-md">
60
+ <h2 class="text-xl font-semibold mb-4 text-indigo-600 border-b pb-2">Categories</h2>
61
+ <div class="space-y-3">
62
+ <button class="w-full text-left p-3 bg-red-50 rounded-lg hover:bg-red-100 transition option">
63
+ <i class="fas fa-globe mr-2 text-red-500"></i> General Knowledge
64
+ </button>
65
+ <button class="w-full text-left p-3 bg-teal-50 rounded-lg hover:bg-teal-100 transition option">
66
+ <i class="fas fa-flask mr-2 text-teal-500"></i> Science
67
+ </button>
68
+ <button class="w-full text-left p-3 bg-amber-50 rounded-lg hover:bg-amber-100 transition option">
69
+ <i class="fas fa-landmark mr-2 text-amber-500"></i> History
70
+ </button>
71
+ <button class="w-full text-left p-3 bg-emerald-50 rounded-lg hover:bg-emerald-100 transition option">
72
+ <i class="fas fa-music mr-2 text-emerald-500"></i> Music
73
+ </button>
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <!-- Current Game Status -->
79
+ <div class="mt-8 bg-white p-6 rounded-xl shadow-md">
80
+ <div class="flex justify-between items-center mb-4">
81
+ <h2 class="text-xl font-semibold text-indigo-600">Current Game</h2>
82
+ <div class="flex items-center space-x-2">
83
+ <span class="font-bold">Score: <span class="text-green-600">0</span></span>
84
+ <span class="font-bold ml-4">Level: <span class="text-blue-600">1</span></span>
85
+ <div class="ml-4 px-3 py-1 bg-red-100 text-red-700 rounded-full timer-pulse">
86
+ <i class="fas fa-clock mr-1"></i><span>30s</span>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <div class="text-center py-10">
92
+ <p class="text-gray-500">Select a game mode and category to begin</p>
93
+ <button class="mt-4 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
94
+ <i class="fas fa-play mr-2"></i>Start Playing
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <script>
101
+ // Initialize game logic here
102
+ document.querySelectorAll('.option').forEach(option => {
103
+ option.addEventListener('click', function() {
104
+ this.classList.add('ring-2', 'ring-indigo-400');
105
+ });
106
+ });
107
+ </script>
108
+ </body>
109
+ </html>