Masterluke77andGitHub
40071f718e
Manifestbasierter Production-Updater 3.3, Modulnavigation, optionales Produktbild Studio, Listing-Studio-Aktionsleiste sowie plattformübergreifende Windows-/Linux-Release-Gates.
112 lines
6.3 KiB
HTML
112 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vendoo — Login</title>
|
|
<link rel="icon" href="/brand/favicons/favicon.ico" sizes="any">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/brand/favicons/favicon-16x16.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/brand/favicons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="48x48" href="/brand/favicons/favicon-48x48.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/brand/favicons/apple-touch-icon.png">
|
|
<link rel="manifest" href="/brand/favicons/site.webmanifest">
|
|
<meta name="msapplication-config" content="/brand/favicons/browserconfig.xml">
|
|
<meta name="theme-color" content="#FAF6F2">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
:root {
|
|
--accent: #e63b17; --accent-hover: #c92f0d;
|
|
--bg: #f5f5f0; --card: #fff; --text: #1a1a1a; --text-muted: #888;
|
|
--border: #e5e5e0; --shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
--radius: 12px;
|
|
}
|
|
body { background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
|
|
.login-wrap { width: 100%; max-width: 420px; }
|
|
.login-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
|
|
.login-header { background: #fffdf9; padding: 28px 32px 24px; text-align: center; border-bottom: 1px solid var(--border); }
|
|
.login-brand-logo { display:block; width:min(230px,78%); height:auto; margin:0 auto 8px; }
|
|
.login-header h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
|
|
.login-header p { color: var(--text-muted); font-size: 13px; margin-top: 6px; }
|
|
.login-body { padding: 32px; }
|
|
.login-body h2 { font-size: 18px; color: var(--text); margin-bottom: 8px; }
|
|
.login-body p.subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }
|
|
|
|
.form-group { margin-bottom: 20px; }
|
|
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
|
.form-group input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; transition: border-color 0.2s; outline: none; background: var(--bg); }
|
|
.form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,124,89,0.1); }
|
|
|
|
.login-btn { width: 100%; padding: 14px; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; }
|
|
.login-btn:hover { background: var(--accent-hover); }
|
|
.login-btn:active { transform: scale(0.98); }
|
|
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
|
|
.status { margin-top: 16px; padding: 12px 14px; border-radius: 8px; font-size: 13px; display: none; line-height: 1.5; }
|
|
.status.success { display: block; background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
|
|
.status.error { display: block; background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
|
|
.status.info { display: block; background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
|
|
|
|
.hidden { display: none !important; }
|
|
|
|
.login-footer { padding: 20px 32px; background: #fafaf8; border-top: 1px solid var(--border); text-align: center; }
|
|
.login-footer p { font-size: 11px; color: var(--text-muted); }
|
|
|
|
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 6px; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.pw-strength { height: 3px; border-radius: 2px; margin-top: 6px; transition: all 0.3s; }
|
|
.pw-strength.weak { background: #e53935; width: 33%; }
|
|
.pw-strength.medium { background: #fb8c00; width: 66%; }
|
|
.pw-strength.strong { background: #43a047; width: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-wrap">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<img class="login-brand-logo" src="/brand/logo/vendoo-logo-transparent.png" alt="Vendoo">
|
|
<h1>Vendoo</h1>
|
|
<p>Marketplace Listing Generator</p>
|
|
</div>
|
|
<div class="login-body">
|
|
<!-- LOGIN VIEW -->
|
|
<div id="login-view">
|
|
<h2 id="view-title">Anmelden</h2>
|
|
<p class="subtitle" id="view-subtitle">Melde dich mit deiner E-Mail und deinem Passwort an.</p>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label>E-Mail</label>
|
|
<input type="email" id="email" placeholder="deine@email.de" required autocomplete="email" autofocus>
|
|
</div>
|
|
<div class="form-group hidden" id="name-group">
|
|
<label>Name</label>
|
|
<input type="text" id="setup-name" placeholder="Dein Name" autocomplete="name">
|
|
</div>
|
|
<div class="form-group hidden" id="setup-token-group">
|
|
<label>Einrichtungs-Code</label>
|
|
<input type="password" id="setup-token" placeholder="Code aus der Docker-/NAS-Konfiguration" autocomplete="one-time-code">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Passwort</label>
|
|
<input type="password" id="password" placeholder="••••••••" required autocomplete="current-password" minlength="6">
|
|
<div class="pw-strength hidden" id="pw-strength"></div>
|
|
</div>
|
|
<div class="form-group hidden" id="pw-confirm-group">
|
|
<label>Passwort bestätigen</label>
|
|
<input type="password" id="password-confirm" placeholder="••••••••" autocomplete="new-password" minlength="6">
|
|
</div>
|
|
<button type="submit" class="login-btn" id="login-btn">Anmelden</button>
|
|
</form>
|
|
<div class="status" id="status"></div>
|
|
</div>
|
|
</div>
|
|
<div class="login-footer">
|
|
<p id="footer-text">Zugang nur per Einladung — kontaktiere den Admin</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/login.js?v=1.43.0" defer></script>
|
|
</body>
|
|
</html>
|