313 lines
16 KiB
HTML
313 lines
16 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="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
|
<link rel="stylesheet" href="../css/public.css">
|
|
<link rel="stylesheet" href="../css/admin.css">
|
|
</head>
|
|
<body>
|
|
<div class="admin-wrap">
|
|
|
|
<!-- ═══ BANNIÈRE SÉCURITÉ ═══ -->
|
|
<div id="security-banner" class="security-banner" style="display:none;">
|
|
<span><i class="ti ti-alert-triangle"></i> Attention : Aucun mot de passe défini. Sécuriser le compte.</span>
|
|
<button class="btn-action primary btn-small" onclick="openPasswordModal()">Sécuriser</button>
|
|
</div>
|
|
|
|
<!-- ═══ EN-TÊTE ═══ -->
|
|
<header class="admin-header">
|
|
<div class="header-titles">
|
|
<h1>Espace <span>Admin</span></h1>
|
|
<p>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" onclick="openConfigModal()">
|
|
<i class="ti ti-settings"></i> Configuration
|
|
</button>
|
|
<button class="btn-action" onclick="openPasswordModal()">
|
|
<i class="ti ti-shield-lock"></i> Sécurité
|
|
</button>
|
|
<button class="btn-action danger-solid" onclick="logout()">
|
|
<i class="ti ti-logout"></i> Quitter
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ═══ ONGLETS ═══ -->
|
|
<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-star"></i> Mes Critiques
|
|
</button>
|
|
<button id="btn-tab-videotheque" class="tab-btn" onclick="switchAdminTab('videotheque')">
|
|
<i class="ti ti-video"></i> Ma 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 style="display:flex; gap:0.8rem; align-items:center;">
|
|
<label class="physical-filter-admin" style="display:none;">
|
|
<input type="checkbox" id="admin-physical-checkbox">
|
|
<span class="checkmark"></span>
|
|
<span class="filter-text">Uniquement support physique / Cinéma</span>
|
|
</label>
|
|
<button class="btn-action primary" onclick="openAddModal()">
|
|
<i class="ti ti-plus"></i> Ajouter une œuvre
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ BARRE D'ACTIONS GROUPÉES ═══ -->
|
|
<div id="bulk-actions-bar" class="bulk-actions-bar" style="display:none;">
|
|
<span><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>
|
|
|
|
<!-- ═══ TABLEAU ═══ -->
|
|
<div class="table-container">
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:40px; text-align:center;">
|
|
<input type="checkbox" id="select-all-checkbox">
|
|
</th>
|
|
<th style="width:70px;">Affiche</th>
|
|
<th>Titre</th>
|
|
<th style="width:80px;">Année</th>
|
|
<th style="width:180px;">Réalisateur</th>
|
|
<th style="width:140px;">Informations</th>
|
|
<th style="width:100px; text-align:center;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="admin-table-body">
|
|
<!-- Rempli dynamiquement par admin.js -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- ═══ COMPTEUR + PAGINATION ═══ -->
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-top:1rem; flex-wrap:wrap; gap:1rem;">
|
|
<span id="admin-count-label" class="count">0 élément(s)</span>
|
|
<div id="pagination-container" class="pagination"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|
MODALES
|
|
═══════════════════════════════════════════════════════════ -->
|
|
|
|
<!-- ═══ MODALE CONFIGURATION ═══ -->
|
|
<div id="config-modal" class="overlay">
|
|
<div class="modal">
|
|
<button class="modal-close" onclick="closeConfigModal()"><i class="ti ti-x"></i></button>
|
|
<h3 class="modal-h"><i class="ti ti-settings"></i> Configuration</h3>
|
|
<div class="form-grid">
|
|
<div class="form-group full">
|
|
<label>Clé API TMDB</label>
|
|
<input type="text" id="tmdb-key-input" placeholder="Entrez votre clé TMDB">
|
|
</div>
|
|
<div class="form-group full">
|
|
<label>Clé API UPCMDB (fallback import vidéothèque)</label>
|
|
<input type="text" id="upcmdb-key-input" placeholder="Clé gratuite sur upcmdb.com">
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; justify-content:flex-end; gap:0.6rem; margin-top:1.5rem;">
|
|
<button class="btn-action outline" onclick="closeConfigModal()">Annuler</button>
|
|
<button class="btn-action primary" onclick="saveConfigKeys()">Sauvegarder</button>
|
|
</div>
|
|
<!-- ═══ ZONE D'IMPORT ═══ -->
|
|
<div class="import-section">
|
|
<h3 id="import-title"><i class="ti ti-upload"></i> Importer ma Vidéothèque</h3>
|
|
<p id="import-desc">Importez votre CSV. Le système extraira les codes EAN pour récupérer les jaquettes HD et métadonnées via Blu-ray.com, MovieCovers et TMDB.</p>
|
|
<label class="import-box" for="csv-file">
|
|
<i class="ti ti-file-upload"></i>
|
|
<p><strong>Cliquez pour sélectionner vos fichiers CSV</strong></p>
|
|
<p>Le système détectera automatiquement le format selon l'onglet actif.</p>
|
|
<input type="file" id="csv-file" accept=".csv" multiple>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ MODALE SÉCURITÉ ═══ -->
|
|
<div id="password-modal" class="overlay">
|
|
<div class="modal">
|
|
<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é</h3>
|
|
<div id="pwd-error" style="display:none; background:rgba(255,71,87,0.1); border:1px solid rgba(255,71,87,0.3); color:#ff4757; padding:0.8rem; border-radius:8px; margin-bottom:1rem; font-size:0.9rem;"></div>
|
|
<div class="form-grid">
|
|
<div class="form-group full">
|
|
<label>Nouveau mot de passe</label>
|
|
<input type="password" id="new-password-input" placeholder="Minimum 4 caractères">
|
|
</div>
|
|
<div class="form-group full">
|
|
<label>Confirmer</label>
|
|
<input type="password" id="new-password-confirm" placeholder="Retapez le mot de passe">
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; justify-content:flex-end; gap:0.6rem; margin-top:1.5rem;">
|
|
<button class="btn-action outline" onclick="closePasswordModal()">Annuler</button>
|
|
<button class="btn-action primary" onclick="saveNewPassword()">Mettre à jour</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ MODALE CONFIRMATION SUPPRESSION ═══ -->
|
|
<div id="confirm-modal" class="overlay">
|
|
<div class="modal" style="max-width:450px;">
|
|
<h3 class="modal-h"><i class="ti ti-alert-triangle" style="color:#ff4757;"></i> Suppression définitive</h3>
|
|
<p style="color:var(--muted); margin-bottom:1.5rem; line-height:1.6;">
|
|
Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible.
|
|
</p>
|
|
<div style="display:flex; justify-content:flex-end; gap:0.6rem;">
|
|
<button class="btn-action outline" onclick="closeConfirmModal()">Annuler</button>
|
|
<button id="confirm-btn" class="btn-action danger-solid">Oui, supprimer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ MODALE PROGRESSION IMPORT ═══ -->
|
|
<div id="import-progress-modal" class="overlay">
|
|
<div class="modal" style="max-width:480px;">
|
|
<h3 id="import-modal-title" class="modal-h"><i class="ti ti-video"></i> Import en cours...</h3>
|
|
<p id="import-modal-desc" style="color:var(--muted); margin-bottom:1rem;">Préparation et récupération des données...</p>
|
|
<div class="progress-container">
|
|
<div id="import-progress-bar" class="progress-bar"></div>
|
|
</div>
|
|
<p id="import-modal-counter" style="text-align:center; font-size:1.4rem; font-weight:700; color:var(--gold); margin:0;">0 / 0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ MODALE ÉDITION / AJOUT ═══ -->
|
|
<div id="admin-modal" class="overlay">
|
|
<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-edit"></i> Éditer / Ajouter</h3>
|
|
<form id="film-form">
|
|
<input type="hidden" id="f-id">
|
|
|
|
<!-- Champs communs -->
|
|
<div class="form-grid">
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Titre</label>
|
|
<input type="text" id="f-title" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Réalisateur</label>
|
|
<input type="text" id="f-director">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Année</label>
|
|
<input type="text" id="f-year" placeholder="Ex: 2024">
|
|
</div>
|
|
<div class="form-group full">
|
|
<label>Affiche (URL)</label>
|
|
<input type="text" id="f-poster" placeholder="https://...">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ CHAMPS CRITIQUES ═══ -->
|
|
<div id="form-critique-fields" style="display:none;">
|
|
<div class="divider"><i class="ti ti-star"></i> Critique</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Note (sur 5)</label>
|
|
<input type="number" id="f-rating" min="0" max="5" step="0.5" value="3">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Plateforme de Streaming</label>
|
|
<input type="text" id="f-streaming" placeholder="Ex: Netflix, Support physique...">
|
|
</div>
|
|
<div class="form-group full">
|
|
<label>Critique</label>
|
|
<textarea id="f-review" rows="4" placeholder="Votre avis sur l'œuvre..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ CHAMPS VIDÉOTHÈQUE ═══ -->
|
|
<div id="form-videotheque-fields" style="display:none;">
|
|
<div class="divider"><i class="ti ti-video"></i> Informations physiques</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Format</label>
|
|
<select id="f-format">
|
|
<option value="">—</option>
|
|
<option value="Blu-ray">Blu-ray</option>
|
|
<option value="4K Ultra HD">4K Ultra HD</option>
|
|
<option value="3D Blu-ray">3D Blu-ray</option>
|
|
<option value="DVD">DVD</option>
|
|
<option value="VHS">VHS</option>
|
|
<option value="Coffret">Coffret</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Durée</label>
|
|
<input type="text" id="f-length" placeholder="Ex: 125 min">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Éditeur</label>
|
|
<input type="text" id="f-publisher">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Code EAN</label>
|
|
<input type="text" id="f-ean" placeholder="Ex: 5051889000112">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nombre de disques</label>
|
|
<input type="number" id="f-discs" min="1" value="1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Aspect Ratio</label>
|
|
<input type="text" id="f-aspect" placeholder="Ex: 2.35:1">
|
|
</div>
|
|
<div class="form-group full">
|
|
<label>Acteurs (max 4)</label>
|
|
<input type="text" id="f-actors" placeholder="Acteur 1, Acteur 2, ...">
|
|
</div>
|
|
<div class="form-group full">
|
|
<label>Description / Synopsis</label>
|
|
<textarea id="f-description" rows="4"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; justify-content:flex-end; gap:0.6rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border);">
|
|
<button type="button" class="btn-action outline" onclick="closeAdminModal()">Annuler</button>
|
|
<button type="submit" class="btn-action primary">
|
|
<i class="ti ti-check"></i> Enregistrer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══ MODALE SUCCÈS ═══ -->
|
|
<div id="success-modal" class="overlay">
|
|
<div class="modal" style="max-width:420px; text-align:center;">
|
|
<div style="width:60px; height:60px; border-radius:50%; background:rgba(34,197,94,0.15); color:#22c55e; display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 1rem;">
|
|
<i class="ti ti-check"></i>
|
|
</div>
|
|
<h3 class="modal-h" style="justify-content:center; border:none; padding:0;">Importation terminée</h3>
|
|
<p id="success-modal-message" style="color:var(--muted); margin-bottom:1.5rem; line-height:1.6;"></p>
|
|
<button class="btn-action primary" onclick="closeSuccessModal()">OK</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="..\js\admin.js"></script>
|
|
</body>
|
|
</html> |