Hugging Face's logo

Spaces:
weltenschmid
/
nebuladrift
Running

App Files Community
weltenschmid commited on
Commit
f4173ba
·
verified ·
1 Parent(s): ec7274d

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +424 -61
  2. prompts.txt +3 -1
index.html CHANGED
@@ -3,17 +3,62 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Nebula Drift - Sci-Fi RPG</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=Orbitron:wght@400;700&family=Roboto:wght@300;400;500&display=swap');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
 
12
  :root {
13
  --neon-blue: #00f7ff;
14
  --neon-purple: #b300ff;
15
  --deep-space: #0a0a1a;
16
  --star-dust: #e0e0e0;
 
 
 
 
 
17
  }
18
 
19
  body {
@@ -34,7 +79,7 @@
34
  position: relative;
35
  width: 100%;
36
  height: 100vh;
37
- background-image: url('https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?q=80&w=1000');
38
  background-size: cover;
39
  background-position: center;
40
  }
@@ -139,42 +184,177 @@
139
  border-top: 1px solid var(--neon-blue);
140
  }
141
 
142
- .scene-character {
143
  position: absolute;
 
 
144
  transition: all 0.5s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
145
  cursor: pointer;
146
  }
147
 
148
- .scene-character img {
149
- filter: drop-shadow(0 0 5px var(--neon-purple));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
  }
151
  </style>
152
  </head>
153
  <body>
154
  <div class="game-container" id="gameContainer">
155
- <!-- Game Scene (Visual Novel Style) -->
156
  <div class="absolute inset-0 flex items-center justify-center">
157
- <div class="w-full h-full bg-black bg-opacity-50 flex flex-col">
158
- <!-- Scene Background -->
159
- <div class="flex-1 relative overflow-hidden">
160
- <!-- Scene characters will be dynamically added here -->
161
- <div id="sceneCharacters"></div>
162
 
163
- <!-- Dialogue Box -->
164
- <div class="absolute bottom-20 left-0 right-0 mx-auto w-3/4 dialogue-box p-4 rounded-lg blend-in" id="dialogueBox">
165
- <div class="flex items-start mb-2">
166
- <div class="w-12 h-12 rounded-full bg-gray-700 mr-3 overflow-hidden">
167
- <img src="https://i.pravatar.cc/100" alt="Character" class="w-full h-full object-cover">
168
- </div>
 
 
 
 
 
 
 
169
  <div>
170
- <h3 class="sci-fi-font text-neon-blue mb-1">Commander Vex</h3>
171
- <p class="text-sm">We need to move quickly. The quantum destabilizer won't hold much longer. What's your order, captain?</p>
 
 
 
 
 
172
  </div>
173
  </div>
174
- <div class="flex justify-end space-x-2">
175
- <button class="px-3 py-1 bg-transparent border border-neon-blue text-neon-blue rounded hover:bg-neon-blue hover:text-black transition">1. Secure the perimeter</button>
176
- <button class="px-3 py-1 bg-transparent border border-neon-blue text-neon-blue rounded hover:bg-neon-blue hover:text-black transition">2. Fall back to extraction</button>
177
- <button class="px-3 py-1 bg-transparent border border-neon-blue text-neon-blue rounded hover:bg-neon-blue hover:text-black transition">3. Split the team</button>
 
 
 
178
  </div>
179
  </div>
180
  </div>
@@ -247,7 +427,7 @@
247
  // Initialize game elements
248
  initPartyCards();
249
  initNodeMap();
250
- initSceneCharacters();
251
 
252
  // UI Toggles
253
  const mapToggle = document.getElementById('mapToggle');
@@ -255,7 +435,10 @@
255
  const closeMap = document.getElementById('closeMap');
256
  const menuToggle = document.getElementById('menuToggle');
257
  const quickMenu = document.getElementById('quickMenu');
258
- const dialogueBox = document.getElementById('dialogueBox');
 
 
 
259
 
260
  mapToggle.addEventListener('click', function() {
261
  mapOverlay.classList.toggle('hidden');
@@ -271,20 +454,21 @@
271
  quickMenu.classList.toggle('hidden');
272
  });
273
 
