Spaces:

broadfield-dev
/

spore_grok

Sleeping

App Files Files Community

broadfield-dev commited on Feb 24

Commit

cacdf35

verified ·

1 Parent(s): e054af9

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +61 -5

templates/index.html CHANGED Viewed

@@ -4,11 +4,67 @@
     <meta charset="UTF-8">
     <title>TribeForge</title>
     <style>
-        canvas { border: 1px solid black; }
-        #ui { font-family: Arial, sans-serif; position: absolute; top: 10px; }
-        button { padding: 5px 10px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; }
-        button:hover { background: #45a049; }
-        #editor { display: none; position: absolute; top: 50px; left: 10px; background: #fff; padding: 10px; border: 1px solid #000; }
     </style>
 </head>
 <body>

     <meta charset="UTF-8">
     <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;
+            left: 10px;
+            background: rgba(255, 255, 255, 0.8);
+            padding: 10px;
+            border-radius: 15px;
+            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 {
+            display: none;
+            position: absolute;
+            top: 50px;
+            left: 10px;
+            background: rgba(255, 255, 255, 0.9);
+            padding: 15px;
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            border: 2px solid #4682B4;
+        }
+        #editor h3 {
+            color: #2F4F4F;
+            margin-top: 0;
+        }
+        #editor label {
+            display: block;
+            margin: 5px 0;
+            color: #2F4F4F;
+        }
+        #editor input[type="color"] { vertical-align: middle; }
+        #editor input[type="range"] { width: 100px; vertical-align: middle; }
     </style>
 </head>
 <body>