Hugging Face's logo

Spaces:
weltenschmid
/
dg-rpg
Running

App Files Community
weltenschmid commited on
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
  1. index.html +37 -22
index.html CHANGED
@@ -4,6 +4,21 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Nexus Protocol - Sci-Fi RPG</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  <style>
8
  /* Inlined Tailwind CSS */
9
  :root {
@@ -403,7 +418,7 @@
403
 
404
  .panel-hidden {
405
  opacity: 0;
406
- pointer-events: none;6
407
  }
408
 
409
  .panel-visible {
@@ -731,11 +746,11 @@
731
  }
732
  </style>
733
  </head>
734
- <body class="relative h-full">
735
  <!-- Main Game View -->
736
- <div id="gameView" class="absolute inset-0 overflow-hidden">
737
  <!-- Current Scene Background -->
738
- <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')">
739
  <!-- Scene content will be dynamically loaded here -->
740
 
741
  <!-- Characters in Scene (max 15) -->
@@ -754,11 +769,11 @@
754
  </div>
755
 
756
  <!-- Player Status Bar (Minimal - expands on hover) -->
757
- <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">
758
  <div class="flex items-center space-x-6 px-4">
759
  <!-- Avatar -->
760
  <div class="character-avatar w-12 h-12 rounded-full bg-gray-800 border-2 border-blue-500 overflow-hidden">
761
- <img src="https://i.imgur.com/JQ9qy0E.png" alt="Player" class="w-full h-full object-cover">
762
  </div>
763
 
764
  <!-- Health -->
@@ -822,11 +837,11 @@
822
  </div>
823
 
824
  <!-- Player Team (Callable Cards) -->
825
- <div id="teamPanel" class="absolute bottom-20 left-0 right-0 flex justify-center space-x-2 px-4">
826
  <!-- Team member cards (5 total) -->
827
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer active">
828
  <div class="h-12 bg-blue-900 flex items-center justify-center">
829
- <img src="https://i.imgur.com/3QZ2Q0X.png" alt="Teammate" class="w-full h-full object-cover">
830
  </div>
831
  <div class="p-1">
832
  <div class="health-bar w-full mb-1" style="width: 80%"></div>
@@ -836,7 +851,7 @@
836
 
837
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
838
  <div class="h-12 bg-purple-900 flex items-center justify-center">
839
- <img src="https://i.imgur.com/5t5wY9j.png" alt="Teammate" class="w-full h-full object-cover">
840
  </div>
841
  <div class="p-1">
842
  <div class="health-bar w-full mb-1" style="width: 45%"></div>
@@ -846,7 +861,7 @@
846
 
847
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
848
  <div class="h-12 bg-green-900 flex items-center justify-center">
849
- <img src="https://i.imgur.com/7VvX7Qq.png" alt="Teammate" class="w-full h-full object-cover">
850
  </div>
851
  <div class="p-1">
852
  <div class="energy-bar w-full mb-1" style="width: 30%"></div>
@@ -856,7 +871,7 @@
856
 
857
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
858
  <div class="h-12 bg-red-900 flex items-center justify-center">
859
- <img src="https://i.imgur.com/9t5wY9j.png" alt="Teammate" class="w-full h-full object-cover">
860
  </div>
861
  <div class="p-1">
862
  <div class="health-bar w-full mb-1" style="width: 90%"></div>
@@ -866,7 +881,7 @@
866
 
867
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
868
  <div class="h-12 bg-yellow-900 flex items-center justify-center">
869
- <img src="https://i.imgur.com/JQ9qy0E.png" alt="Teammate" class="w-full h-full object-cover">
870
  </div>
871
  <div class="p-1">
872
  <div class="health-bar w-full mb-1" style="width: 60%"></div>
@@ -876,7 +891,7 @@
876
  </div>
877
 
878
  <!-- Quick Access Menu (Top Right) -->
879
- <div id="quickMenu" class="absolute top-4 right-4 flex space-x-2">
880
  <button class="hud-element w-10 h-10 rounded-full flex items-center justify-center text-blue-400 hover:text-blue-300">
881
  <i class="fas fa-map"></i>
882
  </button>
@@ -889,19 +904,19 @@
889
  </div>
890
 
891
  <!-- Round Indicator (Top Left) -->
892
- <div id="roundIndicator" class="absolute top-4 left-4 hud-element px-3 py-1 rounded-full">
893
  <span class="tech-font text-blue-400">ROUND <span id="roundNumber">1</span></span>
894
  </div>
895
 
896
  <!-- Action Points (Top Center) -->
897
- <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">
898
  <i class="fas fa-bolt text-yellow-400"></i>
899
  <span class="tech-font">AP: <span id="apCount">4</span>/6</span>
900
  </div>
901
  </div>
902
 
903
  <!-- World Map Panel (Hidden by default) -->
904
- <div id="mapPanel" class="absolute inset-0 bg-black bg-opacity-90 z-20 flex items-center justify-center panel-hidden">
905
  <div class="relative w-full h-full max-w-4xl max-h-4xl">
906
  <button id="closeMap" class="absolute top-4 right-4 text-2xl text-blue-400 hover:text-blue-300 z-30">
907
  <i class="fas fa-times"></i>
@@ -949,7 +964,7 @@
949
  </div>
950
 
951
  <!-- Dialog Panel (Hidden by default) -->
952
- <div id="dialogPanel" class="absolute bottom-0 left-0 right-0 h-1/3 bg-black bg-opacity-80 z-20 panel-hidden">
953
  <div class="h-full flex flex-col">
954
  <!-- Speaker Info -->
955
  <div class="flex items-center p-4 border-b border-blue-900">
@@ -988,7 +1003,7 @@
988
  </div>
989
 
990
  <!-- Action Panel (Hidden by default) -->
991
- <div id="actionPanel" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-80 z-20 panel-hidden">
992
  <div class="p-4">
993
  <h3 class="tech-font text-xl text-blue-400 mb-4 text-center">COMBAT ACTIONS</h3>
994
 
@@ -1154,9 +1169,9 @@
1154
 
1155
  // Add characters to scene (max 15)
1156
  const characters = [
1157
- { id: 'elandra', x: '70%', y: '60%', image: 'https://i.imgur.com/3QZ2Q0X.png' },
1158
- { id: 'scientist', x: '30%', y: '50%', image: 'https://i.imgur.com/5t5wY9j.png' },
1159
- { id: 'drone', x: '50%', y: '40%', image: 'https://i.imgur.com/7VvX7Qq.png' }
1160
  ];
1161
 
1162
  characters.slice(0, 15).forEach(char => {
@@ -1333,5 +1348,5 @@
1333
  }
1334
  });
