generate the buttons for the bots dynamically in js not in html. Split the HTML, CSS, and JavaScript into separate files(index.html, login.html, bot.html, functions.js, style.css). add a close button to each bot panel. here is the whole code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Online Casino Dice Bet Bot</title>
      <style>
         /* Tab styles */
         .tab {
            display: none;
         }
         .tab.active {
            display: block;
         }
         /* Button styles */
         .tab-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
         }
         .tab-btn.active {
            background-color: #333;
         }
      </style>
   </head>
   <body>
      <div id="tabs">
         <button class="tab-btn active" onclick="openTab(event, 'tab-1')">Bot 1</button>
         <button class="tab-btn" onclick="openTab(event, 'tab-2')">Bot 2</button>
         <button class="tab-btn" onclick="openTab(event, 'tab-3')">Bot 3</button>
         <button id="new-bot-btn" onclick="createBot()">New Bot</button>
         <div id="tab-1" class="tab active">
            <div id="login-panel">
               <label for="casino-dropdown">Casino:</label>
               <select id="casino-dropdown">
                  <option value="casino1">Casino 1</option>
                  <option value="casino2">Casino 2</option>
                  <option value="casino3">Casino 3</option>
               </select><br><br>
               <label for="login-input">Login:</label>
               <input type="text" id="login-input"><br><br>
               <label for="password-input">Password:</label>
               <input type="password" id="password-input"><br><br>
               <label for="api-key-input">API Key:</label>
               <input type="text" id="api-key-input"><br><br>
               <label for="2fa-input">2FA:</label>
               <input type="text" id="2fa-input"><br><br>
               <button id="login-btn">Login</button>
               <button id="logoff-btn" style="display:none">Logoff</button>
            </div>
            <div id="bot-panel" style="display:none">
               <div id="casino-info-panel">
                  <span id="casino-name"></span><br>
                  <span id="balance"></span><br>
                  <span id="last-streak"></span><br>
                  <span id="max-lose-streak"></span><br>
                  <span id="profit"></span><br>
               </div>
               <div id="chart"></div>
               <table id="last-bets-table">
                  <thead>
                     <tr>
                        <th>Time</th>
                        <th>Amount</th>
                        <th>Chance</th>
                        <th>Result</th>
                        <th>Profit/Loss</th>
                     </tr>
                  </thead>
                  <tbody>
                  </tbody>
               </table>
            </div>
            <div id="custom-strategy-panel" style="display:none">
                <textarea id="strategy-script"></textarea><br><br>
                <button id="start-btn">Start</button>
                <button id="stop-btn">Stop</button>
                <button id="pause-btn">Pause</button>
            </div>
            <div id="manual-betting-panel" style="display:none">
               <label for="bet-amount-input">Bet Amount:</label>
               <input type="text" id="bet-amount-input"><br><br>
               <label for="chance-input">Chance:</label>
               <input type="text" id="chance-input"><br><br>
               <label for="bet-high-btn">Bet High:</label>
               <input type="radio" name="bet-type" id="bet-high-btn" value="high"><br><br>
               <label for="bet-low-btn">Bet Low:</label>
               <input type="radio" name="bet-type" id="bet-low-btn" value="low"><br><br>
               <button id="manual-bet-btn">Place Bet</button>
            </div>
            <div id="status-bar"></div>
         </div>
         <div id="tab-2" class="tab">
            <!-- Bot 2 panel -->
         </div>
         <div id="tab-3" class="tab">
            <!-- Bot 3 panel -->
         </div>
      </div>
      <script>
         // Tab functionality
         function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tab");
            for (i = 0; i < tabcontent.length; i++) {
               tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tab-btn");
            for (i = 0; i < tablinks.length; i++) {
               tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
         }

         // New bot functionality
         var botCount = 3;
         function createBot() {
            botCount++;
            var newTabBtn = document.createElement("button");
            newTabBtn.className = "tab-btn";
            newTabBtn.innerHTML = "Bot " + botCount;
            newTabBtn.setAttribute("onclick", "openTab(event, 'tab-" + botCount + "')");
            document.getElementById("tabs").insertBefore(newTabBtn, document.getElementById("new-bot-btn"));
            var newTab = document.createElement("div");
            newTab.id = "tab-" + botCount;
            newTab.className = "tab";
            document.getElementById("tabs").appendChild(newTab);
         }

         // Login functionality
         document.getElementById("login-btn").addEventListener("click", function() {
            // Do login logic here
            document.getElementById("login-panel").style.display = "none";
            document.getElementById("bot-panel").style.display = "block";
            document.getElementById("logoff-btn").style.display = "inline-block";
            document.getElementById("casino-name").innerHTML = document.getElementById("casino-dropdown").value;
            // Set other casino info fields
         });
         document.getElementById("logoff-btn").addEventListener("click", function() {
            // Do logoff logic here
            document.getElementById("login-panel").style.display = "block";
            document.getElementById("bot-panel").style.display = "none";
            document.getElementById("logoff-btn").style.display = "none";
         });

         // Custom strategy functionality
         document.getElementById("start-btn").addEventListener("click", function() {
            // Start custom strategy logic here
         });
         document.getElementById("stop-btn").addEventListener("click", function() {
            // Stop custom strategy logic here
         });
         document.getElementById("pause-btn").addEventListener("click", function() {
                       // Pause custom strategy logic here
         });

// Manual betting functionality
document.getElementById("manual-bet-btn").addEventListener("click", function() {
   // Do manual betting logic here
});
</script>
</body>
</html>