UI V3: add top navigation, sidebar layout, and dedicated loans/stats views
This commit is contained in:
Ponte
86
index.html
86
index.html
@@ -13,7 +13,18 @@
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<button id="toolsToggleBtn" type="button" class="tools-toggle-btn">Outils</button>
|
||||
<header class="topbar">
|
||||
<div class="topbar-brand">
|
||||
<p class="eyebrow">Collection Manager</p>
|
||||
<h1>Collection Jeux Video</h1>
|
||||
</div>
|
||||
<nav class="topbar-nav" aria-label="Navigation principale">
|
||||
<button type="button" class="topnav-btn active" data-view="catalogue">Catalogue</button>
|
||||
<button type="button" class="topnav-btn" data-view="loans">Prets</button>
|
||||
<button type="button" class="topnav-btn" data-view="stats">Statistiques</button>
|
||||
<button id="toolsToggleBtn" type="button" class="topnav-btn">Outils</button>
|
||||
</nav>
|
||||
</header>
|
||||
<button id="gamesToggleBtn" type="button" class="games-toggle-btn">Jeux</button>
|
||||
<aside id="toolsDrawer" class="tools-drawer" aria-label="Menu outils">
|
||||
<div class="tools-header">
|
||||
@@ -60,7 +71,29 @@
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="app-shell">
|
||||
<main class="app-shell v3-layout">
|
||||
<aside class="v3-sidebar panel">
|
||||
<section class="sidebar-block">
|
||||
<h2 class="sidebar-title">Plateformes et consoles</h2>
|
||||
<form id="platformForm" class="grid-form">
|
||||
<label>
|
||||
Marque (ex: SONY)
|
||||
<input id="brandInput" required placeholder="SONY" />
|
||||
</label>
|
||||
<label>
|
||||
Console (ex: PlayStation 5)
|
||||
<input id="consoleInput" required placeholder="PlayStation 5" />
|
||||
</label>
|
||||
<button type="submit">Ajouter section</button>
|
||||
</form>
|
||||
</section>
|
||||
<section class="sidebar-block">
|
||||
<div id="brandTabs" class="tabs" aria-label="Onglets marques"></div>
|
||||
<div id="consoleTabs" class="tabs secondary" aria-label="Onglets consoles"></div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="v3-main">
|
||||
<div id="v2StickyBar" class="v2-sticky hidden">
|
||||
<div class="v2-sticky-title">Vue catalogue</div>
|
||||
<div id="v2StickyCount" class="v2-sticky-count">0 jeu affiche</div>
|
||||
@@ -73,32 +106,34 @@
|
||||
<header class="hero">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Catalogue perso</p>
|
||||
<h1>Collection Jeux Video</h1>
|
||||
<p class="subtitle">Gere ta collection, tes prets et la valeur de tes jeux en un seul endroit.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="panel platform-panel">
|
||||
<section id="statsView" class="panel stats-view hidden">
|
||||
<div class="panel-header">
|
||||
<h2>Plateformes et consoles</h2>
|
||||
<h2>Statistiques collection</h2>
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<article class="stat-card">
|
||||
<p class="stat-label">Nombre total de jeux</p>
|
||||
<p id="statsTotalGames" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<p class="stat-label">Valeur totale estimee</p>
|
||||
<p id="statsTotalValue" class="stat-value">0.00 EUR</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<p class="stat-label">Jeux pretes</p>
|
||||
<p id="statsLoanedGames" class="stat-value">0</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<p class="stat-label">Consoles actives</p>
|
||||
<p id="statsConsoleCount" class="stat-value">0</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<form id="platformForm" class="grid-form">
|
||||
<label>
|
||||
Marque (ex: SONY)
|
||||
<input id="brandInput" required placeholder="SONY" />
|
||||
</label>
|
||||
<label>
|
||||
Console (ex: PlayStation 5)
|
||||
<input id="consoleInput" required placeholder="PlayStation 5" />
|
||||
</label>
|
||||
<button type="submit">Ajouter section</button>
|
||||
</form>
|
||||
|
||||
<div id="brandTabs" class="tabs" aria-label="Onglets marques"></div>
|
||||
<div id="consoleTabs" class="tabs secondary" aria-label="Onglets consoles"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel games-panel">
|
||||
<section id="gamesPanel" class="panel games-panel">
|
||||
<div class="panel-header">
|
||||
<h2 id="gameSectionTitle">Jeux</h2>
|
||||
<p id="dataModeInfo" class="data-mode"></p>
|
||||
@@ -130,7 +165,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="games-actions-bar">
|
||||
<button id="loanedFilterBtn" type="button" class="btn-secondary">Voir jeux pretes</button>
|
||||
<button id="loanedFilterBtn" type="button" class="btn-secondary">Basculer vue prets</button>
|
||||
</div>
|
||||
<div id="bulkActionsBar" class="bulk-actions-bar">
|
||||
<label class="checkbox-row">
|
||||
@@ -142,7 +177,7 @@
|
||||
<button id="bulkReturnBtn" type="button" class="btn-secondary" disabled>Marquer rendu</button>
|
||||
<button id="bulkDeleteBtn" type="button" class="btn-inline danger" disabled>Supprimer</button>
|
||||
</div>
|
||||
<div class="scanner-zone">
|
||||
<div id="scannerZone" class="scanner-zone">
|
||||
<div class="scanner-header">
|
||||
<strong>Scan camera (mobile)</strong>
|
||||
<p id="scannerStatus" class="scanner-status">Camera inactive.</p>
|
||||
@@ -155,7 +190,7 @@
|
||||
<p id="scannerLastCode" class="scanner-last-code hidden"></p>
|
||||
</div>
|
||||
|
||||
<div class="search-zone">
|
||||
<div id="searchZone" class="search-zone">
|
||||
<label>
|
||||
Recherche rapide anti-doublon
|
||||
<input id="quickSearchInput" placeholder="Ex: Destiny, Final Fantasy, Zelda..." />
|
||||
@@ -226,6 +261,7 @@
|
||||
<button id="nextPageBtn" type="button" class="btn-secondary">Suivant</button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
<div id="toastContainer" class="toast-container" aria-live="polite" aria-atomic="true"></div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user