להורדה | קובץ HTML להגרלות

מים אחרונים

זה הקוד!

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>הגרלת שמות</title>
    <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
    <style>
        body {
            font-family: 'Assistant', sans-serif;
            text-align: center;
            direction: rtl;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            overflow: hidden;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            max-width: 600px;
            width: 100%;
            position: relative;
        }
        #lotteryBox {
            width: 100%;
            height: 250px;
            border: 2px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
            font-size: 20px;
            font-weight: bold;
            color: #e63946;
            background: #fff;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease-in-out;
        }
        .card {
            position: absolute;
            padding: 10px 20px;
            background-color: #ff6f61;
            color: white;
            font-size: 16px;
            border-radius: 10px;
            animation: fly 3s ease-in-out infinite, spin 3s linear infinite;
            transition: transform 0.3s ease-in-out;
        }
        .card:nth-child(even) {
            background-color: #00b4d8;
        }
        .card:nth-child(odd) {
            background-color: #90be6d;
        }
        @keyframes fly {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-200px) rotate(180deg);
            }
            100% {
                transform: translateY(0) rotate(360deg);
            }
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .winner-card {
            font-size: 24px;
            background-color: #ff6f61;
            color: white;
            padding: 15px 30px;
            border-radius: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(1);
            opacity: 0;
            transition: transform 0.5s ease-in-out, opacity 1s ease;
        }
        .winner-card.enlarged {
            transform: translate(-50%, -50%) scale(2);
            opacity: 1;
        }
        .spinner {
            position: absolute;
            width: 50px;
            height: 50px;
            border: 5px solid #1d3557;
            border-top: 5px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            top: 20px;
            left: 20px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        button {
            background-color: #1d3557;
            color: white;
            border: none;
            padding: 12px 20px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 10px;
            transition: background 0.3s;
            margin: 10px;
        }
        button:hover {
            background-color: #457b9d;
        }
        .footer-buttons {
            position: fixed;
            bottom: 20px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
        }
        .footer-buttons a {
            text-decoration: none;
            color: white;
            background-color: #1d3557;
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 12px;
            transition: background-color 0.3s;
        }
        .footer-buttons a:hover {
            background-color: #457b9d;
        }
        textarea, input[type="file"] {
            width: 90%;
            margin-top: 10px;
            padding: 10px;
            border-radius: 10px;
            border: 1px solid #ccc;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .countdown {
            font-size: 30px;
            font-weight: bold;
            color: #e63946;
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>🎉 הגרלת שמות 🎉</h2>
        <input type="file" id="fileInput">
        <textarea id="names" placeholder="הכנס שמות, אחד בכל שורה"></textarea>
        <button onclick="startLottery()">💥 הגרל זוכה! 💥</button>
        <div id="lotteryBox">
            <div class="spinner" id="spinner"></div>
        </div>
        <button onclick="startLottery()">🔄 זוכה נוסף</button>
    </div>

    <div class="footer-buttons">
        <a href="https://mitmachim.top/user/%D7%9E%D7%99%D7%9D-%D7%90%D7%97%D7%A8%D7%95%D7%A0%D7%99%D7%9D" target="_blank">פרופיל שלי</a>
        <a href="https://buymeacoffee.com/laswater" target="_blank">תרום לי</a>
    </div>

    <script>
        let countdownInterval;

        function startLottery() {
            let names = document.getElementById("names").value.trim().split("\n");
            names = names.filter(name => name.trim() !== "");
            if (names.length === 0) {
                document.getElementById("lotteryBox").textContent = "אין שמות להגרלה";
                return;
            }
            
            // Reset lottery box
            let box = document.getElementById("lotteryBox");
            box.innerHTML = ""; // Clear previous names
            let spinner = document.createElement("div");
            spinner.classList.add("spinner");
            box.appendChild(spinner);

            // Add countdown timer
            let countdown = document.createElement("div");
            countdown.classList.add("countdown");
            countdown.textContent = "5";
            document.body.appendChild(countdown);

            let countdownTime = 5;
            countdownInterval = setInterval(() => {
                countdownTime--;
                countdown.textContent = countdownTime;
                if (countdownTime === 0) {
                    clearInterval(countdownInterval);
                    startCards(names, box, countdown);
                }
            }, 1000);
        }

        function startCards(names, box, countdown) {
            // Clear countdown and prepare the box for cards
            countdown.remove();

            // Create cards for all names
            names.forEach(name => {
                let card = document.createElement("div");
                card.classList.add("card");
                card.textContent = name;
                card.style.left = `${Math.random() * 100}%`;
                card.style.top = `${Math.random() * 100}%`;
                box.appendChild(card);
                setTimeout(() => {
                    card.style.transform = `rotate(${Math.random() * 360}deg)`;
                }, 100);
            });

            // After 3 seconds, show the winner and remove cards
            setTimeout(() => {
                let winner = names[Math.floor(Math.random() * names.length)];
                let winnerCard = document.createElement("div");
                winnerCard.textContent = "🎊 " + winner + " 🎊";
                winnerCard.classList.add("winner-card");
                box.appendChild(winnerCard);

                // After 5 seconds, enlarge and fix winner
                setTimeout(() => {
                    winnerCard.classList.add("enlarged");
                    // Trigger confetti
                    confetti({
                        particleCount: 500,
                        spread: 100,
                        origin: { y: 0.5 }
                    });
                }, 5000);
            }, 3000);
        }

        document.getElementById("fileInput").addEventListener("change", function(event) {
            let file = event.target.files[0];
            if (!file) return;
            let reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById("names").value = e.target.result;
            };
            reader.readAsText(file);
        });
    </script>
</body>
</html>