STForScratch · rgantzos · Jul 15, 2023 · Jul 15, 2023 · Jul 15, 2023 · Jul 15, 2023
diff --git a/extras/popup/popup.js b/extras/popup/popup.js
@@ -272,12 +272,18 @@ function toggletheme() {
   } else {
     theme.href = "/extras/styles/light.css"; // default theme
     console.error(
-      console.log("ScratchTools:"),
+      "ScratchTools:",
       " Theme not found. Defaulting to light theme."
     );
   }
 }
 
+function setTheme(themetext) {
+  var theme = document.getElementById("themecss");
+  theme.href = `/extras/styles/${themetext}.css`;
+  chrome.storage.sync.set({ theme: themetext });
+}
+
 document.querySelector(".support-btn")?.addEventListener("click", function() {
   chrome.tabs.create({
     url: "/extras/support/index.html"

diff --git a/extras/styles/purple.css b/extras/styles/purple.css
@@ -0,0 +1,19 @@
+:root {
+    --theme: #6a00ff;
+    --background: #13002e;
+    --primary-color: rgb(255, 255, 255);
+    --secondary-color: #ffffff77;
+    --searchbar-bg: #00000080;
+    --searchbar-gears: url("/extras/icons/gear-light.svg");
+    --searchbar-search: url("/extras/icons/search-light.svg");
+    --mini-logo: url("/extras/icons/mini-logo.svg");
+    --box: #00000080;
+    --feature-bg: #00000080;
+    --feature-input-bg: #44444475;
+    --feature-slider-bg: #44444475;
+    --scrollbar-handle: #00000080;
+    --scrollbar-handle-active: #38383880;
+    --theme-icon: url("/extras/icons/light.svg");
+    --navbar-gradient: linear-gradient(0.25turn, #6a00ff, #9447ff);
+    --campsite: url("/extras/icons/campsitedark.svg");
+}
diff --git a/onboarding/index.html b/onboarding/index.html
@@ -1,14 +1,47 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Welcome to ScratchTools</title>
-    <link rel="stylesheet" href="./style.css" />
-  </head>
-  <body>
-    <div class="center-perfectly">
+
+<head>
+  <title>Welcome to ScratchTools</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <!-- Onboarding revamp by @Daniel4-Scratch, also hello there!-->
+  <div class="center-perfectly">
+    <div id="section_1">
       <h1 class="big" style="font-weight: 700">Welcome to ScratchTools</h1>
       <button data-function="start">Get Started</button>
     </div>
-  </body>
-  <script src="./script.js"></script>
+
+    <div id="section_2" class="hidden">
+      <h1>Here are some of our top features, enable some!</h1>
+      <p>There
+        are an additional 100+ features for you to choose from. You can change
+        your settings at any time from the extension popup.</p>
+      <div class="features-row"></div>
+      <button data-function="theme">Skip</button>
+    </div>
+
+    <div id="section_3" class="hidden">
+      <h1 class="big" style="font-weight: bold;">Choose a Theme</h1>
+      <div class="theme-selection">
+        <div class="theme-preview"><img src="themes/light.svg" id="theme-preview"></div>
+        <div class="themes">
+          <div class="theme-circle theme-light theme-select" id="light"></div>
+          <div class="theme-circle theme-dark theme-noselect" id="dark"></div>
+
+        </div>
+      </div><button data-function="end">Continue</button>
+    </div>
+
+    <div id="section_4" class="hidden">
+      <h1 class="big" id="end_title">Thank you.</h1>
+      <h2 style="font-weight: 400;" id="end_text">Dozens of developers have worked hard to make hundreds of features on ScratchTools, which is used by over 6,000 people worldwide.
+      </h2><button id="end_button">Get Started</button>
+    </div>
+  </div>
+</body>
+<script src="./script2.js"></script>
+
 </html>
diff --git a/onboarding/script.js b/onboarding/script.js
@@ -83,6 +83,8 @@ async function themePage() {
   themeOptions.className = "themes";
   themeSelection.append(themeOptions);
 
+
+
   var light = document.createElement("div");
   light.className =
     "theme-circle theme-light " +

diff --git a/onboarding/script2.js b/onboarding/script2.js
@@ -0,0 +1,160 @@
+function gEBI(id) {
+  return document.getElementById(id);
+}
+const section = {
+  1: gEBI("section_1"),
+  2: gEBI("section_2"),
+  3: gEBI("section_3"),
+  4: gEBI("section_4"),
+};
+
+async function start() {
+  section[1].classList.add("hidden");
+  section[2].classList.remove("hidden");
+}
+async function theme() {
+  section[2].classList.add("hidden");
+  section[3].classList.remove("hidden");
+
+  const light = gEBI("light");
+  const dark = gEBI("dark");
+
+  const themes = {
+    light: {
+      enabled: true,
+      element: gEBI("light"),
+    },
+    dark: {
+      enabled: false,
+      element: gEBI("dark"),
+    }
+  };
+
+  async function changeTheme(theme) {
+    const themePreviewImg = gEBI("theme-preview");
+    themePreviewImg.src = `/onboarding/themes/${theme}.svg`;
+    themes[theme].element.classList.remove("theme-noselect");
+    themes[theme].element.classList.add("theme-select");
+    for (const themeName in themes) {
+      if (themeName !== theme) {
+        themes[themeName].element.classList.remove("theme-select");
+        themes[themeName].element.classList.add("theme-noselect");
+      }
+    }
+
+    await chrome.storage.sync.set({ theme: theme });
+  }
+
+  const themePreviewImg = gEBI("theme-preview");
+  themes.light.element.onclick = async function () {
+    await changeTheme("light");
+  };
+  themes.dark.element.onclick = async function () {
+    await changeTheme("dark");
+  };
+  themes.purple.element.onclick = async function () {
+    await changeTheme("purple");
+  };
+}
+
+async function end() {
+  section[3].classList.add("hidden");
+  section[4].classList.remove("hidden");
+}
+const button = gEBI("end_button");
+button.addEventListener("click", () => {
+  window.location.href = "https://scratch.mit.edu";
+});
+
+//check if verison-name manifest contains "beta" if change text
+if (chrome.runtime.getManifest().version_name.includes("beta")) {
+  gEBI("end_title").textContent = "Thanks for trying out the beta!";
+  gEBI(
+    "end_text"
+  ).textContent = `If you find any bugs, just open up the full settings page, click on the "Additional
+    Settings" button, and click "Report a Bug".`;
+}
+
+document.querySelector("button[data-function=start]").onclick = start;
+
+document.querySelector("button[data-function=theme]").onclick = theme;
+
+document.querySelector("button[data-function=end]").onclick = end;
+
+async function createFeature(id) {
+  var div = document.createElement("div");
+  div.className = "feature";
+  var obj = (await chrome.storage.sync.get("features")).features;
+  if (obj?.includes(id)) {
+    div.classList.add("enabled");
+    document.querySelector("button[data-function=theme]").textContent =
+      "Continue";
+  }
+  var img = document.createElement("div");
+  img.style.backgroundImage = "url(/onboarding/images/" + id + ".png)";
+  div.appendChild(img);
+  var data = await (await fetch("/features/features.json")).json();
+  var h2 = document.createElement("h2");
+  var featureData = null;
+  for (var i in data) {
+    var el = data[i];
+    if (el.file === id || el.id === id) {
+      if (el.version === 2) {
+        featureData = await (
+          await fetch(`/features/${el.id}/data.json`)
+        ).json();
+        featureData.id = el.id;
+      } else {
+        featureData = el;
+      }
+    }
+  }
+  h2.textContent = featureData.title;
+  var p = document.createElement("p");
+  p.textContent = featureData.description;
+  var span = document.createElement("span");
+  span.textContent = "Click to enable/disable";
+  div.appendChild(h2);
+  div.appendChild(p);
+  div.appendChild(span);
+  div.addEventListener("click", async function () {
+    var obj = (await chrome.storage.sync.get("features")).features;
+    if (div.className.includes("enabled")) {
+      div.classList.remove("enabled");
+      if (obj) {
+        await chrome.storage.sync.set({
+          features: obj.replaceAll(featureData.file || featureData.id, ""),
+        });
+      }
+    } else {
+      div.classList.add("enabled");
+      if (obj) {
+        await chrome.storage.sync.set({
+          features: obj + "." + (featureData.file || featureData.id),
+        });
+      } else {
+        await chrome.storage.sync.set({
+          features: (featureData.file || featureData.id),
+        });
+      }
+    }
+    if (document.querySelector(".enabled")) {
+      document.querySelector("button[data-function=theme]").textContent =
+        "Continue";
+    } else {
+      document.querySelector("button[data-function=theme]").textContent =
+        "Skip";
+    }
+  });
+  return div;
+}
+
+async function loadFeatures() {
+  var featuredFeatures = await (await fetch("./featured.json")).json();
+  featuredFeatures.forEach(async function (ftr) {
+    document
+      .querySelector(".features-row")
+      .appendChild(await createFeature(ftr));
+  });
+}
+loadFeatures();
diff --git a/onboarding/style.css b/onboarding/style.css
@@ -59,6 +59,7 @@ button:hover {
     top: 0px;
     transition: opacity .3s, border .3s, top .3s;
     color: black;
+    cursor: pointer;
 }
 
 .feature:hover {
@@ -115,6 +116,10 @@ button:hover {
   .theme-light{
     background: white;
   }
+
+  .theme-purple{
+    background: linear-gradient(0.37turn, #6a00ff, #2b0165);
+  }
   .theme-preview{
     position:absolute;
 
@@ -128,3 +133,8 @@ button:hover {
     display: flex;
     justify-content: center;
   }
+
+
+  .hidden{
+    display: none;
+  }
diff --git a/onboarding/themes/dark.svg b/onboarding/themes/dark.svg
diff --git a/onboarding/themes/light.svg b/onboarding/themes/light.svg
diff --git a/onboarding/themes/purple.svg b/onboarding/themes/purple.svg