Hugging Face's logo

Spaces:
Saad4web
/
mc
Running

App Files Community
Saad4web commited on
Commit
063ef5c
·
verified ·
1 Parent(s): 5a33139

make it on top and also change text of all cta buttons - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +627 -18
  3. prompts.txt +548 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mc
3
- emoji: 🐨
4
- colorFrom: yellow
5
- colorTo: yellow
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: mc
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,628 @@
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>Minecraft Realm Access | Exclusive World Downloads</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ minecraft: '#1e3f20',
19
+ minecraftAccent: '#5cd65c',
20
+ minecraftDark: '#0f1a0f',
21
+ },
22
+ fontFamily: {
23
+ montserrat: ['Montserrat', 'sans-serif'],
24
+ poppins: ['Poppins', 'sans-serif']
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ .hero-bg {
32
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://static.photos/nature/1200x630/42');
33
+ background-size: cover;
34
+ background-position: center;
35
+ }
36
+ .pixel-border {
37
+ border-image: url("data:image/svg+xml,%3csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m0,4 l4,-4 l92,0 l4,4 l0,92 l-4,4 l-92,0 l-4,-4 z' fill='none' stroke='%235cd65c' stroke-width='4'/%3e%3c/svg%3e") 14 stretch;
38
+ border-width: 14px;
39
+ }
40
+ .modal {
41
+ transition: opacity 0.3s ease, transform 0.3s ease;
42
+ }
43
+ .modal-content {
44
+ transform: translateY(20px);
45
+ transition: transform 0.3s ease;
46
+ }
47
+ .modal.show {
48
+ opacity: 1;
49
+ pointer-events: auto;
50
+ }
51
+ .modal.show .modal-content {
52
+ transform: translateY(0);
53
+ }
54
+ .loader {
55
+ border-top-color: #5cd65c;
56
+ animation: spin 1s linear infinite;
57
+ }
58
+ @keyframes spin {
59
+ 0% { transform: rotate(0deg); }
60
+ 100% { transform: rotate(360deg); }
61
+ }
62
+ .countdown-item {
63
+ background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
64
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
65
+ }
66
+ .floating {
67
+ animation: floating 3s ease-in-out infinite;
68
+ }
69
+ @keyframes floating {
70
+ 0% { transform: translateY(0px); }
71
+ 50% { transform: translateY(-15px); }
72
+ 100% { transform: translateY(0px); }
73
+ }
74
+ .pixel-corners {
75
+ clip-path: polygon(
76
+ 0 8px, 8px 8px, 8px 0,
77
+ calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
78
+ 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
79
+ calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px),
80
+ 0 calc(100% - 8px)
81
+ );
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="font-poppins bg-gray-50">
86
+ <!-- Header -->
87
+ <header class="bg-minecraftDark text-white">
88
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
89
+ <div class="flex items-center">
90
+ <div class="w-10 h-10 rounded-full bg-minecraftAccent flex items-center justify-center mr-3">
91
+ <i data-feather="box" class="text-white"></i>
92
+ </div>
93
+ <h1 class="text-2xl font-bold font-montserrat">MINECRAFT<span class="text-minecraftAccent">REALMS</span></h1>
94
+ </div>
95
+ <div class="hidden md:flex items-center space-x-6">
96
+ <a href="#" class="hover:text-minecraftAccent transition">Home</a>
97
+ <a href="#" class="hover:text-minecraftAccent transition">Worlds</a>
98
+ <a href="#" class="hover:text-minecraftAccent transition">Testimonials</a>
99
+ <a href="#" class="hover:text-minecraftAccent transition">FAQ</a>
100
+ </div>
101
+ <button class="md:hidden text-2xl">
102
+ <i data-feather="menu"></i>
103
+ </button>
104
+ </div>
105
+ </header>
106
+
107
+ <!-- Hero Section -->
108
+ <section class="hero-bg text-white py-20">
109
+ <div class="container mx-auto px-4 text-center">
110
+ <div class="max-w-3xl mx-auto">
111
+ <div class="inline-block mb-4 px-4 py-1 bg-minecraftAccent rounded-full text-sm font-semibold">
112
+ LIMITED TIME ACCESS
113
+ </div>
114
+ <h1 class="text-4xl md:text-6xl font-bold font-montserrat mb-6">
115
+ UNLOCK EXCLUSIVE <span class="text-minecraftAccent">MINECRAFT</span> WORLDS
116
+ </h1>
117
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
118
+ Get instant access to premium Minecraft realms, adventure maps, and custom builds. Elevate your gameplay experience!
119
+ </p>
120
+
121
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6 mb-12">
122
+ <div class="bg-white text-minecraftDark p-4 rounded-lg shadow-lg flex items-center">
123
+ <i data-feather="map" class="text-minecraftAccent mr-3"></i>
124
+ <div>
125
+ <div class="font-bold">20+ Adventure Maps</div>
126
+ <div class="text-sm">Fully crafted experiences</div>
127
+ </div>
128
+ </div>
129
+ <div class="bg-white text-minecraftDark p-4 rounded-lg shadow-lg flex items-center">
130
+ <i data-feather="download" class="text-minecraftAccent mr-3"></i>
131
+ <div>
132
+ <div class="font-bold">Instant Access</div>
133
+ <div class="text-sm">Download immediately</div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <button id="getAccessBtn" class="bg-minecraftAccent hover:bg-green-700 text-white font-bold py-4 px-10 rounded-full text-lg transition transform hover:scale-105 duration-300 shadow-lg">
139
+ GET ACCESS NOW <i data-feather="arrow-right" class="ml-2"></i>
140
+ </button>
141
+
142
+ <div class="mt-10 flex justify-center">
143
+ <div class="floating">
144
+ <i data-feather="chevron-down" class="text-2xl animate-bounce"></i>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </section>
150
+
151
+ <!-- Benefits Section -->
152
+ <section class="py-16 bg-white">
153
+ <div class="container mx-auto px-4">
154
+ <h2 class="text-3xl md:text-4xl font-bold text-center font-montserrat mb-16">Why Our Minecraft Worlds?</h2>
155
+
156
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
157
+ <div class="text-center p-8 rounded-xl bg-gray-50 border border-gray-100">
158
+ <div class="w-20 h-20 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
159
+ <i data-feather="star" class="text-white"></i>
160
+ </div>
161
+ <h3 class="text-xl font-bold mb-3">Premium Quality</h3>
162
+ <p class="text-gray-600">Hand-crafted worlds with attention to detail and immersive gameplay experiences.</p>
163
+ </div>
164
+
165
+ <div class="text-center p-8 rounded-xl bg-gray-50 border border-gray-100">
166
+ <div class="w-20 h-20 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
167
+ <i data-feather="check-circle" class="text-white"></i>
168
+ </div>
169
+ <h3 class="text-xl font-bold mb-3">Fully Tested</h3>
170
+ <p class="text-gray-600">All worlds are tested for compatibility and performance across Minecraft versions.</p>
171
+ </div>
172
+
173
+ <div class="text-center p-8 rounded-xl bg-gray-50 border border-gray-100">
174
+ <div class="w-20 h-20 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
175
+ <i data-feather="refresh-cw" class="text-white"></i>
176
+ </div>
177
+ <h3 class="text-xl font-bold mb-3">Regular Updates</h3>
178
+ <p class="text-gray-600">New worlds added monthly with seasonal themes and special event content.</p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <!-- Tools Showcase Section -->
185
+ <section class="py-16 bg-gray-50">
186
+ <div class="container mx-auto px-4">
187
+ <h2 class="text-3xl md:text-4xl font-bold text-center font-montserrat mb-16">AI-Powered Minecraft Tools</h2>
188
+
189
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
190
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
191
+ <div class="w-16 h-16 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
192
+ <i data-feather="cpu" class="text-white"></i>
193
+ </div>
194
+ <h3 class="text-xl font-bold mb-3 text-center">World Generator AI</h3>
195
+ <p class="text-gray-600 mb-4">Generate unique Minecraft worlds with our advanced AI algorithm that creates stunning landscapes and structures.</p>
196
+ <div class="text-center">
197
+ <span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">AI-Powered</span>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
202
+ <div class="w-16 h-16 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
203
+ <i data-feather="box" class="text-white"></i>
204
+ </div>
205
+ <h3 class="text-xl font-bold mb-3 text-center">Texture Pack Creator</h3>
206
+ <p class="text-gray-600 mb-4">Transform your Minecraft visuals with AI-generated texture packs that maintain the classic feel with modern enhancements.</p>
207
+ <div class="text-center">
208
+ <span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">AI-Powered</span>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
213
+ <div class="w-16 h-16 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
214
+ <i data-feather="code" class="text-white"></i>
215
+ </div>
216
+ <h3 class="text-xl font-bold mb-3 text-center">Redstone Assistant</h3>
217
+ <p class="text-gray-600 mb-4">Get AI suggestions for complex Redstone contraptions and automate your Minecraft engineering projects.</p>
218
+ <div class="text-center">
219
+ <span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">AI-Powered</span>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
224
+ <div class="w-16 h-16 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
225
+ <i data-feather="users" class="text-white"></i>
226
+ </div>
227
+ <h3 class="text-xl font-bold mb-3 text-center">Smart NPC Creator</h3>
228
+ <p class="text-gray-600 mb-4">Design intelligent NPCs with custom dialogues and behaviors using our AI character creation system.</p>
229
+ <div class="text-center">
230
+ <span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">AI-Powered</span>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
235
+ <div class="w-16 h-16 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
236
+ <i data-feather="map" class="text-white"></i>
237
+ </div>
238
+ <h3 class="text-xl font-bold mb-3 text-center">Adventure Builder</h3>
239
+ <p class="text-gray-600 mb-4">Create custom adventure maps with AI-generated quests, puzzles, and storylines for endless gameplay.</p>
240
+ <div class="text-center">
241
+ <span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">AI-Powered</span>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
246
+ <div class="w-16 h-16 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
247
+ <i data-feather="shield" class="text-white"></i>
248
+ </div>
249
+ <h3 class="text-xl font-bold mb-3 text-center">Server Protector</h3>
250
+ <p class="text-gray-600 mb-4">AI-powered security tools that detect and prevent griefing, cheating, and other malicious activities on your server.</p>
251
+ <div class="text-center">
252
+ <span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">AI-Powered</span>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <div class="text-center mt-12">
258
+ <button class="bg-minecraftAccent hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105 duration-300">
259
+ EXPLORE ALL TOOLS
260
+ </button>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- Countdown Timer -->
266
+ <section class="py-12 bg-minecraftDark text-white">
267
+ <div class="container mx-auto px-4 text-center">
268
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">HURRY! LIMITED ACCESS WINDOW</h2>
269
+ <div class="flex justify-center space-x-4 mb-8">
270
+ <div class="countdown-item w-20 h-20 rounded-lg flex flex-col items-center justify-center">
271
+ <div id="days" class="极好的! 2xl font-bold">00</div>
272
+ <div class="text-sm">DAYS</div>
273
+ </div>
274
+ <div class="countdown-item w-20 h-20 rounded-lg flex flex-col items-center justify-center">
275
+ <div id="hours" class="text-2xl font-bold">00</div>
276
+ <div class="text极好的! SM">HOURS</div>
277
+ </div>
278
+ <div class="countdown-item w-20 h-20 rounded-lg flex flex-col items-center justify-center">
279
+ <div id="minutes" class="text-2xl font-bold">00</div>
280
+ <div class="text-sm">MINUTES</div>
281
+ </div>
282
+ <div class="countdown-item w-20 h-20 rounded-lg flex flex-col items-center justify-center">
283
+ <极好的! id="seconds" class="text-2xl font-bold">00</div>
284
+ <div class="text-sm">SECONDS</div>
285
+ </div>
286
+ </div>
287
+ <button id="countdownBtn" class="bg-minecraftAccent hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105 duration-300">
288
+ GET ACCESS NOW
289
+ </button>
290
+ </div>
291
+ </section>
292
+
293
+ <!-- Testimonials -->
294
+ <section class="py-16 bg-gray-50">
295
+ <div class="container mx-auto px-4">
296
+ <h2 class="text-3xl md:text-4xl font-bold text-center font-montserrat mb-16">What Players Say</h2>
297
+
298
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
299
+ <div class="bg-white p-6 rounded-xl shadow-md">
300
+ <div class="flex items-center mb-4">
301
+ <div class="w-12 h-12 rounded-full bg-minecraftAccent flex items-center justify-center text-white font-bold mr-3">MJ</div>
302
+ <div>
303
+ <div class="font-bold">Mike Johnson</div>
304
+ <div class="flex text-yellow-400">
305
+ ★★★★★
306
+ </div>
307
+ </div>
308
+ </div>
309
+ <p class="text-gray-600">"The adventure maps are incredible! My friends and I have spent hours exploring these beautifully crafted worlds."</p>
310
+ </div>
311
+
312
+ <div class="bg-white p-6 rounded-xl shadow-md">
313
+ <div class="flex items-center mb-4">
314
+ <div class="w-12 h-12 rounded-full bg-minecraftAccent flex items-center justify-center text-white font-bold mr-3">SL</div>
315
+ <div>
316
+ <div class="font-bold">Sarah Lee</div>
317
+ <div class="flex text-yellow-400">
318
+ ★★★★★
319
+ </div>
320
+ </div>
321
+ </div>
322
+ <p class="text-gray-600">"As a content creator, these worlds have given me amazing backdrops for my YouTube videos. Highly recommend!"</p>
323
+ </div>
324
+
325
+ <div class="bg-white p-6 rounded-xl shadow-md">
326
+ <div class="flex items-center mb-4">
327
+ <div class="w-12 h-12 rounded-full bg-minecraftAccent flex items-center justify-center text-white font-bold mr-3">DT</div>
328
+ <div>
329
+ <div class="font-bold">David Thompson</div>
330
+ <div class="flex text-yellow-400">
331
+ ★★★★★
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <p class="text-gray-600">"The castle build I downloaded was perfect for my server. The attention to detail is phenomenal!"</p>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </section>
340
+
341
+ <!-- FAQ Section -->
342
+ <section class="py-16 bg-white">
343
+ <div class="container mx-auto px-4">
344
+ <h2 class="text-3xl md:text-4xl font-bold text-center font-montserrat mb-16">Frequently Asked Questions</h2>
345
+
346
+ <div class="max-w-3xl mx-auto">
347
+ <div class="mb-6">
348
+ <div class="flex justify-between items-center cursor-pointer border-b border-gray-200 py-4">
349
+ <h3 class="text-lg font-semibold">How do I install these Minecraft worlds?</h3>
350
+ <i data-feather="chevron-down"></i>
351
+ </div>
352
+ <p class="mt-3 text-gray-600 hidden">After completing the verification process, you'll receive download links with detailed installation instructions. Most worlds simply need to be placed in your Minecraft saves folder.</p>
353
+ </div>
354
+
355
+ <div class="mb-6">
356
+ <div class="flex justify-between items-center cursor-pointer border-b border-gray-200 py-4">
357
+ <h3 class="text-lg font-semibold">What Minecraft versions are supported?</h3>
358
+ <i data-feather="chevron-down"></i>
359
+ </div>
360
+ <p class="mt-3 text-gray-600 hidden">Our worlds are compatible with Minecraft Java Edition 1.16+ and most work with Bedrock Edition as well. Each download page specifies version compatibility.</p>
361
+ </div>
362
+
363
+ <div class="mb-6">
364
+ <div class="flex justify-between items-center cursor-pointer border-b border-gray-200 py-4">
365
+ <h3 class="text-lg font-semibold">Can I use these on my server?</h3>
366
+ <i data-feather="chevron-down"></i>
367
+ </div>
368
+ <p class="mt-3 text-gray-600 hidden">Yes! All worlds come with a license for personal and server use. Commercial use requires additional permissions.</p>
369
+ </div>
370
+
371
+ <div class="mb-6">
372
+ <div class="flex justify-between items-center cursor-pointer border-b border-gray-200 py-4">
373
+ <h3 class="text-lg font-semibold">How often are new worlds added?</h3>
374
+ <i data-feather="chevron-down"></i>
375
+ </div>
376
+ <p class="mt-3 text-gray-600 hidden">We add 2-3 new worlds every month, with special seasonal content during holidays and Minecraft updates.</p>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Final CTA -->
383
+ <section class="py-20 bg-gradient-to-r from-minecraftDark to-minecraft text-white">
384
+ <div class="container mx-auto px-4 text-center">
385
+ <h2 class="text-3xl md:text-4xl font-bold font-montserrat mb-6">Ready to Explore Amazing Minecraft Worlds?</h2>
386
+ <p class="text-xl max-w-2xl mx-auto mb-10">Join thousands of players who have enhanced their Minecraft experience with our exclusive content.</p>
387
+ <button id="finalCtaBtn" class="bg-minecraftAccent hover:bg-green-700 text-white font-bold py-4 px-12 rounded-full text-lg transition transform hover:scale-105 duration-300 shadow-lg">
388
+ GET ACCESS NOW
389
+ </button>
390
+ </div>
391
+ </section>
392
+
393
+ <!-- Footer -->
394
+ <footer class="bg-minecraftDark text-gray-300 py-10">
395
+ <div class="container mx-auto px-4">
396
+ <div class="flex flex-col md:flex-row justify-between items-center">
397
+ <div class="mb-6 md:mb-0">
398
+ <div class="flex items-center">
399
+ <div class="w-8 h-8 rounded-full bg-minecraftAccent flex items-center justify-center mr-2">
400
+ <i data-feather="box" class="text-white"></i>
401
+ </div>
402
+ <h2 class="text-xl font-bold font-montserrat">MINECRAFT<span class="text-minecraftAccent">REALMS</span></h2>
403
+ </div>
404
+ <p class="mt-2 text-sm max-w-xs">Your portal to premium Minecraft worlds and adventures.</p>
405
+ </div>
406
+
407
+ <div class="flex space-x-6">
408
+ <a href="#" class="hover:text-white"><i data-feather="twitter"></i></a>
409
+ <a href="#" class="hover:text-white"><i data-feather="youtube"></i></a>
410
+ <a href="#" class="hover:text-white"><i data-feather="instagram"></i></a>
411
+ <a href="#" class="hover:text-white"><i data-feather="discord"></i></a>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
416
+ <p>&copy; 2023 MinecraftRealms. This is an independent service and is not affiliated with Mojang or Microsoft. Minecraft is a trademark of Mojang Studios.</p>
417
+ <div class="mt-4">
418
+ <a href="#" class="mx-2 hover:text-white">Privacy Policy</a>
419
+ <a href="#" class="mx-2 hover:text-white">Terms of Service</a>
420
+ <a href="#" class="mx-2 hover:text-white">Contact Us</a>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </footer>
425
+
426
+ <!-- Content Locker Modal -->
427
+ <div id="contentLockerModal" class="modal fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 opacity-0 pointer-events-none">
428
+ <div class="modal-content bg-white rounded-xl w-full max-w-md mx-4 p-6 relative">
429
+ <button id="closeModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
430
+ <i data-feather="x"></i>
431
+ </button>
432
+
433
+ <div class="text-center">
434
+ <div class="w-16 h-16 mx-auto bg-minecraftAccent rounded-full flex items-center justify-center mb-6">
435
+ <i data-feather="lock" class="text-white"></i>
436
+ </div>
437
+ <h3 class="text-2xl font-bold font-montserrat mb-4">Unlock Minecraft Worlds</h3>
438
+ <p class="text-gray-600 mb-6">Complete this quick step to access exclusive Minecraft content</p>
439
+
440
+ <div id="step1" class="step">
441
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
442
+ <div class="flex items-center mb-3">
443
+ <div class="w-8 h-8 rounded-full bg-minecraftAccent flex items-center justify-center text-white mr-3">
444
+ <span class="font-bold">1</span>
445
+ </div>
446
+ <h4 class="font-semibold">Verify Your Email</h4>
447
+ </div>
448
+ <p class="text-sm text-gray-600">Enter your email address to receive your access codes</p>
449
+ </div>
450
+
451
+ <form id="emailForm" class="mb-4">
452
+ <div class="mb-4">
453
+ <input type="email" id="userEmail" placeholder="Enter your email address" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-minecraftAccent">
454
+ </div>
455
+ <button type="submit" class="w-full bg-minecraftAccent hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition">
456
+ VERIFY EMAIL
457
+ </button>
458
+ </form>
459
+
460
+ <p class="text-xs text-gray-500">We respect your privacy. Your information is secure and will not be shared.</p>
461
+ </div>
462
+
463
+ <div id="step2" class="step hidden">
464
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
465
+ <div class="flex items-center mb-3">
466
+ <div class="w-8 h-8 rounded-full bg-minecraftAccent flex items-center justify-center text-white mr-3">
467
+ <span class="font-bold">2</span>
468
+ </div>
469
+ <h4 class="font-semibold">Complete Verification</h4>
470
+ </div>
471
+ <p class="text-sm text-gray-600">Check your email for the verification code</p>
472
+ </div>
473
+
474
+ <form id="verificationForm" class="mb-4">
475
+ <div class="mb-4">
476
+ <input type="text" id="verificationCode" placeholder="Enter verification code" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-minecraftAccent">
477
+ </div>
478
+ <button type="submit" class="w-full bg-minecraftAccent hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition">
479
+ SUBMIT CODE
480
+ </button>
481
+ </form>
482
+
483
+ <p class="text-xs text-gray-500">Didn't receive the code? <a href="#" class="text-minecraftAccent">Resend</a></p>
484
+ </div>
485
+
486
+ <div id="step3" class="step hidden">
487
+ <div class="flex justify-center mb-6">
488
+ <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
489
+ </div>
490
+ <h4 class="font-bold text-lg mb-2">Unlocking Your Content...</h4>
491
+ <p class="text-gray-600 mb-6">Please wait while we prepare your exclusive Minecraft worlds</p>
492
+ </div>
493
+
494
+ <div id="step4" class="step hidden">
495
+ <div class="w-16 h-16 mx-auto bg-green-500 rounded-full flex items-center justify-center mb-6">
496
+ <i data-feather="check" class="text-white"></i>
497
+ </div>
498
+ <h4 class="font-bold text-2xl mb-4 text-minecraftAccent">Success!</h4>
499
+ <p class="text-gray-600 mb-6">Your content is ready! Redirecting to your downloads...</p>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <script>
506
+ // Initialize Feather Icons
507
+ feather.replace();
508
+
509
+ // Countdown Timer
510
+ function updateCountdown() {
511
+ const now = new Date();
512
+ const targetDate = new Date();
513
+ targetDate.setDate(now.getDate() + 3);
514
+
515
+ const diff = targetDate - now;
516
+
517
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
518
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
519
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
520
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
521
+
522
+ document.getElementById('days').textContent = days.toString().padStart(2, '0');
523
+ document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
524
+ document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
525
+ document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
526
+ }
527
+
528
+ setInterval(updateCountdown, 1000);
529
+ updateCountdown();
530
+
531
+ // Modal functionality
532
+ const modal = document.getElementById('contentLockerModal');
533
+ const closeModal = document.getElementById('closeModal');
534
+ const getAccessBtn = document.getElementById('getAccessBtn');
535
+ const countdownBtn = document.getElementById('countdownBtn');
536
+ const finalCtaBtn = document.getElementById('finalCtaBtn');
537
+ const emailForm = document.getElementById('emailForm');
538
+ const verificationForm = document.getElementById('verificationForm');
539
+
540
+ function openModal() {
541
+ modal.classList.remove('opacity-0', 'pointer-events-none');
542
+ modal.classList.add('show');
543
+ document.body.style.overflow = 'hidden';
544
+ }
545
+
546
+ function closeModalFunc() {
547
+ modal.classList.remove('show');
548
+ modal.classList.add('opacity-0', 'pointer-events-none');
549
+ document.body.style.overflow = 'auto';
550
+ // Reset to step 1
551
+ document.getElementById('step1').classList.remove('hidden');
552
+ document.getElementById('step2').classList.add('hidden');
553
+ document.getElementById('step3').classList.add('hidden');
554
+ document.getElementById('step4').classList.add('hidden');
555
+ }
556
+
557
+ getAccessBtn.addEventListener('click', openModal);
558
+ countdownBtn.addEventListener('click', openModal);
559
+ finalCtaBtn.addEventListener('click', openModal);
560
+ closeModal.addEventListener('click', closeModalFunc);
561
+
562
+ // Close modal when clicking outside
563
+ modal.addEventListener('click', (e) => {
564
+ if (e.target === modal) {
565
+ closeModalFunc();
566
+ }
567
+ });
568
+
569
+ // Form submission
570
+ emailForm.addEventListener('submit', (e) => {
571
+ e.preventDefault();
572
+ const email = document.getElementById('userEmail').value;
573
+ if (email && validateEmail(email)) {
574
+ document.getElementById('step1').classList.add('hidden');
575
+ document.getElementById('step2').classList.remove('hidden');
576
+ } else {
577
+ alert('Please enter a valid email address');
578
+ }
579
+ });
580
+
581
+ verificationForm.addEventListener('submit', (e) => {
582
+ e.preventDefault();
583
+ const code = document.getElementById('verificationCode').value;
584
+ if (code) {
585
+ document.getElementById('step2').classList.add('hidden');
586
+ document.getElementById('step3').classList.remove('hidden');
587
+
588
+ // Simulate processing
589
+ setTimeout(() => {
590
+ document.getElementById('step3').classList.add('hidden');
591
+ document.getElementById('step4').classList.remove('hidden');
592
+
593
+ // Redirect after a delay
594
+ setTimeout(() => {
595
+ // Replace with your actual offer URL
596
+ window.location.href = 'https://example.com/minecraft-offer';
597
+ }, 3000);
598
+ }, 2000);
599
+ } else {
600
+ alert('Please enter the verification code');
601
+ }
602
+ });
603
+
604
+ // Email validation
605
+ function validateEmail(email) {
606
+ const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
607
+ return re.test(String(email).toLowerCase());
608
+ }
609
+
610
+ // FAQ accordion
611
+ const faqHeaders = document.querySelectorAll('.cursor-pointer');
612
+ faqHeaders.forEach(header => {
613
+ header.addEventListener('click', () => {
614
+ const content = header.nextElementSibling;
615
+ content.classList.toggle('hidden');
616
+ const icon = header.querySelector('i');
617
+ if (icon.getAttribute('data-feather') === 'chevron-down') {
618
+ icon.setAttribute('data-feather', 'chevron-up');
619
+ } else {
620
+ icon.setAttribute('data-feather', 'chevron-down');
621
+ }
622
+ feather.replace();
623
+ });
624
+ });
625
+ </script>
626
+ <script>feather.replace();</script>
627
+ </body>
628
  </html>
prompts.txt ADDED
@@ -0,0 +1,548 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ get inspired from next landing page and make it related Minecraft Topic Landing Page :
2
+
3
+ <!DOCTYPE html>
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="UTF-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Exclusive Nike Coupons | Limited Time Offer</title>
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
14
+ <script>
15
+ tailwind.config = {
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ nike: '#111111',
20
+ nikeAccent: '#e60023',
21
+ },
22
+ fontFamily: {
23
+ montserrat: ['Montserrat', 'sans-serif'],
24
+ poppins: ['Poppins', 'sans-serif']
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ .hero-bg {
32
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');
33
+ background-size: cover;
34
+ background-position: center;
35
+ }
36
+ .coupon-card {
37
+ transition: all 0.3s ease;
38
+ transform-style: preserve-3d;
39
+ }
40
+ .coupon-card:hover {
41
+ transform: translateY(-10px) scale(1.02);
42
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
43
+ }
44
+ .modal {
45
+ transition: opacity 0.3s ease, transform 0.3s ease;
46
+ }
47
+ .modal-content {
48
+ transform: translateY(20px);
49
+ transition: transform 0.3s ease;
50
+ }
51
+ .modal.show {
52
+ opacity: 1;
53
+ pointer-events: auto;
54
+ }
55
+ .modal.show .modal-content {
56
+ transform: translateY(0);
57
+ }
58
+ .loader {
59
+ border-top-color: #e60023;
60
+ animation: spin 1s linear infinite;
61
+ }
62
+ @keyframes spin {
63
+ 0% { transform: rotate(0deg); }
64
+ 100% { transform: rotate(360deg); }
65
+ }
66
+ .countdown-item {
67
+ background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
68
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
69
+ }
70
+ .floating {
71
+ animation: floating 3s ease-in-out infinite;
72
+ }
73
+ @keyframes floating {
74
+ 0% { transform: translateY(0px); }
75
+ 50% { transform: translateY(-15px); }
76
+ 100% { transform: translateY(0px); }
77
+ }
78
+ </style>
79
+ </head>
80
+ <body class="font-poppins bg-gray-50">
81
+ <!-- Header -->
82
+ <header class="bg-nike text-white">
83
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
84
+ <div class="flex items-center">
85
+ <div class="w-10 h-10 rounded-full bg-nikeAccent flex items-center justify-center mr-3">
86
+ <i class="fas fa-shoe-prints text-white text-xl"></i>
87
+ </div>
88
+ <h1 class="text-2xl font-bold font-montserrat">NIKE<span class="text-nikeAccent">COUPONS</span></h1>
89
+ </div>
90
+ <div class="hidden md:flex items-center space-x-6">
91
+ <a href="#" class="hover:text-nikeAccent transition">Home</a>
92
+ <a href="#" class="hover:text-nikeAccent transition">How It Works</a>
93
+ <a href="#" class="hover:text-nikeAccent transition">Testimonials</a>
94
+ <a href="#" class="hover:text-nikeAccent transition">FAQ</a>
95
+ </div>
96
+ <button class="md:hidden text-2xl">
97
+ <i class="fas fa-bars"></i>
98
+ </button>
99
+ </div>
100
+ </header>
101
+
102
+ <!-- Hero Section -->
103
+ <section class="hero-bg text-white py-20">
104
+ <div class="container mx-auto px-4 text-center">
105
+ <div class="max-w-3xl mx-auto">
106
+ <div class="inline-block mb-4 px-4 py-1 bg-nikeAccent rounded-full text-sm font-semibold">
107
+ LIMITED TIME OFFER
108
+ </div>
109
+ <h1 class="text-4xl md:text-6xl font-bold font-montserrat mb-6">
110
+ UNLOCK EXCLUSIVE <span class="text-nikeAccent">NIKE</span> SAVINGS
111
+ </h1>
112
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
113
+ Get access to premium discounts on Nike's latest collections. Elevate your style without breaking the bank!
114
+ </p>
115
+
116
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6 mb-12">
117
+ <div class="bg-white text-nike p-4 rounded-lg shadow-lg flex items-center">
118
+ <i class="fas fa-tag text-nikeAccent text-2xl mr-3"></i>
119
+ <div>
120
+ <div class="font-bold">Up to 70% Off</div>
121
+ <div class="text-sm">On select items</div>
122
+ </div>
123
+ </div>
124
+ <div class="bg-white text-nike p-4 rounded-lg shadow-lg flex items-center">
125
+ <i class="fas fa-shipping-fast text-nikeAccent text-2xl mr-3"></i>
126
+ <div>
127
+ <div class="font-bold">Free Shipping</div>
128
+ <div class="text-sm">On orders over $50</div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <button id="getCouponsBtn" class="bg-nikeAccent hover:bg-red-700 text-white font-bold py-4 px-10 rounded-full text-lg transition transform hover:scale-105 duration-300 shadow-lg">
134
+ GET YOUR COUPONS NOW <i class="fas fa-arrow-right ml-2"></i>
135
+ </button>
136
+
137
+ <div class="mt-10 flex justify-center">
138
+ <div class="floating">
139
+ <i class="fas fa-chevron-down text-2xl animate-bounce"></i>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Benefits Section -->
147
+ <section class="py-16 bg-white">
148
+ <div class="container mx-auto px-4">
149
+ <h2 class="text-3xl md:text-4xl font-bold text-center font-montserrat mb-16">Why Choose Our Nike Coupons?</h2>
150
+
151
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
152
+ <div class="text-center p-8 rounded-xl bg-gray-50 border border-gray-100">
153
+ <div class="w-20 h-20 mx-auto bg-nikeAccent rounded-full flex items-center justify-center mb-6">
154
+ <i class="fas fa-gem text-white text-3xl"></i>
155
+ </div>
156
+ <h3 class="text-xl font-bold mb-3">Exclusive Access</h3>
157
+ <p class="text-gray-600">Special discounts not available to the general public. Be among the first to save!</p>
158
+ </div>
159
+
160
+ <div class="text-center p-8 rounded-xl bg-gray-50 border border-gray-100">
161
+ <div class="w-20 h-20 mx-auto bg-nikeAccent rounded-full flex items-center justify-center mb-6">
162
+ <i class="fas fa-check-circle text-white text-3xl"></i>
163
+ </div>
164
+ <h3 class="text-xl font-bold mb-3">Verified & Reliable</h3>
165
+ <p class="text-gray-600">All coupons are tested and verified to ensure they work at checkout.</p>
166
+ </div>
167
+
168
+ <div class="text-center p-8 rounded-xl bg-gray-50 border border-gray-100">
169
+ <div class="w-20 h-20 mx-auto bg-nikeAccent rounded-full flex items-center justify-center mb-6">
170
+ <i class="fas fa-sync-alt text-white text-3xl"></i>
171
+ </div>
172
+ <h3 class="text-xl font-bold mb-3">Regular Updates</h3>
173
+ <p class="text-gray-600">New coupons added weekly so you always have fresh savings opportunities.</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Countdown Timer -->
180
+ <section class="py-12 bg-nike text-white">
181
+ <div class="container mx-auto px-4 text-center">
182
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">HURRY! OFFER EXPIRES SOON</h2>
183
+ <div class="flex justify-center space-x-4 mb-8">
184
+ <div class="countdown-item w-20 h-20 rounded-lg flex flex-col items-center justify-center">
185
+ <div id="days" class="text-2xl font-bold">00</div>
186
+ <div class="text-sm">DAYS</div>
187
+ </div>
188
+ <div class="countdown-item w-20 h-20 rounded-lg flex flex-col items-center justify-center">
189
+ <div id="hours" class="text-2xl font-bold">00</div>
190
+ <div class="text-sm">HOURS</div>
191
+ </div>
192
+ <div class="countdown-item w-20 h-20 rounded-lg flex flex-col items-center justify-center">
193
+ <div id="minutes" class="text-2xl font-bold">00</div>
194
+ <div class="text-sm">MINUTES</div>
195
+ </div>
196
+ <div class="countdown-item w-20 h-20 rounded-lg flex flex-col items-center justify-center">
197
+ <div id="seconds" class="text-2xl font-bold">00</div>
198
+ <div class="text-sm">SECONDS</div>
199
+ </div>
200
+ </div>
201
+ <button id="countdownBtn" class="bg-nikeAccent hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105 duration-300">
202
+ CLAIM YOUR DISCOUNT NOW
203
+ </button>
204
+ </div>
205
+ </section>
206
+
207
+ <!-- Testimonials -->
208
+ <section class="py-16 bg-gray-50">
209
+ <div class="container mx-auto px-4">
210
+ <h2 class="text-3xl md:text-4xl font-bold text-center font-montserrat mb-16">What Our Users Say</h2>
211
+
212
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
213
+ <div class="bg-white p-6 rounded-xl shadow-md">
214
+ <div class="flex items-center mb-4">
215
+ <div class="w-12 h-12 rounded-full bg-nikeAccent flex items-center justify-center text-white font-bold mr-3">AJ</div>
216
+ <div>
217
+ <div class="font-bold">Alex Johnson</div>
218
+ <div class="flex text-yellow-400">
219
+ <i class="fas fa-star"></i>
220
+ <i class="fas fa-star"></i>
221
+ <i class="fas fa-star"></i>
222
+ <i class="fas fa-star"></i>
223
+ <i class="fas fa-star"></i>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ <p class="text-gray-600">"Saved $45 on my new Air Jordans! These coupons are legit and easy to use. Will definitely come back!"</p>
228
+ </div>
229
+
230
+ <div class="bg-white p-6 rounded-xl shadow-md">
231
+ <div class="flex items-center mb-4">
232
+ <div class="w-12 h-12 rounded-full bg-nikeAccent flex items-center justify-center text-white font-bold mr-3">MS</div>
233
+ <div>
234
+ <div class="font-bold">Maria Sanchez</div>
235
+ <div class="flex text-yellow-400">
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ <i class="fas fa-star"></i>
239
+ <i class="fas fa-star"></i>
240
+ <i class="fas fa-star"></i>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ <p class="text-gray-600">"I was skeptical at first, but the coupon code worked perfectly! Got free shipping and 30% off my order."</p>
245
+ </div>
246
+
247
+ <div class="bg-white p-6 rounded-xl shadow-md">
248
+ <div class="flex items-center mb-4">
249
+ <div class="w-12 h-12 rounded-full bg-nikeAccent flex items-center justify-center text-white font-bold mr-3">TK</div>
250
+ <div>
251
+ <div class="font-bold">Tom Keller</div>
252
+ <div class="flex text-yellow-400">
253
+ <i class="fas fa-star"></i>
254
+ <i class="fas fa-star"></i>
255
+ <i class="fas fa-star"></i>
256
+ <i class="fas fa-star"></i>
257
+ <i class="fas fa-star-half-alt"></i>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ <p class="text-gray-600">"As a Nike collector, I'm always looking for deals. This site has saved me hundreds over the past year!"</p>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- FAQ Section -->
268
+ <section class="py-16 bg-white">
269
+ <div class="container mx-auto px-4">
270
+ <h2 class="text-3xl md:text-4xl font-bold text-center font-montserrat mb-16">Frequently Asked Questions</h2>
271
+
272
+ <div class="max-w-3xl mx-auto">
273
+ <div class="mb-6">
274
+ <div class="flex justify-between items-center cursor-pointer border-b border-gray-200 py-4">
275
+ <h3 class="text-lg font-semibold">How do I use these coupons?</h3>
276
+ <i class="fas fa-chevron-down"></i>
277
+ </div>
278
+ <p class="mt-3 text-gray-600 hidden">Simply click the "Get Coupons Now" button, complete the quick verification process, and you'll receive your exclusive coupon codes. Copy the code during Nike checkout to apply your discount.</p>
279
+ </div>
280
+
281
+ <div class="mb-6">
282
+ <div class="flex justify-between items-center cursor-pointer border-b border-gray-200 py-4">
283
+ <h3 class="text-lg font-semibold">Are these coupons really free?</h3>
284
+ <i class="fas fa-chevron-down"></i>
285
+ </div>
286
+ <p class="mt-3 text-gray-600 hidden">Yes! Our service is completely free. We partner with Nike to bring exclusive savings to our users without any cost.</p>
287
+ </div>
288
+
289
+ <div class="mb-6">
290
+ <div class="flex justify-between items-center cursor-pointer border-b border-gray-200 py-4">
291
+ <h3 class="text-lg font-semibold">How often are new coupons added?</h3>
292
+ <i class="fas fa-chevron-down"></i>
293
+ </div>
294
+ <p class="mt-3 text-gray-600 hidden">We update our coupon database weekly with new offers. Special seasonal discounts are added during holidays and major sales events.</p>
295
+ </div>
296
+
297
+ <div class="mb-6">
298
+ <div class="flex justify-between items-center cursor-pointer border-b border-gray-200 py-4">
299
+ <h3 class="text-lg font-semibold">Can I use multiple coupons at once?</h3>
300
+ <i class="fas fa-chevron-down"></i>
301
+ </div>
302
+ <p class="mt-3 text-gray-600 hidden">Nike's policy typically allows only one coupon per order. However, we sometimes offer stackable coupons which will be clearly marked.</p>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Final CTA -->
309
+ <section class="py-20 bg-gradient-to-r from-nike to-gray-900 text-white">
310
+ <div class="container mx-auto px-4 text-center">
311
+ <h2 class="text-3xl md:text-4xl font-bold font-montserrat mb-6">Ready to Elevate Your Nike Experience?</h2>
312
+ <p class="text-xl max-w-2xl mx-auto mb-10">Join thousands of satisfied customers who save big on their favorite Nike products every day.</p>
313
+ <button id="finalCtaBtn" class="bg-nikeAccent hover:bg-red-700 text-white font-bold py-4 px-12 rounded-full text-lg transition transform hover:scale-105 duration-300 shadow-lg">
314
+ UNLOCK YOUR SAVINGS NOW
315
+ </button>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Footer -->
320
+ <footer class="bg-nike text-gray-300 py-10">
321
+ <div class="container mx-auto px-4">
322
+ <div class="flex flex-col md:flex-row justify-between items-center">
323
+ <div class="mb-6 md:mb-0">
324
+ <div class="flex items-center">
325
+ <div class="w-8 h-8 rounded-full bg-nikeAccent flex items-center justify-center mr-2">
326
+ <i class="fas fa-shoe-prints text-white"></i>
327
+ </div>
328
+ <h2 class="text-xl font-bold font-montserrat">NIKE<span class="text-nikeAccent">COUPONS</span></h2>
329
+ </div>
330
+ <p class="mt-2 text-sm max-w-xs">Your trusted source for exclusive Nike discounts and promotions.</p>
331
+ </div>
332
+
333
+ <div class="flex space-x-6">
334
+ <a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a>
335
+ <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
336
+ <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
337
+ <a href="#" class="hover:text-white"><i class="fab fa-pinterest"></i></a>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
342
+ <p>&copy; 2023 NikeCoupons. This is an independent service and is not affiliated with Nike. All trademarks are property of their respective owners.</p>
343
+ <div class="mt-4">
344
+ <a href="#" class="mx-2 hover:text-white">Privacy Policy</a>
345
+ <a href="#" class="mx-2 hover:text-white">Terms of Service</a>
346
+ <a href="#" class="mx-2 hover:text-white">Contact Us</a>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </footer>
351
+
352
+ <!-- Content Locker Modal -->
353
+ <div id="contentLockerModal" class="modal fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 opacity-0 pointer-events-none">
354
+ <div class="modal-content bg-white rounded-xl w-full max-w-md mx-4 p-6 relative">
355
+ <button id="closeModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
356
+ <i class="fas fa-times"></i>
357
+ </button>
358
+
359
+ <div class="text-center">
360
+ <div class="w-16 h-16 mx-auto bg-nikeAccent rounded-full flex items-center justify-center mb-6">
361
+ <i class="fas fa-lock text-white text-2xl"></i>
362
+ </div>
363
+ <h3 class="text-2xl font-bold font-montserrat mb-4">Unlock Your Nike Coupons</h3>
364
+ <p class="text-gray-600 mb-6">Complete this quick step to access your exclusive Nike discounts</p>
365
+
366
+ <div id="step1" class="step">
367
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
368
+ <div class="flex items-center mb-3">
369
+ <div class="w-8 h-8 rounded-full bg-nikeAccent flex items-center justify-center text-white mr-3">
370
+ <i class="fas fa-1"></i>
371
+ </div>
372
+ <h4 class="font-semibold">Verify Your Email</h4>
373
+ </div>
374
+ <p class="text-sm text-gray-600">Enter your email address to receive your coupon codes</p>
375
+ </div>
376
+
377
+ <form id="emailForm" class="mb-4">
378
+ <div class="mb-4">
379
+ <input type="email" id="userEmail" placeholder="Enter your email address" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-nikeAccent">
380
+ </div>
381
+ <button type="submit" class="w-full bg-nikeAccent hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition">
382
+ VERIFY EMAIL
383
+ </button>
384
+ </form>
385
+
386
+ <p class="text-xs text-gray-500">We respect your privacy. Your information is secure and will not be shared.</p>
387
+ </div>
388
+
389
+ <div id="step2" class="step hidden">
390
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
391
+ <div class="flex items-center mb-3">
392
+ <div class="w-8 h-8 rounded-full bg-nikeAccent flex items-center justify-center text-white mr-3">
393
+ <i class="fas fa-2"></i>
394
+ </div>
395
+ <h4 class="font-semibold">Complete Verification</h4>
396
+ </div>
397
+ <p class="text-sm text-gray-600">Check your email for the verification code</p>
398
+ </div>
399
+
400
+ <form id="verificationForm" class="mb-4">
401
+ <div class="mb-4">
402
+ <input type="text" id="verificationCode" placeholder="Enter verification code" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-nikeAccent">
403
+ </div>
404
+ <button type="submit" class="w-full bg-nikeAccent hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition">
405
+ SUBMIT CODE
406
+ </button>
407
+ </form>
408
+
409
+ <p class="text-xs text-gray-500">Didn't receive the code? <a href="#" class="text-nikeAccent">Resend</a></p>
410
+ </div>
411
+
412
+ <div id="step3" class="step hidden">
413
+ <div class="flex justify-center mb-6">
414
+ <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
415
+ </div>
416
+ <h4 class="font-bold text-lg mb-2">Unlocking Your Coupons...</h4>
417
+ <p class="text-gray-600 mb-6">Please wait while we prepare your exclusive Nike discounts</p>
418
+ </div>
419
+
420
+ <div id="step4" class="step hidden">
421
+ <div class="w-16 h-16 mx-auto bg-green-500 rounded-full flex items-center justify-center mb-6">
422
+ <i class="fas fa-check text-white text-2xl"></i>
423
+ </div>
424
+ <h4 class="font-bold text-2xl mb-4 text-nikeAccent">Success!</h4>
425
+ <p class="text-gray-600 mb-6">Your coupons are ready! Redirecting to your exclusive offers...</p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <script>
432
+ // Countdown Timer
433
+ function updateCountdown() {
434
+ const now = new Date();
435
+ const targetDate = new Date();
436
+ targetDate.setDate(now.getDate() + 3);
437
+
438
+ const diff = targetDate - now;
439
+
440
+ const days = Math.floor(diff / (1000 * 60 * 60 * 24));
441
+ const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
442
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
443
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
444
+
445
+ document.getElementById('days').textContent = days.toString().padStart(2, '0');
446
+ document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
447
+ document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
448
+ document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
449
+ }
450
+
451
+ setInterval(updateCountdown, 1000);
452
+ updateCountdown();
453
+
454
+ // Modal functionality
455
+ const modal = document.getElementById('contentLockerModal');
456
+ const closeModal = document.getElementById('closeModal');
457
+ const getCouponsBtn = document.getElementById('getCouponsBtn');
458
+ const countdownBtn = document.getElementById('countdownBtn');
459
+ const finalCtaBtn = document.getElementById('finalCtaBtn');
460
+ const emailForm = document.getElementById('emailForm');
461
+ const verificationForm = document.getElementById('verificationForm');
462
+
463
+ function openModal() {
464
+ modal.classList.remove('opacity-0', 'pointer-events-none');
465
+ modal.classList.add('show');
466
+ document.body.style.overflow = 'hidden';
467
+ }
468
+
469
+ function closeModalFunc() {
470
+ modal.classList.remove('show');
471
+ modal.classList.add('opacity-0', 'pointer-events-none');
472
+ document.body.style.overflow = 'auto';
473
+ // Reset to step 1
474
+ document.getElementById('step1').classList.remove('hidden');
475
+ document.getElementById('step2').classList.add('hidden');
476
+ document.getElementById('step3').classList.add('hidden');
477
+ document.getElementById('step4').classList.add('hidden');
478
+ }
479
+
480
+ getCouponsBtn.addEventListener('click', openModal);
481
+ countdownBtn.addEventListener('click', openModal);
482
+ finalCtaBtn.addEventListener('click', openModal);
483
+ closeModal.addEventListener('click', closeModalFunc);
484
+
485
+ // Close modal when clicking outside
486
+ modal.addEventListener('click', (e) => {
487
+ if (e.target === modal) {
488
+ closeModalFunc();
489
+ }
490
+ });
491
+
492
+ // Form submission
493
+ emailForm.addEventListener('submit', (e) => {
494
+ e.preventDefault();
495
+ const email = document.getElementById('userEmail').value;
496
+ if (email && validateEmail(email)) {
497
+ document.getElementById('step1').classList.add('hidden');
498
+ document.getElementById('step2').classList.remove('hidden');
499
+ } else {
500
+ alert('Please enter a valid email address');
501
+ }
502
+ });
503
+
504
+ verificationForm.addEventListener('submit', (e) => {
505
+ e.preventDefault();
506
+ const code = document.getElementById('verificationCode').value;
507
+ if (code) {
508
+ document.getElementById('step2').classList.add('hidden');
509
+ document.getElementById('step3').classList.remove('hidden');
510
+
511
+ // Simulate processing
512
+ setTimeout(() => {
513
+ document.getElementById('step3').classList.add('hidden');
514
+ document.getElementById('step4').classList.remove('hidden');
515
+
516
+ // Redirect after a delay
517
+ setTimeout(() => {
518
+ // Replace with your actual CPA offer URL
519
+ window.location.href = 'https://example.com/cpa-offer';
520
+ }, 3000);
521
+ }, 2000);
522
+ } else {
523
+ alert('Please enter the verification code');
524
+ }
525
+ });
526
+
527
+ // Email validation
528
+ function validateEmail(email) {
529
+ const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
530
+ return re.test(String(email).toLowerCase());
531
+ }
532
+
533
+ // FAQ accordion
534
+ const faqHeaders = document.querySelectorAll('.cursor-pointer');
535
+ faqHeaders.forEach(header => {
536
+ header.addEventListener('click', () => {
537
+ const content = header.nextElementSibling;
538
+ content.classList.toggle('hidden');
539
+ const icon = header.querySelector('i');
540
+ icon.classList.toggle('fa-chevron-down');
541
+ icon.classList.toggle('fa-chevron-up');
542
+ });
543
+ });
544
+ </script>
545
+ <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=Saad4web/nike" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
546
+ </html>
547
+ good add a showcase of tool by ai or app grid
548
+ make it on top and also change text of all cta buttons