<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bingo Dashboard</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .bingo-slot {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            height: 40px;
            width: 40px;
            font-size: 1.2rem;
            margin: 3px;
            border-radius: 5px;
        }
        .bingo-row {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Responsive design: adjust grid for smaller screens */
        @media (max-width: 576px) {
            .bingo-slot {
                height: 30px;
                width: 30px;
                font-size: 1rem;
                margin: 2px;
            }
        }

        @media (max-width: 400px) {
            .bingo-slot {
                height: 25px;
                width: 25px;
                font-size: 0.9rem;
                margin: 1px;
            }
        }

        @media (max-width: 320px) {
            .bingo-slot {
                height: 20px;
                width: 20px;
                font-size: 0.8rem;
                margin: 1px;
            }
        }

        /* Prize Bar Styles */
        .prize-bar {
            background-color: #f8f9fa;
            padding: 15px 0;
            margin-top: 20px;
            border-top: 2px solid #ddd;
        }

        .prize-item {
            font-size: 1.2rem;
            text-align: center;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
        }

        .prize-item .label {
            font-weight: bold;
        }

        .prize-item .value {
            font-size: 1.5rem;
        }

        /* Responsive adjustments for the prize bar */
        @media (max-width: 576px) {
            .prize-item {
                font-size: 1rem;
                padding: 8px;
            }

            .prize-item .value {
                font-size: 1.2rem;
            }
        }

        /* Add cards section */
        .add-cards {
            margin-top: 20px;
            text-align: center;
        }

        .add-cards button {
            margin: 5px;
        }

        .input-card-count {
            font-size: 1.2rem;
            margin-top: 10px;
        }

        /* Static footer */
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #f8f9fa;
            padding: 15px 0;
            border-top: 2px solid #ddd;
        }

        .footer .profile-btn {
            margin-right: 10px;
        }

        .footer .balance {
            font-size: 1.2rem;
        }

        .footer .add-money-btn {
            margin-left: 10px;
        }
    </style>
</head>
<body>

