Strip copy, simplify screens, add acceptance toggle

public/prototype.html

@@ -18,42 +18,31 @@
         height: 100%;
         font-family: 'Manrope', system-ui, sans-serif;
         color: #1b1f23;
-        background: #f4f5f7;
+        background: #eef1f4;
       }
 
       .app {
         height: 100%;
         display: flex;
         flex-direction: column;
-        gap: 12px;
-        padding: 18px 14px 16px;
-        background: #f4f5f7;
+        gap: 10px;
+        padding: 14px 12px 16px;
+        background: #eef1f4;
       }
 
       .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);
+        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);
       }
 
       .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;
+        gap: 10px;
       }
 
       .section-title {
@@ -61,79 +50,6 @@
         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 {
@@ -226,7 +142,7 @@
 
       .table th,
       .table td {
-        padding: 6px 8px;
+        padding: 6px 6px;
         text-align: left;
         border-bottom: 1px solid rgba(27, 31, 35, 0.08);
       }
@@ -236,6 +152,17 @@
         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 {
         display: inline-flex;
         align-items: center;
@@ -250,88 +177,186 @@
         font-weight: 700;
       }
 
-      .toast {
-        position: relative;
-        background: #0f4c81;
-        color: #fff;
-        padding: 10px 12px;
+      .accept-card {
+        display: grid;
+        grid-template-columns: 54px 1fr;
+        gap: 10px;
+        align-items: center;
+        padding: 10px;
         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;
-        box-shadow: 0 10px 20px rgba(15, 76, 129, 0.25);
-        animation: slideDown 0.5s ease;
+        font-weight: 600;
       }
 
-      .toast small {
-        display: block;
-        opacity: 0.8;
-        margin-top: 4px;
+      .accept-meta {
+        font-size: 11px;
+        color: rgba(27, 31, 35, 0.6);
       }
 
-      .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;
         gap: 8px;
+        margin-top: 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;
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 10px;
+        border-radius: 10px;
+        background: #f0f2f4;
+        font-size: 12px;
       }
 
-      .skeleton-line.wide {
-        height: 12px;
+      .action {
+        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 {
-        0% { background-position: 200% 0; }
-        100% { background-position: -200% 0; }
+      .action:active {
+        transform: scale(0.98);
       }
 
-      @keyframes slideDown {
-        from { transform: translateY(-10px); opacity: 0; }
-        to { transform: translateY(0); opacity: 1; }
+      .action[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+        box-shadow: none;
+        transform: none;
       }
     </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>
+      <button class="action" id="actionButton" aria-label="Дальше">›</button>
     </div>
     <script>
       (function () {
         var state = {
           screen: 0,
           loadingTimer: null,
-          loadingProgress: 0
+          loadingProgress: 0,
+          accepted: false
         };
 
         var screens = [
           {
-            title: 'Загрузите материалы',
-            subtitle: 'Фото и видео уже загружены.',
-            helper: 'Загружено: 8 фото и 2 видео.',
-            actionLabel: 'Далее',
             content: function () {
               return (
+                '<div class="section-title">Материалы</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 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>' +
+                '<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-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>' +
+                '<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-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-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-1493809842364-78817add7ffb?auto=format&fit=crop&w=600&q=60)"></div>' +
                 '</div>'
               );
             },
@@ -342,15 +367,12 @@
             }
           },
           {
-            title: 'Идёт анализ',
-            subtitle: 'Проверяем материалы и считаем объём работ.',
-            helper: 'Обычно это занимает до 5 секунд.',
-            actionLabel: 'Подождите…',
             content: function () {
               return (
+                '<div class="section-title">Анализ</div>' +
                 '<div class="analysis">' +
                 '<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
-                '<div class="hint">Анализируем данные</div>' +
+                '<div class="hint">5 секунд</div>' +
                 '</div>'
               );
             },
@@ -376,33 +398,28 @@
             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>' +
+                '<thead><tr><th>Работы</th><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>' +
+                '<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><td>340 000 ₽</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><td>410 000 ₽</td></tr>' +
                 '</tbody>' +
                 '</table>' +
-                '<div class="section-title">Ресурсная смета</div>' +
+                '<div class="section-title" style="margin-top:8px;">Материалы</div>' +
                 '<table class="table">' +
-                '<thead><tr><th>Материал</th><th>Объём</th><th>Стоимость</th></tr></thead>' +
+                '<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>'
+                '</table>' +
+                '<div class="total" style="margin-top:8px;"><span>Итого</span><span>1 359 000 ₽</span></div>'
               );
             },
             onEnter: function () {},
@@ -412,48 +429,56 @@
             }
           },
           {
-            title: 'Уведомление по этапу',
-            subtitle: 'Новый статус по работам.',
-            helper: 'Проверьте чек-лист и подтвердите приёмку.',
-            actionLabel: 'Начать заново',
             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="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 class="section-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>' +
-                '<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>' +
+                '<div class="toggle-row">' +
+                '<span>Подтвердить приемку</span>' +
+                '<label class="switch">' +
+                '<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>'
               );
             },
-            onEnter: function () {},
+            onEnter: function () {
+              var toggle = document.getElementById('acceptToggle');
+              if (toggle) {
+                toggle.addEventListener('change', function (event) {
+                  state.accepted = event.target.checked;
+                  render();
+                });
+              }
+            },
             onAction: function () {
               state.screen = 0;
+              state.accepted = false;
               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();
           }