Skip to content

Commit 1f88c58

Browse files
WinaelWinael
authored
Welcome Screen basic (#4)
improve CSS
1 parent 74f509d commit 1f88c58

File tree

5 files changed

+168
-2
lines changed

5 files changed

+168
-2
lines changed

‎app.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
from flask import Flask
1+
from flask import Flask, render_template
22

33
app = Flask(__name__)
44

55
@app.route('/')
66
def hello():
7-
return 'Hello, World!'
7+
return render_template('index.html')
88

99
if __name__ == '__main__':
1010
app.run(host='0.0.0.0', debug=True)

‎static/css/styles.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/* styles.css */
2+
3+
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');
4+
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
5+
6+
7+
body {
8+
font-family: 'Bruno Ace', Arial, sans-serif; /* Use Bruno Ace as the primary font */
9+
margin: 0;
10+
padding: 0;
11+
background-color: #f9f9f9;
12+
}
13+
14+
header {
15+
height: 120px;;
16+
}
17+
18+
header .logo {
19+
width: 90px;
20+
vertical-align: middle;
21+
position: relative;
22+
top: 7px;
23+
left: 7px;
24+
}
25+
26+
header h1 {
27+
display: inline;
28+
margin: 0 20px;
29+
font-size: 2em;
30+
}
31+
32+
main {
33+
padding: 20px;
34+
background-image: url(../img/robot.png);
35+
background-size: 800px;
36+
background-repeat: no-repeat;
37+
background-position-x: right;
38+
padding-bottom: 325px;
39+
}
40+
41+
main h1 {
42+
font-weight: 400;
43+
font-family: 'Bruno Ace';
44+
font-size: 2em;
45+
line-height: 77.19px;
46+
letter-spacing: 4px;
47+
color: #000000;
48+
}
49+
50+
51+
main h2 {
52+
font-size: 1.5em;
53+
margin-bottom: 20px;
54+
width: 50%;
55+
}
56+
57+
main p {
58+
font-size: 1.2em;
59+
margin-bottom: 15px;
60+
font-family: 'Open Sans';
61+
font-weight: 300;
62+
width: 50%;
63+
}
64+
65+
main .start-button {
66+
background-color: #ff0043;
67+
color: white;
68+
border: none;
69+
padding: 10px 20px;
70+
font-size: 1.2em;
71+
cursor: pointer;
72+
transition: background-color 0.3s;
73+
}
74+
75+
main .start-button:hover {
76+
background-color: #cc0036;
77+
}
78+
79+
footer {
80+
background-color: #333;
81+
color: white;
82+
padding: 10px 0;
83+
height: 10vh;
84+
width: 100%;
85+
position: fixed;
86+
}
87+
88+
footer a {
89+
color: #ff0043;
90+
text-decoration: none;
91+
margin-left: 10px;
92+
}
93+
94+
.ellipse {
95+
width: 104px; /* Double the radius for the width */
96+
height: 104px; /* Double the radius for the height */
97+
background-color: white;
98+
border-radius: 50%; /* Creates the ellipse shape */
99+
box-shadow: 0 3px 8px 0 #49454F; /* Shadow: offset-x offset-y blur spread color */
100+
position: relative;
101+
top: 10px;
102+
margin: 0 auto; /* Center horizontally */
103+
}
104+
105+
.banner {
106+
background-image: linear-gradient(45deg, #EE2238 45%, #BF1D67 100%);
107+
height: 60px;
108+
}
109+
110+
.responsive-title h1 {
111+
font-size: 3rem; /* Adjust the font size as needed */
112+
}
113+
114+
.responsive-title h2 {
115+
font-size: 2.5rem; /* Adjust the font size as needed */
116+
}
117+
118+
@media (max-width: 768px) { /* Adjust the breakpoint as needed */
119+
.responsive-title h1 {
120+
font-size: 2.5rem; /* Smaller font size for smaller screens */
121+
}
122+
.responsive-title h2 {
123+
font-size: 2rem; /* Smaller font size for smaller screens */
124+
}
125+
}
126+
127+
@media (max-width: 480px) { /* Adjust the breakpoint as needed */
128+
.responsive-title h1 {
129+
font-size: 2rem; /* Even smaller font size for very small screens */
130+
}
131+
.responsive-title h2 {
132+
font-size: 1.5rem; /* Even smaller font size for very small screens */
133+
}
134+
}

‎static/img/logo.png‎

7.28 KB
Loading

‎static/img/robot.png‎

121 KB
Loading

‎templates/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Accueil - Rétrospective AI</title>
7+
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header>
12+
<div class="banner">
13+
<div class="ellipse">
14+
<img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo Zenika" class="logo">
15+
</div>
16+
</div>
17+
</header>
18+
<main>
19+
<h1 class="responsible-title">Bienvenue</h1>
20+
<h2 class="responsible-title">Créer une rétrospective personnalisée grâce à l'IA</h2>
21+
<p>Vous cherchez à <strong>optimiser vos projets</strong> et à <strong>renforcer la cohésion de votre équipe</strong> grâce à l'IA ? Je m'appelle ECHO et je suis là pour vous aider.</p>
22+
<p>Notre application de rétrospective est la solution parfaite !</p>
23+
<p>Avec notre outil, vous pouvez facilement <strong>analyser les succès</strong>, <strong>identifier les points à améliorer</strong> et <strong>planifier des actions concrètes</strong> pour l'avenir.</p>
24+
<button class="start-button">Start</button>
25+
</main>
26+
</div>
27+
<footer>
28+
<p>Copyright © 2024 Zenika - Tous droits réservés.</p>
29+
<a href="#">Mentions légales</a>
30+
</footer>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)