Hugging Face's logo

Spaces:
ido6969
/
top-up
Running

App Files Community
ido6969 commited on
Commit
2d693bf
·
verified ·
1 Parent(s): 7503899

buatkan aku game rpg 2dimensi berlatar belakang di abad pertengahan di negara timur tengah, dengan pemeran utama laki laki - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +663 -606
index.html CHANGED
@@ -3,662 +3,719 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>iDo Store - Game Top Up Center</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
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
 
12
  body {
13
- font-family: 'Poppins', sans-serif;
14
- background-color: #f8fafc;
 
 
 
 
15
  }
16
 
17
- .gradient-bg {
18
- background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
 
 
 
 
 
19
  }
20
 
21
- .game-card:hover {
22
- transform: translateY(-5px);
23
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 
 
 
 
24
  }
25
 
26
- .game-card {
27
- transition: all 0.3s ease;
 
 
 
 
28
  }
29
 
30
- .pulse {
31
- animation: pulse 2s infinite;
 
 
 
 
32
  }
33
 
34
- @keyframes pulse {
35
- 0% {
36
- transform: scale(1);
37
- }
38
- 50% {
39
- transform: scale(1.05);
40
- }
41
- 100% {
42
- transform: scale(1);
43
- }
 
 
 
 
 
 
 
 
 
 
44
  }
45
 
46
- .nav-link:hover::after {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  width: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  }
49
 
50
- .nav-link::after {
51
- content: '';
52
- display: block;
53
- width: 0;
54
- height: 2px;
55
- background: white;
56
- transition: width .3s;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  }
58
  </style>
59
  </head>
60
  <body>
61
- <!-- Header/Navigation -->
62
- <header class="gradient-bg text-white sticky top-0 z-50 shadow-lg">
63
- <div class="container mx-auto px-4 py-3">
64
- <div class="flex justify-between items-center">
65
- <div class="flex items-center space-x-2">
66
- <i class="fas fa-gamepad text-2xl"></i>
67
- <h1 class="text-2xl font-bold">iDo <span class="text-yellow-300">Store</span></h1>
68
- </div>
69
-
70
- <nav class="hidden md:flex space-x-8">
71
- <a href="#" class="nav-link font-medium">Home</a>
72
- <a href="#games" class="nav-link font-medium">Games</a>
73
- <a href="#payment" class="nav-link font-medium">Payment</a>
74
- <a href="#promo" class="nav-link font-medium">Promo</a>
75
- <a href="#testimonial" class="nav-link font-medium">Testimonial</a>
76
- <a href="#contact" class="nav-link font-medium">Contact</a>
77
- </nav>
78
-
79
- <div class="flex items-center space-x-4">
80
- <button class="p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
81
- <i class="fas fa-shopping-cart"></i>
82
- </button>
83
- <button class="p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
84
- <i class="fas fa-user"></i>
85
- </button>
86
- <button id="mobile-menu-button" class="md:hidden p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
87
- <i class="fas fa-bars"></i>
88
- </button>
89
- </div>
90
- </div>
91
-
92
- <!-- Mobile Menu -->
93
- <div id="mobile-menu" class="md:hidden hidden py-4">
94
- <div class="flex flex-col space-y-3">
95
- <a href="#" class="block py-2 px-4 rounded hover:bg-white hover:bg-opacity-10">Home</a>
96
- <a href="#games" class="block py-2 px-4 rounded hover:bg-white hover:bg-opacity-10">Games</a>
97
- <a href="#payment" class="block py-2 px-4 rounded hover:bg-white hover:bg-opacity-10">Payment</a>
98
- <a href="#promo" class="block py-2 px-4 rounded hover:bg-white hover:bg-opacity-10">Promo</a>
99
- <a href="#testimonial" class="block py-2 px-4 rounded hover:bg-white hover:bg-opacity-10">Testimonial</a>
100
- <a href="#contact" class="block py-2 px-4 rounded hover:bg-white hover:bg-opacity-10">Contact</a>
101
- </div>
102
- </div>
103
  </div>
104
- </header>
105
-
106
- <!-- Hero Section -->
107
- <section class="gradient-bg text-white py-16 md:py-24">
108
- <div class="container mx-auto px-4">
109
- <div class="flex flex-col md:flex-row items-center">
110
- <div class="md:w-1/2 mb-10 md:mb-0">
111
- <h1 class="text-4xl md:text-5xl font-bold mb-4">Top Up Game <span class="text-yellow-300">Murah & Cepat</span></h1>
112
- <p class="text-lg mb-6 opacity-90">Dapatkan diamond, voucher, dan item game favoritmu dengan harga terbaik dan proses instan!</p>
113
- <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
114
- <a href="#games" class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-6 rounded-lg text-center transition duration-300 transform hover:scale-105">
115
- Beli Sekarang
116
- </a>
117
- <a href="#promo" class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300 transform hover:scale-105">
118
- Lihat Promo
119
- </a>
120
- </div>
121
- </div>
122
- <div class="md:w-1/2 flex justify-center">
123
- <img src="https://cdn-icons-png.flaticon.com/512/3652/3652191.png" alt="Game Characters" class="w-full max-w-md pulse">
124
- </div>
125
- </div>
126
  </div>
127
- </section>
128
-
129
- <!-- Games Section -->
130
-
131
- <!-- Payment Section -->
132
- <section id="payment" class="py-16 bg-gray-50">
133
- <div class="container mx-auto px-4 max-w-3xl">
134
- <div class="bg-white rounded-xl shadow-lg overflow-hidden">
135
- <div class="gradient-bg text-white py-4 px-6">
136
- <h2 class="text-2xl font-bold">Pembayaran</h2>
137
- </div>
138
-
139
- <div class="p-6">
140
- <div class="mb-6 p-4 bg-gray-100 rounded-lg">
141
- <div class="flex justify-between items-center mb-2">
142
- <h3 class="font-bold">Mobile Legends Diamond</h3>
143
- <span class="text-purple-600 font-bold">Rp50.000</span>
144
- </div>
145
- <p class="text-sm text-gray-600">100 Diamond + Bonus 5 Diamond</p>
146
- </div>
147
-
148
- <form>
149
- <div class="mb-4">
150
- <label class="block text-gray-700 font-medium mb-2">ID Game</label>
151
- <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Masukkan ID Game">
152
- </div>
153
-
154
- <div class="mb-4">
155
- <label class="block text-gray-700 font-medium mb-2">Nickname</label>
156
- <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Masukkan Nickname">
157
- </div>
158
-
159
- <div class="mb-6">
160
- <label class="block text-gray-700 font-medium mb-2">Metode Pembayaran</label>
161
- <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
162
- <button type="button" class="p-3 border border-gray-300 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition">
163
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Old_Transfer_logo.svg/1200px-Old_Transfer_logo.svg.png" alt="Bank Transfer" class="h-6 mx-auto">
164
- </button>
165
- <button type="button" class="p-3 border border-gray-300 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition">
166
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Logo_dana_blue.svg/1200px-Logo_dana_blue.svg.png" alt="DANA" class="h-6 mx-auto">
167
- </button>
168
- <button type="button" class="p-3 border border-gray-300 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition">
169
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Logo_ovo_purple.svg/1200px-Logo_ovo_purple.svg.png" alt="OVO" class="h-6 mx-auto">
170
- </button>
171
- <button type="button" class="p-3 border border-gray-300 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition">
172
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Gopay_logo.svg/1200px-Gopay_logo.svg.png" alt="Gopay" class="h-6 mx-auto">
173
- </button>
174
- </div>
175
- </div>
176
-
177
- <div class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
178
- <h3 class="font-bold text-yellow-800 mb-2">Total Pembayaran</h3>
179
- <div class="flex justify-between items-center">
180
- <span class="text-gray-600">Subtotal</span>
181
- <span class="font-medium">Rp50.000</span>
182
- </div>
183
- <div class="flex justify-between items-center mt-1">
184
- <span class="text-gray-600">Biaya Admin</span>
185
- <span class="font-medium">Rp0</span>
186
- </div>
187
- <div class="flex justify-between items-center mt-3 pt-3 border-t border-yellow-200">
188
- <span class="font-bold">Total</span>
189
- <span class="text-xl font-bold text-purple-600">Rp50.000</span>
190
- </div>
191
- </div>
192
-
193
- <button type="submit" class="w-full gradient-bg text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition duration-300 transform hover:scale-105">
194
- Bayar Sekarang
195
- </button>
196
- </form>
197
- </div>
198
- </div>
199
  </div>
