Вынесение настроек в отдельное окно
This commit is contained in:
KBAHTNET
parent
f37edb6d24
commit
ff56d4c3cd
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
27
index.html
27
index.html
@ -23,6 +23,15 @@
|
||||
<main class="shell">
|
||||
<section class="hero" aria-labelledby="page-title">
|
||||
<div class="hero-content">
|
||||
<button
|
||||
class="settings-button"
|
||||
type="button"
|
||||
aria-label="Открыть настройки внешнего вида"
|
||||
aria-expanded="false"
|
||||
data-settings-toggle
|
||||
>
|
||||
⚙
|
||||
</button>
|
||||
<p class="eyebrow">Personal ecosystem</p>
|
||||
<h1 id="page-title">Bratskih Tech Hub</h1>
|
||||
<p class="lead">
|
||||
@ -31,7 +40,23 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="control-panel" aria-label="Настройки внешнего вида">
|
||||
<div class="settings-overlay" data-settings-overlay></div>
|
||||
<div class="control-panel" aria-label="Настройки внешнего вида" data-settings-panel>
|
||||
<div class="settings-panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">View settings</p>
|
||||
<h2>Настройки</h2>
|
||||
</div>
|
||||
<button
|
||||
class="settings-close"
|
||||
type="button"
|
||||
aria-label="Закрыть настройки"
|
||||
data-settings-close
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<span>Тема</span>
|
||||
<button class="segmented is-active" type="button" data-theme="dark">
|
||||
|
||||
37
script.js
37
script.js
@ -65,6 +65,10 @@ const preferences = {
|
||||
};
|
||||
|
||||
const services = document.querySelector("[data-cards-root]");
|
||||
const settingsToggle = document.querySelector("[data-settings-toggle]");
|
||||
const settingsPanel = document.querySelector("[data-settings-panel]");
|
||||
const settingsOverlay = document.querySelector("[data-settings-overlay]");
|
||||
const settingsClose = document.querySelector("[data-settings-close]");
|
||||
const themeButtons = document.querySelectorAll("[data-theme]");
|
||||
const viewButtons = document.querySelectorAll("[data-view]");
|
||||
const accentButtons = document.querySelectorAll("[data-accent]");
|
||||
@ -73,6 +77,33 @@ renderCards(serviceCards);
|
||||
applyPreferences(preferences);
|
||||
attachCardInteractions();
|
||||
|
||||
settingsToggle.addEventListener("click", () => {
|
||||
const isOpen = settingsPanel.classList.toggle("is-open");
|
||||
settingsOverlay.classList.toggle("is-open", isOpen);
|
||||
settingsToggle.setAttribute("aria-expanded", String(isOpen));
|
||||
});
|
||||
|
||||
settingsClose.addEventListener("click", closeSettingsPanel);
|
||||
settingsOverlay.addEventListener("click", closeSettingsPanel);
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
closeSettingsPanel();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!settingsPanel.classList.contains("is-open")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (settingsPanel.contains(event.target) || settingsToggle.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
closeSettingsPanel();
|
||||
});
|
||||
|
||||
themeButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
preferences.theme = button.dataset.theme;
|
||||
@ -129,6 +160,12 @@ function savePreferences(nextPreferences) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(nextPreferences));
|
||||
}
|
||||
|
||||
function closeSettingsPanel() {
|
||||
settingsPanel.classList.remove("is-open");
|
||||
settingsOverlay.classList.remove("is-open");
|
||||
settingsToggle.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
function clamp(value, min, max) {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
}
|
||||
|
||||
112
styles.css
112
styles.css
@ -105,10 +105,7 @@ a {
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
|
||||
gap: 28px;
|
||||
align-items: end;
|
||||
display: block;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
@ -129,13 +126,14 @@ a {
|
||||
padding: clamp(28px, 5vw, 56px);
|
||||
border-radius: 38px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hero-content::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(120deg, rgba(var(--accent-rgb), 0.28), transparent 34%),
|
||||
url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-opacity='.09'%3E%3Cpath d='M0 70h140M70 0v140'/%3E%3Ccircle cx='70' cy='70' r='38'/%3E%3C/g%3E%3C/svg%3E");
|
||||
@ -174,10 +172,102 @@ h1 {
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
width: min(430px, calc(100% - 48px));
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 18px;
|
||||
border-radius: 28px;
|
||||
border-radius: 24px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translateY(-8px) scale(0.98);
|
||||
transform-origin: top right;
|
||||
transition:
|
||||
opacity 180ms ease,
|
||||
visibility 180ms ease,
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.control-panel.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.settings-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(2, 6, 23, 0.42);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(4px);
|
||||
transition: opacity 180ms ease, visibility 180ms ease;
|
||||
}
|
||||
|
||||
.settings-overlay.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.settings-button,
|
||||
.settings-close {
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
font-size: 1.16rem;
|
||||
}
|
||||
|
||||
.settings-button:hover,
|
||||
.settings-close:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(var(--accent-rgb), 0.5);
|
||||
background: rgba(var(--accent-rgb), 0.12);
|
||||
}
|
||||
|
||||
.settings-panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.settings-panel-head h2 {
|
||||
margin: 4px 0 0;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.settings-close {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
@ -424,14 +514,9 @@ h1 {
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
.hero,
|
||||
.services {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
@ -440,7 +525,6 @@ h1 {
|
||||
padding: 22px 0;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.services {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@ -451,6 +535,10 @@ h1 {
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: calc(100vw - 24px);
|
||||
max-height: calc(100vh - 24px);
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user