Panel design update

DevLARLEY · Oct 25, 2024 · af81251 · af81251
1 parent 954cf90
commit af81251
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 14 deletions.
diff --git a/panel/panel.css b/panel/panel.css
@@ -1,9 +1,108 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #ffffff;
+    color: black;
+}
+button:not(.toggleButton), select {
+    padding: 4px;
+}
+.toggleButton {
+    width: 24px;
+}
+button, select {
+    background-color: #e1e1e1;
+    border: none;
+}
+.text-box {
+    outline: none;
+    width: 80%;
+}
+button:hover, select:hover {
+    background-color: #c3c3c3;
+}
+button, select, fieldset, .text-box {
+    border-radius: 7px;
+}
+
+
+/* Dark mode */
+.dark-mode {
+    background-color: #1b1b1b;
+    color: #D5D5D5;
+}
+.dark-mode fieldset {
+    border-color: #535353;
+}
+.dark-mode button, .dark-mode select {
+    background-color: #222;
+    color: #D5D5D5;
+    border-color: #222;
+}
+.dark-mode button:hover, .dark-mode select:hover {
+    background-color: #323232;
+}
+.dark-mode .expandableDiv {
+    background-color: #1b2027;
+}
+.dark-mode .text-box {
+    background-color: #323232;
+    border-color: #535353;
+    color: #D5D5D5;
+}
+
+/* Switch */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    margin-left: 10px;
+}
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* Slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 20px;
+}
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    border-radius: 50%;
+}
+input:checked + .slider {
+    background-color: #2196F3;
+}
+input:checked + .slider:before {
+    transform: translateX(20px);
+}
+
+#clear {
+    width: 100%;
+    margin-bottom: 3px;
+}
+
 .header {
     display: flex;
     justify-content: center;
     align-items: center;
 }
-
 .header > * {
     margin: 5px;
 }
@@ -16,38 +115,28 @@
     display: flex;
     justify-content: center;
 }
-
 .right-bound {
     text-align: right;
 }
-
-.text-box {
-    width: 80%;
-}
-
 .expandableDiv {
     width: 100%;
     overflow: hidden;
     background-color: lightblue;
+    border-radius: 7px;
     padding: 0;
 }
-
 .expandableDiv.expanded {
     padding: 5px;
 }
-
 .expandableDiv.collapsed {
     padding: 0;
 }
-
 .always-visible {
     display: block;
 }
-
 .expanded-only {
     display: none;
 }
-
 .expandableDiv.expanded .expanded-only {
     display: block;
 }
diff --git a/panel/panel.html b/panel/panel.html
@@ -8,12 +8,19 @@
 <body style="min-width: 200px;">
     <div class="header">
         <img src="../images/icon-128.png" alt="WidevineProxy Icon" width="64"/>
-        <img src="../images/proxy_text.png" alt="ProxyText" width="200"/>
+        <img id="textImage" src="../images/proxy_text.png" alt="ProxyText" width="200"/>
     </div>
     <fieldset>
         <legend>Settings</legend>
+        <!-- Enabled -->
         <input type="checkbox" id="enabled">
-        <label for="enabled"> Enabled</label><br>
+        <label for="enabled"> Enabled</label>
+        <!-- Dark mode -->
+        <label class="switch">
+            <input type="checkbox" id="darkModeToggle">
+            <span class="slider"></span>
+        </label>
+        <label for="enabled"> Dark mode</label>
         <fieldset id="wvd">
             <legend>Widevine Device</legend>
             <button type="button" id="fileInput">Choose File</button><br>

diff --git a/panel/panel.js b/panel/panel.js
@@ -4,6 +4,12 @@ import { base64toUint8Array, DeviceManager, SettingsManager } from "../util.js";
 
 const key_container = document.getElementById('key-container');
 
+const toggle = document.getElementById('darkModeToggle');
+toggle.addEventListener('change', async () => {
+    await SettingsManager.setDarkMode(toggle.checked);
+    await SettingsManager.saveDarkMode(toggle.checked);
+});
+
 const enabled = document.getElementById('enabled');
 enabled.addEventListener('change', async function (){
     await SettingsManager.setEnabled(enabled.checked);
@@ -76,9 +82,11 @@ function applyListeners() {
         button.addEventListener('click', function () {
             const expandableDiv = this.nextElementSibling;
             if (expandableDiv.classList.contains('collapsed')) {
+                button.innerHTML = "-";
                 expandableDiv.classList.remove('collapsed');
                 expandableDiv.classList.add('expanded');
             } else {
+                button.innerHTML = "+";
                 expandableDiv.classList.remove('expanded');
                 expandableDiv.classList.add('collapsed');
             }
@@ -108,6 +116,7 @@ function checkLogs() {
 
 document.addEventListener('DOMContentLoaded', async function () {
     enabled.checked = await SettingsManager.getEnabled();
+    SettingsManager.setDarkMode(await SettingsManager.getDarkMode());
     await DeviceManager.loadSetAllWidevineDevices();
     await DeviceManager.selectWidevineDevice(await DeviceManager.getSelectedWidevineDevice());
     checkLogs();

diff --git a/util.js b/util.js
@@ -180,6 +180,23 @@ export class SettingsManager {
             reader.readAsArrayBuffer(file);
         })
     }
+
+    static async saveDarkMode(dark_mode) {
+        await AsyncSyncStorage.setStorage({ dark_mode: dark_mode });
+    }
+
+    static async getDarkMode() {
+        const result = await AsyncSyncStorage.getStorage(["dark_mode"]);
+        return result["dark_mode"] || false;
+    }
+
+    static setDarkMode(dark_mode) {
+        const textImage = document.getElementById("textImage");
+        const toggle = document.getElementById('darkModeToggle');
+        toggle.checked = dark_mode;
+        document.body.classList.toggle('dark-mode', dark_mode);
+        textImage.src = dark_mode ? "../images/proxy_text_dark.png" : "../images/proxy_text.png";
+    }
 }
 
 export function intToUint8Array(num) {