200
- </section>
201
- <section id="games" class="py-16 bg-white">
202
- <div class="container mx-auto px-4">
203
- <div class="text-center mb-12">
204
- <h2 class="text-3xl font-bold text-gray-800 mb-3">Game Populer</h2>
205
- <p class="text-gray-600 max-w-2xl mx-auto">Pilih game favoritmu dan top up dengan mudah di iDo Store</p>
206
- </div>
207
-
208
- <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
209
- <!-- Game 1 -->
210
- <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">
211
- <div class="p-4">
212
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Play_Books_logo_%282016-2021%29.svg/2048px-Google_Play_Books_logo_%282016-2021%29.svg.png" alt="Mobile Legends" class="w-full h-32 object-contain mb-4">
213
- <h3 class="font-bold text-lg text-gray-800 mb-2">Mobile Legends</h3>
214
- <div class="flex justify-between items-center">
215
- <span class="text-yellow-500 font-bold">Diamond</span>
216
- <span class="text-sm text-gray-600">Mulai Rp10.000</span>
217
- </div>
218
- </div>
219
- </div>
220
-
221
- <!-- Game 2 -->
222
- <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">
223
- <div class="p-4">
224
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Steam_icon_logo.svg/2048px-Steam_icon_logo.svg.png" alt="Free Fire" class="w-full h-32 object-contain mb-4">
225
- <h3 class="font-bold text-lg text-gray-800 mb-2">Free Fire</h3>
226
- <div class="flex justify-between items-center">
227
- <span class="text-yellow-500 font-bold">Diamond</span>
228
- <span class="text-sm text-gray-600">Mulai Rp5.000</span>
229
- </div>
230
- </div>
231
- </div>
232
-
233
- <!-- Game 3 -->
234
- <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">
235
- <div class="p-4">
236
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1024px-Facebook_Logo_%282019%29.png" alt="PUBG Mobile" class="w-full h-32 object-contain mb-4">
237
- <h3 class="font-bold text-lg text-gray-800 mb-2">PUBG Mobile</h3>
238
- <div class="flex justify-between items-center">
239
- <span class="text-yellow-500 font-bold">UC</span>
240
- <span class="text-sm text-gray-600">Mulai Rp12.000</span>
241
- </div>
242
- </div>
243
- </div>
244
-
245
- <!-- Game 4 -->
246
- <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">
247
- <div class="p-4">
248
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png" alt="Valorant" class="w-full h-32 object-contain mb-4">
249
- <h3 class="font-bold text-lg text-gray-800 mb-2">Valorant</h3>
250
- <div class="flex justify-between items-center">
251
- <span class="text-yellow-500 font-bold">Points</span>
252
- <span class="text-sm text-gray-600">Mulai Rp20.000</span>
253
- </div>
254
- </div>
255
- </div>
256
-
257
- <!-- Game 5 -->
258
- <div class="game-card bg-white rounded-xl shadow-md overflow-hidden cursor-pointer">
259
- <div class="p-4">
260
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Logo_of_Twitter.svg/2491px-Logo_of_Twitter.svg.png" alt="Genshin Impact" class="w-full h-32 object-contain mb-4">
261
- <h3 class="font-bold text-lg text-gray-800 mb-2">Genshin Impact</h3>
262
- <div class="flex justify-between items-center">
263
- <span class="text-yellow-500 font-bold">Genesis</span>
264
- <span class="text-sm text-gray-600">Mulai Rp15.000</span>
265
- </div>
266
- </div>
267
- </div>
268
- </div>
269
-
270
- <div class="text-center mt-10">
271
- <a href="#" class="inline-block border-2 border-purple-600 text-purple-600 font-bold py-2 px-6 rounded-full hover:bg-purple-600 hover:text-white transition duration-300">
272
- Lihat Semua Game
273
- </a>
274
- </div>
275
  </div>
276
- </section>
277
-
278
- <!-- How to Order Section -->
279
- <section class="py-16 bg-gray-50">
280
- <div class="container mx-auto px-4">
281
- <div class="text-center mb-12">
282
- <h2 class="text-3xl font-bold text-gray-800 mb-3">Cara Order di iDo Store</h2>
283
- <p class="text-gray-600 max-w-2xl mx-auto">Hanya 3 langkah mudah untuk mendapatkan item game favoritmu</p>
284
- </div>
285
-
286
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
287
- <div class="bg-white p-6 rounded-xl shadow-md text-center">
288
- <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
289
- <span class="text-purple-600 text-2xl font-bold">1</span>
290
- </div>
291
- <h3 class="font-bold text-xl mb-2">Pilih Game & Produk</h3>
292
- <p class="text-gray-600">Pilih game favoritmu dan item yang ingin kamu beli</p>
293
- </div>
294
-
295
- <div class="bg-white p-6 rounded-xl shadow-md text-center">
296
- <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
297
- <span class="text-purple-600 text-2xl font-bold">2</span>
298
- </div>
299
- <h3 class="font-bold text-xl mb-2">Masukkan ID Game</h3>
300
- <p class="text-gray-600">Masukkan ID game dan nickname kamu dengan benar</p>
301
- </div>
302
-
303
- <div class="bg-white p-6 rounded-xl shadow-md text-center">
304
- <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
305
- <span class="text-purple-600 text-2xl font-bold">3</span>
306
- </div>
307
- <h3 class="font-bold text-xl mb-2">Bayar & Selesai</h3>
308
- <p class="text-gray-600">Lakukan pembayaran dan item akan langsung masuk ke akunmu</p>
309
- </div>
310
- </div>
311
  </div>
