neo/algoritm-space
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: SVG DRAKON diagram — condition visible, proper layout

Browse Source
This commit is contained in:
neo committed 2026-06-23 17:04:01 +05:00
1 parent 80fe3d3e67
commit 3074224974
1 file changed
+76 -234
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+76 -234
View File
@@ -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;
}
</style>
</head>
<body>
@@ -1295,23 +1088,76 @@ img { max-width: 100%; display: block; }
<div class="hero-visual">
<div class="drakon-diagram" id="drakon-diagram">
<div class="particles" id="particles"></div>
<div class="diagram-art">
<div class="diagram-node begin">Начало</div>
<div class="diagram-connector"></div>
<div class="diagram-node action">Аудит процессов</div>
<div class="diagram-connector"></div>
<div class="diagram-node action">Визуализация на ДРАКОН</div>
<div class="diagram-connector"></div>
<div class="diagram-node condition">
Всё понятно?
</div>
<div class="diagram-branch left"></div>
<div class="diagram-branch right"></div>
<div class="diagram-branch-label yes">да</div>
<div class="diagram-branch-label no">нет → доработка</div>
<div class="diagram-connector"></div>
<div class="diagram-node end">Готово</div>
</div>
<svg viewBox="0 0 400 580" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<marker id="arrow-down" markerWidth="8" markerHeight="6" refX="4" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#333"/>
</marker>
</defs>
<!-- Connector lines (drawn behind nodes) -->
<!-- Top: Begin → Action 1 -->
<line x1="200" y1="60" x2="200" y2="90" stroke="#2a2a2a" stroke-width="2"/>
<!-- Action 1 → Action 2 -->
<line x1="200" y1="140" x2="200" y2="170" stroke="#2a2a2a" stroke-width="2"/>
<!-- Action 2 → If condition -->
<line x1="200" y1="220" x2="200" y2="250" stroke="#2a2a2a" stroke-width="2"/>
<!-- If: down (yes / main path) -->
<line x1="200" y1="310" x2="200" y2="340" stroke="#2a2a2a" stroke-width="2"/>
<!-- If: right (no path) -->
<line x1="280" y1="280" x2="340" y2="280" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4,3"/>
<line x1="340" y1="280" x2="340" y2="420" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4,3"/>
<line x1="340" y1="420" x2="240" y2="420" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow-down)"/>
<!-- Action 3 (on main path) -->
<line x1="200" y1="340" x2="200" y2="370" stroke="#2a2a2a" stroke-width="2"/>
<!-- Action 3 → End -->
<line x1="200" y1="430" x2="200" y2="460" stroke="#2a2a2a" stroke-width="2"/>
<!-- === BEGIN node === -->
<rect x="120" y="10" width="160" height="50" rx="25" fill="rgba(34,197,94,0.1)" stroke="#22c55e" stroke-width="2"/>
<text x="200" y="41" text-anchor="middle" fill="#22c55e" font-family="Inter,sans-serif" font-size="14" font-weight="600">Начало</text>
<!-- === Action 1 === -->
<rect x="110" y="90" width="180" height="50" rx="6" fill="#161616" stroke="#2a2a2a" stroke-width="1.5"/>
<text x="200" y="121" text-anchor="middle" fill="#e8e8e8" font-family="Inter,sans-serif" font-size="13" font-weight="500">Аудит процессов</text>
<!-- === Action 2 === -->
<rect x="100" y="170" width="200" height="50" rx="6" fill="#161616" stroke="#2a2a2a" stroke-width="1.5"/>
<text x="200" y="201" text-anchor="middle" fill="#e8e8e8" font-family="Inter,sans-serif" font-size="13" font-weight="500">Визуализация на ДРАКОН</text>
<!-- === If condition (hexagon) === -->
<polygon points="200,250 280,280 280,320 200,350 120,320 120,280" fill="#161616" stroke="#f59e0b" stroke-width="2"/>
<text x="200" y="297" text-anchor="middle" fill="#f59e0b" font-family="Inter,sans-serif" font-size="13" font-weight="600">Понятно?</text>
<!-- "да" label on main path -->
<rect x="176" y="318" width="48" height="20" rx="10" fill="rgba(34,197,94,0.15)" stroke="#22c55e" stroke-width="1"/>
<text x="200" y="333" text-anchor="middle" fill="#22c55e" font-family="Inter,sans-serif" font-size="11" font-weight="600">да</text>
<!-- "нет" label on branch -->
<rect x="300" y="266" width="48" height="20" rx="10" fill="rgba(239,68,68,0.15)" stroke="#ef4444" stroke-width="1"/>
<text x="324" y="281" text-anchor="middle" fill="#ef4444" font-family="Inter,sans-serif" font-size="11" font-weight="600">нет</text>
<!-- Action 3 (after if) -->
<rect x="110" y="340" width="180" height="50" rx="6" fill="#161616" stroke="#2a2a2a" stroke-width="1.5"/>
<text x="200" y="371" text-anchor="middle" fill="#e8e8e8" font-family="Inter,sans-serif" font-size="13" font-weight="500">Создание схем</text>
<!-- === End node === -->
<rect x="120" y="460" width="160" height="50" rx="25" fill="transparent" stroke="#555" stroke-width="1.5"/>
<text x="200" y="491" text-anchor="middle" fill="#888" font-family="Inter,sans-serif" font-size="14" font-weight="600">Готово</text>
<!-- Decorative: subtle background grid dots -->
<g opacity="0.3">
<circle cx="200" cy="20" r="1" fill="#22c55e"/>
<circle cx="340" cy="350" r="1" fill="#ef4444"/>
<circle cx="340" cy="370" r="1" fill="#ef4444"/>
</g>
</svg>
</div>
</div>
</div>
@@ -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++) {