From 9392289c6c5ffb4b0fa41125ae2acefe6cab16b1 Mon Sep 17 00:00:00 2001
From: Akamaru <Akamaru92@live.de>
Date: Fri, 14 Mar 2025 13:33:35 +0100
Subject: [PATCH] Bohne: Man kann gesehene Videos markieren

---
 bohne/index.html | 86 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 85 insertions(+), 1 deletion(-)
diff --git a/bohne/index.html b/bohne/index.html
index 7ee637e..2e7fd31 100644
--- a/bohne/index.html
+++ b/bohne/index.html
@@ -12,6 +12,16 @@
     <script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="bohne"></script>
     <style>
         body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
+        header {
+            text-align: center;
+            padding: 2rem 0;
+            margin-bottom: 2rem;
+            background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
+            color: white;
+            border-radius: 10px;
+        }
+        header h1 { margin: 0; font-size: 2.5em; }
+        header p { margin: 1rem 0 0; opacity: 0.9; }
         .category { margin: 3rem 0; padding: 1rem; border-bottom: 2px solid #eee; }
         .video-grid { 
             display: grid; 
@@ -19,7 +29,10 @@
             gap: 2rem; 
             padding: 1rem 0;
         }
-        .video-item { text-align: center; }
+        .video-item { 
+            text-align: center;
+            position: relative;
+        }
         .thumbnail {
             width: 100%;
             height: 140px;
@@ -27,6 +40,7 @@
             border-radius: 8px;
             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
             transition: transform 0.2s;
+            filter: brightness(1);
         }
         .thumbnail:hover { transform: scale(1.03); }
         .video-title {
@@ -36,10 +50,34 @@
             line-height: 1.4;
         }
         h2 { color: #2c3e50; margin-bottom: 1.5rem; }
+        .watched-checkbox {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            transform: scale(1.5);
+            z-index: 10;
+        }
+        .video-item.watched .thumbnail {
+            filter: brightness(0.7);
+        }
+        .stats {
+            text-align: center;
+            margin: 1rem 0;
+            font-size: 0.9em;
+            color: #666;
+        }
     </style>
 </head>
 <body>
 
+<header>
+    <h1>Songs aus der Bohne Übersicht</h1>
+    <p>Eine komplette Übersicht aller Videos aus dem Julien Bam Universum</p>
+    <div class="stats">
+        Gesehen: <span id="watchedCount">0</span> von <span id="totalCount">0</span> Videos
+    </div>
+</header>
+
 <!-- OPTIONAL -->
 <div class="category">
     <h2>🔍 Optional (Hintergrundinfo)</h2>
@@ -277,5 +315,51 @@
     </div>
 </div>
 
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const videos = document.querySelectorAll('.video-item');
+        const watchedVideos = JSON.parse(localStorage.getItem('watchedBohneVideos') || '[]');
+        
+        // Füge Checkboxen hinzu und markiere bereits gesehene Videos
+        videos.forEach(video => {
+            const videoId = video.querySelector('a').href.split('v=')[1];
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.className = 'watched-checkbox';
+            checkbox.checked = watchedVideos.includes(videoId);
+            if (checkbox.checked) {
+                video.classList.add('watched');
+            }
+            
+            checkbox.addEventListener('change', function() {
+                const videoId = this.parentElement.querySelector('a').href.split('v=')[1];
+                if (this.checked) {
+                    watchedVideos.push(videoId);
+                    video.classList.add('watched');
+                } else {
+                    const index = watchedVideos.indexOf(videoId);
+                    if (index > -1) {
+                        watchedVideos.splice(index, 1);
+                    }
+                    video.classList.remove('watched');
+                }
+                localStorage.setItem('watchedBohneVideos', JSON.stringify(watchedVideos));
+                updateStats();
+            });
+            
+            video.appendChild(checkbox);
+        });
+
+        function updateStats() {
+            const totalVideos = videos.length;
+            const watchedCount = document.querySelectorAll('.video-item.watched').length;
+            document.getElementById('watchedCount').textContent = watchedCount;
+            document.getElementById('totalCount').textContent = totalVideos;
+        }
+
+        updateStats();
+    });
+</script>
+
 </body>
 </html>
