index.html

<!DOCTYPE html>
<head>
    <script src="https://kit.fontawesome.com/19a43ba50e.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <script src="index.js" defer></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="pekachu.ico">
    <title>Brokemon Beta 01.4.0</title>
</head>
<body>
    <button id="mute-btn" onclick="toggleMusic()" style="color: white;"><i class="fa-solid fa-volume-high fa-3x"></i></button>
    <h1>Brokemon</h1>
    <h2>Your HP: <span id="player-hp">100</span> <span id="playerBoost" class="boost">x1</span></h2>
    <h3>Defense: <span class="defense" id="player-defense">0</span></h3>
    <h2>Enemy HP: <span id="enemy-hp">160</span> <span id="enemyBoost" class="boost">x1.05</span></h2>
    <h3>Defense: <span class="defense" id="enemy-defense">0</span></h3>
    <div id="info">
        <span id="top-bar">| Select your moves.</span>
        <br>
        <span id="bottom-bar">| WARNING: Music will start playing once you select all 4</span>
    </div>
    <div id="actions">
        <button class="move" id="button-1" disabled="true"></button>
        <button class="move" id="button-2" disabled="true"></button>
        <button class="move" id="button-3" disabled="true"></button>
        <button class="move" id="button-4" disabled="true"></button>
    </div>
    <button class="debug" onclick="bonk.useMove('enemy')">bonk.useMove("enemy")</button>
    <br>
    <div id="moveSelector">
        <h2>Move Selector</h2>
        <div id="key">
            <p id="key-red">Red = Pure Damage</p>
            <p id="key-yellow">Yellow = Special Damage</p>
            <p id="key-blue">Blue = Status</p>
            <p id="key-green">Green = Healing</p>
        </div>
    </div>
    <h2>Difficulties</h2>
    <div id="difficulties">
        <a href="index.html?hp=120&boost=1">
            <button class="difficulty" id="d-easy">
                Easy
            </button>
        </a>
        <br>
        <a href="index.html?hp=160&boost=1.05">
            <button class="difficulty" id="d-normal">
                Normal
            </button>
        </a>
        <br>
        <a href="index.html?hp=190&boost=1.15">
            <button class="difficulty" id="d-hard">
                Hard
            </button>
        </a>
        <br>
        <a href="index.html?hp=10000&boost=100">
            <img id="wawa" src="https://i1.sndcdn.com/avatars-1utUXjzJDp44NImm-Qy1TUg-t500x500.jpg"></img>
        </a>
        <h3>Difficulty Builder</h3>
        <div id="difficulty-builder">
            <textarea id="enemy-boost-input" rows="1" cols="25" placeholder="Enemy damage boost "></textarea>
            <button id="difficulty-finish-button" onclick="setDifficulty()">Set Difficulty</button>
            <br>
            <textarea id="enemy-hp-input" rows="1" cols="25" placeholder="Enemy HP"></textarea>
        </div>
    </div>
    <h2>BROKEMON THEME SONG FOR DOWNLOAD </h2>
    <a href="./Brokemon.wav" download>Click to download</a>
    <!--use F7 for debug-->
</body>