<div class="settingscontiner">
  <div class="card">
    <h1>Themes</h1>
    <p>Changes the theme of the website</p>
    <button class="button" onclick="setTheme('default')">Default Theme</button>
    <button class="button" onclick="setTheme('oled')">Oled Theme</button>
    <button class="button" onclick="setTheme('red')">Red Theme</button>
    <button class="button" onclick="setTheme('blue')">Blue Red Theme</button>
  </div>
  <div class="card">
    <h1>About:blank</h1>
    <p>Cloaks your tab with about blank</p>
    <button class="button" onclick="createBlank()">Activate</button>
  </div>
  <!-- <div class="card">
    <h1>Tab Cloak</h1>
    <p>Changes tab title and icon</p>
    <div>
      <select id="presetDropdown" onchange="applyPreset()">
        <option value="default">Default</option>
        <option value="preset1">GoogleDrive</option>
        <option value="preset2">Gmail</option>
        <option value="preset3">Google Search</option>
        <option value="preset4">Zoom</option>
        <option value="preset5">Meet</option>
      </select>
    </div>
  </div> -->
  <div class="card">
    <h1>Search Engine</h1>
    <p>Changes the search engine</p>
    <select id="searchenddrop" onchange="setSe()">
      <option value="google">Google</option>
      <option value="bing">Bing</option>
      <option value="brave">Brave</option>
      <option value="ddg">DuckDuckGo</option>
      <option value="youtube">Youtube</option>
    </select>
  </div>
  <div class="card">
    <h1>Particles</h1>
    <p>Toggles Particles on the site</p>
    <button class="button" onclick="toggleParticles()">Toggle</button>
  </div>
  <div class="card">
    <h1>Reset Settings</h1>
    <p>Resets all settings to default</p>
    <button class="button" onclick="resetSettings()">Reset Settings</button>
  </div>
  <!-- 
  <script>
    function setTheme(theme) {
      document.body.setAttribute("theme", theme);

      localStorage.setItem("theme", theme);
    }

    window.onload = function () {
      let savedTheme = localStorage.getItem("theme");
      if (!savedTheme) {
        savedTheme = "default";
        localStorage.setItem("theme", savedTheme);
      }

      setTheme(savedTheme);
    };
  </script> -->

  <script>
    function resetSettings() {
      localStorage.clear();

      sessionStorage.clear();

      alert("All settings have been reset.");
      window.location.reload();
    }

    function loadSe() {
      const se = localStorage.getItem("search-eng");
      const dropdown = document.getElementById("searchenddrop");
      dropdown.value = se;
    }
    loadSe();
    async function setSe() {
      const newSe = document.getElementById("searchenddrop").value;
      console.log(
        `%c[ %cStarlight%c ] %cSet search engine to ${newSe}`,
        "font-weight: bold; color: white; font-size: 20px;",
        "font-weight: bold; color: black; font-size: 20px;",
        "font-weight: normal; font-size: 20px;",
        "font-weight: normal; font-size: 20px;"
      );
      localStorage.setItem("search-eng", newSe);
    }
    function toggleParticles() {
      const particles = localStorage.getItem("particles");
      if (particles === "true") {
        localStorage.setItem("particles", "false");

        location.reload();
      } else {
        localStorage.setItem("particles", "true");

        location.reload();
      }
    }
  </script>
</div>
<div class="footer">
  <a style="font-weight: 700">a site by </a
  ><a style="font-weight: 700" class="link" href="https://dsc.gg/parcoil"
    >parcoil network</a
  >
</div>
