158 lines
5.2 KiB
HTML
158 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sl">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kaijev Tabor - Demo Scene</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: #1a1a1a;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
font-family: 'Courier New', monospace;
|
|
color: #d4af37;
|
|
}
|
|
|
|
.scene-container {
|
|
position: relative;
|
|
width: 800px;
|
|
height: 600px;
|
|
border: 3px solid #5a4a28;
|
|
background: #2d2416;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.grass-base {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('assets/slike/environment/trava .png');
|
|
background-size: 256px 256px;
|
|
background-repeat: repeat;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.grass-tuft {
|
|
position: absolute;
|
|
image-rendering: pixelated;
|
|
animation: sway 3s ease-in-out infinite;
|
|
transform-origin: bottom center;
|
|
}
|
|
|
|
@keyframes sway {
|
|
|
|
0%,
|
|
100% {
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(2deg);
|
|
}
|
|
}
|
|
|
|
.grass-tuft.slow {
|
|
animation-duration: 4s;
|
|
}
|
|
|
|
.grass-tuft.fast {
|
|
animation-duration: 2.5s;
|
|
}
|
|
|
|
.info-panel {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: rgba(42, 35, 20, 0.9);
|
|
border: 2px solid #5a4a28;
|
|
padding: 15px;
|
|
color: #d4af37;
|
|
font-size: 12px;
|
|
max-width: 300px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: rgba(90, 74, 40, 0.3);
|
|
border-left: 3px solid #d4af37;
|
|
}
|
|
|
|
h3 {
|
|
color: #ff6b35;
|
|
margin-bottom: 8px;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="scene-container">
|
|
<!-- Fiksni sloj trave -->
|
|
<div class="grass-base"></div>
|
|
|
|
<!-- Placeholder za šotor (bo dodan ko se generira) -->
|
|
<div
|
|
style="position: absolute; bottom: 200px; left: 300px; width: 200px; height: 150px; background: rgba(80, 60, 40, 0.7); border: 2px dashed #5a4a28; display: flex; align-items: center; justify-content: center; color: #8b7355; font-size: 14px;">
|
|
ŠOTOR<br>(bo generiran)
|
|
</div>
|
|
|
|
<!-- Placeholder za spalno vrečo -->
|
|
<div
|
|
style="position: absolute; bottom: 150px; left: 520px; width: 100px; height: 50px; background: rgba(60, 80, 50, 0.7); border: 2px dashed #5a4a28; display: flex; align-items: center; justify-content: center; color: #8b7355; font-size: 11px; text-align: center;">
|
|
SPALNA<br>VREČA
|
|
</div>
|
|
|
|
<!-- Dinamični šopi trave (y-sorted) -->
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft slow"
|
|
style="bottom: 180px; left: 280px; width: 60px; z-index: 5;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft"
|
|
style="bottom: 220px; left: 450px; width: 50px; z-index: 3;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft fast"
|
|
style="bottom: 140px; left: 580px; width: 55px; z-index: 6;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft slow"
|
|
style="bottom: 160px; left: 350px; width: 45px; z-index: 5;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft"
|
|
style="bottom: 200px; left: 520px; width: 52px; z-index: 4;">
|
|
<img src="assets/slike/environment/tall_grass.png" class="grass-tuft fast"
|
|
style="bottom: 170px; left: 640px; width: 48px; z-index: 5;">
|
|
|
|
<!-- Info panel -->
|
|
<div class="info-panel">
|
|
<h3>🏕️ KAIJEV TABOR - DEMO</h3>
|
|
<div><strong>Fiksni sloj:</strong> Tekstura trave (trava .png)</div>
|
|
<div><strong>Dinamični sloj:</strong> 6x šopi trave z wind efektom</div>
|
|
<div><strong>Y-Sorting:</strong> Aktiviran (višji objekti so spredaj)</div>
|
|
|
|
<div class="status">
|
|
<strong>⚠️ STATUS ČIŠČENJA:</strong><br>
|
|
✅ Vse NOVE_SLIKE slike sčiščene<br>
|
|
✅ Checkerboard pattern odstranjen<br>
|
|
✅ Zelena ozadja izbrisana<br>
|
|
⏳ Čakam na image quota (12:39) za šotor & spalno vrečo
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Dodaj naključne delays za bolj naraven wind effect
|
|
document.querySelectorAll('.grass-tuft').forEach((tuft, index) => {
|
|
tuft.style.animationDelay = `${Math.random() * 2}s`;
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |