<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Google</title>
  <link rel="icon" href="https://www.google.com/images/branding/product/ico/googleg_lodp.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background-color: #fff;
      color: #202124;
      transition: all 0.3s ease-out;
    }

    body.dark-mode {
      background-color: #202124;
      color: #fff;
    }

    form {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      max-width: 600px;
    }

    input[type="text"] {
      border: none;
      border-bottom: 1px solid #000;
      outline: none;
      padding: 0.5rem;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 500;
    }

    button {
      border: none;
      background-color: #007bff;
      color: #fff;
      cursor: pointer;
      padding: 0.7rem 1rem;
      border-radius: 0.3rem;
      font-size: 1.2rem;
      font-weight: 500;
      text-transform: uppercase;
      transition: all 0.3s ease-out;
      letter-spacing: 1px;
    }

    button:hover {
      background-color: #005cbf;
    }

    button:active {
      background-color: #004799;
    }

    .toggle {
      font-size: 1.2rem;
      text-align: center;
      color: #007bff;
      cursor: pointer;
      transition: all 0.3s ease-out;
      font-weight: 500;
    }

    .toggle:hover {
      color: #005cbf;
      text-decoration: underline;
    }

    .toggle:active {
      color: #004799;
    }

    .dark-mode-toggle {
      position: absolute;
      top: 1rem;
      right: 1rem;
      font-size: 1rem;
      text-align: center;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease-out;
      font-weight: 500;
    }

    .games-button {
      all: unset;
      font-size: 1rem;
      text-align: center;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease-out;
      font-weight: 700;
      height: 2rem;
      line-height: 2rem;
      padding: 0 0.5rem;
      border-radius: 0.2rem;
      background-color: #007bff;
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      width: 20%;
    }

    .games-button:hover {
      background-color: #005cbf;
    }

    .games-button:active {
      background-color: #004799;
    }

    .dono {
      all: unset;
      font-size: 1rem;
      text-align: center;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease-out;
      font-weight: 700;
      height: 2rem;
      line-height: 2rem;
      padding: 0 0.5rem;
      border-radius: 0.3rem;
      background-color: #28a745;
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      width: 25%;
    }

    .dono:hover {
      background-color: #1d7524;
    }

    .dono:active {
      background-color: #145019;
    }

    .links-button {
      all: unset;
      font-size: 1rem;
      text-align: center;
      color: #fff;
      cursor: pointer;
      transition: all 0.3s ease-out;
      font-weight: 700;
      height: 2rem;
      line-height: 2rem;
      padding: 0 0.5rem;
      border-radius: 0.3rem;
      background-color: #6c5ce7;
      position: absolute;
      bottom: 1rem;
      left: calc(36% + 1rem);
      width: 12rem;
    }

    .links-button:hover {
      background-color: #4d3dc2;
    }

    .links-button:active {
      background-color: #332c7f;
    }

    #self-destruct-button {
      display: none;
    }

    #foxes-games-button {
      display: none;
    }

    @media only screen and (max-width: 500px) {
      .games-button {
        width: auto;
        padding: 0 rem;
      }

      .dono {
        width: auto;
        padding: 0 1rem;;
      }

      .links-button {
        width: auto;
        padding: 0 1rem;
        font-size: 0.8rem;
      }
    }
  </style>
</head>

<body class="dark-mode">
  <button type="button" class="games-button">Moss Games</button>
  <button class="dono">Donate to Foxmoss</button>
  <button class="links-button" onclick="embedUrl('https://example.com')">Links not working?</button>
  <form>
    <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 1rem;">Embed a URL</h1>
    <label for="url-input" style="font-size: 1.2rem; font-weight: 500;">Enter a URL to embed:</label>
    <input type="text" id="url-input" placeholder="Enter a URL" autofocus />
  </form>
  <div style="display: flex; justify-content: flex-end; gap: 1rem;">
    <p class="dark-mode-toggle">Light</p>
  </div>

  <script>
    const urlInput = document.getElementById("url-input");
    const darkModeToggle = document.querySelector(".dark-mode-toggle");
    const gamesButton = document.querySelector(".games-button");
    const donoButton = document.querySelector(".dono");

    document.addEventListener("keypress", (event) => {
      if (event.keyCode == 13 || event.which == 13) {
        event.preventDefault();
        document.activeElement.blur();
        embedUrl();
      }
    });

    gamesButton.addEventListener("click", () => {
      embedUrl("https://mediaology.mediaology.com/main");
    });

    function embedUrl(url) {
      if (!url) {
        url = urlInput.value;
      }
      if (url === "") {
        url = "https://example.com";
      } else if (!url.match(/^https?:\/\//i)) {
        url = `https://${url}`;
      }
      const win = window.open("about:blank", "_blank");
      win.addEventListener("beforeunload", (event) => {
        event.preventDefault();
        event.returnValue = 'Are you sure you want to leave? You will lose any unsaved work.';
      });
      win.document.title = "New Tab";
      win.document.body.innerHTML = `<iframe style="border:none;width:100%;height:100%;margin:0;display:block" referrerpolicy="no-referrer" allow="fullscreen" src="${url}" ></iframe>`;
    }

    // toggle dark mode
    let isDarkMode = true;
    darkModeToggle.addEventListener("click", () => {
      isDarkMode = !isDarkMode;
      document.body.classList.toggle("dark-mode", isDarkMode);
      darkModeToggle.textContent = isDarkMode ? "Light" : "Dark";
      darkModeToggle.style.color = isDarkMode ? "#fff" : "#007bff";
    });

    donoButton.addEventListener("click", () => {
      embedUrl("https://www.paypal.com/donate/?hosted_button_id=DBWDWVZF7JFEC");
    });
  </script>

</body>

</html>
Make the links not working button above the moss games button