402 lines
11 KiB
HTML
402 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" data-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="theme-color" content="#0c0e12" id="metaTheme">
|
|
<title>Вход — Lampac Admin</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet">
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var t = localStorage.getItem('lampac-theme');
|
|
var dark = t === 'light' ? false : t === 'dark' ? true : window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
|
} catch (e) { /* ignore */ }
|
|
})();
|
|
</script>
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
--text-xs: 0.6875rem;
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.875rem;
|
|
--text-lg: 1rem;
|
|
--sp-1: 0.25rem;
|
|
--sp-2: 0.5rem;
|
|
--sp-3: 0.75rem;
|
|
--sp-4: 1rem;
|
|
--sp-5: 1.25rem;
|
|
--sp-6: 1.5rem;
|
|
--sp-8: 2rem;
|
|
--r-sm: 6px;
|
|
--r-md: 8px;
|
|
--r-lg: 12px;
|
|
--r-xl: 16px;
|
|
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--dur: 180ms;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: #0c0e12;
|
|
--surface: #13161d;
|
|
--surface-2: #1a1e28;
|
|
--surface-3: #222733;
|
|
--border: #2a3040;
|
|
--border-subtle: rgba(255, 255, 255, 0.06);
|
|
--text: #e2e6ef;
|
|
--text-muted: #7c849a;
|
|
--text-faint: #4d5568;
|
|
--accent: #3ec9d1;
|
|
--accent-soft: #2ea8b0;
|
|
--accent-dim: rgba(62, 201, 209, 0.12);
|
|
--accent-hover: rgba(62, 201, 209, 0.22);
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg: #f4f5f8;
|
|
--surface: #ffffff;
|
|
--surface-2: #f0f1f5;
|
|
--surface-3: #e8eaf0;
|
|
--border: #d4d8e3;
|
|
--border-subtle: rgba(0, 0, 0, 0.06);
|
|
--text: #1a1e28;
|
|
--text-muted: #6b7280;
|
|
--text-faint: #9ca3af;
|
|
--accent: #0d9499;
|
|
--accent-soft: #0b7d82;
|
|
--accent-dim: rgba(13, 148, 153, 0.1);
|
|
--accent-hover: rgba(13, 148, 153, 0.18);
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-base);
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.auth-app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-4);
|
|
padding: var(--sp-3) var(--sp-6);
|
|
min-height: 52px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.topbar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-2);
|
|
font-weight: 700;
|
|
font-size: var(--text-lg);
|
|
letter-spacing: -0.02em;
|
|
color: var(--text);
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.topbar-logo svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.topbar-logo span {
|
|
font-weight: 400;
|
|
color: var(--text-muted);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.topbar-spacer {
|
|
flex: 1;
|
|
min-width: var(--sp-2);
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
padding: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-md);
|
|
background: var(--surface-2);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all var(--dur) var(--ease);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
color: var(--text);
|
|
background: var(--surface-3);
|
|
}
|
|
|
|
.btn-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.auth-main {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--sp-6) var(--sp-4);
|
|
}
|
|
|
|
.auth-card {
|
|
width: 100%;
|
|
max-width: 380px;
|
|
padding: var(--sp-6);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
animation: authIn 280ms var(--ease);
|
|
}
|
|
|
|
@keyframes authIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.auth-card h1 {
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
margin-bottom: var(--sp-1);
|
|
}
|
|
|
|
.auth-card .lead {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--sp-5);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.auth-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-4);
|
|
}
|
|
|
|
.auth-field label {
|
|
display: block;
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--sp-2);
|
|
}
|
|
|
|
.auth-field input[type="password"] {
|
|
font: inherit;
|
|
font-size: var(--text-sm);
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border-radius: var(--r-md);
|
|
border: 1px solid var(--border);
|
|
background: var(--surface-2);
|
|
color: var(--text);
|
|
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
|
|
}
|
|
|
|
[data-theme="light"] .auth-field input[type="password"] {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.auth-field input[type="password"]:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-dim);
|
|
}
|
|
|
|
.auth-field input::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.btn {
|
|
font: inherit;
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
padding: 10px 16px;
|
|
border-radius: var(--r-md);
|
|
border: 1px solid var(--accent);
|
|
cursor: pointer;
|
|
transition: all var(--dur) var(--ease);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--sp-2);
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-soft);
|
|
border-color: var(--accent-soft);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.topbar-logo span {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
(function () {
|
|
var dark = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
var m = document.getElementById('metaTheme');
|
|
if (m) m.setAttribute('content', dark ? '#0c0e12' : '#f4f5f8');
|
|
})();
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="auth-app">
|
|
<header class="topbar">
|
|
<div class="topbar-logo">
|
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
|
|
<rect x="2" y="2" width="24" height="24" rx="6" stroke="currentColor" stroke-width="1.5" fill="none" />
|
|
<rect x="7" y="16" width="3" height="6" rx="1" fill="var(--accent)" />
|
|
<rect x="12.5" y="11" width="3" height="11" rx="1" fill="var(--accent)" opacity="0.7" />
|
|
<rect x="18" y="6" width="3" height="16" rx="1" fill="var(--accent)" opacity="0.45" />
|
|
</svg>
|
|
Lampac <span>Admin</span>
|
|
</div>
|
|
<div class="topbar-spacer"></div>
|
|
<button type="button" class="btn-icon" id="themeBtn" title="Сменить тему (Alt+T)" aria-label="Сменить тему">
|
|
<svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<main class="auth-main">
|
|
<div class="auth-card">
|
|
<h1>Вход</h1>
|
|
<p class="lead">Введите пароль доступа к панели. Сессия сохраняется в cookie на 180 дней.</p>
|
|
<form class="auth-form" id="loginForm">
|
|
<div class="auth-field">
|
|
<label for="password">Пароль</label>
|
|
<input type="password" id="password" name="password" placeholder="Пароль" required autocomplete="current-password" />
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Войти</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
var LAMPAC_THEME_STORAGE_KEY = 'lampac-theme';
|
|
|
|
function $(sel) { return document.querySelector(sel); }
|
|
|
|
function setTheme(dark) {
|
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
|
var meta = $('#metaTheme');
|
|
if (meta) meta.setAttribute('content', dark ? '#0c0e12' : '#f4f5f8');
|
|
try { localStorage.setItem(LAMPAC_THEME_STORAGE_KEY, dark ? 'dark' : 'light'); } catch (e) { }
|
|
syncThemeIcon();
|
|
}
|
|
|
|
function syncThemeIcon() {
|
|
var d = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
var icon = $('#themeIcon');
|
|
if (!icon) return;
|
|
if (d) {
|
|
icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
|
|
} else {
|
|
icon.innerHTML = '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>';
|
|
}
|
|
}
|
|
|
|
syncThemeIcon();
|
|
|
|
$('#themeBtn').addEventListener('click', function () {
|
|
var d = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
setTheme(!d);
|
|
});
|
|
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.altKey && (e.key === 't' || e.key === 'T')) {
|
|
e.preventDefault();
|
|
var d = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
setTheme(!d);
|
|
}
|
|
});
|
|
|
|
$('#loginForm').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
var password = $('#password').value;
|
|
var maxAge = 60 * 60 * 24 * 180;
|
|
document.cookie = 'accspasswd=' + encodeURIComponent(password) +
|
|
'; max-age=' + maxAge +
|
|
'; path=/; SameSite=Lax' +
|
|
(window.isSecureContext ? '; Secure' : '');
|
|
window.location.href = '/adminpanel';
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|