new ordner

2025-11-01 16:20:04 +01:00
parent ee625615ff
commit 54a64c076b
11 changed files with 237 additions and 523 deletions
--- a/hefe-teilchen/YouCut_20250804_125731298.mp4
+++ b/hefe-teilchen/YouCut_20250804_125731298.mp4
--- a/hefe-teilchen/index.html
+++ b/hefe-teilchen/index.html
@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Rezept-Seite</title>
+    <title>Rezept-Seite mit Video/Bild Viewer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
@ -25,7 +25,7 @@
            text-align: center;
        }

-        img {
+        img, video {
            width: 100%;
            height: auto;
            border-radius: 8px;
@ -60,6 +60,15 @@
            padding-left: 20px;
        }

+        .cl-checkbox input[type="checkbox"]:checked + span {
+            color: #999;          /* leicht grau */
+            text-decoration: line-through;
+            transition: color 0.3s, text-decoration 0.3s; /* sanfter Übergang */
+        }
+
+
+        
+
        footer {
            text-align: center;
            padding: 10px;
@ -75,6 +84,29 @@
                width: 100%;
            }
        }
+
+        .viewer-controls {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-top: 10px;
+        }
+
+        .viewer-button {
+            padding: 0.5em 1em;
+            font-size: 1em;
+            border: none;
+            background-color: #212121;
+            color: white;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: 0.3s;
+        }
+
+        .viewer-button:hover {
+            background-color: #333;
+        }
+
        .button {
            cursor: pointer;
            padding: 1em;
@ -91,17 +123,17 @@
            box-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
            position: relative;
-          }
-          
-          .button:hover {
+        }
+
+        .button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 1em 0.45em rgba(0, 0, 0, 0.1);
            background: linear-gradient(45deg, #212121, #252525);
            background: radial-gradient(circle at bottom, rgba(50, 100, 180, 0.5) 10%, #212121 70%);
            outline: 0;
-          }
-          
-          .modal {
+        }
+
+        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
@ -111,9 +143,9 @@
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
-          }
-          
-          .modal-content {
+        }
+
+        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
@ -122,34 +154,45 @@
            max-width: 400px;
            text-align: center;
            border-radius: 10px;
-          }
+        }

