feat: SVG DRAKON diagram + light theme (raketa.com style)

index.html

@@ -8,8 +8,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-<!-- DrakonWidget — official DRAKON diagram renderer -->
-<script src="https://stepan-mitkin.github.io/drakonwidget/libs/drakonwidget.js"></script>
 <style>
 /* ============================================
    RESET & BASE
@@ -245,7 +243,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   background: var(--white);
   border-radius: var(--radius-xl);
   border: 1px solid var(--border);
-  padding: 24px;
+  padding: 40px 24px 24px;
   box-shadow: var(--shadow-lg);
   min-height: 500px;
   display: flex;
@@ -267,10 +265,15 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   border-radius: 6px;
 }
 
-#drakon-canvas {
+#drakon-diagram {
   width: 100%;
-  height: 420px;
+  max-width: 460px;
-  position: relative;
+}
+
+#drakon-diagram svg {
+  width: 100%;
+  height: auto;
+  display: block;
 }
 
 @media (max-width: 768px) {
@@ -881,11 +884,6 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   opacity: 1;
   transform: translateY(0);
 }
-
-/* DrakonWidget overrides for light theme */
-#drakon-canvas canvas {
-  border-radius: var(--radius);
-}
 </style>
 </head>
 <body>
@@ -938,7 +936,104 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
     </div>
     <div class="hero-diagram">
       <span class="hero-diagram-label">Пример: наш процесс</span>
-      <div id="drakon-canvas"></div>
+      <div id="drakon-diagram">
+        <svg viewBox="0 0 500 560" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <filter id="shadow-sm" x="-10%" y="-10%" width="120%" height="120%">
+              <feDropShadow dx="0" dy="1" stdDeviation="2" flood-color="#000" flood-opacity="0.06"/>
+            </filter>
+            <marker id="arrow" markerWidth="8" markerHeight="6" refX="4" refY="3" orient="auto">
+              <path d="M0,0 L8,3 L0,6 Z" fill="#6b7280"/>
+            </marker>
+          </defs>
+
+          <!-- Connection lines (drawn behind nodes) -->
+          <!-- Entry → Action 1 -->
+          <line x1="200" y1="52" x2="200" y2="78" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
+          <!-- Action 1 → Action 2 -->
+          <line x1="200" y1="130" x2="200" y2="156" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
+          <!-- Action 2 → Question -->
+          <line x1="200" y1="208" x2="200" y2="234" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
+
+          <!-- Question → Yes (down, main path) -->
+          <line x1="200" y1="296" x2="200" y2="322" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
+          <!-- Question → No (right branch) -->
+          <line x1="280" y1="265" x2="350" y2="265" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
+          <line x1="350" y1="265" x2="350" y2="380" stroke="#6b7280" stroke-width="2" stroke-dasharray="4,3"/>
+          <line x1="350" y1="380" x2="260" y2="380" stroke="#6b7280" stroke-width="2" stroke-dasharray="4,3" marker-end="url(#arrow)"/>
+
+          <!-- Action 3 → Action 4 -->
+          <line x1="200" y1="356" x2="200" y2="382" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
+          <!-- Action 4 → End -->
+          <line x1="200" y1="434" x2="200" y2="460" stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>
+
+          <!-- === Entry point (branch with arrow icon) === -->
+          <g filter="url(#shadow-sm)">
+            <polygon points="200,10 230,26 230,42 200,58 170,42 170,26" fill="#ffffff" stroke="#16a34a" stroke-width="2"/>
+            <path d="M200,18 L200,50" stroke="#16a34a" stroke-width="2"/>
+            <path d="M194,28 L200,20 L206,28" stroke="#16a34a" stroke-width="1.5" fill="none"/>
+            <text x="200" y="95" text-anchor="middle" fill="#6b7280" font-family="Inter,sans-serif" font-size="11">Начало</text>
+          </g>
+
+          <!-- === Action 1: Брифинг клиента === -->
+          <g filter="url(#shadow-sm)">
+            <rect x="110" y="78" width="180" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
+            <text x="200" y="110" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">Брифинг клиента</text>
+          </g>
+
+          <!-- === Action 2: Аудит процессов === -->
+          <g filter="url(#shadow-sm)">
+            <rect x="100" y="156" width="200" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
+            <text x="200" y="188" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">Аудит процессов</text>
+          </g>
+
+          <!-- === Question: Понятно? === -->
+          <g filter="url(#shadow-sm)">
+            <polygon points="200,234 280,265 280,300 200,331 120,300 120,265" fill="#ffffff" stroke="#f59e0b" stroke-width="2"/>
+            <text x="200" y="287" text-anchor="middle" fill="#92400e" font-family="Inter,sans-serif" font-size="14" font-weight="600">Понятно?</text>
+          </g>
+
+          <!-- "да" label -->
+          <rect x="180" y="304" width="40" height="20" rx="10" fill="#dcfce7" stroke="#16a34a" stroke-width="1"/>
+          <text x="200" y="318" text-anchor="middle" fill="#15803d" font-family="Inter,sans-serif" font-size="11" font-weight="700">да</text>
+
+          <!-- "нет" label -->
+          <rect x="310" y="252" width="40" height="20" rx="10" fill="#fee2e2" stroke="#ef4444" stroke-width="1"/>
+          <text x="330" y="266" text-anchor="middle" fill="#dc2626" font-family="Inter,sans-serif" font-size="11" font-weight="700">нет</text>
+
+          <!-- === Action 3: Создание схем ДРАКОН === -->
+          <g filter="url(#shadow-sm)">
+            <rect x="105" y="322" width="190" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
+            <text x="200" y="354" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">Создание схем</text>
+            <text x="200" y="370" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">ДРАКОН</text>
+          </g>
+
+          <!-- === Action 4: Согласование === -->
+          <g filter="url(#shadow-sm)">
+            <rect x="110" y="382" width="180" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
+            <text x="200" y="414" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="13" font-weight="500">Согласование</text>
+          </g>
+
+          <!-- === No-path action: Уточняем процесс === -->
+          <g filter="url(#shadow-sm)">
+            <rect x="255" y="380" width="150" height="52" rx="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
+            <text x="330" y="406" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="12" font-weight="500">Уточняем</text>
+            <text x="330" y="422" text-anchor="middle" fill="#111827" font-family="Inter,sans-serif" font-size="12" font-weight="500">процесс</text>
+          </g>
+
+          <!-- === End: Готово === -->
+          <g filter="url(#shadow-sm)">
+            <rect x="120" y="460" width="160" height="52" rx="26" fill="#f9fafb" stroke="#9ca3af" stroke-width="1.5"/>
+            <text x="200" y="491" text-anchor="middle" fill="#6b7280" font-family="Inter,sans-serif" font-size="14" font-weight="600">Готово</text>
+          </g>
+
+          <!-- Decorative dots -->
+          <circle cx="100" cy="100" r="2" fill="#dcfce7" opacity="0.6"/>
+          <circle cx="400" cy="200" r="1.5" fill="#fee2e2" opacity="0.6"/>
+          <circle cx="150" cy="500" r="2" fill="#dcfce7" opacity="0.4"/>
+          <circle cx="380" cy="480" r="1.5" fill="#f59e0b" opacity="0.3"/>
+        </svg>
+      </div>
     </div>
   </div>
 </section>
