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'
diff --git a/index.html b/index.html
index effdcd8..73afdc8 100644
--- a/index.html
+++ b/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>