basic custom keybinds layout

css/style.css

@@ -208,7 +208,7 @@ body.noscript {
   background-color: var(--block-color);
 }
 
-#sort {
+#sort, #keybind-slot-1 {
   all: unset;
   margin: 0;
   border: none;
@@ -220,6 +220,17 @@ body.noscript {
   width: 20%;
 }
 
+.keySlot{
+  margin: 0;
+  border: none;
+  background-color: var(--bg);
+  color: var(--font-color);
+  font-size: 1rem;
+  font-family: var(--font-family);
+  padding: 1rem;
+  width: 20%;
+  cursor: pointer;
+}
 
 logo img {
   z-index: 50;

index.html

@@ -309,6 +309,22 @@
                         </div>
                     </label>
                 </div>
+                
+                <div class="setting">
+                    <h5>Slot 1</h5>
+                    <p>Press a button then press a key on your keyboard to choose </p>
+                    <button class="keySlot">Set Key</button> <!-- add some inline "+" between buttons later -->
+                    <button class="keySlot">Set Key</button>
+                    <button class="keySlot">Set Key (Optional)</button>
+                    <select id="keybind-slot-1">
+                        <option value="#">Cloak</option>
+                        <option value="#">Mask</option>
+                        <option value="#">Close</option>
+                        <option value="#">Custom JS</option>
+                        <option value="#">Select an option   ▼</option>
+                    </select>
+                </div>
+
                 <div class="setting">
                     <h5>Background</h5>
                     <p>Background can cause a lot of lag. Disable if your computer is diagnosed with low FPS.</p>

js/index.js

@@ -346,6 +346,22 @@ function popupsAllowed(){
     }
 }
 
+const keySlots = document.querySelectorAll('.keySlot');
+
+keySlots.forEach((slot) => {
+    slot.addEventListener('click', () => {
+        slot.textContent = 'Press any key';
+
+        // Add a one-time event listener to capture the key press
+        const keyPressHandler = (event) => {
+            slot.textContent = event.key;
+            document.removeEventListener('keydown', keyPressHandler);
+        };
+
+        document.addEventListener('keydown', keyPressHandler);
+    });
+});
+
 const preferencesDefaults = {
     cloak: true,
     cloakUrl: "https://classroom.google.com",