Spaces:

PaulMartrenchar
/

Random

Sleeping

App Files Files Community

PaulMartrenchar commited on Jun 11, 2025

Commit

ce68975

1 Parent(s): 7502e91

Initial version

Browse files

Files changed (2) hide show

Dockerfile +11 -0
index.html +142 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,11 @@

+# Use an official Nginx image as the base
+FROM nginx:alpine
+# Copy the HTML file to the Nginx default directory
+COPY index.html /usr/share/nginx/html
+# Expose port 80 to allow external access
+EXPOSE 80
+# Start Nginx when the container launches
+CMD ["nginx", "-g", "daemon off;"]

index.html ADDED Viewed

	@@ -0,0 +1,142 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Randomizer</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: lightblue;
+        }
+        #canvas {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            background-color: lightblue;
+        }
+        h1, p {
+            color: white;
+            text-align: center;
+        }
+        .circle {
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            background-color: white;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="canvas">
+        <h1>Randomizer</h1>
+        <p>put your finger to decide</p>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const canvas = document.getElementById('canvas');
+            let circles = [];
+            let timer = null;
+            function resetTimer() {
+                if (timer) {
+                    clearTimeout(timer);
+                }
+                timer = setTimeout(decideWinner, 5000);
+            }
+            function decideWinner() {
+                if (circles.length === 0) return;
+                const winnerIndex = Math.floor(Math.random() * circles.length);
+                const winnerCircle = circles[winnerIndex];
+                // Remove all circles
+                circles.forEach(circle => {
+                    if (circle.element && circle.element.parentNode) {
+                        circle.element.parentNode.removeChild(circle.element);
+                    }
+                });
+                // Change the winner's circle to green
+                if (winnerCircle.element) {
+                    winnerCircle.element.style.backgroundColor = 'green';
+                    canvas.appendChild(winnerCircle.element);
+                }
+                circles = [winnerCircle];
+            }
+            function createCircle(x, y, id) {
+                const circle = document.createElement('div');
+                circle.className = 'circle';
+                circle.style.left = `${x}px`;
+                circle.style.top = `${y}px`;
+                circle.id = `circle-${id}`;
+                canvas.appendChild(circle);
+                return circle;
+            }
+            canvas.addEventListener('touchstart', (event) => {
+                event.preventDefault();
+                const touches = event.touches;
+                for (let i = 0; i < touches.length; i++) {
+                    const touch = touches[i];
+                    const circle = createCircle(touch.clientX, touch.clientY, touch.identifier);
+                    circles.push({ id: touch.identifier, element: circle, x: touch.clientX, y: touch.clientY });
+                }
+                resetTimer();
+            });
+            canvas.addEventListener('touchmove', (event) => {
+                event.preventDefault();
+                const touches = event.touches;
+                for (let i = 0; i < touches.length; i++) {
+                    const touch = touches[i];
+                    const circleIndex = circles.findIndex(c => c.id === touch.identifier);
+                    if (circleIndex !== -1) {
+                        circles[circleIndex].x = touch.clientX;
+                        circles[circleIndex].y = touch.clientY;
+                        circles[circleIndex].element.style.left = `${touch.clientX}px`;
+                        circles[circleIndex].element.style.top = `${touch.clientY}px`;
+                    }
+                }
+            });
+            canvas.addEventListener('touchend', (event) => {
+                event.preventDefault();
+                const touches = event.changedTouches;
+                for (let i = 0; i < touches.length; i++) {
+                    const touch = touches[i];
+                    const circleIndex = circles.findIndex(c => c.id === touch.identifier);
+                    if (circleIndex !== -1) {
+                        if (circles[circleIndex].element && circles[circleIndex].element.parentNode) {
+                            circles[circleIndex].element.parentNode.removeChild(circles[circleIndex].element);
+                        }
+                        circles.splice(circleIndex, 1);
+                    }
+                }
+                resetTimer();
+            });
+        });
+    </script>
+</body>
+</html>