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
Nächste Überarbeitung		Vorhergehende Überarbeitung
start [2026/06/19 16:37] – dfreystart [2026/06/19 19:23] (aktuell) – dfrey
Zeile 1: Zeile 1:
 {{img:huette:avh1.png?nolink|}} {{img:huette:avh1.png?nolink|}}
 +
 +<html>
 +<!-- ------------------------------------------------------------------------------------------------------------------------ -->
 +<div id="av-grillfest-2026">
 +  <section class="av-grillfest-card" aria-labelledby="av-grillfest-title">
 +    <div class="av-grillfest-card-fire" aria-hidden="true">🔥</div>
 +
 +    <div>
 +      <div class="av-grillfest-card-date">8. &amp; 9. August 2026</div>
 +
 +      <h2 id="av-grillfest-title">
 +        Grillfest auf dem Theresienberg
 +      </h2>
 +
 +      <p>
 +        Wir laden herzlich zum Grillfest an unserer AV-Hütte ein:
 +        <strong>Samstagabend und Sonntag.</strong>
 +      </p>
 +
 +      <p class="av-grillfest-card-promise">
 +        🎵 Für Musik und das leibliche Wohl ist bestens gesorgt!
 +      </p>
 +
 +      <button type="button" class="av-grillfest-replay">
 +        🔥 Ankündigung noch einmal ansehen
 +      </button>
 +    </div>
 +  </section>
 +</div>
 +
 +<style>
 +  #av-grillfest-2026 {
 +    --av-green: #176b36;
 +    --av-dark-green: #0d4724;
 +    --av-cream: #fff8e6;
 +    --av-gold: #ffc44d;
 +
 +    max-width: 900px;
 +    margin: 28px auto;
 +    font-family: Arial, Helvetica, sans-serif;
 +  }
 +
 +  /* Statischer Hinweis */
 +
 +  .av-grillfest-card {
 +    display: flex;
 +    align-items: center;
 +    gap: 22px;
 +    box-sizing: border-box;
 +    padding: 25px 28px;
 +    color: #183221;
 +    background:
 +      linear-gradient(120deg, rgba(255,255,255,.94), rgba(255,248,220,.96)),
 +      var(--av-cream);
 +    border: 3px solid var(--av-green);
 +    border-radius: 15px;
 +    box-shadow: 0 10px 28px rgba(16,66,34,.18);
 +  }
 +
 +  .av-grillfest-card-fire {
 +    flex: 0 0 auto;
 +    font-size: clamp(55px, 9vw, 90px);
 +    filter: drop-shadow(0 8px 8px rgba(160,50,10,.2));
 +  }
 +
 +  .av-grillfest-card-date {
 +    display: inline-block;
 +    padding: 5px 12px;
 +    color: #fff;
 +    background: var(--av-green);
 +    border-radius: 999px;
 +    font-size: 15px;
 +    font-weight: bold;
 +    letter-spacing: .04em;
 +  }
 +
 +  .av-grillfest-card h2 {
 +    margin: 9px 0 8px;
 +    color: var(--av-dark-green);
 +    font-family: Georgia, "Times New Roman", serif;
 +    font-size: clamp(25px, 4vw, 38px);
 +    line-height: 1.1;
 +  }
 +
 +  .av-grillfest-card p {
 +    margin: 7px 0;
 +    font-size: 17px;
 +    line-height: 1.55;
 +  }
 +
 +  .av-grillfest-card-promise {
 +    color: var(--av-dark-green);
 +    font-weight: bold;
 +  }
 +
 +  .av-grillfest-replay,
 +  .av-grillfest-sound,
 +  .av-grillfest-close {
 +    border: 0;
 +    cursor: pointer;
 +    font: inherit;
 +  }
 +
 +  .av-grillfest-replay {
 +    margin-top: 12px;
 +    padding: 9px 14px;
 +    color: #fff;
 +    background: var(--av-green);
 +    border-radius: 7px;
 +    font-weight: bold;
 +  }
 +
 +  .av-grillfest-replay:hover,
 +  .av-grillfest-replay:focus {
 +    background: var(--av-dark-green);
 +  }
 +
 +  /* Vollbild-Ankündigung */
 +
 +  .av-grillfest-overlay {
 +    position: fixed;
 +    z-index: 2147483000;
 +    inset: 0;
 +    display: grid;
 +    place-items: center;
 +    overflow: hidden;
 +    box-sizing: border-box;
 +    padding: 22px;
 +    color: #fff;
 +    background:
 +      radial-gradient(
 +        circle at 50% 85%,
 +        rgba(197,45,20,.55),
 +        transparent 42%
 +      ),
 +      rgba(4,10,6,.94);
 +    backdrop-filter: blur(4px);
 +    animation: av-overlay-in .6s ease both;
 +  }
 +
 +  .av-grillfest-overlay.av-grillfest-leaving {
 +    animation: av-overlay-out .7s ease both;
 +  }
 +
 +  .av-grillfest-stage {
 +    position: relative;
 +    z-index: 5;
 +    width: min(760px, 94vw);
 +    box-sizing: border-box;
 +    padding: clamp(30px, 5vw, 48px);
 +    text-align: center;
 +    background: rgba(14,37,21,.86);
 +    border: 2px solid rgba(255,196,77,.82);
 +    border-radius: 22px;
 +    box-shadow:
 +      0 0 80px rgba(243,107,33,.3),
 +      inset 0 0 35px rgba(255,196,77,.08);
 +    animation:
 +      av-stage-in .8s .15s cubic-bezier(.2,.8,.2,1) both,
 +      av-stage-glow 2s 1s ease-in-out infinite alternate;
 +  }
 +
 +  .av-grillfest-kicker {
 +    color: var(--av-gold);
 +    font-size: clamp(15px, 3vw, 21px);
 +    font-weight: bold;
 +    letter-spacing: .18em;
 +    text-transform: uppercase;
 +  }
 +
 +  .av-grillfest-stage h2 {
 +    margin: 12px 0;
 +    color: #fff6d6;
 +    font-family: Georgia, "Times New Roman", serif;
 +    font-size: clamp(36px, 8vw, 76px);
 +    line-height: .98;
 +    text-shadow:
 +      0 2px 0 #8e2b13,
 +      0 0 24px rgba(255,137,32,.55);
 +  }
 +
 +  .av-grillfest-overlay-date {
 +    margin: 10px 0 17px;
 +    color: var(--av-gold);
 +    font-family: Georgia, "Times New Roman", serif;
 +    font-size: clamp(25px, 5vw, 43px);
 +    font-weight: bold;
 +  }
 +
 +  .av-grillfest-stage p {
 +    max-width: 650px;
 +    margin: 8px auto;
 +    font-size: clamp(17px, 3vw, 23px);
 +    line-height: 1.45;
 +  }
 +
 +  .av-grillfest-music-line {
 +    color: #ffe7a3;
 +    font-weight: bold;
 +  }
 +
 +  .av-grillfest-sound {
 +    margin-top: 20px;
 +    padding: 10px 18px;
 +    color: #322008;
 +    background: var(--av-gold);
 +    border-radius: 999px;
 +    font-weight: bold;
 +    box-shadow: 0 5px 18px rgba(0,0,0,.28);
 +  }
 +
 +  .av-grillfest-sound:hover,
 +  .av-grillfest-sound:focus {
 +    background: #ffe18a;
 +  }
 +
 +  .av-grillfest-sound:disabled {
 +    cursor: default;
 +    opacity: .82;
 +  }
 +
 +  .av-grillfest-close {
 +    position: absolute;
 +    top: 13px;
 +    right: 13px;
 +    width: 42px;
 +    height: 42px;
 +    padding: 0;
 +    color: #fff;
 +    background: rgba(0,0,0,.38);
 +    border: 1px solid rgba(255,255,255,.45);
 +    border-radius: 50%;
 +    font-size: 25px;
 +    line-height: 38px;
 +  }
 +
 +  .av-grillfest-close:hover,
 +  .av-grillfest-close:focus {
 +    background: rgba(180,40,15,.72);
 +  }
 +
 +  /* Realistischere Flammen */
 +
 +  .av-grillfest-flames {
 +    position: absolute;
 +    z-index: 2;
 +    right: -4%;
 +    bottom: -35px;
 +    left: -4%;
 +    display: flex;
 +    align-items: flex-end;
 +    justify-content: center;
 +    height: 38vh;
 +    overflow: visible;
 +    pointer-events: none;
 +    filter: contrast(1.12) saturate(1.25);
 +  }
 +
 +  .av-grillfest-flames::before {
 +    content: "";
 +    position: absolute;
 +    right: 5%;
 +    bottom: 0;
 +    left: 5%;
 +    height: 55%;
 +    background: radial-gradient(
 +      ellipse at center bottom,
 +      rgba(255,210,65,.75) 0%,
 +      rgba(255,91,20,.45) 32%,
 +      rgba(190,24,10,.18) 58%,
 +      transparent 75%
 +    );
 +    filter: blur(28px);
 +    animation: av-fire-glow 1.4s ease-in-out infinite alternate;
 +  }
 +
 +  .av-grillfest-flame {
 +    position: relative;
 +    width: clamp(48px, 8vw, 105px);
 +    height: clamp(145px, 31vh, 330px);
 +    margin: 0 clamp(-18px, -1.5vw, -7px);
 +    background: radial-gradient(
 +      ellipse at 50% 88%,
 +      #fffbd0 0%,
 +      #ffe26a 10%,
 +      #ff9b20 30%,
 +      #f04416 57%,
 +      #a90f0b 76%,
 +      transparent 78%
 +    );
 +    clip-path: polygon(
 +      50% 0%,
 +      64% 18%,
 +      72% 34%,
 +      91% 58%,
 +      85% 81%,
 +      69% 96%,
 +      50% 100%,
 +      27% 96%,
 +      10% 78%,
 +      16% 54%,
 +      36% 31%
 +    );
 +    opacity: .92;
 +    transform-origin: 50% 100%;
 +    filter:
 +      blur(.4px)
 +      drop-shadow(0 0 8px rgba(255,91,20,.9))
 +      drop-shadow(0 0 20px rgba(255,45,10,.55));
 +    animation: av-real-flame 1.05s ease-in-out infinite alternate;
 +  }
 +
 +  .av-grillfest-flame::before {
 +    content: "";
 +    position: absolute;
 +    right: 25%;
 +    bottom: 0;
 +    left: 25%;
 +    height: 70%;
 +    background: linear-gradient(
 +      to top,
 +      #fffde3 0%,
 +      #ffe96f 28%,
 +      #ffad24 63%,
 +      rgba(255,96,20,.2) 100%
 +    );
 +    clip-path: polygon(
 +      50% 0%,
 +      75% 35%,
 +      91% 68%,
 +      72% 94%,
 +      50% 100%,
 +      23% 92%,
 +      10% 65%,
 +      35% 33%
 +    );
 +    filter: blur(1px);
 +    animation: av-inner-flame .72s ease-in-out infinite alternate;
 +  }
 +
 +  .av-grillfest-flame::after {
 +    content: "";
 +    position: absolute;
 +    right: 38%;
 +    bottom: 1%;
 +    left: 38%;
 +    height: 35%;
 +    background: linear-gradient(
 +      to top,
 +      #fff,
 +      #fff8b0 48%,
 +      rgba(255,210,50,0)
 +    );
 +    border-radius: 50% 50% 30% 30%;
 +    filter: blur(2px);
 +    opacity: .9;
 +  }
 +
 +  .av-grillfest-flame:nth-child(2n) {
 +    height: clamp(105px, 22vh, 235px);
 +    animation-duration: .78s;
 +    animation-delay: -.45s;
 +  }
 +
 +  .av-grillfest-flame:nth-child(3n) {
 +    height: clamp(170px, 35vh, 365px);
 +    animation-duration: 1.28s;
 +    animation-delay: -.85s;
 +  }
 +
 +  .av-grillfest-flame:nth-child(4n) {
 +    width: clamp(35px, 6vw, 78px);
 +    height: clamp(85px, 19vh, 205px);
 +    animation-duration: .66s;
 +    animation-delay: -.25s;
 +  }
 +
 +  .av-grillfest-flame:nth-child(5n) {
 +    opacity: .75;
 +    filter:
 +      blur(1.4px)
 +      drop-shadow(0 0 16px rgba(255,65,10,.8));
 +  }
 +
 +  /* Aufsteigende Glut */
 +
 +  .av-grillfest-embers {
 +    position: absolute;
 +    z-index: 3;
 +    inset: 0;
 +    overflow: hidden;
 +    pointer-events: none;
 +  }
 +
 +  .av-grillfest-ember {
 +    position: absolute;
 +    bottom: 2%;
 +    width: 4px;
 +    height: 4px;
 +    background: #ffd45c;
 +    border-radius: 50%;
 +    box-shadow:
 +      0 0 5px #fff4a5,
 +      0 0 12px #ff6a16;
 +    opacity: 0;
 +    animation: av-ember-rise 3.4s linear infinite;
 +  }
 +
 +  .av-grillfest-ember:nth-child(1)  { left: 8%;  animation-delay: -.3s; }
 +  .av-grillfest-ember:nth-child(2)  { left: 15%; animation-delay: -1.8s; }
 +  .av-grillfest-ember:nth-child(3)  { left: 22%; animation-delay: -.9s; }
 +  .av-grillfest-ember:nth-child(4)  { left: 29%; animation-delay: -2.5s; }
 +  .av-grillfest-ember:nth-child(5)  { left: 36%; animation-delay: -1.2s; }
 +  .av-grillfest-ember:nth-child(6)  { left: 43%; animation-delay: -2.9s; }
 +  .av-grillfest-ember:nth-child(7)  { left: 50%; animation-delay: -.5s; }
 +  .av-grillfest-ember:nth-child(8)  { left: 57%; animation-delay: -2.1s; }
 +  .av-grillfest-ember:nth-child(9)  { left: 64%; animation-delay: -1.4s; }
 +  .av-grillfest-ember:nth-child(10) { left: 71%; animation-delay: -3.1s; }
 +  .av-grillfest-ember:nth-child(11) { left: 78%; animation-delay: -.8s; }
 +  .av-grillfest-ember:nth-child(12) { left: 85%; animation-delay: -2.3s; }
 +
 +  .av-grillfest-ember:nth-child(3n) {
 +    width: 7px;
 +    height: 7px;
 +  }
 +
 +  /* Musiknoten */
 +
 +  .av-grillfest-notes {
 +    position: absolute;
 +    z-index: 4;
 +    inset: 0;
 +    overflow: hidden;
 +    pointer-events: none;
 +  }
 +
 +  .av-grillfest-note {
 +    position: absolute;
 +    bottom: 10%;
 +    color: #ffe27a;
 +    font-size: clamp(25px, 5vw, 52px);
 +    opacity: 0;
 +    animation: av-note-rise 4s linear infinite;
 +  }
 +
 +  .av-grillfest-note:nth-child(1) {
 +    left: 8%;
 +    animation-delay: 0s;
 +  }
 +
 +  .av-grillfest-note:nth-child(2) {
 +    left: 23%;
 +    animation-delay: 1.4s;
 +  }
 +
 +  .av-grillfest-note:nth-child(3) {
 +    right: 22%;
 +    animation-delay: .7s;
 +  }
 +
 +  .av-grillfest-note:nth-child(4) {
 +    right: 7%;
 +    animation-delay: 2.1s;
 +  }
 +
 +  /* Animationen */
 +
 +  @keyframes av-overlay-in {
 +    from { opacity: 0; }
 +    to   { opacity: 1; }
 +  }
 +
 +  @keyframes av-overlay-out {
 +    from { opacity: 1; }
 +    to   { opacity: 0; }
 +  }
 +
 +  @keyframes av-stage-in {
 +    from {
 +      opacity: 0;
 +      transform: scale(.72) translateY(35px);
 +    }
 +    to {
 +      opacity: 1;
 +      transform: scale(1) translateY(0);
 +    }
 +  }
 +
 +  @keyframes av-stage-glow {
 +    from {
 +      box-shadow:
 +        0 0 55px rgba(243,107,33,.22),
 +        inset 0 0 35px rgba(255,196,77,.08);
 +    }
 +    to {
 +      box-shadow:
 +        0 0 95px rgba(243,107,33,.42),
 +        inset 0 0 50px rgba(255,196,77,.13);
 +    }
 +  }
 +
 +  @keyframes av-real-flame {
 +    0% {
 +      transform: scaleX(.78) scaleY(1.03) rotate(-4deg);
 +    }
 +    35% {
 +      transform: scaleX(1.04) scaleY(.91) rotate(3deg);
 +    }
 +    70% {
 +      transform: scaleX(.89) scaleY(1.08) rotate(-2deg);
 +    }
 +    100% {
 +      transform: scaleX(1.12) scaleY(.87) rotate(5deg);
 +    }
 +  }
 +
 +  @keyframes av-inner-flame {
 +    from {
 +      transform: translateX(-5%) scaleX(.78) scaleY(1.08);
 +    }
 +    to {
 +      transform: translateX(6%) scaleX(1.15) scaleY(.84);
 +    }
 +  }
 +
 +  @keyframes av-fire-glow {
 +    from {
 +      opacity: .62;
 +      transform: scaleX(.92);
 +    }
 +    to {
 +      opacity: 1;
 +      transform: scaleX(1.08);
 +    }
 +  }
 +
 +  @keyframes av-ember-rise {
 +    0% {
 +      opacity: 0;
 +      transform: translate(0,0) scale(.5);
 +    }
 +    12% {
 +      opacity: 1;
 +    }
 +    65% {
 +      opacity: .75;
 +    }
 +    100% {
 +      opacity: 0;
 +      transform: translate(35px,-70vh) scale(.15);
 +    }
 +  }
 +
 +  @keyframes av-note-rise {
 +    0% {
 +      opacity: 0;
 +      transform: translateY(0) rotate(-12deg);
 +    }
 +    20% {
 +      opacity: .9;
 +    }
 +    80% {
 +      opacity: .6;
 +    }
 +    100% {
 +      opacity: 0;
 +      transform: translateY(-75vh) rotate(18deg);
 +    }
 +  }
 +
 +  @media (max-width: 620px) {
 +    .av-grillfest-card {
 +      display: block;
 +      padding: 20px;
 +      text-align: center;
 +    }
 +
 +    .av-grillfest-card-fire {
 +      margin-bottom: 5px;
 +    }
 +
 +    .av-grillfest-stage {
 +      padding: 45px 18px 28px;
 +    }
 +
 +    .av-grillfest-flames {
 +      bottom: -45px;
 +      height: 30vh;
 +    }
 +  }
 +
 +  @media (prefers-reduced-motion: reduce) {
 +    .av-grillfest-overlay,
 +    .av-grillfest-stage,
 +    .av-grillfest-flame,
 +    .av-grillfest-flame::before,
 +    .av-grillfest-ember,
 +    .av-grillfest-note,
 +    .av-grillfest-flames::before {
 +      animation: none !important;
 +    }
 +
 +    .av-grillfest-ember,
 +    .av-grillfest-note {
 +      display: none;
 +    }
 +  }
 +</style>
 +
 +<script>
 +(function () {
 +  "use strict";
 +
 +  var root = document.getElementById("av-grillfest-2026");
 +
 +  if (!root || root.getAttribute("data-initialized") === "true") {
 +    return;
 +  }
 +
 +  root.setAttribute("data-initialized", "true");
 +
 +  var closeTimer = null;
 +  var previousOverflow = "";
 +  var audioContext = null;
 +  var escapeHandler = null;
 +
 +  function playMusic(button) {
 +    var AudioContextClass =
 +      window.AudioContext || window.webkitAudioContext;
 +
 +    if (!AudioContextClass) {
 +      button.textContent = "Musik wird nicht unterstützt";
 +      return;
 +    }
 +
 +    audioContext = audioContext || new AudioContextClass();
 +    audioContext.resume();
 +
 +    var notes = [
 +      [392.00, 0.00],
 +      [440.00, 0.28],
 +      [493.88, 0.56],
 +      [523.25, 0.84],
 +      [493.88, 1.20],
 +      [440.00, 1.48],
 +      [392.00, 1.76],
 +      [523.25, 2.12],
 +      [587.33, 2.48],
 +      [523.25, 2.84]
 +    ];
 +
 +    notes.forEach(function (note) {
 +      var oscillator = audioContext.createOscillator();
 +      var gain = audioContext.createGain();
 +      var start = audioContext.currentTime + note[1];
 +
 +      oscillator.type = "triangle";
 +      oscillator.frequency.value = note[0];
 +
 +      gain.gain.setValueAtTime(0.0001, start);
 +      gain.gain.exponentialRampToValueAtTime(
 +        0.12,
 +        start + 0.04
 +      );
 +      gain.gain.exponentialRampToValueAtTime(
 +        0.0001,
 +        start + 0.25
 +      );
 +
 +      oscillator.connect(gain);
 +      gain.connect(audioContext.destination);
 +
 +      oscillator.start(start);
 +      oscillator.stop(start + 0.27);
 +    });
 +
 +    button.textContent = "♫ Musik läuft";
 +    button.disabled = true;
 +  }
 +
 +  function hideOverlay() {
 +    var overlay =
 +      document.querySelector(".av-grillfest-overlay");
 +
 +    if (
 +      !overlay ||
 +      overlay.classList.contains("av-grillfest-leaving")
 +    ) {
 +      return;
 +    }
 +
 +    window.clearTimeout(closeTimer);
 +    overlay.classList.add("av-grillfest-leaving");
 +
 +    if (escapeHandler) {
 +      document.removeEventListener("keydown", escapeHandler);
 +      escapeHandler = null;
 +    }
 +
 +    window.setTimeout(function () {
 +      overlay.remove();
 +      document.body.style.overflow = previousOverflow;
 +    }, 700);
 +  }
 +
 +  function createRepeatedElement(className, amount) {
 +    var result = "";
 +
 +    for (var i = 0; i < amount; i++) {
 +      result += '<span class="' + className + '"></span>';
 +    }
 +
 +    return result;
 +  }
 +
 +  function showOverlay() {
 +    if (document.querySelector(".av-grillfest-overlay")) {
 +      return;
 +    }
 +
 +    previousOverflow = document.body.style.overflow;
 +    document.body.style.overflow = "hidden";
 +
 +    var overlay = document.createElement("div");
 +
 +    overlay.className = "av-grillfest-overlay";
 +    overlay.setAttribute("role", "dialog");
 +    overlay.setAttribute("aria-modal", "true");
 +    overlay.setAttribute(
 +      "aria-labelledby",
 +      "av-grillfest-overlay-title"
 +    );
 +
 +    overlay.innerHTML =
 +      '<div class="av-grillfest-notes" aria-hidden="true">' +
 +        '<span class="av-grillfest-note">♪</span>' +
 +        '<span class="av-grillfest-note">♫</span>' +
 +        '<span class="av-grillfest-note">♪</span>' +
 +        '<span class="av-grillfest-note">♬</span>' +
 +      '</div>' +
 +
 +      '<div class="av-grillfest-stage">' +
 +        '<button class="av-grillfest-close" ' +
 +          'type="button" ' +
 +          'aria-label="Ankündigung schließen">×</button>' +
 +
 +        '<div class="av-grillfest-kicker">' +
 +          'Herzliche Einladung' +
 +        '</div>' +
 +
 +        '<h2 id="av-grillfest-overlay-title">' +
 +          'Grillfest' +
 +        '</h2>' +
 +
 +        '<div class="av-grillfest-overlay-date">' +
 +          '8. &amp; 9. August 2026' +
 +        '</div>' +
 +
 +        '<p>' +
 +          'an der AV-Hütte auf dem ' +
 +          '<strong>Theresienberg</strong>' +
 +        '</p>' +
 +
 +        '<p><strong>Samstagabend und Sonntag</strong></p>' +
 +
 +        '<p class="av-grillfest-music-line">' +
 +          'Für Musik und das leibliche Wohl ist gesorgt!' +
 +        '</p>' +
 +
 +        '<button class="av-grillfest-sound" type="button">' +
 +          '♫ Musik starten' +
 +        '</button>' +
 +      '</div>' +
 +
 +      '<div class="av-grillfest-flames" aria-hidden="true">' +
 +        createRepeatedElement("av-grillfest-flame", 15) +
 +      '</div>' +
 +
 +      '<div class="av-grillfest-embers" aria-hidden="true">' +
 +        createRepeatedElement("av-grillfest-ember", 12) +
 +      '</div>';
 +
 +    document.body.appendChild(overlay);
 +
 +    overlay
 +      .querySelector(".av-grillfest-close")
 +      .addEventListener("click", hideOverlay);
 +
 +    overlay
 +      .querySelector(".av-grillfest-sound")
 +      .addEventListener("click", function () {
 +        playMusic(this);
 +      });
 +
 +    overlay.addEventListener("click", function (event) {
 +      if (event.target === overlay) {
 +        hideOverlay();
 +      }
 +    });
 +
 +    escapeHandler = function (event) {
 +      if (event.key === "Escape") {
 +        hideOverlay();
 +      }
 +    };
 +
 +    document.addEventListener("keydown", escapeHandler);
 +
 +    overlay
 +      .querySelector(".av-grillfest-close")
 +      .focus();
 +
 +    /* Automatisch nach 8,5 Sekunden ausblenden */
 +    closeTimer = window.setTimeout(hideOverlay, 8500);
 +  }
 +
 +  root
 +    .querySelector(".av-grillfest-replay")
 +    .addEventListener("click", showOverlay);
 +
 +  /* Animation kurz nach dem Laden starten */
 +  window.setTimeout(showOverlay, 500);
 +})();
 +</script>
 +<!-- ------------------------------------------------------------------------------------------------------------------------ -->
 +</html>
  
 <WRAP centeralign> <WRAP centeralign>
Zeile 44: Zeile 870:
  ++++  ++++
  
 +<html> 
 +<meta property="og:image" content="https://www.xn--avhtte-5ya.de/lib/exe/fetch.php?media=img:huette:avh1.png" /> 
 +</html>
start.1781887032.txt.gz · Zuletzt geändert: von dfrey
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki