<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Preferences Panel</title> <style> body { background-image: url(https://raw.githubusercontent.com/unspoken03/code/refs/heads/main/Screenshot%202025-01-07%201.09.47%20PM.png); margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: start; font-family: system-ui, -apple-system, sans-serif; } .prefs { margin-top: 75px; width: 673px; height: 264px; background-color: rgba(204, 204, 204, 0.45); border-radius: 45px; display: flex; align-items: center; flex-direction: column; box-shadow: 0 17px 20.8px rgba(0, 0, 0, 0.20); backdrop-filter: blur(50px); } .cont { display: flex; height: 82px; width: 583px; align-items: center; justify-content: center; position: relative; } h1 { color: #5C5C5C; font-weight: bold; font-size: 40px; text-align: center; user-select: none; margin: 20px 0 7px; } .title { margin-bottom: 7px; margin-top: 20px; } /* Custom slider styles */ .custom-slider { width: 373px; height: 4px; border-radius: 2px; background: #c1b5c5; outline: none; cursor: pointer; -webkit-appearance: none; position: relative; margin: 0 5px; } .custom-slider::-webkit-slider-thumb { box-shadow: 0 5px 23px rgba(0, 0, 0, 0.4); -webkit-appearance: none; width: 28px; height: 28px; background: white; border-radius: 50%; cursor: pointer; } .custom-slider::-moz-range-thumb { width: 28px; height: 28px; background: #ffffff; border: none; border-radius: 50%; cursor: pointer; } .pref-accsent { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(1px); border-radius: 16px; box-shadow: 0 17px 20.8px rgba(0, 0, 0, 0.1); } .checkbox { border: 4px solid #6C6C6C; border-radius: 7px; height: 26px; width: 26px; margin-right: 10px; cursor: pointer; transition: background-color 0.2s; } .checkbox.checked { background-color: #6C6C6C; } .option-text { font-size: 32px; color: #6C6C6C; margin-top: 11px; } .speed-control { width: 583px; height: 50px; } .option-container { width: 393px; height: 61px; } .option-container + .option-container { margin-left: 19px; width: 280px; } </style></head><body> <div class="prefs"> <h1 class="title">Auto Vocab</h1> <div class="cont"> <div class="pref-accsent speed-control"> <svg style="margin-right: 5px;" fill="#787380" height="23.5px" width="64px" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 175" transform="matrix(-1, 0, 0, 1, 0, 0)" stroke="#787380"> <path d="M185,29.7v0.2l15-12.6c-11.4-6.1-23.9-9.5-37.5-9.5s-26.2,3.4-37.1,9.3l15,12.6L185,29.7L185,29.7z M105.1,93.2 c-24.7,0-45,20.3-45,45v4.5l0,0c0.2,9.5,7.9,17,17.4,17s17.2-7.5,17.4-17l0,0v-4.5c0-5.7,4.5-10.1,10.1-10.1 c9.7,0,17.6-7.9,17.6-17.6S114.8,93.2,105.1,93.2z M221.9,92.8c-9.7,0-17.6,7.9-17.6,17.6v32.4l0,0c0.4,9.3,7.9,16.8,17.4,16.8 s17-7.5,17.4-16.8l0,0v-32.7C239.3,100.5,231.4,92.8,221.9,92.8z M252.7,101.9c0-4.3-1.4-8.5-3.4-12c-2.2,1.6-4.7,2.6-7.7,2.6 c4.1,4.9,6.5,11,6.5,17.6v5.5C251.3,111.8,252.7,107,252.7,101.9z M131.7,110.6c0,5.7-1.8,10.7-4.7,15c11.6,2.6,23.5,4.1,35.7,4.1 c11.4,0,22.1-1.2,32.7-3.4v-16c0-6.5,2.4-12.6,6.3-17h-76.5C129,98,131.7,103.9,131.7,110.6z M125,93.4L125,93.4c0.2,0,0-0.2,0-0.2 V93.4z M245.8,79.6c0-2.4-2-4.7-4.5-4.7h-0.6c-3.4-21.7-15.4-40.6-32.7-52.5l-17.6,14.8c9.7,11.4,16.4,24.1,20.3,37.9h-9.5 c-4.3-13-11.4-25.6-21.5-35.9h-32.9c-10.1,10.5-17,22.7-21.5,35.9h-9.5c3.9-13.4,10.3-26,19.9-36.9l-18.5-15.6 c-17,12.2-29.4,30.8-32.7,52.5h-1.2c-2.4,0-4.5,2-4.5,4.5c0,2.4,2,4.5,4.5,4.5h157.8C243.8,84.1,245.8,82,245.8,79.6z M81.6,89.5 c-4.9-0.6-8.9-4.7-8.9-9.9v-8.9c0-18.7-15-33.9-33.9-33.9c-18.7,0-33.9,15-33.9,33.9v8.9c0,4.9,4.1,8.9,8.9,8.9h24.5 c2.2,11.4,8.5,20.7,17.6,27.4C61.1,104.3,70.2,95.2,81.6,89.5z M24.2,64.4c-3,0-5.7-2.4-5.7-5.7c0-3,2.4-5.7,5.7-5.7 s5.7,2.4,5.7,5.7C29.8,61.9,27.4,64.4,24.2,64.4z"></path> </svg> <input type="range" min="0" max="14999" value="7500" class="custom-slider" > <svg style="margin-right: 5px;" fill="#787380" height="23.5px" width="64px" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 175" stroke="#787380"> <path d="M185,29.7v0.2l15-12.6c-11.4-6.1-23.9-9.5-37.5-9.5s-26.2,3.4-37.1,9.3l15,12.6L185,29.7L185,29.7z M105.1,93.2 c-24.7,0-45,20.3-45,45v4.5l0,0c0.2,9.5,7.9,17,17.4,17s17.2-7.5,17.4-17l0,0v-4.5c0-5.7,4.5-10.1,10.1-10.1 c9.7,0,17.6-7.9,17.6-17.6S114.8,93.2,105.1,93.2z M221.9,92.8c-9.7,0-17.6,7.9-17.6,17.6v32.4l0,0c0.4,9.3,7.9,16.8,17.4,16.8 s17-7.5,17.4-16.8l0,0v-32.7C239.3,100.5,231.4,92.8,221.9,92.8z M252.7,101.9c0-4.3-1.4-8.5-3.4-12c-2.2,1.6-4.7,2.6-7.7,2.6 c4.1,4.9,6.5,11,6.5,17.6v5.5C251.3,111.8,252.7,107,252.7,101.9z M131.7,110.6c0,5.7-1.8,10.7-4.7,15c11.6,2.6,23.5,4.1,35.7,4.1 c11.4,0,22.1-1.2,32.7-3.4v-16c0-6.5,2.4-12.6,6.3-17h-76.5C129,98,131.7,103.9,131.7,110.6z M125,93.4L125,93.4c0.2,0,0-0.2,0-0.2 V93.4z M245.8,79.6c0-2.4-2-4.7-4.5-4.7h-0.6c-3.4-21.7-15.4-40.6-32.7-52.5l-17.6,14.8c9.7,11.4,16.4,24.1,20.3,37.9h-9.5 c-4.3-13-11.4-25.6-21.5-35.9h-32.9c-10.1,10.5-17,22.7-21.5,35.9h-9.5c3.9-13.4,10.3-26,19.9-36.9l-18.5-15.6 c-17,12.2-29.4,30.8-32.7,52.5h-1.2c-2.4,0-4.5,2-4.5,4.5c0,2.4,2,4.5,4.5,4.5h157.8C243.8,84.1,245.8,82,245.8,79.6z M81.6,89.5 c-4.9-0.6-8.9-4.7-8.9-9.9v-8.9c0-18.7-15-33.9-33.9-33.9c-18.7,0-33.9,15-33.9,33.9v8.9c0,4.9,4.1,8.9,8.9,8.9h24.5 c2.2,11.4,8.5,20.7,17.6,27.4C61.1,104.3,70.2,95.2,81.6,89.5z M24.2,64.4c-3,0-5.7-2.4-5.7-5.7c0-3,2.4-5.7,5.7-5.7 s5.7,2.4,5.7,5.7C29.8,61.9,27.4,64.4,24.2,64.4z"></path> </svg> </div> </div> <div class="cont"> <div class="pref-accsent option-container"> <div class="checkbox"></div> <h1 class="option-text">Auto submit on finish</h1> </div> </div> </div> <script> // Initialize checkbox states and add click handlers document.querySelectorAll('.checkbox').forEach(checkbox => { // To make a checkbox checked by default, add the 'checked' class here if (checkbox.nextElementSibling.textContent === 'Auto submit on finish') checkbox.classList.add('checked'); // Log initial checkbox state const optionText = checkbox.nextElementSibling.textContent; console.log(`Initial ${optionText}: ${checkbox.classList.contains('checked') ? 'enabled' : 'disabled'}`); checkbox.addEventListener('click', function() { this.classList.toggle('checked'); const optionText = this.nextElementSibling.textContent; console.log(`${optionText}: ${this.classList.contains('checked') ? 'enabled' : 'disabled'}`); }); }); // Debounce function to limit how often a function can be called function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Add input handler for slider with debouncing const slider = document.querySelector('.custom-slider'); const logSliderValue = debounce((value) => { console.log('Final slider value:', value); }, 300); // Log initial slider value console.log('Initial slider value:', slider.value); slider.addEventListener('input', function() { logSliderValue(this.value); }); </script></body></html>