root
4b52cec00d
- add .en.html overrides for 16 case pages + resume via apinex translator - translate remaining partials (projects-related, mini-projects-*, fab-stack-home-contact, fab-stack-resume, content-edit-fab-stack, cookie-notice) - enhance translate.mjs to protect <script>/<style> from translation - second pass: translate attribute values (aria-label/alt/title/placeholder/content/ data-hint-default) and visible text DeepL skipped in html mode - make logo language-aware (NM / НМ) via i18n
63 lines
6.1 KiB
HTML
63 lines
6.1 KiB
HTML
<div class="fab-stack" aria-label="Quick Actions">
|
|
<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="Style Settings">
|
|
<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="Theme and Design" 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">Accent Color</h3>
|
|
<div class="colorpicker" data-colorpicker>
|
|
<div class="colorpicker__plane-box">
|
|
<canvas class="colorpicker__plane" width="320" height="180" data-sl-canvas aria-label="Saturation and brightness of the accent"></canvas>
|
|
<div class="colorpicker__knob" data-sl-knob></div>
|
|
</div>
|
|
<div class="colorpicker__hue-wrap">
|
|
<label class="colorpicker__hue-sr" for="theme-hue-slider">Accent shade</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">Theme</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="As in the system"><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="Light-colored theme"><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="Dark Theme"><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">Corner Rounding</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="Slight rounding"><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="Average rounding"><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="Significant rounding"><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">Typography</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">Page Background</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="Show background gradient"><span class="theme-mesh-bg-seg__label">On</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="Hide the background gradient"><span class="theme-mesh-bg-seg__label">Off</span></button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="fab fab--primary" href="{{pagePrefix}}#contact" aria-label="Contact Us">
|
|
<span class="fab-primary__ico" aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
{{> content-edit-fab-stack}}
|