dsh-desktop-kit 0.0.0-stage → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +87 -2
- package/client.js +3349 -0
- package/cordis.patch.yml +5 -0
- package/index.js +80 -0
- package/package.json +60 -4
- package/plugins/dsh-gkb-ru-ui/cordis.patch.yml +6 -0
- package/plugins/dsh-gkb-ru-ui/lib/client.js +1083 -0
- package/plugins/dsh-gkb-ru-ui/lib/index.js +142 -0
- package/plugins/dsh-gkb-ru-ui/lib/skills.js +376 -0
- package/plugins/dsh-gkb-ru-ui/package.json +28 -0
- package/plugins/dsh-peak-guard/README.md +70 -0
- package/plugins/dsh-peak-guard/client.js +741 -0
- package/plugins/dsh-peak-guard/cordis.patch.yml +5 -0
- package/plugins/dsh-peak-guard/icon.svg +12 -0
- package/plugins/dsh-peak-guard/index.js +2 -0
- package/plugins/dsh-peak-guard/locale/en.json +6 -0
- package/plugins/dsh-peak-guard/locale/ru.json +6 -0
- package/plugins/dsh-peak-guard/locale/zh.json +6 -0
- package/plugins/dsh-peak-guard/package.json +33 -0
- package/plugins/dsh-profile-transfer/README.md +62 -0
- package/plugins/dsh-profile-transfer/bootstrap/01-INSTALL.cmd +7 -0
- package/plugins/dsh-profile-transfer/bootstrap/README-ARCHIVE.md +54 -0
- package/plugins/dsh-profile-transfer/bootstrap/README-/320/243/320/241/320/242/320/220/320/235/320/236/320/222/320/232/320/220.md +42 -0
- package/plugins/dsh-profile-transfer/bootstrap/install-on-clean-machine.ps1 +119 -0
- package/plugins/dsh-profile-transfer/bootstrap//320/243/320/241/320/242/320/220/320/235/320/236/320/222/320/230/320/242/320/254.cmd +5 -0
- package/plugins/dsh-profile-transfer/client.js +806 -0
- package/plugins/dsh-profile-transfer/cordis.patch.yml +3 -0
- package/plugins/dsh-profile-transfer/icon.svg +13 -0
- package/plugins/dsh-profile-transfer/index.js +375 -0
- package/plugins/dsh-profile-transfer/locale/en.json +6 -0
- package/plugins/dsh-profile-transfer/locale/ru.json +6 -0
- package/plugins/dsh-profile-transfer/locale/zh.json +6 -0
- package/plugins/dsh-profile-transfer/package.json +36 -0
- package/plugins/dsh-profile-transfer/transfer.js +1004 -0
- package/plugins/dsh-project-memory/README.md +71 -0
- package/plugins/dsh-project-memory/cordis.patch.yml +4 -0
- package/plugins/dsh-project-memory/icon.svg +12 -0
- package/plugins/dsh-project-memory/index.js +1240 -0
- package/plugins/dsh-project-memory/locale/en.json +6 -0
- package/plugins/dsh-project-memory/locale/ru.json +6 -0
- package/plugins/dsh-project-memory/locale/zh.json +6 -0
- package/plugins/dsh-project-memory/package.json +26 -0
- package/plugins/dsh-session-move/README.md +67 -0
- package/plugins/dsh-session-move/client.js +719 -0
- package/plugins/dsh-session-move/cordis.patch.yml +5 -0
- package/plugins/dsh-session-move/icon.svg +14 -0
- package/plugins/dsh-session-move/index.js +497 -0
- package/plugins/dsh-session-move/locale/en.json +6 -0
- package/plugins/dsh-session-move/locale/ru.json +6 -0
- package/plugins/dsh-session-move/locale/zh.json +6 -0
- package/plugins/dsh-session-move/package.json +31 -0
- package/skills/code-review-checklist/SKILL.md +37 -0
- package/skills/content-writing/README.md +87 -0
- package/skills/content-writing/SKILL.md +348 -0
- package/skills/content-writing/assets/checklists/fact-check.md +53 -0
- package/skills/content-writing/assets/checklists/publish.md +65 -0
- package/skills/content-writing/assets/checklists/social.md +40 -0
- package/skills/content-writing/assets/templates/article.md +47 -0
- package/skills/content-writing/assets/templates/brief.md +44 -0
- package/skills/content-writing/assets/templates/doctor-card.md +41 -0
- package/skills/content-writing/assets/templates/image-prompts.md +128 -0
- package/skills/content-writing/assets/templates/post-telegram.md +36 -0
- package/skills/content-writing/assets/templates/post-vk.md +42 -0
- package/skills/content-writing/assets/templates/press-release.md +56 -0
- package/skills/content-writing/assets/templates/science-pop-note.md +55 -0
- package/skills/content-writing/assets/templates/service-card.md +46 -0
- package/skills/content-writing/references/anti-ai-style.md +248 -0
- package/skills/content-writing/references/editing.md +185 -0
- package/skills/content-writing/references/fact-checking.md +205 -0
- package/skills/content-writing/references/government-medical.md +246 -0
- package/skills/content-writing/references/images.md +212 -0
- package/skills/content-writing/references/journalism.md +252 -0
- package/skills/content-writing/references/science-popular.md +218 -0
- package/skills/content-writing/references/seo-content.md +172 -0
- package/skills/content-writing/references/social-media.md +253 -0
- package/skills/content-writing/references/templates.md +291 -0
- package/skills/database-safety/SKILL.md +31 -0
- package/skills/debugging-playbook/SKILL.md +39 -0
- package/skills/design-critique/SKILL.md +118 -0
- package/skills/dev-workflow/SKILL.md +41 -0
- package/skills/git-and-ci/SKILL.md +40 -0
- package/skills/pg-upgrade-verify/SKILL.md +48 -0
- package/skills/project-deep-dive/SKILL.md +170 -0
- package/skills/project-deep-dive/references/recon-commands.md +78 -0
- package/skills/project-deep-dive/references/section-templates.md +102 -0
- package/skills/project-memory-maintenance/SKILL.md +170 -0
- package/skills/project-memory-maintenance/references/journal-template.md +48 -0
- package/skills/project-memory-maintenance/references/section-rules.md +57 -0
- package/skills/release-and-deploy/SKILL.md +39 -0
- package/skills/requirements-and-planning/SKILL.md +115 -0
- package/skills/security-review/SKILL.md +36 -0
- package/skills/seo/README.md +60 -0
- package/skills/seo/SKILL.md +329 -0
- package/skills/seo/assets/README.md +66 -0
- package/skills/seo/assets/scripts/LICENSE-playwright-core.txt +202 -0
- package/skills/seo/assets/scripts/README.md +179 -0
- package/skills/seo/assets/scripts/lib/args.mjs +105 -0
- package/skills/seo/assets/scripts/lib/browser.mjs +620 -0
- package/skills/seo/assets/scripts/lib/zip.mjs +191 -0
- package/skills/seo/assets/scripts/seo-audit.mjs +1675 -0
- package/skills/seo/assets/snippets/jsonld-breadcrumb.json +30 -0
- package/skills/seo/assets/snippets/jsonld-faq.json +39 -0
- package/skills/seo/assets/snippets/jsonld-medical-clinic.json +49 -0
- package/skills/seo/assets/snippets/jsonld-medical-webpage.json +33 -0
- package/skills/seo/assets/snippets/jsonld-organization.json +74 -0
- package/skills/seo/assets/snippets/jsonld-physician.json +46 -0
- package/skills/seo/assets/snippets/meta.blade.php +61 -0
- package/skills/seo/assets/snippets/robots.txt +61 -0
- package/skills/seo/assets/snippets/sitemap-urlset-example.xml +72 -0
- package/skills/seo/assets/snippets/sitemap.xml +36 -0
- package/skills/seo/references/audit-checklist.md +305 -0
- package/skills/seo/references/content-seo.md +198 -0
- package/skills/seo/references/eeat-medical.md +217 -0
- package/skills/seo/references/measurement.md +223 -0
- package/skills/seo/references/on-page.md +209 -0
- package/skills/seo/references/stack-recipes.md +693 -0
- package/skills/seo/references/structured-data.md +485 -0
- package/skills/seo/references/technical-seo.md +294 -0
- package/skills/service-desk-conventions/SKILL.md +40 -0
- package/skills/service-desk-db-safety/SKILL.md +52 -0
- package/skills/service-desk-release/SKILL.md +43 -0
- package/skills/service-desk-testing/SKILL.md +47 -0
- package/skills/service-desk-ui/SKILL.md +33 -0
- package/skills/skills-router/SKILL.md +91 -0
- package/skills/testing-strategy/SKILL.md +37 -0
- package/skills/ui-design-system/SKILL.md +45 -0
- package/skills/web-research/SKILL.md +40 -0
- package/skills/wow-design/SKILL.md +168 -0
- package/skills/wow-design/assets/kit/README.md +195 -0
- package/skills/wow-design/assets/kit/assets/css/base.css +158 -0
- package/skills/wow-design/assets/kit/assets/css/components.css +1001 -0
- package/skills/wow-design/assets/kit/assets/css/fonts.css +73 -0
- package/skills/wow-design/assets/kit/assets/css/pages.css +737 -0
- package/skills/wow-design/assets/kit/assets/css/tokens.css +218 -0
- package/skills/wow-design/assets/kit/assets/fonts/LICENSE-golos-text.txt +93 -0
- package/skills/wow-design/assets/kit/assets/fonts/LICENSE-lora.txt +93 -0
- package/skills/wow-design/assets/kit/assets/fonts/LICENSE-unbounded.txt +93 -0
- package/skills/wow-design/assets/kit/assets/fonts/golos-text-cyrillic-400-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/golos-text-cyrillic-500-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/golos-text-cyrillic-600-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/golos-text-cyrillic-700-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/golos-text-latin-400-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/golos-text-latin-500-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/golos-text-latin-600-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/golos-text-latin-700-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/lora-cyrillic-400-italic.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/lora-cyrillic-400-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/lora-cyrillic-500-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/lora-cyrillic-600-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/lora-latin-400-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/lora-latin-500-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/lora-latin-600-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/unbounded-cyrillic-400-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/unbounded-cyrillic-500-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/unbounded-cyrillic-600-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/unbounded-latin-400-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/unbounded-latin-500-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/fonts/unbounded-latin-600-normal.woff2 +0 -0
- package/skills/wow-design/assets/kit/assets/js/kit.js +550 -0
- package/skills/wow-design/assets/kit/pages/dashboard.html +539 -0
- package/skills/wow-design/assets/kit/pages/hospital.html +430 -0
- package/skills/wow-design/assets/kit/showcase.html +1164 -0
- package/skills/wow-design/assets/scripts/LICENSE-axe-core.txt +362 -0
- package/skills/wow-design/assets/scripts/LICENSE-playwright-core.txt +202 -0
- package/skills/wow-design/assets/scripts/README.md +312 -0
- package/skills/wow-design/assets/scripts/audit.mjs +1200 -0
- package/skills/wow-design/assets/scripts/capture.mjs +337 -0
- package/skills/wow-design/assets/scripts/package.json +30 -0
- package/skills/wow-design/references/anti-patterns.md +249 -0
- package/skills/wow-design/references/critique-rubric.md +259 -0
- package/skills/wow-design/references/design-brief-template.md +46 -0
- package/skills/wow-design/references/inspiration.md +200 -0
- package/skills/wow-design/references/presets.md +96 -0
- package/skills/wow-design/references/principles.md +368 -0
- package/skills/wow-design/references/stack-recipes.md +93 -0
- package/skills/wow-design/references/visual-qa.md +79 -0
|
@@ -0,0 +1,1164 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="ru" data-preset="aurora" data-preset-allow>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Aurora — дизайн-система для DSH</title>
|
|
7
|
+
<meta name="description" content="Aurora — дизайн-система DSH: пять пресетов, две темы, типографика Lora и Golos Text, компоненты на токенах.">
|
|
8
|
+
<script>
|
|
9
|
+
(function(){try{var d=document.documentElement;var t=localStorage.getItem('aurora-theme');if(t!=='light'&&t!=='dark'){t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}d.setAttribute('data-theme',t);if(d.hasAttribute('data-preset-allow')){var p=localStorage.getItem('aurora-preset');if(p){d.setAttribute('data-preset',p)}}}catch(e){}})();
|
|
10
|
+
</script>
|
|
11
|
+
<link rel="stylesheet" href="assets/css/tokens.css">
|
|
12
|
+
<link rel="stylesheet" href="assets/css/fonts.css">
|
|
13
|
+
<link rel="stylesheet" href="assets/css/base.css">
|
|
14
|
+
<link rel="stylesheet" href="assets/css/components.css">
|
|
15
|
+
<link rel="stylesheet" href="assets/css/pages.css">
|
|
16
|
+
</head>
|
|
17
|
+
<body class="page-shell">
|
|
18
|
+
<a class="skip-link" href="#main">Перейти к содержимому</a>
|
|
19
|
+
|
|
20
|
+
<!-- Инлайн-спрайт иконок: один набор, stroke 1.6, 24×24 -->
|
|
21
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="sprite" aria-hidden="true" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden">
|
|
22
|
+
<symbol id="i-arrow-right" viewBox="0 0 24 24"><path d="M4 12h16"/><path d="m14 6 6 6-6 6"/></symbol>
|
|
23
|
+
<symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M20 12H4"/><path d="m10 18-6-6 6-6"/></symbol>
|
|
24
|
+
<symbol id="i-arrow-up-right" viewBox="0 0 24 24"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></symbol>
|
|
25
|
+
<symbol id="i-arrow-down" viewBox="0 0 24 24"><path d="M12 4v16"/><path d="m6 14 6 6 6-6"/></symbol>
|
|
26
|
+
<symbol id="i-arrow-up" viewBox="0 0 24 24"><path d="M12 20V4"/><path d="m6 10 6-6 6 6"/></symbol>
|
|
27
|
+
<symbol id="i-chevron-down" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
|
28
|
+
<symbol id="i-chevron-right" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></symbol>
|
|
29
|
+
<symbol id="i-chevron-left" viewBox="0 0 24 24"><path d="m15 6-6 6 6 6"/></symbol>
|
|
30
|
+
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></symbol>
|
|
31
|
+
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"/><path d="M10 21h4"/></symbol>
|
|
32
|
+
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></symbol>
|
|
33
|
+
<symbol id="i-moon" viewBox="0 0 24 24"><path d="M20 14.5A8.5 8.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5Z"/></symbol>
|
|
34
|
+
<symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
|
|
35
|
+
<symbol id="i-x" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></symbol>
|
|
36
|
+
<symbol id="i-check" viewBox="0 0 24 24"><path d="m4 12 5 5L20 6"/></symbol>
|
|
37
|
+
<symbol id="i-check-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8 12 2.5 2.5L16 9"/></symbol>
|
|
38
|
+
<symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></symbol>
|
|
39
|
+
<symbol id="i-alert-triangle" viewBox="0 0 24 24"><path d="M12 4 3 20h18L12 4Z"/><path d="M12 10v4"/><path d="M12 17h.01"/></symbol>
|
|
40
|
+
<symbol id="i-alert-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><path d="M12 16h.01"/></symbol>
|
|
41
|
+
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
|
42
|
+
<symbol id="i-filter" viewBox="0 0 24 24"><path d="M4 6h16l-6 7v6l-4-2v-4L4 6Z"/></symbol>
|
|
43
|
+
<symbol id="i-download" viewBox="0 0 24 24"><path d="M12 4v11"/><path d="m7 10 5 5 5-5"/><path d="M5 20h14"/></symbol>
|
|
44
|
+
<symbol id="i-calendar" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M8 3v4M16 3v4M4 10h16"/></symbol>
|
|
45
|
+
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
|
46
|
+
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M6 3h3l2 5-2.5 1.5a12 12 0 0 0 6 6L16 13l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2Z"/></symbol>
|
|
47
|
+
<symbol id="i-map-pin" viewBox="0 0 24 24"><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></symbol>
|
|
48
|
+
<symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></symbol>
|
|
49
|
+
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></symbol>
|
|
50
|
+
<symbol id="i-users" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.5"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 4.5a3.5 3.5 0 0 1 0 7"/><path d="M18 14.5a6 6 0 0 1 3 5.5"/></symbol>
|
|
51
|
+
<symbol id="i-settings" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></symbol>
|
|
52
|
+
<symbol id="i-chart" viewBox="0 0 24 24"><path d="M4 20V10M10 20V5M16 20v-7M22 20H2"/></symbol>
|
|
53
|
+
<symbol id="i-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></symbol>
|
|
54
|
+
<symbol id="i-ticket" viewBox="0 0 24 24"><path d="M3 9V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v3a3 3 0 0 0 0 6v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a3 3 0 0 0 0-6Z"/><path d="M12 5v2M12 11v2M12 17v2"/></symbol>
|
|
55
|
+
<symbol id="i-book" viewBox="0 0 24 24"><path d="M4 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H4V4Z"/><path d="M20 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7V4Z"/></symbol>
|
|
56
|
+
<symbol id="i-logout" viewBox="0 0 24 24"><path d="M9 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h4"/><path d="M15 8l4 4-4 4"/><path d="M19 12H9"/></symbol>
|
|
57
|
+
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></symbol>
|
|
58
|
+
<symbol id="i-external" viewBox="0 0 24 24"><path d="M14 4h6v6"/><path d="M20 4 11 13"/><path d="M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5"/></symbol>
|
|
59
|
+
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20s-7-4.6-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.4-7 10-7 10Z"/></symbol>
|
|
60
|
+
<symbol id="i-shield" viewBox="0 0 24 24"><path d="m12 3 8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3Z"/><path d="m9 12 2 2 4-4"/></symbol>
|
|
61
|
+
<symbol id="i-activity" viewBox="0 0 24 24"><path d="M3 12h4l2-6 4 12 2-6h6"/></symbol>
|
|
62
|
+
<symbol id="i-file" viewBox="0 0 24 24"><path d="M6 3h8l5 5v13H6V3Z"/><path d="M14 3v5h5"/><path d="M9 13h7M9 17h5"/></symbol>
|
|
63
|
+
<symbol id="i-eye" viewBox="0 0 24 24"><path d="M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z"/><circle cx="12" cy="12" r="2.6"/></symbol>
|
|
64
|
+
<symbol id="i-eye-off" viewBox="0 0 24 24"><path d="M3 3l18 18"/><path d="M10.6 6.2A10.6 10.6 0 0 1 12 6c6.4 0 10 6 10 6a18 18 0 0 1-3.2 3.9"/><path d="M6.1 7.6C3.5 9.5 2 12 2 12s3.6 6 10 6a10.4 10.4 0 0 0 4.2-.9"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></symbol>
|
|
65
|
+
<symbol id="i-command" viewBox="0 0 24 24"><path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6Z"/></symbol>
|
|
66
|
+
<symbol id="i-trend-up" viewBox="0 0 24 24"><path d="m3 17 6-6 4 4 8-8"/><path d="M15 7h6v6"/></symbol>
|
|
67
|
+
<symbol id="i-trend-down" viewBox="0 0 24 24"><path d="m3 7 6 6 4-4 8 8"/><path d="M21 17h-6v-6"/></symbol>
|
|
68
|
+
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 11a8 8 0 1 0-2.3 6.3"/><path d="M20 4v7h-7"/></symbol>
|
|
69
|
+
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></symbol>
|
|
70
|
+
<symbol id="i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/></symbol>
|
|
71
|
+
<symbol id="i-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7L8 5Z"/></symbol>
|
|
72
|
+
<symbol id="i-help" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.8.4-1 1-1 1.7"/><path d="M12 17h.01"/></symbol>
|
|
73
|
+
<symbol id="i-inbox" viewBox="0 0 24 24"><path d="M4 13h4l1.5 3h5L16 13h4"/><path d="M6 4h12l2 9v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6l2-9Z"/></symbol>
|
|
74
|
+
</svg>
|
|
75
|
+
|
|
76
|
+
<header class="site-header" data-scrolled-header>
|
|
77
|
+
<div class="container-wide site-header__inner">
|
|
78
|
+
<a class="site-header__brand" href="showcase.html">
|
|
79
|
+
<span class="site-header__mark" aria-hidden="true">A</span>
|
|
80
|
+
<span class="site-header__word"><b>Aurora</b><span>дизайн-система</span></span>
|
|
81
|
+
</a>
|
|
82
|
+
<nav class="site-header__nav" aria-label="Разделы витрины">
|
|
83
|
+
<a class="site-header__link" href="#palette">Палитра</a>
|
|
84
|
+
<a class="site-header__link" href="#typography">Типографика</a>
|
|
85
|
+
<a class="site-header__link" href="#scales">Шкалы</a>
|
|
86
|
+
<a class="site-header__link" href="#components">Компоненты</a>
|
|
87
|
+
<a class="site-header__link" href="#patterns">Паттерны</a>
|
|
88
|
+
</nav>
|
|
89
|
+
<div class="preset-switch" role="group" aria-label="Пресет дизайн-системы">
|
|
90
|
+
<button class="preset-switch__btn" type="button" data-preset-set="aurora" aria-pressed="true">Aurora</button>
|
|
91
|
+
<button class="preset-switch__btn" type="button" data-preset-set="graphite" aria-pressed="false">Graphite</button>
|
|
92
|
+
<button class="preset-switch__btn" type="button" data-preset-set="editorial" aria-pressed="false">Editorial</button>
|
|
93
|
+
<button class="preset-switch__btn" type="button" data-preset-set="warm" aria-pressed="false">Warm</button>
|
|
94
|
+
<button class="preset-switch__btn" type="button" data-preset-set="swiss" aria-pressed="false">Swiss</button>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="site-header__actions">
|
|
97
|
+
<button class="icon-btn theme-toggle" type="button" data-theme-toggle aria-pressed="false" aria-label="Включить тёмную тему">
|
|
98
|
+
<svg class="icon icon--sm icon-moon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-moon"/></svg>
|
|
99
|
+
<svg class="icon icon--sm icon-sun" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-sun"/></svg>
|
|
100
|
+
</button>
|
|
101
|
+
<a class="btn btn--secondary btn--sm site-header__cta" href="pages/hospital.html" aria-label="Клиника — эталонная страница">
|
|
102
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-up-right"/></svg>
|
|
103
|
+
<span class="btn__label">Клиника</span>
|
|
104
|
+
</a>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</header>
|
|
108
|
+
|
|
109
|
+
<main id="main">
|
|
110
|
+
<!-- ==================== HERO ==================== -->
|
|
111
|
+
<section class="show-hero container-wide">
|
|
112
|
+
<div class="show-hero__grid">
|
|
113
|
+
<div>
|
|
114
|
+
<p class="eyebrow reveal">Дизайн-система DSH · v1.0</p>
|
|
115
|
+
<h1 class="show-hero__title reveal" data-delay="1">Aurora<em>.</em></h1>
|
|
116
|
+
<p class="show-hero__lead lead reveal" data-delay="2">
|
|
117
|
+
Пять пресетов, две темы и один набор компонентов на токенах — чтобы интерфейс
|
|
118
|
+
выглядел дорого с первого раза, а не после десятой правки.
|
|
119
|
+
</p>
|
|
120
|
+
<div class="show-hero__meta reveal" data-delay="3">
|
|
121
|
+
<span class="badge badge--outline">5 пресетов</span>
|
|
122
|
+
<span class="badge badge--outline">Light + dark</span>
|
|
123
|
+
<span class="badge badge--outline">WCAG AA</span>
|
|
124
|
+
<span class="badge badge--outline">0 зависимостей</span>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="hero__actions reveal" data-delay="4">
|
|
127
|
+
<a class="btn btn--primary" href="#components">
|
|
128
|
+
Смотреть компоненты
|
|
129
|
+
<svg class="icon icon--sm icon--arrow" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-right"/></svg>
|
|
130
|
+
</a>
|
|
131
|
+
<a class="btn btn--ghost" href="pages/dashboard.html">
|
|
132
|
+
Эталонный дашборд
|
|
133
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-up-right"/></svg>
|
|
134
|
+
</a>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<aside class="specimen reveal" data-delay="2" aria-label="Типографский образец Aurora">
|
|
139
|
+
<div class="specimen__top">
|
|
140
|
+
<span class="specimen__eyebrow">Специмен · 01</span>
|
|
141
|
+
<span class="specimen__code">v1.0 / 2026</span>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="specimen__type">
|
|
144
|
+
<span class="specimen__glyph" aria-hidden="true">Aa<span class="specimen__glyph-cyr">Бб</span></span>
|
|
145
|
+
<span class="specimen__side">
|
|
146
|
+
<b>Lora · display</b>
|
|
147
|
+
<span>500 · −0.018em</span>
|
|
148
|
+
<span>Golos Text · body</span>
|
|
149
|
+
</span>
|
|
150
|
+
</div>
|
|
151
|
+
<dl class="specimen__rows">
|
|
152
|
+
<div class="specimen__row"><dt>--font-display</dt><dd>Lora</dd></div>
|
|
153
|
+
<div class="specimen__row"><dt>--font-body</dt><dd>Golos Text</dd></div>
|
|
154
|
+
<div class="specimen__row"><dt>--display-xl</dt><dd>clamp 3 → 6.25rem</dd></div>
|
|
155
|
+
<div class="specimen__row"><dt>--measure</dt><dd>66ch</dd></div>
|
|
156
|
+
</dl>
|
|
157
|
+
<div class="specimen__chips" aria-hidden="true">
|
|
158
|
+
<span class="specimen__chip" style="--chip-color:var(--accent)"></span>
|
|
159
|
+
<span class="specimen__chip" style="--chip-color:var(--copper)"></span>
|
|
160
|
+
<span class="specimen__chip" style="--chip-color:var(--ink)"></span>
|
|
161
|
+
<span class="specimen__chip" style="--chip-color:var(--line-strong)"></span>
|
|
162
|
+
<span class="specimen__chip" style="--chip-color:var(--bg-alt)"></span>
|
|
163
|
+
</div>
|
|
164
|
+
<p class="specimen__caption"><span>Типографика — главный герой</span><span>01 / 06</span></p>
|
|
165
|
+
</aside>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<div class="principles reveal" data-delay="2">
|
|
169
|
+
<article class="principle">
|
|
170
|
+
<span class="principle__num">01</span>
|
|
171
|
+
<h2 class="principle__title">Типографика — герой</h2>
|
|
172
|
+
<p class="principle__text">Крупный serif-display, капс-надзаголовки с трекингом и спокойный body. 80 % впечатления — здесь.</p>
|
|
173
|
+
</article>
|
|
174
|
+
<article class="principle">
|
|
175
|
+
<span class="principle__num">02</span>
|
|
176
|
+
<h2 class="principle__title">Воздух — материал</h2>
|
|
177
|
+
<p class="principle__text">Секции 96–128 px, строка 60–72 ch, волосяные линии вместо рамок. Ничего не «прилипает».</p>
|
|
178
|
+
</article>
|
|
179
|
+
<article class="principle">
|
|
180
|
+
<span class="principle__num">03</span>
|
|
181
|
+
<h2 class="principle__title">Движение — шёпот</h2>
|
|
182
|
+
<p class="principle__text">Reveal 700 ms с мягкой кривой, hover 180 ms. Анимация объясняет, а не развлекает.</p>
|
|
183
|
+
</article>
|
|
184
|
+
</div>
|
|
185
|
+
</section>
|
|
186
|
+
|
|
187
|
+
<!-- ==================== ПАЛИТРА ==================== -->
|
|
188
|
+
<section class="section section--tight container-wide" id="palette">
|
|
189
|
+
<div class="spec-head reveal">
|
|
190
|
+
<span class="spec-num">01</span>
|
|
191
|
+
<h2>Палитра</h2>
|
|
192
|
+
<p>Один акцент и нейтрали. Цвет работает на иерархию, а не на эффект. Клик по свотчу копирует значение.</p>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class="palette-group reveal">
|
|
196
|
+
<div class="palette-group__head">
|
|
197
|
+
<h3 class="palette-group__title">Нейтрали</h3>
|
|
198
|
+
<span class="palette-group__note">бумага · поверхность · чернила</span>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="palette">
|
|
201
|
+
<button class="swatch" type="button" style="--swatch:var(--bg)" data-copy="--bg" >
|
|
202
|
+
<span class="swatch__color"></span>
|
|
203
|
+
<span class="swatch__meta"><span class="swatch__name">Бумага</span><span class="swatch__hex" data-swatch-var="--bg">#F4F1EA</span><span class="swatch__var">--bg</span><span class="sr-only">Скопировать значение</span></span>
|
|
204
|
+
</button>
|
|
205
|
+
<button class="swatch" type="button" style="--swatch:var(--surface)" data-copy="--surface" >
|
|
206
|
+
<span class="swatch__color"></span>
|
|
207
|
+
<span class="swatch__meta"><span class="swatch__name">Поверхность</span><span class="swatch__hex" data-swatch-var="--surface">#FFFFFF</span><span class="swatch__var">--surface</span><span class="sr-only">Скопировать значение</span></span>
|
|
208
|
+
</button>
|
|
209
|
+
<button class="swatch" type="button" style="--swatch:var(--bg-alt)" data-copy="--bg-alt" >
|
|
210
|
+
<span class="swatch__color"></span>
|
|
211
|
+
<span class="swatch__meta"><span class="swatch__name">Бумага глубже</span><span class="swatch__hex" data-swatch-var="--bg-alt">#ECE7DC</span><span class="swatch__var">--bg-alt</span><span class="sr-only">Скопировать значение</span></span>
|
|
212
|
+
</button>
|
|
213
|
+
<button class="swatch" type="button" style="--swatch:var(--ink)" data-copy="--ink" >
|
|
214
|
+
<span class="swatch__color"></span>
|
|
215
|
+
<span class="swatch__meta"><span class="swatch__name">Чернила</span><span class="swatch__hex" data-swatch-var="--ink">#14181A</span><span class="swatch__var">--ink</span><span class="sr-only">Скопировать значение</span></span>
|
|
216
|
+
</button>
|
|
217
|
+
<button class="swatch" type="button" style="--swatch:var(--ink-2)" data-copy="--ink-2" >
|
|
218
|
+
<span class="swatch__color"></span>
|
|
219
|
+
<span class="swatch__meta"><span class="swatch__name">Текст 2</span><span class="swatch__hex" data-swatch-var="--ink-2">#3A4244</span><span class="swatch__var">--ink-2</span><span class="sr-only">Скопировать значение</span></span>
|
|
220
|
+
</button>
|
|
221
|
+
<button class="swatch" type="button" style="--swatch:var(--muted)" data-copy="--muted" >
|
|
222
|
+
<span class="swatch__color"></span>
|
|
223
|
+
<span class="swatch__meta"><span class="swatch__name">Приглушённый</span><span class="swatch__hex" data-swatch-var="--muted">#6C7375</span><span class="swatch__var">--muted</span><span class="sr-only">Скопировать значение</span></span>
|
|
224
|
+
</button>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="palette-group reveal">
|
|
229
|
+
<div class="palette-group__head">
|
|
230
|
+
<h3 class="palette-group__title">Акцент и семантика</h3>
|
|
231
|
+
<span class="palette-group__note">акцент — только для действий, статусов и линий</span>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="palette">
|
|
234
|
+
<button class="swatch" type="button" style="--swatch:var(--accent)" data-copy="--accent" >
|
|
235
|
+
<span class="swatch__color"></span>
|
|
236
|
+
<span class="swatch__meta"><span class="swatch__name">Изумруд · акцент</span><span class="swatch__hex" data-swatch-var="--accent">#0E6E5E</span><span class="swatch__var">--accent</span><span class="sr-only">Скопировать значение</span></span>
|
|
237
|
+
</button>
|
|
238
|
+
<button class="swatch" type="button" style="--swatch:var(--copper)" data-copy="--copper" >
|
|
239
|
+
<span class="swatch__color"></span>
|
|
240
|
+
<span class="swatch__meta"><span class="swatch__name">Медь</span><span class="swatch__hex" data-swatch-var="--copper">#B36A43</span><span class="swatch__var">--copper</span><span class="sr-only">Скопировать значение</span></span>
|
|
241
|
+
</button>
|
|
242
|
+
<button class="swatch" type="button" style="--swatch:var(--danger)" data-copy="--danger" >
|
|
243
|
+
<span class="swatch__color"></span>
|
|
244
|
+
<span class="swatch__meta"><span class="swatch__name">Ошибка</span><span class="swatch__hex" data-swatch-var="--danger">#B4412F</span><span class="swatch__var">--danger</span><span class="sr-only">Скопировать значение</span></span>
|
|
245
|
+
</button>
|
|
246
|
+
<button class="swatch" type="button" style="--swatch:var(--warning)" data-copy="--warning" >
|
|
247
|
+
<span class="swatch__color"></span>
|
|
248
|
+
<span class="swatch__meta"><span class="swatch__name">Внимание</span><span class="swatch__hex" data-swatch-var="--warning">#94661C</span><span class="swatch__var">--warning</span><span class="sr-only">Скопировать значение</span></span>
|
|
249
|
+
</button>
|
|
250
|
+
<button class="swatch" type="button" style="--swatch:var(--success)" data-copy="--success" >
|
|
251
|
+
<span class="swatch__color"></span>
|
|
252
|
+
<span class="swatch__meta"><span class="swatch__name">Успех</span><span class="swatch__hex" data-swatch-var="--success">#1F7A57</span><span class="swatch__var">--success</span><span class="sr-only">Скопировать значение</span></span>
|
|
253
|
+
</button>
|
|
254
|
+
<button class="swatch" type="button" style="--swatch:var(--info)" data-copy="--info" >
|
|
255
|
+
<span class="swatch__color"></span>
|
|
256
|
+
<span class="swatch__meta"><span class="swatch__name">Информация</span><span class="swatch__hex" data-swatch-var="--info">#2C5F8A</span><span class="swatch__var">--info</span><span class="sr-only">Скопировать значение</span></span>
|
|
257
|
+
</button>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
<p class="demo-caption reveal">Тёмная тема — отдельная палитра: фон глубже, акцент светлее, тени сильнее. Переключите тему в шапке и свотчи пересчитаются.</p>
|
|
261
|
+
</section>
|
|
262
|
+
|
|
263
|
+
<!-- ==================== ТИПОГРАФИКА ==================== -->
|
|
264
|
+
<section class="section container-wide" id="typography">
|
|
265
|
+
<div class="spec-head reveal">
|
|
266
|
+
<span class="spec-num">02</span>
|
|
267
|
+
<h2>Типографика</h2>
|
|
268
|
+
<p>Контраст масштабов: 12 px служебный текст против 96 px заголовка. Не «всё по 16».</p>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
<div class="type-specimen reveal">
|
|
272
|
+
<div class="type-row">
|
|
273
|
+
<div class="type-row__meta"><b>display-xl</b>заголовок обложки</div>
|
|
274
|
+
<div class="type-row__sample type-row__sample--display display-xl">Тишина и точность</div>
|
|
275
|
+
<div class="type-row__specs">clamp 3→6.25rem<br>lh .98 · ls −.018em</div>
|
|
276
|
+
</div>
|
|
277
|
+
<div class="type-row">
|
|
278
|
+
<div class="type-row__meta"><b>display-l</b>hero страницы</div>
|
|
279
|
+
<div class="type-row__sample type-row__sample--display display-l">Сложные диагнозы</div>
|
|
280
|
+
<div class="type-row__specs">clamp 2.75→4.75rem<br>lh 1.02</div>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="type-row">
|
|
283
|
+
<div class="type-row__meta"><b>display-m</b>заголовок секции</div>
|
|
284
|
+
<div class="type-row__sample type-row__sample--display display-m">Понятные решения</div>
|
|
285
|
+
<div class="type-row__specs">clamp 2.25→3.5rem<br>lh 1.06</div>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="type-row">
|
|
288
|
+
<div class="type-row__meta"><b>h2 / display-s</b>секция</div>
|
|
289
|
+
<div class="type-row__sample type-row__sample--display display-s">Путь пациента</div>
|
|
290
|
+
<div class="type-row__specs">clamp 1.75→2.5rem<br>lh 1.1</div>
|
|
291
|
+
</div>
|
|
292
|
+
<div class="type-row">
|
|
293
|
+
<div class="type-row__meta"><b>h3</b>карточка</div>
|
|
294
|
+
<div class="type-row__sample" style="font-size:var(--text-2xl);font-weight:600;letter-spacing:-.015em">Елена Воронова, кардиолог</div>
|
|
295
|
+
<div class="type-row__specs">Golos 600 · 1.5rem<br>lh 1.2</div>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="type-row">
|
|
298
|
+
<div class="type-row__meta"><b>body</b>основной текст</div>
|
|
299
|
+
<div class="type-row__sample" style="font-size:var(--text-md);line-height:1.65;color:var(--ink-2);max-width:var(--measure)">
|
|
300
|
+
Приём ведут 34 отделения: от кардиологии и онкологии до нейрохирургии. Направление можно
|
|
301
|
+
взять у терапевта или записаться на первичную консультацию.
|
|
302
|
+
</div>
|
|
303
|
+
<div class="type-row__specs">Golos 400 · 1rem<br>66ch · lh 1.65</div>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="type-row">
|
|
306
|
+
<div class="type-row__meta"><b>eyebrow</b>надзаголовок</div>
|
|
307
|
+
<div class="type-row__sample"><span class="eyebrow">Направления · 01–08</span></div>
|
|
308
|
+
<div class="type-row__specs">caps 600 · .75rem<br>ls .14em</div>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="type-row">
|
|
311
|
+
<div class="type-row__meta"><b>mono</b>данные и цифры</div>
|
|
312
|
+
<div class="type-row__sample mono tnum" style="font-size:var(--text-sm)">SLA 94,2 % · 14 мин · SD-1043 · 12.11.2026</div>
|
|
313
|
+
<div class="type-row__specs">tabular-nums<br>не «прыгает» при обновлении</div>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
|
|
317
|
+
<div class="measure-demo reveal">
|
|
318
|
+
<p>Хорошая строка — это 60–72 знака. Длинная строка утомляет, короткая рвёт ритм. Поэтому основной текст живёт в колонке <span class="mono">66ch</span>, а лиды — не шире <span class="mono">52ch</span>.</p>
|
|
319
|
+
<span class="measure-demo__label">66ch</span>
|
|
320
|
+
</div>
|
|
321
|
+
</section>
|
|
322
|
+
|
|
323
|
+
<!-- ==================== ШКАЛЫ ==================== -->
|
|
324
|
+
<section class="section container-wide" id="scales">
|
|
325
|
+
<div class="spec-head reveal">
|
|
326
|
+
<span class="spec-num">03</span>
|
|
327
|
+
<h2>Шкалы</h2>
|
|
328
|
+
<p>Один шаг отступов, радиусы по пресету и четыре слоя теней. Числа не «на глаз».</p>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
<div class="scale-grid reveal">
|
|
332
|
+
<div class="scale-block">
|
|
333
|
+
<div class="scale-block__head"><h3 class="scale-block__title">Отступы · 4 px база</h3><span class="scale-block__note">--sp-1 … --sp-14</span></div>
|
|
334
|
+
<div class="spacing-rail">
|
|
335
|
+
<span class="spacing-bar"><i style="width:var(--sp-1)"></i><span>1·4</span></span>
|
|
336
|
+
<span class="spacing-bar"><i style="width:var(--sp-2)"></i><span>2·8</span></span>
|
|
337
|
+
<span class="spacing-bar"><i style="width:var(--sp-3)"></i><span>3·12</span></span>
|
|
338
|
+
<span class="spacing-bar"><i style="width:var(--sp-4)"></i><span>4·16</span></span>
|
|
339
|
+
<span class="spacing-bar"><i style="width:var(--sp-6)"></i><span>6·24</span></span>
|
|
340
|
+
<span class="spacing-bar"><i style="width:var(--sp-8)"></i><span>8·40</span></span>
|
|
341
|
+
<span class="spacing-bar"><i style="width:var(--sp-10)"></i><span>10·64</span></span>
|
|
342
|
+
<span class="spacing-bar"><i style="width:var(--sp-12)"></i><span>12·96</span></span>
|
|
343
|
+
<span class="spacing-bar"><i style="width:var(--sp-13)"></i><span>13·128</span></span>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
<div class="scale-block">
|
|
347
|
+
<div class="scale-block__head"><h3 class="scale-block__title">Радиусы</h3><span class="scale-block__note">по пресету · не «всё 24»</span></div>
|
|
348
|
+
<div class="radii-row">
|
|
349
|
+
<span class="radius-tile radius-tile--sm"><i></i><span>sm</span></span>
|
|
350
|
+
<span class="radius-tile radius-tile--control"><i></i><span>control</span></span>
|
|
351
|
+
<span class="radius-tile radius-tile--card"><i></i><span>card</span></span>
|
|
352
|
+
<span class="radius-tile radius-tile--lg"><i></i><span>lg</span></span>
|
|
353
|
+
<span class="radius-tile radius-tile--pill"><i></i><span>pill</span></span>
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="scale-block">
|
|
357
|
+
<div class="scale-block__head"><h3 class="scale-block__title">Тени</h3><span class="scale-block__note">слоистые · низкая непрозрачность</span></div>
|
|
358
|
+
<div class="shadow-row">
|
|
359
|
+
<div class="shadow-tile shadow-tile--xs"><b>xs</b><span>границы</span></div>
|
|
360
|
+
<div class="shadow-tile shadow-tile--sm"><b>sm</b><span>hover карточки</span></div>
|
|
361
|
+
<div class="shadow-tile shadow-tile--md"><b>md</b><span>поповеры</span></div>
|
|
362
|
+
<div class="shadow-tile shadow-tile--lg"><b>lg</b><span>модалки</span></div>
|
|
363
|
+
</div>
|
|
364
|
+
</div>
|
|
365
|
+
<div class="scale-block">
|
|
366
|
+
<div class="scale-block__head"><h3 class="scale-block__title">Сетка</h3><span class="scale-block__note">12 колонок · 1200/1360/760</span></div>
|
|
367
|
+
<div style="display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:4px" aria-hidden="true">
|
|
368
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
369
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
370
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
371
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
372
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
373
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
374
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
375
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
376
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
377
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
378
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
379
|
+
<span style="height:40px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);border-radius:2px"></span>
|
|
380
|
+
</div>
|
|
381
|
+
<p class="demo-caption">Gutter <span class="mono">clamp(20px, 4.5vw, 56px)</span>, 7/5 и 8/4 для асимметричных сплитов, волосяные разделители.</p>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
</section>
|
|
385
|
+
|
|
386
|
+
<!-- ==================== КОМПОНЕНТЫ ==================== -->
|
|
387
|
+
<section class="section container-wide" id="components">
|
|
388
|
+
<div class="spec-head reveal">
|
|
389
|
+
<span class="spec-num">04</span>
|
|
390
|
+
<h2>Компоненты</h2>
|
|
391
|
+
<p>Не сухой каталог: каждый компонент показан в контексте и во всех состояниях.</p>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<!-- Кнопки -->
|
|
395
|
+
<article class="comp-section reveal" aria-labelledby="comp-buttons">
|
|
396
|
+
<div class="spec-head">
|
|
397
|
+
<h2 id="comp-buttons" class="display-s">Кнопки</h2>
|
|
398
|
+
<p>Одно действие — один primary. Secondary рядом, ghost — для второстепенных, danger — для необратимых.</p>
|
|
399
|
+
</div>
|
|
400
|
+
<div class="frame frame--tinted">
|
|
401
|
+
<span class="frame__label">variants</span>
|
|
402
|
+
<div class="cta-row" style="margin-bottom:var(--sp-5)">
|
|
403
|
+
<button class="btn btn--primary" type="button">Записаться на приём</button>
|
|
404
|
+
<button class="btn btn--secondary" type="button">Все направления</button>
|
|
405
|
+
<button class="btn btn--ghost" type="button">Подробнее</button>
|
|
406
|
+
<button class="btn btn--danger" type="button">Отменить заявку</button>
|
|
407
|
+
</div>
|
|
408
|
+
<div class="hr-soft"></div>
|
|
409
|
+
<div class="cta-row" style="margin-bottom:var(--sp-5)">
|
|
410
|
+
<button class="btn btn--primary btn--sm" type="button">sm · 36px</button>
|
|
411
|
+
<button class="btn btn--primary" type="button">md · 46px</button>
|
|
412
|
+
<button class="btn btn--primary btn--lg" type="button">lg · 54px</button>
|
|
413
|
+
<button class="btn btn--secondary btn--icon" type="button" aria-label="Фильтр">
|
|
414
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-filter"/></svg>
|
|
415
|
+
</button>
|
|
416
|
+
<button class="btn btn--primary" type="button">
|
|
417
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-plus"/></svg>
|
|
418
|
+
Новая заявка
|
|
419
|
+
</button>
|
|
420
|
+
</div>
|
|
421
|
+
<div class="hr-soft"></div>
|
|
422
|
+
<div class="state-matrix">
|
|
423
|
+
<div class="state-cell">
|
|
424
|
+
<button class="btn btn--primary" type="button">Default</button>
|
|
425
|
+
<span>default</span>
|
|
426
|
+
</div>
|
|
427
|
+
<div class="state-cell">
|
|
428
|
+
<button class="btn btn--primary is-focus" type="button">Focus</button>
|
|
429
|
+
<span>focus-visible</span>
|
|
430
|
+
</div>
|
|
431
|
+
<div class="state-cell">
|
|
432
|
+
<button class="btn btn--primary" type="button" disabled>Disabled</button>
|
|
433
|
+
<span>disabled</span>
|
|
434
|
+
</div>
|
|
435
|
+
<div class="state-cell">
|
|
436
|
+
<button class="btn btn--primary" type="button" data-demo-loading="Запись создана" data-demo-text="Демонстрация: кнопка вернулась обычного размера, кнопка недоступна во время запроса.">Отправить</button>
|
|
437
|
+
<span>loading — нажмите</span>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="state-cell">
|
|
440
|
+
<button class="btn btn--secondary" type="button" data-demo-loading="Готово" data-demo-text="Secondary + loading: спиннер берёт цвет акцента.">Проверить</button>
|
|
441
|
+
<span>loading · secondary</span>
|
|
442
|
+
</div>
|
|
443
|
+
</div>
|
|
444
|
+
<p class="demo-caption"><b>Состояния обязательны у каждого действия.</b> Hover и active — 120–180 ms; loading блокирует повторный клик и сообщает <span class="mono">aria-busy</span>.</p>
|
|
445
|
+
</div>
|
|
446
|
+
</article>
|
|
447
|
+
|
|
448
|
+
<!-- Формы -->
|
|
449
|
+
<article class="comp-section reveal" aria-labelledby="comp-forms">
|
|
450
|
+
<div class="spec-head">
|
|
451
|
+
<h2 id="comp-forms" class="display-s">Поля и формы</h2>
|
|
452
|
+
<p>Подпись сверху, подсказка снизу, ошибка — у поля и с решением. Никаких «плейсхолдер вместо label».</p>
|
|
453
|
+
</div>
|
|
454
|
+
<div class="comp-grid">
|
|
455
|
+
<div class="frame">
|
|
456
|
+
<span class="frame__label">форма · контекст</span>
|
|
457
|
+
<form class="form-grid" style="grid-template-columns:1fr" onsubmit="return false">
|
|
458
|
+
<div class="field">
|
|
459
|
+
<label class="label" for="f-name">ФИО <span class="label__hint">обязательно</span></label>
|
|
460
|
+
<input class="input" id="f-name" type="text" placeholder="Соловьёва Марина Игоревна" autocomplete="name">
|
|
461
|
+
</div>
|
|
462
|
+
<div class="field">
|
|
463
|
+
<label class="label" for="f-phone">Телефон</label>
|
|
464
|
+
<div class="input-group">
|
|
465
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-phone"/></svg>
|
|
466
|
+
<input class="input" id="f-phone" type="tel" value="+7 (999) 412-08-31" autocomplete="tel">
|
|
467
|
+
</div>
|
|
468
|
+
<span class="field__hint">Напомним за день до приёма. Без звонков по выходным.</span>
|
|
469
|
+
</div>
|
|
470
|
+
<div class="field">
|
|
471
|
+
<label class="label" for="f-department">Направление</label>
|
|
472
|
+
<div class="select-wrap">
|
|
473
|
+
<select class="select" id="f-department">
|
|
474
|
+
<option>Кардиология</option>
|
|
475
|
+
<option>Онкология</option>
|
|
476
|
+
<option>Нейрохирургия</option>
|
|
477
|
+
<option>Травматология</option>
|
|
478
|
+
</select>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
<div class="field">
|
|
482
|
+
<label class="label" for="f-note">Комментарий <span class="label__hint">необязательно</span></label>
|
|
483
|
+
<textarea class="textarea" id="f-note" rows="3" placeholder="Что важно знать врачу"></textarea>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="field">
|
|
486
|
+
<span class="label">Способ записи</span>
|
|
487
|
+
<div class="check-group">
|
|
488
|
+
<label class="check check--radio"><input type="radio" name="visit" checked><span class="check__text">Первичный приём по направлению</span></label>
|
|
489
|
+
<label class="check check--radio"><input type="radio" name="visit"><span class="check__text">Повторная консультация</span></label>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
<label class="switch">
|
|
493
|
+
<input type="checkbox" checked>
|
|
494
|
+
<span class="switch__text">Напоминание о приёме<span class="switch__meta">SMS и в личный кабинет</span></span>
|
|
495
|
+
</label>
|
|
496
|
+
<label class="check">
|
|
497
|
+
<input type="checkbox" checked>
|
|
498
|
+
<span class="check__text">Согласен на обработку персональных данных<span class="check__meta">152-ФЗ · политика конфиденциальности</span></span>
|
|
499
|
+
</label>
|
|
500
|
+
<div class="form-actions">
|
|
501
|
+
<button class="btn btn--primary" type="button" data-demo-loading="Заявка отправлена" data-demo-text="Мы перезвоним в течение 15 минут в рабочее время.">Отправить заявку</button>
|
|
502
|
+
<button class="btn btn--ghost" type="button">Сохранить черновик</button>
|
|
503
|
+
</div>
|
|
504
|
+
</form>
|
|
505
|
+
</div>
|
|
506
|
+
|
|
507
|
+
<div class="comp-stack">
|
|
508
|
+
<div class="frame">
|
|
509
|
+
<span class="frame__label">состояния поля</span>
|
|
510
|
+
<div class="comp-stack">
|
|
511
|
+
<div class="field">
|
|
512
|
+
<label class="label" for="f-1">Электронная почта</label>
|
|
513
|
+
<input class="input" id="f-1" type="email" placeholder="name@example.ru">
|
|
514
|
+
<span class="field__hint">Нужна для отправки подтверждения записи.</span>
|
|
515
|
+
</div>
|
|
516
|
+
<div class="field field--invalid">
|
|
517
|
+
<label class="label" for="f-2">Телефон</label>
|
|
518
|
+
<input class="input" id="f-2" type="tel" value="+7 (999" aria-invalid="true" aria-describedby="f-2-err">
|
|
519
|
+
<span class="field__error" id="f-2-err">
|
|
520
|
+
<svg class="icon icon--xs" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-alert-circle"/></svg>
|
|
521
|
+
Не хватает цифр — всего 10 после +7
|
|
522
|
+
</span>
|
|
523
|
+
</div>
|
|
524
|
+
<div class="field">
|
|
525
|
+
<label class="label" for="f-3">Направление</label>
|
|
526
|
+
<div class="select-wrap">
|
|
527
|
+
<select class="select" id="f-3" disabled><option>Недоступно до выбора врача</option></select>
|
|
528
|
+
</div>
|
|
529
|
+
<span class="field__hint">Поле станет активным после выбора специальности.</span>
|
|
530
|
+
</div>
|
|
531
|
+
<div class="field">
|
|
532
|
+
<span class="label">Приоритет заявки</span>
|
|
533
|
+
<div class="check-group">
|
|
534
|
+
<label class="check"><input type="checkbox" checked><span class="check__text">Срочная<span class="check__meta">ответ в течение 15 минут</span></span></label>
|
|
535
|
+
<label class="check"><input type="checkbox" disabled><span class="check__text">Согласована с руководителем</span></label>
|
|
536
|
+
</div>
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
</div>
|
|
540
|
+
<div class="frame">
|
|
541
|
+
<span class="frame__label">поиск и ⌘K</span>
|
|
542
|
+
<div class="field">
|
|
543
|
+
<label class="label sr-only" for="f-search">Поиск</label>
|
|
544
|
+
<div class="input-group input-group--trailing">
|
|
545
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-search"/></svg>
|
|
546
|
+
<input class="input" id="f-search" type="search" placeholder="Поиск заявки, темы, исполнителя">
|
|
547
|
+
<span class="input-group__trailing"><kbd class="kbd">⌘</kbd><kbd class="kbd">K</kbd></span>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
<p class="demo-caption">Полный набор: input, select, textarea, checkbox, radio, switch, поиск, ошибка, disabled.</p>
|
|
551
|
+
</div>
|
|
552
|
+
</div>
|
|
553
|
+
</div>
|
|
554
|
+
</article>
|
|
555
|
+
|
|
556
|
+
<!-- Бейджи и статусы -->
|
|
557
|
+
<article class="comp-section reveal" aria-labelledby="comp-badges">
|
|
558
|
+
<div class="spec-head">
|
|
559
|
+
<h2 id="comp-badges" class="display-s">Бейджи и статусы</h2>
|
|
560
|
+
<p>Цвет не единственный носитель смысла: статус дублируется текстом, точка — текстом рядом.</p>
|
|
561
|
+
</div>
|
|
562
|
+
<div class="frame frame--tinted">
|
|
563
|
+
<span class="frame__label">statuses</span>
|
|
564
|
+
<div class="cluster" style="margin-bottom:var(--sp-4)">
|
|
565
|
+
<span class="badge badge--info badge--dot">Открыта</span>
|
|
566
|
+
<span class="badge badge--warning badge--dot">В работе</span>
|
|
567
|
+
<span class="badge badge--success badge--dot">Решена</span>
|
|
568
|
+
<span class="badge badge--danger badge--dot">Просрочена</span>
|
|
569
|
+
<span class="badge badge--neutral">Черновик</span>
|
|
570
|
+
<span class="badge badge--accent">Срочно</span>
|
|
571
|
+
</div>
|
|
572
|
+
<div class="cluster" style="margin-bottom:var(--sp-4)">
|
|
573
|
+
<span class="status status--open">Открыта</span>
|
|
574
|
+
<span class="status status--work">В работе</span>
|
|
575
|
+
<span class="status status--done">Решена</span>
|
|
576
|
+
<span class="status status--late">Просрочена</span>
|
|
577
|
+
<span class="status status--wait">Ожидает ответа</span>
|
|
578
|
+
<span class="status status--muted">Черновик</span>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="cluster">
|
|
581
|
+
<span class="badge badge--outline badge--mono">SD-1043</span>
|
|
582
|
+
<span class="badge badge--copper">Высокий приоритет</span>
|
|
583
|
+
<span class="badge badge--danger">Критический</span>
|
|
584
|
+
<span class="badge badge--neutral">Низкий</span>
|
|
585
|
+
<span class="chip chip--active">Все заявки <span class="chip__count">128</span></span>
|
|
586
|
+
<span class="chip">Мои <span class="chip__count">14</span></span>
|
|
587
|
+
<span class="chip">Просроченные <span class="chip__count">6</span></span>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
</article>
|
|
591
|
+
|
|
592
|
+
<!-- Карточки -->
|
|
593
|
+
<article class="comp-section reveal" aria-labelledby="comp-cards">
|
|
594
|
+
<div class="spec-head">
|
|
595
|
+
<h2 id="comp-cards" class="display-s">Карточки</h2>
|
|
596
|
+
<p>Три разные карточки вместо трёх одинаковых: контентная, человек и показатель.</p>
|
|
597
|
+
</div>
|
|
598
|
+
<div class="comp-grid--3 comp-grid">
|
|
599
|
+
<article class="card">
|
|
600
|
+
<div class="card__body">
|
|
601
|
+
<span class="badge badge--accent">Кардиология</span>
|
|
602
|
+
<h3 class="card__title" style="margin-top:var(--sp-4)">Новый ангиограф: 2 400 исследований в год</h3>
|
|
603
|
+
<p class="muted" style="margin-top:var(--sp-3);font-size:var(--text-sm);line-height:1.6">Отделение рентгенохирургии перешло на цифровую ангиографию с уменьшенной лучевой нагрузкой.</p>
|
|
604
|
+
<div class="between" style="margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)">
|
|
605
|
+
<span class="caps-label">12.11.2026</span>
|
|
606
|
+
<a class="link" href="#patterns">Читать<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-right"/></svg></a>
|
|
607
|
+
</div>
|
|
608
|
+
</div>
|
|
609
|
+
</article>
|
|
610
|
+
|
|
611
|
+
<article class="card">
|
|
612
|
+
<div class="card__body">
|
|
613
|
+
<div class="cluster cluster--tight" style="margin-bottom:var(--sp-4)">
|
|
614
|
+
<span class="avatar avatar--xl avatar--square avatar--accent" aria-hidden="true">ЕВ</span>
|
|
615
|
+
<div>
|
|
616
|
+
<h3 class="card__title" style="font-size:var(--text-lg)">Елена Воронова</h3>
|
|
617
|
+
<p class="muted" style="font-size:var(--text-xs)">д.м.н., кардиолог · 24 года</p>
|
|
618
|
+
</div>
|
|
619
|
+
</div>
|
|
620
|
+
<p style="font-size:var(--text-sm);color:var(--ink-2);line-height:1.6">«Сначала разговор, потом назначения. Пациент должен понимать, что с ним происходит».</p>
|
|
621
|
+
<div class="between" style="margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)">
|
|
622
|
+
<span class="caps-label">Приём · 90 мин</span>
|
|
623
|
+
<a class="btn btn--secondary btn--sm" href="#components">Записаться</a>
|
|
624
|
+
</div>
|
|
625
|
+
</div>
|
|
626
|
+
</article>
|
|
627
|
+
|
|
628
|
+
<article class="kpi kpi--accent">
|
|
629
|
+
<div class="kpi__head">
|
|
630
|
+
<span class="kpi__label">SLA за 30 дней</span>
|
|
631
|
+
<span class="kpi__icon"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-activity"/></svg></span>
|
|
632
|
+
</div>
|
|
633
|
+
<span class="kpi__value">94,2<span class="kpi__unit">%</span></span>
|
|
634
|
+
<div class="kpi__foot">
|
|
635
|
+
<span class="kpi__delta kpi__delta--up">
|
|
636
|
+
<svg class="icon icon--xs" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-trend-up"/></svg>
|
|
637
|
+
1,8 % <span class="kpi__delta-note">к прошлому месяцу</span>
|
|
638
|
+
</span>
|
|
639
|
+
<svg class="kpi__spark" viewBox="0 0 96 34" preserveAspectRatio="none" aria-hidden="true">
|
|
640
|
+
<path class="spark__area" d="M0 28 L10 25 L20 26 L30 21 L40 22 L50 16 L60 18 L70 11 L80 13 L90 7 L96 8 L96 34 L0 34 Z"/>
|
|
641
|
+
<path class="spark__line" d="M0 28 L10 25 L20 26 L30 21 L40 22 L50 16 L60 18 L70 11 L80 13 L90 7 L96 8"/>
|
|
642
|
+
<circle class="spark__dot" cx="96" cy="8" r="2.4"/>
|
|
643
|
+
</svg>
|
|
644
|
+
</div>
|
|
645
|
+
</article>
|
|
646
|
+
</div>
|
|
647
|
+
</article>
|
|
648
|
+
|
|
649
|
+
<!-- Таблица -->
|
|
650
|
+
<article class="comp-section reveal" aria-labelledby="comp-table">
|
|
651
|
+
<div class="spec-head">
|
|
652
|
+
<h2 id="comp-table" class="display-s">Таблица</h2>
|
|
653
|
+
<p>Sticky header, табличные цифры, hover-действия и горизонтальный скролл на мобильном внутри карточки.</p>
|
|
654
|
+
</div>
|
|
655
|
+
<div class="table-wrap table-showcase">
|
|
656
|
+
<table class="table table--compact">
|
|
657
|
+
<caption>Очередь заявок · 12 ноября · обновлено 2 минуты назад</caption>
|
|
658
|
+
<thead>
|
|
659
|
+
<tr>
|
|
660
|
+
<th scope="col">ID</th>
|
|
661
|
+
<th scope="col">Тема</th>
|
|
662
|
+
<th scope="col">Статус</th>
|
|
663
|
+
<th scope="col">Приоритет</th>
|
|
664
|
+
<th scope="col">Исполнитель</th>
|
|
665
|
+
<th scope="col" class="num">SLA</th>
|
|
666
|
+
<th scope="col"><span class="sr-only">Действия</span></th>
|
|
667
|
+
</tr>
|
|
668
|
+
</thead>
|
|
669
|
+
<tbody>
|
|
670
|
+
<tr>
|
|
671
|
+
<td class="mono">SD-1043</td>
|
|
672
|
+
<td><span class="table__title">Нет доступа к корпоративной почте</span><span class="table__sub">Обновление · 12.11, 09:14</span></td>
|
|
673
|
+
<td><span class="badge badge--warning badge--dot">В работе</span></td>
|
|
674
|
+
<td><span class="badge badge--copper">Высокий</span></td>
|
|
675
|
+
<td><span class="table__person"><span class="avatar avatar--sm avatar--accent">МК</span>Марина Ковалёва</span></td>
|
|
676
|
+
<td class="num"><span class="status status--work">2 ч 14 мин</span></td>
|
|
677
|
+
<td>
|
|
678
|
+
<div class="table__actions row-actions">
|
|
679
|
+
<button class="icon-btn" style="width:32px;height:32px" type="button" aria-label="Открыть SD-1043"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-up-right"/></svg></button>
|
|
680
|
+
<button class="icon-btn" style="width:32px;height:32px" type="button" aria-label="Ещё действия SD-1043"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-more"/></svg></button>
|
|
681
|
+
</div>
|
|
682
|
+
</td>
|
|
683
|
+
</tr>
|
|
684
|
+
<tr>
|
|
685
|
+
<td class="mono">SD-1042</td>
|
|
686
|
+
<td><span class="table__title">Печать на принтере в 412 кабинете</span><span class="table__sub">Заявка · 12.11, 08:41</span></td>
|
|
687
|
+
<td><span class="badge badge--info badge--dot">Открыта</span></td>
|
|
688
|
+
<td><span class="badge badge--neutral">Средний</span></td>
|
|
689
|
+
<td><span class="table__person"><span class="avatar avatar--sm">АП</span>Артём Павлов</span></td>
|
|
690
|
+
<td class="num"><span class="status status--open">4 ч 02 мин</span></td>
|
|
691
|
+
<td>
|
|
692
|
+
<div class="table__actions row-actions">
|
|
693
|
+
<button class="icon-btn" style="width:32px;height:32px" type="button" aria-label="Открыть SD-1042"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-up-right"/></svg></button>
|
|
694
|
+
<button class="icon-btn" style="width:32px;height:32px" type="button" aria-label="Ещё действия SD-1042"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-more"/></svg></button>
|
|
695
|
+
</div>
|
|
696
|
+
</td>
|
|
697
|
+
</tr>
|
|
698
|
+
<tr>
|
|
699
|
+
<td class="mono">SD-1038</td>
|
|
700
|
+
<td><span class="table__title">Продление лицензии на АРМ врача</span><span class="table__sub">Заявка · 11.11, 17:20</span></td>
|
|
701
|
+
<td><span class="badge badge--success badge--dot">Решена</span></td>
|
|
702
|
+
<td><span class="badge badge--neutral">Низкий</span></td>
|
|
703
|
+
<td><span class="table__person"><span class="avatar avatar--sm avatar--copper">ЕС</span>Елена Сорокина</span></td>
|
|
704
|
+
<td class="num"><span class="status status--done">в срок</span></td>
|
|
705
|
+
<td>
|
|
706
|
+
<div class="table__actions row-actions">
|
|
707
|
+
<button class="icon-btn" style="width:32px;height:32px" type="button" aria-label="Открыть SD-1038"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-up-right"/></svg></button>
|
|
708
|
+
<button class="icon-btn" style="width:32px;height:32px" type="button" aria-label="Ещё действия SD-1038"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-more"/></svg></button>
|
|
709
|
+
</div>
|
|
710
|
+
</td>
|
|
711
|
+
</tr>
|
|
712
|
+
<tr>
|
|
713
|
+
<td class="mono">SD-1031</td>
|
|
714
|
+
<td><span class="table__title">Восстановление доступа в 1С</span><span class="table__sub">Инцидент · 11.11, 14:05</span></td>
|
|
715
|
+
<td><span class="badge badge--danger badge--dot">Просрочена</span></td>
|
|
716
|
+
<td><span class="badge badge--danger">Критический</span></td>
|
|
717
|
+
<td><span class="table__person"><span class="avatar avatar--sm avatar--dark">ДБ</span>Дмитрий Белов</span></td>
|
|
718
|
+
<td class="num"><span class="status status--late">−1 ч 12 мин</span></td>
|
|
719
|
+
<td>
|
|
720
|
+
<div class="table__actions row-actions">
|
|
721
|
+
<button class="icon-btn" style="width:32px;height:32px" type="button" aria-label="Открыть SD-1031"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-up-right"/></svg></button>
|
|
722
|
+
<button class="icon-btn" style="width:32px;height:32px" type="button" aria-label="Ещё действия SD-1031"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-more"/></svg></button>
|
|
723
|
+
</div>
|
|
724
|
+
</td>
|
|
725
|
+
</tr>
|
|
726
|
+
</tbody>
|
|
727
|
+
</table>
|
|
728
|
+
</div>
|
|
729
|
+
<p class="table-note"><svg class="icon icon--xs" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-right"/></svg>Прокрутите таблицу по горизонтали — страница не «поедет».</p>
|
|
730
|
+
</article>
|
|
731
|
+
|
|
732
|
+
<!-- Tabs -->
|
|
733
|
+
<article class="comp-section reveal" aria-labelledby="comp-tabs">
|
|
734
|
+
<div class="spec-head">
|
|
735
|
+
<h2 id="comp-tabs" class="display-s">Tabs</h2>
|
|
736
|
+
<p>Клавиатура: ← → Home End. Активная панель объявлена через <span class="mono">aria-controls</span>.</p>
|
|
737
|
+
</div>
|
|
738
|
+
<div class="frame">
|
|
739
|
+
<span class="frame__label">tabpanel</span>
|
|
740
|
+
<div data-tabs>
|
|
741
|
+
<div class="tabs" role="tablist" aria-label="Детали заявки">
|
|
742
|
+
<button class="tab" id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="panel-1">Заявка <span class="tab__count">12</span></button>
|
|
743
|
+
<button class="tab" id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">История</button>
|
|
744
|
+
<button class="tab" id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="panel-3" tabindex="-1">Настройки SLA</button>
|
|
745
|
+
</div>
|
|
746
|
+
<div class="tab-panel" id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
|
|
747
|
+
<div class="list">
|
|
748
|
+
<div class="list__item">
|
|
749
|
+
<span class="avatar avatar--sm avatar--accent">МК</span>
|
|
750
|
+
<div class="list__main"><p class="list__title">Марина Ковалёва взяла заявку в работу</p><p class="list__meta">сегодня, 09:21 · SLA до 11:14</p></div>
|
|
751
|
+
<span class="badge badge--warning badge--dot">В работе</span>
|
|
752
|
+
</div>
|
|
753
|
+
<div class="list__item">
|
|
754
|
+
<span class="avatar avatar--sm">АП</span>
|
|
755
|
+
<div class="list__main"><p class="list__title">Пользователь подтвердил восстановление доступа</p><p class="list__meta">сегодня, 09:18 · канал: портал</p></div>
|
|
756
|
+
<span class="badge badge--info">Открыта</span>
|
|
757
|
+
</div>
|
|
758
|
+
</div>
|
|
759
|
+
</div>
|
|
760
|
+
<div class="tab-panel" id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
|
|
761
|
+
<div class="timeline">
|
|
762
|
+
<div class="timeline__item">
|
|
763
|
+
<span class="timeline__dot timeline__dot--accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg></span>
|
|
764
|
+
<div class="timeline__body"><p class="timeline__title">Заявка зарегистрирована</p><p class="timeline__time">09:14 · портал</p></div>
|
|
765
|
+
</div>
|
|
766
|
+
<div class="timeline__item">
|
|
767
|
+
<span class="timeline__dot"></span>
|
|
768
|
+
<div class="timeline__body"><p class="timeline__title">Назначен исполнитель: Марина Ковалёва</p><p class="timeline__time">09:21 · автоматически</p></div>
|
|
769
|
+
</div>
|
|
770
|
+
</div>
|
|
771
|
+
</div>
|
|
772
|
+
<div class="tab-panel" id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
|
|
773
|
+
<div class="comp-stack">
|
|
774
|
+
<label class="switch"><input type="checkbox" checked><span class="switch__text">Учитывать календарь отделения<span class="switch__meta">SLA не идёт в нерабочие часы</span></span></label>
|
|
775
|
+
<label class="check"><input type="checkbox" checked><span class="check__text">Эскалация руководителю при 80 % лимита</span></label>
|
|
776
|
+
</div>
|
|
777
|
+
</div>
|
|
778
|
+
</div>
|
|
779
|
+
</div>
|
|
780
|
+
</article>
|
|
781
|
+
|
|
782
|
+
<!-- Алерты и toast -->
|
|
783
|
+
<article class="comp-section reveal" aria-labelledby="comp-alerts">
|
|
784
|
+
<div class="spec-head">
|
|
785
|
+
<h2 id="comp-alerts" class="display-s">Алерты и toast</h2>
|
|
786
|
+
<p>Алерт — состояние страницы. Toast — короткий отклик на действие, 4 секунды и не перекрывает работу.</p>
|
|
787
|
+
</div>
|
|
788
|
+
<div class="comp-grid">
|
|
789
|
+
<div class="comp-stack">
|
|
790
|
+
<div class="alert alert--info">
|
|
791
|
+
<svg class="icon icon--sm alert__icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-info"/></svg>
|
|
792
|
+
<div class="alert__body"><span class="alert__title">Плановые работы</span><span>В субботу с 02:00 до 04:00 портал будет недоступен.</span></div>
|
|
793
|
+
</div>
|
|
794
|
+
<div class="alert alert--success">
|
|
795
|
+
<svg class="icon icon--sm alert__icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check-circle"/></svg>
|
|
796
|
+
<div class="alert__body"><span class="alert__title">Резервная копия создана</span><span>PostgreSQL · 4,2 ГБ · проверка целостности пройдена.</span></div>
|
|
797
|
+
</div>
|
|
798
|
+
<div class="alert alert--warning">
|
|
799
|
+
<svg class="icon icon--sm alert__icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-alert-triangle"/></svg>
|
|
800
|
+
<div class="alert__body"><span class="alert__title">Лимит SLA почти исчерпан</span><span>До эскалации 18 минут. Проверьте заявку SD-1031.</span></div>
|
|
801
|
+
</div>
|
|
802
|
+
<div class="alert alert--danger">
|
|
803
|
+
<svg class="icon icon--sm alert__icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-alert-circle"/></svg>
|
|
804
|
+
<div class="alert__body"><span class="alert__title">Не удалось отправить файл</span><span>Файл больше 20 МБ. <a class="alert__link" href="#components">Сжать или загрузить в облако</a>.</span></div>
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
<div class="frame frame--tinted">
|
|
808
|
+
<span class="frame__label">live demo</span>
|
|
809
|
+
<div class="comp-stack">
|
|
810
|
+
<p class="demo-caption" style="margin:0">Нажмите — получите реальный toast. Уведомление можно закрыть или дождаться автозакрытия.</p>
|
|
811
|
+
<div class="cta-row">
|
|
812
|
+
<button class="btn btn--secondary" type="button" data-demo-toast="success" data-demo-toast-title="Заявка создана" data-demo-toast-text="SD-1044 · назначена Марине Ковалёвой.">Успех</button>
|
|
813
|
+
<button class="btn btn--secondary" type="button" data-demo-toast="info" data-demo-toast-title="Черновик сохранён" data-demo-toast-text="Вернуться к нему можно из раздела «Мои».">Информация</button>
|
|
814
|
+
<button class="btn btn--secondary" type="button" data-demo-toast="danger" data-demo-toast-title="Ошибка загрузки" data-demo-toast-text="Проверьте соединение и повторите попытку.">Ошибка</button>
|
|
815
|
+
</div>
|
|
816
|
+
<div class="hr-soft"></div>
|
|
817
|
+
<p class="demo-caption" style="margin:0">Toast — это <span class="mono">role="status"</span> в <span class="mono">aria-live="polite"</span>: скринридер прочитает его, не перебивая пользователя.</p>
|
|
818
|
+
</div>
|
|
819
|
+
</div>
|
|
820
|
+
</div>
|
|
821
|
+
</article>
|
|
822
|
+
|
|
823
|
+
<!-- Модалка, меню, tooltip -->
|
|
824
|
+
<article class="comp-section reveal" aria-labelledby="comp-overlays">
|
|
825
|
+
<div class="spec-head">
|
|
826
|
+
<h2 id="comp-overlays" class="display-s">Модалка, меню, tooltip</h2>
|
|
827
|
+
<p>Escape закрывает, фокус возвращается на триггер, Tab не уходит за пределы диалога.</p>
|
|
828
|
+
</div>
|
|
829
|
+
<div class="comp-grid--3 comp-grid">
|
|
830
|
+
<div class="card card--pad">
|
|
831
|
+
<h3 class="card__title">Модальное окно</h3>
|
|
832
|
+
<p class="muted" style="font-size:var(--text-sm);margin-top:var(--sp-2);line-height:1.6">Подтверждение необратимого действия. Одна модалка — одно решение.</p>
|
|
833
|
+
<div class="cta-row" style="margin-top:var(--sp-5)">
|
|
834
|
+
<button class="btn btn--danger" type="button" data-modal-open="#demo-modal">Удалить заявку</button>
|
|
835
|
+
<button class="btn btn--ghost" type="button" data-modal-open="#demo-modal">Открыть демо</button>
|
|
836
|
+
</div>
|
|
837
|
+
</div>
|
|
838
|
+
<div class="card card--pad">
|
|
839
|
+
<div class="between" style="margin-bottom:var(--sp-4)">
|
|
840
|
+
<h3 class="card__title">Dropdown</h3>
|
|
841
|
+
<div class="dropdown" data-dropdown>
|
|
842
|
+
<button class="icon-btn icon-btn--outline" type="button" data-dropdown-toggle aria-expanded="false" aria-haspopup="true" aria-label="Действия с заявкой">
|
|
843
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-more"/></svg>
|
|
844
|
+
</button>
|
|
845
|
+
<div class="menu" role="menu" style="min-width:200px">
|
|
846
|
+
<span class="menu__label">Действия</span>
|
|
847
|
+
<button class="menu__item" type="button" role="menuitem"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-user"/></svg>Назначить исполнителя</button>
|
|
848
|
+
<button class="menu__item" type="button" role="menuitem"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-clock"/></svg>Изменить срок<span class="menu__shortcut">⌥T</span></button>
|
|
849
|
+
<div class="menu__sep"></div>
|
|
850
|
+
<button class="menu__item menu__item--danger" type="button" role="menuitem"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-x"/></svg>Удалить</button>
|
|
851
|
+
</div>
|
|
852
|
+
</div>
|
|
853
|
+
</div>
|
|
854
|
+
<p class="muted" style="font-size:var(--text-sm);line-height:1.6">Открывается по клику, закрывается по Escape и клику вне меню.</p>
|
|
855
|
+
<div class="menu menu--static" role="menu" aria-label="Статичное меню" style="margin-top:var(--sp-4)">
|
|
856
|
+
<span class="menu__label">Статичное меню</span>
|
|
857
|
+
<button class="menu__item" type="button" role="menuitemradio" aria-checked="true"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg>Все заявки<span class="menu__shortcut">12</span></button>
|
|
858
|
+
<button class="menu__item" type="button" role="menuitem"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-users"/></svg>Мои заявки<span class="menu__shortcut">4</span></button>
|
|
859
|
+
<div class="menu__sep"></div>
|
|
860
|
+
<button class="menu__item" type="button" role="menuitem"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-download"/></svg>Экспорт CSV</button>
|
|
861
|
+
</div>
|
|
862
|
+
</div>
|
|
863
|
+
<div class="card card--pad">
|
|
864
|
+
<h3 class="card__title">Tooltip</h3>
|
|
865
|
+
<p class="muted" style="font-size:var(--text-sm);margin-top:var(--sp-2);line-height:1.6">Подсказка по наведению и фокусу. Только для иконок и сокращений.</p>
|
|
866
|
+
<div class="cta-row" style="margin-top:var(--sp-5)">
|
|
867
|
+
<span class="tip"><button class="icon-btn icon-btn--outline" type="button" aria-label="Обновить данные" data-tooltip="Обновить данные"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-refresh"/></svg></button></span>
|
|
868
|
+
<span class="tip"><button class="btn btn--ghost btn--sm" type="button" data-tooltip="Среднее время реакции за 30 дней"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-help"/></svg>Что это?</button></span>
|
|
869
|
+
</div>
|
|
870
|
+
<p class="demo-caption">Смысловая подсказка, а не дубль заголовка.</p>
|
|
871
|
+
</div>
|
|
872
|
+
</div>
|
|
873
|
+
</article>
|
|
874
|
+
|
|
875
|
+
<!-- Навигация -->
|
|
876
|
+
<article class="comp-section reveal" aria-labelledby="comp-nav">
|
|
877
|
+
<div class="spec-head">
|
|
878
|
+
<h2 id="comp-nav" class="display-s">Навигация</h2>
|
|
879
|
+
<p>Хлебные крошки, пагинация и сегментированный переключатель — на одних токенах.</p>
|
|
880
|
+
</div>
|
|
881
|
+
<div class="frame frame--tinted nav-demo">
|
|
882
|
+
<span class="frame__label">breadcrumbs · pager · segment</span>
|
|
883
|
+
<nav class="crumbs" aria-label="Хлебные крошки">
|
|
884
|
+
<a href="#components">Сервис-деск</a>
|
|
885
|
+
<span class="crumbs__sep" aria-hidden="true">/</span>
|
|
886
|
+
<a href="#components">Заявки</a>
|
|
887
|
+
<span class="crumbs__sep" aria-hidden="true">/</span>
|
|
888
|
+
<span aria-current="page">SD-1043</span>
|
|
889
|
+
</nav>
|
|
890
|
+
<div class="between" style="flex-wrap:wrap">
|
|
891
|
+
<nav class="pager" aria-label="Пагинация">
|
|
892
|
+
<button class="pager__btn" type="button" aria-label="Предыдущая страница" disabled><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-chevron-left"/></svg></button>
|
|
893
|
+
<button class="pager__btn" type="button" aria-current="page">1</button>
|
|
894
|
+
<button class="pager__btn" type="button">2</button>
|
|
895
|
+
<button class="pager__btn" type="button">3</button>
|
|
896
|
+
<span class="pager__gap">…</span>
|
|
897
|
+
<button class="pager__btn" type="button">18</button>
|
|
898
|
+
<button class="pager__btn" type="button" aria-label="Следующая страница"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-chevron-right"/></svg></button>
|
|
899
|
+
</nav>
|
|
900
|
+
<div class="segment" role="group" aria-label="Плотность таблицы">
|
|
901
|
+
<button class="segment__btn" type="button" aria-pressed="true">Плотно</button>
|
|
902
|
+
<button class="segment__btn" type="button" aria-pressed="false">Свободно</button>
|
|
903
|
+
</div>
|
|
904
|
+
</div>
|
|
905
|
+
</div>
|
|
906
|
+
</article>
|
|
907
|
+
|
|
908
|
+
<!-- Состояния данных -->
|
|
909
|
+
<article class="comp-section reveal" aria-labelledby="comp-states">
|
|
910
|
+
<div class="spec-head">
|
|
911
|
+
<h2 id="comp-states" class="display-s">Состояния данных</h2>
|
|
912
|
+
<p>Skeleton вместо спиннера, честное пустое состояние, прогресс и таймлайн.</p>
|
|
913
|
+
</div>
|
|
914
|
+
<div class="comp-grid">
|
|
915
|
+
<div class="frame">
|
|
916
|
+
<span class="frame__label">loading · skeleton</span>
|
|
917
|
+
<div class="list" aria-hidden="true">
|
|
918
|
+
<div class="list__item" style="align-items:center">
|
|
919
|
+
<span class="skeleton skeleton--circle" style="width:36px;height:36px"></span>
|
|
920
|
+
<div class="list__main" style="display:flex;flex-direction:column;gap:8px">
|
|
921
|
+
<span class="skeleton skeleton--text" style="--w:64%"></span>
|
|
922
|
+
<span class="skeleton skeleton--text" style="--w:42%"></span>
|
|
923
|
+
</div>
|
|
924
|
+
<span class="skeleton skeleton--text" style="--w:72px"></span>
|
|
925
|
+
</div>
|
|
926
|
+
<div class="list__item" style="align-items:center">
|
|
927
|
+
<span class="skeleton skeleton--circle" style="width:36px;height:36px"></span>
|
|
928
|
+
<div class="list__main" style="display:flex;flex-direction:column;gap:8px">
|
|
929
|
+
<span class="skeleton skeleton--text" style="--w:78%"></span>
|
|
930
|
+
<span class="skeleton skeleton--text" style="--w:36%"></span>
|
|
931
|
+
</div>
|
|
932
|
+
<span class="skeleton skeleton--text" style="--w:72px"></span>
|
|
933
|
+
</div>
|
|
934
|
+
<div class="list__item" style="align-items:center">
|
|
935
|
+
<span class="skeleton skeleton--circle" style="width:36px;height:36px"></span>
|
|
936
|
+
<div class="list__main" style="display:flex;flex-direction:column;gap:8px">
|
|
937
|
+
<span class="skeleton skeleton--text" style="--w:56%"></span>
|
|
938
|
+
<span class="skeleton skeleton--text" style="--w:48%"></span>
|
|
939
|
+
</div>
|
|
940
|
+
<span class="skeleton skeleton--text" style="--w:72px"></span>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
<p class="demo-caption">Скелетон повторяет форму контента — поэтому layout не «прыгает».</p>
|
|
944
|
+
</div>
|
|
945
|
+
|
|
946
|
+
<div class="comp-stack">
|
|
947
|
+
<div class="empty">
|
|
948
|
+
<span class="empty__icon"><svg class="icon icon--lg" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-inbox"/></svg></span>
|
|
949
|
+
<h3 class="empty__title">Заявок пока нет</h3>
|
|
950
|
+
<p class="empty__text">Когда поступит первая заявка, она появится здесь. Пока можно настроить SLA и уведомления.</p>
|
|
951
|
+
<div class="empty__actions">
|
|
952
|
+
<button class="btn btn--primary btn--sm" type="button">Создать заявку</button>
|
|
953
|
+
<a class="btn btn--ghost btn--sm" href="#components">Настроить SLA</a>
|
|
954
|
+
</div>
|
|
955
|
+
</div>
|
|
956
|
+
<div class="card card--pad">
|
|
957
|
+
<div style="display:flex;flex-direction:column;gap:var(--sp-4)">
|
|
958
|
+
<div>
|
|
959
|
+
<div class="progress-meta"><span>Использовано памяти</span><strong>68 %</strong></div>
|
|
960
|
+
<div class="progress" style="--progress:68%"><div class="progress__bar" style="width:68%"></div></div>
|
|
961
|
+
</div>
|
|
962
|
+
<div>
|
|
963
|
+
<div class="progress-meta"><span>SLA сегодня</span><strong>94 %</strong></div>
|
|
964
|
+
<div class="progress progress--success" style="--progress:94%"><div class="progress__bar" style="width:94%"></div></div>
|
|
965
|
+
</div>
|
|
966
|
+
<div>
|
|
967
|
+
<div class="progress-meta"><span>Заявки в очереди</span><strong>82 %</strong></div>
|
|
968
|
+
<div class="progress progress--warning" style="--progress:82%"><div class="progress__bar" style="width:82%"></div></div>
|
|
969
|
+
</div>
|
|
970
|
+
</div>
|
|
971
|
+
</div>
|
|
972
|
+
<div class="cluster">
|
|
973
|
+
<div class="avatar-stack">
|
|
974
|
+
<span class="avatar avatar--sm avatar--accent">МК</span>
|
|
975
|
+
<span class="avatar avatar--sm avatar--copper">АП</span>
|
|
976
|
+
<span class="avatar avatar--sm">ЕС</span>
|
|
977
|
+
<span class="avatar avatar--sm avatar--dark">ДБ</span>
|
|
978
|
+
</div>
|
|
979
|
+
<span class="muted" style="font-size:var(--text-xs)">4 исполнителя на смене</span>
|
|
980
|
+
</div>
|
|
981
|
+
</div>
|
|
982
|
+
</div>
|
|
983
|
+
|
|
984
|
+
<div class="frame" style="margin-top:var(--sp-5)">
|
|
985
|
+
<span class="frame__label">timeline · активность</span>
|
|
986
|
+
<div class="timeline">
|
|
987
|
+
<div class="timeline__item">
|
|
988
|
+
<span class="timeline__dot timeline__dot--accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-check"/></svg></span>
|
|
989
|
+
<div class="timeline__body">
|
|
990
|
+
<p class="timeline__title">Марина Ковалёва закрыла SD-1038 «Продление лицензии»</p>
|
|
991
|
+
<p class="timeline__time">12 минут назад · SLA соблюдён</p>
|
|
992
|
+
<p class="timeline__text">Исполнитель оставил комментарий: «Лицензия продлена до 12.11.2027, ключ отправлен на рабочую почту».</p>
|
|
993
|
+
</div>
|
|
994
|
+
</div>
|
|
995
|
+
<div class="timeline__item">
|
|
996
|
+
<span class="timeline__dot timeline__dot--done"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-ticket"/></svg></span>
|
|
997
|
+
<div class="timeline__body">
|
|
998
|
+
<p class="timeline__title">Новая заявка из портала: SD-1043</p>
|
|
999
|
+
<p class="timeline__time">сегодня, 09:14 · канал «Портал пациента»</p>
|
|
1000
|
+
<p class="timeline__text">«Нет доступа к корпоративной почте после смены пароля».</p>
|
|
1001
|
+
</div>
|
|
1002
|
+
</div>
|
|
1003
|
+
<div class="timeline__item">
|
|
1004
|
+
<span class="timeline__dot"></span>
|
|
1005
|
+
<div class="timeline__body">
|
|
1006
|
+
<p class="timeline__title">Система назначила исполнителя</p>
|
|
1007
|
+
<p class="timeline__time">сегодня, 09:21 · правило маршрутизации №4</p>
|
|
1008
|
+
</div>
|
|
1009
|
+
</div>
|
|
1010
|
+
</div>
|
|
1011
|
+
</div>
|
|
1012
|
+
</article>
|
|
1013
|
+
|
|
1014
|
+
<!-- KPI -->
|
|
1015
|
+
<article class="comp-section reveal" aria-labelledby="comp-kpi">
|
|
1016
|
+
<div class="spec-head">
|
|
1017
|
+
<h2 id="comp-kpi" class="display-s">KPI и графики</h2>
|
|
1018
|
+
<p>Цифра — крупно, дельта — рядом, sparkline — тихо. Данные прежде декора.</p>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div class="kpi-demo">
|
|
1021
|
+
<article class="kpi">
|
|
1022
|
+
<div class="kpi__head">
|
|
1023
|
+
<span class="kpi__label">Открытые заявки</span>
|
|
1024
|
+
<span class="kpi__icon"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-ticket"/></svg></span>
|
|
1025
|
+
</div>
|
|
1026
|
+
<span class="kpi__value">128</span>
|
|
1027
|
+
<div class="kpi__foot">
|
|
1028
|
+
<span class="kpi__delta kpi__delta--up"><svg class="icon icon--xs" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-trend-up"/></svg> 12 <span class="kpi__delta-note">за неделю</span></span>
|
|
1029
|
+
<svg class="kpi__spark" viewBox="0 0 96 34" preserveAspectRatio="none" aria-hidden="true">
|
|
1030
|
+
<path class="spark__area" d="M0 26 L12 24 L24 27 L36 20 L48 22 L60 15 L72 18 L84 10 L96 12 L96 34 L0 34 Z"/>
|
|
1031
|
+
<path class="spark__line" d="M0 26 L12 24 L24 27 L36 20 L48 22 L60 15 L72 18 L84 10 L96 12"/>
|
|
1032
|
+
<circle class="spark__dot" cx="96" cy="12" r="2.4"/>
|
|
1033
|
+
</svg>
|
|
1034
|
+
</div>
|
|
1035
|
+
</article>
|
|
1036
|
+
<article class="kpi">
|
|
1037
|
+
<div class="kpi__head">
|
|
1038
|
+
<span class="kpi__label">Средняя реакция</span>
|
|
1039
|
+
<span class="kpi__icon"><svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-clock"/></svg></span>
|
|
1040
|
+
</div>
|
|
1041
|
+
<span class="kpi__value">14<span class="kpi__unit">мин</span></span>
|
|
1042
|
+
<div class="kpi__foot">
|
|
1043
|
+
<span class="kpi__delta kpi__delta--down"><svg class="icon icon--xs" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-trend-down"/></svg> 3 мин <span class="kpi__delta-note">быстрее</span></span>
|
|
1044
|
+
<svg class="kpi__spark spark--copper" viewBox="0 0 96 34" preserveAspectRatio="none" aria-hidden="true">
|
|
1045
|
+
<path class="spark__area spark__area" d="M0 10 L12 14 L24 11 L36 18 L48 15 L60 21 L72 19 L84 24 L96 22 L96 34 L0 34 Z"/>
|
|
1046
|
+
<path class="spark__line" d="M0 10 L12 14 L24 11 L36 18 L48 15 L60 21 L72 19 L84 24 L96 22"/>
|
|
1047
|
+
<circle class="spark__dot" cx="96" cy="22" r="2.4"/>
|
|
1048
|
+
</svg>
|
|
1049
|
+
</div>
|
|
1050
|
+
</article>
|
|
1051
|
+
</div>
|
|
1052
|
+
<div class="frame" style="margin-top:var(--sp-4)">
|
|
1053
|
+
<span class="frame__label">sparkline · 30 дней</span>
|
|
1054
|
+
<div class="spark-chart"><div class="spark-chart__axis" aria-hidden="true"><span>60</span><span>45</span><span>30</span></div><svg class="spark-wide" viewBox="0 0 600 120" preserveAspectRatio="none" role="img" aria-label="Обращения в день за 30 дней: рост с 32 до 61"><g class="chart__grid" aria-hidden="true"><line x1="0" y1="20" x2="600" y2="20"/><line x1="0" y1="60" x2="600" y2="60"/><line x1="0" y1="100" x2="600" y2="100"/></g><path class="spark__area" d="M0 92 L30 88 L60 90 L90 80 L120 83 L150 72 L180 76 L210 64 L240 68 L270 58 L300 62 L330 52 L360 55 L390 44 L420 48 L450 38 L480 42 L510 34 L540 37 L570 28 L600 30 L600 120 L0 120 Z"/><path class="spark__line" d="M0 92 L30 88 L60 90 L90 80 L120 83 L150 72 L180 76 L210 64 L240 68 L270 58 L300 62 L330 52 L360 55 L390 44 L420 48 L450 38 L480 42 L510 34 L540 37 L570 28 L600 30"/><circle class="spark__dot" cx="600" cy="30" r="2.6"/></svg></div>
|
|
1055
|
+
<div class="between" style="margin-top:var(--sp-2);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--muted)"><span>01.10</span><span>15.10</span><span>30.10</span></div>
|
|
1056
|
+
</div>
|
|
1057
|
+
</article>
|
|
1058
|
+
|
|
1059
|
+
<!-- Паттерны -->
|
|
1060
|
+
<article class="comp-section reveal" id="patterns" aria-labelledby="comp-patterns">
|
|
1061
|
+
<div class="spec-head">
|
|
1062
|
+
<span class="spec-num">05</span>
|
|
1063
|
+
<h2 id="comp-patterns" class="display-s">Паттерны</h2>
|
|
1064
|
+
<p>Готовые композиции для эталонных страниц.</p>
|
|
1065
|
+
</div>
|
|
1066
|
+
<div class="pattern-hero">
|
|
1067
|
+
<div class="pattern-hero__inner">
|
|
1068
|
+
<div>
|
|
1069
|
+
<p class="eyebrow">Паттерн · hero 7/5</p>
|
|
1070
|
+
<p class="pattern-hero__title">Сложные диагнозы —<br>понятные решения.</p>
|
|
1071
|
+
<p class="lead" style="margin-top:var(--sp-4);font-size:var(--text-md)">34 отделения, 1 200 коек и команда, которая идёт рядом — от первого приёма до выписки.</p>
|
|
1072
|
+
<div class="hero__actions" style="margin-top:var(--sp-5)">
|
|
1073
|
+
<a class="btn btn--primary" href="pages/hospital.html">Записаться на приём</a>
|
|
1074
|
+
<a class="btn btn--ghost" href="pages/hospital.html">Все направления<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-arrow-right"/></svg></a>
|
|
1075
|
+
</div>
|
|
1076
|
+
</div>
|
|
1077
|
+
<div class="pattern-hero__side">
|
|
1078
|
+
<div class="proof" style="margin:0;padding:0;border:0">
|
|
1079
|
+
<div class="proof__item"><span class="proof__value">1 200</span><span class="proof__label">коек</span></div>
|
|
1080
|
+
<div class="proof__item"><span class="proof__value">34</span><span class="proof__label">отделения</span></div>
|
|
1081
|
+
<div class="proof__item"><span class="proof__value">24/7</span><span class="proof__label">приёмное отделение</span></div>
|
|
1082
|
+
</div>
|
|
1083
|
+
</div>
|
|
1084
|
+
</div>
|
|
1085
|
+
</div>
|
|
1086
|
+
<div class="editorial-list" style="margin-top:var(--sp-6)">
|
|
1087
|
+
<a class="editorial-list__row" href="pages/hospital.html">
|
|
1088
|
+
<span class="editorial-list__num">01</span>
|
|
1089
|
+
<span class="editorial-list__title">Кардиология</span>
|
|
1090
|
+
<span class="editorial-list__note">ангиография · кардиохирургия</span>
|
|
1091
|
+
</a>
|
|
1092
|
+
<a class="editorial-list__row" href="pages/hospital.html">
|
|
1093
|
+
<span class="editorial-list__num">02</span>
|
|
1094
|
+
<span class="editorial-list__title">Онкология</span>
|
|
1095
|
+
<span class="editorial-list__note">хирургия · химиотерапия</span>
|
|
1096
|
+
</a>
|
|
1097
|
+
<a class="editorial-list__row" href="pages/hospital.html">
|
|
1098
|
+
<span class="editorial-list__num">03</span>
|
|
1099
|
+
<span class="editorial-list__title">Нейрохирургия</span>
|
|
1100
|
+
<span class="editorial-list__note">МРТ 3 Тл · ангиограф</span>
|
|
1101
|
+
</a>
|
|
1102
|
+
</div>
|
|
1103
|
+
</article>
|
|
1104
|
+
</section>
|
|
1105
|
+
</main>
|
|
1106
|
+
|
|
1107
|
+
<!-- Модалка демо -->
|
|
1108
|
+
<div class="modal" id="demo-modal" role="dialog" aria-modal="true" aria-labelledby="demo-modal-title" aria-describedby="demo-modal-text" aria-hidden="true">
|
|
1109
|
+
<div class="modal__backdrop" data-modal-close="true"></div>
|
|
1110
|
+
<div class="modal__dialog">
|
|
1111
|
+
<div class="modal__head">
|
|
1112
|
+
<div>
|
|
1113
|
+
<h2 class="modal__title" id="demo-modal-title">Удалить заявку SD-1043?</h2>
|
|
1114
|
+
<p class="modal__sub">Действие нельзя отменить</p>
|
|
1115
|
+
</div>
|
|
1116
|
+
<button class="icon-btn" type="button" data-modal-close="true" aria-label="Закрыть окно">
|
|
1117
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-x"/></svg>
|
|
1118
|
+
</button>
|
|
1119
|
+
</div>
|
|
1120
|
+
<div class="modal__body" id="demo-modal-text">
|
|
1121
|
+
<p>Заявка «Нет доступа к корпоративной почте» и вся история переписки будут удалены. Исполнитель Марина Ковалёва получит уведомление.</p>
|
|
1122
|
+
<p class="muted" style="font-size:var(--text-xs)">Фокус удерживается внутри окна, Escape закрывает, после закрытия фокус возвращается на кнопку.</p>
|
|
1123
|
+
</div>
|
|
1124
|
+
<div class="modal__foot modal__foot--split">
|
|
1125
|
+
<span class="modal__note">SD-1043 · 12.11.2026</span>
|
|
1126
|
+
<div class="cluster cluster--tight">
|
|
1127
|
+
<button class="btn btn--ghost" type="button" data-modal-close="true">Отмена</button>
|
|
1128
|
+
<button class="btn btn--danger" type="button" data-modal-close="true" data-demo-toast="danger" data-demo-toast-title="Демонстрация" data-demo-toast-text="Заявка удалена — но только в этом демо.">Удалить заявку</button>
|
|
1129
|
+
</div>
|
|
1130
|
+
</div>
|
|
1131
|
+
</div>
|
|
1132
|
+
</div>
|
|
1133
|
+
|
|
1134
|
+
<footer class="show-footer">
|
|
1135
|
+
<div class="container-wide">
|
|
1136
|
+
<div class="show-footer__grid">
|
|
1137
|
+
<div>
|
|
1138
|
+
<p class="show-footer__title">Aurora <span class="muted" style="font-size:var(--text-sm)">· дизайн-система DSH</span></p>
|
|
1139
|
+
<p class="show-footer__text">Токены, компоненты и эталонные страницы для портативного пакета. Локальные шрифты, никаких CDN и внешних запросов.</p>
|
|
1140
|
+
</div>
|
|
1141
|
+
<div class="show-footer__col">
|
|
1142
|
+
<b>Страницы</b>
|
|
1143
|
+
<a href="showcase.html" aria-current="page">Витрина</a>
|
|
1144
|
+
<a href="pages/hospital.html">Клиника · aurora</a>
|
|
1145
|
+
<a href="pages/dashboard.html">Дашборд · graphite</a>
|
|
1146
|
+
</div>
|
|
1147
|
+
<div class="show-footer__col">
|
|
1148
|
+
<b>Основа</b>
|
|
1149
|
+
<a href="assets/css/tokens.css">tokens.css</a>
|
|
1150
|
+
<a href="assets/css/components.css">components.css</a>
|
|
1151
|
+
<a href="assets/css/pages.css">pages.css</a>
|
|
1152
|
+
<a href="README.md">README · как переиспользовать</a>
|
|
1153
|
+
</div>
|
|
1154
|
+
</div>
|
|
1155
|
+
<div class="show-footer__bottom">
|
|
1156
|
+
<span>Aurora v1.0 · <span data-year>2026</span> · Golos Text, Lora, Unbounded (OFL)</span>
|
|
1157
|
+
<span>5 пресетов · 2 темы · WCAG AA</span>
|
|
1158
|
+
</div>
|
|
1159
|
+
</div>
|
|
1160
|
+
</footer>
|
|
1161
|
+
|
|
1162
|
+
<script src="assets/js/kit.js" defer></script>
|
|
1163
|
+
</body>
|
|
1164
|
+
</html>
|