diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 139 |
1 files changed, 84 insertions, 55 deletions
@@ -5,11 +5,6 @@ <meta http-equiv="refresh" content="60"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> -.responsive { - width: 100%; - max-width: 800; - height: auto; -} .gallery { max-width: 800px; margin: 0 auto; @@ -27,44 +22,79 @@ margin: 0 auto; } -.thumbnails { +.controls { display: flex; - justify-content: space-between; - gap: 10px; + justify-content: center; + gap: 20px; + align-items: center; } -.thumbnails img { - width: calc(20% - 8px); - height: auto; +.nav-button { + padding: 10px 20px; + font-size: 24px; + cursor: pointer; + border: none; + background-color: #f0f0f0; + border-radius: 5px; + transition: background-color 0.3s; +} + +.now-button { + padding: 12px 24px; + font-size: 16px; + font-weight: bold; cursor: pointer; - transition: opacity 0.3s; + border: none; + background-color: #4CAF50; + color: white; + border-radius: 5px; + transition: background-color 0.3s; } -.thumbnails img:hover { - opacity: 0.7; +.now-button:hover { + background-color: #45a049; +} + +.nav-button:hover { + background-color: #e0e0e0; +} + +.nav-button:disabled { + opacity: 0.5; + cursor: not-allowed; } </style> </head> <body> - <div class="gallery"> +<div class="gallery"> <div class="main-image"> - <img id="featured" src="" alt="Hauptbild"> + <img id="featured" src="" alt="Hauptbild" onerror="this.src='error.png'"> </div> - <div class="thumbnails" id="thumbnail-container"> + <div class="controls"> + <button onclick="jumpTime(-60)" class="nav-button"><img src="fbck.png"></button> + <button onclick="jumpTime(-15)" class="nav-button"><img src="bck.png"></button> + <button onclick="jumpToCurrent()" class="now-button"><img src="stop.png"></button> + <button onclick="jumpTime(15)" class="nav-button"><img src="fwd.png"></button> + <button onclick="jumpTime(60)" class="nav-button"><img src="ffwd.png"></button> </div> </div> + </body> </html> <script> -let imageTimesList = []; +let currentDateTime = new Date(); -function roundToEvenMinute(date) { +function roundToQuarterHour(date) { const minutes = date.getMinutes(); - date.setMinutes(minutes - (minutes % 2)); - return date; + const roundedMinutes = Math.floor(minutes / 15) * 15; + const newDate = new Date(date); + newDate.setMinutes(roundedMinutes); + newDate.setSeconds(0); + newDate.setMilliseconds(0); + return newDate; } function formatTimeString(date) { @@ -73,50 +103,49 @@ function formatTimeString(date) { } function updateGallery() { - const now = roundToEvenMinute(new Date()); - imageTimesList = []; - - // Generiere Liste von 6 Zeitstempeln (1 Hauptbild + 5 Thumbnails) - for(let i = 0; i < 6; i++) { - const timeString = formatTimeString(new Date(now - i * 60 * 60 * 1000)); - imageTimesList.push(timeString); - } - - renderGallery(); + currentDateTime = roundToQuarterHour(new Date()); + updateImage(); + updateButtons(); } -function renderGallery() { - // Hauptbild aktualisieren - document.getElementById('featured').src = `${imageTimesList[0]}.jpg`; - - // Thumbnails aktualisieren - const thumbnailContainer = document.getElementById('thumbnail-container'); - thumbnailContainer.innerHTML = ''; +function jumpTime(minutes) { + const newTime = new Date(currentDateTime.getTime() + minutes * 60000); + const now = new Date(); - // Erstelle die 5 Thumbnails - for(let i = 1; i < imageTimesList.length; i++) { - const thumbnail = document.createElement('img'); - thumbnail.src = `${imageTimesList[i]}.jpg`; - thumbnail.alt = `Thumbnail ${i}`; - thumbnail.onclick = () => rotateImages(i); - thumbnailContainer.appendChild(thumbnail); + if (newTime <= now) { + currentDateTime = newTime; + updateImage(); + updateButtons(); } } -function rotateImages(clickedIndex) { - // Bringe das geklickte Bild nach vorne und rotiere die anderen - const clickedTime = imageTimesList[clickedIndex]; - imageTimesList.splice(clickedIndex, 1); // Entferne das geklickte Element - imageTimesList.unshift(clickedTime); // Füge es vorne ein +function jumpToCurrent() { + currentDateTime = roundToQuarterHour(new Date()); + updateImage(); + updateButtons(); +} + +function updateImage() { + const timeString = formatTimeString(currentDateTime); + document.getElementById('featured').src = `${timeString}.jpg`; +} + +function updateButtons() { + const now = roundToQuarterHour(new Date()); + const buttons = document.querySelectorAll('.nav-button'); + + // Deaktiviere Vorwärts-Buttons wenn aktuelle Zeit erreicht + buttons[2].disabled = currentDateTime.getTime() + 15 * 60000 > now.getTime(); + buttons[3].disabled = currentDateTime.getTime() + 60 * 60000 > now.getTime(); - renderGallery(); + // Deaktiviere den Aktuell-Button wenn bereits das aktuelle Bild angezeigt wird + document.querySelector('.now-button').disabled = + currentDateTime.getTime() === now.getTime(); } // Initial gallery setup updateGallery(); -// Aktualisiere die Galerie alle 2 Minuten -setInterval(updateGallery, 120000); - - +// Aktualisiere die Galerie alle 15 Minuten +setInterval(updateGallery, 90000); </script> |