narrowtux/countdown.html

## countdown.html
<!doctype html>
<html>
  <head>
    <title>Test</title>
    <style>
      body {
        color: white;
        background: black;
        font-family: "Helvetica", Arial, sans-serif;
      }

      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }

      #cta, #timer {
        text-align: center;
        max-width: 50vw;
      }

      #cta {
        font-size: 4rem;
      }

      #timer {
        font-size: 5rem;
      }

      .nudge {
        animation: nudge 2s infinite;
      }

      .red {
        color: #6e1b00;
      }

      @keyframes nudge {
        0% {
          transform: scale(1)
        }
        5% {
          transform: scale(1.25)
        }
        10% {
          transform: scale(1)
        }
        15% {
          transform: scale(1.25)
        }
        20% {
          transform: scale(1)
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p id="cta">Kurze Pause</p>
      <div id="timer"></div>
    </div>
    <script>

      function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (decodeURIComponent(pair[0]) == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
    }

      let targetTime = new Date()

      targetTime.setHours(12)
      targetTime.setMinutes(0)
      targetTime.setSeconds(0)
      targetTime.setMilliseconds(0)

      let targetStr = getQueryVariable("until")
      if (targetStr) {
        let parts = targetStr.split(":")
        targetTime.setHours(parts[0])
        targetTime.setMinutes(parts[1] || 0)
        targetTime.setSeconds(parts[2] || 0)
      }

      let timerEl = document.getElementById("timer")
      let ctaEl = document.getElementById("cta")

      function leading0(val) {
        if (val >= 10) return val + ""
        else return `0${val}`
      }

      function updateCountdown() {
        let diff = targetTime - new Date()

        let absDiff = Math.abs(diff)
        let millis = absDiff % 1000
        let seconds = Math.floor(absDiff / 1000) % 60
        let minutes = Math.floor(absDiff / (60 * 1000)) % 60
        let hours = Math.floor(absDiff / (60 * 60 * 1000))

        timerEl.innerHTML = `${leading0(hours)}:${leading0(minutes)}:${leading0(seconds)}`

        ctaEl.innerHTML = `Pause bis ${leading0(targetTime.getHours())}:${leading0(targetTime.getMinutes())}`
        if (diff <= 2 * 60 * 1000 && diff >= 0) {
          ctaEl.innerHTML = `Gleich geht es weiter!<br>Bitte such' dir jetzt einen Platz.`
          timerEl.classList.add("nudge")
        } else if (diff < 0) {
          ctaEl.innerHTML = "Es geht weiter!"
          ctaEl.classList.add("nudge")
          timerEl.classList.add("nudge")
          timerEl.classList.add("red")
        }

        requestAnimationFrame(updateCountdown)
      }
      updateCountdown()
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Test</title>
	<style>
	body {
	color: white;
	background: black;
	font-family: "Helvetica", Arial, sans-serif;
	}

	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	}

	#cta, #timer {
	text-align: center;
	max-width: 50vw;
	}

	#cta {
	font-size: 4rem;
	}

	#timer {
	font-size: 5rem;
	}

	.nudge {
	animation: nudge 2s infinite;
	}

	.red {
	color: #6e1b00;
	}

	@keyframes nudge {
	0% {
	transform: scale(1)
	}
	5% {
	transform: scale(1.25)
	}
	10% {
	transform: scale(1)
	}
	15% {
	transform: scale(1.25)
	}
	20% {
	transform: scale(1)
	}
	}
	</style>
	</head>

	<body>
	<div class="container">
	<p id="cta">Kurze Pause</p>
	<div id="timer"></div>
	</div>
	<script>

	function getQueryVariable(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split('&');
	for (var i = 0; i < vars.length; i++) {
	var pair = vars[i].split('=');
	if (decodeURIComponent(pair[0]) == variable) {
	return decodeURIComponent(pair[1]);
	}
	}
	}

	let targetTime = new Date()

	targetTime.setHours(12)
	targetTime.setMinutes(0)
	targetTime.setSeconds(0)
	targetTime.setMilliseconds(0)

	let targetStr = getQueryVariable("until")
	if (targetStr) {
	let parts = targetStr.split(":")
	targetTime.setHours(parts[0])
	targetTime.setMinutes(parts[1] \|\| 0)
	targetTime.setSeconds(parts[2] \|\| 0)
	}

	let timerEl = document.getElementById("timer")
	let ctaEl = document.getElementById("cta")

	function leading0(val) {
	if (val >= 10) return val + ""
	else return `0${val}`
	}

	function updateCountdown() {
	let diff = targetTime - new Date()

	let absDiff = Math.abs(diff)
	let millis = absDiff % 1000
	let seconds = Math.floor(absDiff / 1000) % 60
	let minutes = Math.floor(absDiff / (60 * 1000)) % 60
	let hours = Math.floor(absDiff / (60 * 60 * 1000))

	timerEl.innerHTML = `${leading0(hours)}:${leading0(minutes)}:${leading0(seconds)}`

	ctaEl.innerHTML = `Pause bis ${leading0(targetTime.getHours())}:${leading0(targetTime.getMinutes())}`
	if (diff <= 2 * 60 * 1000 && diff >= 0) {
	ctaEl.innerHTML = `Gleich geht es weiter!<br>Bitte such' dir jetzt einen Platz.`
	timerEl.classList.add("nudge")
	} else if (diff < 0) {
	ctaEl.innerHTML = "Es geht weiter!"
	ctaEl.classList.add("nudge")
	timerEl.classList.add("nudge")
	timerEl.classList.add("red")
	}

	requestAnimationFrame(updateCountdown)
	}
	updateCountdown()
	</script>
	</body>
	</html>