312
- </section>
313
-
314
- <!-- Promo Section -->
315
- <section id="promo" class="py-16 bg-white">
316
- <div class="container mx-auto px-4">
317
- <div class="text-center mb-12">
318
- <h2 class="text-3xl font-bold text-gray-800 mb-3">Promo Spesial</h2>
319
- <p class="text-gray-600 max-w-2xl mx-auto">Diskon dan bonus menarik untuk pembelian pertama kamu</p>
320
- </div>
321
-
322
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
323
- <!-- Promo 1 -->
324
- <div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl shadow-lg overflow-hidden text-white">
325
- <div class="p-6">
326
- <div class="flex justify-between items-start mb-4">
327
- <div>
328
- <span class="bg-white bg-opacity-20 text-xs px-2 py-1 rounded">NEW USER</span>
329
- </div>
330
- <div class="text-right">
331
- <span class="text-xs opacity-80">Sampai 30 Juni</span>
332
- </div>
333
- </div>
334
- <h3 class="font-bold text-xl mb-2">Diskon 20% Pertama</h3>
335
- <p class="text-sm opacity-90 mb-4">Dapatkan diskon 20% untuk pembelian pertama di iDo Store dengan minimal pembelian Rp50.000</p>
336
- <button class="bg-white text-purple-600 font-bold py-2 px-4 rounded-full text-sm hover:bg-opacity-90 transition">Klaim Sekarang</button>
337
- </div>
338
- </div>
339
-
340
- <!-- Promo 2 -->
341
- <div class="bg-gradient-to-r from-blue-500 to-teal-400 rounded-xl shadow-lg overflow-hidden text-white">
342
- <div class="p-6">
343
- <div class="flex justify-between items-start mb-4">
344
- <div>
345
- <span class="bg-white bg-opacity-20 text-xs px-2 py-1 rounded">BONUS</span>
346
- </div>
347
- <div class="text-right">
348
- <span class="text-xs opacity-80">Sampai 15 Juli</span>
349
- </div>
350
- </div>
351
- <h3 class="font-bold text-xl mb-2">Bonus 10% Setiap Hari</h3>
352
- <p class="text-sm opacity-90 mb-4">Dapatkan bonus tambahan 10% untuk semua produk Mobile Legends setiap hari jam 12-14 WIB</p>
353
- <button class="bg-white text-blue-600 font-bold py-2 px-4 rounded-full text-sm hover:bg-opacity-90 transition">Klaim Sekarang</button>
354
- </div>
355
- </div>
356
-
357
- <!-- Promo 3 -->
358
- <div class="bg-gradient-to-r from-orange-500 to-yellow-400 rounded-xl shadow-lg overflow-hidden text-white">
359
- <div class="p-6">
360
- <div class="flex justify-between items-start mb-4">
361
- <div>
362
- <span class="bg-white bg-opacity-20 text-xs px-2 py-1 rounded">CASHBACK</span>
363
- </div>
364
- <div class="text-right">
365
- <span class="text-xs opacity-80">Sampai 31 Juli</span>
366
- </div>
367
- </div>
368
- <h3 class="font-bold text-xl mb-2">Cashback 15%</h3>
369
- <p class="text-sm opacity-90 mb-4">Dapatkan cashback 15% untuk pembelian produk Free Fire dengan minimal pembelian Rp100.000</p>
370
- <button class="bg-white text-orange-600 font-bold py-2 px-4 rounded-full text-sm hover:bg-opacity-90 transition">Klaim Sekarang</button>
371
- </div>
372
  </div>
373
  </div>
 
 
374
  </div>
375
- </section>
376
 
377
- <!-- Testimonial Section -->
378
- <section id="testimonial" class="py-16 bg-gray-50">
379
- <div class="container mx-auto px-4">
380
- <div class="text-center mb-12">
381
- <h2 class="text-3xl font-bold text-gray-800 mb-3">Apa Kata Mereka?</h2>
382
- <p class="text-gray-600 max-w-2xl mx-auto">Testimonial dari pelanggan setia iDo Store</p>
383
- </div>
384
-
385
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
386
- <!-- Testimonial 1 -->
387
- <div class="bg-white p-6 rounded-xl shadow-md">
388
- <div class="flex items-center mb-4">
389
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full object-cover mr-4">
390
- <div>
391
- <h4 class="font-bold">Sarah Wijaya</h4>
392
- <div class="flex text-yellow-400 text-sm">
393
- <i class="fas fa-star"></i>
394
- <i class="fas fa-star"></i>
395
- <i class="fas fa-star"></i>
396
- <i class="fas fa-star"></i>
397
- <i class="fas fa-star"></i>
398
- </div>
399
- </div>
400
- </div>
401
- <p class="text-gray-600">"Prosesnya cepat banget! Baru bayar 5 menit langsung masuk diamondnya. Bakal beli lagi di sini."</p>
402
- </div>
403
-
404
- <!-- Testimonial 2 -->
405
- <div class="bg-white p-6 rounded-xl shadow-md">
406
- <div class="flex items-center mb-4">
407
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full object-cover mr-4">
408
- <div>
409
- <h4 class="font-bold">Budi Santoso</h4>
410
- <div class="flex text-yellow-400 text-sm">
411
- <i class="fas fa-star"></i>
412
- <i class="fas fa-star"></i>
413
- <i class="fas fa-star"></i>
414
- <i class="fas fa-star"></i>
415
- <i class="fas fa-star-half-alt"></i>
416
- </div>
417
- </div>
418
- </div>
419
- <p class="text-gray-600">"Harganya lebih murah dibanding tempat lain. CS-nya juga ramah dan responsif. Recommended!"</p>
420
- </div>
421
-
422
- <!-- Testimonial 3 -->
423
- <div class="bg-white p-6 rounded-xl shadow-md">
424
- <div class="flex items-center mb-4">
425
- <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-12 h-12 rounded-full object-cover mr-4">
426
- <div>
427
- <h4 class="font-bold">Dewi Anggraeni</h4>
428
- <div class="flex text-yellow-400 text-sm">
429
- <i class="fas fa-star"></i>
430
- <i class="fas fa-star"></i>
431
- <i class="fas fa-star"></i>
432
- <i class="fas fa-star"></i>
433
- <i class="fas fa-star"></i>
434
- </div>
435
- </div>
436
- </div>
437
- <p class="text-gray-600">"Pertama kali coba dapat diskon 20%. UC PUBG langsung masuk kurang dari 10 menit. Puas banget!"</p>
438
- </div>
439
- </div>
440
- </div>
441
- </section>
442
 
