diff --git a/.env.example b/.env.example index ad4741d..2399114 100644 --- a/.env.example +++ b/.env.example @@ -8,4 +8,6 @@ FLASK_DEBUG=0 # Seconds to cache the TeslaCam directory scan (default 300). Hit /refresh to # force a re-scan. -SCAN_CACHE_TTL=3600 \ No newline at end of file +SCAN_CACHE_TTL=3600 + +LOGIN_PASSWORD=patreon \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index fbe8562..f00550e 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -520,3 +520,117 @@ header { [hidden] { display: none !important; } + +/* ============================================= + Login Page + ============================================= */ +.login-page { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: radial-gradient( + ellipse at 50% 30%, + #1a1a22 0%, + var(--bg-primary) 70% + ); +} + +.login-card { + width: 100%; + max-width: 380px; + padding: 40px 36px; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius); + box-shadow: var(--shadow); +} + +.login-brand { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + margin-bottom: 32px; +} + +.login-brand .logo { + width: 48px; + height: 48px; + display: grid; + place-items: center; + color: var(--accent); +} + +.login-brand .logo svg { + width: 100%; + height: 100%; + fill: var(--accent); +} + +.login-brand h1 { + font-size: 20px; + font-weight: 700; + letter-spacing: 0.5px; + color: var(--text-primary); +} + +.login-form { + display: flex; + flex-direction: column; + gap: 14px; +} + +.login-form label { + font-size: 13px; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.8px; +} + +.login-form input[type="password"] { + width: 100%; + padding: 12px 16px; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + color: var(--text-primary); + font-size: 15px; + outline: none; + transition: + border-color 0.2s, + box-shadow 0.2s; +} + +.login-form input[type="password"]:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(227, 25, 55, 0.15); +} + +.login-form button { + width: 100%; + padding: 12px; + background: var(--accent); + border: none; + border-radius: var(--radius-sm); + color: #fff; + font-size: 15px; + font-weight: 700; + cursor: pointer; + transition: background 0.15s; + margin-top: 4px; +} + +.login-form button:hover { + background: var(--accent-hover); +} + +.login-error { + font-size: 13px; + color: var(--accent); + text-align: center; + padding: 8px; + background: rgba(227, 25, 55, 0.08); + border-radius: var(--radius-sm); +} diff --git a/templates/login.html b/templates/login.html new file mode 100644 index 0000000..39e957e --- /dev/null +++ b/templates/login.html @@ -0,0 +1,43 @@ + + +
+ + +