Update prototype copy, visuals, and flow details

public/prototype.html

@@ -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;