Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: start
start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
start [2026/07/29 08:03] – dfreystart [2026/07/29 08:10] (aktuell) – dfrey
Zeile 19: Zeile 19:
     </p>     </p>
     <div class="av-grillfest-actions">     <div class="av-grillfest-actions">
-      <a class="av-grillfest-download" href="https://xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:public:av_grillfest_2026_flyer.pdf" target="_blank" rel="noopener"> +      <a class="av-grillfest-download av-download-prominent" href="https://xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:public:av_grillfest_2026_flyer.pdf" target="_blank" rel="noopener"> 
-        Flyer herunterladen+        📄 Jetzt Flyer herunterladen
       </a>       </a>
-      <button type="button" id="av-grillfest-replay">Animation erneut anzeigen</button>+      <button type="button" id="av-grillfest-replay">Hinweis erneut anzeigen</button>
     </div>     </div>
   </div>   </div>
Zeile 137: Zeile 137:
     color: #fff !important;     color: #fff !important;
     box-shadow: 0 8px 18px rgba(148, 42, 0, 0.28);     box-shadow: 0 8px 18px rgba(148, 42, 0, 0.28);
 +  }
 +
 +  .av-download-prominent,
 +  .av-popup-button.av-download {
 +    font-size: 1.05rem;
 +    padding: 0.9rem 1.35rem;
 +    animation: av-download-pulse 1.8s infinite ease-in-out;
   }   }
  
   #av-grillfest-replay,   #av-grillfest-replay,
-  .av-popup-button.av-sound {+  .av-popup-button.av-close-main {
     background: #0b7d23;     background: #0b7d23;
     color: #fff;     color: #fff;
Zeile 171: Zeile 178:
   .av-popup-box {   .av-popup-box {
     position: relative;     position: relative;
-    width: min(1080px, 96vw);+    width: min(920px, 96vw);
     max-height: 94vh;     max-height: 94vh;
     overflow: hidden;     overflow: hidden;
Zeile 189: Zeile 196:
     position: absolute;     position: absolute;
     z-index: 4;     z-index: 4;
-    top: 0.8rem; +    top: 0.85rem; 
-    right: 0.8rem; +    right: 0.85rem; 
-    width: 40px; +    width: 44px; 
-    height: 40px; +    height: 44px; 
-    border: 0;+    border: 2px solid rgba(255, 255, 255, 0.8);
     border-radius: 50%;     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.16);+    background: linear-gradient(135deg, #e31616, #8e0000);
     color: #fff;     color: #fff;
-    font-size: 1.5rem;+    font-size: 1.7rem; 
 +    font-weight: 900; 
 +    line-height: 1;
     cursor: pointer;     cursor: pointer;
 +    box-shadow: 0 0 18px rgba(255, 40, 0, 0.75);
 +  }
 +
 +  .av-popup-close:hover {
 +    filter: brightness(1.12);
 +    transform: scale(1.04);
   }   }
  
Zeile 204: Zeile 219:
     position: relative;     position: relative;
     z-index: 2;     z-index: 2;
-    display: grid; +    padding: clamp(1.4rem, 4vw, 2.6rem); 
-    grid-template-columns: 1fr 420px; +    padding-top: clamp(3.2rem, 6vw, 4rem);
-    gap: 1rem; +
-    padding: clamp(1.1rem, 3vw, 2rem); +
-  } +
- +
-  .av-popup-info { +
-    min-width: 0; +
-    padding-top: 2.4rem;+
     text-align: center;     text-align: center;
   }   }
