batman

2025-06-03 12:16:30 +02:00 · 2025-06-03 12:16:30 +02:00 · d510287965
commit d510287965
parent 4bc6ae0c1a
3 changed files with 167 additions and 0 deletions
--- a/animals.png
+++ b/animals.png
--- a/animals.xcf
+++ b/animals.xcf
--- a/index.html
+++ b/index.html
@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<title>Pantomime</title>
+	<style>
+		html,
+		body {
+			margin: 0;
+			height: 100%;
+			width: 100%;
+		}
+
+		body {
+			display: flex;
+			flex-direction: column;
+			height: 100vh;
+			width: 100vw;
+			padding: 10px;
+			gap: 10px;
+			box-sizing: border-box;
+			font-family: Arial, sans-serif;
+			align-items: center;
+		}
+
+		img {
+			width: 256px;
+			height: 256px;
+			object-fit: none;
+			image-rendering: pixelated;
+			transform: scale(300%);
+		}
+
+		.image-container {
+			width: 100%;
+			height: 60%;
+			position: relative;
+			display: flex;
+			justify-content: center;
+		}
+
+		.image-container img {
+			padding-top: 5rem;
+			position: absolute;
+		}
+
+		.hidden {
+			visibility: hidden;
+		}
+
+		.bw {
+			filter: grayscale(100%);
+		}
+
+		#timeoutInput-label,
+		#timeoutInput,
+		#button-start {
+			z-index: 999;
+			flex-shrink: 0;
+			box-sizing: border-box;
+		}
+
+		#timeoutInput-label {
+			font-weight: 600;
+			font-size: 2rem;
+			margin-bottom: 4px;
+			display: inline-block;
+		}
+
+		#timeoutInput {
+			text-align: center;
+			padding: 6px 10px;
+			font-size: 2rem;
+			border: 1px solid #ccc;
+			border-radius: 4px;
+			transition: border-color 0.3s ease;
+			cursor: pointer;
+		}
+
+		#timeoutInput:focus {
+			border-color: #007BFF;
+			outline: none;
+			box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+			background-color: #fff;
+		}
+
+		#button-start {
+			width: 80%;
+			padding: 10px 20px;
+			background-color: #007BFF;
+			color: white;
+			border: none;
+			border-radius: 2rem;
+			font-size: 8rem;
+			cursor: pointer;
+			transition: background-color 0.3s ease;
+			margin-top: 5px;
+		}
+
+		#button-start:hover {
+			background-color: #0056B3;
+		}
+
+		#button-start:focus {
+			outline: none;
+			box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
+		}
+	</style>
+	<script>
+		let timeoutSeconds = 60;
+		let image_position = '';
+		function updateImage() {
+			const img = document.querySelector('img');
+			const gridSize = 4;
+			const cellSize = 256; // 1024 / 4
+			const index = Math.floor(Math.random() * (gridSize * gridSize));
+			const row = Math.floor(index / gridSize);
+			const col = index % gridSize;
+			const x = -col * cellSize;
+			const y = -row * cellSize;
+			const new_image_position = `${x}px ${y}px`;
+			if (new_image_position === image_position) {
+				updateImage();
+				return;
+			}
+			image_position = new_image_position;
+			img.style.objectPosition = image_position;
+		}
+
+		function handleClick() {
+			updateImage();
+			const btn = document.getElementById("button-start");
+			const img = document.getElementById("pantomime-img");
+			const timeoutInput = document.getElementById('timeoutInput');
+			const timeoutInputLabel = document.getElementById('timeoutInput-label');
+
+			timeoutSeconds = parseInt(timeoutInput.value, 10);
+			if (isNaN(timeoutSeconds)) timeoutSeconds = 30;
+			if (timeoutSeconds > 300) timeoutSeconds = 300;
+			timeoutInput.value = timeoutSeconds;
+			img.classList.remove('hidden', 'bw');
+			btn.classList.add('hidden');
+			timeoutInput.classList.add('hidden');
+			timeoutInputLabel.classList.add('hidden');
+
+			setTimeout(() => {
+				img.classList.add('bw');
+				btn.classList.remove('hidden');
+				timeoutInput.classList.remove('hidden');
+				timeoutInputLabel.classList.remove('hidden');
+			}, 1000 * timeoutSeconds);
+		}
+
+	</script>
+</head>
+
+<body>
+	<label id="timeoutInput-label" for="timeoutInput">Timeout (seconds): </label>
+	<input type="number" step="10" id="timeoutInput" min="10" max="300" value="60">
+	<div class="image-container">
+		<img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" />
+	</div>
+	<button type="button" id="button-start" onclick="handleClick()">Start</button>
+</body>
+
+</html>