1 files changed, 152 insertions, 0 deletions
diff --git a/history.html b/history.html
new file mode 100644
index 0000000..f48e9fe
--- /dev/null
+++ b/history.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title> waterpi </title>
+		<meta http-equiv="refresh" content="60">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<style>
+.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;
+    object-fit: contain;
+}
+
+.controls {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    align-items: center;
+}
+
+.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;
+    border: none;
+    background-color: #4CAF50;
+    color: white;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.now-button:hover {
+    background-color: #45a049;
+}
+
+.nav-button:hover {
+    background-color: #e0e0e0;
+}
+
+.nav-button:disabled, .now-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+</style>
+	</head>
+
+	<body>
+<div class="gallery">
+    <div class="main-image">
+        <img id="featured" src="" alt="Hauptbild" onerror="this.src='error.png'">
+    </div>
+    <div class="controls">
+      <button onclick="jumpDays(-7)" class="nav-button"><img src="fbck.png"></button>
+        <button onclick="jumpDays(-1)" class="nav-button"><img src="bck.png"></button>
+        <button onclick="jumpToCurrent()" class="now-button"><img src="stop.png"></button>
+        <button onclick="jumpDays(1)" class="nav-button"><img src="fwd.png"></button>
+        <button onclick="jumpDays(7)" class="nav-button"><img src="ffwd.png"></button>
+    </div>
+</div>
+<a href="index.html">go to current day</a>
+	</body>
+</html>
+
+<script>
+let currentDate = new Date();
+
+function formatDateString(date) {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    return `${year}-${month}-${day}_12_00`;
+}
+
+function updateGallery() {
+    // Setze die Uhrzeit auf 12:00
+    currentDate.setHours(12, 0, 0, 0);
+    updateImage();
+    updateButtons();
+}
+
+function jumpDays(days) {
+    const newDate = new Date(currentDate);
+    newDate.setDate(newDate.getDate() + days);
+    const today = new Date();
+    today.setHours(12, 0, 0, 0);
+    
+    // Prüfe ob das neue Datum nicht in der Zukunft liegt
+    if (newDate <= today) {
+        currentDate = newDate;
+        updateImage();
+        updateButtons();
+    }
+}
+
+function jumpToCurrent() {
+    const today = new Date();
+    today.setHours(12, 0, 0, 0);
+    currentDate = today;
+    updateImage();
+    updateButtons();
+}
+
+function updateImage() {
+    const dateString = formatDateString(currentDate);
+    const img = document.getElementById('featured');
+    img.src = `waterpi_12h_images/${dateString}.jpg`;
+}
+
+function updateButtons() {
+    const today = new Date();
+    today.setHours(12, 0, 0, 0);
+    
+    const buttons = document.querySelectorAll('.nav-button');
+    
+    // Deaktiviere Vorwärts-Buttons wenn aktueller Tag erreicht
+    buttons[2].disabled = currentDate.getTime() + 24 * 60 * 60 * 1000 > today.getTime();
+    buttons[3].disabled = currentDate.getTime() + 7 * 24 * 60 * 60 * 1000 > today.getTime();
+    
+    // Deaktiviere den Heute-Button wenn bereits der aktuelle Tag angezeigt wird
+    document.querySelector('.now-button').disabled = 
+        currentDate.getTime() === today.getTime();
+}
+
+// Initial gallery setup
+updateGallery();
+
+// Aktualisiere die Galerie jede Sekunde
+//setInterval(updateGallery, 1000);
+</script>