Update prototype layout and flow view

package-lock.json

@@ -8,6 +8,8 @@
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
+        "@vue-flow/core": "^1.48.2",
+        "granim": "^2.0.0",
         "nuxt": "^4.3.1",
         "vue": "^3.5.28",
         "vue-router": "^4.6.4"
@@ -3562,6 +3564,12 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
     "node_modules/@unhead/vue": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.1.4.tgz",
@@ -3661,6 +3669,22 @@
       "integrity": "sha512-ynlcBReMgOZj2i6po+qVswtDUeeBRCTgDurjMGShbm8WYZgJ0PA4RmtebBJ0BCYol1qPv3GQF6jK7C9qoVc7lg==",
       "license": "MIT"
     },
+    "node_modules/@vue-flow/core": {
+      "version": "1.48.2",
+      "resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.48.2.tgz",
+      "integrity": "sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^10.5.0",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.0"
+      }
+    },
     "node_modules/@vue-macros/common": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.2.tgz",
@@ -3917,6 +3941,94 @@
       "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
@@ -5181,6 +5293,112 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/daisyui": {
       "version": "5.5.18",
       "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.18.tgz",
@@ -6070,6 +6288,12 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/granim": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/granim/-/granim-2.0.0.tgz",
+      "integrity": "sha512-aqa79K49ndjoUBtpYzlO8sKcuVQED+5axvX0SveqTLDR+Fa2G42AGntuQ36ysCFOWGVkWCLfHowFwk+D/9rGDg==",
+      "license": "MIT"
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",

package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@nuxtjs/tailwindcss": "^6.14.0",
+    "@vue-flow/core": "^1.48.2",
+    "granim": "^2.0.0",
     "nuxt": "^4.3.1",
     "vue": "^3.5.28",
     "vue-router": "^4.6.4"

public/prototype.html

@@ -0,0 +1,526 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Прототип</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: 'Manrope', system-ui, sans-serif;
+        color: #1b1f23;
+        background: #eef1f4;
+      }
+
+      .app {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        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: transparent;
+        border-radius: 12px;
+        border: none;
+        padding: 0;
+        box-shadow: none;
+      }
+
+      .card.main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .section-title {
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        color: rgba(27, 31, 35, 0.45);
+      }
+
+      .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;
+        margin-top: 12px;
+      }
+
+      .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;
+        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;
+      }
+
+      .loader {
+        height: 8px;
+        background: rgba(15, 76, 129, 0.12);
+        border-radius: 999px;
+        overflow: hidden;
+        width: 140px;
+      }
+
+      .loader__bar {
+        height: 100%;
+        width: 0;
+        background: linear-gradient(90deg, #0f4c81, #4f8fc7);
+        border-radius: inherit;
+        transition: width 0.4s ease;
+      }
+
+      .hint {
+        font-size: 11px;
+        color: rgba(27, 31, 35, 0.55);
+      }
+
+      .table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 11px;
+        margin-top: 12px;
+      }
+
+      .table th,
+      .table td {
+        padding: 6px 6px;
+        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;
+      }
+
+      .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;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        margin-left: 4px;
+        border-radius: 999px;
+        background: rgba(15, 76, 129, 0.12);
+        color: #0f4c81;
+        font-size: 10px;
+        font-weight: 700;
+      }
+
+      .accept-card {
+        display: grid;
+        grid-template-columns: 54px 1fr;
+        gap: 10px;
+        align-items: center;
+        margin-top: 12px;
+        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;
+        font-weight: 600;
+      }
+
+      .accept-meta {
+        font-size: 11px;
+        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;
+        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: 12px;
+        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: 12px;
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 10px;
+        border-radius: 10px;
+        background: #f0f2f4;
+        font-size: 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;
+      }
+
+      .action:active {
+        transform: scale(0.98);
+      }
+
+      .action[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+        box-shadow: none;
+        transform: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="app">
+      <div class="card main">
+        <div id="screenContent"></div>
+      </div>
+      <button class="action" id="actionButton" aria-label="Дальше">›</button>
+    </div>
+    <script>
+      (function () {
+        var state = {
+          screen: 0,
+          loadingTimer: null,
+          loadingProgress: 0,
+          accepted: false
+        };
+
+        var screens = [
+          {
+            content: function () {
+              return (
+                '<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>' +
+                '<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>'
+              );
+            },
+            onEnter: function () {},
+            onAction: function () {
+              state.screen = 1;
+              render();
+            }
+          },
+          {
+            content: function () {
+              return (
+                '<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>'
+              );
+            },
+            onEnter: function () {
+              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 () {}
+          },
+          {
+            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>' +
+                '<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" style="margin-top:8px;">Материалы</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>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>' +
+                '<div class="total" style="margin-top:8px;"><span>Итого</span><span>1 359 000 ₽</span></div>'
+              );
+            },
+            onEnter: function () {},
+            onAction: function () {
+              state.screen = 3;
+              render();
+            }
+          },
+          {
+            content: function () {
+              return (
+                '<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>' +
+                '</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="accept-note">Подтверждая приемку работ, вы переводите оплату исполнителю.</div>'
+              );
+            },
+            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 screenContent = document.getElementById('screenContent');
+        var actionButton = document.getElementById('actionButton');
+
+        function render() {
+          var screen = screens[state.screen];
+          screenContent.innerHTML = screen.content();
+          actionButton.disabled = state.screen === 1;
+          if (screen.onEnter) {
+            screen.onEnter();
+          }
+        }
+
+        actionButton.addEventListener('click', function () {
+          var screen = screens[state.screen];
+          if (screen.onAction) {
+            screen.onAction();
+          }
+        });
+
+        render();
+      })();
+    </script>
+  </body>
+</html>