treamz/wa-dev-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unified header: same top-header across landing, login, register, status

Browse Source 
- Landing: replaced custom landing-nav with standard top-header
- Removed scroll listener for nav (no longer needed)
- Header CSS moved to shared.css (single source)
- Removed duplicate header CSS from login, register, status
- All 4 public pages now have identical header with theme toggle
This commit is contained in:
treamz 2026-03-22 00:49:52 +03:00
parent b7e9eb03ab
commit 27ad078e07
5 changed files with 1342 additions and 574 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

958
public/landing.html
View File

File diff suppressed because it is too large Load Diff

20
public/login.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru"> <html lang="ru" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -17,22 +17,6 @@
<link href="/vendor/fonts.css" rel="stylesheet"> <link href="/vendor/fonts.css" rel="stylesheet">
<link href="/shared.css" rel="stylesheet"> <link href="/shared.css" rel="stylesheet">
<style> <style>
/* Header */
.top-header { position:fixed; top:0; left:0; right:0; height:56px; background:var(--surface-800); border-bottom:1px solid var(--surface-600); display:flex; align-items:center; padding:0 24px; z-index:50; backdrop-filter:blur(12px); }
.top-logo { font-size:18px; font-weight:800; color:var(--text-primary); text-decoration:none; display:flex; align-items:center; gap:8px; }
.top-logo span { color:var(--accent); }
.top-nav { display:flex; align-items:center; gap:6px; margin-left:32px; }
.top-nav a { font-size:13px; color:var(--text-muted); text-decoration:none; padding:6px 12px; border-radius:8px; transition:all .15s; font-weight:500; }
.top-nav a:hover { color:var(--text-secondary); background:rgba(255,255,255,.04); }
.top-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.btn-ghost { font-size:13px; color:var(--text-muted); text-decoration:none; padding:8px 16px; border-radius:8px; transition:all .15s; font-weight:600; }
.btn-ghost:hover { color:var(--text-secondary); background:rgba(255,255,255,.04); }
.btn-ghost.active { color:var(--accent); background:var(--accent-bg); }
.btn-primary-sm { font-size:13px; color:#fff; background:var(--accent); padding:8px 18px; border-radius:8px; text-decoration:none; font-weight:600; transition:background .15s; }
.btn-primary-sm:hover { background:var(--accent-dim); }
.theme-btn { width:32px; height:32px; border:none; background:none; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; border-radius:8px; transition:all .15s; }
.theme-btn:hover { background:rgba(255,255,255,.04); color:var(--text-secondary); }
@media(max-width:640px) { .top-nav { display:none; } .top-header { padding:0 16px; } }
/* Content */ /* Content */
.page-body { padding-top:56px; min-height:100vh; display:flex; align-items:center; justify-content:center; } .page-body { padding-top:56px; min-height:100vh; display:flex; align-items:center; justify-content:center; }
@ -58,7 +42,7 @@
// Theme init (before render) // Theme init (before render)
(function(){ (function(){
const s = localStorage.getItem('theme'); const s = localStorage.getItem('theme');
if (s !== 'dark') { if (s === '' || (s === null && !window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
} }
})(); })();

22
public/register.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru"> <html lang="ru" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -17,22 +17,6 @@
<link href="/vendor/fonts.css" rel="stylesheet"> <link href="/vendor/fonts.css" rel="stylesheet">
<link href="/shared.css" rel="stylesheet"> <link href="/shared.css" rel="stylesheet">
<style> <style>
/* Header */
.top-header { position:fixed; top:0; left:0; right:0; height:56px; background:var(--surface-800); border-bottom:1px solid var(--surface-600); display:flex; align-items:center; padding:0 24px; z-index:50; backdrop-filter:blur(12px); }
.top-logo { font-size:18px; font-weight:800; color:var(--text-primary); text-decoration:none; display:flex; align-items:center; gap:8px; }
.top-logo span { color:var(--accent); }
.top-nav { display:flex; align-items:center; gap:6px; margin-left:32px; }
.top-nav a { font-size:13px; color:var(--text-muted); text-decoration:none; padding:6px 12px; border-radius:8px; transition:all .15s; font-weight:500; }
.top-nav a:hover { color:var(--text-secondary); background:rgba(255,255,255,.04); }
.top-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.btn-ghost { font-size:13px; color:var(--text-muted); text-decoration:none; padding:8px 16px; border-radius:8px; transition:all .15s; font-weight:600; }
.btn-ghost:hover { color:var(--text-secondary); background:rgba(255,255,255,.04); }
.btn-primary-sm { font-size:13px; color:#fff; background:var(--accent); padding:8px 18px; border-radius:8px; text-decoration:none; font-weight:600; transition:background .15s; }
.btn-primary-sm:hover { background:var(--accent-dim); }
.btn-primary-sm.active { box-shadow:0 0 0 2px var(--accent), 0 0 0 4px rgba(0,84,230,.15); }
.theme-btn { width:32px; height:32px; border:none; background:none; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; border-radius:8px; transition:all .15s; }
.theme-btn:hover { background:rgba(255,255,255,.04); color:var(--text-secondary); }
@media(max-width:640px) { .top-nav { display:none; } .top-header { padding:0 16px; } }
/* Content */ /* Content */
.page-body { padding-top:56px; min-height:100vh; display:flex; align-items:center; justify-content:center; } .page-body { padding-top:56px; min-height:100vh; display:flex; align-items:center; justify-content:center; }
@ -58,7 +42,7 @@
<script> <script>
(function(){ (function(){
const s = localStorage.getItem('theme'); const s = localStorage.getItem('theme');
if (s !== 'dark') { if (s === '' || (s === null && !window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
} }
})(); })();
@ -90,7 +74,7 @@
<div class="auth-card"> <div class="auth-card">
<div class="auth-card-inner"> <div class="auth-card-inner">
<div class="auth-title">Создать аккаунт</div> <div class="auth-title">Создать аккаунт</div>
<div class="auth-subtitle">Доступ ко всем инструментам</div> <div class="auth-subtitle">Бесплатный доступ ко всем инструментам</div>
<div id="error" class="auth-error" style="margin-top:20px;"></div> <div id="error" class="auth-error" style="margin-top:20px;"></div>
<form id="regForm" style="display:flex;flex-direction:column;gap:16px;margin-top:24px;" onsubmit="return handleRegister(event)"> <form id="regForm" style="display:flex;flex-direction:column;gap:16px;margin-top:24px;" onsubmit="return handleRegister(event)">
<div> <div>

18
public/shared.css
View File

@ -98,6 +98,24 @@ body {
.wa-btn:disabled { opacity:0.5;cursor:not-allowed } .wa-btn:disabled { opacity:0.5;cursor:not-allowed }
.wa-card { background:var(--surface-700);border:1px solid var(--surface-600);border-radius:12px;padding:20px;transition:background .3s,border-color .3s } .wa-card { background:var(--surface-700);border:1px solid var(--surface-600);border-radius:12px;padding:20px;transition:background .3s,border-color .3s }
/* Top header (public pages: landing, auth, status) */
.top-header { position:fixed;top:0;left:0;right:0;height:56px;background:var(--surface-800);border-bottom:1px solid var(--surface-600);display:flex;align-items:center;padding:0 24px;z-index:50;backdrop-filter:blur(12px) }
.top-logo { font-size:18px;font-weight:800;color:var(--text-primary);text-decoration:none;display:flex;align-items:center;gap:8px }
.top-logo span { color:var(--accent) }
.top-nav { display:flex;align-items:center;gap:6px;margin-left:32px }
.top-nav a { font-size:13px;color:var(--text-muted);text-decoration:none;padding:6px 12px;border-radius:8px;transition:all .15s;font-weight:500 }
.top-nav a:hover { color:var(--text-secondary);background:rgba(255,255,255,.04) }
.top-right { margin-left:auto;display:flex;align-items:center;gap:8px }
.btn-ghost { font-size:13px;color:var(--text-muted);text-decoration:none;padding:8px 16px;border-radius:8px;transition:all .15s;font-weight:600 }
.btn-ghost:hover { color:var(--text-secondary);background:rgba(255,255,255,.04) }
.btn-ghost.active { color:var(--accent);background:var(--accent-bg) }
.btn-primary-sm { font-size:13px;color:#fff;background:var(--accent);padding:8px 18px;border-radius:8px;text-decoration:none;font-weight:600;transition:background .15s }
.btn-primary-sm:hover { background:var(--accent-dim) }
.btn-primary-sm.active { box-shadow:0 0 0 2px var(--accent),0 0 0 4px rgba(0,84,230,.15) }
.theme-btn { width:32px;height:32px;border:none;background:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .15s }
.theme-btn:hover { background:rgba(255,255,255,.04);color:var(--text-secondary) }
@media(max-width:640px) { .top-nav { display:none } .top-header { padding:0 16px } }
/* Scrollbar */ /* Scrollbar */
::-webkit-scrollbar { width:6px;height:6px } ::-webkit-scrollbar { width:6px;height:6px }
::-webkit-scrollbar-track { background:transparent } ::-webkit-scrollbar-track { background:transparent }

14
public/status.html
View File

@ -17,20 +17,6 @@
<link href="/vendor/fonts.css" rel="stylesheet"> <link href="/vendor/fonts.css" rel="stylesheet">
<link href="/shared.css" rel="stylesheet"> <link href="/shared.css" rel="stylesheet">
<style> <style>
.top-header { position:fixed; top:0; left:0; right:0; height:56px; background:var(--surface-800); border-bottom:1px solid var(--surface-600); display:flex; align-items:center; padding:0 24px; z-index:50; backdrop-filter:blur(12px); }
.top-logo { font-size:18px; font-weight:800; color:var(--text-primary); text-decoration:none; display:flex; align-items:center; gap:8px; }
.top-logo span { color:var(--accent); }
.top-nav { display:flex; align-items:center; gap:6px; margin-left:32px; }
.top-nav a { font-size:13px; color:var(--text-muted); text-decoration:none; padding:6px 12px; border-radius:8px; transition:all .15s; font-weight:500; }
.top-nav a:hover { color:var(--text-secondary); background:rgba(255,255,255,.04); }
.top-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.btn-ghost { font-size:13px; color:var(--text-muted); text-decoration:none; padding:8px 16px; border-radius:8px; transition:all .15s; font-weight:600; }
.btn-ghost:hover { color:var(--text-secondary); background:rgba(255,255,255,.04); }
.btn-primary-sm { font-size:13px; color:#fff; background:var(--accent); padding:8px 18px; border-radius:8px; text-decoration:none; font-weight:600; transition:background .15s; }
.btn-primary-sm:hover { background:var(--accent-dim); }
.theme-btn { width:32px; height:32px; border:none; background:none; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; border-radius:8px; transition:all .15s; }
.theme-btn:hover { background:rgba(255,255,255,.04); color:var(--text-secondary); }
@media(max-width:640px) { .top-nav { display:none; } .top-header { padding:0 16px; } }
.status-page { padding-top:80px; max-width:680px; margin:0 auto; padding-left:20px; padding-right:20px; padding-bottom:60px; } .status-page { padding-top:80px; max-width:680px; margin:0 auto; padding-left:20px; padding-right:20px; padding-bottom:60px; }
.overall-banner { border-radius:12px; padding:24px 28px; margin-bottom:32px; display:flex; align-items:center; gap:14px; } .overall-banner { border-radius:12px; padding:24px 28px; margin-bottom:32px; display:flex; align-items:center; gap:14px; }