✨ added import and export for watched content & progress

Author: LoupesDEV

css/styles.css

@@ -344,6 +344,7 @@ body {
     line-height: 1.3;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
@@ -419,6 +420,53 @@ body {
     background-color: var(--bg-hover);
 }
 
+.export-import-group {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem 0;
+}
+
+.export-import-group .btn {
+    min-width: 180px;
+    justify-content: center;
+    font-size: 1rem;
+    padding: 0.85rem 1.5rem;
+    border-radius: var(--border-radius-large);
+    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.10);
+    transition: box-shadow 0.2s, background 0.2s, color 0.2s;
+}
+
+.export-import-group .btn-primary {
+    background: var(--gradient-primary);
+    color: #fff;
+    border: 1px solid var(--accent);
+}
+
+.export-import-group .btn-primary:hover {
+    background: var(--gradient-hover);
+    color: #fff;
+    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.18);
+}
+
+.export-import-group .btn-secondary {
+    background: var(--bg-card);
+    color: var(--accent);
+    border: 1px solid var(--border);
+}
+
+.export-import-group .btn-secondary:hover {
+    background: var(--border);
+    color: #fff;
+    border-color: var(--accent);
+}
+
+.export-import-group input[type="file"] {
+    display: none;
+}
+
 .rating-filter {
     display: flex;
     align-items: center;

index.html

@@ -51,6 +51,16 @@ <h3>Films populaires</h3>
                 <h3>Séries populaires</h3>
                 <div class="content-grid" id="popularSeries"></div>
             </div>
+
+            <div class="export-import-group">
+                <button class="btn btn-primary" id="exportWatchedBtn">
+                    <i class="fas fa-download"></i> Exporter ma progression
+                </button>
+                <label class="btn btn-secondary" style="cursor:pointer;">
+                    <i class="fas fa-upload"></i> Importer ma progression
+                    <input type="file" id="importWatchedInput" accept=".json" style="display:none;">
+                </label>
+            </div>
         </div>
     </section>
 

js/scripts.js

@@ -55,6 +55,45 @@ document.addEventListener('DOMContentLoaded', async () => {
     showSection('home');
     populateFilters();
     displayPopularContent();
+    
+    const exportBtn = document.getElementById('exportWatchedBtn');
+    const importInput = document.getElementById('importWatchedInput');
+    if (exportBtn) {
+        exportBtn.addEventListener('click', () => {
+            const data = localStorage.getItem('watchedContent') || '{"films":{},"series":{}}';
+            const blob = new Blob([data], {type: 'application/json'});
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'streamit_progression.json';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        });
+    }
+    if (importInput) {
+        importInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = function(evt) {
+                try {
+                    const imported = JSON.parse(evt.target.result);
+                    if (imported.films && imported.series) {
+                        localStorage.setItem('watchedContent', JSON.stringify(imported));
+                        alert('Progression importée avec succès !');
+                        location.reload();
+                    } else {
+                        alert('Fichier invalide.');
+                    }
+                } catch {
+                    alert('Erreur lors de l\'import.');
+                }
+            };
+            reader.readAsText(file);
+        });
+    }
 });
 
 async function loadData() {