Skip to content

Commit c029b3a

Browse files
RustyRoryRustyRory
committed
fix(nginx): fixes #30 - maj home vps
1 parent 16b3f37 commit c029b3a

3 files changed

Lines changed: 163 additions & 118 deletions

File tree

‎vps-monitor-app/public/home.html‎

Lines changed: 8 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -4,112 +4,13 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>VPS — B3 Dev</title>
7-
<style>
8-
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
9-
10-
body {
11-
font-family: 'Segoe UI', Arial, sans-serif;
12-
background: #0f172a;
13-
color: #e2e8f0;
14-
min-height: 100vh;
15-
display: flex;
16-
flex-direction: column;
17-
align-items: center;
18-
justify-content: center;
19-
padding: 40px 20px;
20-
}
21-
22-
header {
23-
text-align: center;
24-
margin-bottom: 48px;
25-
}
26-
27-
header h1 {
28-
font-size: 1.75rem;
29-
font-weight: 700;
30-
letter-spacing: 0.05em;
31-
color: #f1f5f9;
32-
}
33-
34-
header p {
35-
margin-top: 8px;
36-
font-size: 0.875rem;
37-
color: #64748b;
38-
}
39-
40-
.grid {
41-
display: grid;
42-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
43-
gap: 16px;
44-
width: 100%;
45-
max-width: 760px;
46-
}
47-
48-
a.card {
49-
display: flex;
50-
flex-direction: column;
51-
gap: 6px;
52-
padding: 20px 24px;
53-
background: #1e293b;
54-
border: 1px solid #334155;
55-
border-radius: 12px;
56-
text-decoration: none;
57-
color: #e2e8f0;
58-
transition: background 0.15s, border-color 0.15s, transform 0.15s;
59-
}
60-
61-
a.card:hover {
62-
background: #273548;
63-
border-color: #4f6a8a;
64-
transform: translateY(-2px);
65-
}
66-
67-
a.card .label {
68-
font-size: 1rem;
69-
font-weight: 600;
70-
color: #f1f5f9;
71-
}
72-
73-
a.card .url {
74-
font-size: 0.75rem;
75-
color: #64748b;
76-
font-family: monospace;
77-
}
78-
79-
footer {
80-
margin-top: 48px;
81-
display: flex;
82-
flex-direction: column;
83-
align-items: center;
84-
gap: 12px;
85-
}
86-
87-
footer span {
88-
font-size: 0.75rem;
89-
color: #334155;
90-
}
91-
92-
footer a.monitoring-link {
93-
font-size: 0.75rem;
94-
color: #475569;
95-
text-decoration: none;
96-
border: 1px solid #1e293b;
97-
border-radius: 6px;
98-
padding: 0.3rem 0.8rem;
99-
transition: color 0.15s, border-color 0.15s;
100-
}
101-
102-
footer a.monitoring-link:hover {
103-
color: #94a3b8;
104-
border-color: #334155;
105-
}
106-
</style>
7+
<link rel="stylesheet" href="style.css" />
1078
</head>
108-
<body>
9+
<body class="home-body">
10910

11011
<header>
111-
<h1>B3 Dev — Applications</h1>
112-
<p>VPS 78.138.58.95</p>
12+
<h1>Applications</h1>
13+
<p>· VPS 78.138.58.95 ·</p>
11314
</header>
11415

11516
<div class="grid">
@@ -136,8 +37,11 @@ <h1>B3 Dev — Applications</h1>
13637
</div>
13738

13839
<footer>
139-
<span>B3 Dev · 2026</span>
14040
<a class="monitoring-link" href="/login.html">Monitoring</a>
41+
<span>
42+
<a href="https://github.com/RustyRory" class="github-link" target="_blank" rel="noopener">RustyRory</a>
43+
· B3 Dev · 2026
44+
</span>
14145
</footer>
14246

14347
</body>

‎vps-monitor-app/public/login.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,28 @@
99
<body class="login-body">
1010
<div class="login-card">
1111
<h1>VPS Monitor</h1>
12-
<form id="login-form">
13-
<a href="/" class="back-link">← Retour</a>
12+
<form id="login-form" novalidate>
1413
<div id="login-error" class="login-error hidden">Identifiants incorrects</div>
15-
<input type="text" id="username" placeholder="Utilisateur" autocomplete="username" required />
16-
<input type="password" id="password" placeholder="Mot de passe" autocomplete="current-password" required />
17-
<button type="submit">Connexion</button>
14+
<label for="username">Utilisateur</label>
15+
<input type="text" id="username" placeholder="admin" autocomplete="username" required />
16+
<label for="password">Mot de passe</label>
17+
<input type="password" id="password" placeholder="••••••••" autocomplete="current-password" required />
18+
<button type="submit" id="submit-btn">Connexion</button>
19+
<a href="/" class="back-link">← Retour</a>
1820
</form>
1921
</div>
2022

