dsrptlab/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update prototype copy, visuals, and flow details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-10 16:20:24 +07:00
parent 9bbbfe604e
commit 84b3d96f16
1 changed files with 207 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
public/prototype.html
View File

@@ -17,8 +17,8 @@
padding: 0;
height: 100%;
font-family: 'Manrope', system-ui, sans-serif;
color: #171717;
background: #f4f1eb;
color: #1b1f23;
background: #f4f5f7;
}
.app {
@@ -26,65 +26,16 @@
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;
padding: 18px 14px 16px;
background: #f4f5f7;
}
.card {
background: rgba(255, 255, 255, 0.92);
border-radius: 18px;
border: 1px solid rgba(23, 23, 23, 0.08);
background: #ffffff;
border-radius: 14px;
border: 1px solid rgba(27, 31, 35, 0.08);
padding: 16px;
box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08);
box-shadow: 0 10px 24px rgba(27, 31, 35, 0.08);
}
.card.main {
@@ -95,20 +46,28 @@
}
.title {
font-size: 20px;
font-size: 18px;
font-weight: 700;
}
.subtitle {
font-size: 12px;
color: rgba(23, 23, 23, 0.64);
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: 2px;
margin-top: 4px;
}
.item {
@@ -116,8 +75,8 @@
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-radius: 12px;
background: #f0ece6;
border-radius: 10px;
background: #f0f2f4;
font-size: 12px;
}
@@ -149,20 +108,20 @@
.info-card {
font-size: 12px;
color: rgba(23, 23, 23, 0.7);
color: rgba(27, 31, 35, 0.65);
line-height: 1.4;
}
.action {
border: none;
border-radius: 14px;
border-radius: 12px;
padding: 12px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: #1a4d7a;
background: #0f4c81;
color: #fff;
box-shadow: 0 10px 20px rgba(26, 77, 122, 0.3);
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;
}
@@ -177,16 +136,71 @@
transform: none;
}
.loading {
.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;
flex-direction: column;
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: 10px;
background: rgba(26, 77, 122, 0.12);
height: 8px;
background: rgba(15, 76, 129, 0.12);
border-radius: 999px;
overflow: hidden;
}
@@ -194,43 +208,95 @@
.loader__bar {
height: 100%;
width: 0;
background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
background: linear-gradient(90deg, #0f4c81, #4f8fc7);
border-radius: inherit;
transition: width 0.4s ease;
}
.hint {
font-size: 11px;
color: rgba(23, 23, 23, 0.55);
color: rgba(27, 31, 35, 0.55);
}
.bubble {
.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;
gap: 6px;
padding: 6px 10px;
justify-content: center;
width: 14px;
height: 14px;
margin-left: 4px;
border-radius: 999px;
background: rgba(26, 77, 122, 0.12);
color: #1a4d7a;
font-size: 11px;
font-weight: 600;
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="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>
@@ -250,15 +316,22 @@
var screens = [
{
title: 'Загрузите материалы',
subtitle: 'Фото и видео помогут быстро оценить объём работ.',
helper: 'Можно добавить всё за один раз или частями. Мы всё сохраним.',
subtitle: 'Фото и видео уже загружены.',
helper: 'Загружено: 8 фото и 2 видео.',
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 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>'
);
},
@@ -271,14 +344,13 @@
{
title: 'Идёт анализ',
subtitle: 'Проверяем материалы и считаем объём работ.',
helper: 'Это займёт около 5 секунд.',
helper: 'Обычно это занимает до 5 секунд.',
actionLabel: 'Подождите…',
content: function () {
return (
'<div class="loading">' +
'<div class="bubble">Загрузка данных</div>' +
'<div class="analysis">' +
'<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
'<div class="hint">Готовим план и смету</div>' +
'<div class="hint">Анализируем данные</div>' +
'</div>'
);
},
@@ -305,16 +377,32 @@
},
{
title: 'Готово. Ознакомьтесь',
subtitle: 'План работ и ресурсная смета готовы.',
helper: 'Если что-то непонятно — нажмите на пункт, мы объясним.',
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>'
'<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 () {},
@@ -325,15 +413,21 @@
},
{
title: 'Уведомление по этапу',
subtitle: 'Бригада «Север» завершила этап «Черновые работы».',
helper: 'Откройте этап и посмотрите, всё ли соответствует критериям.',
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="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>'
);
},
@@ -349,7 +443,6 @@
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() {
@@ -358,7 +451,6 @@
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;