Hugging Face's logo

Spaces:
TioPeperino
/
anycoder-9ab954a3
Running

App Files Community
TioPeperino commited on
Commit
7a1d402
·
verified ·
1 Parent(s): 18a0add

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +402 -19
index.html CHANGED
@@ -1,19 +1,402 @@
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>Shangri-La Frontier - MMORPG</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
11
+
12
+ * {
13
+ font-family: 'Inter', sans-serif;
14
+ }
15
+
16
+ .hero-bg {
17
+ background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6)),
18
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%23000" width="1200" height="800"/><circle fill="%23333" cx="200" cy="200" r="100" opacity="0.3"/><circle fill="%23444" cx="800" cy="400" r="150" opacity="0.2"/><circle fill="%23222" cx="1000" cy="600" r="80" opacity="0.4"/></svg>');
19
+ background-size: cover;
20
+ background-position: center;
21
+ }
22
+
23
+ .game-title {
24
+ font-size: clamp(3rem, 8vw, 6rem);
25
+ font-weight: 900;
26
+ letter-spacing: 0.1em;
27
+ text-shadow: 0 0 20px rgba(255,255,255,0.3);
28
+ }
29
+
30
+ .feature-card {
31
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
32
+ }
33
+
34
+ .feature-card:hover {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 10px 25px rgba(0,0,0,0.3);
37
+ }
38
+
39
+ .btn-primary {
40
+ background: linear-gradient(45deg, #ff6b35, #f7931e);
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .btn-primary:hover {
45
+ transform: translateY(-2px);
46
+ box-shadow: 0 5px 15px rgba(255,107,53,0.4);
47
+ }
48
+
49
+ .news-card {
50
+ background: rgba(255,255,255,0.05);
51
+ backdrop-filter: blur(10px);
52
+ border: 1px solid rgba(255,255,255,0.1);
53
+ }
54
+
55
+ .trailer-overlay {
56
+ background: linear-gradient(45deg, rgba(255,107,53,0.9), rgba(247,147,30,0.9));
57
+ }
58
+
59
+ .anycoder-link {
60
+ position: fixed;
61
+ top: 20px;
62
+ right: 20px;
63
+ z-index: 1000;
64
+ background: rgba(0,0,0,0.7);
65
+ padding: 8px 16px;
66
+ border-radius: 20px;
67
+ font-size: 12px;
68
+ color: white;
69
+ text-decoration: none;
70
+ backdrop-filter: blur(10px);
71
+ }
72
+
73
+ .anycoder-link:hover {
74
+ background: rgba(0,0,0,0.9);
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-black text-white overflow-x-hidden">
79
+ <!-- Anycoder Link -->
80
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
81
+ <i class="fas fa-code"></i> Built with anycoder
82
+ </a>
83
+
84
+ <!-- Header -->
85
+ <header class="fixed top-0 w-full z-50 bg-black bg-opacity-90 backdrop-blur-sm">
86
+ <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
87
+ <div class="flex items-center space-x-2">
88
+ <div class="w-8 h-8 bg-gradient-to-r from-orange-500 to-yellow-500 rounded"></div>
89
+ <span class="text-xl font-bold">SHANGRI-LA FRONTIER</span>
90
+ </div>
91
+ <div class="hidden md:flex space-x-8">
92
+ <a href="#" class="hover:text-orange-400 transition-colors">Home</a>
93
+ <a href="#" class="hover:text-orange-400 transition-colors">About</a>
94
+ <a href="#" class="hover:text-orange-400 transition-colors">Features</a>
95
+ <a href="#" class="hover:text-orange-400 transition-colors">News</a>
96
+ <a href="#" class="hover:text-orange-400 transition-colors">Contact</a>
97
+ </div>
98
+ <button class="md:hidden text-2xl">
99
+ <i class="fas fa-bars"></i>
100
+ </button>
101
+ </nav>
102
+ </header>
103
+
104
+ <!-- Hero Section -->
105
+ <section class="hero-bg min-h-screen flex items-center justify-center relative pt-20">
106
+ <div class="container mx-auto px-6 text-center">
107
+ <h1 class="game-title text-white mb-8">SHANGRI-LA FRONTIER</h1>
108
+ <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-300">
109
+ Embark on a journey through a vast and immersive world filled with danger, adventure, and endless possibilities.
110
+ </p>
111
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
112
+ <button class="btn-primary px-8 py-3 rounded-lg font-semibold text-white">
113
+ PLAY NOW
114
+ </button>
115
+ <button class="border border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-black transition-colors">
116
+ LEARN MORE
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- Trailer Section -->
123
+ <section class="py-20 bg-gray-900">
124
+ <div class="container mx-auto px-6">
125
+ <div class="relative rounded-2xl overflow-hidden shadow-2xl">
126
+ <div class="aspect-video bg-gradient-to-r from-orange-600 to-yellow-600 flex items-center justify-center relative">
127
+ <div class="text-center z-10">
128
+ <h2 class="text-4xl md:text-6xl font-bold mb-4">WATCH THE TRAILER</h2>
129
+ <button class="trailer-overlay w-20 h-20 rounded-full flex items-center justify-center mx-auto text-white text-3xl hover:scale-110 transition-transform">
130
+ <i class="fas fa-play"></i>
131
+ </button>
132
+ </div>
133
+ <div class="absolute inset-0 bg-black bg-opacity-30"></div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </section>
138
+
139
+ <!-- Game Description -->
140
+ <section class="py-20 bg-black">
141
+ <div class="container mx-auto px-6">
142
+ <div class="grid md:grid-cols-2 gap-12 items-center">
143
+ <div>
144
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 text-orange-400">SHANGRI-LA FRONTIER</h2>
145
+ <p class="text-gray-300 mb-8 leading-relaxed">
146
+ Shangri-La Frontier is a groundbreaking MMORPG that pushes the boundaries of virtual reality gaming. Set in a vast and immersive world filled with danger, adventure, and endless possibilities, players will embark on a journey like no other. With stunning graphics, innovative gameplay mechanics, and a richly detailed world to explore, Shangri-La Frontier offers an unparalleled gaming experience that will keep players coming back for more.
147
+ </p>
148
+ <button class="btn-primary px-6 py-3 rounded-lg font-semibold">
149
+ READ MORE
150
+ </button>
151
+ </div>
152
+ <div class="relative">
153
+ <div class="w-full h-96 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl flex items-center justify-center">
154
+ <div class="w-64 h-64 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-full opacity-80"></div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- Features Section -->
162
+ <section class="py-20 bg-gray-900">
163
+ <div class="container mx-auto px-6">
164
+ <div class="text-center mb-16">
165
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">GAME FEATURES</h2>
166
+ <p class="text-gray-300 max-w-3xl mx-auto">
167
+ Explore the unique features that make Shangri-La Frontier stand out from other MMORPGs.
168
+ </p>
169
+ </div>
170
+
171
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
172
+ <div class="feature-card bg-gray-800 rounded-2xl p-8 text-center">
173
+ <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-lg mx-auto mb-6 flex items-center justify-center">
174
+ <i class="fas fa-sword text-2xl"></i>
175
+ </div>
176
+ <h3 class="text-xl font-bold mb-4">IMMERSIVE GAMEPLAY</h3>
177
+ <p class="text-gray-300">
178
+ Dive into a world where every action feels real and every decision matters.
179
+ </p>
180
+ </div>
181
+
182
+ <div class="feature-card bg-gray-800 rounded-2xl p-8 text-center">
183
+ <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-lg mx-auto mb-6 flex items-center justify-center">
184
+ <i class="fas fa-users text-2xl"></i>
185
+ </div>
186
+ <h3 class="text-xl font-bold mb-4">MULTIPLAYER EXPERIENCE</h3>
187
+ <p class="text-gray-300">
188
+ Team up with friends or compete against other players in epic battles.
189
+ </p>
190
+ </div>
191
+
192
+ <div class="feature-card bg-gray-800 rounded-2xl p-8 text-center">
193
+ <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-lg mx-auto mb-6 flex items-center justify-center">
194
+ <i class="fas fa-map text-2xl"></i>
195
+ </div>
196
+ <h3 class="text-xl font-bold mb-4">VAST OPEN WORLD</h3>
197
+ <p class="text-gray-300">
198
+ Explore a massive world filled with diverse landscapes and hidden secrets.
199
+ </p>
200
+ </div>
201
+
202
+ <div class="feature-card bg-gray-800 rounded-2xl p-8 text-center">
203
+ <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-lg mx-auto mb-6 flex items-center justify-center">
204
+ <i class="fas fa-cog text-2xl"></i>
205
+ </div>
206
+ <h3 class="text-xl font-bold mb-4">CUSTOMIZATION</h3>
207
+ <p class="text-gray-300">
208
+ Create your unique character with extensive customization options.
209
+ </p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- System Requirements -->
216
+ <section class="py-20 bg-black">
217
+ <div class="container mx-auto px-6">
218
+ <div class="grid md:grid-cols-2 gap-12">
219
+ <div>
220
+ <h2 class="text-4xl font-bold mb-8 text-orange-400">SYSTEM REQUIREMENTS</h2>
221
+ <p class="text-gray-300 mb-8">
222
+ Ensure your system meets these requirements for optimal gameplay experience.
223
+ </p>
224
+ </div>
225
+
226
+ <div class="space-y-6">
227
+ <div>
228
+ <h3 class="text-xl font-bold mb-4">MINIMUM</h3>
229
+ <ul class="space-y-2 text-gray-300">
230
+ <li>• OS: Windows 10 (64-bit)</li>
231
+ <li>• Processor: Intel Core i5-4460 or AMD FX-6300</li>
232
+ <li>• Memory: 8 GB RAM</li>
233
+ <li>• Graphics: NVIDIA GeForce GTX 760 or AMD Radeon R7 260x</li>
234
+ <li>• DirectX: Version 11</li>
235
+ <li>• Storage: 50 GB available space</li>
236
+ </ul>
237
+ </div>
238
+
239
+ <div>
240
+ <h3 class="text-xl font-bold mb-4">RECOMMENDED</h3>
241
+ <ul class="space-y-2 text-gray-300">
242
+ <li>• OS: Windows 10 (64-bit)</li>
243
+ <li>• Processor: Intel Core i7-4790 or AMD Ryzen 5 1500X</li>
244
+ <li>• Memory: 16 GB RAM</li>
245
+ <li>• Graphics: NVIDIA GeForce GTX 1060 or AMD Radeon RX 580</li>
246
+ <li>• DirectX: Version 12</li>
247
+ <li>• Storage: 50 GB available space</li>
248
+ </ul>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </section>
254
+
255
+ <!-- News Section -->
256
+ <section class="py-20 bg-gray-900">
257
+ <div class="container mx-auto px-6">
258
+ <div class="text-center mb-16">
259
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">LATEST NEWS</h2>
260
+ <p class="text-gray-300 max-w-3xl mx-auto">
261
+ Stay updated with the latest news and updates from the world of Shangri-La Frontier.
262
+ </p>
263
+ </div>
264
+
265
+ <div class="grid md:grid-cols-3 gap-8">
266
+ <div class="news-card rounded-2xl overflow-hidden">
267
+ <div class="h-48 bg-gradient-to-br from-orange-600 to-yellow-600"></div>
268
+ <div class="p-6">
269
+ <h3 class="text-xl font-bold mb-3">NEW EXPANSION ANNOUNCED</h3>
270
+ <p class="text-gray-300 mb-4">
271
+ Get ready for the biggest update yet with new areas, quests, and challenges.
272
+ </p>
273
+ <button class="text-orange-400 font-semibold hover:text-orange-300 transition-colors">
274
+ READ MORE →
275
+ </button>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="news-card rounded-2xl overflow-hidden">
280
+ <div class="h-48 bg-gradient-to-br from-blue-600 to-purple-600"></div>
281
+ <div class="p-6">
282
+ <h3 class="text-xl font-bold mb-3">COMMUNITY EVENT</h3>
283
+ <p class="text-gray-300 mb-4">
284
+ Join us for an exciting community event with exclusive rewards and challenges.
285
+ </p>
286
+ <button class="text-orange-400 font-semibold hover:text-orange-300 transition-colors">
287
+ READ MORE →
288
+ </button>
289
+ </div>
290
+ </div>
291
+
292
+ <div class="news-card rounded-2xl overflow-hidden">
293
+ <div class="h-48 bg-gradient-to-br from-green-600 to-teal-600"></div>
294
+ <div class="p-6">
295
+ <h3 class="text-xl font-bold mb-3">GAME UPDATE 1.2</h3>
296
+ <p class="text-gray-300 mb-4">
297
+ Discover the latest features and improvements in our newest update.
298
+ </p>
299
+ <button class="text-orange-400 font-semibold hover:text-orange-300 transition-colors">
300
+ READ MORE →
301
+ </button>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Footer -->
309
+ <footer class="bg-black py-12 border-t border-gray-800">
310
+ <div class="container mx-auto px-6">
311
+ <div class="grid md:grid-cols-4 gap-8">
312
+ <div>
313
+ <h3 class="text-xl font-bold mb-4">SHANGRI-LA FRONTIER</h3>
314
+ <p class="text-gray-400">
315
+ The ultimate MMORPG experience awaits. Join thousands of players in an epic adventure.
316
+ </p>
317
+ </div>
318
+
319
+ <div>
320
+ <h4 class="font-bold mb-4">QUICK LINKS</h4>
321
+ <ul class="space-y-2 text-gray-400">
322
+ <li><a href="#" class="hover:text-white transition-colors">Home</a></li>
323
+ <li><a href="#" class="hover:text-white transition-colors">About</a></li>
324
+ <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
325
+ <li><a href="#" class="hover:text-white transition-colors">News</a></li>
326
+ <li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
327
+ </ul>
328
+ </div>
329
+
330
+ <div>
331
+ <h4 class="font-bold mb-4">LEGAL</h4>
332
+ <ul class="space-y-2 text-gray-400">
333
+ <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
334
+ <li><a href="#" class="hover:text-white transition-colors">Terms of Service</a></li>
335
+ <li><a href="#" class="hover:text-white transition-colors">Refund Policy</a></li>
336
+ </ul>
337
+ </div>
338
+
339
+ <div>
340
+ <h4 class="font-bold mb-4">FOLLOW US</h4>
341
+ <div class="flex space-x-4">
342
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors">
343
+ <i class="fab fa-facebook-f"></i>
344
+ </a>
345
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors">
346
+ <i class="fab fa-twitter"></i>
347
+ </a>
348
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors">
349
+ <i class="fab fa-instagram"></i>
350
+ </a>
351
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-orange-500 transition-colors">
352
+ <i class="fab fa-youtube"></i>
353
+ </a>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
359
+ <p>© 2023 Shangri-La Frontier. All rights reserved.</p>
360
+ </div>
361
+ </div>
362
+ </footer>
363
+
364
+ <script>
365
+ // Mobile menu toggle
366
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
367
+ const menu = document.querySelector('.md\\:flex');
368
+ menu.classList.toggle('hidden');
369
+ });
370
+
371
+ // Smooth scrolling for anchor links
372
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
373
+ anchor.addEventListener('click', function (e) {
374
+ e.preventDefault();
375
+ const target = document.querySelector(this.getAttribute('href'));
376
+ if (target) {
377
+ target.scrollIntoView({
378
+ behavior: 'smooth',
379
+ block: 'start'
380
+ });
381
+ }
382
+ });
383
+ });
384
+
385
+ // Add scroll effect to header
386
+ window.addEventListener('scroll', function() {
387
+ const header = document.querySelector('header');
388
+ if (window.scrollY > 100) {
389
+ header.classList.add('bg-opacity-95');
390
+ } else {
391
+ header.classList.remove('bg-opacity-95');
392
+ }
393
+ });
394
+
395
+ // Trailer play button functionality
396
+ document.querySelector('.trailer-overlay').addEventListener('click', function() {
397
+ // In a real implementation, this would open a video modal
398
+ alert('Trailer would play here in a real implementation');
399
+ });
400
+ </script>
401
+ </body>
402
+ </html>