v1.2.7: Phase 0 — CSS foundation + icons + snackbar

style.css: +93 lines — sidebar, view, tabs, toolbar, field (label on top), skeleton, snackbar, combobox classes. Font scale 13/14/16. icons.js (NEW): 10 inline-SVG Lucide icons (play, edit, trash, check, x, chevronDown, search, plus, rotateCw, cloud). stroke=currentColor. snackbar.js (NEW): showSnackbar(msg, type). bottom-right, 4s/8s auto-hide, stacking max 4, accessibility role=status aria-live=polite. index.html: include icons.js before utils.js
2026-07-31 12:52:02 +04:00
parent cc60f9401a
commit 78b5063259
5 changed files with 141 additions and 1 deletions
@@ -0,0 +1,16 @@
+// icons.js — 10 inline-SVG иконок (Lucide, MIT)
+// stroke="currentColor" — цвет берётся из CSS
+// Размер: 20x20, stroke-width: 2
+
+const ICONS = {
+    play: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>',
+    edit: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
+    trash: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
+    check: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
+    xIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+    chevronDown: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>',
+    search: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+    plus: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
+    rotateCw: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>',
+    cloud: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>',
+};
@@ -0,0 +1,30 @@
+// snackbar.js — лёгкие уведомления (без зависимостей)
+// showSnackbar(msg, type='info') — type: info, success, error
+
+function showSnackbar(msg, type) {
+    type = type || 'info';
+    let container = document.getElementById('snackbar-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'snackbar-container';
+        container.className = 'snackbar-container';
+        container.setAttribute('role', 'status');
+        container.setAttribute('aria-live', 'polite');
+        document.body.appendChild(container);
+    }
+    const el = document.createElement('div');
+    el.className = 'snackbar ' + type;
+    el.textContent = msg;
+    el.onclick = function() { el.remove(); };
+    container.appendChild(el);
+
+    // Limit stacking
+    const all = container.querySelectorAll('.snackbar');
+    if (all.length > 4) all[0].remove();
+
+    // Auto-hide: info/success 4s, error 8s
+    const delay = (type === 'error') ? 8000 : 4000;
+    setTimeout(function() {
+        if (el.parentNode) el.remove();
+    }, delay);
+}