Spaces:

weltenschmid
/

dg-rpg

Running

App Files Files Community

weltenschmid commited on Aug 20

Commit

39e015e

verified ·

1 Parent(s): 2c2c4d6

Hmm, can you do the whole thing without an iframe? Flexboxes or DIVs would do the same, don't they? - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +37 -22

index.html CHANGED Viewed

@@ -4,6 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nexus Protocol - Sci-Fi RPG</title>
     <style>
         /* Inlined Tailwind CSS */
         :root {
@@ -403,7 +418,7 @@
         .panel-hidden {
             opacity: 0;
-            pointer-events: none;6
         }
         .panel-visible {
@@ -731,11 +746,11 @@
         }
     </style>
 </head>
-<body class="relative h-full">
     <!-- Main Game View -->
-    <div id="gameView" class="absolute inset-0 overflow-hidden">
         <!-- Current Scene Background -->
-        <div id="sceneContainer" class="scene-container absolute inset-0 bg-gray-900 flex items-end justify-center scene-transition" style="background-image: url('https://i.imgur.com/Dw6qY7a.png')">
             <!-- Scene content will be dynamically loaded here -->
             <!-- Characters in Scene (max 15) -->
@@ -754,11 +769,11 @@
         </div>
         <!-- Player Status Bar (Minimal - expands on hover) -->
-        <div id="playerStatus" class="absolute bottom-0 left-0 right-0 h-16 bg-black bg-opacity-40 flex justify-center items-center transition-all duration-300 hover:h-24">
             <div class="flex items-center space-x-6 px-4">
                 <!-- Avatar -->
                 <div class="character-avatar w-12 h-12 rounded-full bg-gray-800 border-2 border-blue-500 overflow-hidden">
-                    <img src="https://i.imgur.com/JQ9qy0E.png" alt="Player" class="w-full h-full object-cover">
                 </div>
                 <!-- Health -->
@@ -822,11 +837,11 @@
         </div>
         <!-- Player Team (Callable Cards) -->
-        <div id="teamPanel" class="absolute bottom-20 left-0 right-0 flex justify-center space-x-2 px-4">
             <!-- Team member cards (5 total) -->
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer active">
                 <div class="h-12 bg-blue-900 flex items-center justify-center">
-                    <img src="https://i.imgur.com/3QZ2Q0X.png" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="health-bar w-full mb-1" style="width: 80%"></div>
@@ -836,7 +851,7 @@
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
                 <div class="h-12 bg-purple-900 flex items-center justify-center">
-                    <img src="https://i.imgur.com/5t5wY9j.png" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="health-bar w-full mb-1" style="width: 45%"></div>
@@ -846,7 +861,7 @@
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
                 <div class="h-12 bg-green-900 flex items-center justify-center">
-                    <img src="https://i.imgur.com/7VvX7Qq.png" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="energy-bar w-full mb-1" style="width: 30%"></div>
@@ -856,7 +871,7 @@
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
                 <div class="h-12 bg-red-900 flex items-center justify-center">
-                    <img src="https://i.imgur.com/9t5wY9j.png" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="health-bar w-full mb-1" style="width: 90%"></div>
@@ -866,7 +881,7 @@
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
                 <div class="h-12 bg-yellow-900 flex items-center justify-center">
-                    <img src="https://i.imgur.com/JQ9qy0E.png" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="health-bar w-full mb-1" style="width: 60%"></div>
@@ -876,7 +891,7 @@
         </div>
         <!-- Quick Access Menu (Top Right) -->
-        <div id="quickMenu" class="absolute top-4 right-4 flex space-x-2">
             <button class="hud-element w-10 h-10 rounded-full flex items-center justify-center text-blue-400 hover:text-blue-300">
                 <i class="fas fa-map"></i>
             </button>
@@ -889,19 +904,19 @@
         </div>
         <!-- Round Indicator (Top Left) -->
-        <div id="roundIndicator" class="absolute top-4 left-4 hud-element px-3 py-1 rounded-full">
             <span class="tech-font text-blue-400">ROUND <span id="roundNumber">1</span></span>
         </div>
         <!-- Action Points (Top Center) -->
-        <div id="actionPointsDisplay" class="absolute top-4 left-1/2 transform -translate-x-1/2 hud-element px-4 py-1 rounded-full flex items-center space-x-2">
             <i class="fas fa-bolt text-yellow-400"></i>
             <span class="tech-font">AP: <span id="apCount">4</span>/6</span>
         </div>
     </div>
     <!-- World Map Panel (Hidden by default) -->
-    <div id="mapPanel" class="absolute inset-0 bg-black bg-opacity-90 z-20 flex items-center justify-center panel-hidden">
         <div class="relative w-full h-full max-w-4xl max-h-4xl">
             <button id="closeMap" class="absolute top-4 right-4 text-2xl text-blue-400 hover:text-blue-300 z-30">
                 <i class="fas fa-times"></i>
@@ -949,7 +964,7 @@
     </div>
     <!-- Dialog Panel (Hidden by default) -->
-    <div id="dialogPanel" class="absolute bottom-0 left-0 right-0 h-1/3 bg-black bg-opacity-80 z-20 panel-hidden">
         <div class="h-full flex flex-col">
             <!-- Speaker Info -->
             <div class="flex items-center p-4 border-b border-blue-900">
@@ -988,7 +1003,7 @@
     </div>
     <!-- Action Panel (Hidden by default) -->
-    <div id="actionPanel" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-80 z-20 panel-hidden">
         <div class="p-4">
             <h3 class="tech-font text-xl text-blue-400 mb-4 text-center">COMBAT ACTIONS</h3>
@@ -1154,9 +1169,9 @@
             // Add characters to scene (max 15)
             const characters = [
-                { id: 'elandra', x: '70%', y: '60%', image: 'https://i.imgur.com/3QZ2Q0X.png' },
-                { id: 'scientist', x: '30%', y: '50%', image: 'https://i.imgur.com/5t5wY9j.png' },
-                { id: 'drone', x: '50%', y: '40%', image: 'https://i.imgur.com/7VvX7Qq.png' }
             ];
             characters.slice(0, 15).forEach(char => {
@@ -1333,5 +1348,5 @@
             }
         });
     </script>
