-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
304 lines (269 loc) · 12.4 KB
/
index.html
File metadata and controls
304 lines (269 loc) · 12.4 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hackathon Vibes Coding 2025 - Projets Améliorés</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
/* --- Enhanced CSS Styles --- */
/* Réinitialisation et Base */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth; /* Smooth scrolling */
}
body {
font-family: 'Open Sans', sans-serif; /* Base font */
line-height: 1.7;
background-color: #f8f9fa; /* Lighter grey background */
color: #343a40; /* Darker grey text */
overflow-x: hidden; /* Prevent horizontal scroll */
}
/* En-tête */
.site-header {
background: linear-gradient(135deg, #4e54c8, #8f94fb); /* Violet/Blue Gradient */
color: #ffffff;
text-align: center;
padding: 4rem 1.5rem 3rem; /* More padding */
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
margin-bottom: 3rem;
}
.site-header h1 {
font-family: 'Poppins', sans-serif; /* Heading font */
font-size: 2.8em;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: 1px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.site-header p {
font-size: 1.1em;
font-weight: 400;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* Grille des projets */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Slightly larger min width */
gap: 2.5rem; /* Increased gap */
padding: 0 2rem 3rem; /* Padding top removed (comes from header margin), more bottom */
max-width: 1300px;
margin: 0 auto;
}
/* Style des cartes de jeu */
.game-card {
background-color: #ffffff;
border-radius: 12px; /* More rounded corners */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Softer initial shadow */
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer; /* Indicate card is interactive */
}
/* --- EFFET HOVER AMÉLIORÉ --- */
.game-card:hover {
transform: translateY(-10px) scale(1.02); /* Slightly more lift and scale */
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.1); /* Layered shadow */
}
.game-card .image-container {
width: 100%;
height: 220px; /* Slightly taller images */
overflow: hidden; /* Needed for image zoom */
}
.game-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease-out; /* Smooth zoom transition */
}
.game-card:hover img {
transform: scale(1.08); /* Zoom image slightly on hover */
}
.card-content {
padding: 1.8rem; /* More padding inside card */
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-content h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.4em; /* Slightly larger title */
font-weight: 600;
margin-bottom: 0.8rem;
color: #3498db; /* Updated blue color */
}
.card-content p {
margin-bottom: 1.5rem; /* More space before button */
flex-grow: 1;
color: #555; /* Slightly lighter text */
font-size: 0.95em;
}
/* Style du bouton */
.button {
display: inline-block;
background-color: #e74c3c; /* Keep red/orange, or choose another like #f39c12 (orange) */
color: #ffffff;
padding: 0.8rem 1.8rem; /* Adjusted padding */
text-decoration: none;
border-radius: 8px; /* Match card rounding */
text-align: center;
font-weight: 600; /* Use Open Sans bold */
font-family: 'Open Sans', sans-serif;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
align-self: flex-start;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.button:hover, .button:focus {
background-color: #c0392b; /* Darker shade */
transform: translateY(-2px); /* Slight lift on hover */
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
outline: none; /* Remove focus outline if needed */
}
/* Pied de page */
.site-footer {
background-color: #343a40; /* Dark grey footer */
color: #adb5bd; /* Light grey text */
text-align: center;
padding: 2rem 1rem;
margin-top: 4rem; /* More space before footer */
font-size: 0.9em;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.site-header h1 {
font-size: 2.2em;
}
.site-header p {
font-size: 1em;
}
.project-grid {
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); /* Adjust for smaller screens */
gap: 2rem;
padding: 0 1.5rem 2rem;
}
.card-content {
padding: 1.5rem;
}
.card-content h3 {
font-size: 1.3em;
}
}
@media (max-width: 480px) {
.site-header {
padding: 3rem 1rem 2rem;
}
.site-header h1 {
font-size: 1.8em;
}
.project-grid {
grid-template-columns: 1fr; /* Single column on very small screens */
padding: 0 1rem 2rem;
gap: 1.5rem;
}
.game-card:hover {
transform: translateY(-5px); /* Less lift on mobile where hover is less common */
}
}
</style>
</head>
<body>
<header class="site-header">
<h1>Hackathon Vibes Coding 2025</h1>
<p>Découvrez les jeux innovants et passionnants conçus en seulement 48 heures par nos élèves.</p>
</header>
<main class="project-grid">
<article class="game-card">
<div class="image-container">
<!-- !! IMPORTANT: Remplacez par le chemin réel de votre image !! -->
<img src="https://ateliernum.github.io/hackathon_vibecode_2025/f1manager/f1.png">
</div>
<div class="card-content">
<h3>Jeu de gestion F1 Manager</h3>
<p>Dans ce jeu, vous controlez une équipe de F1. Vous gérez les pilotes et le développement de la voiture tout au long de la saison. Les autres équipes développent également leurs voitures. A la fin de chaques saisons, les statistiques des voitures changent, comme les statistiques des pilotes, faites les bons choix!</p>
<!-- !! IMPORTANT: Remplacez '#' par le lien réel vers la page du jeu !! -->
<a href="https://ateliernum.github.io/hackathon_vibecode_2025/f1manager/" class="button">Jouer au jeu</a>
</div>
</article>
<article class="game-card">
<div class="image-container">
<!-- !! IMPORTANT: Remplacez par le chemin réel de votre image !! -->
<img src="https://ateliernum.github.io/hackathon_vibecode_2025/blackjack/imageblackjack.jpg">
</div>
<div class="card-content">
<h3>Blackjack</h3>
<p>Découvrez une version stratégique du Blackjack où vous affrontez le dealer et d'autres joueurs (humains ou IA configurables). Avant chaque round, entrez dans la Phase Boutique pour placer votre mise et acheter des Jokers uniques offrant des avantages. Chaque joueur gère indépendamment sa mise, son solde et ses achats de Jokers stratégiques. Ces Jokers modifient les règles du jeu pour créer des situations imprévues et des opportunités tactiques. Utilisez vos Jokers à bon escient pour maximiser vos gains et vaincre la maison et vos adversaires !</p>
<!-- !! IMPORTANT: Remplacez '#' par le lien réel vers la page du jeu !! -->
<a href="https://ateliernum.github.io/hackathon_vibecode_2025/blackjack/" class="button">Jouer au jeu</a>
</div>
</article>
<article class="game-card">
<div class="image-container">
<!-- !! IMPORTANT: Remplacez par le chemin réel de votre image !! -->
<img src="https://ateliernum.github.io/hackathon_vibecode_2025/simu/Screenshot_1_Civilization_Simulator.png" >
</div>
<div class="card-content">
<h3>Simu</h3>
<p>Civilization Simulator est un simulateur de civilisation avec des carrés de différentes couleurs.
Il y a une générations aléatoire du terrain avec des bonus collectables. Vous pouvez lancer une simulation entre 2 et 6 civilisation en même temps.
chaques individus d'une civilisation se déplace de façon autonome.</p>
<!-- !! IMPORTANT: Remplacez '#' par le lien réel vers la page du jeu !! -->
<a href="https://ateliernum.github.io/hackathon_vibecode_2025/simu/" class="button">Jouer au jeu</a>
</div>
</article>
<article class="game-card">
<div class="image-container">
<!-- !! IMPORTANT: Remplacez par le chemin réel de votre image !! -->
<img src="https://ateliernum.github.io/hackathon_vibecode_2025/quizz/Mystery box game.png">
</div>
<div class="card-content">
<h3>Quizz</h3>
<p>Mystery Box est un jeu dans lequel 1 à 4 joueurs s’affrontent en sélectionnant à tour de
rôle un thème. Une question à choix multiples (QCM) leur est alors proposée sur ce
thème.</p>
<!-- !! IMPORTANT: Remplacez '#' par le lien réel vers la page du jeu !! -->
<a href="https://ateliernum.github.io/hackathon_vibecode_2025/quizz/hackaton.html" class="button">Jouer au jeu</a>
</div>
</article>
<article class="game-card">
<div class="image-container">
<!-- !! IMPORTANT: Remplacez par le chemin réel de votre image !! -->
<img src="https://ateliernum.github.io/hackathon_vibecode_2025/P4/Puissance4_mainPics.png">
</div>
<div class="card-content">
<h3>P4</h3>
<p>Power 4 Game A classic game of Power 4 (Connect Four) with multiple exciting modes, including AI, Competitive, Normal, and Tetris 4 Mode!</p>
<!-- !! IMPORTANT: Remplacez '#' par le lien réel vers la page du jeu !! -->
<a href="https://ateliernum.github.io/hackathon_vibecode_2025/P4/Puissance4.html" class="button">Jouer au jeu</a>
</div>
</article>
<article class="game-card">
<div class="image-container">
<!-- !! IMPORTANT: Remplacez par le chemin réel de votre image !! -->
<img src="https://ateliernum.github.io/hackathon_vibecode_2025/PeggleLike/Game Cover.png">
</div>
<div class="card-content">
<h3>Peggle</h3>
<p>Power 4 Game A classic game of Power 4 (Connect Four) with multiple exciting modes, including AI, Competitive, Normal, and Tetris 4 Mode!</p>
<!-- !! IMPORTANT: Remplacez '#' par le lien réel vers la page du jeu !! -->
<a href="https://ateliernum.github.io/hackathon_vibecode_2025/PeggleLike/" class="button">Jouer au jeu</a>
</div>
</article>
</main>
<footer class="site-footer">
<p>© 2025 Hackathon Vibes Coding</p>
<a href="https://brunotanguy.com" class="button">Site du créateur</a>
</footer>
</body>
</html>