<!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; }
/* бэкинг-стор 960×540, канвас растягивается под окно (16:9, pixelated) */
canvas {
width: min(100vw, calc(100vh * 16 / 9));
height: min(100vh, calc(100vw * 9 / 16));
image-rendering: pixelated;
image-rendering: crisp-edges;
}
/* Подсказка перехода/взаимодействия у точки */
#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;
}
/* Пелена наката: полупрозрачная пелена низин (alpha из screenFx) */
#haze {
position: fixed;
inset: 0;
background: #5a6a78;
opacity: 0;
pointer-events: none;
}
/* Виньетка опасности: края экрана темнеют (накат без полотна) */
#vignette {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 10, 14, 0.9) 100%);
opacity: 0;
pointer-events: none;
}
/* Фейд перехода областей: чёрный слой поверх всего */
#fade {
position: fixed;
inset: 0;
background: #000;
opacity: 0;
pointer-events: none;
}
/* Трекер квестов: первая активная стадия, левый верхний угол */
#quest {
position: fixed;
top: 12px;
left: 12px;
padding: 8px 12px;
background: rgba(23, 23, 29, 0.85);
color: #d99a32;
font: 15px/1.5 monospace;
border: 1px solid #44454e;
border-radius: 4px;
white-space: pre;
}
/* Сумка: под трекером */
#inv {
position: fixed;
top: 56px;
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; }
/* Тосты: столбик всплывашек по центру сверху */
#toasts {
position: fixed;
top: 52px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
pointer-events: none;
}
#toasts div {
padding: 5px 12px;
background: rgba(23, 23, 29, 0.85);
color: #d99a32;
font: 15px monospace;
border: 1px solid #44454e;
border-radius: 4px;
white-space: nowrap;
}
/* Диалог: панель внизу экрана, реплика + варианты (кнопки) */
#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; }
/* Панель сумки (клавиша I): центр экрана, список предметов */
#bag {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
max-width: 90vw;
padding: 14px 18px;
background: rgba(23, 23, 29, 0.94);
color: #c9c9d2;
font: 15px/1.6 monospace;
border: 1px solid #44454e;
border-radius: 6px;
z-index: 12;
}
#bag .title { color: #d99a32; font-weight: bold; letter-spacing: 2px; margin-bottom: 6px; }
#bag .item { color: #c9c9d2; }
#bag .foot { margin-top: 10px; color: #626c4c; font-size: 12px; }
/* Дев-панель (F3): список объектов справа + вьювер-оверлей */
#dev {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 260px;
padding: 12px;
background: rgba(23, 23, 29, 0.95);
border-left: 1px solid #44454e;
z-index: 14;
font: 14px monospace;
display: flex; /* время сверху всегда видно, объекты скроллятся */
flex-direction: column;
}
#dev h2 { margin: 0 0 8px; color: #d99a32; font-size: 15px; letter-spacing: 1px; }
#dev-list { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#dev-list button {
text-align: left;
padding: 5px 8px;
background: #23232c;
color: #c9c9d2;
border: 1px solid #44454e;
border-radius: 3px;
font: inherit;
cursor: pointer;
}
#dev-list button:hover { border-color: #d99a32; color: #fff; }
/* Время суток: метка + слайдер + пресеты */
#dev-time { display: flex; flex-direction: column; gap: 6px; }
#dev-clock { color: #c9c9d2; font: 14px monospace; }
#dev-clock-slider { width: 100%; accent-color: #d99a32; }
#dev-presets { display: flex; gap: 4px; flex-wrap: wrap; }
#dev-presets button {
background: none; border: 1px solid #44454e; color: #c9c9d2;
font: 12px monospace; padding: 2px 6px; cursor: pointer;
}
#dev-presets button:hover { border-color: #d99a32; color: #fff; }
#devview {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(10, 10, 14, 0.9);
z-index: 15;
}
#devview[hidden] { display: none; }
#dev-canvas {
width: min(80vw, 720px);
height: auto;
image-rendering: pixelated;
border: 1px solid #44454e;
background: #1b1b22;
cursor: grab;
touch-action: none;
}
#dev-stats { color: #626c4c; font: 13px monospace; }
#dev-controls { display: flex; gap: 8px; align-items: center; }
#dev-controls button, #dev-controls select {
padding: 4px 10px;
background: #23232c;
color: #c9c9d2;
border: 1px solid #44454e;
border-radius: 3px;
font: 13px monospace;
cursor: pointer;
}
#dev-controls button:hover { border-color: #d99a32; color: #fff; }
/* Меню: Esc — пауза с автосейвом; старт страницы — выбор входа */
#menu {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
justify-content: center;
background: rgba(10, 10, 14, 0.72);
z-index: 10;
}
#menu[hidden] { display: none; } /* display:flex перебивает атрибут hidden */
/* Лоад-скрин: до первого отрисованного кадра (поверх меню) */
#loading {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #17171d;
z-index: 20;
color: #d99a32;
font: 18px monospace;
letter-spacing: 2px;
}
#loading[hidden] { display: none; }
#loading .dots::after { content: '…'; }
#menu h1 {
margin: 0 0 8px;
color: #d99a32;
font: bold 26px monospace;
letter-spacing: 2px;
}
#menu button {
width: 260px;
padding: 8px 0;
background: #23232c;
color: #c9c9d2;
border: 1px solid #44454e;
border-radius: 4px;
font: 16px monospace;
cursor: pointer;
}
#menu button:hover:not(:disabled) { border-color: #d99a32; color: #fff; }
#menu button:disabled { opacity: 0.4; cursor: default; }
#menu p { margin-top: 10px; color: #626c4c; font: 13px monospace; }
/* Слоты сейвов: список строк под кнопками входа */
#slots {
width: 480px;
max-width: 92vw;
display: flex;
flex-direction: column;
gap: 6px;
}
#slots .slot {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: #1b1b22;
border: 1px solid #33343c;
border-radius: 4px;
font: 13px monospace;
}
#slots .slot .name { flex: 1; text-align: left; color: #c9c9d2; }
#slots .slot .name .when { color: #626c4c; display: block; font-size: 12px; }
#slots .slot button {
padding: 3px 8px;
background: #23232c;
color: #c9c9d2;
border: 1px solid #44454e;
border-radius: 3px;
font: 12px monospace;
cursor: pointer;
}
#slots .slot button:hover:not(:disabled) { border-color: #d99a32; color: #fff; }
#slots .slot button:disabled { opacity: 0.35; cursor: default; }
#slots h2 { margin: 8px 0 0; color: #626c4c; font: 14px monospace; letter-spacing: 1px; }
</style>
</head>
<body>
<canvas id="scene"></canvas>
<div id="loading"><span class="dots">Загрузка</span></div>
<div id="haze"></div>
<div id="vignette"></div>
<div id="fade"></div>
<div id="hint" hidden></div>
<div id="quest" hidden></div>
<div id="inv" hidden></div>
<div id="toasts"></div>
<div id="dialog" hidden></div>
<div id="bag" hidden></div>
<div id="dev" hidden>
<h2>ВРЕМЯ СУТОК</h2>
<div id="dev-time">
<div id="dev-clock">8:00</div>
<input type="range" id="dev-clock-slider" min="0" max="1439" step="1" />
<div id="dev-presets">
<button data-min="480">8:00</button>
<button data-min="720">12:00</button>
<button data-min="1134" title="Пик золотого часа">18:54</button>
<button data-min="1320">22:00</button>
</div>
</div>
<h2 style="margin-top: 14px;">ОБЪЕКТЫ · F3</h2>
<div id="dev-list"></div>
</div>
<div id="devview" hidden>
<canvas id="dev-canvas" width="480" height="360"></canvas>
<div id="dev-stats"></div>
<div id="dev-controls">
<button id="dev-play" title="Пауза/продолжить клипа">⏸</button>
<label style="font: 13px monospace; color: #c9c9d2;">
<input type="checkbox" id="dev-spin" /> поворот
</label>
<select id="dev-skin" hidden></select>
<button id="dev-open">Закрыть</button>
</div>
</div>
<div id="menu">
<h1>ПЕПЕЛЬНЫЕ ЛУГА</h1>
<button id="menu-continue" disabled>Продолжить</button>
<button id="menu-new">Войти в мир</button>
<div id="slots"><h2>СОХРАНЕНИЯ</h2></div>
<p>WASD — движение · E — действие · Esc — меню</p>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
