From 30742249740c3ae7927999469a521b6cd3fa8e33 Mon Sep 17 00:00:00 2001 From: neo <397763@gmail.com> Date: Tue, 23 Jun 2026 17:04:01 +0500 Subject: [PATCH] =?UTF-8?q?fix:=20SVG=20DRAKON=20diagram=20=E2=80=94=20con?= =?UTF-8?q?dition=20visible,=20proper=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 310 +++++++++++++---------------------------------------- 1 file changed, 76 insertions(+), 234 deletions(-) diff --git a/index.html b/index.html index 62785dd..daf0a42 100644 --- a/index.html +++ b/index.html @@ -317,7 +317,7 @@ img { max-width: 100%; display: block; } opacity: 1; } -/* Hero visual — DRAKON diagram mockup */ +/* Hero visual — DRAKON diagram */ .hero-visual { position: relative; display: flex; @@ -328,87 +328,14 @@ img { max-width: 100%; display: block; } .drakon-diagram { width: 100%; - max-width: 480px; - aspect-ratio: 3/4; + max-width: 440px; position: relative; } -.drakon-node { - position: absolute; - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: var(--radius-sm); - padding: 16px 20px; - font-size: 13px; - font-weight: 500; - color: var(--text); - transition: all 0.5s ease; - opacity: 0; - transform: scale(0.8); -} - -.drakon-diagram.loaded .drakon-node { - opacity: 1; - transform: scale(1); -} - -.drakon-node:hover { - border-color: var(--accent); - background: var(--bg-card-hover); -} - -.drakon-node.begin { - top: 0; - left: 50%; - transform: translateX(-50%) scale(0.8); - width: 200px; - text-align: center; - border-color: var(--accent); - background: var(--accent-glow); -} - -.drakon-node.action { - left: 50%; - transform: translateX(-50%) scale(0.8); - width: 240px; - text-align: center; -} - -.drakon-node.condition { - left: 50%; - transform: translateX(-50%) scale(0.8); - width: 200px; - text-align: center; - border-radius: 50% 50% 50% 0; - clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); - background: var(--bg-card); -} - -.drakon-node.end { - bottom: 0; - left: 50%; - transform: translateX(-50%) scale(0.8); - width: 180px; - text-align: center; - border-color: var(--text-tertiary); -} - -.drakon-line { - position: absolute; - background: var(--border); - z-index: 0; -} - -.drakon-line.vertical { - width: 2px; - left: 50%; - transform: translateX(-50%); -} - -.drakon-line.horizontal { - height: 2px; - top: 50%; - transform: translateY(-50%); +.drakon-diagram svg { + width: 100%; + height: auto; + display: block; } /* Floating particles */ @@ -1108,140 +1035,6 @@ img { max-width: 100%; display: block; } } } -/* ============================================ - DRAKON DIAGRAM CSS ART - ============================================ */ -.diagram-art { - display: flex; - flex-direction: column; - align-items: center; - gap: 0; - position: relative; -} - -.diagram-node { - padding: 12px 24px; - font-size: 13px; - font-weight: 600; - text-align: center; - border: 2px solid; - position: relative; - z-index: 1; -} - -.diagram-node.begin { - border-radius: 20px; - border-color: var(--accent); - background: rgba(34, 197, 94, 0.1); - color: var(--accent); - margin-bottom: 0; -} - -.diagram-node.action { - border-radius: 4px; - border-color: var(--border-light); - background: var(--bg-card); - color: var(--text); - margin-bottom: 0; -} - -.diagram-node.condition { - border-radius: 4px; - border-color: #f59e0b; - background: rgba(245, 158, 11, 0.1); - color: #f59e0b; - width: 180px; - margin-bottom: 0; -} - -.diagram-node.end { - border-radius: 20px; - border-color: var(--text-tertiary); - background: transparent; - color: var(--text-tertiary); - margin-bottom: 0; -} - -.diagram-connector { - width: 2px; - height: 24px; - background: var(--border); - position: relative; -} - -.diagram-connector::after { - content: ''; - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 0; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 5px solid var(--border); -} - -.diagram-branch { - position: absolute; - width: 2px; - background: var(--border); -} - -.diagram-branch.left { - right: 50%; - top: 50%; - height: 60px; - transform: translateX(calc(100% + 90px)); - transform-origin: top; -} - -.diagram-branch.right { - left: 50%; - top: 50%; - height: 60px; - transform: translateX(calc(-100% - 90px)); - transform-origin: top; -} - -.diagram-branch-label { - position: absolute; - font-size: 11px; - color: var(--text-tertiary); - white-space: nowrap; -} - -.diagram-branch-label.yes { - left: calc(50% + 100px); - top: 50%; - transform: translateY(-50%); - color: var(--accent); -} - -.diagram-branch-label.no { - left: calc(50% - 100px); - top: 50%; - transform: translateX(-100%) translateY(-50%); - color: #ef4444; -} - -.diagram-branch-line { - position: absolute; - height: 2px; - background: var(--border); - top: 0; -} - -.diagram-branch-line.left-line { - right: 50%; - width: 90px; - transform: translateX(100%); -} - -.diagram-branch-line.right-line { - left: 50%; - width: 90px; -} @@ -1295,23 +1088,76 @@ img { max-width: 100%; display: block; }
-
-
Начало
-
-
Аудит процессов
-
-
Визуализация на ДРАКОН
-
-
- Всё понятно? -
-
-
-
да
-
нет → доработка
-
-
Готово
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Начало + + + + Аудит процессов + + + + Визуализация на ДРАКОН + + + + Понятно? + + + + да + + + + нет + + + + Создание схем + + + + Готово + + + + + + + +
@@ -1685,10 +1531,6 @@ document.querySelectorAll('.faq-question').forEach((btn) => { }); }); -// ---- DRAKON diagram animation ---- -const diagram = document.getElementById('drakon-diagram'); -setTimeout(() => diagram.classList.add('loaded'), 600); - // ---- Particles ---- const particlesContainer = document.getElementById('particles'); for (let i = 0; i < 20; i++) {