443
- <!-- Payment Methods -->
444
- <section class="py-12 bg-white">
445
- <div class="container mx-auto px-4">
446
- <div class="text-center mb-8">
447
- <h2 class="text-2xl font-bold text-gray-800 mb-2">Metode Pembayaran</h2>
448
- <p class="text-gray-600">Berbagai pilihan metode pembayaran yang mudah</p>
449
- </div>
450
-
451
- <div class="flex flex-wrap justify-center gap-6">
452
- <div class="bg-gray-100 p-4 rounded-lg w-24 flex items-center justify-center">
453
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Old_Transfer_logo.svg/1200px-Old_Transfer_logo.svg.png" alt="Bank Transfer" class="h-10">
454
- </div>
455
- <div class="bg-gray-100 p-4 rounded-lg w-24 flex items-center justify-center">
456
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Logo_dana_blue.svg/1200px-Logo_dana_blue.svg.png" alt="DANA" class="h-10">
457
- </div>
458
- <div class="bg-gray-100 p-4 rounded-lg w-24 flex items-center justify-center">
459
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Logo_ovo_purple.svg/1200px-Logo_ovo_purple.svg.png" alt="OVO" class="h-10">
460
- </div>
461
- <div class="bg-gray-100 p-4 rounded-lg w-24 flex items-center justify-center">
462
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Gopay_logo.svg/1200px-Gopay_logo.svg.png" alt="Gopay" class="h-10">
463
- </div>
464
- <div class="bg-gray-100 p-4 rounded-lg w-24 flex items-center justify-center">
465
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/ShopeePay_logo.svg/1200px-ShopeePay_logo.svg.png" alt="ShopeePay" class="h-10">
466
- </div>
467
- <div class="bg-gray-100 p-4 rounded-lg w-24 flex items-center justify-center">
468
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/LinkAja.svg/1200px-LinkAja.svg.png" alt="LinkAja" class="h-10">
469
- </div>
470
- </div>
471
- </div>
472
- </section>
473
 
474
- <!-- Contact Section -->
475
- <section id="contact" class="py-16 bg-gray-800 text-white">
476
- <div class="container mx-auto px-4">
477
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
478
- <div>
479
- <h2 class="text-3xl font-bold mb-6">Hubungi Kami</h2>
480
- <p class="text-gray-300 mb-6">Punya pertanyaan atau kendala? Tim support kami siap membantu 24/7.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
481
 
482
- <div class="space-y-4">
483
- <div class="flex items-start">
484
- <i class="fas fa-envelope text-purple-400 mt-1 mr-4"></i>
485
- <div>
486
- <h4 class="font-bold">Email</h4>
487
- <p class="text-gray-300">support@idostore.com</p>
488
- </div>
489
- </div>
490
-
491
- <div class="flex items-start">
492
- <i class="fas fa-phone-alt text-purple-400 mt-1 mr-4"></i>
493
- <div>
494
- <h4 class="font-bold">Telepon</h4>
495
- <p class="text-gray-300">+62 812-3456-7890</p>
496
- </div>
497
- </div>
498
-
499
- <div class="flex items-start">
500
- <i class="fab fa-whatsapp text-purple-400 mt-1 mr-4"></i>
501
- <div>
502
- <h4 class="font-bold">WhatsApp</h4>
503
- <p class="text-gray-300">+62 812-3456-7890</p>
504
- </div>
505
- </div>
506
- </div>
507
 
508
- <div class="mt-8">
509
- <h4 class="font-bold mb-4">Follow Kami</h4>
510
- <div class="flex space-x-4">
511
- <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-purple-600 transition">
512
- <i class="fab fa-facebook-f"></i>
513
- </a>
514
- <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-purple-600 transition">
515
- <i class="fab fa-instagram"></i>
516
- </a>
517
- <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-purple-600 transition">
518
- <i class="fab fa-twitter"></i>
519
- </a>
520
- <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-purple-600 transition">
521
- <i class="fab fa-youtube"></i>
522
- </a>
523
- </div>
524
- </div>
525
- </div>
526
-
527
- <div>
528
- <h3 class="text-2xl font-bold mb-6">Kirim Pesan</h3>
529
- <form>
530
- <div class="mb-4">
531
- <label for="name" class="block text-gray-300 mb-2">Nama Lengkap</label>
532
- <input type="text" id="name" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-purple-500">
533
- </div>
534
-
535
- <div class="mb-4">
536
- <label for="email" class="block text-gray-300 mb-2">Email</label>
537
- <input type="email" id="email" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-purple-500">
538
- </div>
539
 
540
- <div class="mb-4">
541
- <label for="message" class="block text-gray-300 mb-2">Pesan</label>
542
- <textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-purple-500"></textarea>
543
- </div>
544
-
545
- <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded transition duration-300">
546
- Kirim Pesan
547
- </button>
548
- </form>
549
- </div>
550
- </div>
551
- </div>
552
- </section>
553
-
554
- <!-- Footer -->
555
- <footer class="bg-gray-900 text-gray-400 py-8">
556
- <div class="container mx-auto px-4">
557
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
558
- <div>
559
- <div class="flex items-center space-x-2 mb-4">
560
- <i class="fas fa-gamepad text-2xl text-purple-500"></i>
561
- <h3 class="text-xl font-bold text-white">iDo <span class="text-yellow-300">Store</span></h3>
562
- </div>
563
- <p class="mb-4">Platform top up game terpercaya dengan harga termurah dan proses tercepat.</p>
564
- <p>© 2023 iDo Store. All rights reserved.</p>
565
- </div>
566
-
567
- <div>
568
- <h4 class="text-white font-bold mb-4">Layanan</h4>
569
- <ul class="space-y-2">
570
- <li><a href="#" class="hover:text-white transition">Mobile Legends</a></li>
571
- <li><a href="#" class="hover:text-white transition">Free Fire</a></li>
572
- <li><a href="#" class="hover:text-white transition">PUBG Mobile</a></li>
573
- <li><a href="#" class="hover:text-white transition">Valorant</a></li>
574
- <li><a href="#" class="hover:text-white transition">Genshin Impact</a></li>
575
- </ul>
576
- </div>
577
-
578
- <div>
579
- <h4 class="text-white font-bold mb-4">Bantuan</h4>
580
- <ul class="space-y-2">
581
- <li><a href="#" class="hover:text-white transition">Cara Order</a></li>
582
- <li><a href="#" class="hover:text-white transition">Pembayaran</a></li>
583
- <li><a href="#" class="hover:text-white transition">FAQ</a></li>
584
- <li><a href="#" class="hover:text-white transition">Syarat & Ketentuan</a></li>
585
- <li><a href="#" class="hover:text-white transition">Kebijakan Privasi</a></li>
586
- </ul>
587
- </div>
588
-
589
- <div>
590
- <h4 class="text-white font-bold mb-4">Newsletter</h4>
591
- <p class="mb-4">Dapatkan info promo dan diskon spesial langsung ke email kamu.</p>
592
- <form class="flex">
593
- <input type="email" placeholder="Email kamu" class="px-4 py-2 rounded-l bg-gray-800 border border-gray-700 focus:outline-none focus:border-purple-500 w-full">
594
- <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-4 rounded-r">
595
- <i class="fas fa-paper-plane"></i>
596
- </button>
597
- </form>
598
- </div>
599
- </div>
600
 
601
- <div class="border-t border-gray-800 mt-8 pt-8 text-center">
602
- <p>Made with <i class="fas fa-heart text-red-500"></i> by iDo Store Team</p>
603
- </div>
604
- </div>
605
- </footer>
606
-
607
- <!-- Back to Top Button -->
608
- <button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-purple-600 text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
609
- <i class="fas fa-arrow-up"></i>
610
- </button>
611
-
612
- <script>
613
- // Mobile Menu Toggle
614
- const mobileMenuButton = document.getElementById('mobile-menu-button');
615
- const mobileMenu = document.getElementById('mobile-menu');
616
 
