Strip copy, simplify screens, add acceptance toggle
This commit is contained in:
Ruslan Bakiev
@@ -18,42 +18,31 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: 'Manrope', system-ui, sans-serif;
|
font-family: 'Manrope', system-ui, sans-serif;
|
||||||
color: #1b1f23;
|
color: #1b1f23;
|
||||||
background: #f4f5f7;
|
background: #eef1f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app {
|
.app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: 10px;
|
||||||
padding: 18px 14px 16px;
|
padding: 14px 12px 16px;
|
||||||
background: #f4f5f7;
|
background: #eef1f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 14px;
|
border-radius: 12px;
|
||||||
border: 1px solid rgba(27, 31, 35, 0.08);
|
border: 1px solid rgba(27, 31, 35, 0.1);
|
||||||
padding: 16px;
|
padding: 14px;
|
||||||
box-shadow: 0 10px 24px rgba(27, 31, 35, 0.08);
|
box-shadow: 0 8px 18px rgba(27, 31, 35, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.main {
|
.card.main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: 10px;
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(27, 31, 35, 0.6);
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
@@ -61,79 +50,6 @@
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
color: rgba(27, 31, 35, 0.45);
|
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 {
|
.media-count {
|
||||||
@@ -226,7 +142,7 @@
|
|||||||
|
|
||||||
.table th,
|
.table th,
|
||||||
.table td {
|
.table td {
|
||||||
padding: 6px 8px;
|
padding: 6px 6px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom: 1px solid rgba(27, 31, 35, 0.08);
|
border-bottom: 1px solid rgba(27, 31, 35, 0.08);
|
||||||
}
|
}
|
||||||
@@ -236,6 +152,17 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #f0f2f4;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
.q {
|
.q {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -250,88 +177,186 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.accept-card {
|
||||||
position: relative;
|
display: grid;
|
||||||
background: #0f4c81;
|
grid-template-columns: 54px 1fr;
|
||||||
color: #fff;
|
gap: 10px;
|
||||||
padding: 10px 12px;
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
background: #f0f2f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accept-photo {
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
border: 1px solid rgba(27, 31, 35, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accept-title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
box-shadow: 0 10px 20px rgba(15, 76, 129, 0.25);
|
font-weight: 600;
|
||||||
animation: slideDown 0.5s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast small {
|
.accept-meta {
|
||||||
display: block;
|
font-size: 11px;
|
||||||
opacity: 0.8;
|
color: rgba(27, 31, 35, 0.6);
|
||||||
margin-top: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeleton {
|
.tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #f0f2f4;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
width: 42px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
inset: 0;
|
||||||
|
background-color: #c7ced6;
|
||||||
|
transition: 0.2s;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
left: 2px;
|
||||||
|
top: 2px;
|
||||||
|
background-color: white;
|
||||||
|
transition: 0.2s;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider {
|
||||||
|
background-color: #0f4c81;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch input:checked + .slider:before {
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeleton-line {
|
.item {
|
||||||
height: 10px;
|
display: flex;
|
||||||
border-radius: 999px;
|
align-items: center;
|
||||||
background: linear-gradient(90deg, #eef1f4 0%, #e4e7eb 50%, #eef1f4 100%);
|
justify-content: space-between;
|
||||||
background-size: 200% 100%;
|
padding: 8px 10px;
|
||||||
animation: shimmer 1.4s infinite;
|
border-radius: 10px;
|
||||||
|
background: #f0f2f4;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeleton-line.wide {
|
.action {
|
||||||
height: 12px;
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shimmer {
|
.action:active {
|
||||||
0% { background-position: 200% 0; }
|
transform: scale(0.98);
|
||||||
100% { background-position: -200% 0; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slideDown {
|
.action[disabled] {
|
||||||
from { transform: translateY(-10px); opacity: 0; }
|
opacity: 0.5;
|
||||||
to { transform: translateY(0); opacity: 1; }
|
cursor: not-allowed;
|
||||||
|
box-shadow: none;
|
||||||
|
transform: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<div class="card main">
|
<div class="card main">
|
||||||
<div class="title" id="screenTitle"></div>
|
|
||||||
<p class="subtitle" id="screenSubtitle"></p>
|
|
||||||
<div id="screenContent"></div>
|
<div id="screenContent"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card info-card" id="helperCard"></div>
|
<button class="action" id="actionButton" aria-label="Дальше">›</button>
|
||||||
<button class="action" id="actionButton">Далее</button>
|
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
var state = {
|
var state = {
|
||||||
screen: 0,
|
screen: 0,
|
||||||
loadingTimer: null,
|
loadingTimer: null,
|
||||||
loadingProgress: 0
|
loadingProgress: 0,
|
||||||
|
accepted: false
|
||||||
};
|
};
|
||||||
|
|
||||||
var screens = [
|
var screens = [
|
||||||
{
|
{
|
||||||
title: 'Загрузите материалы',
|
|
||||||
subtitle: 'Фото и видео уже загружены.',
|
|
||||||
helper: 'Загружено: 8 фото и 2 видео.',
|
|
||||||
actionLabel: 'Далее',
|
|
||||||
content: function () {
|
content: function () {
|
||||||
return (
|
return (
|
||||||
|
'<div class="section-title">Материалы</div>' +
|
||||||
'<div class="media-count">8 фото · 2 видео</div>' +
|
'<div class="media-count">8 фото · 2 видео</div>' +
|
||||||
'<div class="media-grid">' +
|
'<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-1502005097973-6a7082348e28?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-1484154218962-a197022b5858?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-1493809842364-78817add7ffb?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-1502005097973-6a7082348e28?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-1484154218962-a197022b5858?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-1493809842364-78817add7ffb?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-1484154218962-a197022b5858?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 video" style="background-image:url(https://images.unsplash.com/photo-1502005097973-6a7082348e28?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 class="thumb" style="background-image:url(https://images.unsplash.com/photo-1493809842364-78817add7ffb?auto=format&fit=crop&w=600&q=60)"></div>' +
|
||||||
'</div>'
|
'</div>'
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
@@ -342,15 +367,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Идёт анализ',
|
|
||||||
subtitle: 'Проверяем материалы и считаем объём работ.',
|
|
||||||
helper: 'Обычно это занимает до 5 секунд.',
|
|
||||||
actionLabel: 'Подождите…',
|
|
||||||
content: function () {
|
content: function () {
|
||||||
return (
|
return (
|
||||||
|
'<div class="section-title">Анализ</div>' +
|
||||||
'<div class="analysis">' +
|
'<div class="analysis">' +
|
||||||
'<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
|
'<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
|
||||||
'<div class="hint">Анализируем данные</div>' +
|
'<div class="hint">5 секунд</div>' +
|
||||||
'</div>'
|
'</div>'
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
@@ -376,33 +398,28 @@
|
|||||||
onAction: function () {}
|
onAction: function () {}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Готово. Ознакомьтесь',
|
|
||||||
subtitle: 'План работ и смета сформированы.',
|
|
||||||
helper: 'Нажмите на пункт, чтобы посмотреть критерии приёмки.',
|
|
||||||
actionLabel: 'Далее',
|
|
||||||
content: function () {
|
content: function () {
|
||||||
return (
|
return (
|
||||||
'<div class="section-title">План работ</div>' +
|
|
||||||
'<table class="table">' +
|
'<table class="table">' +
|
||||||
'<thead><tr><th>Этап</th><th>Старт</th><th>Финиш</th></tr></thead>' +
|
'<thead><tr><th>Работы</th><th>Старт</th><th>Финиш</th><th>Сумма</th></tr></thead>' +
|
||||||
'<tbody>' +
|
'<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>12.03</td><td>15.03</td><td>120 000 ₽</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>16.03</td><td>24.03</td><td>340 000 ₽</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>25.03</td><td>28.03</td><td>180 000 ₽</td></tr>' +
|
||||||
'<tr><td>Чистовая отделка<span class="q" title="Поверхности готовы, без дефектов">?</span></td><td>29.03</td><td>08.04</td></tr>' +
|
'<tr><td>Чистовая отделка<span class="q" title="Без дефектов">?</span></td><td>29.03</td><td>08.04</td><td>410 000 ₽</td></tr>' +
|
||||||
'</tbody>' +
|
'</tbody>' +
|
||||||
'</table>' +
|
'</table>' +
|
||||||
'<div class="section-title">Ресурсная смета</div>' +
|
'<div class="section-title" style="margin-top:8px;">Материалы</div>' +
|
||||||
'<table class="table">' +
|
'<table class="table">' +
|
||||||
'<thead><tr><th>Материал</th><th>Объём</th><th>Стоимость</th></tr></thead>' +
|
'<thead><tr><th>Позиция</th><th>Объём</th><th>Сумма</th></tr></thead>' +
|
||||||
'<tbody>' +
|
'<tbody>' +
|
||||||
'<tr><td>Штукатурка</td><td>120 м²</td><td>94 000 ₽</td></tr>' +
|
'<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>320 м</td><td>52 000 ₽</td></tr>' +
|
||||||
'<tr><td>Плитка</td><td>34 м²</td><td>126 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>' +
|
'<tr><td>Смеси</td><td>48 меш.</td><td>37 000 ₽</td></tr>' +
|
||||||
'</tbody>' +
|
'</tbody>' +
|
||||||
'</table>'
|
'</table>' +
|
||||||
|
'<div class="total" style="margin-top:8px;"><span>Итого</span><span>1 359 000 ₽</span></div>'
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
onEnter: function () {},
|
onEnter: function () {},
|
||||||
@@ -412,48 +429,56 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Уведомление по этапу',
|
|
||||||
subtitle: 'Новый статус по работам.',
|
|
||||||
helper: 'Проверьте чек-лист и подтвердите приёмку.',
|
|
||||||
actionLabel: 'Начать заново',
|
|
||||||
content: function () {
|
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 (
|
return (
|
||||||
'<div class="toast">Бригада «Север» сдала этап «Черновые работы».<small>Сегодня, 18:20</small></div>' +
|
'<div class="section-title">Приемка</div>' +
|
||||||
'<div class="list" style="margin-top:10px;">' +
|
'<div class="accept-card">' +
|
||||||
'<div class="item"><strong>Оплата</strong><span class="tag pending">Ожидает приёмку</span></div>' +
|
'<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 class="item"><strong>Фото-отчёт</strong><span class="tag info">12 файлов</span></div>' +
|
'<div>' +
|
||||||
|
'<div class="accept-title">Черновые работы</div>' +
|
||||||
|
'<div class="accept-meta">Эксперт подтвердил · Смирнов А.</div>' +
|
||||||
|
'<div class="tag info" style="margin-top:6px;">Фото-отчет загружен</div>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div class="section-title">Документы</div>' +
|
'</div>' +
|
||||||
'<div class="skeleton">' +
|
'<div class="toggle-row">' +
|
||||||
'<div class="skeleton-line wide"></div>' +
|
'<span>Подтвердить приемку</span>' +
|
||||||
'<div class="skeleton-line"></div>' +
|
'<label class="switch">' +
|
||||||
'<div class="skeleton-line"></div>' +
|
'<input type="checkbox" id="acceptToggle" ' + (state.accepted ? 'checked' : '') + ' />' +
|
||||||
|
'<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>'
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
onEnter: function () {},
|
onEnter: function () {
|
||||||
|
var toggle = document.getElementById('acceptToggle');
|
||||||
|
if (toggle) {
|
||||||
|
toggle.addEventListener('change', function (event) {
|
||||||
|
state.accepted = event.target.checked;
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
onAction: function () {
|
onAction: function () {
|
||||||
state.screen = 0;
|
state.screen = 0;
|
||||||
|
state.accepted = false;
|
||||||
render();
|
render();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
var screenTitle = document.getElementById('screenTitle');
|
|
||||||
var screenSubtitle = document.getElementById('screenSubtitle');
|
|
||||||
var screenContent = document.getElementById('screenContent');
|
var screenContent = document.getElementById('screenContent');
|
||||||
var helperCard = document.getElementById('helperCard');
|
|
||||||
var actionButton = document.getElementById('actionButton');
|
var actionButton = document.getElementById('actionButton');
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
var screen = screens[state.screen];
|
var screen = screens[state.screen];
|
||||||
screenTitle.textContent = screen.title;
|
|
||||||
screenSubtitle.textContent = screen.subtitle;
|
|
||||||
screenContent.innerHTML = screen.content();
|
screenContent.innerHTML = screen.content();
|
||||||
helperCard.textContent = screen.helper;
|
|
||||||
actionButton.textContent = screen.actionLabel;
|
|
||||||
actionButton.disabled = state.screen === 1;
|
actionButton.disabled = state.screen === 1;
|
||||||
|
|
||||||
if (screen.onEnter) {
|
if (screen.onEnter) {
|
||||||
screen.onEnter();
|
screen.onEnter();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user