258 lines
10 KiB
HTML
258 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Administration — Mon Cinéma</title>
|
|
<link rel="stylesheet" href="../css/public.css">
|
|
<link rel="stylesheet" href="../css/admin.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="site-wrap admin-wrap">
|
|
|
|
<div class="security-banner" id="security-banner" style="display:none;">
|
|
<div class="sec-text">
|
|
<i class="ti ti-alert-triangle"></i>
|
|
<strong>Attention :</strong> Aucun mot de passe défini pour protéger l'administration.
|
|
</div>
|
|
<button onclick="openPasswordModal()" class="btn-action danger-solid btn-small">Sécuriser le compte</button>
|
|
</div>
|
|
|
|
<header class="site-header admin-header">
|
|
<div class="header-titles">
|
|
<h1 class="site-title">Espace <span>Admin</span></h1>
|
|
<p class="site-subtitle">Gestion centralisée de votre cinémathèque</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="../index.html" class="btn-action outline">
|
|
<i class="ti ti-external-link"></i> Voir le site
|
|
</a>
|
|
<button class="btn-action outline" onclick="openConfigModal()">
|
|
<i class="ti ti-settings"></i> Configuration
|
|
</button>
|
|
<button class="btn-action outline" onclick="openPasswordModal()">
|
|
<i class="ti ti-shield-lock"></i> Sécurité
|
|
</button>
|
|
<button class="btn-action danger outline" onclick="logout()">
|
|
<i class="ti ti-logout"></i> Quitter
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="pub-tabs-container">
|
|
<div class="pub-tabs">
|
|
<button id="btn-tab-critique" class="tab-btn active" onclick="switchAdminTab('critique')">
|
|
<i class="ti ti-message-star"></i> Mes Critiques
|
|
</button>
|
|
<button id="btn-tab-videotheque" class="tab-btn" onclick="switchAdminTab('videotheque')">
|
|
<i class="ti ti-device-tv"></i> Ma Vidéothèque
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-toolbar">
|
|
<div class="toolbar-left">
|
|
<span class="count" id="admin-count-label">0 élément</span>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<button class="btn-action primary" onclick="openAddModal()">
|
|
<i class="ti ti-plus"></i> Ajouter une œuvre
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bulk-actions-bar" id="bulk-actions-bar" style="display:none;">
|
|
<span><i class="ti ti-checkbox"></i> <strong id="bulk-count">0</strong> élément(s) sélectionné(s)</span>
|
|
<button class="btn-action danger-solid btn-small" onclick="executeBulkDelete()">
|
|
<i class="ti ti-trash"></i> Supprimer la sélection
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50px; text-align: center;">
|
|
<input type="checkbox" id="select-all-checkbox" onclick="toggleSelectAll(this)">
|
|
</th>
|
|
<th style="width: 80px; text-align: center;">Affiche</th>
|
|
<th>Titre</th>
|
|
<th>Année</th>
|
|
<th>Réalisateur</th>
|
|
<th>Informations</th>
|
|
<th style="width: 100px; text-align: right;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="admin-table-body">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<footer style="text-align: center; margin-top: 3rem; color: var(--muted); font-size: 0.9rem;">
|
|
Mon Cinéma — Administration
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<div class="overlay" id="admin-modal">
|
|
<div class="modal" style="max-width: 700px;">
|
|
<button class="modal-close" onclick="closeAdminModal()"><i class="ti ti-x"></i></button>
|
|
<h3 class="modal-h"><i class="ti ti-movie"></i> Éditer l'œuvre</h3>
|
|
|
|
<form id="film-form">
|
|
<input type="hidden" id="f-id">
|
|
|
|
<div class="form-grid">
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Titre</label>
|
|
<input type="text" id="f-title" required placeholder="Ex: Inception">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Année</label>
|
|
<input type="text" id="f-year" placeholder="Ex: 2010">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Réalisateur</label>
|
|
<input type="text" id="f-director" placeholder="Ex: Christopher Nolan">
|
|
</div>
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>URL de l'affiche</label>
|
|
<input type="text" id="f-poster" placeholder="https://...">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-critique-fields">
|
|
<div class="divider">Spécifique aux critiques</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Note (sur 5)</label>
|
|
<select id="f-rating">
|
|
<option value="5">5 - Chef d'œuvre</option>
|
|
<option value="4">4 - Très bon</option>
|
|
<option value="3" selected>3 - Bon</option>
|
|
<option value="2">2 - Moyen</option>
|
|
<option value="1">1 - Mauvais</option>
|
|
<option value="0">0 - Navet</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Lien Streaming / VOD</label>
|
|
<input type="text" id="f-streaming" placeholder="Lien Netflix, Canal+, etc.">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Critique / Avis</label>
|
|
<textarea id="f-review" rows="4" placeholder="Votre avis sur le film..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-videotheque-fields" style="display:none;">
|
|
<div class="divider">Spécifique à la vidéothèque</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Format</label>
|
|
<select id="f-format">
|
|
<option value="Blu-ray 4K">Blu-ray 4K</option>
|
|
<option value="Blu-ray">Blu-ray</option>
|
|
<option value="DVD">DVD</option>
|
|
<option value="VHS">VHS</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Éditeur</label>
|
|
<input type="text" id="f-publisher" placeholder="Ex: Warner Bros">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Durée</label>
|
|
<input type="text" id="f-length" placeholder="Ex: 148 min">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Format Image</label>
|
|
<input type="text" id="f-aspect" placeholder="Ex: 2.39:1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Code Barre (EAN)</label>
|
|
<input type="text" id="f-ean" placeholder="Ex: 3344428068...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nombre de disques</label>
|
|
<input type="number" id="f-discs" value="1" min="1">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Description / Synopsis</label>
|
|
<textarea id="f-description" rows="3" placeholder="Notes ou synopsis de l'édition..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: right; margin-top: 1.5rem;">
|
|
<button type="submit" class="btn-action primary"><i class="ti ti-device-floppy"></i> Sauvegarder</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="config-modal">
|
|
<div class="modal" style="max-width: 500px;">
|
|
<button class="modal-close" onclick="closeConfigModal()"><i class="ti ti-x"></i></button>
|
|
<h3 class="modal-h"><i class="ti ti-settings"></i> Configuration globale</h3>
|
|
|
|
<div class="form-group" style="margin-bottom: 2rem;">
|
|
<label>Clé API TMDB (Pour récupération auto)</label>
|
|
<div style="display:flex; gap:0.5rem;">
|
|
<input type="text" id="tmdb-key-input" placeholder="Votre clé secrète TMDB">
|
|
<button class="btn-action outline" onclick="saveTmdbKey()"><i class="ti ti-check"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider">Importation de données</div>
|
|
<div class="import-box">
|
|
<i class="ti ti-file-upload"></i>
|
|
<h4>Importer un fichier CSV</h4>
|
|
<p style="color:var(--muted); font-size:0.85rem; margin-top:0.5rem;">Glissez votre fichier ici ou cliquez pour parcourir</p>
|
|
<input type="file" id="csv-file" accept=".csv">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="password-modal">
|
|
<div class="modal" style="max-width: 400px;">
|
|
<button class="modal-close" onclick="closePasswordModal()"><i class="ti ti-x"></i></button>
|
|
<h3 class="modal-h"><i class="ti ti-shield-lock"></i> Sécurité du compte</h3>
|
|
|
|
<div class="form-group">
|
|
<label>Nouveau mot de passe</label>
|
|
<input type="password" id="new-password-input" placeholder="Minimum 4 caractères">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Confirmation</label>
|
|
<input type="password" id="new-password-confirm" placeholder="Répétez le mot de passe">
|
|
</div>
|
|
<p id="pwd-error" style="color:#ff6b6b; font-size:0.85rem; display:none; margin-bottom:1rem;"></p>
|
|
|
|
<div style="text-align: right;">
|
|
<button class="btn-action primary" onclick="saveNewPassword()"><i class="ti ti-lock-check"></i> Mettre à jour</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="confirm-modal">
|
|
<div class="modal" style="max-width: 380px; text-align: center;">
|
|
<button class="modal-close" onclick="closeConfirmModal()"><i class="ti ti-x"></i></button>
|
|
<div style="font-size: 3rem; color: #ff6b6b; margin-bottom: 1rem;">
|
|
<i class="ti ti-alert-circle"></i>
|
|
</div>
|
|
<h3 style="color:var(--text); margin-bottom: 1rem; font-size: 1.2rem;">Suppression définitive</h3>
|
|
<p style="margin-bottom: 2rem; color:var(--muted); font-size: 0.95rem;">Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible et supprimera les données de la base.</p>
|
|
<div style="display: flex; gap: 1rem; justify-content: center;">
|
|
<button class="btn-action outline" onclick="closeConfirmModal()">Annuler</button>
|
|
<button class="btn-action danger-solid" id="confirm-btn">Oui, supprimer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../js/admin.js"></script>
|
|
</body>
|
|
</html> |