274
- // Show dialogue box on hover
275
- document.getElementById('gameContainer').addEventListener('mousemove', function(e) {
276
- if (e.clientY > window.innerHeight - 100) {
277
- dialogueBox.classList.remove('blend-in');
278
- } else {
279
- dialogueBox.classList.add('blend-in');
280
- }
281
  });
282
 
283
- // Sample character click event
284
- document.getElementById('sceneCharacters').addEventListener('click', function(e) {
285
- if (e.target.closest('.scene-character')) {
286
- // Show character details or initiate dialogue
287
- alert('Character interaction would go here');
 
 
288
  }
289
  });
290
  });
@@ -391,33 +575,212 @@
391
  });
392
  }
393
 
394
- function initSceneCharacters() {
395
- const sceneCharacters = document.getElementById('sceneCharacters');
 
 
 
 
396
 
397
- // Sample scene characters (max 15)
398
- const characters = [
399
- { id: 1, x: 20, y: 60, name: 'Dr. Elara', img: 'https://i.pravatar.cc/150?img=11' },
400
- { id: 2, x: 40, y: 70, name: 'Lt. Kael', img: 'https://i.pravatar.cc/150?img=12' },
401
- { id: 3, x: 60, y: 50, name: 'Engineer Tosh', img: 'https://i.pravatar.cc/150?img=13' },
402
- { id: 4, x: 30, y: 40, name: 'Medic Vara', img: 'https://i.pravatar.cc/150?img=14' },
403
- { id: 5, x: 70, y: 30, name: 'Security Dex', img: 'https://i.pravatar.cc/150?img=15' }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
404
  ];
405
 
406
- characters.forEach(char => {
407
- const charEl = document.createElement('div');
408
- charEl.className = 'scene-character';
409
- charEl.style.left = `${char.x}%`;
410
- charEl.style.top = `${char.y}%`;
411
- charEl.innerHTML = `
412
- <div class="relative">
413
- <img src="${char.img}" alt="${char.name}" class="w-16 h-16 rounded-full object-cover">
414
- <div class="absolute -bottom-5 left-0 right-0 text-center text-xs bg-black bg-opacity-70 rounded px-1 truncate">
415
- ${char.name}
416
- </div>
417
- </div>
418
- `;
419
- sceneCharacters.appendChild(charEl);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
420
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
421
  }
422
  </script>
423
  <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=weltenschmid/nebuladrift" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nebula Drift - Planetary Explorer</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
+ /* Inlined Orbitron and Roboto fonts from Google Fonts */
11
+ @font-face {
12
+ font-family: 'Orbitron';
13
+ font-style: normal;
14
+ font-weight: 400;
15
+ font-display: swap;
16
+ src: url(https://fonts.gstatic.com/s/orbitron/v25/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');
17
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
18
+ }
19
+ @font-face {
20
+ font-family: 'Orbitron';
21
+ font-style: normal;
22
+ font-weight: 700;
23
+ font-display: swap;
24
+ src: url(https://fonts.gstatic.com/s/orbitron/v25/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');
25
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
26
+ }
27
+ @font-face {
28
+ font-family: 'Roboto';
29
+ font-style: normal;
30
+ font-weight: 300;
31
+ font-display: swap;
32
+ src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
33
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
34
+ }
35
+ @font-face {
36
+ font-family: 'Roboto';
37
+ font-style: normal;
38
+ font-weight: 400;
39
+ font-display: swap;
40
+ src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
41
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
42
+ }
43
+ @font-face {
44
+ font-family: 'Roboto';
45
+ font-style: normal;
46
+ font-weight: 500;
47
+ font-display: swap;
48
+ src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
49
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
50
+ }
51
 
52
  :root {
53
  --neon-blue: #00f7ff;
54
  --neon-purple: #b300ff;
55
  --deep-space: #0a0a1a;
56
  --star-dust: #e0e0e0;
57
+ --planet-1: #ff6b6b;
58
+ --planet-2: #48dbfb;
59
+ --planet-3: #1dd1a1;
60
+ --planet-4: #feca57;
61
+ --planet-5: #5f27cd;
62
  }
63
 
64
  body {
 
79
  position: relative;
80
  width: 100%;
81
  height: 100vh;
82
+ background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?q=80&w=1000');
83
  background-size: cover;
84
  background-position: center;
85
  }
 
184
  border-top: 1px solid var(--neon-blue);
185
  }
186
 
187
+ .planet {
188
  position: absolute;
189
+ border-radius: 50%;
190
+ cursor: pointer;
191
  transition: all 0.5s ease;
192
+ display: flex;
193
+ flex-direction: column;
194
+ align-items: center;
195
+ }
196
+
197
+ .planet:hover {
198
+ transform: scale(1.1);
199
+ }
200
+
201
+ .planet-1 {
202
+ background: radial-gradient(circle at 30% 30%, var(--planet-1), #cc0000);
203
+ box-shadow: 0 0 20px var(--planet-1);
204
+ }
205
+
206
+ .planet-2 {
207
+ background: radial-gradient(circle at 30% 30%, var(--planet-2), #0099cc);
208
+ box-shadow: 0 0 20px var(--planet-2);
209
+ }
210
+
211
+ .planet-3 {
212
+ background: radial-gradient(circle at 30% 30%, var(--planet-3), #00997a);
213
+ box-shadow: 0 0 20px var(--planet-3);
214
+ }
215
+
216
+ .planet-4 {
217
+ background: radial-gradient(circle at 30% 30%, var(--planet-4), #cc9900);
218
+ box-shadow: 0 0 20px var(--planet-4);
219
+ }
220
+
221
+ .planet-5 {
222
+ background: radial-gradient(circle at 30% 30%, var(--planet-5), #4a0099);
223
+ box-shadow: 0 0 20px var(--planet-5);
224
+ }
225
+
226
+ .planet-label {
227
+ margin-top: 5px;
228
+ font-size: 0.8rem;
229
+ background: rgba(0, 0, 0, 0.7);
230
+ padding: 2px 6px;
231
+ border-radius: 10px;
232
+ white-space: nowrap;
233
+ }
234
+
235
+ .inhabitants-panel {
236
+ position: absolute;
237
+ bottom: 80px;
238
+ left: 50%;
239
+ transform: translateX(-50%);
240
+ width: 80%;
241
+ max-height: 200px;
242
+ background: rgba(10, 10, 26, 0.95);
243
+ border: 1px solid var(--neon-purple);
244
+ border-radius: 8px;
245
+ padding: 15px;
246
+ display: none;
247
+ flex-wrap: wrap;
248
+ justify-content: center;
249
+ gap: 10px;
250
+ overflow-y: auto;
251
+ box-shadow: 0 0 20px rgba(179, 0, 255, 0.5);
252
+ }
253
+
254
+ .inhabitant {
255
+ width: 60px;
256
+ text-align: center;
257
  cursor: pointer;
258
  }
259
 
260
+ .inhabitant img {
261
+ width: 50px;
262
+ height: 50px;
263
+ border-radius: 50%;
264
+ object-fit: cover;
265
+ border: 2px solid var(--neon-blue);
266
+ margin-bottom: 5px;
267
+ }
268
+
269
+ .inhabitant-name {
270
+ font-size: 0.7rem;
271
+ white-space: nowrap;
272
+ overflow: hidden;
273
+ text-overflow: ellipsis;
274
+ }
275
+
276
+ .planet-details {
277
+ position: absolute;
278
+ top: 50%;
279
+ left: 50%;
280
+ transform: translate(-50%, -50%);
281
+ width: 70%;
282
+ max-width: 500px;
283
+ background: rgba(10, 10, 26, 0.95);
284
+ border: 1px solid var(--neon-purple);
285
+ border-radius: 8px;
286
+ padding: 20px;
287
+ display: none;
288
+ z-index: 100;
289
+ box-shadow: 0 0 30px rgba(179, 0, 255, 0.7);
290
+ }
291
+
292
+ .close-panel {
293
+ position: absolute;
294
+ top: 10px;
295
+ right: 10px;
296
+ color: var(--neon-blue);
297
+ cursor: pointer;
298
+ }
299
+
300
+ .planet-ring {
301
+ position: absolute;
302
+ border-radius: 50%;
303
+ border: 2px solid rgba(255, 255, 255, 0.5);
304
+ transform-origin: center;
305
+ }
306
+
307
+ .pulse {
308
+ animation: pulse 2s infinite;
309
+ }
310
+
311
+ @keyframes pulse {
312
+ 0% { transform: scale(1); opacity: 0.7; }
313
+ 50% { transform: scale(1.05); opacity: 1; }
314
+ 100% { transform: scale(1); opacity: 0.7; }
315
  }
316
  </style>
317
  </head>
318
  <body>
319
  <div class="game-container" id="gameContainer">
320
+ <!-- Game Scene (Planetary View) -->
321
  <div class="absolute inset-0 flex items-center justify-center">
322
+ <div class="w-full h-full bg-black bg-opacity-30 flex flex-col">
323
+ <!-- Space Background with Planets -->
324
+ <div class="flex-1 relative overflow-hidden" id="spaceView">
325
+ <!-- Planets will be dynamically added here -->
326
+ <div id="planetsContainer"></div>
327
 
328
+ <!-- Inhabitants Panel -->
329
+ <div class="inhabitants-panel" id="inhabitantsPanel">
330
+ <div class="close-panel" id="closeInhabitants"><i class="fas fa-times"></i></div>
331
+ <h3 class="w-full text-center sci-fi-font text-neon-blue mb-3">Planetary Inhabitants</h3>
332
+ <!-- Inhabitants will be dynamically added here -->
333
+ <div id="inhabitantsList"></div>
334
+ </div>
335
+
336
+ <!-- Planet Details Panel -->
337
+ <div class="planet-details" id="planetDetails">
338
+ <div class="close-panel" id="closePlanetDetails"><i class="fas fa-times"></i></div>
339
+ <div class="flex items-start">
340
+ <div class="w-20 h-20 rounded-full mr-4" id="planetDetailImage"></div>
341
  <div>
342
+ <h2 class="sci-fi-font text-xl text-neon-purple mb-2" id="planetDetailName"></h2>
343
+ <div class="text-sm mb-3" id="planetDetailDescription"></div>
344
+ <div class="flex space-x-4 text-xs">
345
+ <div><span class="text-neon-blue">Population:</span> <span id="planetDetailPopulation"></span></div>
346
+ <div><span class="text-neon-blue">Tech Level:</span> <span id="planetDetailTech"></span></div>
347
+ <div><span class="text-neon-blue">Status:</span> <span id="planetDetailStatus"></span></div>
348
+ </div>
349
  </div>
350
  </div>
351
+ <div class="mt-4 pt-4 border-t border-neon-blue">
352
+ <h4 class="sci-fi-font text-neon-blue mb-2">Notable Locations</h4>
353
+ <div class="flex flex-wrap gap-2" id="planetLocations"></div>
354
+ </div>
355
+ <div class="mt-4 pt-4 border-t border-neon-blue">
356
+ <h4 class="sci-fi-font text-neon-blue mb-2">Planetary Resources</h4>
357
+ <div class="flex flex-wrap gap-2" id="planetResources"></div>
358
  </div>
359
  </div>
360
  </div>
 
427
  // Initialize game elements
428
  initPartyCards();
429
  initNodeMap();
430
+ initPlanets();
431
 
432
  // UI Toggles
433
  const mapToggle = document.getElementById('mapToggle');
 
435
  const closeMap = document.getElementById('closeMap');
436
  const menuToggle = document.getElementById('menuToggle');
437
  const quickMenu = document.getElementById('quickMenu');
438
+ const closeInhabitants = document.getElementById('closeInhabitants');
439
+ const closePlanetDetails = document.getElementById('closePlanetDetails');
440
+ const inhabitantsPanel = document.getElementById('inhabitantsPanel');
441
+ const planetDetails = document.getElementById('planetDetails');
442
 
443
  mapToggle.addEventListener('click', function() {
444
  mapOverlay.classList.toggle('hidden');
 
454
  quickMenu.classList.toggle('hidden');
455
  });
456
 
457
+ closeInhabitants.addEventListener('click', function() {
458
+ inhabitantsPanel.style.display = 'none';
459
+ });
460
+
461
+ closePlanetDetails.addEventListener('click', function() {
462
+ planetDetails.style.display = 'none';
 
463
  });
464
 
465
+ // Close panels when clicking outside
466
+ document.addEventListener('click', function(e) {
467
+ if (!inhabitantsPanel.contains(e.target) && !e.target.closest('.planet')) {
468
+ inhabitantsPanel.style.display = 'none';
469
+ }
470
+ if (!planetDetails.contains(e.target) && !e.target.closest('.planet') && !e.target.closest('.inhabitant')) {
471
+ planetDetails.style.display = 'none';
472
  }
473
  });
474
  });
 
575
  });
576
  }
577
 
578
+ function initPlanets() {
579
+ const planetsContainer = document.getElementById('planetsContainer');
580
+ const inhabitantsPanel = document.getElementById('inhabitantsPanel');
581
+ const inhabitantsList = document.getElementById('inhabitantsList');
582
+ const planetDetails = document.getElementById('planetDetails');
583
+ const planetResources = document.getElementById('planetResources');
584
 
585
+ // Sample planetary data
586
+ const planets = [
587
+ {
588
+ id: 1,
589
+ name: "Pyronis",
590
+ type: "planet-1",
591
+ x: 20,
592
+ y: 30,
593
+ size: 80,
594
+ description: "A molten world with rivers of lava and towering obsidian spires. Home to the heat-resistant Pyronians.",
595
+ population: "12.7 billion",
596
+ tech: "Industrial",
597
+ status: "Allied",
598
+ resources: ["Magma Crystals", "Obsidian", "Thermal Energy"],
599
+ inhabitants: [
600
+ { id: 1, name: "Ignar", img: "https://i.pravatar.cc/150?img=11", role: "High Priest" },
601
+ { id: 2, name: "Vulthra", img: "https://i.pravatar.cc/150?img=12", role: "Miner Guildmaster" },
602
+ { id: 3, name: "Flarxis", img: "https://i.pravatar.cc/150?img=13", role: "Diplomat" }
603
+ ],
604
+ locations: ["Obsidian Citadel", "Magma Forges", "The Eternal Caldera"]
605
+ },
606
+ {
607
+ id: 2,
608
+ name: "Aquarion",
609
+ type: "planet-2",
610
+ x: 50,
611
+ y: 60,
612
+ size: 100,
613
+ description: "A water world with floating cities and deep ocean trenches hiding ancient secrets.",
614
+ population: "8.3 billion",
615
+ tech: "Advanced",
616
+ status: "Neutral",
617
+ resources: ["Aqua Crystals", "Deep Sea Minerals", "Hydro Energy"],
618
+ inhabitants: [
619
+ { id: 4, name: "Marei", img: "https://i.pravatar.cc/150?img=14", role: "Oceanographer" },
620
+ { id: 5, name: "Tidalis", img: "https://i.pravatar.cc/150?img=15", role: "Fleet Admiral" },
621
+ { id: 6, name: "Nerissa", img: "https://i.pravatar.cc/150?img=16", role: "Historian" }
622
+ ],
623
+ locations: ["Neptune Spire", "Abyssal Station", "The Coral Bazaar"]
624
+ },
625
+ {
626
+ id: 3,
627
+ name: "Verdantis",
628
+ type: "planet-3",
629
+ x: 70,
630
+ y: 40,
631
+ size: 90,
632
+ description: "A lush jungle planet with towering flora and diverse ecosystems. The Verdans live in harmony with nature.",
633
+ population: "5.2 billion",
634
+ tech: "Pre-Warp",
635
+ status: "Friendly",
636
+ resources: ["Bio-Organic Compounds", "Rare Herbs", "Solar Energy"],
637
+ inhabitants: [
638
+ { id: 7, name: "Silva", img: "https://i.pravatar.cc/150?img=17", role: "Elder" },
639
+ { id: 8, name: "Terrax", img: "https://i.pravatar.cc/150?img=18", role: "Hunter" },
640
+ { id: 9, name: "Flora", img: "https://i.pravatar.cc/150?img=19", role: "Herbalist" }
641
+ ],
642
+ locations: ["Canopy City", "Root Nexus", "The Shimmering Falls"]
643
+ },
644
+ {
645
+ id: 4,
646
+ name: "Aurelia",
647
+ type: "planet-4",
648
+ x: 30,
649
+ y: 70,
650
+ size: 70,
651
+ description: "A desert planet with golden sands and ancient ruins. The Aurelians are nomadic traders and scholars.",
652
+ population: "3.9 billion",
653
+ tech: "Medieval",
654
+ status: "Cautious",
655
+ resources: ["Golden Sand", "Ancient Artifacts", "Solar Power"],
656
+ inhabitants: [
657
+ { id: 10, name: "Solon", img: "https://i.pravatar.cc/150?img=20", role: "Archaeologist" },
658
+ { id: 11, name: "Dunea", img: "https://i.pravatar.cc/150?img=21", role: "Merchant Queen" },
659
+ { id: 12, name: "Ozymar", img: "https://i.pravatar.cc/150?img=22", role: "Star Gazer" }
660
+ ],
661
+ locations: ["The Golden Pyramid", "Oasis of Mirrors", "The Singing Dunes"]
662
+ },
663
+ {
664
+ id: 5,
665
+ name: "Umbrax",
666
+ type: "planet-5",
667
+ x: 80,
668
+ y: 20,
669
+ size: 60,
670
+ description: "A dark planet shrouded in perpetual twilight. The Umbrians are secretive and technologically advanced.",
671
+ population: "1.1 billion",
672
+ tech: "Cutting Edge",
673
+ status: "Hostile",
674
+ resources: ["Dark Matter", "Void Crystals", "Zero-Point Energy"],
675
+ inhabitants: [
676
+ { id: 13, name: "Noctis", img: "https://i.pravatar.cc/150?img=23", role: "Shadow Minister" },
677
+ { id: 14, name: "Eclipsa", img: "https://i.pravatar.cc/150?img=24", role: "Scientist" },
678
+ { id: 15, name: "Voidar", img: "https://i.pravatar.cc/150?img=25", role: "Security Chief" }
679
+ ],
680
+ locations: ["The Dark Spire", "Twilight Archives", "The Veil Gate"]
681
+ }
682
  ];
683
 
684
+ // Create planets
685
+ planets.forEach(planet => {
686
+ const planetEl = document.createElement('div');
687
+ planetEl.className = `planet ${planet.type} pulse`;
688
+ planetEl.style.width = `${planet.size}px`;
689
+ planetEl.style.height = `${planet.size}px`;
690
+ planetEl.style.left = `${planet.x}%`;
691
+ planetEl.style.top = `${planet.y}%`;
692
+ planetEl.dataset.planetId = planet.id;
693
+
694
+ // Add rings for some planets
695
+ if (planet.id === 2 || planet.id === 5) {
696
+ const ring = document.createElement('div');
697
+ ring.className = 'planet-ring';
698
+ ring.style.width = `${planet.size * 1.8}px`;
699
+ ring.style.height = `${planet.size * 0.4}px`;
700
+ ring.style.transform = `rotate(${Math.random() * 60}deg)`;
701
+ planetEl.appendChild(ring);
702
+ }
703
+
704
+ // Add planet label
705
+ const label = document.createElement('div');
706
+ label.className = 'planet-label sci-fi-font';
707
+ label.textContent = planet.name;
708
+ planetEl.appendChild(label);
709
+
710
+ // Add click event to show inhabitants
711
+ planetEl.addEventListener('click', function(e) {
712
+ e.stopPropagation();
713
+
714
+ // Position inhabitants panel near the planet
715
+ inhabitantsPanel.style.left = `${planet.x}%`;
716
+ inhabitantsPanel.style.transform = 'translateX(-50%)';
717
+ inhabitantsPanel.style.display = 'flex';
718
+
719
+ // Populate inhabitants
720
+ inhabitantsList.innerHTML = '';
721
+ planet.inhabitants.forEach(inhabitant => {
722
+ const inhabitantEl = document.createElement('div');
723
+ inhabitantEl.className = 'inhabitant';
724
+ inhabitantEl.innerHTML = `
725
+ <img src="${inhabitant.img}" alt="${inhabitant.name}">
726
+ <div class="inhabitant-name">${inhabitant.name}</div>
727
+ <div class="text-xxs text-neon-blue">${inhabitant.role}</div>
728
+ `;
729
+ inhabitantEl.addEventListener('click', function() {
730
+ showPlanetDetails(planet);
731
+ });
732
+ inhabitantsList.appendChild(inhabitantEl);
733
+ });
734
+ });
735
+
736
+ // Add double click for planet details
737
+ planetEl.addEventListener('dblclick', function() {
738
+ showPlanetDetails(planet);
739
+ });
740
+
741
+ planetsContainer.appendChild(planetEl);
742
  });
743
+
744
+ function showPlanetDetails(planet) {
745
+ const planetDetailImage = document.getElementById('planetDetailImage');
746
+ const planetDetailName = document.getElementById('planetDetailName');
747
+ const planetDetailDescription = document.getElementById('planetDetailDescription');
748
+ const planetDetailPopulation = document.getElementById('planetDetailPopulation');
749
+ const planetDetailTech = document.getElementById('planetDetailTech');
750
+ const planetDetailStatus = document.getElementById('planetDetailStatus');
751
+ const planetLocations = document.getElementById('planetLocations');
752
+ const planetResources = document.getElementById('planetResources');
753
+
754
+ // Set planet details
755
+ planetDetailImage.className = `w-20 h-20 rounded-full mr-4 ${planet.type}`;
756
+ planetDetailName.textContent = planet.name;
757
+ planetDetailDescription.textContent = planet.description;
758
+ planetDetailPopulation.textContent = planet.population;
759
+ planetDetailTech.textContent = planet.tech;
760
+ planetDetailStatus.textContent = planet.status;
761
+
762
+ // Add locations
763
+ planetLocations.innerHTML = '';
764
+ planet.locations.forEach(location => {
765
+ const locationEl = document.createElement('div');
766
+ locationEl.className = 'px-3 py-1 bg-neon-blue bg-opacity-20 rounded-full text-xs';
767
+ locationEl.textContent = location;
768
+ planetLocations.appendChild(locationEl);
769
+ });
770
+
771
+ // Add resources
772
+ planetResources.innerHTML = '';
773
+ planet.resources.forEach(resource => {
774
+ const resourceEl = document.createElement('div');
775
+ resourceEl.className = 'px-3 py-1 bg-neon-purple bg-opacity-20 rounded-full text-xs';
776
+ resourceEl.textContent = resource;
777
+ planetResources.appendChild(resourceEl);
778
+ });
779
+
780
+ // Show panel
781
+ planetDetails.style.display = 'block';
782
+ inhabitantsPanel.style.display = 'none';
783
+ }
784
  }
785
  </script>
786
  <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=weltenschmid/nebuladrift" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1 +1,3 @@
1
- Can you design a game interface for a round-based sci-fi rpg with a blend of visual novel? The map is a node-based array of scenes. Characters may freely roam the map. Maximum 15 visible characters on the screen. The players 5 characters are callable cards placed on the bottom of the screen. The interface should be as lightweight as possible on first sight. But may be expanded, blended in or slid in as needed or when hovered over. A layer for the world map is for easy navigation between previously explored map elements. The game view should be maximised and having the player immersed in the point of view of the avatar. This means a little space below the whole game screen to have the player look on herself to view her status.
 
 
 
1
+ Can you design a game interface for a round-based sci-fi rpg with a blend of visual novel? The map is a node-based array of scenes. Characters may freely roam the map. Maximum 15 visible characters on the screen. The players 5 characters are callable cards placed on the bottom of the screen. The interface should be as lightweight as possible on first sight. But may be expanded, blended in or slid in as needed or when hovered over. A layer for the world map is for easy navigation between previously explored map elements. The game view should be maximised and having the player immersed in the point of view of the avatar. This means a little space below the whole game screen to have the player look on herself to view her status.
2
+ Nice! Now this looks like the map overview. Could the people be replaced by planets and instead shown as inhabitants of such planets?
3
+ Is it possible to inline css and fonts or having them locally accessible?