Akamaru/PonyWave-Tools
1
0
Fork 0
Code Issues Activity

YT Thumb: Design Fixes & Download-Button entfernt

Browse Source
This commit is contained in:
Akamaru
2025-04-28 20:57:28 +02:00
parent 5009f7cccb
commit 4d002f30a9
1 changed files with 38 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
yt_thumb/index.html
View File

@@ -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);
thumbDiv.appendChild(label);
thumbDiv.appendChild(buttonGroup);
thumbInfoDiv.appendChild(label);
thumbInfoDiv.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>