Spaces:
Sleeping
Sleeping
File size: 3,288 Bytes
784552c cacdf35 57330ed cacdf35 57330ed cacdf35 57330ed cacdf35 57330ed cacdf35 57330ed cacdf35 57330ed cacdf35 57330ed cacdf35 57330ed 784552c 5c5f1bc 784552c 5c5f1bc 57330ed 5c5f1bc 784552c 72a021b 57330ed 4ea9b13 784552c 5c5f1bc 784552c 16d1c4f 784552c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<!DOCTYPE html>
<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> |