Update flow fit and refine prototype screens

app/app.vue

@@ -163,6 +163,8 @@
                 <div class="flow-wrapper glass-panel rounded-3xl border border-base-300 p-4">
                   <ClientOnly>
                     <VueFlow
+                      :id="flowId"
+                      class="h-full w-full"
                       :nodes="flowNodes"
                       :edges="flowEdges"
                       :fit-view-on-init="true"
@@ -404,9 +406,11 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, nextTick, ref } from 'vue'
-import { VueFlow, Handle, Position, MarkerType } from '@vue-flow/core'
+import { VueFlow, Handle, Position, MarkerType, useVueFlow } from '@vue-flow/core'
 import Granim from 'granim'
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
 
 useHead({
   title: 'Контроль ремонта — презентация',
@@ -416,6 +420,7 @@ useHead({
 })
 
 let granimInstance
+const flowId = 'key-user-flow'
 const flowNodes = ref([
   {
     id: '1',
@@ -498,6 +503,8 @@ const flowEdges = ref([
   { id: 'e6-7', source: '6', target: '7', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'straight', markerEnd: MarkerType.ArrowClosed }
 ])
 
+const { fitView } = useVueFlow({ id: flowId })
+
 onMounted(() => {
   granimInstance = new Granim({
     element: '#canvas-basic',
@@ -514,6 +521,10 @@ onMounted(() => {
     }
   })
 
+  nextTick(() => {
+    fitView({ padding: 0.08 })
+  })
+
   onUnmounted(() => {
     if (granimInstance && granimInstance.pause) granimInstance.pause()
   })
@@ -521,8 +532,6 @@ onMounted(() => {
 </script>
 
 <style>
-@import '@vue-flow/core/dist/style.css';
-@import '@vue-flow/core/dist/theme-default.css';
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap');
 
 :root {
@@ -553,7 +562,7 @@ html {
 
 .flow-wrapper {
   width: 100%;
-  height: 100%;
+  height: 320px;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: thin;
@@ -579,20 +588,6 @@ html {
   height: 100%;
 }
 
-.vue-flow {
-  position: relative;
-}
-
-.vue-flow__nodes {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.vue-flow__edges {
-  position: absolute;
-  inset: 0;
-}
 
 .flow-card {
   min-width: 160px;
@@ -716,12 +711,7 @@ html {
 
 .flow-slide .slide-main {
   flex: 1;
-  min-height: 420px;
+  min-height: 360px;
-}
-
-.flow-main .flow-wrapper {
-  height: 100%;
-  min-height: 420px;
 }
 
 .glass-panel {

public/prototype.html

@@ -25,17 +25,46 @@
         height: 100%;
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 12px;
-        padding: 14px 12px 16px;
+        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: #ffffff;
+        background: transparent;
         border-radius: 12px;
-        border: 1px solid rgba(27, 31, 35, 0.1);
+        border: none;
-        padding: 14px;
+        padding: 0;
-        box-shadow: 0 8px 18px rgba(27, 31, 35, 0.08);
+        box-shadow: none;
       }
 
       .card.main {
@@ -62,6 +91,7 @@
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 6px;
+        margin-top: 12px;
       }
 
       .thumb {
@@ -108,17 +138,12 @@
         z-index: 1;
       }
 
-      .analysis {
-        display: grid;
-        gap: 10px;
-        margin-top: 6px;
-      }
-
       .loader {
         height: 8px;
         background: rgba(15, 76, 129, 0.12);
         border-radius: 999px;
         overflow: hidden;
+        width: 140px;
       }
 
       .loader__bar {
@@ -138,6 +163,7 @@
         width: 100%;
         border-collapse: collapse;
         font-size: 11px;
+        margin-top: 12px;
       }
 
       .table th,
@@ -182,6 +208,7 @@
         grid-template-columns: 54px 1fr;
         gap: 10px;
         align-items: center;
+        margin-top: 12px;
         padding: 10px;
         border-radius: 12px;
         background: #f0f2f4;
@@ -206,6 +233,12 @@
         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;
@@ -234,7 +267,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-top: 8px;
+        margin-top: 12px;
         padding: 8px 10px;
         border-radius: 10px;
         background: #f0f2f4;
@@ -287,7 +320,7 @@
       .list {
         display: grid;
         gap: 8px;
-        margin-top: 8px;
+        margin-top: 12px;
       }
 
       .item {
@@ -345,8 +378,7 @@
           {
             content: function () {
               return (
-                '<div class="section-title">Материалы</div>' +
+                '<div class="screen-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-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>' +
@@ -369,10 +401,10 @@
           {
             content: function () {
               return (
-                '<div class="section-title">Анализ</div>' +
+                '<div class="analysis-hero">' +
-                '<div class="analysis">' +
+                '<div class="screen-title">Анализируем объект</div>' +
+                '<div class="analysis-sub">Формируем смету, этапы и критерии приемки</div>' +
                 '<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
-                '<div class="hint">5 секунд</div>' +
                 '</div>'
               );
             },
@@ -400,6 +432,8 @@
           {
             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>' +
@@ -430,16 +464,13 @@
           },
           {
             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="section-title">Приемка</div>' +
+                '<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 class="accept-meta">Исполнитель: Смирнов А. · Фотоотчет загружен</div>' +
-                '<div class="tag info" style="margin-top:6px;">Фото-отчет загружен</div>' +
                 '</div>' +
                 '</div>' +
                 '<div class="toggle-row">' +
@@ -449,10 +480,7 @@
                 '<span class="slider"></span>' +
                 '</label>' +
                 '</div>' +
-                '<div class="list">' +
+                '<div class="accept-note">Подтверждая приемку работ, вы переводите оплату исполнителю.</div>'
-                '<div class="item"><strong>Статус</strong>' + statusTag + '</div>' +
-                '<div class="item"><strong>Оплата</strong>' + payTag + '</div>' +
-                '</div>'
               );
             },
             onEnter: function () {