add new buttons

Adityasinh-Sodha · Jan 3, 2025 · b61e860 · b61e860
1 parent 998e55c
commit b61e860
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <script src="scripts/purify.min.js"></script>
 
 </head>
-<body class="dark-theme">
+<body class="dark-blue-theme">
 <div class="top-toolbar">
     <div class="toolbar-left">
         <a href="https://bento.me/adityasinh" target="_blank">
@@ -34,19 +34,6 @@
             <img src="assets/codepen-mark-white.png" alt="Codepen Logo" class="toolbar-logo">
         </a>
     </div>
-  <div class="toolbar-right">
-        <img src="assets/gear.png" alt="image" id="gear-btn" class="toolbar-logo">
-        <div id="settings-menu" class="hidden">
-            <button id="copy-btn">HTML</button>
-             <select id="theme-selector">
-                <option value="dark-blue-theme">DarkBlue Theme</option>
-        <option value="default">White Theme</option>
-        <option value="dark-theme">Dark Theme</option>
-
-    </select>   
-            <div id="word-count">Word Count: 0</div>
-        </div>
-    </div>
 
 </div>
 
@@ -66,10 +53,45 @@
 </div>
 
 <div id="setting-logo">
-    <img src="assets/setting.svg" alt="Project Logo">
+    <img src="assets/setting.svg" alt="Settings Icon">
     <div class="logo-name">Settings</div>
 </div>
 
+<div id="settings-menu" class="hidden">
+   <div class="button-row">
+    <button id="copy-btn" class="html-btn">Copy HTML</button>
+
+</div>
+
+    <div id="theme-selector">
+        <div class="theme-option">
+            <img src="assets/darkblue.png" alt="Dark Blue Theme" class="theme-preview">
+            <label>
+                <input type="radio" name="theme" value="dark-blue-theme">
+                Dark Blue
+            </label>
+        </div>
+        <div class="theme-option">
+            <img src="assets/white.png" alt="White Theme" class="theme-preview">
+            <label>
+                <input type="radio" name="theme" value="default">
+                White
+            </label>
+        </div>
+        <div class="theme-option">
+            <img src="assets/dark.png" alt="Dark Theme" class="theme-preview">
+            <label>
+                <input type="radio" name="theme" value="dark-theme">
+                Dark
+            </label>
+        </div>
+    </div>
+
+    <div id="word-count">Word Count: 0</div>
+</div>
+
+
+
 
     <script src="scripts/script.js"></script>
 </body>