Zeile 227: Zeile 235:
   .av-popup-title {   .av-popup-title {
     margin: 0.2rem 0;     margin: 0.2rem 0;
-    font-size: clamp(2.4rem, 8vw, 5.4rem);+    font-size: clamp(2.6rem, 9vw, 6rem);
     line-height: 0.92;     line-height: 0.92;
     color: #fff1b8;     color: #fff1b8;
Zeile 254: Zeile 262:
   .av-popup-program {   .av-popup-program {
     margin: 1rem auto;     margin: 1rem auto;
-    max-width: 570px;+    max-width: 720px;
     text-align: left;     text-align: left;
     font-family: Arial, sans-serif;     font-family: Arial, sans-serif;
Zeile 265: Zeile 273:
     border-radius: 12px;     border-radius: 12px;
     background: rgba(255, 255, 255, 0.1);     background: rgba(255, 255, 255, 0.1);
 +  }
 +
 +  .av-popup-flyer-callout {
 +    margin: 1.1rem auto 0;
 +    max-width: 680px;
 +    padding: 1rem;
 +    border-radius: 18px;
 +    background:
 +      linear-gradient(135deg, rgba(255, 210, 119, 0.22), rgba(255, 113, 0, 0.2));
 +    border: 1px solid rgba(255, 225, 160, 0.55);
 +    font-family: Arial, sans-serif;
 +    font-weight: 800;
 +    color: #fff8df;
 +    box-shadow: inset 0 0 18px rgba(255, 170, 40, 0.16);
   }   }
  
Zeile 271: Zeile 293:
     justify-content: center;     justify-content: center;
     flex-wrap: wrap;     flex-wrap: wrap;
-    gap: 0.65rem;+    gap: 0.75rem;
     margin-top: 1rem;     margin-top: 1rem;
-  } 
- 
-  .av-flyer-wrap { 
-    position: relative; 
-    min-height: 520px; 
-    border-radius: 18px; 
-    overflow: hidden; 
-    background: #fff8df; 
-    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.42); 
-  } 
- 
-  .av-flyer-wrap object, 
-  .av-flyer-wrap iframe { 
-    width: 100%; 
-    height: 100%; 
-    min-height: 520px; 
-    border: 0; 
-    display: block; 
-    background: #fff; 
-  } 
- 
-  .av-flyer-fallback { 
-    padding: 2rem; 
-    color: #2f210d; 
-    font-family: Arial, sans-serif; 
-    text-align: center; 
   }   }
  
Zeile 371: Zeile 367:
     opacity: 0;     opacity: 0;
     animation: av-ember-rise 2.5s infinite ease-out;     animation: av-ember-rise 2.5s infinite ease-out;
-  } 
- 
-  .av-note { 
-    position: absolute; 
-    z-index: 3; 
-    top: 12%; 
-    color: rgba(255, 237, 170, 0.9); 
-    font-size: 1.9rem; 
-    text-shadow: 0 0 12px rgba(255, 150, 0, 0.9); 
-    animation: av-note-float 3.6s infinite ease-in-out; 
-    pointer-events: none; 
   }   }
  
Zeile 387: Zeile 372:
     from { transform: rotate(-4deg) scale(1); }     from { transform: rotate(-4deg) scale(1); }
     to { transform: rotate(5deg) scale(1.13); }     to { transform: rotate(5deg) scale(1.13); }
 +  }
 +
 +  @keyframes av-download-pulse {
 +    0%, 100% {
 +      transform: scale(1);
 +      box-shadow: 0 8px 18px rgba(148, 42, 0, 0.28);
 +    }
 +    50% {
 +      transform: scale(1.035);
 +      box-shadow: 0 12px 30px rgba(255, 104, 0, 0.46);
 +    }
   }   }
  
Zeile 424: Zeile 420:
     12% { opacity: 1; }     12% { opacity: 1; }
     100% { transform: translate(var(--dx), -155px) scale(0.15); opacity: 0; }     100% { transform: translate(var(--dx), -155px) scale(0.15); opacity: 0; }
-  } 
- 
-  @keyframes av-note-float { 
-    0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.25; } 
-    45% { transform: translateY(-24px) rotate(8deg); opacity: 0.95; } 
-  } 
- 
-  @media (max-width: 850px) { 
-    .av-popup-inner { 
-      grid-template-columns: 1fr; 
-      overflow-y: auto; 
-      max-height: 94vh; 
-    } 
- 
-    .av-flyer-wrap { 
-      min-height: 430px; 
-    } 
- 
-    .av-flyer-wrap object, 
-    .av-flyer-wrap iframe { 
-      min-height: 430px; 
-    } 
   }   }
  
Zeile 453: Zeile 427:
     .av-flame,     .av-flame,
     .av-ember,     .av-ember,
-    .av-note, 
     .av-fire-stage::before,     .av-fire-stage::before,
-    .av-grillfest-card-fire {+    .av-grillfest-card-fire, 
 +    .av-download-prominent {
       animation: none !important;       animation: none !important;
     }     }
Zeile 469: Zeile 443:
   var flyerUrl = "https://xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:public:av_grillfest_2026_flyer.pdf";   var flyerUrl = "https://xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:public:av_grillfest_2026_flyer.pdf";
   var overlay = null;   var overlay = null;
