Provide settings page with full functionality.

public/static/colorschemes/catppuccin-mocha.css

@@ -2,10 +2,8 @@
   --bg: #1e1e2e;
   --fg: #cdd6f4;
   --1: #45475a;
-  --1_1: #4f5169;
   --2: #f38ba8;
   --3: #a6e3a1;
-  --3_1: #7ce073;
   --4: #f9e2af;
   --5: #89b4fa;
   --6: #f5c2e7;

public/static/settings.js

@@ -1,130 +1,32 @@
-function toggleSelectOptions(elem, state) {
-    elem.classList.remove("invalid");
-    try { elem.parentElement.querySelector('.errTxt').remove();} catch (error) {}
-    let options = elem.querySelector('.options');
-    const pos = elem.getBoundingClientRect();
-    const windowWidth = document.getElementsByTagName("body")[0].clientHeight;
-    if(pos.y + 250 > windowWidth) {
-        options.style.bottom = '40px';
-    } else { options.style.bottom = null }
-    options.style.display = state != 'close' ? getComputedStyle(options).display == 'none' ? 'block': 'none' : 'none';
-}
-
-let selectElements = document.querySelectorAll('.custom-select');
-Array.from(selectElements).forEach(element => {
-    element.childNodes[0].nodeValue = (element.hasAttribute('data-multiple') ? element.getAttribute('data-placeholder') : element.getAttribute('data-default'));
-    element.addEventListener('click', (e) => {if (e.target === element) toggleSelectOptions(element)});
-    element.addEventListener('focusout', (e) => {if (e.target === element) toggleSelectOptions(element, 'close')});
-});
-
-function removeSelectOption(elem, optionId) {
-    let option = document.querySelector('#'+optionId);
-    let selectDiv = option.closest('.custom-select');
-    let input = document.querySelector(`[name="${selectDiv.getAttribute('data-input')}"]`);
-    elem.parentElement.remove();
-    option.removeAttribute('selected');
-    option.querySelector('svg').remove();
-    input.value = input.value.replace(option.getAttribute('data-value') ? option.getAttribute('data-value') + "," : '', '');
-}
-
-function multiSelectClickHandler(elem) {
-    let selectDiv = elem.closest('.custom-select');
-    let input = document.querySelector(`[name="${selectDiv.getAttribute('data-input')}"]`);
-    if (!elem.hasAttribute('selected')) {
-        document.querySelector('#'+elem.closest(".custom-select").getAttribute("data-showDivId")).innerHTML += 
-        `<span class='selected-multiple-option' id='${elem.getAttribute('id')}-selected'>${elem.innerText} &ensp; 
-          <span onclick="removeSelectOption(this, '${elem.getAttribute('id')}')">
-            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/>
-            </svg>
-          </span>
-        </span>`;
-        elem.setAttribute('selected', '');
-        elem.innerHTML = `${elem.innerText}
-          <svg fill="currentColor" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 490 490" xml:space="preserve">
-          <g id="SVGRepo_iconCarrier"> <polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "></polygon> </g></svg>`
-
-        // Code where value in inserted into input
-        input.value += elem.getAttribute('data-value') ? elem.getAttribute('data-value') + "," : '';
-    } else {
-        // similar to removeSelectOption method
-        document.querySelector('#'+elem.getAttribute('id')+'-selected').remove();
-        elem.removeAttribute('selected');
-        elem.querySelector('svg').remove();
-
-        input.value = input.value.replace(elem.getAttribute('data-value') ? elem.getAttribute('data-value') + "," : '', '');
-    }
-    
-}
-
-function singleSelectClickHandler(elem) {
-    let selectDiv = elem.closest('.custom-select');
-    let selectedOption = selectDiv.querySelector('span[selected]');
-    let input = document.querySelector(`[name="${selectDiv.getAttribute('data-input')}"]`);
-    if (!elem.hasAttribute('selected')) {
-        if (selectedOption != null) {
-            selectedOption.removeAttribute('selected');
-            selectedOption.querySelector('svg').remove();
+// UI: Method for selecting all search engines
+function selectAllHandler(elem) {
+    let span = elem.parentElement.querySelector('span');
+    let mainInput = document.getElementsByName('searchEng')[0];
+    let prevStateSelectAll = span.innerText == 'Select all' ? true : false;
+    document.querySelectorAll('.searchEng-elem').forEach(engine => {
+        if (prevStateSelectAll) {
+            engine.querySelector('input[type="checkbox"]').checked = true;
+        } else {
+            engine.querySelector('input[type="checkbox"]').checked = false;
         }
-        elem.setAttribute('selected', '');
-        elem.innerHTML = `${elem.innerText}
-          <svg fill="currentColor" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 490 490" xml:space="preserve">
-          <g id="SVGRepo_iconCarrier"> <polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "></polygon> </g></svg>`
-          // Code where value is inserted to input
-          input.value = elem.getAttribute('data-value') ? elem.getAttribute('data-value') : '';
-          selectDiv.childNodes[0].nodeValue = elem.innerText;
+    })
+    if (prevStateSelectAll) {
+        let getValues = () => {
+            let value = ""
+            document.querySelectorAll('[data-isCheckbox]:not([data-value="all"])').forEach(elem => {
+                value += elem.getAttribute("data-value") + ",";
+            });
+            return value;
+        }
+        mainInput.value = getValues();
     } else {
-        elem.removeAttribute('selected');
-        elem.querySelector('svg').remove();
-        selectDiv.childNodes[0].nodeValue = selectDiv.getAttribute('data-default');
-
-        input.value = "";
+        mainInput.value = '';
     }
-    selectDiv.blur();
+    span.innerText =  prevStateSelectAll ? 'Deselect all' : 'Select all';
 }
 
-let multiSelectOptions = document.querySelectorAll('.custom-select[data-multiple="1"]>.options span');
-for (let i = 0; i < multiSelectOptions.length; i++) {
-    multiSelectOptions[i].addEventListener('click', () => {multiSelectClickHandler(multiSelectOptions[i])});
-    multiSelectOptions[i].setAttribute('id', 'option-'+i.toString());
-}
-
-let singleSelectOptions = document.querySelectorAll('.custom-select:not([data-multiple="1"])>.options span');
-for (let i = 0; i < singleSelectOptions.length; i++) {
-    singleSelectOptions[i].addEventListener('click', () => {singleSelectClickHandler(singleSelectOptions[i])});
-    singleSelectOptions[i].setAttribute('id', 'option-'+i.toString());
-}
-
-function selectAllHandler(elem) {
-    let options = elem.parentElement.querySelectorAll('.custom-select[data-multiple="1"]>.options span');
-    Array.from(options).forEach((option) => {
-        try {
-            let selectedShownElem = document.getElementById(option.getAttribute('id')+'-selected');
-            removeSelectOption(selectedShownElem.querySelector('span'), option.getAttribute('id'))
-        } catch (err) {}
-        if (elem.innerText == 'select all') { option.click() };
-    });
-    elem.innerText = elem.innerText == 'select all' ? 'deselect all' : 'select all'
-}
-
-
-// On settings form submit
-function submitSettings() {
-    let form = document.settings;
-    document.querySelectorAll('.errTxt').forEach(e => e.remove());
-    for(let i = 0; i < form.elements.length; i++) {
-        let input = form.elements[i];
-        if (input.value == "" && input.hasAttribute('required')) {
-            let elem = input.parentElement.querySelector('[takeInput]')
-            let errTxt = document.createElement('p')
-            errTxt.classList.add('errTxt')
-            errTxt.innerText = 'This setting can\'t be empty!!'
-            elem.classList.add('invalid');
-            elem.parentElement.insertBefore(errTxt, elem);
-        }
-    }
-    return false;
-}
 
+// UI: Filter settings as per category
 document.querySelectorAll('.settings-sidebar .set-name').forEach(filter => {
     let target = filter.getAttribute('data-detailId');
     filter.addEventListener('click', () => {
@@ -145,29 +47,70 @@ document.querySelectorAll('.settings-sidebar .set-name').forEach(filter => {
     })
 })
 
-function fadeOut(element) {
-    var op = 1;  // initial opacity
-    var timer = setInterval(function () {
-        if (op <= 0.1){
-            clearInterval(timer);
-            element.style.display = 'none';
-            element.classList.add('fade');
+
+// On settings form submit
+function submitSettings() {
+    let form = document.settings;
+    let stopProceeding = false;
+    document.querySelectorAll('.errTxt').forEach(e => e.remove());
+    for(let i = 0; i < form.elements.length; i++) {
+        let input = form.elements[i];
+        if (input.value == "" && input.hasAttribute('required')) {
+            stopProceeding = true;
+            let elem = input.parentElement.querySelector('[takeInput]')
+            let errTxt = document.createElement('p')
+            errTxt.classList.add('errTxt')
+            errTxt.innerText = 'This setting can\'t be empty!!'
+            elem.classList.add('invalid');
+            elem.parentElement.insertBefore(errTxt, elem);
+            let sidebarElement = input.closest('.set-item').getAttribute('data-id')
+            document.querySelector(`.settings-sidebar .set-name[data-detailId="${sidebarElement}`).click();
+            stopProceeding = true;
         }
-        element.style.opacity = op;
-        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
-        op -= op * 0.1;
-    }, 50);
+    }
+    if (!stopProceeding) {
+        var expiration_date = new Date();
+        expiration_date.setFullYear(expiration_date.getFullYear() + 1);
+        let formData = new FormData(document.querySelector('form'));
+        for (var [key, value] of formData.entries()) { 
+            document.cookie = `${key}=${value}; expires=${expiration_date.toUTCString()}`
+        }
+    } else { return false; }
+    // On settings saved successfully
+    alert("Settings saved succssfully!");
+    window.location.reload();
 }
 
-function fadeIn(element) {
-    var op = 0.1;  // initial opacity
-    element.style.display = 'block';
-    var timer = setInterval(function () {
-        if (op >= 1){
-            clearInterval(timer);
+// Autoload existing settings
+function loadUserSettings() {
+    let inputs = ["searchEng", "theme", "color-sch"]
+    var keyValuePairs = document.cookie.split(';');
+    for(var i = 0; i < keyValuePairs.length; i++) {
+        var name = keyValuePairs[i].substring(0, keyValuePairs[i].indexOf('='));
+        var value = keyValuePairs[i].substring(keyValuePairs[i].indexOf('=')+1);
+        name = name.trim();
+        if (!inputs.includes(name)) { return; }
+        let input = document.getElementsByName(name)[0];
+        input.value = value;
+        if (name == "searchEng") {
+            // Unload all checked engine
+            document.querySelectorAll(".searchEng-elem input[type=checkbox]").forEach(e => {
+                e.checked = false;
+            })
+            value = value.replace(" ", "");
+            value.split(",").forEach(val => {
+                if (!val) {return}
+                document.querySelector(`[data-isCheckbox][data-value="${val}"]`).
+                parentElement.querySelector('input').checked = true
+            })
+        } else {
+            // Unload all selected options
+            document.querySelector(`[data-input="${name}"] .options span[data-value="${value}"]`).
+                removeAttribute('selected');
+            singleSelectClickHandler(document.querySelector(`.options span[data-value="${value}"]`));
         }
-        element.style.opacity = op;
-        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
-        op += op * 0.1;
-    }, 10);
+    }
+
 }
+
+loadUserSettings();

public/static/themes/simple.css

@@ -302,6 +302,7 @@ footer {
   width: 80%;
 }
 
+/* css for settings page t */
 .settings {
   margin: 2rem;
   width: 80%;
@@ -323,6 +324,7 @@ footer {
 .settings-view {
   display: flex; 
   flex: 1 0 auto;
+  margin: 1.5rem 0;
 }
 
 .settings-sidebar {
@@ -339,16 +341,17 @@ footer {
   padding: .7rem;
   border-radius: 5px;
   font-weight: bold;
+  margin-bottom: .5rem;
 }
 
 .settings-sidebar .set-name:hover, .settings-sidebar .set-name.active {
-  background-color: var(--1_1);
+  background-color: rgba(255, 255, 255, 0.15);
+
 }
 
 .settings-detail {
   border-left: 1.5px solid var(--3);
   padding-left: 3rem;
-  margin-top: .7rem;
 }
 
 .settings-detail .set-item {
@@ -367,6 +370,7 @@ footer {
   margin-bottom: .5rem;
 }
 
+/* css for custom select */
 .custom-select, .options {
   font-size: 1.5rem;
   background-color: var(--bg);
@@ -411,7 +415,7 @@ footer {
 }
 
 .options span:hover {
-  background-color: var(--1_1);
+  background-color: var(--1);
 }
 
 .selected-multiple-option {
@@ -447,23 +451,21 @@ footer {
   background: var(--3);
   color: var(--bg);
   border-radius: .5rem;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   font-weight: bold;
-  transition: background .5s ease-in;
+  transition: all .1s ease-out;
   cursor: pointer;
-}
-
-.settings .submit-btn:hover {
-  border: 1px solid var(--bg);
-  background: var(--3_1);
-  box-shadow: 0px 0px 2px 2px var(--fg);
+  box-shadow: 5px 5px;
 }
 
 .settings .submit-btn:active {
   outline: none;
-  border: 2px solid var(--bg);
+  box-shadow: none;
+  translate: 5px 5px;
 }
 
+/* Css for error text */
+
 .errTxt {
   color: white;
   background: red;
@@ -471,4 +473,112 @@ footer {
   border-radius: 5px;
   font-size: 1.3rem;
   width: max-content;
-}
+}
+
+/* Css for toggle element */
+
+label,
+label::before,
+label::after {
+  transition: 200ms all ease-in-out 50ms;
+  box-sizing: border-box;
+  backface-visibility: hidden;
+}
+
+input[type="checkbox"] {
+  display: none;
+}
+
+/*Button is :CHECKED*/
+
+input[type="checkbox"]:checked ~ div[data-isCheckbox] {
+  background: rgba(73,168,68,1);
+  box-shadow: 0 0 2px rgba(73,168,68,1);
+}
+
+input[type="checkbox"]:checked ~ div[data-isCheckbox] label {
+  left: 25px;
+  transform: rotate(360deg);
+}
+
+
+/*shared*/
+
+div[data-isCheckbox],
+label {
+  border-radius: 50px;
+}
+
+
+/*'un':checked state*/
+
+div[data-isCheckbox] {
+  height: 25px;
+  width: 50px;
+  background: rgba(43, 43, 43, 1);
+  position: relative;
+  box-shadow: 0 0 2px rgba(43,43,43,1);
+  
+}
+
+label {
+  height: 20px;
+  width: 20px;
+  background: rgba(255, 255, 255, 1);
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  cursor: pointer;
+}
+
+label::before {
+  content: '';
+  height: 15px;
+  width: 3px;
+  position: absolute;
+  top: calc(50% - 8px);
+  left: calc(50% - 1.5px);
+  transform: rotate(45deg);
+}
+
+label::after {
+  content: '';
+  height: 3px;
+  width: 15px;
+  position: absolute;
+  top: calc(50% - 2.5px);
+  left: calc(50% - 8px);
+  transform: rotate(45deg);
+}
+
+label::before,
+label::after{
+  background: rgba(43,43,43,1);
+  border-radius: 5px;
+}
+
+/* pesduo class on toggle */
+
+input[type="checkbox"]:checked ~ div label::before{
+  height: 15px;
+  top: calc(55% - 8px);
+  left: calc(60% - 2px);
+  background: rgba(73,168,68,1);
+}
+
+input[type="checkbox"]:checked ~ div label::after{
+  width: 7px;
+  top: calc(95% - 7px);
+  left: calc(22.5% - 2px);
+  background: rgba(73,168,68,1);
+}
+
+.searchEng-elem {
+  display: flex;
+  gap: 3rem;
+  align-items: center;
+  font-size: 1.5rem;
+  margin: 1rem 0;
+}
+
+.settings-sidebar .set-name[data-detailId="theme"]

public/static/ui_plugins.js

@@ -0,0 +1,110 @@
+/*  
+    Select plugin
+    Note: Only for single select option
+    Usage example: 
+    ```
+    <input name="theme" disabled style="display: none;" required></input>
+    <div class="custom-select" tabindex="0" data-input="theme" data-default="Select" takeInput>
+        Svg Icon here
+        <div class="options">
+            <span data-value="simple">Simple</span>
+        </div>
+    </div>
+    ```
+*/
+
+let svg_tick = `
+  <svg fill="currentColor" height="1.5rem" width="1.5rem" viewBox="0 0 490 490" xml:space="preserve">
+    <g id="SVGRepo_iconCarrier">
+      <polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "></polygon>
+    </g>
+  </svg>`;
+
+function toggleSelectOptions(elem, state) {
+    elem.classList.remove("invalid");
+    try { elem.parentElement.querySelector('.errTxt').remove();} catch (error) {}
+    let options = elem.querySelector('.options');
+    const pos = elem.getBoundingClientRect();
+    const windowWidth = document.getElementsByTagName("body")[0].clientHeight;
+    if(pos.y + 250 > windowWidth) {
+        options.style.bottom = '40px';
+    } else { options.style.bottom = null }
+    options.style.display = state != 'close' ? getComputedStyle(options).display == 'none' ? 'block': 'none' : 'none';
+}
+
+let selectElements = document.querySelectorAll('.custom-select').forEach(element => {
+    let value = element.getAttribute('data-default')
+    element.childNodes[0].nodeValue = value;
+    element.querySelector(`.options span[data-value="${value.toLowerCase()}"]`).
+      innerHTML = `${value} ${svg_tick}`;
+    element.addEventListener('click', (e) => {if (e.target === element) toggleSelectOptions(element)});
+    element.addEventListener('focusout', (e) => {if (e.target === element) toggleSelectOptions(element, 'close')});
+});
+
+function singleSelectClickHandler(elem) {
+    let selectDiv = elem.closest('.custom-select');
+    let selectedOption = selectDiv.querySelector('span[selected]');
+    let input = document.querySelector(`[name="${selectDiv.getAttribute('data-input')}"]`);
+    if (!elem.hasAttribute('selected')) {
+        if (selectedOption != null) {
+            selectedOption.removeAttribute('selected');
+            selectedOption.querySelector('svg').remove();
+        }
+        elem.setAttribute('selected', '');
+        elem.innerHTML = `${elem.innerText} ${svg_tick}`
+        // Code where value is inserted to input
+        input.value = elem.getAttribute('data-value') ? elem.getAttribute('data-value') : '';
+        selectDiv.childNodes[0].nodeValue = elem.innerText;
+    } else {
+        elem.removeAttribute('selected');
+        elem.querySelector('svg').remove();
+        selectDiv.childNodes[0].nodeValue = selectDiv.getAttribute('data-defaultIfNone');
+
+        input.value = "";
+    }
+    selectDiv.blur();
+}
+
+let singleSelectOptions = document.querySelectorAll('.custom-select:not([data-multiple="1"])>.options span');
+for (let i = 0; i < singleSelectOptions.length; i++) {
+    singleSelectOptions[i].addEventListener('click', () => {singleSelectClickHandler(singleSelectOptions[i])});
+    singleSelectOptions[i].setAttribute('id', 'option-'+i.toString());
+}
+
+
+/*
+    Toggle switch plugin
+    Usage example:
+    ```
+    <input type="hidden" name="searchEng" disabled>
+    <div class="searchEng">
+        <div class="searchEng-elem">
+            <input type="checkbox" id="toggle"/>
+            <div data-isCheckbox data-input="searchEng" data-value="ddg">
+                <label for="toggle"></label>
+            </div>
+            <span>Duck duck go</span>
+        </div>
+        <div class="searchEng-elem">
+            <input type="checkbox" id="toggle1"/>
+            <div data-isCheckbox data-input="searchEng" data-value="searx">
+                <label for="toggle1"></label>
+            </div>
+            <span>Searx</span>
+        </div>
+    </div>
+    ```
+*/
+
+document.querySelectorAll('[data-isCheckbox]:not([data-value="all"]) label').forEach(checkBoxLabel => { 
+    checkBoxLabel.addEventListener('click', () => {
+        let checkBox = checkBoxLabel.parentElement;
+        let helperInput = checkBox.parentElement.querySelector('input[type="checkbox"]');
+        let mainInput = document.getElementsByName(checkBox.getAttribute('data-input'))[0];
+        if (helperInput.checked == true) {
+            mainInput.value = mainInput.value.replace(checkBox.getAttribute('data-value') + ',', '');
+        } else {
+            mainInput.value += checkBox.getAttribute('data-value') + ',';
+        }
+    });
+})

public/templates/header.html

@@ -4,9 +4,26 @@
     <title>Websurfx</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="static/colorschemes/{{colorscheme}}.css" rel="stylesheet" type="text/css" />
-    <link href="static/themes/{{theme}}.css" rel="stylesheet" type="text/css" />
+    <!-- <link href="static/colorschemes/{{colorscheme}}.css" rel="stylesheet" type="text/css" /> -->
+    <!-- <link href="static/themes/{{theme}}.css" rel="stylesheet" type="text/css" /> -->
   </head>
 
   <body>
     <header>{{>navbar}}</header>
+    <script>
+      const cookies = document.cookie.split(';').map(item => item.split('=')).
+        reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {});
+      // Load colorscheme and theme from cookie
+      function addCss(fileName) {
+        var head = document.head;
+        var link = document.createElement("link");
+
+        link.type = "text/css";
+        link.rel = "stylesheet";
+        link.href = fileName;
+
+        head.appendChild(link);
+        }
+        addCss('static/themes/'+ (cookies["theme"] || {{theme}}) + '.css');
+        addCss('static/colorschemes/'+ (cookies["color-sch"] || {{colorscheme}}) + '.css');
+    </script>

public/templates/settings.html

@@ -9,25 +9,37 @@
 			<span class="set-name" data-detailId="theme">Theme</span>
 		</div>
 		<div class="settings-detail">
-			<form  method="post" name="settings" onsubmit="return submitSettings();">
+			<form name="settings" onsubmit="submitSettings(); return false;">
 				<!-- Search engine settings -->
 				<div class="set-item" data-id="searchEng">
 					<h3 class="set-name">Select search engines</h3>
 					<p class="set-desc">Select the search engines from the list of engines that you want results from</p>
-					<!-- Select element -->
-					<input name="search-engine" disabled style="display: none;" required></input>
-					<div id="engines-selected" class="select-multiple-show">
-						<span>Selected Engines: </span>
-					</div>
-					<div class="custom-select" tabindex="0" data-multiple="1" data-showDivId="engines-selected" data-input="search-engine" data-placeholder="Select" takeInput>
-						<svg viewBox="0 0 24 24" width="2rem" height="2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-							<path d="M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z"></path></svg>
-						<div class="options">
-							<span data-value="ddg">Duck duck go</span>
-							<span data-value="searx">Searx</span>
+					<!-- toggle element -->
+					<input type="hidden" name="searchEng" required value="ddg,searx,">
+					<div class="searchEng" takeInput>
+						<div class="searchEng-elem">
+							<input type="checkbox" id="selectAll-eng" onclick="return selectAllHandler(this);"/>
+							<div data-isCheckbox data-input="searchEng" data-value="all">
+								<label for="selectAll-eng"></label>
+							</div>
+							<span>Select all</span>
+						</div>
+						<hr>
+						<div class="searchEng-elem">
+							<input type="checkbox" id="toggle" checked/>
+							<div data-isCheckbox data-input="searchEng" data-value="ddg">
+								<label for="toggle"></label>
+							</div>
+							<span>Duck duck go</span>
+						</div>
+						<div class="searchEng-elem">
+							<input type="checkbox" id="toggle1" checked/>
+							<div data-isCheckbox data-input="searchEng" data-value="searx">
+								<label for="toggle1"></label>
+							</div>
+							<span>Searx</span>
 						</div>
 					</div>
-					<u class="underlined-text" onclick="selectAllHandler(this)">select all</u>
 					<!-- End search select -->
 				</div>
 				<!-- End search engine setting -->
@@ -37,13 +49,16 @@
 					<h3 class="set-name">Select theme</h3>
 					<p class="set-desc">Select the theme from the available themes to be used in user interface</p>
 					<!-- Select element -->
-					<input name="theme" disabled style="display: none;" required></input>
-					<div class="custom-select" tabindex="0" data-input="theme" data-default="Select" takeInput>
+					<input type="hidden" name="theme" style="display: none;" required value="simple"></input>
+					<div class="custom-select" tabindex="0" data-input="theme" data-default="simple" takeInput
+					  data-defaultIfNone="Select">
 						<svg viewBox="0 0 24 24" width="2rem" height="2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-							<path d="M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z"></path>
+							<path d="M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 
+							  13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z">
+							</path>
 						</svg>
 						<div class="options">
-							<span data-value="simple">Simple</span>
+							<span data-value="simple" selected>simple</span>
 						</div>
 					</div>
 					<!-- End select element -->
@@ -55,13 +70,16 @@
 					<h3 class="set-name">Select Color Scheme</h3>
 					<p class="set-desc">Select the color scheme for your theme to be used in user interface</p>
 					<!-- Select element -->
-					<input name="color-sch" disabled style="display: none;" required></input>
-					<div class="custom-select" tabindex="0" data-input="color-sch" data-default="Select" takeInput>
+					<input type="hidden" name="color-sch" style="display: none;" required value="catppuccin-mocha"></input>
+					<div class="custom-select" tabindex="0" data-input="color-sch" data-default="catppuccin-mocha" takeInput
+					  data-defaultIfNone="Select">
 						<svg viewBox="0 0 24 24" width="2rem" height="2rem" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-							<path d="M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z"></path>
+							<path d="M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 
+							  13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z">
+							</path>
 						</svg>
 						<div class="options">
-							<span data-value="catppuccin-mocha">catppuccin-mocha</span>
+							<span data-value="catppuccin-mocha" selected>catppuccin-mocha</span>
 							<span data-value="dracula">dracula</span>
 							<span data-value="monokai">monokai</span>
 							<span data-value="nord">nord</span>
@@ -84,5 +102,6 @@
 		</div>
 	</div>
 </main>
+<script src="static/ui_plugins.js"></script>
 <script src="static/settings.js"></script>
 {{>footer}}