100 lines
4.0 KiB
HTML
100 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - Cinémathèque</title>
|
|
<link rel="stylesheet" href="admin.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="dashboard-header">
|
|
<div class="header-titles">
|
|
<h1>Gestion <span>Cinémathèque</span></h1>
|
|
<p>Administrez vos critiques et votre vidéothèque</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn-action" onclick="openAddModal()"><i class="ti ti-plus"></i> Ajouter</button>
|
|
<button class="btn-action" onclick="executeBulkDelete()"><i class="ti ti-trash"></i> Supprimer</button>
|
|
<button class="btn-action secondary" onclick="openConfigModal()"><i class="ti ti-settings"></i> Config</button>
|
|
<button class="btn-action outline" onclick="logout()"><i class="ti ti-logout"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ONGLETS CENTRÉS -->
|
|
<div class="tabs-container">
|
|
<div class="tab-btns">
|
|
<button class="tab-btn active" id="btn-tab-critique" onclick="switchAdminTab('critique')">
|
|
<i class="ti ti-star"></i> Critiques
|
|
</button>
|
|
<button class="tab-btn" id="btn-tab-videotheque" onclick="switchAdminTab('videotheque')">
|
|
<i class="ti ti-video"></i> Vidéothèque
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BARRE D'OUTILS -->
|
|
<div class="admin-toolbar">
|
|
<div class="search-box">
|
|
<i class="ti ti-search"></i>
|
|
<input type="text" id="search-input" placeholder="Rechercher un titre, un réalisateur...">
|
|
</div>
|
|
<div class="admin-count">
|
|
<span id="admin-count-label">0 élément(s)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TABLEAU SANS AFFICHE (Évite le scroll horizontal) -->
|
|
<div class="table-container">
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th><input type="checkbox" id="select-all-checkbox"></th>
|
|
<th>Titre</th>
|
|
<th>Année</th>
|
|
<th>Réalisateur</th>
|
|
<th>Informations</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="admin-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- PAGINATION -->
|
|
<div id="pagination-container" class="pagination"></div>
|
|
|
|
<!-- MODALES (Structure simplifiée) -->
|
|
<div class="overlay" id="admin-modal">
|
|
<div class="modal">
|
|
<button class="modal-close"><i class="ti ti-x"></i></button>
|
|
<h2>Formulaire</h2>
|
|
<form id="film-form">
|
|
<div class="form-grid">
|
|
<input type="hidden" id="f-id">
|
|
<input type="text" id="f-title" placeholder="Titre" required>
|
|
<input type="number" id="f-year" placeholder="Année">
|
|
<input type="text" id="f-director" placeholder="Réalisateur">
|
|
<input type="text" id="f-poster" placeholder="URL Affiche">
|
|
<div id="form-critique-fields">
|
|
<input type="number" id="f-rating" placeholder="Note (1-5)" step="0.1">
|
|
<textarea id="f-review" placeholder="Avis..."></textarea>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn-action secondary" style="width:100%; margin-top:1rem;">Sauvegarder</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="confirm-modal">
|
|
<div class="modal">
|
|
<button class="modal-close"><i class="ti ti-x"></i></button>
|
|
<h3>Confirmation</h3>
|
|
<p>Êtes-vous sûr de vouloir supprimer cet élément ?</p>
|
|
<button id="confirm-btn" class="btn-action secondary">Confirmer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="admin.js"></script>
|
|
</body>
|
|
</html> |