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

Update flow fit and refine prototype screens

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-10 17:44:25 +07:00
parent 0b94afc8d4
commit 092f42d019
2 changed files with 71 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
public/prototype.html
View File

@@ -25,17 +25,46 @@
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 12px 16px;
gap: 12px;
padding: 72px 16px 18px;
background: #eef1f4;
}
.screen-title {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: #14171c;
}
.screen-subtitle {
margin-top: 6px;
font-size: 12px;
color: rgba(27, 31, 35, 0.65);
}
.analysis-hero {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 10px;
padding: 8px 12px;
}
.analysis-sub {
font-size: 12px;
color: rgba(27, 31, 35, 0.6);
}
.card {
background: #ffffff;
background: transparent;
border-radius: 12px;
border: 1px solid rgba(27, 31, 35, 0.1);
padding: 14px;
box-shadow: 0 8px 18px rgba(27, 31, 35, 0.08);
border: none;
padding: 0;
box-shadow: none;
}
.card.main {
@@ -62,6 +91,7 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 12px;
}
.thumb {
@@ -108,17 +138,12 @@
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;
width: 140px;
}
.loader__bar {
@@ -138,6 +163,7 @@
width: 100%;
border-collapse: collapse;
font-size: 11px;
margin-top: 12px;
}
.table th,
@@ -182,6 +208,7 @@
grid-template-columns: 54px 1fr;
gap: 10px;
align-items: center;
margin-top: 12px;
padding: 10px;
border-radius: 12px;
background: #f0f2f4;
@@ -206,6 +233,12 @@
color: rgba(27, 31, 35, 0.6);
}
.accept-note {
margin-top: 8px;
font-size: 11px;
color: rgba(27, 31, 35, 0.6);
}
.tag {
display: inline-flex;
align-items: center;
@@ -234,7 +267,7 @@
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
margin-top: 12px;
padding: 8px 10px;
border-radius: 10px;
background: #f0f2f4;
@@ -287,7 +320,7 @@
.list {
display: grid;
gap: 8px;
margin-top: 8px;
margin-top: 12px;
}
.item {
@@ -345,8 +378,7 @@
{
content: function () {
return (
'<div class="section-title">Материалы</div>' +
'<div class="media-count">8 фото · 2 видео</div>' +
'<div class="screen-title">Добавление объекта</div>' +
'<div class="media-grid">' +
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1502005097973-6a7082348e28?auto=format&fit=crop&w=600&q=60)"></div>' +
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1484154218962-a197022b5858?auto=format&fit=crop&w=600&q=60)"></div>' +
@@ -369,10 +401,10 @@
{
content: function () {
return (
'<div class="section-title">Анализ</div>' +
'<div class="analysis">' +
'<div class="analysis-hero">' +
'<div class="screen-title">Анализируем объект</div>' +
'<div class="analysis-sub">Формируем смету, этапы и критерии приемки</div>' +
'<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
'<div class="hint">5 секунд</div>' +
'</div>'
);
},
@@ -400,6 +432,8 @@
{
content: function () {
return (
'<div class="screen-title">Готовая смета по вашему объекту</div>' +
'<div class="screen-subtitle">Ознакомьтесь с этапами работ и итоговой стоимостью.</div>' +
'<table class="table">' +
'<thead><tr><th>Работы</th><th>Старт</th><th>Финиш</th><th>Сумма</th></tr></thead>' +
'<tbody>' +
@@ -430,16 +464,13 @@
},
{
content: function () {
var statusTag = state.accepted ? '<span class="tag success">Принято</span>' : '<span class="tag pending">Ожидает</span>';
var payTag = state.accepted ? '<span class="tag success">Переводится</span>' : '<span class="tag pending">Ожидает</span>';
return (
'<div class="section-title">Приемка</div>' +
'<div class="screen-title">Подтвердите выполнение этапа работ</div>' +
'<div class="accept-card">' +
'<div class="accept-photo" style="background-image:url(https://images.unsplash.com/photo-1484154218962-a197022b5858?auto=format&fit=crop&w=600&q=60)"></div>' +
'<div>' +
'<div class="accept-title">Черновые работы</div>' +
'<div class="accept-meta">Эксперт подтвердил · Смирнов А.</div>' +
'<div class="tag info" style="margin-top:6px;">Фото-отчет загружен</div>' +
'<div class="accept-meta">Исполнитель: Смирнов А. · Фотоотчет загружен</div>' +
'</div>' +
'</div>' +
'<div class="toggle-row">' +
@@ -449,10 +480,7 @@
'<span class="slider"></span>' +
'</label>' +
'</div>' +
'<div class="list">' +
'<div class="item"><strong>Статус</strong>' + statusTag + '</div>' +
'<div class="item"><strong>Оплата</strong>' + payTag + '</div>' +
'</div>'
'<div class="accept-note">Подтверждая приемку работ, вы переводите оплату исполнителю.</div>'
);
},
onEnter: function () {