<style>
  
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,700');
 
.sylvester {
position:absolute;
background: rgba(179, 167, 183); /* Zurückfallen */
background-color: rgba(179, 167, 183, 0.4);
width:320px;
left:50%;
margin-left: -160px;
text-align:center;
top:30%;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border: 2px solid rgba(179, 72, 47, 0.4);
box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd, 0 8px 16px #bdbdbd;
-webkit-box-shadow: 0 2px 0 -1px #bdbdbd, 0 4px 0 -2px #bdbdbd, 0 0 2px #bdbdbd, 0 8px 16px #bdbdbd;
}
.sylvester h1 {
font-family: Raleway, Open Sans, Droid Sans, Roboto,arial, sans-serif;
padding-bottom:4px;
color:#800000;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.sylvester img {
box-shadow: 0 1px 0 #65750b, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
padding:5px 10px 5px 10px;
margin: 0 25px 0 25px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
height:25px;
width:23px;
}
.sylvester ul {
	list-style-type: none;
  margin: 0 auto;
}
.sylvester li {
	display: inline-block;
	width: 60px;
}
.zahlen {
  color:#1F4761;
  display: inline-block;
  font-family: Raleway, Open Sans, Droid Sans, Roboto,arial,   sans-serif;
	font-size: 26px;
	line-height: 1.5;
	text-align: center;
}
.zuordnung {
  font-family: Raleway, Open Sans, Droid Sans, Roboto,arial,   sans-serif;
	color:#323232;
	font-size: 13px;
	font-variant: small-caps;
	line-height: 1.5;
	margin: 0 auto;
	text-align: center;
	position: ;
	bottom: 3px;
}
  
  </style>
 
<div class="container">
<div class="sylvester">
  <ul id="countdown">
    <li>
      <span class="days zahlen">00</span>
      <p class="timeRefDays zuordnung">days</p>
    </li>
    <li>
      <span class="hours zahlen">00</span>
      <p class="timeRefHours zuordnung">hours</p>
    </li>
    <li>
      <span class="minutes zahlen">00</span>
      <p class="timeRefMinutes zuordnung">minutes</p></li>
    <li>
      <span class="seconds zahlen">00</span><p class="timeRefSeconds zuordnung">seconds</p></li>
  </ul>
  <h1>
    <img alt="Hufeisen" src="https://files.homepagemodules.de/b906480/a_105_d94b9861.png" title="Frohes neues Jahr mit all euren Wünschen">&nbsp;2023&nbsp;
    
    <img alt="Kleeblatt" src="https://files.homepagemodules.de/b906480/a_106_2a59e806.png" title="Glück und Zufriedenheit im neuen Jahr">
    
  </h1>
  </div>
</div>
<script id="rendered-js">
//Inspiriert von C. Berta
 
(function ($) {
  $.fn.countdown = function (options, callback) {
    //custom 'this' selector
    thisEl = $(this);
 
    // Reihe von benutzerdefinierten Einstellungen
    var settings = {
      'date': null,
      'format': null };
 

    // hängen Sie das Einstellungsarray an Optionen an
    if (options) {
      $.extend(settings, options);
    }
 
    //Erstellen Sie die Countdown-Verarbeitungsfunktion
    function countdown_proc() {
      var eventDate = Date.parse(settings.date) / 1000;
      var currentDate = Math.floor($.now() / 1000);
 
      if (eventDate <= currentDate) {
        callback.call(this);
        clearInterval(interval);
      }
 
      var seconds = eventDate - currentDate;
 
      var days = Math.floor(seconds / (60 * 60 * 24));
      //Berechne die Anzahl der Tage
 
      seconds -= days * 60 * 60 * 24;
      //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Tage
 
      var hours = Math.floor(seconds / (60 * 60));
      seconds -= hours * 60 * 60;
      //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Stunden
 
      var minutes = Math.floor(seconds / 60);
      seconds -= minutes * 60;
      //Aktualisieren Sie die Sekundenvariable mit der Anzahl der entfernten Minuten
 
      //Bedingte Aussagen
      if (days == 1) {thisEl.find(".timeRefDays").text("Tag");} else {thisEl.find(".timeRefDays").text("Tage");}
      if (hours == 1) {thisEl.find(".timeRefHours").text("Stunde");} else {thisEl.find(".timeRefHours").text("Stunden");}
      if (minutes == 1) {thisEl.find(".timeRefMinutes").text("Minute");} else {thisEl.find(".timeRefMinutes").text("Minuten");}
      if (seconds == 1) {thisEl.find(".timeRefSeconds").text("Sekunde");} else {thisEl.find(".timeRefSeconds").text("Sekunden");}
 
      //Logik für die Einstellung two_digits ON
      if (settings.format == "on") {
        days = String(days).length >= 2 ? days : "0" + days;
        hours = String(hours).length >= 2 ? hours : "0" + hours;
        minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
        seconds = String(seconds).length >= 2 ? seconds : "0" + seconds;
      }
 
      //Aktualisieren Sie die HTML-Werte des Countdowns.
      thisEl.find(".days").text(days);
      thisEl.find(".hours").text(hours);
      thisEl.find(".minutes").text(minutes);
      thisEl.find(".seconds").text(seconds);
    }
 
    //Führen Sie die Funktion aus
    countdown_proc();
 
    //Schleife die Funktion
    interval = setInterval(countdown_proc, 1000);
  };
 
})(jQuery);
 

 
//Geben Sie die Plugin-Einstellungen an
$("#countdown").countdown({
  //Das Enddatum des Countdowns
  date: "01 january 2023 00:00:00",
 
  // on (03:07:52) | off (3:7:52) - two_digits auf ON gesetzt behält die Layoutkonsistenz bei
  format: "on" },
 

function () {
  // Dies wird ausgeführt, wenn der Countdown abgelaufen ist
  alert("Wir wünschen ein frohes, neues und gesundes Jahr 2023!");
});
//# sourceURL=pen.js
    </script>  
 

