<!doctype html>
<html>
  <head>
    <title>Discord Webwook Deleter</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  </head>
  <body>
    <diologe>
      <div style="text-align:center ;display:block; position:absolute; width:50%; max-width:500px; background-color:white; border:solid; border-width:2px; border-radius:9px; height:500px; justify-content:center; align-items:center; top:50%; left:50%; transform:translate(-50%, -50%);">
        <h1> Discord Webhook Deleter </h1><input id="url" placeholder="URL" type="url"><button style="border:none; border-width:1px; border-radius:5px; color:white; border-color:black" onclick="idk()"> Delete Webhook </button>
        <p id="stat"></p>
      </div>
    </diologe>
  </body>
  <style>
    button {
      background-color: #f03e43
    }

    button:active {
      background-color: #dc2626
    }

    * {
      font-family: roboto
    }

    body {
      background: linear-gradient(135deg, #413f7a, #915b7a, #b5777e, #8c6792);
      margin: 1px;
    }
  </style>
  <script>
    async function idk() {
      document.querySelector('#stat').innerText = 'Deleting..'
      const url = document.querySelector('#url').value
      try {
        const res = await fetch(url, {
          method: 'DELETE',
          headers: {
            'Content-Type': 'application/json',
          }
        })
        if (res.ok) {
          document.querySelector('#stat').innerText = `Success returned ${res.status}`
        }
        if (!res.ok) {
          throw new Error(`Error: ${res.status}`)
        }
      } catch (er) {
        document.querySelector('#stat').innerText = `${er.message}`
      }
    }
  </script>
</html>