<div class="container mt-4">
    <div class="bingo-dashboard">
        <!-- 9 rows of 10 slots -->
        <div class="bingo-row">
            <!-- Slots 1 to 10 -->
            <div class="bingo-slot">1</div>
            <div class="bingo-slot">2</div>
            <div class="bingo-slot">3</div>
            <div class="bingo-slot">4</div>
            <div class="bingo-slot">5</div>
            <div class="bingo-slot">6</div>
            <div class="bingo-slot">7</div>
            <div class="bingo-slot">8</div>
            <div class="bingo-slot">9</div>
            <div class="bingo-slot">10</div>
        </div>
        <div class="bingo-row">
            <!-- Slots 11 to 20 -->
            <div class="bingo-slot">11</div>
            <div class="bingo-slot">12</div>
            <div class="bingo-slot">13</div>
            <div class="bingo-slot">14</div>
            <div class="bingo-slot">15</div>
            <div class="bingo-slot">16</div>
            <div class="bingo-slot">17</div>
            <div class="bingo-slot">18</div>
            <div class="bingo-slot">19</div>
            <div class="bingo-slot">20</div>
        </div>
        <div class="bingo-row">
            <!-- Slots 21 to 30 -->
            <div class="bingo-slot">21</div>
            <div class="bingo-slot">22</div>
            <div class="bingo-slot">23</div>
            <div class="bingo-slot">24</div>
            <div class="bingo-slot">25</div>
            <div class="bingo-slot">26</div>
            <div class="bingo-slot">27</div>
            <div class="bingo-slot">28</div>
            <div class="bingo-slot">29</div>
            <div class="bingo-slot">30</div>
        </div>
        <div class="bingo-row">
            <!-- Slots 31 to 40 -->
            <div class="bingo-slot">31</div>
            <div class="bingo-slot">32</div>
            <div class="bingo-slot">33</div>
            <div class="bingo-slot">34</div>
            <div class="bingo-slot">35</div>
            <div class="bingo-slot">36</div>
            <div class="bingo-slot">37</div>
            <div class="bingo-slot">38</div>
            <div class="bingo-slot">39</div>
            <div class="bingo-slot">40</div>
        </div>
        <div class="bingo-row">
            <!-- Slots 41 to 50 -->
            <div class="bingo-slot">41</div>
            <div class="bingo-slot">42</div>
            <div class="bingo-slot">43</div>
            <div class="bingo-slot">44</div>
            <div class="bingo-slot">45</div>
            <div class="bingo-slot">46</div>
            <div class="bingo-slot">47</div>
            <div class="bingo-slot">48</div>
            <div class="bingo-slot">49</div>
            <div class="bingo-slot">50</div>
        </div>
        <div class="bingo-row">
            <!-- Slots 51 to 60 -->
            <div class="bingo-slot">51</div>
            <div class="bingo-slot">52</div>
            <div class="bingo-slot">53</div>
            <div class="bingo-slot">54</div>
            <div class="bingo-slot">55</div>
            <div class="bingo-slot">56</div>
            <div class="bingo-slot">57</div>
            <div class="bingo-slot">58</div>
            <div class="bingo-slot">59</div>
            <div class="bingo-slot">60</div>
        </div>
        <div class="bingo-row">
            <!-- Slots 61 to 70 -->
            <div class="bingo-slot">61</div>
            <div class="bingo-slot">62</div>
            <div class="bingo-slot">63</div>
            <div class="bingo-slot">64</div>
            <div class="bingo-slot">65</div>
            <div class="bingo-slot">66</div>
            <div class="bingo-slot">67</div>
            <div class="bingo-slot">68</div>
            <div class="bingo-slot">69</div>
            <div class="bingo-slot">70</div>
        </div>
        <div class="bingo-row">
            <!-- Slots 71 to 80 -->
            <div class="bingo-slot">71</div>
            <div class="bingo-slot">72</div>
            <div class="bingo-slot">73</div>
            <div class="bingo-slot">74</div>
            <div class="bingo-slot">75</div>
            <div class="bingo-slot">76</div>
            <div class="bingo-slot">77</div>
            <div class="bingo-slot">78</div>
            <div class="bingo-slot">79</div>
            <div class="bingo-slot">80</div>
        </div>
        <div class="bingo-row">
            <!-- Slots 81 to 90 -->
            <div class="bingo-slot">81</div>
            <div class="bingo-slot">82</div>
            <div class="bingo-slot">83</div>
            <div class="bingo-slot">84</div>
            <div class="bingo-slot">85</div>
            <div class="bingo-slot">86</div>
            <div class="bingo-slot">87</div>
            <div class="bingo-slot">88</div>
            <div class="bingo-slot">89</div>
            <div class="bingo-slot">90</div>
        </div>

        <!-- Prize Bar -->
        <div class="prize-bar">
            <div class="container">
                <div class="row text-center">
                    <div class="col-6 col-sm-3 prize-item">
                        <div class="label">Total Prize</div>
                        <div class="value">$10,000</div>
                    </div>
                    <div class="col-6 col-sm-3 prize-item">
                        <div class="label">Bingo Prize</div>
                        <div class="value">$5,000</div>
                    </div>
                    <div class="col-6 col-sm-3 prize-item">
                        <div class="label">Line Prize</div>
                        <div class="value">$1,000</div>
                    </div>
                    <div class="col-6 col-sm-3 prize-item">
                        <div class="label">Jackpot Prize</div>
                        <div class="value">$50,000</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Cards Section -->
        <div class="add-cards">
            <h4>Select the number of cards to buy</h4>
            <button class="btn btn-primary" onclick="addCards(1)">Add 1 Card</button>
            <button class="btn btn-primary" onclick="addCards(2)">Add 2 Cards</button>
            <button class="btn btn-primary" onclick="addCards(5)">Add 5 Cards</button>
            <button class="btn btn-primary" onclick="addCards(10)">Add 10 Cards</button>
            <button class="btn btn-primary" onclick="addCards(20)">Add 20 Cards</button>
            <div class="input-card-count">
                <label for="cardCount">Total Amount: </label>
                <input type="text" id="cardCount" class="form-control" value="0" readonly>
            </div>
            <button class="btn btn-success mt-3" onclick="buyCards()">Buy Cards</button>
        </div>
    </div>
</div>

<!-- Static Footer -->
<div class="footer">
    <div class="container d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <button class="btn btn-secondary profile-btn">Profile</button>
            <div class="username">User123</div>
        </div>
        <div class="balance">
            <span>Balance: $100</span>
            <button class="btn btn-info add-money-btn" onclick="addMoney()">Add Money</button>
        </div>
    </div>
</div>

<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

<script>
    const cardPrices = {
        1: 10,   // Price per card
        2: 20,
        5: 50,
        10: 100,
        20: 200
    };

    let totalAmount = 0;

    function addCards(count) {
        totalAmount = cardPrices[count];
        document.getElementById('cardCount').value = `$${totalAmount}`;
    }

    function buyCards() {
        alert(`You are buying ${totalAmount / 10} cards for a total of $${totalAmount}`);
        // Further functionality to process the purchase
    }

    function addMoney() {
        alert('Add money functionality triggered');
        // You can replace this with actual logic to add money
    }
</script>

</body>
</html>