-  var hideTimer = null; 
-  var audioCtx = null; 
- 
-  function playMusic(button) { 
-    try { 
-      var AudioContext = window.AudioContext || window.webkitAudioContext; 
-      if (!AudioContext) return; 
- 
-      audioCtx = audioCtx || new AudioContext(); 
-      if (audioCtx.state === "suspended") audioCtx.resume(); 
- 
-      var now = audioCtx.currentTime; 
-      var notes = [392, 440, 494, 523, 494, 440, 392, 330, 392, 440, 523, 659]; 
-      notes.forEach(function (freq, i) { 
-        var osc = audioCtx.createOscillator(); 
-        var gain = audioCtx.createGain(); 
- 
-        osc.type = i % 3 === 0 ? "triangle" : "sine"; 
-        osc.frequency.value = freq; 
- 
-        gain.gain.setValueAtTime(0.0001, now + i * 0.16); 
-        gain.gain.exponentialRampToValueAtTime(0.13, now + i * 0.16 + 0.025); 
-        gain.gain.exponentialRampToValueAtTime(0.0001, now + i * 0.16 + 0.15); 
- 
-        osc.connect(gain); 
-        gain.connect(audioCtx.destination); 
-        osc.start(now + i * 0.16); 
-        osc.stop(now + i * 0.16 + 0.17); 
-      }); 
- 
-      if (button) { 
-        button.textContent = "♪ Musik läuft"; 
-        setTimeout(function () { 
-          button.textContent = "♪ Musik starten"; 
-        }, 2200); 
-      } 
-    } catch (e) {} 
-  } 
  
   function closePopup() {   function closePopup() {
     if (!overlay) return;     if (!overlay) return;
-    clearTimeout(hideTimer);+
     document.removeEventListener("keydown", onEscape);     document.removeEventListener("keydown", onEscape);
     document.body.style.overflow = "";     document.body.style.overflow = "";
Zeile 552: Zeile 488:
       stage.appendChild(ember);       stage.appendChild(ember);
     }     }
-  } 
- 
-  function addNotes(box) { 
-    var notes = ["♪", "♫", "♬", "♪"]; 
-    notes.forEach(function (note, i) { 
-      var el = document.createElement("span"); 
-      el.className = "av-note"; 
-      el.textContent = note; 
-      el.style.left = [8, 18, 78, 88][i] + "%"; 
-      el.style.animationDelay = (-i * 0.75) + "s"; 
-      box.appendChild(el); 
-    }); 
   }   }
  
Zeile 580: Zeile 504:
         '<button type="button" class="av-popup-close" aria-label="Schließen">×</button>' +         '<button type="button" class="av-popup-close" aria-label="Schließen">×</button>' +
         '<div class="av-popup-inner">' +         '<div class="av-popup-inner">' +
