<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Демо v2 — воксельный рендер</title>
<style>
html, body { margin: 0; height: 100%; background: #17171d; }
body { display: grid; place-items: center; }
/* низкое разрешение бэкинг-стора, CSS-масштаб целый ×2, пиксели резкие */
canvas {
width: 960px;
height: 540px;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
/* HUD: подсказка взаимодействия у точки */
#hint {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
padding: 6px 14px;
background: rgba(23, 23, 29, 0.85);
color: #d99a32;
font: 16px/1.4 monospace;
border: 1px solid #44454e;
border-radius: 4px;
white-space: nowrap;
}
/* Сумка: список предметов в левом верхнем углу */
#inv {
position: fixed;
top: 12px;
left: 12px;
padding: 8px 12px;
background: rgba(23, 23, 29, 0.85);
color: #c9c9d2;
font: 15px/1.5 monospace;
border: 1px solid #44454e;
border-radius: 4px;
white-space: pre;
}
#inv .title { color: #626c4c; }
#inv .item { color: #d99a32; }
/* Сердца героя: правый верхний угол (тёплый — жизнь) */
#hp {
position: fixed;
top: 12px;
right: 12px;
padding: 8px 12px;
background: rgba(23, 23, 29, 0.85);
color: #d99a32;
font: 18px/1.2 monospace;
border: 1px solid #44454e;
border-radius: 4px;
letter-spacing: 2px;
}
/* Фейд перехода: чёрный слой поверх всего, прозрачность двигает движок */
#fade {
position: fixed;
inset: 0;
background: #000;
opacity: 0;
pointer-events: none;
}
/* Меню: панель в центре поверх мира (стек сцен) */
#menu {
position: fixed;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
padding: 20px 28px;
background: rgba(23, 23, 29, 0.92);
border: 1px solid #44454e;
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 280px;
}
#menu[hidden] { display: none; } /* display:flex перебивает атрибут hidden */
#menu .title { color: #d99a32; font-weight: bold; font-size: 20px; margin-bottom: 6px; }
#menu button {
padding: 8px 14px;
background: #23232c;
color: #c9c9d2;
border: 1px solid #44454e;
border-radius: 3px;
font: 16px monospace;
cursor: pointer;
}
#menu button:hover:not(:disabled) { border-color: #d99a32; color: #fff; }
#menu button:disabled { opacity: 0.4; cursor: default; }
/* Диалог: панель внизу экрана, реплика + варианты (кнопки) */
#dialog {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: 640px;
max-width: 92vw;
padding: 12px 16px;
background: rgba(23, 23, 29, 0.92);
color: #c9c9d2;
font: 16px/1.5 monospace;
border: 1px solid #44454e;
border-radius: 6px;
}
#dialog .speaker { color: #d99a32; font-weight: bold; }
#dialog .choices { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#dialog .choices button {
text-align: left;
padding: 4px 10px;
background: #23232c;
color: #c9c9d2;
border: 1px solid #44454e;
border-radius: 3px;
font: inherit;
cursor: pointer;
}
#dialog .choices button:hover { border-color: #d99a32; color: #fff; }
#dialog .continue { margin-top: 8px; color: #626c4c; font-size: 13px; }
</style>
</head>
<body>
<canvas id="scene"></canvas>
<div id="menu" hidden>
<div class="title">Пепельные луга — v2</div>
<button id="menu-start">Войти в мир</button>
<button id="menu-continue">Продолжить</button>
</div>
<div id="fade"></div>
<div id="hint" hidden></div>
<div id="inv" hidden></div>
<div id="hp" hidden></div>
<div id="dialog" hidden></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
