-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsetup.html
More file actions
117 lines (110 loc) · 5.84 KB
/
Copy pathsetup.html
File metadata and controls
117 lines (110 loc) · 5.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<link rel="icon" type="image/png" href="/assets/logo/shield.png">
<title>SelfThreatMap — Ersteinrichtung</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
/* Orbitron LOKAL (Self-Marken-Standard, kein Google-Fonts-Zwang) */
@font-face{font-family:'Orbitron';src:url('/assets/fonts/Orbitron.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap;}
:root{
--bg:#020a12; --panel:rgba(6,18,28,0.92); --accent:#00e5c8;
--text:#cfeee6; --dim:rgba(0,229,200,0.30); --err:#ff5d6c; --ok:#3fd6a0;
}
*{box-sizing:border-box;}
body{
margin:0; min-height:100vh; background:
radial-gradient(1200px 600px at 50% -10%, rgba(0,229,200,0.12), transparent 60%),
var(--bg);
color:var(--text); font-family:'Share Tech Mono',ui-monospace,monospace;
display:flex; align-items:center; justify-content:center; padding:24px;
}
.card{
width:100%; max-width:380px; background:var(--panel);
border:1px solid var(--dim); border-radius:14px; padding:30px 26px;
box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,229,200,0.05) inset;
}
.brand{display:flex; align-items:center; gap:11px; margin-bottom:8px;}
.brand-shield{width:30px; height:30px; object-fit:contain;
filter:drop-shadow(0 0 8px rgba(0,229,200,0.45));}
.wordmark{font-family:'Orbitron',monospace; font-weight:800; font-size:19px;
letter-spacing:1px; color:#9dbdd0; text-shadow:0 0 14px rgba(51,167,140,0.5);}
.wordmark span{color:#33a78c;}
.sub{font-size:11px; color:rgba(160,255,216,0.5); margin:4px 0 22px; letter-spacing:.5px; line-height:1.5;}
label{display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase;
color:var(--accent); opacity:.8; margin:14px 0 5px;}
input{
width:100%; padding:11px 12px; background:rgba(0,0,0,0.35);
border:1px solid var(--dim); border-radius:8px; color:var(--text);
font-family:inherit; font-size:14px; letter-spacing:.5px; outline:none;
transition:border-color .15s, box-shadow .15s;
}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,229,200,0.15);}
.hint{font-size:10px; color:rgba(160,255,216,0.4); margin-top:4px;}
button{
width:100%; margin-top:24px; padding:12px; border:none; border-radius:8px;
background:linear-gradient(135deg,#00e5c8,#00a98f); color:#021018;
font-family:inherit; font-size:14px; font-weight:700; letter-spacing:1.5px;
text-transform:uppercase; cursor:pointer; transition:transform .1s, filter .15s;
}
button:hover{filter:brightness(1.12);}
button:active{transform:translateY(1px);}
.msg{margin:16px 0 0; padding:9px 12px; border-radius:8px; font-size:12px;
text-align:center; display:none;}
.msg.err{background:rgba(255,93,108,0.12); border:1px solid rgba(255,93,108,0.4); color:var(--err); display:block;}
.foot{margin-top:18px; font-size:10px; color:rgba(160,255,216,0.35); text-align:center; letter-spacing:.5px;}
#auth-lang{position:fixed; top:14px; right:16px; z-index:10;}
#auth-lang select{background:rgba(2,10,18,0.9); color:var(--text);
border:1px solid var(--dim); border-radius:8px; font-family:inherit;
font-size:12px; padding:6px 8px; cursor:pointer; outline:none;}
#auth-lang select:focus{border-color:var(--accent);}
</style>
<script src="/assets/i18n/auth-i18n.js"></script>
</head>
<body>
<div id="auth-lang"></div>
<form class="card" method="POST" action="/auth/setup" autocomplete="off" id="f">
<div class="brand">
<img class="brand-shield" src="/assets/logo/shield.png" alt="SelfThreatMap">
<span class="wordmark">Self<span>ThreatMap</span></span>
</div>
<p class="sub" data-i18n="setup_welcome">Willkommen! Lege ein Administrator-Konto an, um dein Dashboard zu schützen. Zwei-Faktor-Authentifizierung kannst du danach in den Einstellungen aktivieren.</p>
<div class="msg" id="msg"></div>
<label for="u" data-i18n="user">Benutzername</label>
<input id="u" name="username" type="text" autocomplete="username" autofocus required
maxlength="32" pattern="[A-Za-z0-9._-]+">
<div class="hint" data-i18n="setup_hint_user">1–32 Zeichen: Buchstaben, Zahlen, . _ -</div>
<label for="p" data-i18n="pass">Passwort</label>
<input id="p" name="password" type="password" autocomplete="new-password" required minlength="8">
<div class="hint" data-i18n="setup_hint_pass">Mindestens 8 Zeichen</div>
<label for="p2" data-i18n="setup_pass2">Passwort wiederholen</label>
<input id="p2" name="password2" type="password" autocomplete="new-password" required minlength="8">
<button type="submit" data-i18n="setup_btn">Konto erstellen</button>
<p class="foot" data-i18n="setup_foot">Die Daten werden lokal auf deinem Server gespeichert.</p>
</form>
<script>
window.AUTH_PAGE = 'setup';
var q = new URLSearchParams(location.search);
var errCode = q.get('err') || '';
// Fehlermeldung (Server-Code) bei jedem Sprachwechsel neu übersetzen
window.onAuthI18n = function () {
if (!errCode) return;
var m = document.getElementById('msg'); m.className = 'msg err';
m.textContent = (errCode === 'pw_mismatch')
? authT('pw_mismatch')
: (authT('err_' + errCode) !== 'err_' + errCode ? authT('err_' + errCode) : authT('err_generic'));
};
document.getElementById('f').addEventListener('submit', function (e) {
var p = document.getElementById('p').value, p2 = document.getElementById('p2').value;
if (p !== p2) {
e.preventDefault();
var m = document.getElementById('msg'); m.className = 'msg err';
m.textContent = (window.authT ? authT('pw_mismatch') : 'Die Passwörter stimmen nicht überein.');
}
});
</script>
</body>
</html>