617
- mobileMenuButton.addEventListener('click', () => {
618
- mobileMenu.classList.toggle('hidden');
619
- });
 
 
 
 
 
 
 
 
 
 
620
 
621
- // Back to Top Button
622
- const backToTopButton = document.getElementById('back-to-top');
 
 
 
 
 
623
 
624
- window.addEventListener('scroll', () => {
625
- if (window.pageYOffset > 300) {
626
- backToTopButton.classList.remove('opacity-0', 'invisible');
627
- backToTopButton.classList.add('opacity-100', 'visible');
 
628
  } else {
629
- backToTopButton.classList.remove('opacity-100', 'visible');
630
- backToTopButton.classList.add('opacity-0', 'invisible');
631
  }
632
- });
633
 
634
- backToTopButton.addEventListener('click', () => {
635
- window.scrollTo({
636
- top: 0,
637
- behavior: 'smooth'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
638
  });
639
- });
640
 
641
- // Smooth scrolling for anchor links
642
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
643
- anchor.addEventListener('click', function(e) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
644
  e.preventDefault();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
645
 
646
- const targetId = this.getAttribute('href');
647
- if (targetId === '#') return;
 
 
 
 
 
 
 
 
 
 
 
 
648
 
649
- const targetElement = document.querySelector(targetId);
650
- if (targetElement) {
651
- targetElement.scrollIntoView({
652
- behavior: 'smooth'
653
- });
 
 
 
 
 
 
 
654
 
655
- // Close mobile menu if open
656
- if (!mobileMenu.classList.contains('hidden')) {
657
- mobileMenu.classList.add('hidden');
658
  }
659
- }
660
- });
661
- });
662
- </script>
 
 
 
 
 
 
663
  <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=ido6969/top-up" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
664
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Desert Warrior: Sands of Fate</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Almendra+SC&family=Cinzel+Decorative&display=swap');
10
 
11
  body {
12
+ font-family: 'Almendra SC', serif;
13
+ background-color: #111;
14
+ color: #d4af37;
15
+ overflow: hidden;
16
+ touch-action: none;
17
+ user-select: none;
18
  }
19
 
20
+ #game-container {
21
+ position: relative;
22
+ width: 100vw;
23
+ height: 100vh;
24
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231a120b"/><path d="M0,50 Q25,40 50,50 T100,50" stroke="%233d2b1f" fill="none" stroke-width="2"/><path d="M0,70 Q25,60 50,70 T100,70" stroke="%233d2b1f" fill="none" stroke-width="2"/><path d="M0,30 Q25,20 50,30 T100,30" stroke="%233d2b1f" fill="none" stroke-width="2"/></svg>');
25
+ background-size: cover;
26
+ overflow: hidden;
27
  }
28
 
29
+ #player {
30
+ position: absolute;
31
+ width: 64px;
32
+ height: 64px;
33
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect x="24" y="40" width="16" height="24" fill="%233d2b1f"/><circle cx="32" cy="24" r="12" fill="%238B4513"/><rect x="20" y="20" width="24" height="20" fill="%23d4af37" rx="2"/><path d="M16,28 L8,36 M48,28 L56,36" stroke="%233d2b1f" stroke-width="4"/><path d="M32,24 L32,16" stroke="%233d2b1f" stroke-width="2"/></svg>');
34
+ z-index: 10;
35
+ transition: transform 0.2s;
36
  }
37
 
38
+ .npc {
39
+ position: absolute;
40
+ width: 64px;
41
+ height: 64px;
42
+ background-size: contain;
43
+ z-index: 9;
44
  }
45
 
46
+ .enemy {
47
+ position: absolute;
48
+ width: 64px;
49
+ height: 64px;
50
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect x="24" y="40" width="16" height="24" fill="%23222222"/><circle cx="32" cy="24" r="12" fill="%23333"/><rect x="20" y="20" width="24" height="20" fill="%23772222" rx="2"/><path d="M16,28 L8,36 M48,28 L56,36" stroke="%23222" stroke-width="4"/><path d="M32,24 L32,16" stroke="%23222" stroke-width="2" stroke-linecap="round"/></svg>');
51
+ z-index: 8;
52
  }
53
 
54
+ .building {
55
+ position: absolute;
56
+ background-color: #3d2b1f;
57
+ border: 2px solid #d4af37;
58
+ z-index: 5;
59
+ }
60
+
61
+ .market-stall {
62
+ position: absolute;
63
+ background-color: #5e3c23;
64
+ border: 1px solid #d4af37;
65
+ z-index: 6;
66
+ }
67
+
68
+ .palm-tree {
69
+ position: absolute;
70
+ width: 48px;
71
+ height: 80px;
72
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="80" viewBox="0 0 48 80"><rect x="20" y="40" width="8" height="40" fill="%235e3c23"/><path d="M24,40 Q-10,20 24,0 Q50,20 24,40" fill="%23007040"/></svg>');
73
+ z-index: 7;
74
  }
75
 
76
+ .dialog-box {
77
+ position: absolute;
78
+ bottom: 20px;
79
+ left: 50%;
80
+ transform: translateX(-50%);
81
+ width: 80%;
82
+ max-width: 600px;
83
+ background-color: rgba(26, 18, 11, 0.9);
84
+ border: 2px solid #d4af37;
85
+ padding: 15px;
86
+ border-radius: 5px;
87
+ z-index: 100;
88
+ display: none;
89
+ }
90
+
91
+ .health-bar {
92
+ position: absolute;
93
+ top: 10px;
94
+ left: 10px;
95
+ width: 200px;
96
+ height: 20px;
97
+ background-color: #3d2b1f;
98
+ border: 1px solid #d4af37;
99
+ z-index: 100;
100
+ }
101
+
102
+ .health-fill {
103
+ height: 100%;
104
  width: 100%;
105
+ background-color: #a52a2a;
106
+ transition: width 0.3s;
107
+ }
108
+
109
+ .inventory {
110
+ position: absolute;
111
+ top: 10px;
112
+ right: 10px;
113
+ background-color: rgba(26, 18, 11, 0.8);
114
+ border: 1px solid #d4af37;
115
+ padding: 5px;
116
+ z-index: 100;
117
+ }
118
+
119
+ .item {
120
+ display: inline-block;
121
+ width: 32px;
122
+ height: 32px;
123
+ margin: 2px;
124
+ background-color: #3d2b1f;
125
+ border: 1px solid #d4af37;
126
+ text-align: center;
127
+ line-height: 30px;
128
  }
129
 
