games-API/index.html at main · RafliKamal/games-API · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free-to-Play Games</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <style>
    .modal-xxl {
    max-width: 90vw;
}
  </style>
<div class="container mt-5">
    <h1 class="text-center mb-5">Free-to-Play Games</h1>

    <div class="row mb-3">
        <div class="col-md-6">
            <input type="text" id="input-search" class="form-control" placeholder="Search games...">
        </div>
        <div class="col-md-4">
            <select id="genre-filter" class="form-control">
                <option value="">All Genres</option>
                <option value="MMORPG">MMORPG</option>
                <option value="Shooter">Shooter</option>
                <option value="MOBA">MOBA</option>
                <option value="Battle Royale">Battle Royale</option>
                <option value="Strategy">Strategy</option>
                <option value="Fantasy">Fantasy</option>
                <option value="Card Game">Card Game</option>
                <option value="Racing">Racing</option>
                <option value="Fighting">Fighting</option>
                <option value="Social">Social</option>
                <option value="Sports">Sports</option>
            </select>
        </div>
        <div class="col-md-2">
            <button id="button-search" class="btn btn-dark btn-block">Search</button>
        </div>
    </div>

    <!-- Game List -->
    <div id="game-list" class="row"></div>
</div>

<!-- Game Details Modal -->
<div class="modal fade" id="gameModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xxl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Game Details</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="game-details"></div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>

</body>
</html>