Skip to content

Commit c13594b

Browse files
andybonnettoandybonnetto
committed
update design of waiting page
1 parent 09f8351 commit c13594b

File tree

3 files changed

+213
-101
lines changed

3 files changed

+213
-101
lines changed

‎website_node/public/assets/css/index.css‎

Lines changed: 160 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,182 @@
1-
/* Basic styles for index page */
1+
/* Minimalist Waiting Page Styles */
22

3-
/* Background colors */
4-
.bg-background {
5-
background-color: #ffffff;
6-
}
7-
8-
.bg-primary {
9-
background-color: #3b82f6;
10-
}
11-
12-
.bg-primary-hover:hover {
13-
background-color: #2563eb;
14-
}
15-
16-
/* Text colors */
17-
.text-text-primary {
18-
color: #111827;
19-
}
20-
21-
.text-text-secondary {
22-
color: #6b7280;
23-
}
24-
25-
.text-white {
26-
color: #ffffff;
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
277
}
288

29-
/* Layout utilities */
30-
.min-h-screen {
9+
body {
10+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
11+
background: linear-gradient(135deg, #fef5f5 0%, #fff8f8 100%);
3112
min-height: 100vh;
32-
}
33-
34-
.flex {
3513
display: flex;
36-
}
37-
38-
.items-center {
3914
align-items: center;
40-
}
41-
42-
.justify-center {
4315
justify-content: center;
16+
color: #2c3e50;
17+
overflow: hidden;
18+
opacity: 1;
19+
transition: opacity 0.2s ease-out;
4420
}
4521

46-
.text-center {
47-
text-align: center;
48-
}
49-
50-
.block {
51-
display: block;
22+
body.fade-out {
23+
opacity: 0;
5224
}
5325

54-
/* Typography */
55-
.text-2xl {
56-
font-size: 1.5rem;
57-
line-height: 2rem;
58-
}
59-
60-
.font-semibold {
61-
font-weight: 600;
62-
}
63-
64-
/* Spacing */
65-
.mt-2 {
66-
margin-top: 0.5rem;
67-
}
68-
69-
.mt-4 {
70-
margin-top: 1rem;
71-
}
72-
73-
.space-y-2 > * + * {
74-
margin-top: 0.5rem;
75-
}
76-
77-
.px-4 {
78-
padding-left: 1rem;
79-
padding-right: 1rem;
26+
.container {
27+
width: 100%;
28+
max-width: 600px;
29+
padding: 40px 20px;
30+
display: flex;
31+
align-items: center;
32+
justify-content: center;
8033
}
8134

82-
.py-2 {
83-
padding-top: 0.5rem;
84-
padding-bottom: 0.5rem;
35+
.content {
36+
text-align: center;
37+
width: 100%;
38+
animation: fadeInUp 0.8s ease-out;
8539
}
8640

87-
/* Border radius */
88-
.rounded-md {
89-
border-radius: 0.375rem;
41+
@keyframes fadeInUp {
42+
from {
43+
opacity: 0;
44+
transform: translateY(30px);
45+
}
46+
to {
47+
opacity: 1;
48+
transform: translateY(0);
49+
}
9050
}
9151

92-
/* Transitions */
93-
.transition-colors {
94-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
95-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
96-
transition-duration: 150ms;
52+
.logo-wrapper {
53+
margin-bottom: 40px;
54+
animation: float 3s ease-in-out infinite;
9755
}
9856

99-
/* General reset */
100-
* {
101-
margin: 0;
102-
padding: 0;
103-
box-sizing: border-box;
57+
@keyframes float {
58+
0%, 100% {
59+
transform: translateY(0px);
60+
}
61+
50% {
62+
transform: translateY(-10px);
63+
}
10464
}
10565

106-
body {
107-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
108-
line-height: 1.6;
66+
.logo-circle {
67+
width: 120px;
68+
height: 120px;
69+
margin: 0 auto;
70+
background: linear-gradient(135deg, #fff3f3 0%, #ffeded 100%);
71+
border-radius: 50%;
72+
display: flex;
73+
align-items: center;
74+
justify-content: center;
75+
box-shadow: 0 20px 60px rgba(220, 38, 38, 0.3);
76+
}
77+
78+
.logo-icon {
79+
width: 60px;
80+
height: 60px;
81+
color: white;
82+
}
83+
84+
.title {
85+
font-size: 2.5rem;
86+
font-weight: 700;
87+
color: #2c3e50;
88+
margin-bottom: 16px;
89+
letter-spacing: -0.5px;
90+
line-height: 1.2;
91+
}
92+
93+
.subtitle {
94+
font-size: 1.125rem;
95+
color: #7f8c8d;
96+
margin-bottom: 40px;
97+
font-weight: 400;
98+
}
99+
100+
.loader {
101+
width: 100%;
102+
max-width: 300px;
103+
height: 4px;
104+
background-color: rgba(0, 0, 0, 0.08);
105+
border-radius: 10px;
106+
margin: 0 auto 40px;
107+
overflow: hidden;
108+
}
109+
110+
.loader-bar {
111+
height: 100%;
112+
background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
113+
border-radius: 10px;
114+
animation: loading 1.5s ease-in-out infinite;
115+
}
116+
117+
@keyframes loading {
118+
0% {
119+
width: 0%;
120+
margin-left: 0%;
121+
}
122+
50% {
123+
width: 75%;
124+
margin-left: 0%;
125+
}
126+
100% {
127+
width: 0%;
128+
margin-left: 100%;
129+
}
130+
}
131+
132+
.manual-link {
133+
margin-top: 32px;
134+
opacity: 0;
135+
animation: fadeIn 0.5s ease-out 1s forwards;
136+
}
137+
138+
@keyframes fadeIn {
139+
to {
140+
opacity: 1;
141+
}
142+
}
143+
144+
.link {
145+
color: #dc2626;
146+
text-decoration: none;
147+
font-size: 1rem;
148+
font-weight: 500;
149+
transition: all 0.3s ease;
150+
display: inline-flex;
151+
align-items: center;
152+
gap: 6px;
153+
padding: 10px 20px;
154+
border-radius: 8px;
155+
}
156+
157+
.link:hover {
158+
color: #991b1b;
159+
background-color: rgba(220, 38, 38, 0.05);
160+
transform: translateX(4px);
161+
}
162+
163+
/* Responsive Design */
164+
@media (max-width: 640px) {
165+
.title {
166+
font-size: 2rem;
167+
}
168+
169+
.subtitle {
170+
font-size: 1rem;
171+
}
172+
173+
.logo-circle {
174+
width: 100px;
175+
height: 100px;
176+
}
177+
178+
.logo-icon {
179+
width: 50px;
180+
height: 50px;
181+
}
109182
}

‎website_node/public/assets/css/main.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,16 @@ body {
1313
color: #000000;
1414
background-color: #ffffff;
1515
overflow-x: hidden;
16+
animation: fadeIn 0.2s ease-in;
17+
}
18+
19+
@keyframes fadeIn {
20+
from {
21+
opacity: 0;
22+
}
23+
to {
24+
opacity: 1;
25+
}
1626
}
1727

1828
img {

‎website_node/public/index.html‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,59 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>ESK Website - Redirecting</title>
6+
<title>EPFL Smart Kitchen</title>
77
<link rel="stylesheet" href="./assets/css/index.css" />
88

99
<script>
10-
// Redirect to one page by default
10+
// Redirect to one page by default with smooth fade out
1111
window.onload = function() {
12-
// Optional: add a small delay so users can see the message
1312
setTimeout(function() {
14-
window.location.href = "./pages/esk.html";
15-
}, 1000); // 1 second delay
13+
// Add fade-out class to body
14+
document.body.classList.add('fade-out');
15+
16+
// Wait for fade-out animation to complete before redirecting
17+
setTimeout(function() {
18+
window.location.href = "./pages/esk.html";
19+
}, 200); // Wait for fade animation to complete
20+
}, 2000); // Initial delay before starting fade
1621
}
22+
23+
// Handle manual link click with fade effect
24+
document.addEventListener('DOMContentLoaded', function() {
25+
const manualLink = document.querySelector('.link');
26+
manualLink.addEventListener('click', function(e) {
27+
e.preventDefault();
28+
document.body.classList.add('fade-out');
29+
setTimeout(function() {
30+
window.location.href = "./pages/esk.html";
31+
}, 300);
32+
});
33+
});
1734
</script>
1835
</head>
19-
<body class="bg-background">
20-
<div class="min-h-screen flex items-center justify-center">
21-
<div class="text-center">
22-
<h1 class="text-2xl font-semibold text-text-primary">Redirecting...</h1>
23-
<p class="mt-2 text-text-secondary">Please wait while we redirect you to a page.</p>
24-
<div class="mt-4">
25-
<p class="text-text-secondary">If you are not redirected automatically, please choose a page:</p>
26-
<div class="mt-2 space-y-2">
27-
<a href="./pages/esk.html" class="block px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-hover transition-colors">esk</a>
36+
<body>
37+
<div class="container">
38+
<div class="content">
39+
<div class="logo-wrapper">
40+
<div class="logo-circle">
41+
<svg class="logo-icon" viewBox="0 0 100 100" fill="none">
42+
<!-- Outer plate rim -->
43+
<circle cx="50" cy="50" r="38" fill="white" stroke="white" stroke-width="2"/>
44+
<!-- Inner plate surface -->
45+
<circle cx="50" cy="50" r="32" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
46+
<!-- Plate center detail -->
47+
<circle cx="50" cy="50" r="26" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
48+
</svg>
2849
</div>
2950
</div>
51+
<h1 class="title">EPFL Smart Kitchen</h1>
52+
<p class="subtitle">Loading ...</p>
53+
<div class="loader">
54+
<div class="loader-bar"></div>
55+
</div>
56+
<div class="manual-link">
57+
<a href="./pages/esk.html" class="link">Continue manually →</a>
58+
</div>
3059
</div>
3160
</div>
3261
</body>

0 commit comments

Comments
 (0)