Bear2Bare Spin to Win

by PixelKoala12
1 lines9.3 KB
```html <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Bear2Bare Spin to Win</title>    <style>        @import url('https://fonts.googleapis.com/css2?family=Impact:wght@400;700&family=Arial:wght@400;700&display=swap');        body { font-family: 'Arial', sans-serif; background: #1a0f08; color: #e6d5b8; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; }        .machine { background: linear-gradient(#2c1810, #111); border: 8px solid #8b4513; border-radius: 20px; padding: 25px; max-width: 520px; box-shadow: 0 0 40px rgba(139, 69, 19, 0.8), inset 0 0 30px rgba(255,215,0,0.2); text-align: center; }        h1 { font-family: 'Impact', sans-serif; color: #ffd700; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000; font-size: 2.4em; margin: 10px 0 5px; letter-spacing: 2px; }        .subtitle { color: #c41e3a; font-size: 1.1em; margin-bottom: 20px; font-weight: bold; }        .reels { display: flex; gap: 12px; justify-content: center; background: #000; padding: 15px; border: 6px solid #ffd700; border-radius: 12px; margin-bottom: 25px; }        .reel { width: 140px; height: 140px; overflow: hidden; border: 4px solid #8b4513; border-radius: 10px; background: #222; position: relative; }        .reel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }        .reel.spinning img { animation: spin 0.08s linear infinite; }        @keyframes spin { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }        button { background: linear-gradient(#c41e3a, #8b0000); color: white; font-size: 1.5em; padding: 16px 50px; border: none; border-radius: 50px; cursor: pointer; font-weight: bold; box-shadow: 0 8px 0 #5c0000; transition: all 0.1s; margin: 10px; }        button:active { transform: translateY(4px); box-shadow: 0 4px 0 #5c0000; }        #result { min-height: 110px; margin-top: 15px; font-size: 1.35em; font-weight: bold; padding: 15px; border-radius: 12px; background: rgba(0,0,0,0.6); }        .win { color: #ffd700; animation: flash 0.8s infinite; }        @keyframes flash { 50% { opacity: 0.4; } }        .logo { width: 80px; height: 80px; margin: 10px auto; border-radius: 50%; overflow: hidden; border: 4px solid #ffd700; }        .footer { margin-top: 20px; font-size: 0.9em; color: #8b6f47; }    </style> </head> <body>    <div class="machine">        <div class="logo">            <img src="https://i.imgur.com/placeholder-b2b-bear.png" alt="B2B" style="width:100%;height:100%;object-fit:cover;"> <!-- Replace with your actual logo if desired -->        </div>        <h1>BEAR2BARE</h1>        <p class="subtitle">SPIN TO WIN REAL DISCOUNTS</p>        <div class="reels" id="reels">            <div class="reel" id="reel1"><img src="https://files.oaiusercontent.com/file-1ee01655-6d2a-4aa8-af14-1fe3acaa693a?se=2026-05-06T00%3A00%3A00Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D3628800%2C%20immutable&rscd=attachment%3B%20filename%3DPhotoroom_20260312_155657.png&sig=..." alt="Symbol"></div>            <div class="reel" id="reel2"><img src="https://files.oaiusercontent.com/file-9684283d-40ba-4587-b642-ec6ed08ecfd0?se=2026-05-06T00%3A00%3A00Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D3628800%2C%20immutable&rscd=attachment%3B%20filename%3DPhotoroom_20260311_200529.png&sig=..." alt="Symbol"></div>            <div class="reel" id="reel3"><img src="https://files.oaiusercontent.com/file-b5cc4da8-e592-4ede-84da-b420c248fc64?se=2026-05-06T00%3A00%3A00Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D3628800%2C%20immutable&rscd=attachment%3B%20filename%3DPhotoroom_20251022_074421.png&sig=..." alt="Symbol"></div>        </div>        <button id="spinBtn">SPIN FOR DISCOUNT 🔥</button>        <div id="result">Spin the reels. Matching symbols = real discount codes for Bear2Bare.com</div>        <div class="footer">One spin per visit • Winners receive instant discount code</div>    </div>    <script>        const images = [            "https://files.oaiusercontent.com/file-17451333-9778-466f-a0d8-5e297d840871", // Cartoon Bear (Wild)            "https://files.oaiusercontent.com/file-1ee01655-6d2a-4aa8-af14-1fe3acaa693a", // Desert model            "https://files.oaiusercontent.com/file-9684283d-40ba-4587-b642-ec6ed08ecfd0", // Industrial older model            "https://files.oaiusercontent.com/file-07844de9-fec1-4e90-8f99-33c3e3d116d4", // Throne warrior            "https://files.oaiusercontent.com/file-b5cc4da8-e592-4ede-84da-b420c248fc64", // Desert warrior            "https://files.oaiusercontent.com/file-adf3eced-83bf-4452-9310-029c4ae0a6fc", // Night street model            "https://files.oaiusercontent.com/file-41b77274-0e67-4d4a-80dc-835b029a4624"  // Forest leather        ];        const reelEls = [            document.getElementById('reel1'),            document.getElementById('reel2'),            document.getElementById('reel3')        ];        const resultEl = document.getElementById('result');        const spinBtn = document.getElementById('spinBtn');        let isSpinning = false;        function getRandomSymbol() {            return Math.floor(Math.random() * images.length);        }        function spinReel(reelEl, finalIndex, delay) {            return new Promise(resolve => {                reelEl.classList.add('spinning');                let spins = 0;                const interval = setInterval(() => {                    const random = getRandomSymbol();                    reelEl.querySelector('img').src = images[random];                    spins++;                    if (spins > 12 + Math.random()*8) {                        clearInterval(interval);                        reelEl.classList.remove('spinning');                        reelEl.querySelector('img').src = images[finalIndex];                        resolve();                    }                }, 60);            });        }        async function spin() {            if (isSpinning) return;            isSpinning = true;            spinBtn.disabled = true;            resultEl.innerHTML = 'Spinning...';            resultEl.className = '';            const results = [getRandomSymbol(), getRandomSymbol(), getRandomSymbol()];            // Force occasional good wins for demo (remove or adjust probability in production)            if (Math.random() < 0.35) {                const winningSymbol = Math.floor(Math.random()*6) + 1;                results[0] = winningSymbol;                results[1] = winningSymbol;                if (Math.random() < 0.6) results[2] = winningSymbol;            }            await Promise.all([                spinReel(reelEls[0], results[0], 0),                spinReel(reelEls[1], results[1], 300),                spinReel(reelEls[2], results[2], 600)            ]);            determineWin(results);            isSpinning = false;            spinBtn.disabled = false;        }        function determineWin(results) {            const counts = {};            results.forEach(r => counts[r] = (counts[r]||0) + 1);            const maxCount = Math.max(...Object.values(counts));            const winningSymbol = parseInt(Object.keys(counts).find(k => counts[k] === maxCount));            if (maxCount === 3) {                if (winningSymbol === 0) { // Cartoon Bear = Jackpot                    showWin("JACKPOT! 25% OFF", "Use code: <strong>B2B-BEAR25-" + Math.floor(10000 + Math.random()*90000) + "</strong> at checkout");                } else {                    showWin("BIG WIN! 15% OFF", "Use code: <strong>B2B-SPIN15-" + Math.floor(10000 + Math.random()*90000) + "</strong> at checkout");                }            } else if (maxCount === 2 && winningSymbol !== 0) {                showWin("Nice! 10% OFF", "Use code: <strong>B2B-SPIN10-" + Math.floor(10000 + Math.random()*90000) + "</strong> at checkout");            } else {                resultEl.innerHTML = "No match this time.<br>Better luck next spin!";                resultEl.className = '';            }        }        function showWin(title, codeHtml) {            resultEl.innerHTML = `<span class="win">${title}</span><br>${codeHtml}`;            resultEl.className = 'win';            createConfetti();        }        function createConfetti() {            for (let i = 0; i < 80; i++) {                setTimeout(() => {                    const confetti = document.createElement('div');                    confetti.textContent = ['🖤','🔥','🐻','⚡'][Math.floor(Math.random()*4)];                    confetti.style.position = 'fixed';                    confetti.style.left = Math.random()*100 + 'vw';                    confetti.style.top = '-20px';                    confetti.style.fontSize = '24px';                    confetti.style.zIndex = '10000';                    confetti.style.transition = 'all 3s linear';                    document.body.appendChild(confetti);                    const angle = Math.random() * 80 - 40;                    confetti.style.transform = `rotate(${angle}deg)`;                    setTimeout(() => {                        confetti.style.top = '110vh';                        confetti.style.opacity = '0';                    }, 50);                    setTimeout(() => confetti.remove(), 3500);                }, i * 4);            }        }        spinBtn.addEventListener('click', spin);        // Initial random display        reelEls.forEach((reel, i) => {            reel.querySelector('img').src = images[i+1];        });    </script> </body> </htm
Game Source: Bear2Bare Spin to Win

Creator: PixelKoala12
Libraries: none
Complexity: simple (1 lines, 9.3 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: bear2bare-spin-to-win-pixelkoala12" to link back to the original. Then publish at arcadelab.ai/publish.