<style>
  
  @import url("https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap");
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #dddddd;
  font-size: 4.5vmin;
}
.fireworks-container {
  position: fixed;
  width: 100%;
  height: 100%;
}
.fireworks-container:nth-of-type(2){
  z-index: 9;
}
.countdown {
  display: flex;
  gap: 1rem;
  font-family: "Londrina Solid", cursive;
  color: rgb(255,255,255);
  filter: 
    drop-shadow(-0.05em -0.05em 0.05em rgba(128, 0, 128,1))
    drop-shadow(0.05em 0.05em 0.05em rgba(0,0,0,1))
    drop-shadow(0 0 .5em rgba(255, 192, 203,.5));
}
.countdown div {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.countdown div .value {
  font-size: 2.5em;
  font-weight: 400;
  /* text-shadow: 0 0 0.05em red, 0 0 0.1em black; */
}
.countdown div .label {
  font-size: 0.8em;
  font-weight: 300;
  background: rgba(255, 192, 203,1);
  color: rgb(0,0,0);
}
.countdown div .yeardigit {
  font-size: 8em;
  line-height: 0.9em;
  font-weight: 900;
  /* text-shadow: 0 0 0.02em red, 0 0 0.05em black; */
}
 
</style>
 

 
<body>
	<div class="fireworks-container"></div>
  <div class="fireworks-container"></div>
	<div class="countdown">
		<div>
			<div class="value days">0</div>
			<div class="label">Tage</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value hours">0</div>
			<div class="label">Stunden</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value minutes">0</div>
			<div class="label">Minuten</div>
			<div class="yeardigit">0</div>
		</div>
		<div>
			<div class="value seconds">0</div>
			<div class="label">Sekunden</div>
			<div class="yeardigit">0</div>
		</div>
	</div>
</body>
 
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>
 

<script id="rendered-js">
initFireWorks();
initCountDown();
 
function initFireWorks() {
  const containers = document.querySelectorAll('.fireworks-container');
  containers.forEach((container, index) => {
    index += 1;
    const fireworks = new Fireworks(container, {
      hue: { min: 0, max: 360 },
      delay: { min: 50 / index, max: 100 / index },
      brightness: { min: 80, max: 100 },
      rocketsPoint: 50,
      opacity: 1,
      speed: 1 / index,
      acceleration: 1.05,
      friction: 0.97,
      gravity: 2,
      particles: 200 / index,
      trace: 4 / index,
      explosion: 40 / index });
 
    fireworks.start();
  });
}
function initCountDown() {
  const countdown = setInterval(() => {
    const nextYear = new Date().getFullYear() + 1;
    const nextYearDate = new Date(nextYear, 0, 1);
    const diff = countDownDate(nextYearDate);
 
    Object.keys(diff).forEach(key => {
      document.querySelector("." + key).textContent = diff[key];
    });
 
    document.querySelectorAll('.yeardigit').forEach((digit, index) => {
      digit.textContent = String(nextYear)[index];
    });
  }, 1);
}
 
function countDownDate(date_future) {
  const date_now = new Date();
  let seconds = Math.floor((date_future - date_now) / 1000);
  let minutes = Math.floor(seconds / 60);
  let hours = Math.floor(minutes / 60);
  let days = Math.floor(hours / 24);
 
  hours = hours - days * 24;
  minutes = minutes - days * 24 * 60 - hours * 60;
  seconds = seconds - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;
  return { days, hours, minutes, seconds };
}
//# sourceURL=pen.js
    </script>