454 lines
14 KiB
HTML
454 lines
14 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 - Dark Chibi Noir</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
|
|
font-family: 'Courier New', monospace;
|
|
color: #e0e0e0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
padding: 30px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
border-bottom: 3px solid #ff6b6b;
|
|
box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
color: #ff6b6b;
|
|
text-shadow: 0 0 10px rgba(255, 107, 107, 0.8),
|
|
0 0 20px rgba(255, 107, 107, 0.5);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2em;
|
|
color: #a0a0a0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 40px auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.info-panel {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border: 2px solid #ff6b6b;
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 0 30px rgba(255, 107, 107, 0.2);
|
|
}
|
|
|
|
.info-panel h2 {
|
|
color: #ff6b6b;
|
|
margin-bottom: 15px;
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.stat-item {
|
|
background: rgba(255, 107, 107, 0.1);
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #ff6b6b;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #a0a0a0;
|
|
font-size: 0.9em;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-value {
|
|
color: #ff6b6b;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.scene-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 800px;
|
|
background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
|
|
border: 3px solid #ff6b6b;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 50px rgba(255, 107, 107, 0.3);
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.scene-layer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.asset {
|
|
position: absolute;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
transition: transform 0.3s ease, filter 0.3s ease;
|
|
}
|
|
|
|
.asset:hover {
|
|
transform: scale(1.05);
|
|
filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.6));
|
|
z-index: 1000 !important;
|
|
}
|
|
|
|
.asset-info {
|
|
position: absolute;
|
|
bottom: -30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.9);
|
|
color: #ff6b6b;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.asset:hover .asset-info {
|
|
opacity: 1;
|
|
}
|
|
|
|
.campfire {
|
|
animation: flicker 2s infinite;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.gallery-item {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border: 2px solid #444;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.gallery-item:hover {
|
|
border-color: #ff6b6b;
|
|
box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 5px;
|
|
background: repeating-conic-gradient(#2a2a2a 0% 25%, #1a1a1a 0% 50%) 50% / 20px 20px;
|
|
}
|
|
|
|
.gallery-item h3 {
|
|
color: #ff6b6b;
|
|
margin-top: 10px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.gallery-item p {
|
|
color: #a0a0a0;
|
|
font-size: 0.9em;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.controls {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
border: 2px solid #ff6b6b;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
box-shadow: 0 0 30px rgba(255, 107, 107, 0.4);
|
|
}
|
|
|
|
.controls button {
|
|
background: #ff6b6b;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.controls button:hover {
|
|
background: #ff8787;
|
|
box-shadow: 0 0 15px rgba(255, 107, 107, 0.6);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>🏕️ KAIJEV TABOR</h1>
|
|
<p class="subtitle">Dark-Chibi Noir Style | Mrtva Dolina</p>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="info-panel">
|
|
<h2>📊 Cleanup Report</h2>
|
|
<div class="stats">
|
|
<div class="stat-item">
|
|
<div class="stat-label">JPG → PNG Converted</div>
|
|
<div class="stat-value">34</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">JPG Files Deleted</div>
|
|
<div class="stat-value">34</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">PNG Files Cleaned</div>
|
|
<div class="stat-value">1,907</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Status</div>
|
|
<div class="stat-value">✅ COMPLETE</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-panel">
|
|
<h2>🌲 Tabor Scene - Live View</h2>
|
|
<p style="color: #a0a0a0; margin-bottom: 15px;">
|
|
Vsi asseti so zdaj v PNG formatu s prosojnim ozadjem.
|
|
Drevesa so 512px, camp elementi 256px.
|
|
</p>
|
|
|
|
<div class="scene-container" id="campScene">
|
|
<!-- Assets se naložijo z JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-panel">
|
|
<h2>🎨 Asset Gallery</h2>
|
|
<div class="gallery" id="assetGallery">
|
|
<!-- Gallery items se naložijo z JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button onclick="toggleAnimation()">🔥 Toggle Fire</button>
|
|
<button onclick="resetScene()">🔄 Reset</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Asset paths
|
|
const trees = [
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-1.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-2.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-3.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-4.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-5.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-6.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-7.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed-8.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/narava/unnamed Kopie.png'
|
|
];
|
|
|
|
const campfire = [
|
|
'assets/slike/nova mapa faza 0-1/Environment/props/MOJE_SLIKE_KONCNA_ostalo_campfire_frame1.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/props/MOJE_SLIKE_KONCNA_ostalo_campfire_frame2.png'
|
|
];
|
|
|
|
const otherProps = [
|
|
'assets/slike/nova mapa faza 0-1/Environment/props/wood_log.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/props/MOJE_SLIKE_KONCNA_predmeti_oprema_orodja_tool_bucket_old.png',
|
|
'assets/slike/nova mapa faza 0-1/Environment/stavbe/MOJE_SLIKE_KONCNA_ostalo_tent_basic_style32.png'
|
|
];
|
|
|
|
// Build scene
|
|
const scene = document.getElementById('campScene');
|
|
|
|
// Add trees (background layer)
|
|
const treePositions = [
|
|
{ x: 100, y: 100, size: 250 },
|
|
{ x: 850, y: 80, size: 280 },
|
|
{ x: 1100, y: 150, size: 220 },
|
|
{ x: 200, y: 500, size: 260 },
|
|
{ x: 1000, y: 480, size: 240 },
|
|
{ x: 50, y: 300, size: 230 },
|
|
{ x: 1200, y: 350, size: 270 },
|
|
{ x: 400, y: 50, size: 200 },
|
|
{ x: 700, y: 550, size: 250 },
|
|
{ x: 600, y: 200, size: 210 }
|
|
];
|
|
|
|
trees.forEach((treePath, index) => {
|
|
const pos = treePositions[index];
|
|
const treeEl = document.createElement('div');
|
|
treeEl.className = 'asset tree';
|
|
treeEl.style.left = pos.x + 'px';
|
|
treeEl.style.top = pos.y + 'px';
|
|
treeEl.style.zIndex = Math.floor(pos.y);
|
|
|
|
const img = document.createElement('img');
|
|
img.src = treePath;
|
|
img.style.width = pos.size + 'px';
|
|
img.style.height = 'auto';
|
|
|
|
const info = document.createElement('div');
|
|
info.className = 'asset-info';
|
|
info.textContent = `Dead Tree ${index + 1} (512px)`;
|
|
|
|
treeEl.appendChild(img);
|
|
treeEl.appendChild(info);
|
|
scene.appendChild(treeEl);
|
|
});
|
|
|
|
// Add TENT (šotor) first
|
|
const tentEl = document.createElement('div');
|
|
tentEl.className = 'asset';
|
|
tentEl.style.left = '450px';
|
|
tentEl.style.top = '320px';
|
|
tentEl.style.zIndex = '320';
|
|
|
|
const tentImg = document.createElement('img');
|
|
tentImg.src = otherProps[2]; // tent
|
|
tentImg.style.width = '200px';
|
|
tentImg.style.height = 'auto';
|
|
|
|
const tentInfo = document.createElement('div');
|
|
tentInfo.className = 'asset-info';
|
|
tentInfo.textContent = '⛺ Šotor / Tent (512px PNG)';
|
|
|
|
tentEl.appendChild(tentImg);
|
|
tentEl.appendChild(tentInfo);
|
|
scene.appendChild(tentEl);
|
|
|
|
// Add campfire (center, animated)
|
|
const campfireEl = document.createElement('div');
|
|
campfireEl.className = 'asset campfire';
|
|
campfireEl.style.left = '600px';
|
|
campfireEl.style.top = '400px';
|
|
campfireEl.style.zIndex = '400';
|
|
campfireEl.id = 'campfireElement';
|
|
|
|
const campImg = document.createElement('img');
|
|
campImg.src = campfire[0];
|
|
campImg.style.width = '150px';
|
|
campImg.style.height = 'auto';
|
|
campImg.id = 'campfireImg';
|
|
|
|
const campInfo = document.createElement('div');
|
|
campInfo.className = 'asset-info';
|
|
campInfo.textContent = '🔥 Campfire (256px, Animated)';
|
|
|
|
campfireEl.appendChild(campImg);
|
|
campfireEl.appendChild(campInfo);
|
|
scene.appendChild(campfireEl);
|
|
|
|
// Campfire animation
|
|
let campfireFrame = 0;
|
|
let animationActive = true;
|
|
|
|
setInterval(() => {
|
|
if (animationActive) {
|
|
campfireFrame = (campfireFrame + 1) % 2;
|
|
document.getElementById('campfireImg').src = campfire[campfireFrame];
|
|
}
|
|
}, 500);
|
|
|
|
// Add props
|
|
const logEl = document.createElement('div');
|
|
logEl.className = 'asset';
|
|
logEl.style.left = '500px';
|
|
logEl.style.top = '500px';
|
|
logEl.style.zIndex = '500';
|
|
|
|
const logImg = document.createElement('img');
|
|
logImg.src = otherProps[0];
|
|
logImg.style.width = '120px';
|
|
|
|
const logInfo = document.createElement('div');
|
|
logInfo.className = 'asset-info';
|
|
logInfo.textContent = '🪵 Wood Log (256px)';
|
|
|
|
logEl.appendChild(logImg);
|
|
logEl.appendChild(logInfo);
|
|
scene.appendChild(logEl);
|
|
|
|
// Gallery
|
|
const gallery = document.getElementById('assetGallery');
|
|
|
|
const allAssets = [
|
|
...trees.map((path, i) => ({ path, name: `Dead Tree ${i + 1}`, type: '512px PNG' })),
|
|
...campfire.map((path, i) => ({ path, name: `Campfire Frame ${i + 1}`, type: '256px PNG (Animated)' })),
|
|
{ path: otherProps[2], name: 'Šotor / Tent', type: '512px PNG' },
|
|
{ path: otherProps[0], name: 'Wood Log', type: '256px PNG' },
|
|
{ path: otherProps[1], name: 'Bucket', type: '256px PNG' }
|
|
];
|
|
|
|
allAssets.forEach(asset => {
|
|
const item = document.createElement('div');
|
|
item.className = 'gallery-item';
|
|
item.innerHTML = `
|
|
<img src="${asset.path}" alt="${asset.name}">
|
|
<h3>${asset.name}</h3>
|
|
<p>${asset.type} | Transparent BG</p>
|
|
`;
|
|
gallery.appendChild(item);
|
|
});
|
|
|
|
// Controls
|
|
function toggleAnimation() {
|
|
animationActive = !animationActive;
|
|
}
|
|
|
|
function resetScene() {
|
|
location.reload();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |