beuz/Beuz-Video-Game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: enrich hero banner with retro console visuals

Browse Source
This commit is contained in:
Ponte
2026-02-11 20:47:43 +01:00
parent 81d966b64a
commit 39392943ad
8 changed files with 133 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/consoles/dreamcast.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 96" role="img" aria-label="Dreamcast">
<rect x="20" y="24" width="120" height="48" rx="12" fill="#f1f3f6" stroke="#a8b3c2"/>
<circle cx="80" cy="48" r="16" fill="none" stroke="#e08a43" stroke-width="4"/>
<path d="M80 32c7 1 12 8 10 15-2 8-10 12-17 10" fill="none" stroke="#e08a43" stroke-width="4" stroke-linecap="round"/>
<circle cx="42" cy="54" r="3.5" fill="#6e89a7"/>
<circle cx="54" cy="54" r="3.5" fill="#6e89a7"/>
<text x="80" y="17" text-anchor="middle" font-size="10" font-family="Arial, sans-serif" fill="#405775">Dreamcast</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 617 B

9
assets/consoles/gameboy.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 96" role="img" aria-label="Game Boy">
<rect x="50" y="12" width="60" height="72" rx="8" fill="#d9dbc7" stroke="#8c947e"/>
<rect x="58" y="22" width="44" height="26" rx="4" fill="#8ea48f"/>
<circle cx="72" cy="61" r="5" fill="#6d728e"/>
<circle cx="88" cy="66" r="5" fill="#6d728e"/>
<rect x="64" y="73" width="8" height="2.5" rx="1.25" fill="#5b6277"/>
<rect x="76" y="73" width="8" height="2.5" rx="1.25" fill="#5b6277"/>
<text x="80" y="10" text-anchor="middle" font-size="10" font-family="Arial, sans-serif" fill="#475d77">Game Boy</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 620 B

8
assets/consoles/megadrive.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 96" role="img" aria-label="Mega Drive">
<rect x="20" y="26" width="120" height="44" rx="10" fill="#2c3644" stroke="#111923"/>
<ellipse cx="80" cy="48" rx="30" ry="14" fill="#1f2631" stroke="#4d5d72"/>
<ellipse cx="80" cy="48" rx="17" ry="8" fill="#313d4f"/>
<rect x="32" y="58" width="20" height="4" rx="2" fill="#8fa5bb"/>
<rect x="108" y="58" width="20" height="4" rx="2" fill="#8fa5bb"/>
<text x="80" y="18" text-anchor="middle" font-size="10" font-family="Arial, sans-serif" fill="#405774">Mega Drive</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 588 B

9
assets/consoles/n64.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 96" role="img" aria-label="N64">
<path d="M34 66 L46 34 L64 34 L54 66 Z" fill="#4ca06a"/>
<path d="M54 66 L64 34 L82 34 L72 66 Z" fill="#2f78b2"/>
<path d="M72 66 L82 34 L100 34 L90 66 Z" fill="#de4646"/>
<path d="M90 66 L100 34 L118 34 L108 66 Z" fill="#e7b43f"/>
<rect x="60" y="54" width="40" height="18" rx="6" fill="#bcc8d8" stroke="#7f94ad"/>
<circle cx="80" cy="63" r="4" fill="#5a7391"/>
<text x="80" y="22" text-anchor="middle" font-size="11" font-family="Arial, sans-serif" fill="#344f6d">Nintendo 64</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 596 B

10
assets/consoles/ps1.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 96" role="img" aria-label="PS1">
<rect x="16" y="24" width="128" height="48" rx="10" fill="#dbe3ec" stroke="#98a8bb"/>
<circle cx="80" cy="48" r="15" fill="#eef3f9" stroke="#8ca0b7"/>
<circle cx="80" cy="48" r="8" fill="#d3deea" stroke="#8ca0b7"/>
<circle cx="44" cy="50" r="3.5" fill="#5f7ea0"/>
<circle cx="56" cy="50" r="3.5" fill="#5f7ea0"/>
<rect x="100" y="46" width="18" height="4" rx="2" fill="#5f7ea0"/>
<rect x="107" y="39" width="4" height="18" rx="2" fill="#5f7ea0"/>
<text x="80" y="17" text-anchor="middle" font-size="10" font-family="Arial, sans-serif" fill="#385676">PlayStation</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 682 B