@@ -1352,157 +1447,7 @@ document.querySelectorAll('a[href^="#"]').forEach((a) => {
   });
 });
 
-// ============================================
+// Initialize on load — animations and smooth scroll
-// DRAKON DIAGRAM — DrakonWidget (view mode)
-// ============================================
-// DrakonWidget node types: end, action, question, branch, insertion, address,
-// select, case, loopbegin, loopend, parbegin, parend, duration
-// Flow direction: entry branch (branchId:0) → ... → end (terminator)
-
-function initDrakonDiagram() {
-  // Business process diagram — client onboarding flow
-  var diagram = {
-    name: "Наш процесс",
-    items: {
-      // Entry point (arrow icon)
-      "1": {
-        type: "branch",
-        branchId: 0,
-        one: "2"
-      },
-      // Step 1
-      "2": {
-        type: "action",
-        one: "3",
-        content: "Брифинг клиента"
-      },
-      // Step 2
-      "3": {
-        type: "action",
-        one: "4",
-        content: "Аудит процессов"
-      },
-      // Decision
-      "4": {
-        type: "question",
-        one: "5",
-        no: "6",
-        content: "Понятно?"
-      },
-      // Yes path — proceed
-      "5": {
-        type: "action",
-        one: "7",
-        content: "Создание схем ДРАКОН"
-      },
-      // No path — clarify
-      "6": {
-        type: "action",
-        one: "7",
-        content: "Уточняем процесс"
-      },
-      // Merge
-      "7": {
-        type: "action",
-        one: "8",
-        content: "Согласование"
-      },
-      // End — terminator
-      "8": {
-        type: "end"
-      }
-    }
-  };
-
-  // Minimal view-only configuration
-  var config = {
-    startEditContent: function () { /* read-only */ },
-    showContextMenu: function () { /* read-only */ },
-    canSelect: false,
-    maxWidth: 320,
-    theme: {
-      lineWidth: 2,
-      borderWidth: 0,
-      background: "#ffffff",
-      iconBorder: "#d1d5db",
-      iconBack: "#ffffff",
-      iconRadius: 6,
-      shadowBlur: 4,
-      shadowColor: "rgba(0, 0, 0, 0.06)",
-      color: "#111827",
-      lines: "#6b7280",
-      backText: "#16a34a",
-      font: "14px Inter, sans-serif",
-      headerFont: "bold 15px Inter, sans-serif",
-      yes: "Да",
-      no: "Нет"
-    }
-  };
-
-  // View-only edit sender
-  var sender = {
-    stop: function () { },
-    pushEdit: function () { /* read-only */ }
-  };
-
-  // Build widget
-  var drakonCanvas = document.getElementById('drakon-canvas');
-  var drakon = createDrakonWidget();
-  var WIDGET_W = 560;
-  var WIDGET_H = 420;
-
-  function rebuildWidget() {
-    drakonCanvas.innerHTML = '';
-    var widgetEl = drakon.render(WIDGET_W, WIDGET_H, config);
-    drakonCanvas.appendChild(widgetEl);
-  }
-
-  // Initial render
-  rebuildWidget();
-
-  // Load diagram
-  drakon.setDiagram(
-    'business-process',
-    diagram,
-    sender,
-    false // readOnly
-  );
-
-  // Redraw after layout pass
-  setTimeout(function () {
-    rebuildWidget();
-    drakon.setDiagram(
-      'business-process',
-      diagram,
-      sender,
-      false
-    );
-  }, 200);
-
-  // Handle resize
-  var resizeObserver = new ResizeObserver(function () {
-    rebuildWidget();
-    drakon.setDiagram(
-      'business-process',
-      diagram,
-      sender,
-      false
-    );
-  });
-  resizeObserver.observe(drakonCanvas);
-}
-
-// Initialize on load
-if (typeof createDrakonWidget === 'function') {
-  initDrakonDiagram();
-} else {
-  // Fallback if CDN is slow
-  window.addEventListener('load', function () {
-    if (typeof createDrakonWidget === 'function') {
-      initDrakonDiagram();
-    }
-  });
-}
 </script>
 </body>
 </html>