300 lines
14 KiB
HTML
300 lines
14 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\admin.css">
|
|
<link rel="stylesheet" href="..\css\public.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabler-icons@2.6.0/font/tabler-icons.min.css">
|
|
</head>
|
|
<body class="admin-body">
|
|
<div class="admin-wrap">
|
|
<!-- Security Banner -->
|
|
<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 danger-solid btn-small" onclick="openPasswordModal()">Sécuriser</button>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<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-eye"></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-lock"></i> Sécurité
|
|
</button>
|
|
<button class="btn-action danger-solid" onclick="logout()">
|
|
<i class="ti ti-logout"></i> Quitter
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tabs -->
|
|
<div class="pub-tabs-container">
|
|
<div class="pub-tabs">
|
|
<button class="tab-btn active" id="btn-tab-critique" onclick="switchAdminTab('critique')">
|
|
<i class="ti ti-star"></i> Mes Critiques
|
|
</button>
|
|
<button class="tab-btn" id="btn-tab-videotheque" onclick="switchAdminTab('videotheque')">
|
|
<i class="ti ti-video"></i> Ma Vidéothèque
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="admin-toolbar">
|
|
<div style="display: flex; gap: 1rem; align-items: center;">
|
|
<button class="btn-action primary" onclick="openAddModal()">
|
|
<i class="ti ti-plus"></i> Ajouter une œuvre
|
|
</button>
|
|
<span class="count" id="admin-count-label">0 élément(s)</span>
|
|
</div>
|
|
<div class="search-box">
|
|
<i class="ti ti-search"></i>
|
|
<input type="text" id="search-input" placeholder="Rechercher...">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Actions Bar -->
|
|
<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>
|
|
|
|
<!-- Table -->
|
|
<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: 60px;">Affiche</th>
|
|
<th>Titre</th>
|
|
<th style="width: 80px;">Année</th>
|
|
<th>Réalisateur</th>
|
|
<th style="width: 120px;">Informations</th>
|
|
<th style="width: 100px;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="admin-table-body">
|
|
<!-- Dynamic content -->
|
|
</tbody>
|
|
</table>
|
|
<div id="pagination-container" class="pagination"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit/Add Modal -->
|
|
<div class="overlay" id="admin-modal">
|
|
<div class="modal">
|
|
<button class="modal-close" onclick="closeAdminModal()">
|
|
<i class="ti ti-x"></i>
|
|
</button>
|
|
<h2 class="modal-h">
|
|
<i class="ti ti-edit"></i> Éditer l'œuvre
|
|
</h2>
|
|
<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>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Année</label>
|
|
<input type="text" id="f-year">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Réalisateur</label>
|
|
<input type="text" id="f-director">
|
|
</div>
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>URL Affiche</label>
|
|
<input type="text" id="f-poster">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Critique Fields -->
|
|
<div id="form-critique-fields">
|
|
<div class="divider">Champs Critiques</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>Lien Streaming</label>
|
|
<input type="text" id="f-streaming">
|
|
</div>
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Critique</label>
|
|
<textarea id="f-review" rows="4"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Videotheque Fields -->
|
|
<div id="form-videotheque-fields" style="display: none;">
|
|
<div class="divider">Champs 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">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Durée (min)</label>
|
|
<input type="text" id="f-length">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Ratio Image</label>
|
|
<input type="text" id="f-aspect">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Code Barre (EAN)</label>
|
|
<input type="text" id="f-ean">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nb disques</label>
|
|
<input type="number" id="f-discs" min="1" value="1">
|
|
</div>
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Description / État</label>
|
|
<textarea id="f-description" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
|
|
<button type="button" class="btn-action outline" onclick="closeAdminModal()">Annuler</button>
|
|
<button type="submit" class="btn-action primary">Enregistrer</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Modal -->
|
|
<div class="overlay" id="config-modal">
|
|
<div class="modal">
|
|
<button class="modal-close" onclick="closeConfigModal()">
|
|
<i class="ti ti-x"></i>
|
|
</button>
|
|
<h2 class="modal-h">
|
|
<i class="ti ti-settings"></i> Configuration
|
|
</h2>
|
|
|
|
<div class="form-grid">
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Clé API TMDB</label>
|
|
<input type="text" id="tmdb-key-input" placeholder="Pour les critiques (réalisateur, streaming)">
|
|
</div>
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Clé API EAN-Search</label>
|
|
<input type="text" id="ean-search-key-input" placeholder="Recherche par code-barres (Vidéothèque)">
|
|
</div>
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Clé API Barcode Lookup</label>
|
|
<input type="text" id="barcode-lookup-key-input" placeholder="Recherche par code-barres (Vidéothèque)">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
|
|
<button class="btn-action outline" onclick="closeConfigModal()">Annuler</button>
|
|
<button class="btn-action primary" onclick="saveConfigKeys()">Sauvegarder</button>
|
|
</div>
|
|
|
|
<hr class="divider">
|
|
<h3 style="font-size: 1rem; margin: 1.5rem 0 1rem; color: var(--text);">
|
|
<i class="ti ti-file-upload" style="color: var(--gold); margin-right: 0.5rem;"></i>
|
|
Importer un CSV
|
|
</h3>
|
|
|
|
<label class="import-box" for="csv-file">
|
|
<i class="ti ti-file-upload"></i>
|
|
<p><strong>Cliquez ou déposez votre CSV</strong></p>
|
|
<p style="color: var(--muted); font-size: 0.85rem;">
|
|
Les jaquettes seront recherchées via EAN/UPC
|
|
</p>
|
|
</label>
|
|
<input type="file" id="csv-file" accept=".csv" style="display: none;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Modal -->
|
|
<div class="overlay" id="password-modal">
|
|
<div class="modal">
|
|
<button class="modal-close" onclick="closePasswordModal()">
|
|
<i class="ti ti-x"></i>
|
|
</button>
|
|
<h2 class="modal-h">
|
|
<i class="ti ti-lock"></i> Sécurité
|
|
</h2>
|
|
<div class="form-grid">
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Nouveau mot de passe</label>
|
|
<input type="password" id="new-password-input">
|
|
</div>
|
|
<div class="form-group" style="grid-column: span 2;">
|
|
<label>Confirmer</label>
|
|
<input type="password" id="new-password-confirm">
|
|
</div>
|
|
</div>
|
|
<div id="pwd-error" style="color: #ff4757; margin: 1rem 0; display: none;"></div>
|
|
<div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
|
|
<button class="btn-action outline" onclick="closePasswordModal()">Annuler</button>
|
|
<button class="btn-action primary" onclick="saveNewPassword()">Mettre à jour</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirm Modal -->
|
|
<div class="overlay" id="confirm-modal">
|
|
<div class="modal" style="max-width: 400px;">
|
|
<h2 class="modal-h">
|
|
<i class="ti ti-alert-triangle" style="color: #ff4757;"></i> Suppression définitive
|
|
</h2>
|
|
<p>Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible.</p>
|
|
<div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
|
|
<button class="btn-action outline" onclick="closeConfirmModal()">Annuler</button>
|
|
<button class="btn-action danger-solid" id="confirm-btn">Oui, supprimer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Modal -->
|
|
<div class="overlay" id="progress-overlay">
|
|
<div class="modal" style="max-width: 400px; text-align: center;">
|
|
<h2 class="modal-h">
|
|
<i class="ti ti-loader" style="animation: spin 1s linear infinite;"></i> Import en cours...
|
|
</h2>
|
|
<p id="progress-text">Préparation et récupération TMDB...</p>
|
|
<div style="background: var(--surface); border-radius: 8px; padding: 0.5rem; margin: 1rem 0;">
|
|
<div id="progress-bar" style="background: var(--gold); height: 8px; border-radius: 4px; width: 0%; transition: width 0.3s;"></div>
|
|
</div>
|
|
<p id="progress-count" style="color: var(--muted);">0 / 0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="..\js\admin.js"></script>
|
|
</body>
|
|
</html> |