fix: SVG DRAKON diagram — condition visible, proper layout
This commit is contained in:
neo committed
1 parent
80fe3d3e67
commit
3074224974
1 file changed
+76
-234
+76
-234
@@ -317,7 +317,7 @@ img { max-width: 100%; display: block; }
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero visual — DRAKON diagram mockup */
|
/* Hero visual — DRAKON diagram */
|
||||||
.hero-visual {
|
.hero-visual {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -328,87 +328,14 @@ img { max-width: 100%; display: block; }
|
|||||||
|
|
||||||
.drakon-diagram {
|
.drakon-diagram {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 480px;
|
max-width: 440px;
|
||||||
aspect-ratio: 3/4;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drakon-node {
|
.drakon-diagram svg {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
background: var(--bg-card);
|
height: auto;
|
||||||
border: 1px solid var(--border);
|
display: block;
|
||||||
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%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Floating particles */
|
/* 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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -1295,23 +1088,76 @@ img { max-width: 100%; display: block; }
|
|||||||
<div class="hero-visual">
|
<div class="hero-visual">
|
||||||
<div class="drakon-diagram" id="drakon-diagram">
|
<div class="drakon-diagram" id="drakon-diagram">
|
||||||
<div class="particles" id="particles"></div>
|
<div class="particles" id="particles"></div>
|
||||||
<div class="diagram-art">
|
<svg viewBox="0 0 400 580" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<div class="diagram-node begin">Начало</div>
|
<defs>
|
||||||
<div class="diagram-connector"></div>
|
<filter id="glow">
|
||||||
<div class="diagram-node action">Аудит процессов</div>
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||||
<div class="diagram-connector"></div>
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||||
<div class="diagram-node action">Визуализация на ДРАКОН</div>
|
</filter>
|
||||||
<div class="diagram-connector"></div>
|
<marker id="arrow-down" markerWidth="8" markerHeight="6" refX="4" refY="3" orient="auto">
|
||||||
<div class="diagram-node condition">
|
<path d="M0,0 L8,3 L0,6 Z" fill="#333"/>
|
||||||
Всё понятно?
|
</marker>
|
||||||
</div>
|
</defs>
|
||||||
<div class="diagram-branch left"></div>
|
|
||||||
<div class="diagram-branch right"></div>
|
<!-- Connector lines (drawn behind nodes) -->
|
||||||
<div class="diagram-branch-label yes">да</div>
|
<!-- Top: Begin → Action 1 -->
|
||||||
<div class="diagram-branch-label no">нет → доработка</div>
|
<line x1="200" y1="60" x2="200" y2="90" stroke="#2a2a2a" stroke-width="2"/>
|
||||||
<div class="diagram-connector"></div>
|
<!-- Action 1 → Action 2 -->
|
||||||
<div class="diagram-node end">Готово</div>
|
<line x1="200" y1="140" x2="200" y2="170" stroke="#2a2a2a" stroke-width="2"/>
|
||||||
</div>
|
<!-- 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>
|
</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 ----
|
// ---- Particles ----
|
||||||
const particlesContainer = document.getElementById('particles');
|
const particlesContainer = document.getElementById('particles');
|
||||||
for (let i = 0; i < 20; i++) {
|
for (let i = 0; i < 20; i++) {
|
||||||
|
|||||||
Reference in new issue
Block a user