-          .social-icons {
+        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

-            .social-icons a img {
-                width: 60px;
-                height: 60px;
-                transition: transform 0.2s;
-            }
+        .social-icons a img {
+            width: 60px;
+            height: 60px;
+            transition: transform 0.2s;
+        }

-            .social-icons a img:hover {
-                transform: scale(1.1);
-            }
+        .social-icons a img:hover {
+            transform: scale(1.1);
+        }
    </style>
 </head>
 <body>
-  <br>
-  <div class="card">
-    <video width="300" height="400" controls>
-          <source src="YouCut_20250804_125731298.mp4" type="video/mp4">
-              Dein Browser unterstützt das Videoformat nicht.
-                </video>
+  <br><br>

+  <!-- Medien-Viewer (Bild/Video Wechsel) -->
+  <div class="card">
+    <div id="viewer-container">
+      <img id="media-display" src="/fluffigkrossejoghurtbroteohnegehzeit/brot.jpeg" alt="Brotbacken">
+    </div>
+
+    <div class="viewer-controls">
+      <button class="viewer-button" id="prev-media">⬅</button>
+      <button class="viewer-button" id="next-media">➡</button>
+    </div>
+  </div>
+
+  <br>
+
+  <!-- Rezept-Karte -->
+  <div class="card">
    <h2>Zutaten:</h2>
    <ul>
        <li><label class="cl-checkbox"><input type="checkbox"><span>300 g Mehl</span></label></li>
@ -172,103 +215,110 @@
    </ol>
 </div>

+  <br><br>

-    <br>
-    <br>
-    <!-- Neuer Share-Button mit den alten Funktionen -->
-<button class="button" onclick="openSharePopup()">
+  <!-- Share-Button -->
+  <button class="button" onclick="openSharePopup()">
    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="icon" fill="white">
      <path d="M307 34.8c-11.5 5.1-19 16.6-19 29.2v64H176C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96h96v64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z"></path>
    </svg>
    Share
  </button>
-  
+
  <!-- Modal für Sharing-Optionen -->
  <div id="shareModal" class="modal">
    <div class="modal-content">
      <h2>Teilen</h2>
-      <!--
-      <button onclick="shareViaWhatsApp()">WhatsApp</button>
-      <button onclick="shareViaTelegram()">Telegram</button>
-      <button onclick="shareViaPinterest()">Pinterest</button>
-      <button onclick="shareViaEmail()">E-Mail</button>
-      <button onclick="copyToClipboard()">Link kopieren</button>
-      <button onclick="closeSharePopup()">Schließen</button>
-      -->
      <div class="social-icons">
-      <a href="#" onclick="shareViaWhatsApp()">
-          <img src="/icons/whatsapp.svg" alt="WhatsApp" />
-        </a>
-        <a href="#" onclick="shareViaPinterest()">
-            <img src="/icons/pinterest.svg" />
-        </a>
-        <a href="#" onclick="shareViaTelegram()">
-            <img src="/icons/telegram.svg" alt="Telegram" />
-        </a>
-        <a href="#" onclick="shareViaEmail()">
-            <img src="/icons/email.svg" alt="E-Mail" />
-        </a>
-        <!-- Kopieren -->
-        <a href="#" onclick="copyToClipboard()">
-            <img src="/icons/copy.svg" />
-        </a>
-        </div>
+        <a href="#" onclick="shareViaWhatsApp()"><img src="/icons/whatsapp.svg" alt="WhatsApp" /></a>
+        <a href="#" onclick="shareViaPinterest()"><img src="/icons/pinterest.svg" /></a>
+        <a href="#" onclick="shareViaTelegram()"><img src="/icons/telegram.svg" alt="Telegram" /></a>
+        <a href="#" onclick="shareViaEmail()"><img src="/icons/email.svg" alt="E-Mail" /></a>
+        <a href="#" onclick="copyToClipboard()"><img src="/icons/copy.svg" /></a>
+      </div>
    </div>
  </div>

-  
  <script>
-  function openSharePopup() {
-    document.getElementById("shareModal").style.display = "block";
-  }
-  
-  function closeSharePopup() {
-    document.getElementById("shareModal").style.display = "none";
-  }
-  
-  function shareViaWhatsApp() {
-    const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/hefe-teilchen/');
-    const url = 'https://api.whatsapp.com/send?text=' + text;
-    window.open(url, '_blank');
-  }
-  
-  function shareViaTelegram() {
-    const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/hefe-teilchen/');
-    const url = 'https://t.me/share/url?url=' + text;
-    window.open(url, '_blank');
-  }
-  
-  function shareViaPinterest() {
-    const media = encodeURIComponent('URL_ZU_DEINEM_BILD');
-    const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/hefe-teilchen/');
-    const url = 'https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media;
-    window.open(url, '_blank');
-  }
-  
-  function shareViaEmail() {
-    const subject = encodeURIComponent('Klick the Witch');
-    const body = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/hefe-teilchen/');
-    window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
-  }
-  
-  function copyToClipboard() {
-    const text = 'Check out this fantastic recipe! https://test.somachtstefaniedas.de/hefe-teilchen/';
-    navigator.clipboard.writeText(text).then(function() {
-      alert('Text wurde in die Zwischenablage kopiert!');
-    }, function(err) {
-      alert('Fehler beim Kopieren in die Zwischenablage: ', err);
-    });
-  }
-  
-  window.onclick = function(event) {
-    const modal = document.getElementById('shareModal');
-    if (event.target == modal) {
-      closeSharePopup();
+    // Medien-Wechsel
+    const mediaItems = [
+      { type: 'image', src: '/hefe-teilchen/hefeteilchen.jpeg' },
+      { type: 'video', src: '/hefe-teilchen/video.mov' }
+    ];
+
+    let currentMediaIndex = 0;
+    const viewerContainer = document.getElementById('viewer-container');
+
+    function updateMedia() {
+      const item = mediaItems[currentMediaIndex];
+      viewerContainer.innerHTML = '';
+      if(item.type === 'image') {
+        const img = document.createElement('img');
+        img.src = item.src;
+        img.alt = 'Media';
+        viewerContainer.appendChild(img);
+      } else if(item.type === 'video') {
+        const video = document.createElement('video');
+        video.src = item.src;
+        video.controls = true;
+        video.autoplay = true;
+        video.style.width = '100%';
+        viewerContainer.appendChild(video);
+      }
+    }
+
+    document.getElementById('prev-media').addEventListener('click', ()=>{
+      currentMediaIndex = (currentMediaIndex - 1 + mediaItems.length) % mediaItems.length;
+      updateMedia();
+    });
+
+    document.getElementById('next-media').addEventListener('click', ()=>{
+      currentMediaIndex = (currentMediaIndex + 1) % mediaItems.length;
+      updateMedia();
+    });
+
+    updateMedia();
+
+    // Share-Funktionen
+    function openSharePopup() {
+      document.getElementById("shareModal").style.display = "block";
+    }
+
+    function closeSharePopup() {
+      document.getElementById("shareModal").style.display = "none";
+    }
+
+    function shareViaWhatsApp() {
+      const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/fluffigkrossejoghurtbroteohnegehzeit/');
+      window.open('https://api.whatsapp.com/send?text=' + text, '_blank');
+    }
+
+    function shareViaTelegram() {
+      const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/fluffigkrossejoghurtbroteohnegehzeit/');
+      window.open('https://t.me/share/url?url=' + text, '_blank');
+    }
+
+    function shareViaPinterest() {
+      const media = encodeURIComponent('URL_ZU_DEINEM_BILD');
+      const text = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/fluffigkrossejoghurtbroteohnegehzeit/');
+      window.open('https://pinterest.com/pin/create/button/?url=' + text + '&media=' + media, '_blank');
+    }
+
+    function shareViaEmail() {
+      const subject = encodeURIComponent('Klick the Witch');
+      const body = encodeURIComponent('Check out this fantastic recipe! https://test.somachtstefaniedas.de/fluffigkrossejoghurtbroteohnegehzeit/');
+      window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
+    }
+
+    function copyToClipboard() {
+      const text = 'Check out this fantastic recipe! https://test.somachtstefaniedas.de/fluffigkrossejoghurtbroteohnegehzeit/';
+      navigator.clipboard.writeText(text).then(()=>{alert('Text wurde in die Zwischenablage kopiert!');}, (err)=>{alert('Fehler beim Kopieren: ' + err);});
+    }
+
+    window.onclick = function(event) {
+      const modal = document.getElementById('shareModal');
+      if (event.target == modal) closeSharePopup();
    }
-  }
  </script>
-  <br>
-  <br>
-  
 </body>
 </html>
--- a/hefe-teilchen/video.MOV
+++ b/hefe-teilchen/video.MOV