66 lines
1.7 KiB
HTML
66 lines
1.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>Chaostreff Chemnitz - KI-Promptbattle</title>
|
|
<script>
|
|
function paddedFormat(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
}
|
|
|
|
function startCountDown(duration, element) {
|
|
let secondsRemaining = duration;
|
|
let min = 0;
|
|
let sec = 0;
|
|
|
|
let countInterval = setInterval(function() {
|
|
min = parseInt(secondsRemaining / 60);
|
|
sec = parseInt(secondsRemaining % 60);
|
|
|
|
element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;
|
|
|
|
secondsRemaining = secondsRemaining - 1;
|
|
if (secondsRemaining < 0) {
|
|
clearInterval(countInterval)
|
|
};
|
|
}, 1000);
|
|
}
|
|
|
|
window.onclick = function() {
|
|
|
|
let time_minutes = 1; // Value in minutes
|
|
let time_seconds = 0; // Value in seconds
|
|
|
|
let duration = time_minutes * 60 + time_seconds;
|
|
|
|
element = document.querySelector('#count-down-timer');
|
|
element.textContent =
|
|
`${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;
|
|
|
|
startCountDown(--duration, element);
|
|
};
|
|
|
|
</script>
|
|
<style>
|
|
html { font-family: Arial;
|
|
text-align: center; }
|
|
|
|
h1 { font-size: 100pt;
|
|
visibility:show; }
|
|
|
|
h2 { font-size: 50pt;
|
|
visibility:show; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<p onkeypress="function(runtimer)"><h1 class="text-center" id="count-down-timer">01:00</h1></p>
|
|
|
|
<p><h2 id="question"></h2></p>
|
|
|
|
<b onclick="document.getElementById('question').innerText = '';">empty</b>
|
|
<b onclick="document.getElementById('question').innerText = 'Male Chemnitz im Mittelalter, zum Zeitpunkt deiner Geburt, in 2025, in 2026 und im Jahre 2100.';">Q1</b>
|
|
<b onclick="document.getElementById('question').innerText = 'Erzeuge ein Bild mit einer Chemnitzer Sehenswürdigkeit (Roter Turm, Karl-Marx-Monument, Markuskirche, Schlossberg, Hauptbahnhof)';">Q2</b>
|
|
|
|
|
|
</body>
|
|
</html>
|