1335
  </script>
1336
- </body>
1337
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Nexus Protocol - Sci-Fi RPG</title>
7
+
8
+ <!-- Base64 Encoded Images -->
9
+ <script>
10
+ const images = {
11
+ sceneBg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
12
+ playerAvatar: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
13
+ elandra: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
14
+ thorgar: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
15
+ merlin: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
16
+ lydia: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
17
+ rook: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
18
+ scientist: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==",
19
+ drone: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg=="
20
+ };
21
+ </script>
22
  <style>
23
  /* Inlined Tailwind CSS */
24
  :root {
 
418
 
419
  .panel-hidden {
420
  opacity: 0;
421
+ pointer-events: none;
422
  }
423
 
424
  .panel-visible {
 
746
  }
747
  </style>
748
  </head>
749
+ <body class="relative h-screen w-screen overflow-hidden">
750
  <!-- Main Game View -->
751
+ <div id="gameView" class="relative w-full h-full flex flex-col">
752
  <!-- Current Scene Background -->
753
+ <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')">
754
  <!-- Scene content will be dynamically loaded here -->
755
 
756
  <!-- Characters in Scene (max 15) -->
 
769
  </div>
770
 
771
  <!-- Player Status Bar (Minimal - expands on hover) -->
772
+ <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">
773
  <div class="flex items-center space-x-6 px-4">
774
  <!-- Avatar -->
775
  <div class="character-avatar w-12 h-12 rounded-full bg-gray-800 border-2 border-blue-500 overflow-hidden">
776
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Player" class="w-full h-full object-cover">
777
  </div>
778
 
779
  <!-- Health -->
 
837
  </div>
838
 
839
  <!-- Player Team (Callable Cards) -->
840
+ <div id="teamPanel" class="w-full flex justify-center space-x-2 px-4 mb-4">
841
  <!-- Team member cards (5 total) -->
842
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer active">
843
  <div class="h-12 bg-blue-900 flex items-center justify-center">
844
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
845
  </div>
846
  <div class="p-1">
847
  <div class="health-bar w-full mb-1" style="width: 80%"></div>
 
851
 
852
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
853
  <div class="h-12 bg-purple-900 flex items-center justify-center">
854
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
855
  </div>
856
  <div class="p-1">
857
  <div class="health-bar w-full mb-1" style="width: 45%"></div>
 
861
 
862
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
863
  <div class="h-12 bg-green-900 flex items-center justify-center">
864
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
865
  </div>
866
  <div class="p-1">
867
  <div class="energy-bar w-full mb-1" style="width: 30%"></div>
 
871
 
872
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
873
  <div class="h-12 bg-red-900 flex items-center justify-center">
874
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
875
  </div>
876
  <div class="p-1">
877
  <div class="health-bar w-full mb-1" style="width: 90%"></div>
 
881
 
882
  <div class="character-card w-16 h-20 bg-gray-900 bg-opacity-70 rounded-md overflow-hidden cursor-pointer">
883
  <div class="h-12 bg-yellow-900 flex items-center justify-center">
884
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==" alt="Teammate" class="w-full h-full object-cover">
885
  </div>
886
  <div class="p-1">
887
  <div class="health-bar w-full mb-1" style="width: 60%"></div>
 
891
  </div>
892
 
893
  <!-- Quick Access Menu (Top Right) -->
894
+ <div id="quickMenu" class="absolute top-4 right-4 flex space-x-2 z-10">
895
  <button class="hud-element w-10 h-10 rounded-full flex items-center justify-center text-blue-400 hover:text-blue-300">
896
  <i class="fas fa-map"></i>
897
  </button>
 
904
  </div>
905
 
906
  <!-- Round Indicator (Top Left) -->
907
+ <div id="roundIndicator" class="absolute top-4 left-4 hud-element px-3 py-1 rounded-full z-10">
908
  <span class="tech-font text-blue-400">ROUND <span id="roundNumber">1</span></span>
909
  </div>
910
 
911
  <!-- Action Points (Top Center) -->
912
+ <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">
913
  <i class="fas fa-bolt text-yellow-400"></i>
914
  <span class="tech-font">AP: <span id="apCount">4</span>/6</span>
915
  </div>
916
  </div>
917
 
918
  <!-- World Map Panel (Hidden by default) -->
919
+ <div id="mapPanel" class="fixed inset-0 bg-black bg-opacity-90 z-20 flex items-center justify-center panel-hidden">
920
  <div class="relative w-full h-full max-w-4xl max-h-4xl">
921
  <button id="closeMap" class="absolute top-4 right-4 text-2xl text-blue-400 hover:text-blue-300 z-30">
922
  <i class="fas fa-times"></i>
 
964
  </div>
965
 
966
  <!-- Dialog Panel (Hidden by default) -->
967
+ <div id="dialogPanel" class="fixed bottom-0 left-0 right-0 h-1/3 bg-black bg-opacity-80 z-20 panel-hidden">
968
  <div class="h-full flex flex-col">
969
  <!-- Speaker Info -->
970
  <div class="flex items-center p-4 border-b border-blue-900">
 
1003
  </div>
1004
 
1005
  <!-- Action Panel (Hidden by default) -->
1006
+ <div id="actionPanel" class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-80 z-20 panel-hidden">
1007
  <div class="p-4">
1008
  <h3 class="tech-font text-xl text-blue-400 mb-4 text-center">COMBAT ACTIONS</h3>
1009
 
 
1169
 
1170
  // Add characters to scene (max 15)
1171
  const characters = [
1172
+ { id: 'elandra', x: '70%', y: '60%', image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==' },
1173
+ { id: 'scientist', x: '30%', y: '50%', image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==' },
1174
+ { id: 'drone', x: '50%', y: '40%', image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==' }
1175
  ];
1176
 
1177
  characters.slice(0, 15).forEach(char => {
 
1348
  }
1349
  });
1350
  </script>
1351
+ <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>
1352
  </html>