Spaces:

broadfield-dev
/

spore_grok

Sleeping

App Files Files Community

broadfield-dev commited on Feb 24

Commit

57330ed

verified ·

1 Parent(s): 21708f7

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +12 -13

templates/index.html CHANGED Viewed

@@ -5,12 +5,11 @@
     <title>TribeForge</title>
     <style>
         body {
-            background: #87CEEB; /* Light sky blue, like Spore's vibrant palette */
             margin: 0;
             overflow: hidden;
-            font-family: 'Eurostile', Arial, sans-serif; /* Spore-like font */
         }
-        canvas { border: 2px solid #4682B4; border-radius: 10px; margin: 10px; }
         #ui {
             position: absolute;
             top: 10px;
@@ -21,26 +20,26 @@
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
         #ui span {
-            color: #2F4F4F; /* Dark slate gray for text */
             font-size: 16px;
             margin-right: 20px;
         }
         button {
             padding: 8px 16px;
-            background: #4CAF50; /* Bright green like Spore buttons */
             color: white;
             border: none;
-            border-radius: 20px; /* Rounded, Spore-like buttons */
             cursor: pointer;
             margin-right: 10px;
             font-size: 14px;
             transition: background 0.3s;
         }
         button:hover {
-            background: #45a049; /* Slightly darker green on hover */
         }
         button:disabled {
-            background: #A9A9A9; /* Gray for disabled state */
             cursor: not-allowed;
         }
         #editor {
@@ -63,8 +62,8 @@
             margin: 5px 0;
             color: #2F4F4F;
         }
-        #editor input[type="color"] { vertical-align: middle; }
-        #editor input[type="range"] { width: 100px; vertical-align: middle; }
     </style>
 </head>
 <body>
@@ -79,15 +78,15 @@
     <div id="editor">
         <h3>Creature Editor</h3>
         <label>Color: <input type="color" id="creatureColor" value="#ff0000"></label><br>
-        <label>Size: <input type="range" id="creatureSize" min="16" max="48" value="32"></label><br>
         <button onclick="applyChanges()">Apply</button>
     </div>
-    <canvas id="gameCanvas" width="800" height="600"></canvas>
     <script src="{{ url_for('static', filename='game.js') }}"></script>
     <script src="{{ url_for('static', filename='tribalStage.js') }}"></script>
     <script src="{{ url_for('static', filename='creatureEditor.js') }}"></script>
     <script>
-        const game = new TribalStage(document.getElementById("gameCanvas"));
         game.init();
     </script>
 </body>

     <title>TribeForge</title>
     <style>
         body {
+            background: #87CEEB; /* Light sky blue, inspired by Spore */
             margin: 0;
             overflow: hidden;
+            font-family: 'Eurostile', Arial, sans-serif;
         }
         #ui {
             position: absolute;
             top: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
         #ui span {
+            color: #2F4F4F;
             font-size: 16px;
             margin-right: 20px;
         }
         button {
             padding: 8px 16px;
+            background: #4CAF50;
             color: white;
             border: none;
+            border-radius: 20px;
             cursor: pointer;
             margin-right: 10px;
             font-size: 14px;
             transition: background 0.3s;
         }
         button:hover {
+            background: #45a049;
         }
         button:disabled {
+            background: #A9A9A9;
             cursor: not-allowed;
         }
         #editor {
             margin: 5px 0;
             color: #2F4F4F;
         }
+        #editor input[type="color"], #editor input[type="range"] { vertical-align: middle; }
+        #editor input[type="range"] { width: 100px; }
     </style>
 </head>
 <body>
     <div id="editor">
         <h3>Creature Editor</h3>
         <label>Color: <input type="color" id="creatureColor" value="#ff0000"></label><br>
+        <label>Size: <input type="range" id="creatureSize" min="0.5" max="2" step="0.1" value="1"></label><br>
         <button onclick="applyChanges()">Apply</button>
     </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
     <script src="{{ url_for('static', filename='game.js') }}"></script>
     <script src="{{ url_for('static', filename='tribalStage.js') }}"></script>
     <script src="{{ url_for('static', filename='creatureEditor.js') }}"></script>
     <script>
+        const game = new TribalStage();
         game.init();
     </script>
 </body>