Spaces:
Sleeping
Sleeping
<html lang="en"> | |
<head> | |
<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> | |
<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="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> | |
</html> |