Actualiser admin/dashboard.html

admin/dashboard.html

@@ -80,6 +80,143 @@
 
 </div>
 
+
+<div class="overlay" id="admin-modal" onclick="if(event.target===this) closeAdminModal()">
+  <div class="modal" style="max-width:600px;">
+    <button class="modal-close" onclick="closeAdminModal()"><i class="ti ti-x"></i></button>
+    <h3 class="modal-h" id="modal-form-title">Ajouter une œuvre</h3>
+
+    <form id="film-form" onsubmit="saveFilmForm(event)">
+      <input type="hidden" id="f-id">
+
+      <div class="form-group">
+        <label>Titre du film *</label>
+        <input type="text" id="f-title" required autocomplete="off">
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label>Année</label>
+          <input type="number" id="f-year" min="1800" max="2100">
+        </div>
+        <div class="form-group">
+          <label>Réalisateur</label>
+          <input type="text" id="f-director">
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label>URL de l'affiche</label>
+        <input type="url" id="f-poster" placeholder="https://image.tmdb.org/…">
+      </div>
+
+      <div id="form-critique-fields">
+        <div class="form-group">
+          <label>Note (1 à 5 étoiles)</label>
+          <select id="f-rating">
+            <option value="5">★★★★★ (5/5)</option>
+            <option value="4">★★★★☆ (4/5)</option>
+            <option value="3" selected>★★★☆☆ (3/5)</option>
+            <option value="2">★★☆☆☆ (2/5)</option>
+            <option value="1">★☆☆☆☆ (1/5)</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Critique</label>
+          <textarea id="f-review" rows="5"></textarea>
+        </div>
+        <div class="form-group">
+          <label>Plateforme / Mode de visionnage</label>
+          <input type="text" id="f-streaming" placeholder="Ex : Canal+, Cinéma, Blu-ray…">
+        </div>
+      </div>
+
+      <div id="form-videotheque-fields" style="display:none;">
+        <div class="form-row">
+          <div class="form-group">
+            <label>Format physique</label>
+            <input type="text" id="f-format" placeholder="4K Ultra HD, Blu-ray, DVD…">
+          </div>
+          <div class="form-group">
+            <label>Durée (minutes)</label>
+            <input type="number" id="f-length">
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label>Éditeur</label>
+            <input type="text" id="f-publisher">
+          </div>
+          <div class="form-group">
+            <label>Format image</label>
+            <input type="text" id="f-aspect" placeholder="2.39:1, 1.85:1…">
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group">
+            <label>Code barre (EAN)</label>
+            <input type="text" id="f-ean">
+          </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>Synopsis / Notes d'édition</label>
+          <textarea id="f-description" rows="4"></textarea>
+        </div>
+      </div>
+
+      <button type="submit" class="btn-save"><i class="ti ti-device-floppy"></i> Enregistrer</button>
+    </form>
+  </div>
+</div>
+
+<div class="overlay" id="config-modal" onclick="if(event.target===this) closeConfigModal()">
+  <div class="modal" style="max-width:440px;">
+    <button class="modal-close" onclick="closeConfigModal()"><i class="ti ti-x"></i></button>
+    <h3 class="modal-h"><i class="ti ti-key"></i> Clé API TMDB</h3>
+    <div class="api-notice">
+      Obtenez votre clé gratuite sur <a href="https://www.themoviedb.org/settings/api" target="_blank">themoviedb.org</a>.
+      Elle sera chiffrée en base de données.
+    </div>
+    <div class="form-group">
+      <label>Clé API (v3)</label>
+      <input type="password" id="tmdb-key-input" placeholder="Saisir la clé…">
+    </div>
+    <button class="btn-save" onclick="saveTmdbKey()">Sauvegarder</button>
+  </div>
+</div>
+
+<div class="overlay" id="password-modal" onclick="if(event.target===this) closePasswordModal()">
+  <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-lock"></i> Changer le mot de passe</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:#c0392b; font-size:0.82rem; display:none; margin-bottom:0.8rem;"></p>
+    <button class="btn-save" onclick="saveNewPassword()">Mettre à jour</button>
+  </div>
+</div>
+
+<div class="overlay" id="confirm-modal" onclick="if(event.target===this) closeConfirmModal()">
+  <div class="modal" style="max-width:350px; text-align:center;">
+    <h3 class="modal-h" style="color:var(--red);">Suppression</h3>
+    <p style="margin-bottom: 2rem; color:var(--text-secondary);">Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible.</p>
+    <div style="display:flex; gap:1rem;">
+      <button class="btn btn-outline" style="flex:1;" onclick="closeConfirmModal()">Annuler</button>
+      <button class="btn btn-danger" style="flex:1;" id="confirm-btn">Supprimer</button>
+    </div>
+  </div>
+</div>
+
 <script src="../js/admin.js"></script>
 </body>
 </html>