-          '<div class="av-popup-info">' + +          '<div class="av-popup-kicker">Schwäbischer Albverein Waldenburg</div>' + 
-            '<div class="av-popup-kicker">Schwäbischer Albverein Waldenburg</div>' + +          '<div class="av-popup-title">Grillfest</div>' + 
-            '<div class="av-popup-title">Grillfest</div>' + +          '<div class="av-popup-date">08.08. bis 09.08.2026</div>' + 
-            '<div class="av-popup-date">08.08. bis 09.08.2026</div>' + +          '<div class="av-popup-location">Bei uns auf dem Theresienberg in Waldenburg</div>' + 
-            '<div class="av-popup-location">Bei uns auf dem Theresienberg in Waldenburg</div>' + +          '<div class="av-popup-program">' + 
-            '<div class="av-popup-program">' + +            '<div><strong>Samstag ab 16:30 Uhr:</strong> gemütliche Hocketse an der Albvereins-Hütte und rund um den Grillplatz.</div>' + 
-              '<div><strong>Samstag ab 16:30 Uhr:</strong> gemütliche Hocketse an der Albvereins-Hütte und rund um den Grillplatz.</div>' + +            '<div><strong>Samstag ab 19:00 Uhr:</strong> Barbetrieb und Live-Musik mit der Waldenburger Newcomer Band „June“.</div>' + 
-              '<div><strong>Samstag ab 19:00 Uhr:</strong> Barbetrieb und Live-Musik mit der Waldenburger Newcomer Band „June“.</div>' + +            '<div><strong>Samstag ab 20:30 Uhr:</strong> Live-Musik mit den „Hohenloher Lieblingen“.</div>' + 
-              '<div><strong>Samstag ab 20:30 Uhr:</strong> Live-Musik mit den „Hohenloher Lieblingen“.</div>' + +            '<div><strong>Sonntag ab 11:00 Uhr:</strong> musikalischer Weißwurst-Frühschoppen mit dem Musikverein Waldenburg.</div>' + 
-              '<div><strong>Sonntag ab 11:00 Uhr:</strong> musikalischer Weißwurst-Frühschoppen mit dem Musikverein Waldenburg.</div>' + +            '<div><strong>Sonntag ab 13:00 Uhr:</strong> Kaffee und große Kuchen- & Tortenauswahl.</div>' + 
-              '<div><strong>Sonntag ab 13:00 Uhr:</strong> Kaffee und große Kuchen- & Tortenauswahl.</div>' + +            '<div><strong>Sonntag ab 14:00 Uhr:</strong> Zaubershow für Groß und Klein mit „Hokus-Pokus mit Bernardo“.</div>' + 
-              '<div><strong>Sonntag ab 14:00 Uhr:</strong> Zaubershow für Groß und Klein mit „Hokus-Pokus mit Bernardo“.</div>' + +            '<div><strong>An beiden Tagen:</strong> Spezialitäten vom Grill, Maultaschen, Forellen, Fassbier, Hohenloher Weine und Erfrischungsgetränke.</div>' +
-              '<div><strong>An beiden Tagen:</strong> Spezialitäten vom Grill, Maultaschen, Forellen, Fassbier, Hohenloher Weine und Erfrischungsgetränke.</div>' + +
-            '</div>' + +
-            '<div class="av-popup-actions">' + +
-              '<button type="button" class="av-popup-button av-sound">♪ Musik starten</button>' + +
-              '<a class="av-popup-button av-download" href="' + flyerUrl + '" target="_blank" rel="noopener">Flyer herunterladen</a>' + +
-            '</div>' ++
           '</div>' +           '</div>' +
-          '<div class="av-flyer-wrap">' + +          '<div class="av-popup-flyer-callout">' + 
-            '<object data="' + flyerUrl + '#toolbar=0&navpanes=0" type="application/pdf">' + +            'Alle Programmpunkte, Zeiten und Details gibt es übersichtlich im offiziellen Flyer.' + 
-              '<div class="av-flyer-fallback">Der Flyer kann hier nicht direkt angezeigt werden.<br><br><a href="' + flyerUrl + '" target="_blank" rel="noopener">Flyer als PDF öffnen</a></div>' + +          '</div>' + 
-            '</object>' ++          '<div class="av-popup-actions">' + 
 +            '<a class="av-popup-button av-download" href="' + flyerUrl + '" target="_blank" rel="noopener">📄 Offiziellen Flyer herunterladen</a>' + 
 +            '<button type="button" class="av-popup-button av-close-main">Schließen</button>' +
           '</div>' +           '</div>' +
         '</div>' +         '</div>' +
Zeile 611: Zeile 531:
     document.body.style.overflow = "hidden";     document.body.style.overflow = "hidden";
  
-    var box = overlay.querySelector(".av-popup-box"); +    var closeX = overlay.querySelector(".av-popup-close"); 
-    var closeButton = overlay.querySelector(".av-popup-close"); +    var closeMain = overlay.querySelector(".av-close-main");
-    var soundButton = overlay.querySelector(".av-sound");+
     var stage = overlay.querySelector(".av-fire-stage");     var stage = overlay.querySelector(".av-fire-stage");
  
-    addNotes(box); 
     addFlames(stage);     addFlames(stage);
  
-    closeButton.addEventListener("click", closePopup); +    closeX.addEventListener("click", closePopup); 
-    soundButton.addEventListener("click", function () { +    closeMain.addEventListener("click", closePopup);
-      playMusic(soundButton); +
-    });+
  
     overlay.addEventListener("click", function (event) {     overlay.addEventListener("click", function (event) {
Zeile 629: Zeile 545:
  
     document.addEventListener("keydown", onEscape);     document.addEventListener("keydown", onEscape);
-    closeButton.focus(); +    closeX.focus();
- +
-    hideTimer = setTimeout(closePopup, 11000);+
   }   }
  
start.1785312207.txt.gz · Zuletzt geändert: von dfrey
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki