Simplify prototype flow to single-button app

public/prototype.html

@@ -76,14 +76,14 @@
         width: 10%;
         background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
         border-radius: inherit;
-        transition: width 0.35s ease;
+        transition: width 0.6s ease;
       }
 
       .card {
         background: rgba(255, 255, 255, 0.92);
         border-radius: 18px;
         border: 1px solid rgba(23, 23, 23, 0.08);
-        padding: 14px;
+        padding: 16px;
         box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08);
       }
 
@@ -91,14 +91,7 @@
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 12px;
-      }
-
-      .eyebrow {
-        font-size: 10px;
-        letter-spacing: 0.16em;
-        text-transform: uppercase;
-        color: rgba(23, 23, 23, 0.5);
       }
 
       .title {
@@ -115,7 +108,7 @@
       .list {
         display: grid;
         gap: 8px;
-        margin-top: 4px;
+        margin-top: 2px;
       }
 
       .item {
@@ -160,48 +153,67 @@
         line-height: 1.4;
       }
 
-      .actions {
+      .action {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 8px;
-      }
-
-      .actions .btn {
         border: none;
         border-radius: 14px;
-        padding: 10px 12px;
+        padding: 12px 14px;
-        font-size: 12px;
+        font-size: 13px;
         font-weight: 600;
         cursor: pointer;
-        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
-      }
-
-      .actions .btn:active {
-        transform: scale(0.98);
-      }
-
-      .btn.primary {
         background: #1a4d7a;
         color: #fff;
         box-shadow: 0 10px 20px rgba(26, 77, 122, 0.3);
-        grid-column: span 2;
+        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
       }
 
-      .btn.secondary {
+      .action:active {
+        transform: scale(0.98);
+      }
+
+      .action[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+        box-shadow: none;
+        transform: none;
+      }
+
+      .loading {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 6px;
+      }
+
+      .loader {
+        height: 10px;
+        background: rgba(26, 77, 122, 0.12);
+        border-radius: 999px;
+        overflow: hidden;
+      }
+
+      .loader__bar {
+        height: 100%;
+        width: 0;
+        background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
+        border-radius: inherit;
+        transition: width 0.4s ease;
+      }
+
+      .hint {
+        font-size: 11px;
+        color: rgba(23, 23, 23, 0.55);
+      }
+
+      .bubble {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        border-radius: 999px;
         background: rgba(26, 77, 122, 0.12);
         color: #1a4d7a;
-      }
+        font-size: 11px;
-
+        font-weight: 600;
-      .btn.ghost {
-        background: rgba(23, 23, 23, 0.06);
-        color: rgba(23, 23, 23, 0.75);
-      }
-
-      .btn[disabled] {
-        opacity: 0.45;
-        cursor: not-allowed;
-        transform: none;
-        box-shadow: none;
       }
     </style>
   </head>
@@ -220,289 +232,145 @@
         <div class="progress__bar" id="progressBar"></div>
       </div>
       <div class="card main">
-        <div class="eyebrow" id="stepLabel"></div>
+        <div class="title" id="screenTitle"></div>
-        <div class="title" id="stepTitle"></div>
+        <p class="subtitle" id="screenSubtitle"></p>
-        <p class="subtitle" id="stepSubtitle"></p>
+        <div id="screenContent"></div>
-        <div id="stepContent"></div>
       </div>
       <div class="card info-card" id="helperCard"></div>
-      <div class="actions">
+      <button class="action" id="actionButton">Далее</button>
-        <button class="btn ghost" data-action="back">Назад</button>
-        <button class="btn secondary" data-action="primary">Добавить</button>
-        <button class="btn primary" data-action="next">Далее</button>
-      </div>
     </div>
     <script>
       (function () {
         var state = {
-          step: 0,
+          screen: 0,
-          projectCreated: false,
+          loadingTimer: null,
-          addressAdded: false,
+          loadingProgress: 0
-          mediaAdded: false,
-          quoteApproved: false,
-          stageStarted: false,
-          accepted: false
         };
 
-        function resetState() {
+        var screens = [
-          state.step = 0;
-          state.projectCreated = false;
-          state.addressAdded = false;
-          state.mediaAdded = false;
-          state.quoteApproved = false;
-          state.stageStarted = false;
-          state.accepted = false;
-        }
-
-        var steps = [
           {
-            label: 'Шаг 1 из 6',
+            title: 'Загрузите материалы',
-            title: 'Старт проекта',
+            subtitle: 'Фото и видео помогут быстро оценить объём работ.',
-            subtitle: 'Зафиксируйте объект, чтобы запустить сценарий.',
+            helper: 'Можно добавить всё за один раз или частями. Мы всё сохраним.',
-            primaryLabel: 'Создать проект',
+            actionLabel: 'Далее',
-            onPrimary: function () {
-              state.projectCreated = true;
-            },
-            ready: function () {
-              return state.projectCreated;
-            },
             content: function () {
-              var status = state.projectCreated ? 'Проект создан' : 'Проект не создан';
-              var tagClass = state.projectCreated ? 'success' : 'pending';
               return (
                 '<div class="list">' +
-                '<div class="item"><strong>Объект</strong><span class="tag ' +
+                '<div class="item"><strong>Фото</strong><span class="tag pending">Нужно загрузить</span></div>' +
-                tagClass +
+                '<div class="item"><strong>Видео</strong><span class="tag pending">Нужно загрузить</span></div>' +
-                '">' +
+                '<div class="item"><strong>Комментарий</strong><span class="tag info">Опишите особенности</span></div>' +
-                status +
-                '</span></div>' +
-                '<div class="item"><strong>План приемки</strong><span class="tag info">В подготовке</span></div>' +
                 '</div>'
               );
             },
-            helper: function () {
+            onEnter: function () {},
-              return state.projectCreated
+            onAction: function () {
-                ? 'Проект создан. Теперь добавьте адрес и параметры объекта, чтобы расчет стал точным.'
+              state.screen = 1;
-                : 'Нажмите «Создать проект», чтобы зафиксировать старт и открыть следующие шаги.';
+              render();
             }
           },
           {
-            label: 'Шаг 2 из 6',
+            title: 'Идёт анализ',
-            title: 'Добавление объекта',
+            subtitle: 'Проверяем материалы и считаем объём работ.',
-            subtitle: 'Адрес и параметры нужны для точной сметы.',
+            helper: 'Это займёт около 5 секунд.',
-            primaryLabel: 'Добавить адрес',
+            actionLabel: 'Подождите…',
-            onPrimary: function () {
-              state.addressAdded = true;
-            },
-            ready: function () {
-              return state.addressAdded;
-            },
             content: function () {
-              var address = state.addressAdded ? 'Москва, ул. Правды, 12' : 'Адрес не указан';
-              var tagClass = state.addressAdded ? 'success' : 'pending';
               return (
-                '<div class="list">' +
+                '<div class="loading">' +
-                '<div class="item"><strong>Адрес</strong><span class="tag ' +
+                '<div class="bubble">Загрузка данных</div>' +
-                tagClass +
+                '<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
-                '">' +
+                '<div class="hint">Готовим план и смету</div>' +
-                address +
-                '</span></div>' +
-                '<div class="item"><strong>Метраж</strong><span class="tag info">68 м²</span></div>' +
                 '</div>'
               );
             },
-            helper: function () {
+            onEnter: function () {
-              return state.addressAdded
+              var bar = document.getElementById('loaderBar');
-                ? 'Адрес сохранен. Переходим к медиа — это помогает зафиксировать стартовое состояние.'
+              state.loadingProgress = 0;
-                : 'Добавьте адрес, чтобы расчет сметы учитывал реальный объект.';
+              if (state.loadingTimer) {
+                clearInterval(state.loadingTimer);
+              }
+              state.loadingTimer = setInterval(function () {
+                state.loadingProgress += 20;
+                if (bar) {
+                  bar.style.width = state.loadingProgress + '%';
+                }
+                if (state.loadingProgress >= 100) {
+                  clearInterval(state.loadingTimer);
+                  state.loadingTimer = null;
+                  state.screen = 2;
+                  render();
+                }
+              }, 1000);
+            },
+            onAction: function () {}
+          },
+          {
+            title: 'Готово. Ознакомьтесь',
+            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>'
+              );
+            },
+            onEnter: function () {},
+            onAction: function () {
+              state.screen = 3;
+              render();
             }
           },
           {
-            label: 'Шаг 3 из 6',
+            title: 'Уведомление по этапу',
-            title: 'Фото и видео',
+            subtitle: 'Бригада «Север» завершила этап «Черновые работы».',
-            subtitle: 'Фиксируем стартовое состояние объекта.',
+            helper: 'Откройте этап и посмотрите, всё ли соответствует критериям.',
-            primaryLabel: 'Добавить медиа',
+            actionLabel: 'Начать заново',
-            onPrimary: function () {
-              state.mediaAdded = true;
-            },
-            ready: function () {
-              return state.mediaAdded;
-            },
             content: function () {
-              var text = state.mediaAdded ? '12 фото, 2 видео' : 'Медиа не загружены';
-              var tagClass = state.mediaAdded ? 'success' : 'pending';
               return (
                 '<div class="list">' +
-                '<div class="item"><strong>Загрузка</strong><span class="tag ' +
+                '<div class="item"><strong>Этап</strong><span class="tag success">Сдан</span></div>' +
-                tagClass +
+                '<div class="item"><strong>Дата</strong><span class="tag info">Сегодня, 18:20</span></div>' +
-                '">' +
+                '<div class="item"><strong>Оплата</strong><span class="tag pending">Ожидает приёмку</span></div>' +
-                text +
-                '</span></div>' +
-                '<div class="item"><strong>Комментарий</strong><span class="tag info">Черновая стяжка</span></div>' +
                 '</div>'
               );
             },
-            helper: function () {
+            onEnter: function () {},
-              return state.mediaAdded
+            onAction: function () {
-                ? 'Медиа загружены. Система сформирует смету и этапы на основании материалов.'
+              state.screen = 0;
-                : 'Добавьте фото и видео, чтобы у обеих сторон была единая точка отсчета.';
+              render();
-            }
-          },
-          {
-            label: 'Шаг 4 из 6',
-            title: 'Смета и этапы',
-            subtitle: 'Проверьте расчет и зафиксируйте этапы.',
-            primaryLabel: 'Согласовать смету',
-            onPrimary: function () {
-              state.quoteApproved = true;
-            },
-            ready: function () {
-              return state.quoteApproved;
-            },
-            content: function () {
-              var tagClass = state.quoteApproved ? 'success' : 'pending';
-              var status = state.quoteApproved ? 'Согласовано' : 'На согласовании';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Смета</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                status +
-                '</span></div>' +
-                '<div class="item"><strong>Этапы</strong><span class="tag info">6 этапов</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.quoteApproved
-                ? 'Смета согласована. Можно запускать работы по первому этапу.'
-                : 'Согласуйте смету, чтобы зафиксировать финансовую модель и регламент.';
-            }
-          },
-          {
-            label: 'Шаг 5 из 6',
-            title: 'Старт этапа',
-            subtitle: 'Исполнитель следует чек-листу и фиксирует ход.',
-            primaryLabel: 'Запустить этап 1',
-            onPrimary: function () {
-              state.stageStarted = true;
-            },
-            ready: function () {
-              return state.stageStarted;
-            },
-            content: function () {
-              var tagClass = state.stageStarted ? 'success' : 'pending';
-              var status = state.stageStarted ? 'В работе' : 'Не запущен';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Этап 1</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                status +
-                '</span></div>' +
-                '<div class="item"><strong>Чек-лист</strong><span class="tag info">12 пунктов</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.stageStarted
-                ? 'Этап запущен. Система подготовит уведомление о приемке.'
-                : 'Запустите этап, чтобы начать работу и фиксировать прогресс.';
-            }
-          },
-          {
-            label: 'Шаг 6 из 6',
-            title: 'Приемка и оплата',
-            subtitle: 'Подтвердите качество, чтобы закрыть этап и оплату.',
-            primaryLabel: 'Подтвердить качество',
-            onPrimary: function () {
-              state.accepted = true;
-            },
-            ready: function () {
-              return state.accepted;
-            },
-            content: function () {
-              var status = state.accepted ? 'Принято' : 'Ожидает';
-              var tagClass = state.accepted ? 'success' : 'info';
-              return (
-                '<div class="list">' +
-                '<div class="item"><strong>Инспекция</strong><span class="tag ' +
-                tagClass +
-                '">' +
-                status +
-                '</span></div>' +
-                '<div class="item"><strong>Эскроу</strong><span class="tag info">1 250 000 ₽</span></div>' +
-                '</div>'
-              );
-            },
-            helper: function () {
-              return state.accepted
-                ? 'Качество подтверждено. Средства автоматически переводятся исполнителю.'
-                : 'Подтвердите качество, чтобы выпустить оплату и закрыть этап.';
             }
           }
         ];
 
-        var stepLabel = document.getElementById('stepLabel');
+        var screenTitle = document.getElementById('screenTitle');
-        var stepTitle = document.getElementById('stepTitle');
+        var screenSubtitle = document.getElementById('screenSubtitle');
-        var stepSubtitle = document.getElementById('stepSubtitle');
+        var screenContent = document.getElementById('screenContent');
-        var stepContent = document.getElementById('stepContent');
         var helperCard = document.getElementById('helperCard');
         var progressBar = document.getElementById('progressBar');
-        var actions = document.querySelector('.actions');
+        var actionButton = document.getElementById('actionButton');
 
         function render() {
-          var step = steps[state.step];
+          var screen = screens[state.screen];
-          stepLabel.textContent = step.label;
+          screenTitle.textContent = screen.title;
-          stepTitle.textContent = step.title;
+          screenSubtitle.textContent = screen.subtitle;
-          stepSubtitle.textContent = step.subtitle;
+          screenContent.innerHTML = screen.content();
-          stepContent.innerHTML = step.content();
+          helperCard.textContent = screen.helper;
-          helperCard.textContent = step.helper();
+          progressBar.style.width = ((state.screen + 1) / screens.length) * 100 + '%';
-          progressBar.style.width = ((state.step + 1) / steps.length) * 100 + '%';
+          actionButton.textContent = screen.actionLabel;
+          actionButton.disabled = state.screen === 1;
 
-          var buttons = actions.querySelectorAll('button');
+          if (screen.onEnter) {
-          buttons.forEach(function (btn) {
+            screen.onEnter();
-            var action = btn.getAttribute('data-action');
+          }
-            if (action === 'back') {
-              btn.disabled = state.step === 0;
-            }
-            if (action === 'primary') {
-              btn.textContent = step.primaryLabel || 'Действие';
-              btn.style.display = step.primaryLabel ? 'inline-flex' : 'none';
-            }
-            if (action === 'next') {
-              btn.textContent = state.step === steps.length - 1 ? 'Завершить' : 'Далее';
-              btn.disabled = !step.ready();
-            }
-          });
         }
 
-        actions.addEventListener('click', function (event) {
+        actionButton.addEventListener('click', function () {
-          var target = event.target;
+          var screen = screens[state.screen];
-          if (!target || !target.getAttribute) return;
+          if (screen.onAction) {
-          var action = target.getAttribute('data-action');
+            screen.onAction();
-          var step = steps[state.step];
-          if (action === 'back') {
-            state.step = Math.max(0, state.step - 1);
-            render();
-            return;
-          }
-          if (action === 'primary') {
-            if (step.onPrimary) {
-              step.onPrimary();
-            }
-            render();
-            return;
-          }
-          if (action === 'next') {
-            if (!step.ready()) return;
-            if (state.step >= steps.length - 1) {
-              resetState();
-              render();
-              return;
-            }
-            state.step += 1;
-            render();
           }
         });