Spaces:

nkjoy
/

loto

Running

App Files Files Community

nkjoy commited on Jul 23, 2025

Commit

1f95194

verified ·

1 Parent(s): 62494bb

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +327 -19

index.html CHANGED Viewed

@@ -1,19 +1,327 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Loto Boll</title>
+    <style>
+        :root {
+            --primary: #4a6bff;
+            --secondary: #ff6b6b;
+            --dark: #2c3e50;
+            --light: #f8f9fa;
+            --success: #28a745;
+            --warning: #ffc107;
+            --info: #17a2b8;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: #f5f7ff;
+            color: var(--dark);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        header {
+            background: linear-gradient(135deg, var(--primary), #6c5ce7);
+            color: white;
+            padding: 1.5rem;
+            text-align: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+            font-weight: 700;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+            flex: 1;
+        }
+        .game-container {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+        .balls-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            justify-content: center;
+            margin: 2rem 0;
+        }
+        .ball {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary), #6c5ce7);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            font-weight: bold;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .ball:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+        }
+        .ball.selected {
+            background: linear-gradient(135deg, var(--secondary), #ff8e8e);
+            transform: scale(1.1);
+        }
+        .controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+        }
+        button {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .btn-primary {
+            background-color: var(--primary);
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #3a5bef;
+            transform: translateY(-2px);
+        }
+        .btn-secondary {
+            background-color: var(--secondary);
+            color: white;
+        }
+        .btn-secondary:hover {
+            background-color: #e05a5a;
+            transform: translateY(-2px);
+        }
+        .results {
+            margin-top: 2rem;
+            padding: 1.5rem;
+            background-color: var(--light);
+            border-radius: 8px;
+            display: none;
+        }
+        .results.show {
+            display: block;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        footer {
+            background-color: var(--dark);
+            color: white;
+            text-align: center;
+            padding: 1.5rem;
+            margin-top: auto;
+        }
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2rem;
+            }
+            .ball {
+                width: 50px;
+                height: 50px;
+                font-size: 1.2rem;
+            }
+            .controls {
+                flex-direction: column;
+                align-items: center;
+            }
+            button {
+                width: 100%;
+                max-width: 300px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Loto Boll</h1>
+        <p>Select your lucky numbers and try your chance!</p>
+    </header>
+    <div class="container">
+        <div class="game-container">
+            <h2>Select 6 Numbers</h2>
+            <div class="balls-container" id="ballsContainer">
+                <!-- Balls will be generated by JavaScript -->
+            </div>
+            <div class="controls">
+                <button class="btn-primary" id="generateBtn">Generate Random</button>
+                <button class="btn-secondary" id="checkBtn">Check Results</button>
+                <button class="btn-primary" id="resetBtn">Reset</button>
+            </div>
+            <div class="results" id="results">
+                <h3>Your Results</h3>
+                <div id="resultNumbers"></div>
+                <p id="resultMessage"></p>
+            </div>
+        </div>
+    </div>
+    <footer>
+        <p>&copy; 2023 Loto Boll Game. All rights reserved.</p>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const ballsContainer = document.getElementById('ballsContainer');
+            const generateBtn = document.getElementById('generateBtn');
+            const checkBtn = document.getElementById('checkBtn');
+            const resetBtn = document.getElementById('resetBtn');
+            const results = document.getElementById('results');
+            const resultNumbers = document.getElementById('resultNumbers');
+            const resultMessage = document.getElementById('resultMessage');
+            let selectedBalls = [];
+            const totalBalls = 49;
+            const ballsToSelect = 6;
+            // Create balls
+            for (let i = 1; i <= totalBalls; i++) {
+                const ball = document.createElement('div');
+                ball.className = 'ball';
+                ball.textContent = i;
+                ball.dataset.number = i;
+                ball.addEventListener('click', toggleBall);
+                ballsContainer.appendChild(ball);
+            }
+            // Toggle ball selection
+            function toggleBall(e) {
+                const ball = e.target;
+                const number = parseInt(ball.dataset.number);
+                if (ball.classList.contains('selected')) {
+                    ball.classList.remove('selected');
+                    selectedBalls = selectedBalls.filter(n => n !== number);
+                } else {
+                    if (selectedBalls.length < ballsToSelect) {
+                        ball.classList.add('selected');
+                        selectedBalls.push(number);
+                    } else {
+                        alert(`You can only select ${ballsToSelect} numbers!`);
+                    }
+                }
+            }
+            // Generate random numbers
+            generateBtn.addEventListener('click', function() {
+                // Clear previous selection
+                selectedBalls = [];
+                document.querySelectorAll('.ball.selected').forEach(ball => {
+                    ball.classList.remove('selected');
+                });
+                // Generate unique random numbers
+                while (selectedBalls.length < ballsToSelect) {
+                    const randomNum = Math.floor(Math.random() * totalBalls) + 1;
+                    if (!selectedBalls.includes(randomNum)) {
+                        selectedBalls.push(randomNum);
+                        document.querySelector(`.ball[data-number="${randomNum}"]`).classList.add('selected');
+                    }
+                }
+            });
+            // Check results
+            checkBtn.addEventListener('click', function() {
+                if (selectedBalls.length !== ballsToSelect) {
+                    alert(`Please select exactly ${ballsToSelect} numbers!`);
+                    return;
+                }
+                // Generate winning numbers
+                const winningNumbers = [];
+                while (winningNumbers.length < ballsToSelect) {
+                    const randomNum = Math.floor(Math.random() * totalBalls) + 1;
+                    if (!winningNumbers.includes(randomNum)) {
+                        winningNumbers.push(randomNum);
+                    }
+                }
+                // Check matches
+                const matchedNumbers = selectedBalls.filter(num => winningNumbers.includes(num));
+                const matchCount = matchedNumbers.length;
+                // Display results
+                resultNumbers.innerHTML = `
+                    <p>Your numbers: ${selectedBalls.sort((a, b) => a - b).join(', ')}</p>
+                    <p>Winning numbers: ${winningNumbers.sort((a, b) => a - b).join(', ')}</p>
+                    <p>Matches: ${matchCount} (${matchedNumbers.sort((a, b) => a - b).join(', ') || 'None'})</p>
+                `;
+                // Result message
+                let message = '';
+                if (matchCount === ballsToSelect) {
+                    message = '🎉 Jackpot! You matched all numbers! 🎉';
+                } else if (matchCount >= ballsToSelect - 2) {
+                    message = 'Great job! You matched most numbers!';
+                } else if (matchCount > 0) {
+                    message = 'Not bad! You got some matches.';
+                } else {
+                    message = 'Better luck next time!';
+                }
+                resultMessage.textContent = message;
+                results.classList.add('show');
+            });
+            // Reset game
+            resetBtn.addEventListener('click', function() {
+                selectedBalls = [];
+                document.querySelectorAll('.ball.selected').forEach(ball => {
+                    ball.classList.remove('selected');
+                });
+                results.classList.remove('show');
+            });
+        });
+    </script>
+</body>
+</html>