2123
<script>
2224
document.getElementById('login-form').addEventListener('submit', async (e) => {
2325
e.preventDefault();
26+
const btn = document.getElementById('submit-btn');
2427
const username = document.getElementById('username').value;
2528
const password = document.getElementById('password').value;
2629

30+
btn.disabled = true;
31+
btn.textContent = '...';
32+
document.getElementById('login-error').classList.add('hidden');
33+
2734
const res = await fetch('/auth/login', {
2835
method: 'POST',
2936
headers: { 'Content-Type': 'application/json' },
@@ -34,6 +41,8 @@ <h1>VPS Monitor</h1>
3441
window.location.href = '/';
3542
} else {
3643
document.getElementById('login-error').classList.remove('hidden');
44+
btn.disabled = false;
45+
btn.textContent = 'Connexion';
3746
}
3847
});
3948
</script>

‎vps-monitor-app/public/style.css‎

Lines changed: 141 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,124 @@
1-
* {
1+
*, *::before, *::after {
22
box-sizing: border-box;
33
margin: 0;
44
padding: 0;
55
}
66

7+
/* ===================== HOME ===================== */
8+
9+
.home-body {
10+
font-family: 'Segoe UI', Arial, sans-serif;
11+
background: #0f172a;
12+
color: #e2e8f0;
13+
min-height: 100vh;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
padding: 40px 20px;
19+
}
20+
21+
.home-body header {
22+
display: flex;
23+
flex-direction: column;
24+
align-items: center;
25+
text-align: center;
26+
margin-bottom: 48px;
27+
gap: 0;
28+
}
29+
30+
.home-body header h1 {
31+
font-size: 2rem;
32+
font-weight: 700;
33+
letter-spacing: 0.08em;
34+
color: #f1f5f9;
35+
}
36+
37+
.home-body header p {
38+
margin-top: 10px;
39+
font-size: 0.8rem;
40+
color: #475569;
41+
letter-spacing: 0.03em;
42+
}
43+
44+
.home-body .grid {
45+
display: grid;
46+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
47+
gap: 16px;
48+
width: 100%;
49+
max-width: 760px;
50+
}
51+
52+
.home-body a.card {
53+
display: flex;
54+
flex-direction: column;
55+
gap: 6px;
56+
padding: 20px 24px;
57+
background: #1e293b;
58+
border: 1px solid #334155;
59+
border-radius: 12px;
60+
text-decoration: none;
61+
color: #e2e8f0;
62+
transition: background 0.15s, border-color 0.15s, transform 0.15s;
63+
}
64+
65+
.home-body a.card:hover {
66+
background: #273548;
67+
border-color: #4f6a8a;
68+
transform: translateY(-2px);
69+
}
70+
71+
.home-body a.card .label {
72+
font-size: 1rem;
73+
font-weight: 600;
74+
color: #f1f5f9;
75+
}
76+
77+
.home-body a.card .url {
78+
font-size: 0.75rem;
79+
color: #64748b;
80+
font-family: monospace;
81+
}
82+
83+
.home-body footer {
84+
margin-top: 48px;
85+
display: flex;
86+
flex-direction: column;
87+
align-items: center;
88+
gap: 12px;
89+
}
90+
91+
.home-body footer span {
92+
font-size: 0.75rem;
93+
color: #334155;
94+
}
95+
96+
.monitoring-link {
97+
font-size: 0.8rem;
98+
color: #94a3b8;
99+
text-decoration: none;
100+
border: 1px solid #334155;
101+
border-radius: 6px;
102+
padding: 0.4rem 1rem;
103+
transition: color 0.15s, border-color 0.15s, background 0.15s;
104+
}
105+
106+
.monitoring-link:hover {
107+
color: #f1f5f9;
108+
border-color: #4f6a8a;
109+
background: #1e293b;
110+
}
111+
112+
.github-link {
113+
color: #475569;
114+
text-decoration: none;
115+
transition: color 0.15s;
116+
}
117+
118+
.github-link:hover {
119+
color: #94a3b8;
120+
}
121+
7122
body {
8123
font-family: monospace;
9124
background: #0f0f0f;
@@ -158,15 +273,25 @@ section {
158273
padding: 2rem;
159274
width: 100%;
160275
max-width: 320px;
161-
display: flex;
162-
flex-direction: column;
163-
gap: 1.2rem;
164276
}
165277

166278
.login-card h1 {
167279
text-align: center;
168280
font-size: 1.2rem;
169281
color: #e0e0e0;
282+
margin-bottom: 1.5rem;
283+
}
284+
285+
.login-card form {
286+
display: flex;
287+
flex-direction: column;
288+
gap: 0.4rem;
289+
}
290+
291+
.login-card label {
292+
font-size: 0.75rem;
293+
color: #666;
294+
margin-top: 0.6rem;
170295
}
171296

172297
.login-card input {
@@ -178,35 +303,41 @@ section {
178303
color: #e0e0e0;
179304
font-family: monospace;
180305
font-size: 0.9rem;
181-
display: block;
182-
margin-bottom: 0.6rem;
183306
}
184307

185308
.login-card input:focus {
186309
outline: none;
187310
border-color: #555;
188311
}
189312

190-
.login-card button {
313+
.login-card button[type="submit"] {
191314
width: 100%;
192-
padding: 0.6rem;
315+
padding: 0.65rem;
316+
margin-top: 1rem;
193317
background: #2a2a2a;
194318
border: 1px solid #444;
195319
border-radius: 4px;
196320
color: #e0e0e0;
197321
font-family: monospace;
198322
font-size: 0.9rem;
199323
cursor: pointer;
324+
transition: background 0.15s;
200325
}
201326

202-
.login-card button:hover {
327+
.login-card button[type="submit"]:hover:not(:disabled) {
203328
background: #333;
204329
}
205330

331+
.login-card button[type="submit"]:disabled {
332+
opacity: 0.5;
333+
cursor: default;
334+
}
335+
206336
.login-error {
207337
color: #f44336;
208338
font-size: 0.82rem;
209339
text-align: center;
340+
margin-bottom: 0.2rem;
210341
}
211342

212343
.hidden { display: none; }
@@ -217,6 +348,7 @@ section {
217348
color: #475569;
218349
text-decoration: none;
219350
text-align: center;
351+
margin-top: 0.8rem;
220352
}
221353

222354
.back-link:hover {

0 commit comments

Comments
 (0)