diff --git a/index.html b/index.html
index 22974d2..38cd6b1 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,19 @@
![Screensaver Image]()
diff --git a/screensaver.js b/screensaver.js
index 8bbeb76..ea867f2 100644
--- a/screensaver.js
+++ b/screensaver.js
@@ -35,7 +35,8 @@ document.addEventListener("DOMContentLoaded", () => {
let autoPromptEnabled = true;
let isFetchingPrompt = false;
let lastPromptUpdate = 0;
- const MAX_HISTORY = 12;
+ const MAX_HISTORY = 10;
+ const EMPTY_THUMBNAIL = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
const PROMPT_UPDATE_INTERVAL = 20000;
let settings = {
@@ -320,40 +321,34 @@ document.addEventListener("DOMContentLoaded", () => {
return;
}
- thumbnailContainer.innerHTML = '';
- imageHistory.forEach((imageUrl, index) => {
- const thumb = document.createElement('img');
- thumb.src = imageUrl;
- thumb.classList.add('thumbnail');
- thumb.title = promptHistory[index] || 'No prompt available';
- thumb.alt = "Thumbnail Image";
- thumb.style.opacity = '1';
- thumb.onerror = () => {
- console.log(`Thumbnail ${index + 1} failed to load, using fallback:`, imageUrl);
- thumb.src = "https://via.placeholder.com/160x90?text=Image+Failed";
- thumb.style.opacity = '1';
- };
- thumb.onload = () => {
- console.log(`Thumbnail ${index + 1} loaded successfully:`, imageUrl);
- };
- thumb.onclick = () => showHistoricalImage(index);
- const currentImgSrc = document.getElementById(`screensaver-${currentImage}`).src;
- if (imageUrl === currentImgSrc) {
- thumb.classList.add('selected');
- console.log("Highlighted thumbnail as selected:", imageUrl);
+ const slots = thumbnailContainer.querySelectorAll('img.thumbnail');
+ slots.forEach((thumb, index) => {
+ const imageUrl = imageHistory[index];
+ thumb.onclick = null;
+ thumb.classList.remove('selected');
+ thumb.classList.remove('placeholder');
+
+ if (imageUrl) {
+ thumb.src = imageUrl;
+ thumb.title = promptHistory[index] || 'No prompt available';
+ thumb.onclick = () => showHistoricalImage(index);
+ const currentImgSrc = document.getElementById(`screensaver-${currentImage}`).src;
+ if (imageUrl === currentImgSrc) {
+ thumb.classList.add('selected');
+ }
+ } else {
+ thumb.src = EMPTY_THUMBNAIL;
+ thumb.title = '';
+ thumb.classList.add('placeholder');
}
- thumbnailContainer.appendChild(thumb);
- console.log(`Added thumbnail ${index + 1}/${imageHistory.length} to DOM:`, thumb.src);
});
- // keep the view scrolled to the latest thumbnail
thumbnailContainer.scrollTo({ left: thumbnailContainer.scrollWidth, behavior: 'smooth' });
- console.log("Updated thumbnail gallery with", imageHistory.length, "images. DOM count:", thumbnailContainer.children.length);
-
const offsetWidth = thumbnailContainer.offsetWidth;
thumbnailContainer.style.display = 'none';
thumbnailContainer.offsetHeight;
thumbnailContainer.style.display = 'flex';
+ console.log("Updated thumbnail gallery with", imageHistory.length, "images. DOM count:", thumbnailContainer.children.length);
console.log("Forced DOM reflow to ensure rendering. Container offsetWidth:", offsetWidth);
}
diff --git a/styles.css b/styles.css
index f02de12..ade0f98 100644
--- a/styles.css
+++ b/styles.css
@@ -790,47 +790,38 @@ body {
transition: opacity var(--transition-duration, 1s) ease;
}
-.screensaver-thumbnails {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- gap: 12px;
- overflow-x: auto;
- width: 100%;
- height: 120px;
- padding: 10px;
- background: rgba(0, 0, 0, 0.7);
- border-radius: 0;
- z-index: 2;
- transition: opacity 0.3s ease;
- scrollbar-width: thin;
- scrollbar-color: #707070 #333333;
- white-space: nowrap;
- direction: ltr;
- scroll-behavior: smooth;
-}
-
-.screensaver-thumbnails::-webkit-scrollbar {
- height: 8px;
-}
-
-.screensaver-thumbnails::-webkit-scrollbar-track {
- background: #333333;
- border-radius: 4px;
-}
-
-.screensaver-thumbnails::-webkit-scrollbar-thumb {
- background: #707070;
- border-radius: 4px;
-}
-
+.screensaver-thumbnails {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ overflow-x: auto;
+ width: 100%;
+ max-width: 1290px;
+ padding: 10px;
+ background: rgba(0, 0, 0, 0.7);
+ border-radius: 12px;
+ transition: opacity 0.3s ease;
+ scrollbar-width: thin;
+ white-space: nowrap;
+}
+
+.screensaver-thumbnails::-webkit-scrollbar {
+ height: 8px;
+}
+
+.screensaver-thumbnails::-webkit-scrollbar-track {
+ background: #333333;
+ border-radius: 4px;
+}
+
+.screensaver-thumbnails::-webkit-scrollbar-thumb {
+ background: #707070;
+ border-radius: 4px;
+}
+
.screensaver-thumbnails img.thumbnail {
- width: 160px;
- height: 90px;
+ width: 120px;
+ height: 80px;
object-fit: cover;
cursor: pointer;
border: 3px solid transparent;
@@ -841,15 +832,21 @@ body {
opacity: 1;
position: static;
}
-
-.screensaver-thumbnails img.thumbnail:hover {
- border: 3px solid #00ffcc;
- transform: scale(1.05);
-}
-
-.screensaver-thumbnails img.thumbnail.selected {
- border: 3px solid #ffcc00;
-}
+
+.screensaver-thumbnails img.thumbnail.placeholder {
+ opacity: 0.3;
+ border: 3px dashed #555;
+ pointer-events: none;
+}
+
+.screensaver-thumbnails img.thumbnail:hover {
+ border: 3px solid #00ffcc;
+ transform: scale(1.05);
+}
+
+.screensaver-thumbnails img.thumbnail.selected {
+ border: 3px solid #ffcc00;
+}
.screensaver-controls {
position: fixed;
diff --git a/stylesScreensaver.css b/stylesScreensaver.css
index 3b4b1bb..bd0084c 100644
--- a/stylesScreensaver.css
+++ b/stylesScreensaver.css
@@ -38,10 +38,11 @@
flex-direction: row;
gap: 10px;
overflow-x: auto;
- width: 90%;
- max-width: 1200px;
+ width: 100%;
+ max-width: 1290px;
padding: 10px;
border-radius: 12px;
+ background: rgba(0, 0, 0, 0.7);
transition: opacity 0.3s ease;
scrollbar-width: thin;
white-space: nowrap;
@@ -87,6 +88,12 @@
position: static;
}
+.screensaver-thumbnails img.thumbnail.placeholder {
+ opacity: 0.3;
+ border: 3px dashed #555;
+ pointer-events: none;
+}
+
.screensaver-controls {
position: fixed;
bottom: 100px;
+