TambolaGame/index.html at master · RandomMaker/TambolaGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <!-- CSS only -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />

        <link rel="stylesheet" href="./style.css" />

        <link rel="icon" href="favicon.svg" sizes="any" type="images/svg+xml" />

        <title>Tambola Game</title>
    </head>
    <body>
        <div class="container">
            <h1 class="display-1 text-warning fw-bolder clearfix heading-main">
                Tambola Game
            </h1>

            <div class="mainBoard clearfix">
                <div class="gameNumbers clearfix" id="gameNumbers"></div>

                <div class="row">
                    <div class="col">
                        <button
                            tabindex="1"
                            id="game-start-button"
                            class="btn btn-primary btn-lg"
                            type="button"
                        >
                            Next Number
                        </button>
                    </div>
                    <div class="col">
                        <button
                            id="instructions-button"
                            class="btn btn-lg bg-dark"
                            type="button"
                            data-bs-toggle="modal"
                            data-bs-target="#exampleModal"
                            style="color: white"
                        >
                            Instructions
                        </button>
                    </div>
                    <div class="col">
                        <button
                            id="game-reset-button"
                            class="btn btn-danger btn-lg"
                        >
                            Reset Game
                        </button>
                    </div>

                    <div class="col">
                        <h4>
                            Current Number:
                            <span id="currentActiveNumber"></span>
                        </h4>
                        <h4>
                            Previous Number:
                            <span id="previousNumberValue"></span>
                        </h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Instructions Modal -->
        <div
            class="modal fade"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            Instructions
                        </h5>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                        ></button>
                    </div>

                    <div class="modal-body">
                        <ul class="list-group">
                            <li class="list-group-item">
                                Press Enter to get numbers (or click Next
                                Number)
                            </li>
                            <li class="list-group-item">
                                Press Shift + Enter to Reset Game (or click
                                Reset Game)
                            </li>
                        </ul>
                    </div>

                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-primary"
                            data-bs-dismiss="modal"
                        >
                            Ok
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script src="./main.js"></script>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
    </body>
</html>