dev
16736e2e7a
Docker / docker (push) Successful in 1m15s
- arte_api.py : GENRE_PAGES devient une liste de (nom, url), chaque concert reçoit un champ "categories" avec ses genres d'appartenance - main.py : endpoint /api/categories + param ?category= sur /api/concerts - index.html : barre de pills catégories (Tout + 10 genres) - style.css : styles .cat-bar / .cat-pill avec pill active en or - app.js : chargement dynamique des pills, filtre catégorie dans le state Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
132 lines
5.7 KiB
HTML
132 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Arte Concert</title>
|
|
<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=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ══ HEADER ═════════════════════════════════════════════════════════════ -->
|
|
<header class="header">
|
|
<div class="header-inner">
|
|
<div class="brand">
|
|
<span class="brand-logo">▶</span>
|
|
<div class="brand-text">
|
|
<span class="brand-name">ARTE</span>
|
|
<span class="brand-sub">CONCERT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-wrap">
|
|
<svg class="search-icon" viewBox="0 0 20 20" fill="none">
|
|
<circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M13 13l3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
<input id="search" class="search-input" type="text" placeholder="Rechercher un concert, un artiste…" autocomplete="off" />
|
|
<kbd class="search-kbd">⌘K</kbd>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<button class="btn-ghost" id="btn-refresh" title="Actualiser le catalogue">
|
|
<svg viewBox="0 0 20 20" fill="none" width="16" height="16">
|
|
<path d="M3 10a7 7 0 0 1 12-4.9M17 10a7 7 0 0 1-12 4.9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<path d="M15 5.5V3M3 14.5V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
<button class="btn-ghost btn-dl-toggle" id="btn-dl-toggle" title="Téléchargements">
|
|
<svg viewBox="0 0 20 20" fill="none" width="16" height="16">
|
|
<path d="M10 3v9M7 9l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M4 15h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
<span class="dl-badge" id="dl-badge" hidden>0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ══ MAIN ═══════════════════════════════════════════════════════════════ -->
|
|
<main class="main">
|
|
|
|
<!-- categories -->
|
|
<div class="cat-bar" id="cat-bar">
|
|
<button class="cat-pill active" data-cat="">Tout</button>
|
|
</div>
|
|
|
|
<!-- status bar -->
|
|
<div class="status-bar" id="status-bar">
|
|
<span id="status-text">Chargement du catalogue…</span>
|
|
</div>
|
|
|
|
<!-- grid -->
|
|
<div class="grid" id="grid">
|
|
<!-- skeleton placeholders -->
|
|
<div class="skeleton"></div><div class="skeleton"></div>
|
|
<div class="skeleton"></div><div class="skeleton"></div>
|
|
<div class="skeleton"></div><div class="skeleton"></div>
|
|
<div class="skeleton"></div><div class="skeleton"></div>
|
|
</div>
|
|
|
|
<!-- pagination -->
|
|
<nav class="pagination" id="pagination" hidden></nav>
|
|
|
|
</main>
|
|
|
|
<!-- ══ MODAL ══════════════════════════════════════════════════════════════ -->
|
|
<div class="modal-overlay" id="modal-overlay" hidden>
|
|
<div class="modal" id="modal">
|
|
<button class="modal-close" id="modal-close">✕</button>
|
|
<div class="modal-thumb-wrap">
|
|
<img class="modal-thumb" id="modal-thumb" src="" alt="" />
|
|
<div class="modal-thumb-gradient"></div>
|
|
<span class="modal-duration-badge" id="modal-dur-badge"></span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h2 class="modal-title" id="modal-title"></h2>
|
|
<p class="modal-meta" id="modal-meta"></p>
|
|
<p class="modal-desc" id="modal-desc"></p>
|
|
<div class="modal-actions">
|
|
<button class="btn-download" id="btn-download">
|
|
<svg viewBox="0 0 20 20" fill="none" width="16" height="16">
|
|
<path d="M10 3v9M7 9l3 3 3-3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M4 15h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
</svg>
|
|
Télécharger
|
|
</button>
|
|
<a class="btn-watch" id="btn-watch" href="#" target="_blank" rel="noopener">
|
|
<svg viewBox="0 0 20 20" fill="none" width="14" height="14">
|
|
<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M8 7.5l5 2.5-5 2.5V7.5z" fill="currentColor"/>
|
|
</svg>
|
|
Voir sur Arte
|
|
</a>
|
|
</div>
|
|
<div class="dl-progress-wrap" id="dl-progress-wrap" hidden>
|
|
<div class="dl-progress-bar">
|
|
<div class="dl-progress-fill" id="dl-progress-fill"></div>
|
|
</div>
|
|
<span class="dl-progress-label" id="dl-progress-label">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══ DOWNLOADS PANEL ════════════════════════════════════════════════════ -->
|
|
<div class="dl-panel" id="dl-panel" hidden>
|
|
<div class="dl-panel-header">
|
|
<span class="dl-panel-title">Téléchargements</span>
|
|
<button class="btn-ghost" id="dl-panel-close">✕</button>
|
|
</div>
|
|
<div class="dl-panel-body" id="dl-panel-body">
|
|
<p class="dl-empty">Aucun téléchargement.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|