create-lumina-project 1.2.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/template/.env.example +2 -1
- package/template/nodemon.json +1 -1
- package/template/package.json +26 -15
- package/template/resources/css/app.css +491 -0
- package/template/resources/js/Pages/Errors/404.tsx +32 -0
- package/template/resources/js/Pages/Maintenance.tsx +34 -0
- package/template/resources/js/Pages/Status.tsx +103 -0
- package/template/resources/js/Pages/Welcome.tsx +82 -0
- package/template/resources/js/app.tsx +43 -0
- package/template/resources/js/tsconfig.json +20 -0
- package/template/resources/js/vite-env.d.ts +1 -0
- package/template/resources/views/app.html +14 -0
- package/template/src/controllers/UserController.ts +5 -1
- package/template/src/controllers/WebController.ts +94 -0
- package/template/src/database/migrations/20260420050855-create_refresh_tokens.js +5 -0
- package/template/src/exceptions/Handler.ts +4 -4
- package/template/src/middlewares/ApiAuth.ts +67 -0
- package/template/src/middlewares/Csrf.ts +5 -4
- package/template/src/middlewares/InertiaMiddleware.ts +95 -0
- package/template/src/middlewares/Maintenance.ts +5 -5
- package/template/src/middlewares/RoleGuard.ts +20 -0
- package/template/src/middlewares/Validator.ts +17 -1
- package/template/src/middlewares/WebAuth.ts +122 -0
- package/template/src/models/BaseModel.ts +24 -0
- package/template/src/models/RefreshToken.ts +6 -5
- package/template/src/models/User.ts +3 -5
- package/template/src/routes/api.ts +16 -8
- package/template/src/routes/web.ts +10 -43
- package/template/src/server.ts +115 -0
- package/template/src/types/express/index.d.ts +8 -1
- package/template/src/types/express-inertia.d.ts +28 -0
- package/template/vite.config.ts +20 -0
- package/template/views/404.html +0 -233
- package/template/views/maintenance.html +0 -464
- package/template/views/status.html +0 -545
- package/template/views/welcome.html +0 -495
package/template/views/404.html
DELETED
|
@@ -1,233 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Lumina — Page Not Found</title>
|
|
7
|
-
<meta name="description" content="The page you're looking for doesn't exist.">
|
|
8
|
-
<link rel="shortcut icon" href="/img/logo2.png" type="image/x-icon">
|
|
9
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
12
|
-
<style>
|
|
13
|
-
*, *::before, *::after {
|
|
14
|
-
margin: 0;
|
|
15
|
-
padding: 0;
|
|
16
|
-
box-sizing: border-box;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:root {
|
|
20
|
-
--indigo-100: #e0e7ff;
|
|
21
|
-
--indigo-200: #c7d2fe;
|
|
22
|
-
--indigo-400: #818cf8;
|
|
23
|
-
--indigo-500: #6366f1;
|
|
24
|
-
--indigo-600: #4f46e5;
|
|
25
|
-
--slate-100: #f1f5f9;
|
|
26
|
-
--slate-300: #cbd5e1;
|
|
27
|
-
--slate-400: #94a3b8;
|
|
28
|
-
--slate-500: #64748b;
|
|
29
|
-
--slate-600: #475569;
|
|
30
|
-
--slate-800: #1e293b;
|
|
31
|
-
--slate-900: #0f172a;
|
|
32
|
-
--red-400: #f87171;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
body {
|
|
36
|
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
37
|
-
background-color: var(--slate-900);
|
|
38
|
-
color: var(--slate-100);
|
|
39
|
-
min-height: 100vh;
|
|
40
|
-
display: flex;
|
|
41
|
-
flex-direction: column;
|
|
42
|
-
justify-content: center;
|
|
43
|
-
align-items: center;
|
|
44
|
-
overflow: hidden;
|
|
45
|
-
position: relative;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.bg-gradient {
|
|
49
|
-
position: fixed;
|
|
50
|
-
inset: 0;
|
|
51
|
-
z-index: 0;
|
|
52
|
-
background:
|
|
53
|
-
radial-gradient(ellipse 80% 60% at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
|
|
54
|
-
radial-gradient(ellipse 60% 80% at 80% 80%, rgba(79, 70, 229, 0.12) 0%, transparent 60%);
|
|
55
|
-
animation: bgShift 12s ease-in-out infinite alternate;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
@keyframes bgShift {
|
|
59
|
-
0% { opacity: 0.7; transform: scale(1); }
|
|
60
|
-
50% { opacity: 1; transform: scale(1.05); }
|
|
61
|
-
100% { opacity: 0.8; transform: scale(1.02); }
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.orb {
|
|
65
|
-
position: fixed;
|
|
66
|
-
border-radius: 50%;
|
|
67
|
-
filter: blur(80px);
|
|
68
|
-
z-index: 0;
|
|
69
|
-
animation: float 20s ease-in-out infinite;
|
|
70
|
-
pointer-events: none;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.orb-1 {
|
|
74
|
-
width: 350px;
|
|
75
|
-
height: 350px;
|
|
76
|
-
background: rgba(99, 102, 241, 0.1);
|
|
77
|
-
top: -10%;
|
|
78
|
-
left: -5%;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.orb-2 {
|
|
82
|
-
width: 250px;
|
|
83
|
-
height: 250px;
|
|
84
|
-
background: rgba(248, 113, 113, 0.06);
|
|
85
|
-
bottom: -5%;
|
|
86
|
-
right: -5%;
|
|
87
|
-
animation-delay: -7s;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@keyframes float {
|
|
91
|
-
0%, 100% { transform: translate(0, 0); }
|
|
92
|
-
25% { transform: translate(30px, -40px); }
|
|
93
|
-
50% { transform: translate(-20px, 20px); }
|
|
94
|
-
75% { transform: translate(15px, 30px); }
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.grid-pattern {
|
|
98
|
-
position: fixed;
|
|
99
|
-
inset: 0;
|
|
100
|
-
z-index: 0;
|
|
101
|
-
background-image:
|
|
102
|
-
linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
|
|
103
|
-
linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
|
|
104
|
-
background-size: 60px 60px;
|
|
105
|
-
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
|
|
106
|
-
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.main {
|
|
110
|
-
position: relative;
|
|
111
|
-
z-index: 1;
|
|
112
|
-
display: flex;
|
|
113
|
-
flex-direction: column;
|
|
114
|
-
align-items: center;
|
|
115
|
-
gap: 1.75rem;
|
|
116
|
-
padding: 2rem;
|
|
117
|
-
width: 100%;
|
|
118
|
-
max-width: 520px;
|
|
119
|
-
animation: fadeInUp 0.8s ease-out both;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
@keyframes fadeInUp {
|
|
123
|
-
from { opacity: 0; transform: translateY(30px); }
|
|
124
|
-
to { opacity: 1; transform: translateY(0); }
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.error-code {
|
|
128
|
-
font-size: 7rem;
|
|
129
|
-
font-weight: 800;
|
|
130
|
-
letter-spacing: -0.04em;
|
|
131
|
-
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(99, 102, 241, 0.2) 50%, rgba(248, 113, 113, 0.15) 100%);
|
|
132
|
-
-webkit-background-clip: text;
|
|
133
|
-
-webkit-text-fill-color: transparent;
|
|
134
|
-
background-clip: text;
|
|
135
|
-
line-height: 1;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.header {
|
|
139
|
-
text-align: center;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.title {
|
|
143
|
-
font-size: 1.75rem;
|
|
144
|
-
font-weight: 800;
|
|
145
|
-
letter-spacing: -0.02em;
|
|
146
|
-
background: linear-gradient(135deg, #fff 0%, var(--indigo-200) 100%);
|
|
147
|
-
-webkit-background-clip: text;
|
|
148
|
-
-webkit-text-fill-color: transparent;
|
|
149
|
-
background-clip: text;
|
|
150
|
-
margin-bottom: 0.6rem;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.subtitle {
|
|
154
|
-
font-size: 0.95rem;
|
|
155
|
-
color: var(--slate-400);
|
|
156
|
-
line-height: 1.6;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.btn {
|
|
160
|
-
display: inline-flex;
|
|
161
|
-
align-items: center;
|
|
162
|
-
gap: 0.5rem;
|
|
163
|
-
padding: 0.7rem 1.75rem;
|
|
164
|
-
border-radius: 12px;
|
|
165
|
-
font-size: 0.85rem;
|
|
166
|
-
font-weight: 600;
|
|
167
|
-
text-decoration: none;
|
|
168
|
-
transition: all 0.25s ease;
|
|
169
|
-
background: linear-gradient(135deg, var(--indigo-600), var(--indigo-500));
|
|
170
|
-
color: white;
|
|
171
|
-
box-shadow: 0 4px 16px -4px rgba(99, 102, 241, 0.4);
|
|
172
|
-
border: 1px solid rgba(129, 140, 248, 0.2);
|
|
173
|
-
animation: fadeInUp 0.8s ease-out 0.2s both;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.btn:hover {
|
|
177
|
-
background: linear-gradient(135deg, var(--indigo-500), var(--indigo-400));
|
|
178
|
-
box-shadow: 0 6px 24px -4px rgba(99, 102, 241, 0.5);
|
|
179
|
-
transform: translateY(-2px);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.btn svg {
|
|
183
|
-
width: 16px;
|
|
184
|
-
height: 16px;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.footer {
|
|
188
|
-
margin-top: 0.5rem;
|
|
189
|
-
font-size: 0.75rem;
|
|
190
|
-
color: var(--slate-600);
|
|
191
|
-
animation: fadeInUp 0.8s ease-out 0.35s both;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.footer a {
|
|
195
|
-
color: var(--indigo-400);
|
|
196
|
-
text-decoration: none;
|
|
197
|
-
font-weight: 500;
|
|
198
|
-
transition: color 0.2s ease;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.footer a:hover { color: var(--indigo-200); }
|
|
202
|
-
|
|
203
|
-
@media (max-width: 540px) {
|
|
204
|
-
.error-code { font-size: 5rem; }
|
|
205
|
-
.title { font-size: 1.4rem; }
|
|
206
|
-
}
|
|
207
|
-
</style>
|
|
208
|
-
</head>
|
|
209
|
-
<body>
|
|
210
|
-
<div class="bg-gradient"></div>
|
|
211
|
-
<div class="orb orb-1"></div>
|
|
212
|
-
<div class="orb orb-2"></div>
|
|
213
|
-
<div class="grid-pattern"></div>
|
|
214
|
-
|
|
215
|
-
<div class="main">
|
|
216
|
-
<div class="error-code">404</div>
|
|
217
|
-
|
|
218
|
-
<div class="header">
|
|
219
|
-
<h1 class="title">Page Not Found</h1>
|
|
220
|
-
<p class="subtitle">The page you're looking for doesn't exist or has been moved. Let's get you back on track.</p>
|
|
221
|
-
</div>
|
|
222
|
-
|
|
223
|
-
<a href="/" class="btn">
|
|
224
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
|
|
225
|
-
Back to Home
|
|
226
|
-
</a>
|
|
227
|
-
|
|
228
|
-
<div class="footer">
|
|
229
|
-
<a href="https://github.com/glensonansin/lumina" target="_blank">Lumina</a> — Built with Express.js & TypeScript
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
</body>
|
|
233
|
-
</html>
|
|
@@ -1,464 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Lumina — Under Maintenance</title>
|
|
7
|
-
<meta name="description" content="Lumina is currently undergoing scheduled maintenance. We'll be back shortly.">
|
|
8
|
-
<link rel="shortcut icon" href="/img/logo2.png" type="image/x-icon">
|
|
9
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
12
|
-
<style>
|
|
13
|
-
*, *::before, *::after {
|
|
14
|
-
margin: 0;
|
|
15
|
-
padding: 0;
|
|
16
|
-
box-sizing: border-box;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:root {
|
|
20
|
-
--indigo-100: #e0e7ff;
|
|
21
|
-
--indigo-200: #c7d2fe;
|
|
22
|
-
--indigo-400: #818cf8;
|
|
23
|
-
--indigo-500: #6366f1;
|
|
24
|
-
--indigo-600: #4f46e5;
|
|
25
|
-
--slate-50: #f8fafc;
|
|
26
|
-
--slate-100: #f1f5f9;
|
|
27
|
-
--slate-300: #cbd5e1;
|
|
28
|
-
--slate-400: #94a3b8;
|
|
29
|
-
--slate-500: #64748b;
|
|
30
|
-
--slate-600: #475569;
|
|
31
|
-
--slate-800: #1e293b;
|
|
32
|
-
--slate-900: #0f172a;
|
|
33
|
-
--amber-400: #fbbf24;
|
|
34
|
-
--amber-500: #f59e0b;
|
|
35
|
-
--amber-900: #78350f;
|
|
36
|
-
--red-400: #f87171;
|
|
37
|
-
--red-500: #ef4444;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
body {
|
|
41
|
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
42
|
-
background-color: var(--slate-900);
|
|
43
|
-
color: var(--slate-100);
|
|
44
|
-
min-height: 100vh;
|
|
45
|
-
display: flex;
|
|
46
|
-
flex-direction: column;
|
|
47
|
-
justify-content: center;
|
|
48
|
-
align-items: center;
|
|
49
|
-
overflow: hidden;
|
|
50
|
-
position: relative;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* Animated gradient background */
|
|
54
|
-
.bg-gradient {
|
|
55
|
-
position: fixed;
|
|
56
|
-
inset: 0;
|
|
57
|
-
z-index: 0;
|
|
58
|
-
background:
|
|
59
|
-
radial-gradient(ellipse 80% 60% at 20% 20%, rgba(251, 191, 36, 0.08) 0%, transparent 60%),
|
|
60
|
-
radial-gradient(ellipse 60% 80% at 80% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 60%),
|
|
61
|
-
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(245, 158, 11, 0.05) 0%, transparent 70%);
|
|
62
|
-
animation: bgShift 12s ease-in-out infinite alternate;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
@keyframes bgShift {
|
|
66
|
-
0% { opacity: 0.7; transform: scale(1); }
|
|
67
|
-
50% { opacity: 1; transform: scale(1.05); }
|
|
68
|
-
100% { opacity: 0.8; transform: scale(1.02); }
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
/* Floating orbs */
|
|
72
|
-
.orb {
|
|
73
|
-
position: fixed;
|
|
74
|
-
border-radius: 50%;
|
|
75
|
-
filter: blur(80px);
|
|
76
|
-
z-index: 0;
|
|
77
|
-
animation: float 20s ease-in-out infinite;
|
|
78
|
-
pointer-events: none;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.orb-1 {
|
|
82
|
-
width: 350px;
|
|
83
|
-
height: 350px;
|
|
84
|
-
background: rgba(251, 191, 36, 0.07);
|
|
85
|
-
top: -10%;
|
|
86
|
-
left: -5%;
|
|
87
|
-
animation-delay: 0s;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.orb-2 {
|
|
91
|
-
width: 280px;
|
|
92
|
-
height: 280px;
|
|
93
|
-
background: rgba(99, 102, 241, 0.08);
|
|
94
|
-
bottom: -5%;
|
|
95
|
-
right: -5%;
|
|
96
|
-
animation-delay: -7s;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.orb-3 {
|
|
100
|
-
width: 180px;
|
|
101
|
-
height: 180px;
|
|
102
|
-
background: rgba(245, 158, 11, 0.06);
|
|
103
|
-
top: 50%;
|
|
104
|
-
left: 60%;
|
|
105
|
-
animation-delay: -14s;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
@keyframes float {
|
|
109
|
-
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
110
|
-
25% { transform: translate(30px, -40px) rotate(5deg); }
|
|
111
|
-
50% { transform: translate(-20px, 20px) rotate(-3deg); }
|
|
112
|
-
75% { transform: translate(15px, 30px) rotate(2deg); }
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/* Grid pattern overlay */
|
|
116
|
-
.grid-pattern {
|
|
117
|
-
position: fixed;
|
|
118
|
-
inset: 0;
|
|
119
|
-
z-index: 0;
|
|
120
|
-
background-image:
|
|
121
|
-
linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
|
|
122
|
-
linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
|
|
123
|
-
background-size: 60px 60px;
|
|
124
|
-
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
|
|
125
|
-
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
/* Main content */
|
|
129
|
-
.main {
|
|
130
|
-
position: relative;
|
|
131
|
-
z-index: 1;
|
|
132
|
-
display: flex;
|
|
133
|
-
flex-direction: column;
|
|
134
|
-
align-items: center;
|
|
135
|
-
gap: 2rem;
|
|
136
|
-
padding: 2rem;
|
|
137
|
-
width: 100%;
|
|
138
|
-
max-width: 560px;
|
|
139
|
-
animation: fadeInUp 0.8s ease-out both;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
@keyframes fadeInUp {
|
|
143
|
-
from { opacity: 0; transform: translateY(30px); }
|
|
144
|
-
to { opacity: 1; transform: translateY(0); }
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
/* Animated gear icon */
|
|
148
|
-
.icon-wrapper {
|
|
149
|
-
position: relative;
|
|
150
|
-
display: flex;
|
|
151
|
-
align-items: center;
|
|
152
|
-
justify-content: center;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.icon-glow {
|
|
156
|
-
position: absolute;
|
|
157
|
-
width: 100px;
|
|
158
|
-
height: 100px;
|
|
159
|
-
border-radius: 50%;
|
|
160
|
-
background: var(--amber-500);
|
|
161
|
-
opacity: 0.15;
|
|
162
|
-
filter: blur(30px);
|
|
163
|
-
animation: pulse 3s ease-in-out infinite;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
@keyframes pulse {
|
|
167
|
-
0%, 100% { opacity: 0.12; transform: scale(1); }
|
|
168
|
-
50% { opacity: 0.25; transform: scale(1.15); }
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.gear-icon {
|
|
172
|
-
position: relative;
|
|
173
|
-
z-index: 1;
|
|
174
|
-
width: 72px;
|
|
175
|
-
height: 72px;
|
|
176
|
-
display: flex;
|
|
177
|
-
align-items: center;
|
|
178
|
-
justify-content: center;
|
|
179
|
-
font-size: 3rem;
|
|
180
|
-
animation: spin 8s linear infinite;
|
|
181
|
-
filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.2));
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
@keyframes spin {
|
|
185
|
-
from { transform: rotate(0deg); }
|
|
186
|
-
to { transform: rotate(360deg); }
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
/* Header */
|
|
190
|
-
.header {
|
|
191
|
-
text-align: center;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.title {
|
|
195
|
-
font-size: 2.25rem;
|
|
196
|
-
font-weight: 800;
|
|
197
|
-
letter-spacing: -0.03em;
|
|
198
|
-
background: linear-gradient(135deg, #fff 0%, var(--indigo-200) 50%, var(--amber-400) 100%);
|
|
199
|
-
-webkit-background-clip: text;
|
|
200
|
-
-webkit-text-fill-color: transparent;
|
|
201
|
-
background-clip: text;
|
|
202
|
-
line-height: 1.15;
|
|
203
|
-
margin-bottom: 0.75rem;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.subtitle {
|
|
207
|
-
font-size: 1.05rem;
|
|
208
|
-
color: var(--slate-400);
|
|
209
|
-
line-height: 1.7;
|
|
210
|
-
max-width: 460px;
|
|
211
|
-
margin: 0 auto;
|
|
212
|
-
font-weight: 400;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
/* Glass card — progress indicator */
|
|
216
|
-
.card {
|
|
217
|
-
width: 100%;
|
|
218
|
-
background: rgba(30, 41, 59, 0.5);
|
|
219
|
-
backdrop-filter: blur(20px);
|
|
220
|
-
-webkit-backdrop-filter: blur(20px);
|
|
221
|
-
border: 1px solid rgba(148, 163, 184, 0.08);
|
|
222
|
-
border-radius: 16px;
|
|
223
|
-
padding: 1.75rem;
|
|
224
|
-
animation: fadeInUp 0.8s ease-out 0.2s both;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.progress-section {
|
|
228
|
-
display: flex;
|
|
229
|
-
flex-direction: column;
|
|
230
|
-
gap: 1rem;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
.progress-header {
|
|
234
|
-
display: flex;
|
|
235
|
-
align-items: center;
|
|
236
|
-
justify-content: space-between;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.progress-label {
|
|
240
|
-
font-size: 0.85rem;
|
|
241
|
-
font-weight: 600;
|
|
242
|
-
color: var(--slate-300);
|
|
243
|
-
display: flex;
|
|
244
|
-
align-items: center;
|
|
245
|
-
gap: 0.5rem;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.progress-label span {
|
|
249
|
-
display: inline-block;
|
|
250
|
-
animation: ellipsis 1.5s steps(3, end) infinite;
|
|
251
|
-
width: 1.2em;
|
|
252
|
-
text-align: left;
|
|
253
|
-
overflow: hidden;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
@keyframes ellipsis {
|
|
257
|
-
0% { content: ""; width: 0; }
|
|
258
|
-
33% { width: 0.4em; }
|
|
259
|
-
66% { width: 0.8em; }
|
|
260
|
-
100% { width: 1.2em; }
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.progress-percent {
|
|
264
|
-
font-size: 0.8rem;
|
|
265
|
-
font-weight: 600;
|
|
266
|
-
color: var(--amber-400);
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.progress-bar-track {
|
|
270
|
-
width: 100%;
|
|
271
|
-
height: 6px;
|
|
272
|
-
background: rgba(148, 163, 184, 0.1);
|
|
273
|
-
border-radius: 999px;
|
|
274
|
-
overflow: hidden;
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
.progress-bar-fill {
|
|
278
|
-
height: 100%;
|
|
279
|
-
width: 0%;
|
|
280
|
-
border-radius: 999px;
|
|
281
|
-
background: linear-gradient(90deg, var(--indigo-500), var(--amber-400));
|
|
282
|
-
box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
|
|
283
|
-
animation: progress 3s ease-in-out infinite;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
@keyframes progress {
|
|
287
|
-
0% { width: 15%; }
|
|
288
|
-
50% { width: 75%; }
|
|
289
|
-
100% { width: 15%; }
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
.checklist {
|
|
293
|
-
display: flex;
|
|
294
|
-
flex-direction: column;
|
|
295
|
-
gap: 0.6rem;
|
|
296
|
-
margin-top: 0.25rem;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
.check-item {
|
|
300
|
-
display: flex;
|
|
301
|
-
align-items: center;
|
|
302
|
-
gap: 0.6rem;
|
|
303
|
-
font-size: 0.8rem;
|
|
304
|
-
color: var(--slate-400);
|
|
305
|
-
padding: 0.5rem 0.65rem;
|
|
306
|
-
border-radius: 8px;
|
|
307
|
-
background: rgba(148, 163, 184, 0.03);
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
.check-item.done {
|
|
311
|
-
color: var(--slate-500);
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
.check-item.active {
|
|
315
|
-
color: var(--amber-400);
|
|
316
|
-
background: rgba(251, 191, 36, 0.05);
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
.check-icon {
|
|
320
|
-
flex-shrink: 0;
|
|
321
|
-
width: 18px;
|
|
322
|
-
height: 18px;
|
|
323
|
-
border-radius: 50%;
|
|
324
|
-
display: flex;
|
|
325
|
-
align-items: center;
|
|
326
|
-
justify-content: center;
|
|
327
|
-
font-size: 0.65rem;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
.check-item.done .check-icon {
|
|
331
|
-
background: rgba(99, 102, 241, 0.15);
|
|
332
|
-
color: var(--indigo-400);
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
.check-item.active .check-icon {
|
|
336
|
-
background: rgba(251, 191, 36, 0.15);
|
|
337
|
-
color: var(--amber-400);
|
|
338
|
-
animation: pulse 2s ease-in-out infinite;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
.check-item.pending .check-icon {
|
|
342
|
-
background: rgba(148, 163, 184, 0.08);
|
|
343
|
-
color: var(--slate-600);
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
/* Error badge */
|
|
347
|
-
.error-badge {
|
|
348
|
-
display: inline-flex;
|
|
349
|
-
align-items: center;
|
|
350
|
-
gap: 0.5rem;
|
|
351
|
-
padding: 0.55rem 1.15rem;
|
|
352
|
-
background: rgba(248, 113, 113, 0.06);
|
|
353
|
-
border: 1px solid rgba(248, 113, 113, 0.12);
|
|
354
|
-
border-radius: 999px;
|
|
355
|
-
font-size: 0.78rem;
|
|
356
|
-
font-weight: 600;
|
|
357
|
-
color: var(--red-400);
|
|
358
|
-
animation: fadeInUp 0.8s ease-out 0.35s both;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
.error-dot {
|
|
362
|
-
width: 7px;
|
|
363
|
-
height: 7px;
|
|
364
|
-
border-radius: 50%;
|
|
365
|
-
background: var(--red-400);
|
|
366
|
-
box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
/* Footer */
|
|
370
|
-
.footer {
|
|
371
|
-
margin-top: 0.5rem;
|
|
372
|
-
font-size: 0.75rem;
|
|
373
|
-
color: var(--slate-600);
|
|
374
|
-
animation: fadeInUp 0.8s ease-out 0.5s both;
|
|
375
|
-
letter-spacing: 0.02em;
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
.footer a {
|
|
379
|
-
color: var(--indigo-400);
|
|
380
|
-
text-decoration: none;
|
|
381
|
-
font-weight: 500;
|
|
382
|
-
transition: color 0.2s ease;
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
.footer a:hover {
|
|
386
|
-
color: var(--indigo-200);
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
/* Responsive */
|
|
390
|
-
@media (max-width: 540px) {
|
|
391
|
-
.title {
|
|
392
|
-
font-size: 1.75rem;
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
.subtitle {
|
|
396
|
-
font-size: 0.95rem;
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.card {
|
|
400
|
-
padding: 1.25rem;
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
</style>
|
|
404
|
-
</head>
|
|
405
|
-
<body>
|
|
406
|
-
<!-- Background effects -->
|
|
407
|
-
<div class="bg-gradient"></div>
|
|
408
|
-
<div class="orb orb-1"></div>
|
|
409
|
-
<div class="orb orb-2"></div>
|
|
410
|
-
<div class="orb orb-3"></div>
|
|
411
|
-
<div class="grid-pattern"></div>
|
|
412
|
-
|
|
413
|
-
<div class="main">
|
|
414
|
-
<!-- Animated gear icon -->
|
|
415
|
-
<div class="icon-wrapper">
|
|
416
|
-
<div class="icon-glow"></div>
|
|
417
|
-
<div class="gear-icon">⚙️</div>
|
|
418
|
-
</div>
|
|
419
|
-
|
|
420
|
-
<!-- Header -->
|
|
421
|
-
<div class="header">
|
|
422
|
-
<h1 class="title">We'll be back soon!</h1>
|
|
423
|
-
<p class="subtitle">Our system is currently undergoing maintenance to improve your experience. This won't take long.</p>
|
|
424
|
-
</div>
|
|
425
|
-
|
|
426
|
-
<!-- Progress card -->
|
|
427
|
-
<div class="card">
|
|
428
|
-
<div class="progress-section">
|
|
429
|
-
<div class="progress-header">
|
|
430
|
-
<div class="progress-label">Maintenance in progress<span>...</span></div>
|
|
431
|
-
</div>
|
|
432
|
-
<div class="progress-bar-track">
|
|
433
|
-
<div class="progress-bar-fill"></div>
|
|
434
|
-
</div>
|
|
435
|
-
<div class="checklist">
|
|
436
|
-
<div class="check-item done">
|
|
437
|
-
<div class="check-icon">✓</div>
|
|
438
|
-
Backing up data
|
|
439
|
-
</div>
|
|
440
|
-
<div class="check-item active">
|
|
441
|
-
<div class="check-icon">●</div>
|
|
442
|
-
Applying updates
|
|
443
|
-
</div>
|
|
444
|
-
<div class="check-item pending">
|
|
445
|
-
<div class="check-icon">○</div>
|
|
446
|
-
Restarting services
|
|
447
|
-
</div>
|
|
448
|
-
</div>
|
|
449
|
-
</div>
|
|
450
|
-
</div>
|
|
451
|
-
|
|
452
|
-
<!-- Error badge -->
|
|
453
|
-
<div class="error-badge">
|
|
454
|
-
<span class="error-dot"></span>
|
|
455
|
-
503 — Service Unavailable
|
|
456
|
-
</div>
|
|
457
|
-
|
|
458
|
-
<!-- Footer -->
|
|
459
|
-
<div class="footer">
|
|
460
|
-
<a href="https://github.com/glensonansin/lumina" target="_blank">Lumina</a> — Built with Express.js & TypeScript
|
|
461
|
-
</div>
|
|
462
|
-
</div>
|
|
463
|
-
</body>
|
|
464
|
-
</html>
|