474 lines
15 KiB
HTML
474 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Прототип</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: 'Manrope', system-ui, sans-serif;
|
|
color: #1b1f23;
|
|
background: #f4f5f7;
|
|
}
|
|
|
|
.app {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 18px 14px 16px;
|
|
background: #f4f5f7;
|
|
}
|
|
|
|
.card {
|
|
background: #ffffff;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(27, 31, 35, 0.08);
|
|
padding: 16px;
|
|
box-shadow: 0 10px 24px rgba(27, 31, 35, 0.08);
|
|
}
|
|
|
|
.card.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 12px;
|
|
color: rgba(27, 31, 35, 0.6);
|
|
margin: 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: rgba(27, 31, 35, 0.45);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
background: #f0f2f4;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.item strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tag {
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tag.success {
|
|
background: rgba(31, 129, 84, 0.14);
|
|
color: #1f8154;
|
|
}
|
|
|
|
.tag.pending {
|
|
background: rgba(211, 135, 32, 0.15);
|
|
color: #b7741c;
|
|
}
|
|
|
|
.tag.info {
|
|
background: rgba(26, 77, 122, 0.14);
|
|
color: #1a4d7a;
|
|
}
|
|
|
|
.info-card {
|
|
font-size: 12px;
|
|
color: rgba(27, 31, 35, 0.65);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.action {
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 12px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
background: #0f4c81;
|
|
color: #fff;
|
|
box-shadow: 0 10px 20px rgba(15, 76, 129, 0.25);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.action:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.action[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.media-count {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: rgba(27, 31, 35, 0.7);
|
|
}
|
|
|
|
.media-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.thumb {
|
|
position: relative;
|
|
height: 64px;
|
|
border-radius: 10px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(27, 31, 35, 0.08);
|
|
}
|
|
|
|
.thumb::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35));
|
|
}
|
|
|
|
.thumb.video::before {
|
|
content: '▶';
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 999px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.thumb span {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
left: 6px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
z-index: 1;
|
|
}
|
|
|
|
.analysis {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.loader {
|
|
height: 8px;
|
|
background: rgba(15, 76, 129, 0.12);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loader__bar {
|
|
height: 100%;
|
|
width: 0;
|
|
background: linear-gradient(90deg, #0f4c81, #4f8fc7);
|
|
border-radius: inherit;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 11px;
|
|
color: rgba(27, 31, 35, 0.55);
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
border-bottom: 1px solid rgba(27, 31, 35, 0.08);
|
|
}
|
|
|
|
.table th {
|
|
color: rgba(27, 31, 35, 0.55);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.q {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-left: 4px;
|
|
border-radius: 999px;
|
|
background: rgba(15, 76, 129, 0.12);
|
|
color: #0f4c81;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.toast {
|
|
position: relative;
|
|
background: #0f4c81;
|
|
color: #fff;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
box-shadow: 0 10px 20px rgba(15, 76, 129, 0.25);
|
|
animation: slideDown 0.5s ease;
|
|
}
|
|
|
|
.toast small {
|
|
display: block;
|
|
opacity: 0.8;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.skeleton {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, #eef1f4 0%, #e4e7eb 50%, #eef1f4 100%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.4s infinite;
|
|
}
|
|
|
|
.skeleton-line.wide {
|
|
height: 12px;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from { transform: translateY(-10px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<div class="card main">
|
|
<div class="title" id="screenTitle"></div>
|
|
<p class="subtitle" id="screenSubtitle"></p>
|
|
<div id="screenContent"></div>
|
|
</div>
|
|
<div class="card info-card" id="helperCard"></div>
|
|
<button class="action" id="actionButton">Далее</button>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
var state = {
|
|
screen: 0,
|
|
loadingTimer: null,
|
|
loadingProgress: 0
|
|
};
|
|
|
|
var screens = [
|
|
{
|
|
title: 'Загрузите материалы',
|
|
subtitle: 'Фото и видео уже загружены.',
|
|
helper: 'Загружено: 8 фото и 2 видео.',
|
|
actionLabel: 'Далее',
|
|
content: function () {
|
|
return (
|
|
'<div class="media-count">8 фото · 2 видео</div>' +
|
|
'<div class="media-grid">' +
|
|
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1741105820113-9bbb4fccd823?auto=format&fit=crop&w=600&q=60)"></div>' +
|
|
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1768321917661-d4f1a89d2185?auto=format&fit=crop&w=600&q=60)"></div>' +
|
|
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1768321902290-54497eeb9cf6?auto=format&fit=crop&w=600&q=60)"></div>' +
|
|
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1700581316314-9e6a809bd656?auto=format&fit=crop&w=600&q=60)"></div>' +
|
|
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1741105820113-9bbb4fccd823?auto=format&fit=crop&w=600&q=60)"></div>' +
|
|
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1768321917661-d4f1a89d2185?auto=format&fit=crop&w=600&q=60)"></div>' +
|
|
'<div class="thumb video" style="background-image:url(https://images.unsplash.com/photo-1768321902290-54497eeb9cf6?auto=format&fit=crop&w=600&q=60)"><span>Видео</span></div>' +
|
|
'<div class="thumb video" style="background-image:url(https://images.unsplash.com/photo-1700581316314-9e6a809bd656?auto=format&fit=crop&w=600&q=60)"><span>Видео</span></div>' +
|
|
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1741105820113-9bbb4fccd823?auto=format&fit=crop&w=600&q=60)"></div>' +
|
|
'</div>'
|
|
);
|
|
},
|
|
onEnter: function () {},
|
|
onAction: function () {
|
|
state.screen = 1;
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
title: 'Идёт анализ',
|
|
subtitle: 'Проверяем материалы и считаем объём работ.',
|
|
helper: 'Обычно это занимает до 5 секунд.',
|
|
actionLabel: 'Подождите…',
|
|
content: function () {
|
|
return (
|
|
'<div class="analysis">' +
|
|
'<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
|
|
'<div class="hint">Анализируем данные</div>' +
|
|
'</div>'
|
|
);
|
|
},
|
|
onEnter: function () {
|
|
var bar = document.getElementById('loaderBar');
|
|
state.loadingProgress = 0;
|
|
if (state.loadingTimer) {
|
|
clearInterval(state.loadingTimer);
|
|
}
|
|
state.loadingTimer = setInterval(function () {
|
|
state.loadingProgress += 20;
|
|
if (bar) {
|
|
bar.style.width = state.loadingProgress + '%';
|
|
}
|
|
if (state.loadingProgress >= 100) {
|
|
clearInterval(state.loadingTimer);
|
|
state.loadingTimer = null;
|
|
state.screen = 2;
|
|
render();
|
|
}
|
|
}, 1000);
|
|
},
|
|
onAction: function () {}
|
|
},
|
|
{
|
|
title: 'Готово. Ознакомьтесь',
|
|
subtitle: 'План работ и смета сформированы.',
|
|
helper: 'Нажмите на пункт, чтобы посмотреть критерии приёмки.',
|
|
actionLabel: 'Далее',
|
|
content: function () {
|
|
return (
|
|
'<div class="section-title">План работ</div>' +
|
|
'<table class="table">' +
|
|
'<thead><tr><th>Этап</th><th>Старт</th><th>Финиш</th></tr></thead>' +
|
|
'<tbody>' +
|
|
'<tr><td>Демонтаж<span class="q" title="Чистые стены, мусор вывезен">?</span></td><td>12.03</td><td>15.03</td></tr>' +
|
|
'<tr><td>Черновые работы<span class="q" title="Стены выровнены, геометрия в допуске">?</span></td><td>16.03</td><td>24.03</td></tr>' +
|
|
'<tr><td>Электрика<span class="q" title="Проложены линии, маркировка выполнена">?</span></td><td>25.03</td><td>28.03</td></tr>' +
|
|
'<tr><td>Чистовая отделка<span class="q" title="Поверхности готовы, без дефектов">?</span></td><td>29.03</td><td>08.04</td></tr>' +
|
|
'</tbody>' +
|
|
'</table>' +
|
|
'<div class="section-title">Ресурсная смета</div>' +
|
|
'<table class="table">' +
|
|
'<thead><tr><th>Материал</th><th>Объём</th><th>Стоимость</th></tr></thead>' +
|
|
'<tbody>' +
|
|
'<tr><td>Штукатурка</td><td>120 м²</td><td>94 000 ₽</td></tr>' +
|
|
'<tr><td>Грунт</td><td>60 л</td><td>18 000 ₽</td></tr>' +
|
|
'<tr><td>Кабель</td><td>320 м</td><td>52 000 ₽</td></tr>' +
|
|
'<tr><td>Плитка</td><td>34 м²</td><td>126 000 ₽</td></tr>' +
|
|
'<tr><td>Смеси</td><td>48 меш.</td><td>37 000 ₽</td></tr>' +
|
|
'</tbody>' +
|
|
'</table>'
|
|
);
|
|
},
|
|
onEnter: function () {},
|
|
onAction: function () {
|
|
state.screen = 3;
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
title: 'Уведомление по этапу',
|
|
subtitle: 'Новый статус по работам.',
|
|
helper: 'Проверьте чек-лист и подтвердите приёмку.',
|
|
actionLabel: 'Начать заново',
|
|
content: function () {
|
|
return (
|
|
'<div class="toast">Бригада «Север» сдала этап «Черновые работы».<small>Сегодня, 18:20</small></div>' +
|
|
'<div class="list" style="margin-top:10px;">' +
|
|
'<div class="item"><strong>Оплата</strong><span class="tag pending">Ожидает приёмку</span></div>' +
|
|
'<div class="item"><strong>Фото-отчёт</strong><span class="tag info">12 файлов</span></div>' +
|
|
'</div>' +
|
|
'<div class="section-title">Документы</div>' +
|
|
'<div class="skeleton">' +
|
|
'<div class="skeleton-line wide"></div>' +
|
|
'<div class="skeleton-line"></div>' +
|
|
'<div class="skeleton-line"></div>' +
|
|
'</div>'
|
|
);
|
|
},
|
|
onEnter: function () {},
|
|
onAction: function () {
|
|
state.screen = 0;
|
|
render();
|
|
}
|
|
}
|
|
];
|
|
|
|
var screenTitle = document.getElementById('screenTitle');
|
|
var screenSubtitle = document.getElementById('screenSubtitle');
|
|
var screenContent = document.getElementById('screenContent');
|
|
var helperCard = document.getElementById('helperCard');
|
|
var actionButton = document.getElementById('actionButton');
|
|
|
|
function render() {
|
|
var screen = screens[state.screen];
|
|
screenTitle.textContent = screen.title;
|
|
screenSubtitle.textContent = screen.subtitle;
|
|
screenContent.innerHTML = screen.content();
|
|
helperCard.textContent = screen.helper;
|
|
actionButton.textContent = screen.actionLabel;
|
|
actionButton.disabled = state.screen === 1;
|
|
|
|
if (screen.onEnter) {
|
|
screen.onEnter();
|
|
}
|
|
}
|
|
|
|
actionButton.addEventListener('click', function () {
|
|
var screen = screens[state.screen];
|
|
if (screen.onAction) {
|
|
screen.onAction();
|
|
}
|
|
});
|
|
|
|
render();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|