update styles

Sudo-Ivan · Oct 8, 2024 · 8451e8c · 8451e8c
1 parent 0065ce6
commit 8451e8c
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 11 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -458,6 +458,7 @@ button:last-child {
     margin-left: 10px;
     font-size: 14px;
     color: #4ecca3;
+    align-items: center;
 }
 
 #exportCodebook {
@@ -477,4 +478,72 @@ button:last-child {
 
 .danger-btn:hover {
     background-color: #d63d3d;
-}
+}
+/* Custom checkbox (switch) styles */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+  border-radius: 20px;
+  width: 40px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #4ecca3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #4ecca3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+/* Adjust the option row for the new switch style */
+.option-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.option-row label {
+  flex: 1;
+  margin-right: 10px;
+}
+
+/* Add this to override the previous checkbox styles */
+.option-row input[type="checkbox"] {
+  margin-right: 0;
+}
diff --git a/html/options.html b/html/options.html
@@ -27,9 +27,12 @@ <h2>Codebook</h2>
                 <input type="text" id="urlInput" placeholder="Enter URL for remote codebook">
                 <button id="updateFromUrlBtn">Update</button>
             </div>
-            <div class="auto-update-container">
-                <input type="checkbox" id="autoUpdate">
+            <div class="auto-update-container option-row">
                 <label for="autoUpdate">Auto-update from URL</label>
+                <label class="switch">
+                    <input type="checkbox" id="autoUpdate">
+                    <span class="slider"></span>
+                </label>
             </div>
 
             <div class="drop-zone">
@@ -45,15 +48,21 @@ <h2>Chat Window Options</h2>
             </div>
             <div class="option-row">
                 <label for="autoScroll">Auto-scroll to bottom:</label>
-                <input type="checkbox" id="autoScroll" checked>
-            </div>
+                <label class="switch">
+                  <input type="checkbox" id="autoScroll" checked>
+                  <span class="slider"></span>
+                </label>
+              </div>
             <div class="option-row">
                 <label for="windowTransparency">Window Transparency:</label>
                 <input type="number" id="windowTransparency" min="0" max="100" value="90">
             </div>
             <div class="option-row">
                 <label for="autoSend">Auto-Send in Discord:</label>
-                <input type="checkbox" id="autoSend" checked>
+                <label class="switch">
+                    <input type="checkbox" id="autoSend" checked>
+                    <span class="slider"></span>
+                </label>
             </div>
             <div class="option-row">
                 <label for="messageSpacing">Message Spacing (px):</label>
@@ -103,7 +112,10 @@ <h2>Muted Users / Blocklist</h2>
             <h2>Advanced Features</h2>
             <div class="option-row">
                 <label for="destructableMessages">Enable Destructible Messages:</label>
-                <input type="checkbox" id="destructableMessages">
+                <label class="switch">
+                    <input type="checkbox" id="destructableMessages">
+                    <span class="slider"></span>
+                </label>
             </div>
             <div class="option-row">
                 <label for="destructKeyword">Destruction Keyword:</label>
@@ -119,11 +131,17 @@ <h2>Advanced Features</h2>
             </div>
             <div class="option-row">
                 <label for="showDestructTimer">Show Destruction Timer:</label>
-                <input type="checkbox" id="showDestructTimer" checked>
+                <label class="switch">
+                    <input type="checkbox" id="showDestructTimer" checked>
+                    <span class="slider"></span>
+                </label>
             </div>
             <div class="option-row">
                 <label for="caseInsensitiveEncryption">Case-insensitive Encryption (Codebook):</label>
-                <input type="checkbox" id="caseInsensitiveEncryption">
+                <label class="switch">
+                    <input type="checkbox" id="caseInsensitiveEncryption">
+                    <span class="slider"></span>
+                </label>
             </div>
             <div class="option-row">
                 <label for="messageCheckInterval">Check for new messages every (seconds):</label>
@@ -140,14 +158,13 @@ <h2>Data Management</h2>
                 <button id="exportCodebook">Export Codebook with Settings</button>
             </div>
         </section>
-
+        <span id="autoSaveStatus"></span>
         <div id="statusMsg"></div>
     </div>
     <input type="file" id="fileInput" style="display: none;">
     <script src="../js/options.js"></script>
     <div class="save-container">
         <button id="saveBtn" class="small-save-btn">Save</button>
-        <span id="autoSaveStatus"></span>
     </div>
 </body>
 </html>