-</body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nexus Protocol - Sci-Fi RPG</title>
+    <!-- Base64 Encoded Images -->
+    <script>
+    const images = {
+        sceneBg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
+        playerAvatar: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
+        elandra: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
+        thorgar: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
+        merlin: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
+        lydia: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
+        rook: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
+        scientist: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
+        drone: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg=="
+    };
+    </script>
     <style>
         /* Inlined Tailwind CSS */
         :root {
         .panel-hidden {
             opacity: 0;
+            pointer-events: none;
         }
         .panel-visible {
         }
     </style>
 </head>
+<body class="relative h-screen w-screen overflow-hidden">
     <!-- Main Game View -->
+    <div id="gameView" class="relative w-full h-full flex flex-col">
         <!-- Current Scene Background -->
+        <div id="sceneContainer" class="scene-container flex-1 bg-gray-900 flex items-end justify-center scene-transition" style="background-image: url('https://i.imgur.com/Dw6qY7a.png')">
             <!-- Scene content will be dynamically loaded here -->
             <!-- Characters in Scene (max 15) -->
         </div>
         <!-- Player Status Bar (Minimal - expands on hover) -->
+        <div id="playerStatus" class="w-full h-16 bg-black bg-opacity-40 flex justify-center items-center transition-all duration-300 hover:h-24">
             <div class="flex items-center space-x-6 px-4">
                 <!-- Avatar -->
                 <div class="character-avatar w-12 h-12 rounded-full bg-gray-800 border-2 border-blue-500 overflow-hidden">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Player" class="w-full h-full object-cover">
                 </div>
                 <!-- Health -->
         </div>
         <!-- Player Team (Callable Cards) -->
+        <div id="teamPanel" class="w-full flex justify-center space-x-2 px-4 mb-4">
             <!-- Team member cards (5 total) -->
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer active">
                 <div class="h-12 bg-blue-900 flex items-center justify-center">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="health-bar w-full mb-1" style="width: 80%"></div>
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
                 <div class="h-12 bg-purple-900 flex items-center justify-center">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="health-bar w-full mb-1" style="width: 45%"></div>
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
                 <div class="h-12 bg-green-900 flex items-center justify-center">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="energy-bar w-full mb-1" style="width: 30%"></div>
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
                 <div class="h-12 bg-red-900 flex items-center justify-center">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="health-bar w-full mb-1" style="width: 90%"></div>
             <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
                 <div class="h-12 bg-yellow-900 flex items-center justify-center">
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
                 </div>
                 <div class="p-1">
                     <div class="health-bar w-full mb-1" style="width: 60%"></div>
         </div>
         <!-- Quick Access Menu (Top Right) -->
+        <div id="quickMenu" class="absolute top-4 right-4 flex space-x-2 z-10">
             <button class="hud-element w-10 h-10 rounded-full flex items-center justify-center text-blue-400 hover:text-blue-300">
                 <i class="fas fa-map"></i>
             </button>
         </div>
         <!-- Round Indicator (Top Left) -->
+        <div id="roundIndicator" class="absolute top-4 left-4 hud-element px-3 py-1 rounded-full z-10">
             <span class="tech-font text-blue-400">ROUND <span id="roundNumber">1</span></span>
         </div>
         <!-- Action Points (Top Center) -->
+        <div id="actionPointsDisplay" class="absolute top-4 left-1/2 transform -translate-x-1/2 hud-element px-4 py-1 rounded-full flex items-center space-x-2 z-10">
             <i class="fas fa-bolt text-yellow-400"></i>
             <span class="tech-font">AP: <span id="apCount">4</span>/6</span>
         </div>
     </div>
     <!-- World Map Panel (Hidden by default) -->
+    <div id="mapPanel" class="fixed inset-0 bg-black bg-opacity-90 z-20 flex items-center justify-center panel-hidden">
         <div class="relative w-full h-full max-w-4xl max-h-4xl">
             <button id="closeMap" class="absolute top-4 right-4 text-2xl text-blue-400 hover:text-blue-300 z-30">
                 <i class="fas fa-times"></i>
     </div>
     <!-- Dialog Panel (Hidden by default) -->
+    <div id="dialogPanel" class="fixed bottom-0 left-0 right-0 h-1/3 bg-black bg-opacity-80 z-20 panel-hidden">
         <div class="h-full flex flex-col">
             <!-- Speaker Info -->
             <div class="flex items-center p-4 border-b border-blue-900">
     </div>
     <!-- Action Panel (Hidden by default) -->
+    <div id="actionPanel" class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-80 z-20 panel-hidden">
         <div class="p-4">
             <h3 class="tech-font text-xl text-blue-400 mb-4 text-center">COMBAT ACTIONS</h3>
             // Add characters to scene (max 15)
             const characters = [
+                { id: 'elandra', x: '70%', y: '60%', image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==' },
+                { id: 'scientist', x: '30%', y: '50%', image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==' },
+                { id: 'drone', x: '50%', y: '40%', image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==' }
             ];
             characters.slice(0, 15).forEach(char => {
             }
         });
     </script>
+<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/dg-rpg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>