130
+ .attack-animation {
131
+ position: absolute;
132
+ width: 40px;
133
+ height: 40px;
134
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20,0 L40,20 L20,40 L0,20 Z" fill="%23d4af37" opacity="0.7"/></svg>');
135
+ background-size: contain;
136
+ z-index: 11;
137
+ animation: spin 0.5s linear;
138
+ }
139
+
140
+ @keyframes spin {
141
+ from { transform: rotate(0deg) scale(0.5); opacity: 1; }
142
+ to { transform: rotate(360deg) scale(1.5); opacity: 0; }
143
+ }
144
+
145
+ #controls {
146
+ position: absolute;
147
+ bottom: 20px;
148
+ right: 20px;
149
+ z-index: 100;
150
+ }
151
+
152
+ .control-btn {
153
+ width: 50px;
154
+ height: 50px;
155
+ background-color: rgba(26, 18, 11, 0.7);
156
+ border: 1px solid #d4af37;
157
+ color: #d4af37;
158
+ border-radius: 50%;
159
+ margin: 5px;
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: center;
163
+ font-size: 24px;
164
+ cursor: pointer;
165
+ }
166
+
167
+ #quest-log {
168
+ position: absolute;
169
+ top: 40px;
170
+ left: 10px;
171
+ background-color: rgba(26, 18, 11, 0.8);
172
+ border: 1px solid #d4af37;
173
+ padding: 5px;
174
+ max-width: 200px;
175
+ z-index: 100;
176
+ display: none;
177
+ }
178
+
179
+ #map {
180
+ position: absolute;
181
+ bottom: 20px;
182
+ left: 20px;
183
+ width: 150px;
184
+ height: 150px;
185
+ background-color: rgba(26, 18, 11, 0.7);
186
+ border: 1px solid #d4af37;
187
+ z-index: 100;
188
+ }
189
+
190
+ #map-player {
191
+ position: absolute;
192
+ width: 6px;
193
+ height: 6px;
194
+ background-color: #d4af37;
195
+ border-radius: 50%;
196
  }
197
  </style>
198
  </head>
199
  <body>
200
+ <div id="game-container">
201
+ <div id="player"></div>
202
+
203
+ <div class="health-bar">
204
+ <div id="health-fill" class="health-fill"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
205
  </div>
206
+
207
+ <div class="inventory">
208
+ <div class="item">⚔️</div>
209
+ <div class="item">🛡️</div>
210
+ <div class="item">💊</div>
211
+ <div class="item">💰</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
  </div>
213
+
214
+ <div id="quest-log">
215
+ <h3 class="text-lg font-bold border-b border-amber-700 mb-2">Quests</h3>
216
+ <div id="quest-1" class="text-sm mb-1">✔️ Find the missing caravan</div>
217
+ <div id="quest-2" class="text-sm mb-1">❌ Defeat the desert raiders</div>
218
+ <div id="quest-3" class="text-sm">❌ Recover the stolen artifact</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
219
  </div>
220
+
221
+ <div id="map">
222
+ <div id="map-player"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  </div>
224
+
225
+ <div class="dialog-box" id="dialog-box">
226
+ <p id="dialog-text"></p>
227
+ <button id="dialog-next" class="mt-2 px-3 py-1 bg-amber-700 text-amber-100 rounded">Next</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
  </div>
229
+
230
+ <div id="controls" class="hidden md:flex">
231
+ <div class="flex flex-col items-center">
232
+ <div class="control-btn" id="up-btn">↑</div>
233
+ <div class="flex">
234
+ <div class="control-btn" id="left-btn">←</div>
235
+ <div class="control-btn" id="down-btn">↓</div>
236
+ <div class="control-btn" id="right-btn">→</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </div>
238
  </div>
239
+ <div class="control-btn" id="attack-btn">⚔️</div>
240
+ <div class="control-btn" id="menu-btn">≡</div>
241
  </div>
242
+ </div>
243
 
244
+ <script>
245
+ // Game state
246
+ const gameState = {
247
+ player: {
248
+ x: 400,
249
+ y: 300,
250
+ health: 100,
251
+ maxHealth: 100,
252
+ attackPower: 15,
253
+ direction: 'down',
254
+ moving: false,
255
+ inventory: ['sword', 'shield', 'potion', 'gold'],
256
+ quests: {
257
+ findCaravan: { completed: true },
258
+ defeatRaiders: { completed: false },
259
+ recoverArtifact: { completed: false }
260
+ }
261
+ },
262
+ npcs: [],
263
+ enemies: [],
264
+ buildings: [],
265
+ marketStalls: [],
266
+ palmTrees: [],
267
+ currentDialog: null,
268
+ dialogIndex: 0,
269
+ gameWidth: window.innerWidth,
270
+ gameHeight: window.innerHeight,
271
+ worldWidth: 2000,
272
+ worldHeight: 2000
273
+ };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
274
 
275
+ // DOM elements
276
+ const playerElement = document.getElementById('player');
277
+ const healthFill = document.getElementById('health-fill');
278
+ const dialogBox = document.getElementById('dialog-box');
279
+ const dialogText = document.getElementById('dialog-text');
280
+ const dialogNext = document.getElementById('dialog-next');
281
+ const questLog = document.getElementById('quest-log');
282
+ const mapPlayer = document.getElementById('map-player');
283
+
284
+ // Control buttons
285
+ const upBtn = document.getElementById('up-btn');
286
+ const downBtn = document.getElementById('down-btn');
287
+ const leftBtn = document.getElementById('left-btn');
288
+ const rightBtn = document.getElementById('right-btn');
289
+ const attackBtn = document.getElementById('attack-btn');
290
+ const menuBtn = document.getElementById('menu-btn');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
 
