diff options
| author | Robert Scheibe <mail@robert-scheibe.de> | 2024-12-19 23:21:52 +0100 |
|---|---|---|
| committer | Robert Scheibe <mail@robert-scheibe.de> | 2024-12-19 23:21:52 +0100 |
| commit | 3838acdc1cfc4c2c3c0c74f638d9ca5109dea855 (patch) | |
| tree | 23b055226a39abc511f3efcbfeb38d514c10983b | |
| parent | 9ee7efb4bc032ccebb021e70bb8d227193f9497a (diff) | |
thumbnail gallery and deploy script added
| -rwxr-xr-x | deploy.sh | 4 | ||||
| -rw-r--r-- | index.html | 106 |
2 files changed, 109 insertions, 1 deletions
diff --git a/deploy.sh b/deploy.sh new file mode 100755 index 0000000..47fa800 --- /dev/null +++ b/deploy.sh @@ -0,0 +1,4 @@ +#!/bin/bash +set -e +scp index.html robert@waterpi: +ssh robert@waterpi -C 'sudo cp index.html /var/www/html; sudo chown www-data:www-data /var/www/html/index.html' @@ -1,3 +1,4 @@ +<!DOCTYPE html> <html> <head> <title> waterpi </title> @@ -9,10 +10,113 @@ max-width: 800; height: auto; } +.gallery { + max-width: 800px; + margin: 0 auto; + text-align: center; +} + +.main-image { + margin-bottom: 20px; +} + +.main-image img { + width: 100%; + height: auto; + display: block; + margin: 0 auto; +} + +.thumbnails { + display: flex; + justify-content: space-between; + gap: 10px; +} + +.thumbnails img { + width: calc(20% - 8px); + height: auto; + cursor: pointer; + transition: opacity 0.3s; +} + +.thumbnails img:hover { + opacity: 0.7; +} + </style> </head> <body> - <img src="img.jpg" class="responsive"> + <div class="gallery"> + <div class="main-image"> + <img id="featured" src="" alt="Hauptbild"> + </div> + <div class="thumbnails" id="thumbnail-container"> + </div> +</div> </body> </html> + +<script> +let imageTimesList = []; + +function roundToEvenMinute(date) { + const minutes = date.getMinutes(); + date.setMinutes(minutes - (minutes % 2)); + return date; +} + +function formatTimeString(date) { + return date.getHours().toString().padStart(2, '0') + '_' + + date.getMinutes().toString().padStart(2, '0'); +} + +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(); +} + +function renderGallery() { + // Hauptbild aktualisieren + document.getElementById('featured').src = `${imageTimesList[0]}.jpg`; + + // Thumbnails aktualisieren + const thumbnailContainer = document.getElementById('thumbnail-container'); + thumbnailContainer.innerHTML = ''; + + // 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); + } +} + +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 + + renderGallery(); +} + +// Initial gallery setup +updateGallery(); + +// Aktualisiere die Galerie alle 2 Minuten +setInterval(updateGallery, 120000); + + +</script> |