Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <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; | |
| 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; | |
| 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 { | |
| 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"], #editor input[type="range"] { vertical-align: middle; } | |
| #editor input[type="range"] { width: 100px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="ui"> | |
| <span id="resources">Food: 0</span> | <span id="population">Tribe: 1/5</span> | <span id="relations">Relations: Neutral</span> | |
| <button onclick="gatherFood()">Gather Food</button> | |
| <button onclick="buildHut()">Build Hut</button> | |
| <button onclick="attackTribe()">Attack Tribe</button> | |
| <button onclick="socializeTribe()">Socialize</button> | |
| <button onclick="toggleEditor()">Edit Creature</button> | |
| </div> | |
| <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> | |
| <canvas id="gameCanvas"></canvas> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/examples/js/loaders/GLTFLoader.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> | |
| // Remove the 'game' declaration here; it’s handled in tribalStage.js | |
| </script> | |
| </body> | |
| </html> |