9
assets/consoles/snes.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 96" role="img" aria-label="SNES">
<rect x="18" y="20" width="124" height="56" rx="14" fill="#d5d8e2" stroke="#8f97aa"/>
<rect x="30" y="28" width="100" height="10" rx="5" fill="#b8bfce"/>
<ellipse cx="56" cy="55" rx="12" ry="8" fill="#5c5fa0"/>
<ellipse cx="56" cy="55" rx="6" ry="4.5" fill="#ebedf5"/>
<ellipse cx="104" cy="55" rx="12" ry="8" fill="#9a5ca0"/>
<ellipse cx="104" cy="55" rx="6" ry="4.5" fill="#ebedf5"/>
<text x="80" y="16" text-anchor="middle" font-size="10" font-family="Arial, sans-serif" fill="#505e76">Super Nintendo</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 623 B

28
index.html
View File

@@ -44,7 +44,7 @@
<main class="app-shell">
<header class="hero">
<div>
<div class="hero-copy">
<p class="eyebrow">Catalogue perso</p>
<h1>Collection Jeux Video</h1>
<p class="subtitle">
@@ -52,6 +52,32 @@
et garde une base propre pour la gestion des prêts et de la cote.
</p>
</div>
<div class="hero-gallery" aria-label="Consoles iconiques">
<figure class="console-visual">
<img src="assets/consoles/ps1.svg" alt="PlayStation 1" />
<figcaption>PS1</figcaption>
</figure>
<figure class="console-visual">
<img src="assets/consoles/snes.svg" alt="Super Nintendo" />
<figcaption>SNES</figcaption>
</figure>
<figure class="console-visual">
<img src="assets/consoles/n64.svg" alt="Nintendo 64" />
<figcaption>N64</figcaption>
</figure>
<figure class="console-visual">
<img src="assets/consoles/megadrive.svg" alt="Mega Drive" />
<figcaption>Mega Drive</figcaption>
</figure>
<figure class="console-visual">
<img src="assets/consoles/dreamcast.svg" alt="Dreamcast" />
<figcaption>Dreamcast</figcaption>
</figure>
<figure class="console-visual">
<img src="assets/consoles/gameboy.svg" alt="Game Boy" />
<figcaption>Game Boy</figcaption>
</figure>
</div>
</header>
<section class="panel platform-panel">

53
styles.css
View File

@@ -122,6 +122,46 @@ body {
background:
linear-gradient(125deg, #f8fff7, #f4f8ff),
var(--surface);
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 1rem;
align-items: center;
}
.hero-copy {
min-width: 0;
}
.hero-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
}
.console-visual {
margin: 0;
border: 1px solid #d5dfeb;
background: linear-gradient(180deg, #ffffff, #f4f8ff);
border-radius: 12px;
padding: 0.45rem;
display: grid;
gap: 0.3rem;
place-items: center;
box-shadow: 0 6px 14px rgba(17, 36, 57, 0.08);
}
.console-visual img {
width: 100%;
max-width: 90px;
height: 54px;
object-fit: contain;
}
.console-visual figcaption {
font-size: 0.76rem;
color: #2a4663;
font-weight: 700;
text-align: center;
}
.eyebrow {
@@ -371,6 +411,15 @@ button {
}
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.hero-gallery {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-form,
.game-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -378,6 +427,10 @@ button {
}
@media (max-width: 640px) {
.hero-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-form,
.game-form {
grid-template-columns: 1fr;