valeriy/valeriy-blagorost-landing
1
0
Fork 0
forked from C9S/blagorost-landing
Code Pull Requests Activity

update

Browse Source
This commit is contained in:
Alex Ant
2026-03-15 19:43:00 +05:00
parent a6c808caca
commit 181b96fe8d
5 changed files with 162 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9 -1
View File
@@ -16,7 +16,12 @@
<img src="src/assets/logo.svg" alt="Благорост" class="nav-logo-img">
БЛАГОРОСТ <span>/ ПК «ВОСХОД»</span>
</div>
<a href="#cta" class="nav-cta">Принять участие</a>
<div class="nav-right">
<button type="button" id="theme-toggle" class="nav-theme-btn" aria-label="Переключить тему" title="Тема: системная">
<span class="theme-icon theme-icon-system" aria-hidden="true"></span>
</button>
<a href="#cta" class="nav-cta">Принять участие</a>
</div>
</nav>
@@ -294,6 +299,9 @@
<div class="exp-block reveal">
<h3>Почему золотое сечение</h3>
<p>
Природообразный коэффициент золотого сечения (φ) 1.618 выражает синергетический эффект коллективного усиления — при объединении людей происходит не сложение их возможностей, а гармоничное нелинейное умножение.
</p>
<p>
<span class="phi-circle">φ</span>
Время исполнителя в формуле делится на два слоя.
src/css/nav.css
+67 -9
View File
@@ -6,8 +6,12 @@ nav {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(to bottom, rgba(8,10,14,0.95), transparent);
background: linear-gradient(to bottom, var(--nav-bg), transparent);
backdrop-filter: blur(2px);
transition: background 0.3s;
}
nav.scrolled {
background: var(--nav-bg-solid);
}
.nav-logo {
@@ -34,17 +38,71 @@ nav {
.nav-cta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--gold);
border: 1px solid rgba(201, 151, 58, 0.4);
padding: 10px 24px;
font-size: 10px;
letter-spacing: 0.12em;
color: var(--dark);
background: var(--text);
padding: 7px 18px;
border-radius: 4px;
text-decoration: none;
text-transform: uppercase;
transition: all 0.3s;
transition: opacity 0.15s;
white-space: nowrap;
}
.nav-cta:hover {
background: var(--gold-dim);
border-color: var(--gold);
opacity: 0.85;
}
/* theme toggle */
.nav-right { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.nav-theme-btn {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 4px;
background: transparent;
color: var(--text);
cursor: pointer;
transition: color 0.18s, background 0.18s;
margin-right: 12px;
}
.nav-theme-btn:hover {
color: var(--text-bright);
background: rgba(201, 151, 58, 0.15);
}
.theme-icon {
width: 18px;
height: 18px;
display: block;
opacity: 0.85;
}
.theme-icon::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.theme-icon-system {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}
.theme-icon-light {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
}
.theme-icon-dark {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}
src/css/variables.css
+48
View File
@@ -1,4 +1,5 @@
:root {
--logo-fill: var(--gold);
--gold: #C9973A;
--gold-light: #E8B84B;
--gold-dim: rgba(201, 151, 58, 0.15);
@@ -9,5 +10,52 @@
--text: #c8cdd8;
--text-dim: #6b7485;
--text-bright: #eef0f5;
--nav-bg: rgba(8, 10, 14, 0.95);
--nav-bg-solid: rgba(8, 10, 14, 0.97);
--phi: 1.618;
}
/* светлая тема — системная */
@media (prefers-color-scheme: light) {
html:not([data-theme]) {
--logo-fill: var(--gold);
--dark: #f8f6f1;
--dark-2: #f2efe8;
--dark-3: #ebe7de;
--dark-4: #e4dfd5;
--text: #1a1d24;
--text-dim: #4a4f5c;
--text-bright: #0e1118;
--gold-dim: rgba(201, 151, 58, 0.12);
--nav-bg: rgba(248, 246, 241, 0.92);
--nav-bg-solid: rgba(248, 246, 241, 0.97);
}
}
html[data-theme="light"] {
--logo-fill: var(--gold);
--dark: #f8f6f1;
--dark-2: #f2efe8;
--dark-3: #ebe7de;
--dark-4: #e4dfd5;
--text: #1a1d24;
--text-dim: #4a4f5c;
--text-bright: #0e1118;
--gold-dim: rgba(201, 151, 58, 0.12);
--nav-bg: rgba(248, 246, 241, 0.92);
--nav-bg-solid: rgba(248, 246, 241, 0.97);
}
html[data-theme="dark"] {
--logo-fill: var(--gold);
--dark: #080a0e;
--dark-2: #0e1118;
--dark-3: #141820;
--dark-4: #1c2230;
--text: #c8cdd8;
--text-dim: #6b7485;
--text-bright: #eef0f5;
--gold-dim: rgba(201, 151, 58, 0.15);
--nav-bg: rgba(8, 10, 14, 0.95);
--nav-bg-solid: rgba(8, 10, 14, 0.97);
}
src/js/main.js
+32 -6
View File
@@ -21,17 +21,43 @@ setTimeout(() => {
});
}, 100);
/**
* Theme — светлая/тёмная тема
*/
(function () {
const STORAGE_KEY = 'coop-theme';
function getSystemTheme() { return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; }
function getEffectiveTheme() { return localStorage.getItem(STORAGE_KEY) || getSystemTheme(); }
function applyTheme(t) {
const theme = t !== undefined ? t : (localStorage.getItem(STORAGE_KEY) || null);
document.documentElement.removeAttribute('data-theme');
if (theme) document.documentElement.setAttribute('data-theme', theme);
const effective = theme || getSystemTheme();
const icon = document.querySelector('#theme-toggle .theme-icon');
if (icon) {
icon.className = 'theme-icon theme-icon-' + effective;
icon.closest('button').setAttribute('title', effective === 'light' ? 'Тема: светлая' : 'Тема: тёмная');
}
}
function cycleTheme() {
const current = getEffectiveTheme();
const next = current === 'light' ? 'dark' : 'light';
localStorage.setItem(STORAGE_KEY, next);
applyTheme(next);
}
const toggle = document.getElementById('theme-toggle');
if (toggle) toggle.addEventListener('click', cycleTheme);
applyTheme();
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => { if (!localStorage.getItem(STORAGE_KEY)) applyTheme(); });
})();
/**
* Nav — эффект фона при скролле
*/
const nav = document.querySelector('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 80) {
nav.style.background = 'rgba(8,10,14,0.97)';
} else {
nav.style.background = 'linear-gradient(to bottom, rgba(8,10,14,0.95), transparent)';
}
});
nav.classList.toggle('scrolled', window.scrollY > 80);
}, { passive: true });
/**
* Калькулятор — модальное окно
src/partials/nav.html
+6 -1
View File
@@ -3,5 +3,10 @@
<img src="src/assets/logo.svg" alt="Благорост" class="nav-logo-img">
БЛАГОРОСТ <span>/ ПК «ВОСХОД»</span>
</div>
<a href="#cta" class="nav-cta">Принять участие</a>
<div class="nav-right">
<button type="button" id="theme-toggle" class="nav-theme-btn" aria-label="Переключить тему" title="Тема: системная">
<span class="theme-icon theme-icon-system" aria-hidden="true"></span>
</button>
<a href="#cta" class="nav-cta">Принять участие</a>
</div>
</nav>