292
+ // Initialize game
293
+ function initGame() {
294
+ // Set player initial position
295
+ updatePlayerPosition();
296
+ updateHealthBar();
297
+
298
+ // Generate world
299
+ generateWorld();
300
+
301
+ // Set up controls
302
+ setupControls();
303
+
304
+ // Start game loop
305
+ requestAnimationFrame(gameLoop);
306
+
307
+ // Show initial dialog
308
+ showDialog([
309
+ "Welcome to Desert Warrior: Sands of Fate",
310
+ "You are Amir, a warrior from the ancient city of Al'Rashid.",
311
+ "The city has been attacked by desert raiders who stole a sacred artifact.",
312
+ "Your quest is to track down the raiders and recover the artifact.",
313
+ "Use the controls to move and attack enemies.",
314
+ "Good luck, warrior!"
315
+ ]);
316
+ }
317
+
318
+ // Generate game world
319
+ function generateWorld() {
320
+ // Create buildings
321
+ createBuilding(300, 200, 150, 200); // Mosque
322
+ createBuilding(600, 250, 200, 150); // Palace
323
+ createBuilding(800, 400, 120, 180); // House
324
+
325
+ // Create market stalls
326
+ createMarketStall(500, 500);
327
+ createMarketStall(550, 500);
328
+ createMarketStall(500, 550);
329
+ createMarketStall(550, 550);
330
+
331
+ // Create palm trees
332
+ createPalmTree(200, 400);
333
+ createPalmTree(250, 450);
334
+ createPalmTree(700, 300);
335
+ createPalmTree(900, 500);
336
+
337
+ // Create NPCs
338
+ createNPC(520, 520, "merchant", [
339
+ "Welcome to my humble stall, warrior.",
340
+ "I sell the finest silks and spices in all of Al'Rashid.",
341
+ "Perhaps you'd like to browse my wares?"
342
+ ]);
343
+
344
+ createNPC(350, 250, "imam", [
345
+ "Peace be upon you, my son.",
346
+ "The raiders have desecrated our sacred mosque.",
347
+ "May Allah guide you in your quest for justice."
348
+ ]);
349
+
350
+ // Create enemies
351
+ createEnemy(700, 700);
352
+ createEnemy(750, 650);
353
+ createEnemy(800, 700);
354
+ }
355
+
356
+ // Create a building
357
+ function createBuilding(x, y, width, height) {
358
+ const building = document.createElement('div');
359
+ building.className = 'building';
360
+ building.style.left = `${x}px`;
361
+ building.style.top = `${y}px`;
362
+ building.style.width = `${width}px`;
363
+ building.style.height = `${height}px`;
364
+ document.getElementById('game-container').appendChild(building);
365
+
366
+ gameState.buildings.push({ x, y, width, height, element: building });
367
+ }
368
+
369
+ // Create a market stall
370
+ function createMarketStall(x, y) {
371
+ const stall = document.createElement('div');
372
+ stall.className = 'market-stall';
373
+ stall.style.left = `${x}px`;
374
+ stall.style.top = `${y}px`;
375
+ stall.style.width = '40px';
376
+ stall.style.height = '40px';
377
+ document.getElementById('game-container').appendChild(stall);
378
+
379
+ gameState.marketStalls.push({ x, y, element: stall });
380
+ }
381
+
382
+ // Create a palm tree
383
+ function createPalmTree(x, y) {
384
+ const tree = document.createElement('div');
385
+ tree.className = 'palm-tree';
386
+ tree.style.left = `${x}px`;
387
+ tree.style.top = `${y}px`;
388
+ document.getElementById('game-container').appendChild(tree);
389
+
390
+ gameState.palmTrees.push({ x, y, element: tree });
391
+ }
392
+
393
+ // Create an NPC
394
+ function createNPC(x, y, type, dialog) {
395
+ const npc = document.createElement('div');
396
+ npc.className = 'npc';
397
+
398
+ // Different visuals for different NPC types
399
+ if (type === 'merchant') {
400
+ npc.style.backgroundImage = 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect x="24" y="40" width="16" height="24" fill="%23404080"/><circle cx="32" cy="24" r="12" fill="%238080c0"/><rect x="20" y="20" width="24" height="20" fill="%238080c0" rx="2"/><path d="M16,28 L8,36 M48,28 L56,36" stroke="%23404080" stroke-width="4"/><path d="M32,24 L32,16" stroke="%23404080" stroke-width="2"/></svg>\')';
401
+ } else if (type === 'imam') {
402
+ npc.style.backgroundImage = 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect x="24" y="40" width="16" height="24" fill="%23ffffff"/><circle cx="32" cy="24" r="12" fill="%23ffffff"/><rect x="20" y="20" width="24" height="20" fill="%23ffffff" rx="2"/><path d="M16,28 L8,36 M48,28 L56,36" stroke="%23ffffff" stroke-width="4"/><path d="M32,24 L32,16" stroke="%23ffffff" stroke-width="2"/></svg>\')';
403
+ }
404
+
405
+ npc.style.left = `${x}px`;
406
+ npc.style.top = `${y}px`;
407
+ document.getElementById('game-container').appendChild(npc);
408
+
409
+ gameState.npcs.push({
410
+ x,
411
+ y,
412
+ type,
413
+ dialog,
414
+ element: npc,
415
+ interact: function() {
416
+ showDialog(this.dialog);
417
+ }
418
+ });
419
+
420
+ // Make NPC clickable
421
+ npc.addEventListener('click', function() {
422
+ gameState.npcs.find(n => n.element === this).interact();
423
+ });
424
+ }
425
+
426
+ // Create an enemy
427
+ function createEnemy(x, y) {
428
+ const enemy = document.createElement('div');
429
+ enemy.className = 'enemy';
430
+ enemy.style.left = `${x}px`;
431
+ enemy.style.top = `${y}px`;
432
+ document.getElementById('game-container').appendChild(enemy);
433
+
434
+ gameState.enemies.push({
435
+ x,
436
+ y,
437
+ health: 30,
438
+ element: enemy,
439
+ update: function() {
440
+ // Simple AI: move toward player if within 300px
441
+ const dx = gameState.player.x - this.x;
442
+ const dy = gameState.player.y - this.y;
443
+ const distance = Math.sqrt(dx * dx + dy * dy);
444
 
445
+ if (distance < 300 && distance > 50) {
446
+ this.x += dx / distance * 2;
447
+ this.y += dy / distance * 2;
448
+ this.element.style.left = `${this.x}px`;
449
+ this.element.style.top = `${this.y}px`;
450
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
451
 
452
+ // Check collision with player
453
+ if (distance < 40 && Math.random() < 0.02) {
454
+ gameState.player.health -= 5;
455
+ updateHealthBar();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
456
 
457
+ if (gameState.player.health <= 0) {
458
+ showDialog(["You have been defeated!", "The raiders have overpowered you.", "Press OK to restart the game."]);
459
+ gameState.player.health = gameState.player.maxHealth;
460
+ updateHealthBar();
461
+ }
462
+ }
463
+ }
464
+ });
465
+ }
466
+
467
+ // Update player position on screen
468
+ function updatePlayerPosition() {
469
+ playerElement.style.left = `${gameState.player.x}px`;
470
+ playerElement.style.top = `${gameState.player.y}px`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
471
 
472
+ // Update minimap player position
473
+ const mapX = (gameState.player.x / gameState.worldWidth) * 150;
474
+ const mapY = (gameState.player.y / gameState.worldHeight) * 150;
475
+ mapPlayer.style.left = `${mapX}px`;
476
+ mapPlayer.style.top = `${mapY}px`;
477
+ }
 
 
 
 
 
 
 
 
 
478
 
479
+ // Update health bar
480
+ function updateHealthBar() {
481
+ const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100;
482
+ healthFill.style.width = `${healthPercent}%`;
483
+
484
+ if (healthPercent < 30) {
485
+ healthFill.style.backgroundColor = '#ff0000';
486
+ } else if (healthPercent < 70) {
487
+ healthFill.style.backgroundColor = '#ffa500';
488
+ } else {
489
+ healthFill.style.backgroundColor = '#a52a2a';
490
+ }
491
+ }
492
 
493
+ // Show dialog
494
+ function showDialog(messages) {
495
+ gameState.currentDialog = messages;
496
+ gameState.dialogIndex = 0;
497
+ dialogText.textContent = messages[0];
498
+ dialogBox.style.display = 'block';
499
+ }
500
 
501
+ // Next dialog
502
+ function nextDialog() {
503
+ gameState.dialogIndex++;
504
+ if (gameState.dialogIndex < gameState.currentDialog.length) {
505
+ dialogText.textContent = gameState.currentDialog[gameState.dialogIndex];
506
  } else {
507
+ dialogBox.style.display = 'none';
 
508
  }
509
+ }
510
 
511
+ // Player attack
512
+ function playerAttack() {
513
+ // Create attack animation
514
+ const attack = document.createElement('div');
515
+ attack.className = 'attack-animation';
516
+
517
+ // Position based on player direction
518
+ let attackX = gameState.player.x;
519
+ let attackY = gameState.player.y;
520
+
521
+ switch (gameState.player.direction) {
522
+ case 'up':
523
+ attackY -= 40;
524
+ break;
525
+ case 'down':
526
+ attackY += 40;
527
+ break;
528
+ case 'left':
529
+ attackX -= 40;
530
+ break;
531
+ case 'right':
532
+ attackX += 40;
533
+ break;
534
+ }
535
+
536
+ attack.style.left = `${attackX}px`;
537
+ attack.style.top = `${attackY}px`;
538
+ document.getElementById('game-container').appendChild(attack);
539
+
540
+ // Remove after animation
541
+ setTimeout(() => {
542
+ attack.remove();
543
+ }, 500);
544
+
545
+ // Check for enemy hits
546
+ gameState.enemies.forEach((enemy, index) => {
547
+ const dx = enemy.x - attackX;
548
+ const dy = enemy.y - attackY;
549
+ const distance = Math.sqrt(dx * dx + dy * dy);
550
+
551
+ if (distance < 40) {
552
+ enemy.health -= gameState.player.attackPower;
553
+
554
+ if (enemy.health <= 0) {
555
+ // Enemy defeated
556
+ enemy.element.remove();
557
+ gameState.enemies.splice(index, 1);
558
+
559
+ // Check if all enemies defeated
560
+ if (gameState.enemies.length === 0) {
561
+ gameState.player.quests.defeatRaiders.completed = true;
562
+ document.getElementById('quest-2').textContent = '✔️ Defeat the desert raiders';
563
+ showDialog([
564
+ "You have defeated all the raiders!",
565
+ "Now search for the stolen artifact in their camp."
566
+ ]);
567
+ }
568
+ }
569
+ }
570
  });
571
+ }
572
 
573
+ // Set up controls
574
+ function setupControls() {
575
+ // Keyboard controls
576
+ document.addEventListener('keydown', (e) => {
577
+ switch (e.key) {
578
+ case 'ArrowUp':
579
+ case 'w':
580
+ gameState.player.direction = 'up';
581
+ gameState.player.moving = true;
582
+ break;
583
+ case 'ArrowDown':
584
+ case 's':
585
+ gameState.player.direction = 'down';
586
+ gameState.player.moving = true;
587
+ break;
588
+ case 'ArrowLeft':
589
+ case 'a':
590
+ gameState.player.direction = 'left';
591
+ gameState.player.moving = true;
592
+ break;
593
+ case 'ArrowRight':
594
+ case 'd':
595
+ gameState.player.direction = 'right';
596
+ gameState.player.moving = true;
597
+ break;
598
+ case ' ':
599
+ playerAttack();
600
+ break;
601
+ case 'm':
602
+ document.getElementById('map').style.display =
603
+ document.getElementById('map').style.display === 'none' ? 'block' : 'none';
604
+ break;
605
+ case 'q':
606
+ questLog.style.display = questLog.style.display === 'none' ? 'block' : 'none';
607
+ break;
608
+ }
609
+ });
610
+
611
+ document.addEventListener('keyup', (e) => {
612
+ switch (e.key) {
613
+ case 'ArrowUp':
614
+ case 'w':
615
+ case 'ArrowDown':
616
+ case 's':
617
+ case 'ArrowLeft':
618
+ case 'a':
619
+ case 'ArrowRight':
620
+ case 'd':
621
+ gameState.player.moving = false;
622
+ break;
623
+ }
624
+ });
625
+
626
+ // Touch controls
627
+ upBtn.addEventListener('touchstart', (e) => {
628
+ e.preventDefault();
629
+ gameState.player.direction = 'up';
630
+ gameState.player.moving = true;
631
+ });
632
+
633
+ downBtn.addEventListener('touchstart', (e) => {
634
+ e.preventDefault();
635
+ gameState.player.direction = 'down';
636
+ gameState.player.moving = true;
637
+ });
638
+
639
+ leftBtn.addEventListener('touchstart', (e) => {
640
+ e.preventDefault();
641
+ gameState.player.direction = 'left';
642
+ gameState.player.moving = true;
643
+ });
644
+
645
+ rightBtn.addEventListener('touchstart', (e) => {
646
+ e.preventDefault();
647
+ gameState.player.direction = 'right';
648
+ gameState.player.moving = true;
649
+ });
650
+
651
+ attackBtn.addEventListener('touchstart', (e) => {
652
+ e.preventDefault();
653
+ playerAttack();
654
+ });
655
+
656
+ menuBtn.addEventListener('touchstart', (e) => {
657
  e.preventDefault();
658
+ questLog.style.display = questLog.style.display === 'none' ? 'block' : 'none';
659
+ });
660
+
661
+ // Touch end events
662
+ [upBtn, downBtn, leftBtn, rightBtn].forEach(btn => {
663
+ btn.addEventListener('touchend', (e) => {
664
+ e.preventDefault();
665
+ gameState.player.moving = false;
666
+ });
667
+ });
668
+
669
+ // Dialog next button
670
+ dialogNext.addEventListener('click', nextDialog);
671
+ }
672
+
673
+ // Game loop
674
+ function gameLoop() {
675
+ // Move player if moving
676
+ if (gameState.player.moving) {
677
+ const speed = 3;
678
 
679
+ switch (gameState.player.direction) {
680
+ case 'up':
681
+ gameState.player.y = Math.max(0, gameState.player.y - speed);
682
+ break;
683
+ case 'down':
684
+ gameState.player.y = Math.min(gameState.worldHeight - 64, gameState.player.y + speed);
685
+ break;
686
+ case 'left':
687
+ gameState.player.x = Math.max(0, gameState.player.x - speed);
688
+ break;
689
+ case 'right':
690
+ gameState.player.x = Math.min(gameState.worldWidth - 64, gameState.player.x + speed);
691
+ break;
692
+ }
693
 
694
+ updatePlayerPosition();
695
+ }
696
+
697
+ // Update enemies
698
+ gameState.enemies.forEach(enemy => enemy.update());
699
+
700
+ // Check for NPC interactions
701
+ if (gameState.player.moving) {
702
+ gameState.npcs.forEach(npc => {
703
+ const dx = npc.x - gameState.player.x;
704
+ const dy = npc.y - gameState.player.y;
705
+ const distance = Math.sqrt(dx * dx + dy * dy);
706
 
707
+ if (distance < 60 && Math.random() < 0.01) {
708
+ npc.interact();
 
709
  }
710
+ });
711
+ }
712
+
713
+ requestAnimationFrame(gameLoop);
714
+ }
715
+
716
+ // Start the game when window loads
717
+ window.addEventListener('load', initGame);
718
+
719
+ //
720
  <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=ido6969/top-up" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
721
  </html>