Hugging Face's logo

Spaces:
Denoria
/
mkmu
Running

App Files Community
Denoria commited on
Commit
b9652a0
·
verified ·
1 Parent(s): 2fcb5f7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +507 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mkmu
3
- emoji: 💻
4
- colorFrom: green
5
- colorTo: green
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: mkmu
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,507 @@
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>Fantasy Monsterpedia</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=MedievalSharp&family=Poppins:wght@300;400;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #6d28d9;
14
+ --secondary: #f59e0b;
15
+ --dark: #1e293b;
16
+ --light: #f8fafc;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Poppins', sans-serif;
21
+ background-color: #f1f5f9;
22
+ background-image: url('https://images.unsplash.com/photo-1605106702734-205df224ecce?q=80&w=1470&auto=format&fit=crop');
23
+ background-size: cover;
24
+ background-attachment: fixed;
25
+ background-position: center;
26
+ color: var(--dark);
27
+ }
28
+
29
+ .title-font {
30
+ font-family: 'MedievalSharp', cursive;
31
+ }
32
+
33
+ .card {
34
+ background: rgba(255, 255, 255, 0.85);
35
+ backdrop-filter: blur(10px);
36
+ border-radius: 16px;
37
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
38
+ transition: all 0.3s ease;
39
+ }
40
+
41
+ .card:hover {
42
+ transform: translateY(-5px);
43
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
44
+ }
45
+
46
+ .monster-card {
47
+ border-left: 5px solid var(--primary);
48
+ }
49
+
50
+ .location-card {
51
+ border-left: 5px solid var(--secondary);
52
+ }
53
+
54
+ .nav-link {
55
+ position: relative;
56
+ }
57
+
58
+ .nav-link:after {
59
+ content: '';
60
+ position: absolute;
61
+ width: 0;
62
+ height: 2px;
63
+ bottom: 0;
64
+ left: 0;
65
+ background-color: var(--secondary);
66
+ transition: width 0.3s ease;
67
+ }
68
+
69
+ .nav-link:hover:after {
70
+ width: 100%;
71
+ }
72
+
73
+ .active:after {
74
+ width: 100%;
75
+ }
76
+
77
+ .stat-bar {
78
+ height: 8px;
79
+ border-radius: 4px;
80
+ background: linear-gradient(90deg, #f59e0b, #ef4444);
81
+ }
82
+
83
+ .parchment-bg {
84
+ background-image: url('https://www.transparenttextures.com/patterns/rice-paper.png');
85
+ background-color: #fef3c7;
86
+ border: 1px solid #d1d5db;
87
+ }
88
+
89
+ .scrollbar-hide::-webkit-scrollbar {
90
+ display: none;
91
+ }
92
+ </style>
93
+ </head>
94
+ <body class="min-h-screen">
95
+ <!-- Navigation -->
96
+ <nav class="bg-purple-900 bg-opacity-90 text-white shadow-lg sticky top-0 z-50">
97
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
98
+ <div class="flex items-center space-x-2">
99
+ <i class="fas fa-dragon text-2xl text-amber-400"></i>
100
+ <h1 class="title-font text-2xl font-bold">Fantasy Monsterpedia</h1>
101
+ </div>
102
+ <div class="hidden md:flex space-x-8">
103
+ <a href="#monsters" class="nav-link active py-2">Monsters</a>
104
+ <a href="#locations" class="nav-link py-2">Locations</a>
105
+ <a href="#about" class="nav-link py-2">About</a>
106
+ </div>
107
+ <div class="md:hidden">
108
+ <button id="menu-btn" class="text-white focus:outline-none">
109
+ <i class="fas fa-bars text-2xl"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ <!-- Mobile Menu -->
114
+ <div id="mobile-menu" class="hidden md:hidden bg-purple-800 bg-opacity-95">
115
+ <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
116
+ <a href="#monsters" class="nav-link py-2">Monsters</a>
117
+ <a href="#locations" class="nav-link py-2">Locations</a>
118
+ <a href="#about" class="nav-link py-2">About</a>
119
+ </div>
120
+ </div>
121
+ </nav>
122
+
123
+ <!-- Hero Section -->
124
+ <header class="relative h-96 flex items-center justify-center">
125
+ <div class="absolute inset-0 bg-black bg-opacity-50"></div>
126
+ <div class="relative z-10 text-center px-4">
127
+ <h1 class="title-font text-5xl md:text-6xl font-bold text-white mb-4">Chronicles of Eldermere</h1>
128
+ <p class="text-xl text-amber-200 max-w-2xl mx-auto">Explore the mystical creatures and enchanted lands of a forgotten realm</p>
129
+ <button class="mt-8 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
130
+ Begin Your Journey
131
+ </button>
132
+ </div>
133
+ </header>
134
+
135
+ <!-- Main Content -->
136
+ <main class="container mx-auto px-4 py-12">
137
+ <!-- Monsters Section -->
138
+ <section id="monsters" class="mb-20">
139
+ <div class="flex items-center mb-8">
140
+ <i class="fas fa-paw text-3xl text-purple-700 mr-4"></i>
141
+ <h2 class="title-font text-3xl font-bold text-purple-900">Creatures of Eldermere</h2>
142
+ </div>
143
+
144
+ <!-- Search and Filter -->
145
+ <div class="mb-8 grid grid-cols-1 md:grid-cols-3 gap-4">
146
+ <div class="relative">
147
+ <input type="text" placeholder="Search monsters..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
148
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
149
+ </div>
150
+ <select class="px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
151
+ <option>All Types</option>
152
+ <option>Dragons</option>
153
+ <option>Beasts</option>
154
+ <option>Spirits</option>
155
+ <option>Undead</option>
156
+ <option>Elementals</option>
157
+ </select>
158
+ <select class="px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
159
+ <option>All Regions</option>
160
+ <option>Shadowmire</option>
161
+ <option>Celestial Peaks</option>
162
+ <option>Verdant Vale</option>
163
+ <option>Obsidian Wastes</option>
164
+ </select>
165
+ </div>
166
+
167
+ <!-- Monster Cards -->
168
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
169
+ <!-- Monster 1 -->
170
+ <div class="card monster-card p-6">
171
+ <div class="flex justify-between items-start mb-4">
172
+ <h3 class="title-font text-2xl font-bold text-purple-800">Shadowscale Drake</h3>
173
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Dragon</span>
174
+ </div>
175
+ <div class="h-48 mb-4 rounded-lg overflow-hidden">
176
+ <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?q=80&w=1470&auto=format&fit=crop" alt="Shadowscale Drake" class="w-full h-full object-cover">
177
+ </div>
178
+ <p class="text-gray-700 mb-4">A nocturnal predator that blends with darkness, known to ambush travelers in the Shadowmire swamps. Their scales absorb moonlight to become nearly invisible at night.</p>
179
+ <div class="mb-4">
180
+ <div class="flex justify-between mb-1">
181
+ <span class="text-sm font-medium">Strength</span>
182
+ <span class="text-sm">8/10</span>
183
+ </div>
184
+ <div class="stat-bar w-full">
185
+ <div class="h-full bg-purple-600 rounded" style="width: 80%"></div>
186
+ </div>
187
+ </div>
188
+ <div class="mb-4">
189
+ <div class="flex justify-between mb-1">
190
+ <span class="text-sm font-medium">Magic</span>
191
+ <span class="text-sm">5/10</span>
192
+ </div>
193
+ <div class="stat-bar w-full">
194
+ <div class="h-full bg-purple-600 rounded" style="width: 50%"></div>
195
+ </div>
196
+ </div>
197
+ <div class="flex justify-between items-center">
198
+ <span class="text-sm text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Shadowmire</span>
199
+ <button class="text-purple-700 hover:text-purple-900 font-medium">Read More →</button>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Monster 2 -->
204
+ <div class="card monster-card p-6">
205
+ <div class="flex justify-between items-start mb-4">
206
+ <h3 class="title-font text-2xl font-bold text-purple-800">Celestial Phoenix</h3>
207
+ <span class="bg-amber-100 text-amber-800 px-3 py-1 rounded-full text-sm">Spirit</span>
208
+ </div>
209
+ <div class="h-48 mb-4 rounded-lg overflow-hidden">
210
+ <img src="https://images.unsplash.com/photo-1518562180175-34a163b1a9a9?q=80&w=1470&auto=format&fit=crop" alt="Celestial Phoenix" class="w-full h-full object-cover">
211
+ </div>
212
+ <p class="text-gray-700 mb-4">A benevolent spirit that dwells in the highest peaks, said to be reborn from its own ashes every century. Its feathers can heal mortal wounds.</p>
213
+ <div class="mb-4">
214
+ <div class="flex justify-between mb-1">
215
+ <span class="text-sm font-medium">Strength</span>
216
+ <span class="text-sm">4/10</span>
217
+ </div>
218
+ <div class="stat-bar w-full">
219
+ <div class="h-full bg-purple-600 rounded" style="width: 40%"></div>
220
+ </div>
221
+ </div>
222
+ <div class="mb-4">
223
+ <div class="flex justify-between mb-1">
224
+ <span class="text-sm font-medium">Magic</span>
225
+ <span class="text-sm">9/10</span>
226
+ </div>
227
+ <div class="stat-bar w-full">
228
+ <div class="h-full bg-purple-600 rounded" style="width: 90%"></div>
229
+ </div>
230
+ </div>
231
+ <div class="flex justify-between items-center">
232
+ <span class="text-sm text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Celestial Peaks</span>
233
+ <button class="text-purple-700 hover:text-purple-900 font-medium">Read More →</button>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Monster 3 -->
238
+ <div class="card monster-card p-6">
239
+ <div class="flex justify-between items-start mb-4">
240
+ <h3 class="title-font text-2xl font-bold text-purple-800">Verdant Treant</h3>
241
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Elemental</span>
242
+ </div>
243
+ <div class="h-48 mb-4 rounded-lg overflow-hidden">
244
+ <img src="https://images.unsplash.com/photo-1503435980610-a51f3ddfee50?q=80&w=1470&auto=format&fit=crop" alt="Verdant Treant" class="w-full h-full object-cover">
245
+ </div>
246
+ <p class="text-gray-700 mb-4">Ancient tree spirits that protect the forests of Eldermere. They can command vines and roots to ensnare intruders and communicate through the forest network.</p>
247
+ <div class="mb-4">
248
+ <div class="flex justify-between mb-1">
249
+ <span class="text-sm font-medium">Strength</span>
250
+ <span class="text-sm">7/10</span>
251
+ </div>
252
+ <div class="stat-bar w-full">
253
+ <div class="h-full bg-purple-600 rounded" style="width: 70%"></div>
254
+ </div>
255
+ </div>
256
+ <div class="mb-4">
257
+ <div class="flex justify-between mb-1">
258
+ <span class="text-sm font-medium">Magic</span>
259
+ <span class="text-sm">6/10</span>
260
+ </div>
261
+ <div class="stat-bar w-full">
262
+ <div class="h-full bg-purple-600 rounded" style="width: 60%"></div>
263
+ </div>
264
+ </div>
265
+ <div class="flex justify-between items-center">
266
+ <span class="text-sm text-gray-600"><i class="fas fa-map-marker-alt mr-1"></i> Verdant Vale</span>
267
+ <button class="text-purple-700 hover:text-purple-900 font-medium">Read More →</button>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="text-center mt-10">
273
+ <button class="bg-purple-700 hover:bg-purple-800 text-white font-bold py-3 px-8 rounded-full transition duration-300">
274
+ View All Creatures (42)
275
+ </button>
276
+ </div>
277
+ </section>
278
+
279
+ <!-- Locations Section -->
280
+ <section id="locations" class="mb-20">
281
+ <div class="flex items-center mb-8">
282
+ <i class="fas fa-map-marked-alt text-3xl text-amber-600 mr-4"></i>
283
+ <h2 class="title-font text-3xl font-bold text-amber-800">Realms of Eldermere</h2>
284
+ </div>
285
+
286
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
287
+ <!-- Location 1 -->
288
+ <div class="card location-card p-0 overflow-hidden">
289
+ <div class="h-48 overflow-hidden">
290
+ <img src="https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d?q=80&w=1469&auto=format&fit=crop" alt="Shadowmire" class="w-full h-full object-cover">
291
+ </div>
292
+ <div class="p-6">
293
+ <h3 class="title-font text-2xl font-bold text-amber-800 mb-2">Shadowmire</h3>
294
+ <div class="flex items-center mb-3">
295
+ <span class="bg-gray-200 text-gray-800 px-2 py-1 rounded text-xs mr-2">Swamp</span>
296
+ <span class="bg-gray-200 text-gray-800 px-2 py-1 rounded text-xs">Danger Level: High</span>
297
+ </div>
298
+ <p class="text-gray-700 mb-4">A vast, mist-shrouded wetland where the sun's light barely penetrates. Home to nocturnal creatures and ancient ruins half-sunk in black waters. The air hums with latent magic from forgotten civilizations.</p>
299
+ <div class="flex justify-between items-center">
300
+ <div>
301
+ <h4 class="text-sm font-semibold mb-1">Notable Creatures</h4>
302
+ <div class="flex space-x-2">
303
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Shadowscale Drake</span>
304
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Bog Wraith</span>
305
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Mire Serpent</span>
306
+ </div>
307
+ </div>
308
+ <button class="text-amber-700 hover:text-amber-900 font-medium">Explore →</button>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Location 2 -->
314
+ <div class="card location-card p-0 overflow-hidden">
315
+ <div class="h-48 overflow-hidden">
316
+ <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1470&auto=format&fit=crop" alt="Celestial Peaks" class="w-full h-full object-cover">
317
+ </div>
318
+ <div class="p-6">
319
+ <h3 class="title-font text-2xl font-bold text-amber-800 mb-2">Celestial Peaks</h3>
320
+ <div class="flex items-center mb-3">
321
+ <span class="bg-blue-200 text-blue-800 px-2 py-1 rounded text-xs mr-2">Mountains</span>
322
+ <span class="bg-gray-200 text-gray-800 px-2 py-1 rounded text-xs">Danger Level: Medium</span>
323
+ </div>
324
+ <p class="text-gray-700 mb-4">The highest mountain range where the air sparkles with magic. Floating islands drift between peaks, and ancient monasteries cling to sheer cliffs. Said to be the closest place to the heavens in all of Eldermere.</p>
325
+ <div class="flex justify-between items-center">
326
+ <div>
327
+ <h4 class="text-sm font-semibold mb-1">Notable Creatures</h4>
328
+ <div class="flex space-x-2">
329
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Celestial Phoenix</span>
330
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Cloud Drake</span>
331
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Mountain Spirit</span>
332
+ </div>
333
+ </div>
334
+ <button class="text-amber-700 hover:text-amber-900 font-medium">Explore →</button>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="text-center mt-10">
341
+ <button class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">
342
+ View All Locations (12)
343
+ </button>
344
+ </div>
345
+ </section>
346
+
347
+ <!-- About Section -->
348
+ <section id="about" class="p-8 parchment-bg rounded-lg shadow-inner">
349
+ <div class="max-w-4xl mx-auto">
350
+ <h2 class="title-font text-3xl font-bold text-center text-purple-900 mb-8">About the Monsterpedia</h2>
351
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
352
+ <div>
353
+ <h3 class="title-font text-xl font-semibold text-purple-800 mb-4">The World of Eldermere</h3>
354
+ <p class="text-gray-800 mb-4">Eldermere is a realm where magic flows like rivers and ancient creatures roam forgotten lands. Once a unified empire, it now exists as scattered kingdoms and wild territories after the Great Sundering.</p>
355
+ <p class="text-gray-800">This encyclopedia documents the fantastical beings that inhabit this world, from the smallest forest sprites to the colossal dragons that shape the landscape with their passing.</p>
356
+ </div>
357
+ <div>
358
+ <h3 class="title-font text-xl font-semibold text-purple-800 mb-4">How to Use</h3>
359
+ <ul class="space-y-3">
360
+ <li class="flex items-start">
361
+ <i class="fas fa-book-open text-purple-700 mt-1 mr-3"></i>
362
+ <span class="text-gray-800">Browse creatures by type, region, or threat level</span>
363
+ </li>
364
+ <li class="flex items-start">
365
+ <i class="fas fa-map text-amber-600 mt-1 mr-3"></i>
366
+ <span class="text-gray-800">Explore interactive maps of each region</span>
367
+ </li>
368
+ <li class="flex items-start">
369
+ <i class="fas fa-scroll text-purple-700 mt-1 mr-3"></i>
370
+ <span class="text-gray-800">Read ancient texts and first-hand accounts</span>
371
+ </li>
372
+ <li class="flex items-start">
373
+ <i class="fas fa-shield-alt text-amber-600 mt-1 mr-3"></i>
374
+ <span class="text-gray-800">Learn survival tactics for dangerous encounters</span>
375
+ </li>
376
+ </ul>
377
+ </div>
378
+ </div>
379
+ <div class="mt-8 text-center">
380
+ <button class="bg-purple-800 hover:bg-purple-900 text-white font-bold py-3 px-6 rounded-full mr-4">
381
+ <i class="fas fa-download mr-2"></i> Download Bestiary
382
+ </button>
383
+ <button class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-6 rounded-full">
384
+ <i class="fas fa-envelope mr-2"></i> Contact Scholars
385
+ </button>
386
+ </div>
387
+ </div>
388
+ </section>
389
+ </main>
390
+
391
+ <!-- Footer -->
392
+ <footer class="bg-purple-900 bg-opacity-90 text-white py-12">
393
+ <div class="container mx-auto px-4">
394
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
395
+ <div>
396
+ <h3 class="title-font text-xl font-bold mb-4">Monsterpedia</h3>
397
+ <p class="text-purple-200">Documenting the creatures of Eldermere since the 3rd Age</p>
398
+ <div class="flex space-x-4 mt-4">
399
+ <a href="#" class="text-purple-200 hover:text-white"><i class="fab fa-twitter"></i></a>
400
+ <a href="#" class="text-purple-200 hover:text-white"><i class="fab fa-instagram"></i></a>
401
+ <a href="#" class="text-purple-200 hover:text-white"><i class="fab fa-discord"></i></a>
402
+ </div>
403
+ </div>
404
+ <div>
405
+ <h4 class="title-font font-semibold mb-4">Creature Types</h4>
406
+ <ul class="space-y-2">
407
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Dragons</a></li>
408
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Beasts</a></li>
409
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Spirits</a></li>
410
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Undead</a></li>
411
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Elementals</a></li>
412
+ </ul>
413
+ </div>
414
+ <div>
415
+ <h4 class="title-font font-semibold mb-4">Regions</h4>
416
+ <ul class="space-y-2">
417
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Shadowmire</a></li>
418
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Celestial Peaks</a></li>
419
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Verdant Vale</a></li>
420
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Obsidian Wastes</a></li>
421
+ <li><a href="#" class="text-purple-200 hover:text-white hover:underline">Azure Expanse</a></li>
422
+ </ul>
423
+ </div>
424
+ <div>
425
+ <h4 class="title-font font-semibold mb-4">Newsletter</h4>
426
+ <p class="text-purple-200 mb-4">Get updates on newly discovered creatures</p>
427
+ <div class="flex">
428
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l focus:outline-none text-gray-800 w-full">
429
+ <button class="bg-amber-500 hover:bg-amber-600 px-4 py-2 rounded-r">
430
+ <i class="fas fa-paper-plane"></i>
431
+ </button>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ <div class="border-t border-purple-800 mt-8 pt-8 text-center text-purple-300">
436
+ <p>© 2023 Fantasy Monsterpedia. All rights reserved. | Created by the Eldermere Scholars Guild</p>
437
+ </div>
438
+ </div>
439
+ </footer>
440
+
441
+ <!-- Back to Top Button -->
442
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-purple-700 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hidden">
443
+ <i class="fas fa-arrow-up"></i>
444
+ </button>
445
+
446
+ <script>
447
+ // Mobile menu toggle
448
+ const menuBtn = document.getElementById('menu-btn');
449
+ const mobileMenu = document.getElementById('mobile-menu');
450
+
451
+ menuBtn.addEventListener('click', () => {
452
+ mobileMenu.classList.toggle('hidden');
453
+ });
454
+
455
+ // Back to top button
456
+ const backToTopBtn = document.getElementById('back-to-top');
457
+
458
+ window.addEventListener('scroll', () => {
459
+ if (window.pageYOffset > 300) {
460
+ backToTopBtn.classList.remove('hidden');
461
+ } else {
462
+ backToTopBtn.classList.add('hidden');
463
+ }
464
+ });
465
+
466
+ backToTopBtn.addEventListener('click', () => {
467
+ window.scrollTo({ top: 0, behavior: 'smooth' });
468
+ });
469
+
470
+ // Active nav link
471
+ const navLinks = document.querySelectorAll('.nav-link');
472
+
473
+ navLinks.forEach(link => {
474
+ link.addEventListener('click', function() {
475
+ navLinks.forEach(l => l.classList.remove('active'));
476
+ this.classList.add('active');
477
+
478
+ // Close mobile menu if open
479
+ if (!mobileMenu.classList.contains('hidden')) {
480
+ mobileMenu.classList.add('hidden');
481
+ }
482
+ });
483
+ });
484
+
485
+ // Simple animation for monster cards on scroll
486
+ const observerOptions = {
487
+ threshold: 0.1
488
+ };
489
+
490
+ const observer = new IntersectionObserver((entries) => {
491
+ entries.forEach(entry => {
492
+ if (entry.isIntersecting) {
493
+ entry.target.style.opacity = 1;
494
+ entry.target.style.transform = 'translateY(0)';
495
+ }
496
+ });
497
+ }, observerOptions);
498
+
499
+ document.querySelectorAll('.card').forEach(card => {
500
+ card.style.opacity = 0;
501
+ card.style.transform = 'translateY(20px)';
502
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
503
+ observer.observe(card);
504
+ });
505
+ </script>
506
+ <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=Denoria/mkmu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
507
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create a website where i can list different fantasy monsters, their story, attributes and specs and the different places inside that fantasy world. the design should be anime and fantasy themed.