Project-Rock-Paper-Scissors/index.html at main · hellogaray/Project-Rock-Paper-Scissors · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <!-- Script -->
    <script src="./script.js" defer></script>

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon.png">
    <link rel="manifest" href="/favicon_io/site.webmanifest">

    <title>PokeBattle</title>
</head>

<body>
    <!-- Header -->
    <div class="header">
        <img class="logo" src="./images/logo.png">
    </div>
    <!-- Content -->
    <div class="content">
        <!-- Battle Screen -->
        <div class="balttescreen">
            <!-- Play Button -->
            <div id="playContainer">
                <img class="playbtn" src="./images/play_btn.png">
                <span>music</span>
            </div>
            <!-- NPC Side -->
            <div id="NPCchoices">
                <!-- NPC Side -->
                <div class="NPCPokeballs">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <span id="NPCScore"></span>
                </div>
                <div id="NPCPokemon">
                    <!-- NPC Pokemon choices -->
                </div>
            </div>
            <!-- Player Choices -->
            <div id="choices">
                <!-- Player Pokeballs -->
                <div class="playerPokeballs">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <img src="./images/pokeball.png">
                    <span id="playerScore"></span>
                </div>

                <!-- Player Pokemon choices -->
                <div class="playerPokemon">
                    <div class="imagePKMN">
                        <input type="image" src="./images/bulbasaur_back.png" id="grass"/>
                    </div>
                    <div class="imagePKMN">
                        <input type="image" src="./images/charmander_back.png" id="fire" />
                    </div>
                    <div class="imagePKMN">
                        <input type="image" src="./images/squirtle_back.png" id="water"  />
                    </div>
                </div>

                <!-- Battle Logs Container -->
                <div id="battleLogsContainer">
                    <!-- Battle logs will be displayed here -->
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <h5>
            <!-- The Odin Project link -->
            <a href="https://www.theodinproject.com" title="The Odin Project Link">
                <img src="./images/odin-icon.svg">
            </a>
            <br>THE ODIN PROJECT
            <!-- Github link -->
            <br><a href="https://github.com/hellogaray" title="Github Link">[at]hellogaray</a>
        </h5>
    </footer>
</body>
</html>