-
Начнём?
+
Начнём?
Готовы превратить хаос
в алгоритмы?
-
+
Напишите мне — бесплатно обсудим ваш проект на брифинге. Покажу, как ДРАКОН поможет именно вам.
@@ -1522,27 +1335,11 @@ document.querySelectorAll('.faq-question').forEach((btn) => {
btn.addEventListener('click', () => {
const item = btn.parentElement;
const isOpen = item.classList.contains('open');
-
- // Close all
document.querySelectorAll('.faq-item').forEach((i) => i.classList.remove('open'));
-
- // Toggle current
if (!isOpen) item.classList.add('open');
});
});
-// ---- Particles ----
-const particlesContainer = document.getElementById('particles');
-for (let i = 0; i < 20; i++) {
- const p = document.createElement('div');
- p.className = 'particle';
- p.style.left = Math.random() * 100 + '%';
- p.style.top = Math.random() * 100 + '%';
- p.style.animationDelay = Math.random() * 4 + 's';
- p.style.animationDuration = (3 + Math.random() * 3) + 's';
- particlesContainer.appendChild(p);
-}
-
// ---- Smooth scroll for anchor links ----
document.querySelectorAll('a[href^="#"]').forEach((a) => {
a.addEventListener('click', (e) => {
@@ -1553,6 +1350,138 @@ document.querySelectorAll('a[href^="#"]').forEach((a) => {
}
});
});
+
+// ============================================
+// DRAKON DIAGRAM — DrakonWidget (view mode)
+// ============================================
+function initDrakonDiagram() {
+ // Business process: Client → Audit → Drakon diagram → Done
+ var diagram = {
+ name: "Наш процесс",
+ items: {
+ "1": { type: "begin", content: "Начало" },
+ "2": { type: "action", one: "3", content: "Брифинг клиента" },
+ "3": { type: "action", one: "4", content: "Аудит процессов" },
+ "4": { type: "question", one: "5", no: "6", content: "Понятно?" },
+ "5": { type: "action", one: "8", content: "Создание схем ДРАКОН" },
+ "6": { type: "action", one: "7", content: "Уточняем процесс" },
+ "7": { type: "address", one: "4", content: "Возврат к этапу" },
+ "8": { type: "action", one: "9", content: "Согласование" },
+ "9": { type: "end", content: "Готово" }
+ }
+ };
+
+ // Minimal view-only configuration
+ var config = {
+ startEditContent: function () { /* read-only — no edit */ },
+ showContextMenu: function () { /* read-only */ },
+ canSelect: false,
+ maxWidth: 320,
+ theme: {
+ lineWidth: 2,
+ borderWidth: 0,
+ background: "#fafbfc",
+ 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: "Нет",
+ icons: {
+ question: {
+ iconBack: "#fef3c7",
+ iconBorder: "#f59e0b",
+ color: "#92400e",
+ borderWidth: 1
+ },
+ begin: {
+ iconBack: "#dcfce7",
+ iconBorder: "#16a34a",
+ color: "#15803d",
+ borderWidth: 1
+ },
+ end: {
+ iconBack: "#f3f4f6",
+ iconBorder: "#9ca3af",
+ borderWidth: 1
+ }
+ }
+ }
+ };
+
+ // View-only edit sender
+ var sender = {
+ stop: function () { },
+ pushEdit: function () { /* read-only */ }
+ };
+
+ // Build widget
+ var drakonCanvas = document.getElementById('drakon-canvas');
+ var drakon = createDrakonWidget();
+
+ function rebuildWidget() {
+ var rect = drakonCanvas.getBoundingClientRect();
+ drakonCanvas.innerHTML = '';
+ var widgetEl = drakon.render(
+ rect.width || 600,
+ rect.height || 420,
+ 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
+ );
+ }, 100);
+
+ // 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();
+ }
+ });
+}