<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>JS Bot Hosting - Dashboard</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>

    body {

      font-family: 'Google Sans', sans-serif;

      background-color: #f8f9fa;

    }

    .card {

      margin-top: 20px;

    }

  </style>

  <link href="https://fonts.googleapis.com/css2?family=Google+Sans&display=swap" rel="stylesheet">

</head>

<body>

  <div class="container py-4">

    <h2 class="text-center mb-4">JS Telegram Bot Hosting</h2>


    <div class="mb-3">

      <input id="scriptName" type="text" class="form-control" placeholder="Enter Bot Script Name">

    </div>

    <button class="btn btn-success w-100" onclick="createBot()">Create Bot</button>


    <div id="botCards" class="row mt-4"></div>

  </div>


  <script>

    let botStorage = JSON.parse(localStorage.getItem('bots') || '[]');


    function renderBots() {

      const container = document.getElementById('botCards');

      container.innerHTML = '';

      botStorage.forEach((bot, index) => {

        container.innerHTML += `

          <div class="col-md-4">

            <div class="card">

              <div class="card-body">

                <h5 class="card-title">${bot.name}</h5>

                <p class="card-text"><code>${bot.script}</code></p>

                <button class="btn btn-primary" onclick="startBot(${index})">Start</button>

                <button class="btn btn-warning" onclick="editBot(${index})">Edit</button>

                <button class="btn btn-danger" onclick="deleteBot(${index})">Delete</button>

              </div>

            </div>

          </div>

        `;

      });

    }


    function createBot() {

      const name = document.getElementById('scriptName').value;

      const script = `fetch('https://api.telegram.org/bot<your_token>/sendMessage?chat_id=<chat_id>&text=Hi')`;

      if (name) {

        botStorage.push({ name, script });

        localStorage.setItem('bots', JSON.stringify(botStorage));

        renderBots();

        document.getElementById('scriptName').value = '';

      }

    }


    function startBot(index) {

      alert('Bot started: ' + botStorage[index].name);

      eval(botStorage[index].script.replace('<your_token>', 'YOUR_REAL_BOT_TOKEN').replace('<chat_id>', 'YOUR_CHAT_ID'));

    }


    function editBot(index) {

      const newScript = prompt("Edit your script:", botStorage[index].script);

      if (newScript !== null) {

        botStorage[index].script = newScript;

        localStorage.setItem('bots', JSON.stringify(botStorage));

        renderBots();

      }

    }


    function deleteBot(index) {

      if (confirm("Are you sure to delete this bot?")) {

        botStorage.splice(index, 1);

        localStorage.setItem('bots', JSON.stringify(botStorage));

        renderBots();

      }

    }


    renderBots();

  </script>

</body>

</html>


Comments