Hugging Face's logo

Spaces:
Denoria
/
web-1
Running

App Files Community
Denoria commited on
Commit
c2ff1ef
·
verified ·
1 Parent(s): e63c611

Create a single site Landing Page for a fantasy roleplay game with the option to add a background music with a play and pause function inspired by jrpg websites like octopath traveler - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +394 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Web 1
3
- emoji: 🌖
4
- colorFrom: indigo
5
- colorTo: indigo
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: web-1
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,395 @@
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>Eternal Chronicles | Fantasy RPG</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&display=swap');
15
+
16
+ body {
17
+ font-family: 'Cinzel', serif;
18
+ background-color: #0a0a0a;
19
+ color: #e0d8b0;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ .bg-parchment {
24
+ background-image: url('http://static.photos/vintage/1200x630/42');
25
+ background-size: cover;
26
+ background-position: center;
27
+ background-blend-mode: overlay;
28
+ background-color: rgba(20, 15, 5, 0.85);
29
+ }
30
+
31
+ .music-control {
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ .music-control:hover {
36
+ transform: scale(1.1);
37
+ filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7));
38
+ }
39
+
40
+ .btn-gold {
41
+ background: linear-gradient(to bottom, #d4af37, #a67c00);
42
+ border: 1px solid #ffd700;
43
+ color: #1a1200;
44
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
45
+ }
46
+
47
+ .btn-gold:hover {
48
+ background: linear-gradient(to bottom, #ffd700, #c9a227);
49
+ transform: translateY(-2px);
50
+ }
51
+
52
+ .character-card {
53
+ transition: all 0.3s ease;
54
+ border: 2px solid transparent;
55
+ }
56
+
57
+ .character-card:hover {
58
+ transform: translateY(-10px);
59
+ border-color: #d4af37;
60
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
61
+ }
62
+
63
+ .scroll-down {
64
+ animation: bounce 2s infinite;
65
+ }
66
+
67
+ @keyframes bounce {
68
+ 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
69
+ 40% {transform: translateY(-20px);}
70
+ 60% {transform: translateY(-10px);}
71
+ }
72
+
73
+ .pixel-border {
74
+ position: relative;
75
+ border: 16px solid transparent;
76
+ border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="%23d4af37" /></svg>') 16 stretch;
77
+ }
78
+ </style>
79
+ </head>
80
+ <body class="min-h-screen">
81
+ <!-- Music Player -->
82
+ <div class="fixed bottom-4 right-4 z-50">
83
+ <div class="bg-black bg-opacity-70 rounded-full p-3 flex items-center space-x-2">
84
+ <audio id="bgMusic" loop>
85
+ <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
86
+ </audio>
87
+ <button id="musicToggle" class="music-control text-gold-400 hover:text-yellow-300">
88
+ <i data-feather="play" class="text-yellow-400"></i>
89
+ </button>
90
+ <span class="text-xs text-yellow-200 hidden md:inline">Eternal Theme</span>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Hero Section -->
95
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
96
+ <div class="absolute inset-0 bg-black opacity-60 z-0"></div>
97
+ <div class="absolute inset-0 z-0">
98
+ <img src="http://static.photos/fantasy/1200x630/7" alt="Fantasy Landscape" class="w-full h-full object-cover">
99
+ </div>
100
+
101
+ <div class="relative z-10 text-center px-4" data-aos="fade-up">
102
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 text-yellow-300 font-cinzel tracking-wider">
103
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-yellow-600">ETERNAL CHRONICLES</span>
104
+ </h1>
105
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-yellow-100">
106
+ Embark on an epic journey through a world of magic, mystery, and adventure
107
+ </p>
108
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
109
+ <button class="btn-gold px-8 py-3 rounded-md font-bold text-lg shadow-lg">
110
+ Begin Your Quest
111
+ </button>
112
+ <button class="border-2 border-yellow-500 px-8 py-3 rounded-md font-bold text-lg text-yellow-300 hover:bg-yellow-900 hover:bg-opacity-30 transition">
113
+ Learn More
114
+ </button>
115
+ </div>
116
+ </div>
117
+
118
+ <div class="absolute bottom-10 left-0 right-0 text-center scroll-down">
119
+ <a href="#about" class="text-yellow-300 animate-bounce inline-block">
120
+ <i data-feather="chevron-down" class="w-10 h-10"></i>
121
+ </a>
122
+ </div>
123
+ </section>
124
+
125
+ <!-- About Section -->
126
+ <section id="about" class="py-20 bg-parchment">
127
+ <div class="container mx-auto px-4">
128
+ <div class="text-center mb-16" data-aos="fade-up">
129
+ <h2 class="text-4xl font-bold mb-4 text-yellow-600">The World Awaits</h2>
130
+ <div class="w-24 h-1 bg-yellow-600 mx-auto mb-6"></div>
131
+ <p class="text-lg max-w-3xl mx-auto text-yellow-900">
132
+ In a realm where ancient magic clashes with rising empires, your choices will shape the fate of kingdoms.
133
+ Forge alliances, uncover lost secrets, and battle legendary foes in this immersive RPG experience.
134
+ </p>
135
+ </div>
136
+
137
+ <div class="grid md:grid-cols-3 gap-8">
138
+ <div class="bg-black bg-opacity-70 p-8 rounded-lg text-center" data-aos="fade-up" data-aos-delay="100">
139
+ <div class="text-yellow-400 mb-4">
140
+ <i data-feather="compass" class="w-12 h-12 mx-auto"></i>
141
+ </div>
142
+ <h3 class="text-2xl font-bold mb-3 text-yellow-300">Open World</h3>
143
+ <p class="text-yellow-100">
144
+ Explore vast landscapes from enchanted forests to ruined citadels, each with their own stories and challenges.
145
+ </p>
146
+ </div>
147
+
148
+ <div class="bg-black bg-opacity-70 p-8 rounded-lg text-center" data-aos="fade-up" data-aos-delay="200">
149
+ <div class="text-yellow-400 mb-4">
150
+ <i data-feather="users" class="w-12 h-12 mx-auto"></i>
151
+ </div>
152
+ <h3 class="text-2xl font-bold mb-3 text-yellow-300">Dynamic Characters</h3>
153
+ <p class="text-yellow-100">
154
+ Recruit unique companions with their own personalities, backstories, and evolving relationships.
155
+ </p>
156
+ </div>
157
+
158
+ <div class="bg-black bg-opacity-70 p-8 rounded-lg text-center" data-aos="fade-up" data-aos-delay="300">
159
+ <div class="text-yellow-400 mb-4">
160
+ <i data-feather="award" class="w-12 h-12 mx-auto"></i>
161
+ </div>
162
+ <h3 class="text-2xl font-bold mb-3 text-yellow-300">Epic Quests</h3>
163
+ <p class="text-yellow-100">
164
+ Experience a rich narrative with meaningful choices that impact the world and its inhabitants.
165
+ </p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Characters Section -->
172
+ <section class="py-20 bg-gray-900">
173
+ <div class="container mx-auto px-4">
174
+ <div class="text-center mb-16" data-aos="fade-up">
175
+ <h2 class="text-4xl font-bold mb-4 text-yellow-400">Meet Your Companions</h2>
176
+ <div class="w-24 h-1 bg-yellow-600 mx-auto mb-6"></div>
177
+ <p class="text-lg max-w-3xl mx-auto text-gray-300">
178
+ Choose from eight unique characters, each with their own class, abilities, and personal story to uncover.
179
+ </p>
180
+ </div>
181
+
182
+ <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
183
+ <!-- Character 1 -->
184
+ <div class="character-card bg-gray-800 rounded-lg overflow-hidden" data-aos="zoom-in">
185
+ <div class="relative h-64 overflow-hidden">
186
+ <img src="http://static.photos/fantasy/640x360/1" alt="Warrior" class="w-full h-full object-cover">
187
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
188
+ <div class="absolute bottom-0 left-0 p-4">
189
+ <h3 class="text-xl font-bold text-yellow-300">Aldric</h3>
190
+ <p class="text-sm text-gray-300">The Wandering Knight</p>
191
+ </div>
192
+ </div>
193
+ <div class="p-4">
194
+ <p class="text-gray-300 text-sm">
195
+ A disgraced noble seeking redemption through valor and honor in battle.
196
+ </p>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Character 2 -->
201
+ <div class="character-card bg-gray-800 rounded-lg overflow-hidden" data-aos="zoom-in" data-aos-delay="100">
202
+ <div class="relative h-64 overflow-hidden">
203
+ <img src="http://static.photos/fantasy/640x360/2" alt="Mage" class="w-full h-full object-cover">
204
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
205
+ <div class="absolute bottom-0 left-0 p-4">
206
+ <h3 class="text-xl font-bold text-yellow-300">Seraphina</h3>
207
+ <p class="text-sm text-gray-300">The Arcane Scholar</p>
208
+ </div>
209
+ </div>
210
+ <div class="p-4">
211
+ <p class="text-gray-300 text-sm">
212
+ A prodigy mage researching forbidden magic to save her dying homeland.
213
+ </p>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Character 3 -->
218
+ <div class="character-card bg-gray-800 rounded-lg overflow-hidden" data-aos="zoom-in" data-aos-delay="200">
219
+ <div class="relative h-64 overflow-hidden">
220
+ <img src="http://static.photos/fantasy/640x360/3" alt="Rogue" class="w-full h-full object-cover">
221
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
222
+ <div class="absolute bottom-0 left-0 p-4">
223
+ <h3 class="text-xl font-bold text-yellow-300">Kael</h3>
224
+ <p class="text-sm text-gray-300">The Shadow Blade</p>
225
+ </div>
226
+ </div>
227
+ <div class="p-4">
228
+ <p class="text-gray-300 text-sm">
229
+ A master thief with a heart of gold, stealing from the rich to aid the oppressed.
230
+ </p>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Character 4 -->
235
+ <div class="character-card bg-gray-800 rounded-lg overflow-hidden" data-aos="zoom-in" data-aos-delay="300">
236
+ <div class="relative h-64 overflow-hidden">
237
+ <img src="http://static.photos/fantasy/640x360/4" alt="Cleric" class="w-full h-full object-cover">
238
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
239
+ <div class="absolute bottom-0 left-0 p-4">
240
+ <h3 class="text-xl font-bold text-yellow-300">Elara</h3>
241
+ <p class="text-sm text-gray-300">The Divine Healer</p>
242
+ </div>
243
+ </div>
244
+ <div class="p-4">
245
+ <p class="text-gray-300 text-sm">
246
+ A priestess on a pilgrimage to spread hope and healing in war-torn lands.
247
+ </p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="text-center mt-12">
253
+ <button class="border-2 border-yellow-500 px-8 py-3 rounded-md font-bold text-lg text-yellow-300 hover:bg-yellow-900 hover:bg-opacity-30 transition">
254
+ View All Characters
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </section>
259
+
260
+ <!-- Call to Action -->
261
+ <section class="py-32 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden">
262
+ <div class="absolute inset-0 opacity-20">
263
+ <img src="http://static.photos/fantasy/1200x630/8" alt="Fantasy Battle" class="w-full h-full object-cover">
264
+ </div>
265
+
266
+ <div class="relative container mx-auto px-4 text-center" data-aos="zoom-in">
267
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 text-yellow-300">Ready for Your Adventure?</h2>
268
+ <p class="text-xl mb-8 max-w-3xl mx-auto text-gray-300">
269
+ Join thousands of players in the award-winning fantasy RPG experience. Available now on all platforms.
270
+ </p>
271
+ <div class="flex flex-wrap justify-center gap-4">
272
+ <button class="btn-gold px-8 py-4 rounded-md font-bold text-lg shadow-lg flex items-center">
273
+ <i data-feather="download" class="mr-2"></i> Download Now
274
+ </button>
275
+ <button class="border-2 border-yellow-500 px-8 py-4 rounded-md font-bold text-lg text-yellow-300 hover:bg-yellow-900 hover:bg-opacity-30 transition flex items-center">
276
+ <i data-feather="play" class="mr-2"></i> Watch Trailer
277
+ </button>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- Footer -->
283
+ <footer class="bg-black py-12">
284
+ <div class="container mx-auto px-4">
285
+ <div class="flex flex-col md:flex-row justify-between items-center">
286
+ <div class="mb-6 md:mb-0">
287
+ <h3 class="text-2xl font-bold text-yellow-400 mb-2">ETERNAL CHRONICLES</h3>
288
+ <p class="text-gray-400 text-sm">© 2023 Mythic Games Studio. All rights reserved.</p>
289
+ </div>
290
+
291
+ <div class="flex space-x-6">
292
+ <a href="#" class="text-gray-400 hover:text-yellow-400 transition">
293
+ <i data-feather="twitter"></i>
294
+ </a>
295
+ <a href="#" class="text-gray-400 hover:text-yellow-400 transition">
296
+ <i data-feather="facebook"></i>
297
+ </a>
298
+ <a href="#" class="text-gray-400 hover:text-yellow-400 transition">
299
+ <i data-feather="instagram"></i>
300
+ </a>
301
+ <a href="#" class="text-gray-400 hover:text-yellow-400 transition">
302
+ <i data-feather="youtube"></i>
303
+ </a>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between">
308
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-6 md:mb-0">
309
+ <div>
310
+ <h4 class="text-yellow-300 mb-4">Game</h4>
311
+ <ul class="space-y-2">
312
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Features</a></li>
313
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Characters</a></li>
314
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">World</a></li>
315
+ </ul>
316
+ </div>
317
+ <div>
318
+ <h4 class="text-yellow-300 mb-4">Support</h4>
319
+ <ul class="space-y-2">
320
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">FAQ</a></li>
321
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Forums</a></li>
322
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Contact</a></li>
323
+ </ul>
324
+ </div>
325
+ <div>
326
+ <h4 class="text-yellow-300 mb-4">Legal</h4>
327
+ <ul class="space-y-2">
328
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Terms</a></li>
329
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Privacy</a></li>
330
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Cookies</a></li>
331
+ </ul>
332
+ </div>
333
+ <div>
334
+ <h4 class="text-yellow-300 mb-4">Company</h4>
335
+ <ul class="space-y-2">
336
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">About</a></li>
337
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Careers</a></li>
338
+ <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Press</a></li>
339
+ </ul>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="w-full md:w-64">
344
+ <h4 class="text-yellow-300 mb-4">Stay Updated</h4>
345
+ <div class="flex">
346
+ <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full">
347
+ <button class="bg-yellow-600 hover:bg-yellow-700 text-black px-4 py-2 rounded-r-md">
348
+ <i data-feather="send"></i>
349
+ </button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </footer>
355
+
356
+ <script>
357
+ AOS.init({
358
+ duration: 800,
359
+ easing: 'ease-in-out',
360
+ once: true
361
+ });
362
+
363
+ feather.replace();
364
+
365
+ // Music toggle functionality
366
+ const musicToggle = document.getElementById('musicToggle');
367
+ const bgMusic = document.getElementById('bgMusic');
368
+ let isPlaying = false;
369
+
370
+ musicToggle.addEventListener('click', function() {
371
+ if (isPlaying) {
372
+ bgMusic.pause();
373
+ musicToggle.innerHTML = '<i data-feather="play" class="text-yellow-400"></i>';
374
+ feather.replace();
375
+ } else {
376
+ bgMusic.play();
377
+ musicToggle.innerHTML = '<i data-feather="pause" class="text-yellow-400"></i>';
378
+ feather.replace();
379
+ }
380
+ isPlaying = !isPlaying;
381
+ });
382
+
383
+ // Smooth scrolling for anchor links
384
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
385
+ anchor.addEventListener('click', function (e) {
386
+ e.preventDefault();
387
+
388
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
389
+ behavior: 'smooth'
390
+ });
391
+ });
392
+ });
393
+ </script>
394
+ </body>
395
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a single site Landing Page for a fantasy roleplay game with the option to add a background music with a play and pause function inspired by jrpg websites like octopath traveler