382 lines
11 KiB
HTML
382 lines
11 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: #171717;
|
|
background: #f4f1eb;
|
|
}
|
|
|
|
.app {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 34px 16px 18px;
|
|
background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(243, 239, 232, 0.92));
|
|
}
|
|
|
|
.status {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
color: #2d2d2d;
|
|
}
|
|
|
|
.pill {
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(26, 77, 122, 0.12);
|
|
color: #1a4d7a;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: #1a4d7a;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
height: 6px;
|
|
background: rgba(26, 77, 122, 0.12);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress__bar {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 10%;
|
|
background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
|
|
border-radius: inherit;
|
|
transition: width 0.6s ease;
|
|
}
|
|
|
|
.card {
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(23, 23, 23, 0.08);
|
|
padding: 16px;
|
|
box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08);
|
|
}
|
|
|
|
.card.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 12px;
|
|
color: rgba(23, 23, 23, 0.64);
|
|
margin: 0;
|
|
}
|
|
|
|
.list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
background: #f0ece6;
|
|
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(23, 23, 23, 0.7);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.action {
|
|
border: none;
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
background: #1a4d7a;
|
|
color: #fff;
|
|
box-shadow: 0 10px 20px rgba(26, 77, 122, 0.3);
|
|
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;
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.loader {
|
|
height: 10px;
|
|
background: rgba(26, 77, 122, 0.12);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loader__bar {
|
|
height: 100%;
|
|
width: 0;
|
|
background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
|
|
border-radius: inherit;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 11px;
|
|
color: rgba(23, 23, 23, 0.55);
|
|
}
|
|
|
|
.bubble {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(26, 77, 122, 0.12);
|
|
color: #1a4d7a;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<div class="status">
|
|
<div>9:41</div>
|
|
<div class="pill">Контроль ремонта</div>
|
|
<div class="icons">
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress__bar" id="progressBar"></div>
|
|
</div>
|
|
<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: 'Можно добавить всё за один раз или частями. Мы всё сохраним.',
|
|
actionLabel: 'Далее',
|
|
content: function () {
|
|
return (
|
|
'<div class="list">' +
|
|
'<div class="item"><strong>Фото</strong><span class="tag pending">Нужно загрузить</span></div>' +
|
|
'<div class="item"><strong>Видео</strong><span class="tag pending">Нужно загрузить</span></div>' +
|
|
'<div class="item"><strong>Комментарий</strong><span class="tag info">Опишите особенности</span></div>' +
|
|
'</div>'
|
|
);
|
|
},
|
|
onEnter: function () {},
|
|
onAction: function () {
|
|
state.screen = 1;
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
title: 'Идёт анализ',
|
|
subtitle: 'Проверяем материалы и считаем объём работ.',
|
|
helper: 'Это займёт около 5 секунд.',
|
|
actionLabel: 'Подождите…',
|
|
content: function () {
|
|
return (
|
|
'<div class="loading">' +
|
|
'<div class="bubble">Загрузка данных</div>' +
|
|
'<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="list">' +
|
|
'<div class="item"><strong>План работ</strong><span class="tag success">6 этапов</span></div>' +
|
|
'<div class="item"><strong>Смета</strong><span class="tag info">1 250 000 ₽</span></div>' +
|
|
'<div class="item"><strong>Критерии приёмки</strong><span class="tag info">Что считается готовым</span></div>' +
|
|
'</div>'
|
|
);
|
|
},
|
|
onEnter: function () {},
|
|
onAction: function () {
|
|
state.screen = 3;
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
title: 'Уведомление по этапу',
|
|
subtitle: 'Бригада «Север» завершила этап «Черновые работы».',
|
|
helper: 'Откройте этап и посмотрите, всё ли соответствует критериям.',
|
|
actionLabel: 'Начать заново',
|
|
content: function () {
|
|
return (
|
|
'<div class="list">' +
|
|
'<div class="item"><strong>Этап</strong><span class="tag success">Сдан</span></div>' +
|
|
'<div class="item"><strong>Дата</strong><span class="tag info">Сегодня, 18:20</span></div>' +
|
|
'<div class="item"><strong>Оплата</strong><span class="tag pending">Ожидает приёмку</span></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 progressBar = document.getElementById('progressBar');
|
|
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;
|
|
progressBar.style.width = ((state.screen + 1) / screens.length) * 100 + '%';
|
|
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>
|