feat: features and improvements platinum-browser#1

bredcat999 · Nov 11, 2022 · 9d8ec84 · 9d8ec84
1 parent c473e38
commit 9d8ec84
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/src/index.html b/src/index.html
@@ -45,7 +45,7 @@
         src="../assets/icons/three-dots-vertical.svg" alt="More menu"></button>&nbsp;
     </div>
     <!-- More menu -->
-    <div id="more-menu" class="sliding-rtl shadow-lg absolute bg-white dark:bg-gray-800 dark:text-white text-gray-900 h-[95%] p-1.5 w-36 blurred float-right hidden right-0 ">
+    <div id="more-menu" class="sliding-rtl shadow-lg absolute m-4 bg-white dark:bg-gray-800 dark:text-white text-gray-900 h-fit rounded-lg p-3 w-36 blurred float-right hidden right-0 ">
         <ul class="justify-center align-middle flex-wrap max-w-sm">
             <li class="moreMenuItem flex cursor-pointer" onclick="togglePreferences()">
                 <img class="rounded-sm dark:invert p-1" src="../assets/icons/gear-fill.svg" class="inline-flex mb-1 px-2" alt="Settings">&nbsp;Preferences
@@ -73,29 +73,37 @@
         <!-- bookmarks inserted with JS -->
     </div>
     <!-- Preferences -->
-    <div id="preferences-box" class="sliding-rtl fixed right-0 shadow-lg bg-gray-200 p-1.5 rounded-sm dark:bg-gray-800 w-[20%] h-screen hidden max-h-screen h-full text-gray-900 dark:text-gray-50">
+    <div id="preferences-box" class="sliding-rtl m-4 rounded-lg fixed right-0 shadow-lg bg-gray-200 p-3 dark:bg-gray-800 w-[20%]  hidden max-h-screen h-fit text-gray-900 dark:text-gray-50">
         <h1 class="font-bold text-xl">Preferences</h1>
-        <label for="pref-darkmode">Dark Mode? </label>
-        <input id="pref-darkmode" type="checkbox" class="" />
-        <p class="text-sm">Toggle dark mode</p>
+        <label class="relative flex justify-between items-center group p-2 text-lg">
+            Dark Mode
+            <input type="checkbox" class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-darkmode" />
+            <span class="w-16 h-10 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
+          </label>
         <br />
-        <label for="pref-autocomplete">Autocomplete </label>
-        <input id="pref-autocomplete" type="checkbox" class="" />
-        <p class="text-sm">Search Autocomplete</p>
+        <label class="relative flex justify-between items-center group p-2 text-lg">
+            Search Autocomplete
+            <input type="checkbox" class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-autocomplete" />
+            <span class="w-16 h-10 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
+          </label>
         <br />
-        <label for="pref-bookmarks">Bookmarks Bar </label>
-        <input id="pref-bookmarks" type="checkbox" class=""/>
-        <p class="text-sm">Toggles the bookmarks bar</p>
+        <label class="relative flex justify-between items-center group p-2 text-lg">
+            Bookmarks Bar
+            <input type="checkbox" class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-bookmarks" />
+            <span class="w-16 h-10 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
+          </label>
         <br />
         <label for="pref-strt">Startup Page</label>
         <input class="text-black p-1.5 rounded-sm" id="pref-strt" class=""/>
         <p class="text-sm">Sets a custom startup page.</p>
         <b>(You must restart Platinum every time this is changed)</b>
         <br />
         <br />
-        <label for="pref-dm"><b class="text-emerald-500">Experimental</b> Force Dark Mode</label>
-        <input id="pref-dm" type="checkbox" class=""/>  
-        <p class="text-sm">Toggles forced dark mode for all sites.</p>
+        <label class="relative flex justify-between items-center group p-2 text-lg">
+            Force Website Dark Mode
+            <input type="checkbox" class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" id="pref-dm" />
+            <span class="w-16 h-10 flex items-center flex-shrink-0 ml-4 p-1 bg-gray-300 rounded-full duration-300 ease-in-out peer-checked:bg-purple-800 after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 peer-checked:after:translate-x-6 group-hover:after:translate-x-1"></span>
+          </label>
         <br />
         <br />
                 <button onclick="clearData()" class="btn">

diff --git a/src/listeners.js b/src/listeners.js
@@ -9,6 +9,10 @@ document.getElementById("more-btn").addEventListener("click", () => {
     document.querySelector('#more-btn').classList.toggle("bg-gray-400")
 });
 
+if (!localStorage.getItem('ctlyststrppg')) {
+    localStorage.setItem('ctlyststrppg', './home.html')
+}
+
 strt.addEventListener('change', () => {
     localStorage.setItem('ctlyststrppg', strt.value)
 }   

diff --git a/src/preferences.js b/src/preferences.js
@@ -38,7 +38,7 @@ function getPreferences() {
     if (!window.localStorage.getItem("preferences")) {
         window.localStorage.setItem(
             "preferences",
-            JSON.stringify({ dark: false, agent: "", autocomplete: true, bookmarks: false })
+            JSON.stringify({ dark: true, agent: "", autocomplete: true, bookmarks: false })
         );
     }
     return JSON.parse(window.localStorage.getItem("preferences"));

diff --git a/styles.css b/styles.css
@@ -32,6 +32,9 @@
 	.suggestions-box {
 		@apply absolute rounded-b-lg bg-red-200 dark:bg-gray-800 border-blue-500 shadow;
 	}
+	.cb {
+		@apply rounded-full p-3;
+	}
 	*:focus {
 		@apply outline-emerald-600;
 	}