index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Altar</title>
</head>
<body style="background-color: rgb(45, 54, 63);">
    <p id="bloodGained" class="blood">Blood: 0</p>
    <div id="navigationMenu">
        <button onclick="tab('stabFingerMenu')" >Main Menu</button>
        <button onclick="tab('shopMenu')" >Shop Menu</button>
        <button onclick="tab('settingsMenu')" >Settings </button>
    </div>
    <div id="stabFingerMenu">
        <button onclick="stabFinger('manual')" class="main-btn">Poke finger</button>
    </div>
    <div id="shopMenu">
        <p id="bloodPerClickUI">Blood Per Click: 1</p>
        <p id="bloodPerAutoClickUI">Automatic Generation: 1</p>
        <div id="button-div">
            <button onclick="buyBloodPerClick('manual')" id="perClickUpgrade" >Upgrade Pin: 10</button>
            <button onclick="buyBloodPerClick('automatic')" id="perClickAutoUpgrade" >Upgrade Altar: 10</button>
        </div>
        <div id="researchBar">
        </div>    
    </div>
    <div id="settingsMenu">
        <button onclick="clearData()" class="button-dngr" id="clearData">Clear Data!</button>
        <button onclick="saveData()" id="saveData">Save Data</button>
        <label id="autoSaveLabel" for="autosave-time">Autosave Time: 5</label>
        <input oninput="updateSlider()" type="range" min="1" max="15" value="5" id="autosave-time">
    </div>

</body>
<script src="main.js" charset="utf-8" type="text/javascript"></script>
</html>