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

Preview: add UI V2 mode with grid, filters, sort, and toasts

Browse Source
This commit is contained in:
Ponte
2026-02-14 23:29:41 +01:00
parent 9b7af13df4
commit 60b19a70e9
3 changed files with 465 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@@ -61,6 +61,15 @@
</aside>
<main class="app-shell">
<div id="v2StickyBar" class="v2-sticky hidden">
<div class="v2-sticky-title">UI V2 Preview</div>
<div id="v2StickyCount" class="v2-sticky-count">0 jeu</div>
<div class="v2-sticky-actions">
<button id="v2ToggleFormBtn" type="button" class="btn-secondary">Ajouter</button>
<button id="v2QuickBackupBtn" type="button" class="btn-secondary">Sauvegarder</button>
</div>
</div>
<header class="hero">
<div class="hero-copy">
<p class="eyebrow">Catalogue perso</p>
@@ -94,6 +103,32 @@
<h2 id="gameSectionTitle">Jeux</h2>
<p id="dataModeInfo" class="data-mode"></p>
</div>
<div id="v2Toolbar" class="v2-toolbar hidden">
<label>
Recherche
<input id="v2SearchInput" placeholder="Titre, editeur, code-barres..." />
</label>
<label>
Console
<select id="v2ConsoleFilter">
<option value="">Toutes</option>
</select>
</label>
<label>
Genre
<select id="v2GenreFilter">
<option value="">Tous</option>
</select>
</label>
<label>
Tri
<select id="v2SortSelect">
<option value="title_asc">Titre (A-Z)</option>
<option value="year_desc">Annee (recent d'abord)</option>
<option value="value_desc">Cote (elevee d'abord)</option>
</select>
</label>
</div>
<div class="games-actions-bar">
<button id="loanedFilterBtn" type="button" class="btn-secondary">Voir jeux pretes</button>
</div>
@@ -177,12 +212,14 @@
<div id="gamesList" class="games-list"></div>
</section>
</main>
<div id="toastContainer" class="toast-container" aria-live="polite" aria-atomic="true"></div>
<template id="gameCardTemplate">
<article class="game-card">
<img class="game-cover hidden" alt="Pochette du jeu" loading="lazy" />
<div class="game-main">
<h3 class="game-title"></h3>
<div class="game-badges"></div>
<p class="game-meta"></p>
<p class="game-loan"></p>
</div>