chore: удалена пустая секция section--surface после контактов
Убран инклюд {{> footer-spacer}} (пустая <section class="section section--surface"
aria-hidden> как прокладка перед футером) на главной и во всех 16 кейсах.
Пересобраны страницы (build:pages).
This commit is contained in:
1 parent
8f62dec556
commit
16dafcbf01
36 files changed
+11602
-11687
No files matched your search
@@ -8,101 +8,101 @@
|
||||
content="Кейс: AI assistant — плагин для Figma с AI-функциями."
|
||||
/>
|
||||
<title>AI assistant — Плагин для Figma — кейс</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
|
||||
<style>
|
||||
.case-article {
|
||||
@@ -176,101 +176,101 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="ai-assistant">
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
@@ -357,44 +357,40 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner"></div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -8,101 +8,101 @@
|
||||
content="Кейс: редизайн Primo RPA AI Server — снижение порога входа для клиентов без команды внедрения."
|
||||
/>
|
||||
<title>AI Server в Primo RPA — кейс</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
|
||||
<style>
|
||||
.case-article {
|
||||
@@ -211,101 +211,101 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
@@ -897,288 +897,284 @@
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
<section hidden class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner">
|
||||
<div class="projects__heading">
|
||||
<h2 class="section__title projects__title">Портфолио</h2>
|
||||
<div class="projects__controls" aria-label="Навигация по карточкам портфолио">
|
||||
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
|
||||
<span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
|
||||
<span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects-carousel">
|
||||
<div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
|
||||
<div class="projects-carousel__track">
|
||||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../orc-automation-panel/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
|
||||
продакшен без остановки релизов.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/orc-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../ai-platform-primo-rpa/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Платформа для работы с AI</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
|
||||
автоматизации и Smart OCR.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/ai-platform-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../task-tracker/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
|
||||
исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&Drop.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">Product Design</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/task-tracker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../manu-game-maker/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Игровой движок MANU</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
|
||||
проработка сотен сложных пользовательских сценариев.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">Product Design</li>
|
||||
<li class="portfolio-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/manu-game-maker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../lunacy/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
|
||||
интерфейсной логики.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/lunacy/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../mobile-clinic-app/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
|
||||
пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Mobile App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/mobile-clinic-app/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../task-distribution-concept/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
|
||||
процессов и удобство командной работы.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/task-distribution-concept/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../obsidian-plugin-columns-view/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
|
||||
колончатого отображения прямо в редакторе Obsidian.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Plugin</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/obsidian-plugin-columns-view/filter use.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
|
||||
data-projects-edge-prev
|
||||
aria-label="Прокрутить портфолио влево"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
|
||||
data-projects-edge-next
|
||||
aria-label="Прокрутить портфолио вправо"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section hidden class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner">
|
||||
<div class="projects__heading">
|
||||
<h2 class="section__title projects__title">Портфолио</h2>
|
||||
<div class="projects__controls" aria-label="Навигация по карточкам портфолио">
|
||||
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
|
||||
<span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
|
||||
<span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects-carousel">
|
||||
<div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
|
||||
<div class="projects-carousel__track">
|
||||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../orc-automation-panel/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
|
||||
продакшен без остановки релизов.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/orc-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../ai-platform-primo-rpa/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Платформа для работы с AI</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
|
||||
автоматизации и Smart OCR.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/ai-platform-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../task-tracker/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
|
||||
исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&Drop.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">Product Design</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/task-tracker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../manu-game-maker/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Игровой движок MANU</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
|
||||
проработка сотен сложных пользовательских сценариев.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">Product Design</li>
|
||||
<li class="portfolio-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/manu-game-maker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../lunacy/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
|
||||
интерфейсной логики.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/lunacy/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../mobile-clinic-app/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
|
||||
пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Mobile App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/mobile-clinic-app/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../task-distribution-concept/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
|
||||
процессов и удобство командной работы.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/task-distribution-concept/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../obsidian-plugin-columns-view/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
|
||||
колончатого отображения прямо в редакторе Obsidian.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Plugin</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/obsidian-plugin-columns-view/filter use.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
|
||||
data-projects-edge-prev
|
||||
aria-label="Прокрутить портфолио влево"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
|
||||
data-projects-edge-next
|
||||
aria-label="Прокрутить портфолио вправо"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner"></div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large.
Load diff
@@ -8,101 +8,101 @@
|
||||
content="Кейс: Card Columns — плагин для колоночного отображения карточек в Obsidian."
|
||||
/>
|
||||
<title>Card Columns — Плагин для Obsidian — кейс</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
|
||||
<style>
|
||||
.case-article {
|
||||
@@ -176,101 +176,101 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="card-columns">
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
@@ -357,44 +357,40 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner"></div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
|
||||
+1089
-1093
File diff suppressed because it is too large.
Load diff
+843
-847
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
@@ -8,101 +8,101 @@
|
||||
content="Кейс: плагин колоночного вида для Obsidian — дизайн и UX плагина для заметок."
|
||||
/>
|
||||
<title>Колоночный вид для Obsidian — кейс</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
|
||||
<style>
|
||||
.case-article {
|
||||
@@ -176,101 +176,101 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
@@ -495,288 +495,284 @@
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
<section hidden class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner">
|
||||
<div class="projects__heading">
|
||||
<h2 class="section__title projects__title">Портфолио</h2>
|
||||
<div class="projects__controls" aria-label="Навигация по карточкам портфолио">
|
||||
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
|
||||
<span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
|
||||
<span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects-carousel">
|
||||
<div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
|
||||
<div class="projects-carousel__track">
|
||||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../orc-automation-panel/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
|
||||
продакшен без остановки релизов.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/orc-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../ai-platform-primo-rpa/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Платформа для работы с AI</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
|
||||
автоматизации и Smart OCR.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/ai-platform-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../task-tracker/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
|
||||
исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&Drop.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">Product Design</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/task-tracker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../manu-game-maker/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Игровой движок MANU</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
|
||||
проработка сотен сложных пользовательских сценариев.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">Product Design</li>
|
||||
<li class="portfolio-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/manu-game-maker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../lunacy/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
|
||||
интерфейсной логики.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/lunacy/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../mobile-clinic-app/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
|
||||
пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Mobile App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/mobile-clinic-app/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../task-distribution-concept/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
|
||||
процессов и удобство командной работы.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/task-distribution-concept/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../obsidian-plugin-columns-view/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
|
||||
колончатого отображения прямо в редакторе Obsidian.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Plugin</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/obsidian-plugin-columns-view/filter use.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
|
||||
data-projects-edge-prev
|
||||
aria-label="Прокрутить портфолио влево"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
|
||||
data-projects-edge-next
|
||||
aria-label="Прокрутить портфолио вправо"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section hidden class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner">
|
||||
<div class="projects__heading">
|
||||
<h2 class="section__title projects__title">Портфолио</h2>
|
||||
<div class="projects__controls" aria-label="Навигация по карточкам портфолио">
|
||||
<button type="button" class="projects__nav-btn" data-projects-prev aria-label="Прокрутить влево" aria-controls="projects-viewport">
|
||||
<span class="projects__nav-ico projects__nav-ico--left" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="button" class="projects__nav-btn" data-projects-next aria-label="Прокрутить вправо" aria-controls="projects-viewport">
|
||||
<span class="projects__nav-ico projects__nav-ico--right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects-carousel">
|
||||
<div id="projects-viewport" class="projects-carousel__viewport" data-projects-viewport>
|
||||
<div class="projects-carousel__track">
|
||||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../orc-automation-panel/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Веб-панель для оркестрации автоматизаций</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под
|
||||
продакшен без остановки релизов.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/orc-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../ai-platform-primo-rpa/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Платформа для работы с AI</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями
|
||||
автоматизации и Smart OCR.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/ai-platform-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../task-tracker/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Таск-трекер для бек-офис системы</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по
|
||||
исполнителям; вкладки, фильтры, виды доска / список / таблица, Drag&Drop.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">Product Design</li>
|
||||
<li class="portfolio-card__tag">Web App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/task-tracker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../manu-game-maker/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Игровой движок MANU</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и
|
||||
проработка сотен сложных пользовательских сценариев.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">Product Design</li>
|
||||
<li class="portfolio-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/manu-game-maker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../lunacy/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Графический редактор Lunacy</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и
|
||||
интерфейсной логики.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/lunacy/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../mobile-clinic-app/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Мобильное приложение для сети клиник</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом
|
||||
пользовательском пути, понятной навигации и быстром доступе к нужным действиям.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Mobile App</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/mobile-clinic-app/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../task-distribution-concept/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Концепт сервиса распределения задач</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность
|
||||
процессов и удобство командной работы.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/task-distribution-concept/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="projects-carousel__item">
|
||||
<a class="portfolio-card" href="../obsidian-plugin-columns-view/">
|
||||
<div class="portfolio-card__body">
|
||||
<h3 class="portfolio-card__title">Колоночный вид — плагин для Obsidian</h3>
|
||||
<p class="portfolio-card__summary">
|
||||
Интерфейс для многоколоночной работы с заметками: удобная навигация, фильтрация и настройка
|
||||
колончатого отображения прямо в редакторе Obsidian.
|
||||
</p>
|
||||
<ul class="portfolio-card__tags" aria-label="Ключевые теги">
|
||||
<li class="portfolio-card__tag">UX/UI</li>
|
||||
<li class="portfolio-card__tag">Plugin</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="portfolio-card__cover" aria-hidden="true">
|
||||
<img
|
||||
class="portfolio-card__image"
|
||||
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
|
||||
data-defer-src="../../assets/obsidian-plugin-columns-view/filter use.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<div class="projects-carousel__spacer" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="projects-carousel__edge-hit projects-carousel__edge-hit--left"
|
||||
data-projects-edge-prev
|
||||
aria-label="Прокрутить портфолио влево"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
class="projects-carousel__edge-hit projects-carousel__edge-hit--right"
|
||||
data-projects-edge-next
|
||||
aria-label="Прокрутить портфолио вправо"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner"></div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -8,101 +8,101 @@
|
||||
content="Кейс: Этот сайт — разработка с использованием AI IDE."
|
||||
/>
|
||||
<title>Этот сайт — Разработка с AI IDE — кейс</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../../assets/fonts/merriweather.css",
|
||||
geologica: "../../assets/fonts/geologica.css",
|
||||
mono: "../../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../../css/main.css" as="style" />
|
||||
<link rel="preload" href="../../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../../js/main.js" />
|
||||
<link rel="stylesheet" href="../../css/main.css" />
|
||||
<script src="../../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../../js/main.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
<link rel="stylesheet" href="../../vendor/plyr/plyr.css" />
|
||||
|
||||
<style>
|
||||
.case-article {
|
||||
@@ -176,101 +176,101 @@
|
||||
</script>
|
||||
</head>
|
||||
<body data-current-case="site-with-ai-ide">
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
<a class="skip-link" href="#case-main">К содержимому кейса</a>
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация по странице">
|
||||
<a href="#contact">Контакты</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="case-main" class="section section--tight">
|
||||
<div class="section__inner case-article">
|
||||
@@ -357,44 +357,40 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact" class="section section--surface section--footerish" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Контакты</h2>
|
||||
<ul class="contact-grid">
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-tg" href="https://t.me/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/tg.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Telegram</span><span class="contact-card__hint">Отвечу сегодня</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-vk" href="https://vk.com/mamadaevv" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/vk.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">ВКонтакте</span><span class="contact-card__hint">Стабильный коннект</span></span></a></li>
|
||||
<li><a class="contact-card contact-card--link contact-card--brand-ya" href="https://yandex.ru/chat/p/727e71fa-89b5-44a8-90a5-851021631a1c?utm_source=invite" rel="noopener noreferrer"><span class="contact-card__corner" aria-hidden="true"></span><span class="contact-card__icon" aria-hidden="true"><img src="../../assets/shared/icons/yandex_telemost.svg" alt="" width="24" height="24" loading="eager" decoding="async" /></span><span class="contact-card__body"><span class="contact-card__name">Яндекс</span><span class="contact-card__hint">Да, тут тоже можно</span></span></a></li>
|
||||
<li><button type="button" class="contact-card contact-card--action contact-card--brand-email" data-contact-copy data-email-b64="bmlrQG1hbWFkYWV2di5zaXRl" data-hint-default="Скопировать адрес" aria-label="Скопировать адрес электронной почты в буфер обмена"><span class="contact-card__corner contact-card__corner--copy" aria-hidden="true"></span><span class="contact-card__icon contact-card__icon--accent" aria-hidden="true"></span><span class="contact-card__body"><span class="contact-card__name">Почта</span><span class="contact-card__hint" data-contact-copy-hint>Скопировать адрес</span></span></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner"></div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
<div id="nav-more-menu-floating" class="nav-more__floating" hidden data-nav-more-menu-floating aria-hidden="true"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
+1016
-1020
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+344
-344
@@ -1,344 +1,344 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" data-theme="dark" data-radius="medium">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Как на сайте-портфолио Николая Мамадаева используются cookie, localStorage и связанные технологии браузера."
|
||||
/>
|
||||
<title>Политика cookie — Николай Мамадаев</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../assets/fonts/merriweather.css",
|
||||
geologica: "../assets/fonts/geologica.css",
|
||||
mono: "../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../css/main.css" as="style" />
|
||||
<link rel="preload" href="../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../js/main.js" />
|
||||
<link rel="stylesheet" href="../css/main.css" />
|
||||
<script src="../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../js/main.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
.cookie-policy-doc {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cookie-policy-doc h2 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.cookie-policy-doc .section__prose + .section__prose {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.cookie-policy-doc table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0.75rem 0 1rem;
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.cookie-policy-doc th,
|
||||
.cookie-policy-doc td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.5rem 0.65rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.cookie-policy-doc th {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
|
||||
}
|
||||
.cookie-policy-doc code {
|
||||
font-family: var(--font);
|
||||
font-size: 0.88em;
|
||||
color: var(--text);
|
||||
}
|
||||
.cookie-policy-doc .section__prose a {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация">
|
||||
<a href="../index.html">На главную</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="../index.html#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="main" class="section section--tight">
|
||||
<div class="section__inner cookie-policy-doc">
|
||||
<p class="hero__eyebrow">Юридическая информация</p>
|
||||
<h1 class="case-page__h1">Политика использования файлов cookie и локального хранилища</h1>
|
||||
<p class="section__prose"><strong>Дата последнего обновления:</strong> 9 мая 2026 г.</p>
|
||||
<p class="section__prose">
|
||||
Настоящий документ описывает, как на личном сайте-портфолио Николая Мамадаева (далее — «сайт») используются технологии хранения данных в браузере.
|
||||
</p>
|
||||
|
||||
<h2 id="operator">Кто отвечает за сайт</h2>
|
||||
<p class="section__prose">
|
||||
Оператором сайта является <strong>Николай Мамадаев</strong>. По вопросам обработки данных используйте контакты в блоке «Контакты» на
|
||||
<a href="../index.html#contact">главной странице</a>
|
||||
(Telegram, ВКонтакте, Яндекс и почта через копирование адреса кнопкой).
|
||||
</p>
|
||||
|
||||
<h2 id="http-cookie">Используются ли HTTP cookie</h2>
|
||||
<p class="section__prose">
|
||||
В текущей версии сайта <strong>сторонние рекламные или аналитические HTTP cookie не подключаются</strong>. В разметке страниц нет счётчиков аналитики (например, Яндекс.Метрики или Google Analytics), которые обычно устанавливают собственные cookie.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
При размещении сайта на хостинге или за прокси технические записи (например, журналы сервера с IP-адресом и временем запроса) могут обрабатываться хостинг-провайдером по его документам — это не настраивается кодом данного сайта.
|
||||
</p>
|
||||
|
||||
<h2 id="local-storage">Local Storage и аналогичные технологии браузера</h2>
|
||||
<p class="section__prose">
|
||||
Для удобства работы сайт сохраняет на вашем устройстве небольшие объёмы данных через <strong>механизм localStorage</strong> в браузере (это не HTTP cookie, но по смыслу близко к ним и также относится к хранению на стороне клиента).
|
||||
</p>
|
||||
<p class="section__prose">Используются следующие ключи:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Ключ</th>
|
||||
<th scope="col">Назначение</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>siteThemeV1</code></td>
|
||||
<td>
|
||||
Настройки оформления: тема (светлая/тёмная/системная), оттенок, скругления, шрифт, фон и связанные параметры панели темы.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>siteCookieConsentV1</code></td>
|
||||
<td>Значение <code>accepted</code>, если вы нажали «Принять» в уведомлении о cookie; после этого баннер скрывается.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="section__prose">
|
||||
Эти данные <strong>не передаются на сервер сайта</strong> автоматически: они остаются только в вашем браузере.
|
||||
</p>
|
||||
|
||||
<h2 id="retention">Срок хранения</h2>
|
||||
<p class="section__prose">
|
||||
Данные в localStorage сохраняются до тех пор, пока вы <strong>не удалите их вручную</strong> (очистка данных сайта / полное удаление данных браузера) или пока браузер не сбросит хранилище по своим правилам.
|
||||
</p>
|
||||
|
||||
<h2 id="consent">Согласие и отказ</h2>
|
||||
<p class="section__prose">
|
||||
Нажимая «Принять» в баннере, вы подтверждаете, что ознакомились с настоящей политикой. Если вы не нажимаете «Принять», баннер остаётся доступным; функциональность сайта при этом по возможности сохраняется, но запись о согласии не создаётся.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Вы можете в любой момент <strong>очистить localStorage</strong> для этого сайта в настройках браузера — при этом сбросятся сохранённые тема и отметка о принятии уведомления, и баннер может снова отобразиться.
|
||||
</p>
|
||||
|
||||
<h2 id="changes">Изменения</h2>
|
||||
<p class="section__prose">
|
||||
Текст политики может обновляться при изменении технологий на сайте. Актуальная версия публикуется на странице «Политика cookie» по адресу <a href="../cookie-policy/">/cookie-policy.html</a> относительно корня сайта.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" data-theme="dark" data-radius="medium">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Как на сайте-портфолио Николая Мамадаева используются cookie, localStorage и связанные технологии браузера."
|
||||
/>
|
||||
<title>Политика cookie — Николай Мамадаев</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../assets/fonts/merriweather.css",
|
||||
geologica: "../assets/fonts/geologica.css",
|
||||
mono: "../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../css/main.css" as="style" />
|
||||
<link rel="preload" href="../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../js/main.js" />
|
||||
<link rel="stylesheet" href="../css/main.css" />
|
||||
<script src="../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../js/main.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
.cookie-policy-doc {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cookie-policy-doc h2 {
|
||||
margin: 2rem 0 0.75rem;
|
||||
font-size: clamp(1.15rem, 2vw, 1.35rem);
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
.cookie-policy-doc .section__prose + .section__prose {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.cookie-policy-doc table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0.75rem 0 1rem;
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.cookie-policy-doc th,
|
||||
.cookie-policy-doc td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.5rem 0.65rem;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
.cookie-policy-doc th {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
|
||||
}
|
||||
.cookie-policy-doc code {
|
||||
font-family: var(--font);
|
||||
font-size: 0.88em;
|
||||
color: var(--text);
|
||||
}
|
||||
.cookie-policy-doc .section__prose a {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация">
|
||||
<a href="../index.html">На главную</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
<button type="button" class="fab fab--secondary glass-neutral" data-theme-panel-btn aria-expanded="false" aria-controls="theme-panel" aria-label="Настройки стиля">
|
||||
<span class="theme-panel-fab__icon theme-panel-fab__icon--open-hide" aria-hidden="true"></span>
|
||||
<svg class="theme-panel-fab__icon theme-panel-fab__icon--close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="theme-panel" class="theme-picker__panel glass-neutral" role="dialog" aria-label="Тема и оформление" hidden data-theme-panel>
|
||||
<div class="theme-picker__stack">
|
||||
<section class="theme-picker__section" aria-labelledby="theme-accent-title">
|
||||
<h3 id="theme-accent-title" class="theme-picker__section-title">Акцентный цвет</h3>
|
||||
<div class="colorpicker" data-colorpicker>
|
||||
<div class="colorpicker__plane-box">
|
||||
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Насыщенность и светлость акцента"></canvas>
|
||||
<div class="colorpicker__knob" data-sl-knob></div>
|
||||
</div>
|
||||
<div class="colorpicker__hue-wrap">
|
||||
<label class="colorpicker__hue-sr" for="theme-hue-slider">Оттенок акцента</label>
|
||||
<input id="theme-hue-slider" class="colorpicker__hue" type="range" min="0" max="360" value="210" data-hue-slider aria-valuemin="0" aria-valuemax="360" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mode-title">
|
||||
<h3 id="theme-mode-title" class="theme-picker__section-title">Тема</h3>
|
||||
<div class="radius-seg theme-mode-seg" role="radiogroup" aria-labelledby="theme-mode-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="system" aria-label="Как в системе"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--system"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="light" aria-label="Светлая тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--light"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-theme-mode="dark" aria-label="Тёмная тема"><span class="radius-seg__viz" aria-hidden="true"><span class="theme-mode-seg__ico theme-mode-seg__ico--dark"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-radius-title">
|
||||
<h3 id="theme-radius-title" class="theme-picker__section-title">Скругление углов</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-radius-title">
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="soft" aria-label="Слабое скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--soft"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="medium" aria-label="Среднее скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--medium"></span></span></button>
|
||||
<button type="button" class="radius-seg__btn" role="radio" aria-checked="false" data-radius-option="strong" aria-label="Сильное скругление"><span class="radius-seg__viz" aria-hidden="true"><span class="radius-seg__arc radius-seg__arc--strong"></span></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-typography-title">
|
||||
<h3 id="theme-typography-title" class="theme-picker__section-title">Типографика</h3>
|
||||
<div class="radius-seg" role="radiogroup" aria-labelledby="theme-typography-title">
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="geologica" aria-label="Sans"><span class="theme-font-seg__label">Sans</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="merriweather" aria-label="Sans Serif"><span class="theme-font-seg__label">Sans Serif</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-font-seg__btn" role="radio" aria-checked="false" data-font-option="mono" aria-label="Mono"><span class="theme-font-seg__label">Mono</span></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="theme-picker__section" aria-labelledby="theme-mesh-bg-title">
|
||||
<h3 id="theme-mesh-bg-title" class="theme-picker__section-title">Фон страницы</h3>
|
||||
<div class="radius-seg radius-seg--two" role="radiogroup" aria-labelledby="theme-mesh-bg-title">
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="on" aria-label="Показать фоновый градиент"><span class="theme-mesh-bg-seg__label">Вкл</span></button>
|
||||
<button type="button" class="radius-seg__btn theme-mesh-bg-seg__btn" role="radio" aria-checked="false" data-mesh-bg-option="off" aria-label="Скрыть фоновый градиент"><span class="theme-mesh-bg-seg__label">Выкл</span></button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="fab fab--primary" href="../index.html#contact" aria-label="Связаться">
|
||||
<span class="fab-primary__ico" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="main" class="section section--tight">
|
||||
<div class="section__inner cookie-policy-doc">
|
||||
<p class="hero__eyebrow">Юридическая информация</p>
|
||||
<h1 class="case-page__h1">Политика использования файлов cookie и локального хранилища</h1>
|
||||
<p class="section__prose"><strong>Дата последнего обновления:</strong> 9 мая 2026 г.</p>
|
||||
<p class="section__prose">
|
||||
Настоящий документ описывает, как на личном сайте-портфолио Николая Мамадаева (далее — «сайт») используются технологии хранения данных в браузере.
|
||||
</p>
|
||||
|
||||
<h2 id="operator">Кто отвечает за сайт</h2>
|
||||
<p class="section__prose">
|
||||
Оператором сайта является <strong>Николай Мамадаев</strong>. По вопросам обработки данных используйте контакты в блоке «Контакты» на
|
||||
<a href="../index.html#contact">главной странице</a>
|
||||
(Telegram, ВКонтакте, Яндекс и почта через копирование адреса кнопкой).
|
||||
</p>
|
||||
|
||||
<h2 id="http-cookie">Используются ли HTTP cookie</h2>
|
||||
<p class="section__prose">
|
||||
В текущей версии сайта <strong>сторонние рекламные или аналитические HTTP cookie не подключаются</strong>. В разметке страниц нет счётчиков аналитики (например, Яндекс.Метрики или Google Analytics), которые обычно устанавливают собственные cookie.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
При размещении сайта на хостинге или за прокси технические записи (например, журналы сервера с IP-адресом и временем запроса) могут обрабатываться хостинг-провайдером по его документам — это не настраивается кодом данного сайта.
|
||||
</p>
|
||||
|
||||
<h2 id="local-storage">Local Storage и аналогичные технологии браузера</h2>
|
||||
<p class="section__prose">
|
||||
Для удобства работы сайт сохраняет на вашем устройстве небольшие объёмы данных через <strong>механизм localStorage</strong> в браузере (это не HTTP cookie, но по смыслу близко к ним и также относится к хранению на стороне клиента).
|
||||
</p>
|
||||
<p class="section__prose">Используются следующие ключи:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Ключ</th>
|
||||
<th scope="col">Назначение</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>siteThemeV1</code></td>
|
||||
<td>
|
||||
Настройки оформления: тема (светлая/тёмная/системная), оттенок, скругления, шрифт, фон и связанные параметры панели темы.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>siteCookieConsentV1</code></td>
|
||||
<td>Значение <code>accepted</code>, если вы нажали «Принять» в уведомлении о cookie; после этого баннер скрывается.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="section__prose">
|
||||
Эти данные <strong>не передаются на сервер сайта</strong> автоматически: они остаются только в вашем браузере.
|
||||
</p>
|
||||
|
||||
<h2 id="retention">Срок хранения</h2>
|
||||
<p class="section__prose">
|
||||
Данные в localStorage сохраняются до тех пор, пока вы <strong>не удалите их вручную</strong> (очистка данных сайта / полное удаление данных браузера) или пока браузер не сбросит хранилище по своим правилам.
|
||||
</p>
|
||||
|
||||
<h2 id="consent">Согласие и отказ</h2>
|
||||
<p class="section__prose">
|
||||
Нажимая «Принять» в баннере, вы подтверждаете, что ознакомились с настоящей политикой. Если вы не нажимаете «Принять», баннер остаётся доступным; функциональность сайта при этом по возможности сохраняется, но запись о согласии не создаётся.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Вы можете в любой момент <strong>очистить localStorage</strong> для этого сайта в настройках браузера — при этом сбросятся сохранённые тема и отметка о принятии уведомления, и баннер может снова отобразиться.
|
||||
</p>
|
||||
|
||||
<h2 id="changes">Изменения</h2>
|
||||
<p class="section__prose">
|
||||
Текст политики может обновляться при изменении технологий на сайте. Актуальная версия публикуется на странице «Политика cookie» по адресу <a href="../cookie-policy/">/cookie-policy.html</a> относительно корня сайта.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+165
-169
@@ -298,172 +298,172 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects" class="section section--surface" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Портфолио</h2>
|
||||
<ol class="mini-projects-grid" data-mini-projects-list>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/ai-platform-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Primo AI Server</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">UX/UI</li>
|
||||
<li class="mp-card__tag">Web App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/lunacy/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Lunacy</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">UX/UI</li>
|
||||
<li class="mp-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
|
||||
<section id="projects" class="section section--surface" data-reveal>
|
||||
<div class="section__inner">
|
||||
<h2 class="section__title">Портфолио</h2>
|
||||
<ol class="mini-projects-grid" data-mini-projects-list>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="ai-platform-primo-rpa">
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/ai-platform-primo-rpa/" aria-label="Платформа для работы с AI — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/ai-platform-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/manu-game-maker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Игровой движок MANU</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">Product Design</li>
|
||||
<li class="mp-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/mobile-clinic-app/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">UX/UI</li>
|
||||
<li class="mp-card__tag">Mobile App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/orc-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Primo Orc</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">Менторство и наставничество</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/task-distribution-concept/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">UX/UI</li>
|
||||
<li class="mp-card__tag">Analytics</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/task-tracker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">Product Design</li>
|
||||
<li class="mp-card__tag">Web App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Primo AI Server</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">UX/UI</li>
|
||||
<li class="mp-card__tag">Web App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="lunacy">
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/lunacy/" aria-label="Графический редактор Lunacy — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/lunacy/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Lunacy</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">UX/UI</li>
|
||||
<li class="mp-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="manu-game-maker" hidden>
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/manu-game-maker/" aria-label="Игровой движок MANU — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/manu-game-maker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Игровой движок MANU</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">Product Design</li>
|
||||
<li class="mp-card__tag">Desktop App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="mobile-clinic-app" hidden>
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/mobile-clinic-app/" aria-label="Мобильное приложение для сети клиник — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/mobile-clinic-app/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Мобильное приложение для сети клиник</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">UX/UI</li>
|
||||
<li class="mp-card__tag">Mobile App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="orc-automation-panel">
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/orc-automation-panel/" aria-label="Веб-панель для оркестрации автоматизаций — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/orc-primo-rpa/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Primo Orc</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">Менторство и наставничество</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-distribution-concept" hidden>
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/task-distribution-concept/" aria-label="Концепт сервиса распределения задач — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/task-distribution-concept/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Концепт сервиса распределения задач</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">UX/UI</li>
|
||||
<li class="mp-card__tag">Analytics</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mini-projects-grid__item" data-mp-cells="2" data-related-slug="task-tracker" hidden>
|
||||
<a class="mp-card mp-card--link mp-card--stack" href="cases/task-tracker/" aria-label="Таск-трекер для бек-офис системы — открыть кейс">
|
||||
<div class="mp-card__media" aria-hidden="true">
|
||||
<img
|
||||
class="mp-card__image"
|
||||
src="assets/task-tracker/cover.webp"
|
||||
alt=""
|
||||
width="400"
|
||||
height="225"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
<div class="mp-card__body">
|
||||
<h3 class="mp-card__title">Таск-трекер для бек-офис системы</h3>
|
||||
<ul class="mp-card__tags" aria-label="Тип проекта">
|
||||
<li class="mp-card__tag">Product Design</li>
|
||||
<li class="mp-card__tag">Web App</li>
|
||||
</ul>
|
||||
<p class="mp-card__desc">Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section><section hidden class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner">
|
||||
<div class="projects__heading">
|
||||
@@ -1349,10 +1349,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--surface" aria-hidden="true">
|
||||
<div class="section__inner"></div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
|
||||
+145
-145
@@ -8,99 +8,99 @@
|
||||
content="Резюме Николая Мамадаева — продуктовый дизайнер с опытом более 10 лет."
|
||||
/>
|
||||
<title>Резюме — Николай Мамадаев</title>
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../assets/fonts/merriweather.css",
|
||||
geologica: "../assets/fonts/geologica.css",
|
||||
mono: "../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../css/main.css" as="style" />
|
||||
<link rel="preload" href="../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../js/main.js" />
|
||||
<link rel="stylesheet" href="../css/main.css" />
|
||||
<script src="../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../js/main.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var FONT_CSS = {
|
||||
merriweather: "../assets/fonts/merriweather.css",
|
||||
geologica: "../assets/fonts/geologica.css",
|
||||
mono: "../assets/fonts/mono.css",
|
||||
};
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem("siteThemeV1") || "{}");
|
||||
var d = document.documentElement;
|
||||
var m = t.mode;
|
||||
if (m !== "light" && m !== "dark" && m !== "system") m = "system";
|
||||
var eff =
|
||||
m === "system"
|
||||
? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
: m;
|
||||
d.dataset.theme = eff;
|
||||
var h = typeof t.h === "number" ? t.h : typeof t.hue === "number" ? t.hue : null;
|
||||
var s = typeof t.s === "number" ? t.s : typeof t.sat === "number" ? t.sat : null;
|
||||
var l = typeof t.l === "number" ? t.l : typeof t.light === "number" ? t.light : null;
|
||||
if (h !== null) d.style.setProperty("--theme-h", String(h));
|
||||
if (s !== null) d.style.setProperty("--theme-s", String(s));
|
||||
if (l !== null) {
|
||||
var L = Number(l);
|
||||
if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L))));
|
||||
}
|
||||
var hVal = h !== null ? h : 210;
|
||||
var sVal = s !== null ? s : 90;
|
||||
var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40;
|
||||
var H = (((hVal % 360) + 360) % 360) / 360;
|
||||
var S = Math.min(100, Math.max(0, sVal)) / 100;
|
||||
var Lv = Math.min(100, Math.max(0, lVal)) / 100;
|
||||
var r, g, b;
|
||||
if (S === 0) { r = g = b = Lv; }
|
||||
else {
|
||||
var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S;
|
||||
var p = 2 * Lv - q;
|
||||
var hue2rgb = function(p, q, t) {
|
||||
if (t < 0) t += 1; if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
r = hue2rgb(p, q, H + 1/3);
|
||||
g = hue2rgb(p, q, H);
|
||||
b = hue2rgb(p, q, H - 1/3);
|
||||
}
|
||||
var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||
d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)");
|
||||
var rad = t.radius;
|
||||
if (rad === "soft" || rad === "medium" || rad === "strong") {
|
||||
d.dataset.radius = rad;
|
||||
} else {
|
||||
d.dataset.radius = "medium";
|
||||
}
|
||||
var f = t.font;
|
||||
if (f === "onest") f = "geologica";
|
||||
if (f === "anonymous") f = "mono";
|
||||
if (f !== "merriweather" && f !== "mono" && f !== "geologica") f = "merriweather";
|
||||
d.dataset.font = f;
|
||||
var mb = t.meshBg;
|
||||
if (mb === "off") {
|
||||
d.dataset.meshBg = "off";
|
||||
} else {
|
||||
d.dataset.meshBg = "on";
|
||||
}
|
||||
var href = FONT_CSS[f];
|
||||
if (href && !document.querySelector('link[data-theme-font="' + f + '"]')) {
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = href;
|
||||
link.setAttribute("data-theme-font", f);
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="../assets/favicon/site.webmanifest" />
|
||||
<link rel="preload" href="../assets/fonts/merriweather.css" as="style" />
|
||||
<link rel="preload" href="../css/main.css" as="style" />
|
||||
<link rel="preload" href="../js/skill-connectors.js" as="script" />
|
||||
<link rel="modulepreload" href="../js/main.js" />
|
||||
<link rel="stylesheet" href="../css/main.css" />
|
||||
<script src="../js/skill-connectors.js" defer></script>
|
||||
<script type="module" src="../js/main.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
.resume-doc {
|
||||
@@ -302,18 +302,18 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация">
|
||||
<a href="../index.html">На главную</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<a class="skip-link" href="#main">К основному содержимому</a>
|
||||
|
||||
<header class="header" data-theme-picker>
|
||||
<div class="header__inner">
|
||||
<a class="logo" href="../index.html" aria-label="На главную">НМ</a>
|
||||
<div class="header__cluster">
|
||||
<nav class="nav" aria-label="Навигация">
|
||||
<a href="../index.html">На главную</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="fab-stack" aria-label="Быстрые действия">
|
||||
<div class="theme-panel-fab-wrap">
|
||||
@@ -326,27 +326,27 @@
|
||||
<span class="fab__label">Скачать в PDF</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="content-edit-fab-stack" aria-label="Правки контента" data-content-edit-ui>
|
||||
<button
|
||||
type="button"
|
||||
class="fab fab--secondary glass-neutral content-edit-fab"
|
||||
data-content-edit-mode-toggle
|
||||
hidden
|
||||
aria-pressed="false"
|
||||
aria-label="Режим правок контента"
|
||||
title="Режим правок"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0 0-3L16.5 4.5a2.12 2.12 0 0 0-3 0L3 15v5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="content-edit-fab__badge" hidden aria-hidden="true">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="main" class="section section--surface section--tight">
|
||||
@@ -944,26 +944,26 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
<footer class="footer">
|
||||
<div class="footer__inner">
|
||||
<span class="footer__chunk footer__chunk--date">© 2026<span class="footer__sep" aria-hidden="true"> · </span></span>
|
||||
<span class="footer__chunk footer__chunk--main">Дизайн и разработка сайта — Николай Мамадаев</span>
|
||||
<span class="footer__chunk footer__chunk--meta footer__attr"><span class="footer__sep" aria-hidden="true"> · </span><a href="../cases/design-system/">Design System</a><span class="footer__sep" aria-hidden="true"> · </span><a href="../cookie-policy/">Политика cookie</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
<aside class="cookie-notice glass-neutral" hidden data-cookie-notice>
|
||||
<p class="cookie-notice__text">
|
||||
Сайт использует cookie для комфортной работы. Подробнее — в
|
||||
<a href="../cookie-policy/" data-cookie-policy-link>политике cookie</a>.
|
||||
</p>
|
||||
<button type="button" class="btn btn--secondary btn--flat cookie-notice__accept" data-cookie-accept>
|
||||
<span>Принять</span>
|
||||
<span class="cookie-notice__accept-icon" aria-hidden="true">
|
||||
<img src="../assets/shared/icons/сookie.svg" alt="" width="20" height="20" loading="eager" decoding="async" />
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
|
||||
@@ -118,7 +118,6 @@
|
||||
|
||||
{{> mini-projects-related}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -414,7 +414,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -544,7 +544,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -578,7 +578,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -118,7 +118,6 @@
|
||||
|
||||
{{> mini-projects-related}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -873,7 +873,6 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -367,7 +367,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -109,7 +109,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -636,7 +636,6 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -109,7 +109,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -142,7 +142,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -248,7 +248,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -118,7 +118,6 @@
|
||||
|
||||
{{> mini-projects-related}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -109,7 +109,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -536,7 +536,6 @@
|
||||
|
||||
{{> projects-related}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -270,7 +270,6 @@
|
||||
|
||||
{{> projects-section-mp}}{{> projects-section}}
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
@@ -570,7 +570,6 @@
|
||||
{{> mini-projects-section}}
|
||||
|
||||
{{> contact-section}}
|
||||
{{> footer-spacer}}
|
||||
{{> footer}}
|
||||
{{> cookie-notice}}
|
||||
{{> nav-more-floating}}
|
||||
|
||||
Reference in new issue
Block a user