YT Thumb: Design Fixes & Download-Button entfernt

yt_thumb/index.html

@@ -16,7 +16,7 @@
             font-family: 'Segoe UI', Arial, sans-serif;
             text-align: center;
             margin: 0;
-            padding: 20px 20px 0 20px;
+            padding: 20px 20px 60px 20px; /* Erhöhtes Padding unten für Footer */
             background-color: #f5f5f5;
             min-height: 100vh;
             position: relative;
@@ -70,10 +70,11 @@
         .thumbnail-container {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
+            gap: 50px; /* Erhöhter Abstand zwischen den Thumbnails */
             padding: 20px;
             max-width: 1200px;
             margin: 0 auto;
+            margin-bottom: 60px; /* Zusätzlicher Abstand zum Footer */
             flex: 1;
         }
 
@@ -83,22 +84,36 @@
             padding: 15px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             transition: transform 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
         }
 
         .thumbnail:hover {
             transform: translateY(-5px);
         }
 
+        .thumbnail-image {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            margin-bottom: 10px;
+        }
+
         img {
             width: 100%;
             height: auto;
             border-radius: 8px;
-            margin-bottom: 10px;
+            object-fit: contain;
+        }
+
+        .thumbnail-info {
+            margin-top: auto;
         }
 
         .button-group {
             display: flex;
-            gap: 10px;
             justify-content: center;
             margin-top: 10px;
         }
@@ -107,6 +122,7 @@
             padding: 8px 15px;
             font-size: 14px;
             background-color: #444;
+            width: 100%;
         }
 
         .button-group button:hover {
@@ -208,6 +224,11 @@
     <div id="toast" class="toast"></div>
 
     <script>
+        // Jahr für das Copyright aktualisieren
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('current-year').textContent = new Date().getFullYear();
+        });
+
         function handleEnter(event) {
             if (event.key === 'Enter') {
                 fetchThumbnails();
@@ -240,11 +261,20 @@
                 const thumbDiv = document.createElement('div');
                 thumbDiv.className = 'thumbnail';
 
+                const thumbImageDiv = document.createElement('div');
+                thumbImageDiv.className = 'thumbnail-image';
+
                 const img = new Image();
                 img.src = thumbUrl;
                 img.alt = `Thumbnail ${size.label}`;
                 img.loading = 'lazy';
 
+                thumbImageDiv.appendChild(img);
+                thumbDiv.appendChild(thumbImageDiv);
+
+                const thumbInfoDiv = document.createElement('div');
+                thumbInfoDiv.className = 'thumbnail-info';
+
                 const label = document.createElement('p');
                 label.className = 'label';
                 label.textContent = size.label;
@@ -261,21 +291,12 @@
                     }
                 });
 
-                const downloadButton = createButton('⬇️ Herunterladen', () => {
-                    const link = document.createElement('a');
-                    link.href = thumbUrl;
-                    link.download = `thumbnail_${size.code}.jpg`;
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                });
-
                 buttonGroup.appendChild(copyButton);
-                buttonGroup.appendChild(downloadButton);
 
-                thumbDiv.appendChild(img);
+                thumbInfoDiv.appendChild(label);
-                thumbDiv.appendChild(label);
+                thumbInfoDiv.appendChild(buttonGroup);
-                thumbDiv.appendChild(buttonGroup);
+                thumbDiv.appendChild(thumbInfoDiv);
+                
                 container.appendChild(thumbDiv);
             });
         }
@@ -318,9 +339,6 @@
                 toast.classList.remove('visible');
             }, 3000);
         }
-
-        // Jahr für das Copyright aktualisieren
-        document.getElementById('current-year').textContent = new Date().getFullYear();
     </script>
     
     <footer>