<style>
.april_con {
  display:none;
  position:fixed; 
  top:100px;
  left:0;
  right:0;
  background: #ffffff;
  max-width: 800px;
  margin:auto;
  color:#222222;
  padding:10px;
  border-radius:9px;
  border:2px solid #aaaaaa;
  z-index:99999;
}
 
.april_div {
  /* Hintergrundbild Startfenster */
  background: url(https://files.homepagemodules.de/b104774/pictures_u610_zHWgswMD.jpg) no-repeat center center; 
  background-size: contain;
}
 
.april_trans { 
  background-color: rgba(230,230,230,0.5); 
  padding:30px;
}
 
.april_info, .april_end_info, .april_reparatur {
  font-size: 16px;
  font-weight:bold;
  border: 1px solid #383838;
  background: #ffeeee;
  box-shadow: 0px 0px 6px #e0e0e0;
  border-radius:9px;
  padding:20px;
  text-align:center;
  margin:10px auto !important;
  letter-spacing: 2px;
  line-height:25px;
  z-index:999999;
}
 
.april_end {
  display:none;
  border-radius: 9px;
  background: #eeeeee;
}
 
.april_end_info, .april_reparatur {
  background: linear-gradient(0deg, #444444 0%, #ffffff 45%, #ffffff 55%, #444444 100%);
  color: #000000;
  font-size: 15px;
  padding: 5px 20px;
  margin: 0 20px !important;
  font-weight:bold;
}
 
.april_end img {
  max-width:300px;
  border-radius: 9px;
  margin:10px;
}
 
.april_Button {
  font-weight: bolder;
  background: linear-gradient(0deg, #a10400 0%, #eeeeee 50%, #a10400 100%);
  font-size: 20px;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
}
 
.april_reparatur {
  display: none;
}
 
.april_Button:hover {
  background: linear-gradient(0deg, #c32621 0%, #ffffff 50%, #c32621 100%);
}
</style>
 
<script>
/* Startzeit Jahr, Monat (April=3), Tag, Stunde, Minute, Sekunde */
var now = Date.parse(new Date());
var start = Date.parse(new Date(2024, 03, 01, 0, 0, 0));
 
/* Endezeit: Jahr, Monat (April=3), Tag, Stunde, Minute, Sekunde */
var end = Date.parse(new Date(2024, 03, 03, 0, 0, 0));
 
if(now > start && now < end) {
 
  window.addEventListener('load', function(){
 
  $('body').prepend(`
    <center>
      <div class="april_con">
        <div class="april_div">
          <div class="april_trans">
            <div class="april_info">
 
              <!-- Text Startfenster -->
              Der Treiber Ihre Grafikkarte ist fehlerhaft!
              <br>
              Installieren Sie den Grafiktreiber neu oder klicken Sie einfach auf den Reparatur-Button!
            </div>
 
            <br><br>
 
            <!-- Reparatur-Button -->
            <button class="april_Button">Reparieren!</button>
            <br>
 
            <div class="april_reparatur">
 
              <!-- Reparatur-Text --> 
              Die Reparatur wurde durchgeführt!
            </div>
            <br>
 
          </div>
        </div>
 
        <div class="april_end">
          <br>
 
          <!-- Abschlussbild April-Scherz -->
          <img src="https://files.homepagemodules.de/b104774/a_706_9869747b.jpg">
          <br>
          <div class="april_end_info">
 
            <!-- Abschlusstext April-Scherz -->
            Bis dann und weiterhin viel Spaß im Forum!
          </div>
          <br>
        </div>
 
      </div>
    </center>
  `);
 
  $('.april_Button').on('click', function(){
 
    // April-Scherz wird aufgehoben  
    $('html, .main, .container, #obere_leiste, .footer, .page2, #wrap, table .tbhi').attr('style','-webkit-transform: none; transform: none; filter: none; -webkit-filter: none; transition: all 1.9s ease-in-out 0s');
 
    $('.april_Button, .april_info').hide();
    $('.april_reparatur').show(1000);
 
    // Ausblenden Startfenster
    $('.april_div').delay(5000).hide(1000);
 
    // Einblenden Abschlussbild und Text
    $('.april_end').delay(7000).show(1000);
 
    // Automatischen Ausblenden nach Zeit (nach Klick auf Button - 15 Sekunden)
    function april_out(){
      $('.april_con').hide(1000);
    };
    setTimeout(april_out, 15000);
 
    $('.container .spacer20, .inpage, #pagewidth, #forum .xFeedContainer').attr('style','margin-top:0; transition: all 1.9s ease-in-out 0s;');
 
    // Sitzungscookie setzen - Zustand speichern
    sessionStorage.setItem('april_Cook','true');
 
  });
 
  // Sitzungscookie auslesen
  if (sessionStorage.getItem('april_Cook') == 'true'){
    $('.april_con').hide();
  } else {
 
    // 1. Scherz - Forumseite wird nach unten geschoben
    $('.container .spacer20, .inpage, .section-index #pagewidth, #forum .xFeedContainer').attr('style','margin-top:80px; transition: all 0.9s ease-in-out 0s;');
 
    // 2. Scherz - Forumseite wird um 2 Grad gedreht
    $('.container, .page2, #wrap, table .tbhi').attr('style','transform: rotate(2deg); -webkit-transform: rotate(2deg); transition: all 1.9s ease-in-out 0s;');
 

    //// Ab hier nur ein Effekt freigeben!!! ////
 
    // 3. Scherz - Forumseite wird grau
    $('html').attr('style','filter: grayscale(100%); -webkit-filter: grayscale(100%);');
 
    // 4. Scherz - Forumseite Farbe negativ
    // $('html').attr('style','filter: invert(100%); -webkit-filter: invert(100%);');
 
    // 5. Scherz - Forumseite Farbe sepia (gut für Foren mit schwarzen Design)
    // $('html').attr('style','filter: sepia(50%); -webkit-filter: sepia(50%);');
 
    // 6. Scherz - Forumseite wird unscharf dargestellt
    // $('.main, #obere_leiste, .footer, .ppage2, #pagewidth, #wrap, table .tbhi').attr('style','filter: blur(4px); -webkit-filter: blur(4px);');
 
 
    // Startverzögerung
    $('.april_con').delay(2000).show(1000);
 
    // Nur fürs Business-Template
    $('.header').attr('style','z-index:9999');
 
  };
 
  });
 
};
</script>