✨ feat: Reducing the amount of js used and improving code functionality (#36) (#37)

public/static/cookies.js

@@ -0,0 +1,14 @@
+// After the settings page finishes loading 
+document.addEventListener(
+  'DOMContentLoaded',
+  () => {
+    let cookie = decodeURIComponent(document.cookie)
+    if (cookie !== '') {
+      document.querySelector('.cookies input').value = cookie
+    } else {
+      document.querySelector('.cookies input').value =
+        'No cookies has been saved on your system'
+    }
+  },
+  false
+)

public/static/settings.js

@@ -1,186 +1,73 @@
-/* 
-    UI: Method for selecting all search engines
-    
-    This function is called when user click on
-    `select all` and `deselect all` toogle element.
-    
-    - If select all is pressed toggle all options and insert all value
-      joined with comma to input which is saved in cookie.
-      then changes text to `deselect all`.
-      eg value: 'ddg,searx,'
-
-    - If deselect all is pressed uncheck all options and insert empty
-      value to input which is saved in cookie.
-*/
-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;
-    }
-  });
-  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 {
-    mainInput.value = "";
-  }
-  span.innerText = prevStateSelectAll ? "Deselect all" : "Select all";
+function toggleAllSelection() {
+  document
+    .querySelectorAll('.engine')
+    .forEach(
+      (engine_checkbox) =>
+        (engine_checkbox.checked =
+          document.querySelector('.select_all').checked)
+    )
 }
 
-/* 
-    UI: Filter settings as per category
-    
-    There are two elements one is `category` and `detail`.
-    Category contains `data-id` when a user click it
-    we need to show detail element having 
-    `data-detailId` whose value is same as `data-id`.
-    
-    When a user clicks on a category on sidebar, view
-    settings containing `data-id` of sidebar element's `data-detailId`
-    and hide other settings
+function setActiveTab(current_tab) {
+  document
+    .querySelectorAll('.tab')
+    .forEach((tab) => tab.classList.remove('active'))
+  document
+    .querySelectorAll('.btn')
+    .forEach((tab) => tab.classList.remove('active'))
+  current_tab.classList.add('active')
+  document
+    .querySelector(`.${current_tab.innerText.toLowerCase().replace(' ', '_')}`)
+    .classList.add('active')
+}
 
-    - if `all` is clicked then show all settings.
-*/
-document.querySelectorAll(".settings-sidebar .set-name").forEach((filter) => {
-  let target = filter.getAttribute("data-detailId");
-  filter.addEventListener("click", () => {
-    try {
-      document.querySelector(".set-name.active").classList.remove("active");
-    } catch (e) {}
-    filter.classList.add("active");
-    if (target == "all") {
-      document.querySelectorAll(".set-item").forEach((elem) => {
-        elem.style.display = "block";
-      });
-      return;
+function setClientSettings() {
+  let cookie_dictionary = new Object()
+  document.querySelectorAll('select').forEach((select_tag) => {
+    if (select_tag.name === 'themes') {
+      cookie_dictionary['theme'] = select_tag.value
+    } else if (select_tag.name === 'colorschemes') {
+      cookie_dictionary['colorscheme'] = select_tag.value
     }
-    document
-      .querySelectorAll('.set-item[data-id="' + target + '"]')
-      .forEach((elem) => {
-        elem.style.display = "block";
-      });
-    document
-      .querySelectorAll('.set-item:not([data-id="' + target + '"])')
-      .forEach((elem) => {
-        elem.style.display = "none";
-      });
-  });
-});
+  })
+  let engines = []
+  document.querySelectorAll('.engine').forEach((engine_checkbox) => {
+    if (engine_checkbox.checked === true) {
+      engines.push(engine_checkbox.parentNode.parentNode.innerText.trim())
+    }
+  })
+  cookie_dictionary['engines'] = engines
+  let expiration_date = new Date()
+  expiration_date.setFullYear(expiration_date.getFullYear() + 1)
+  document.cookie = `appCookie=${JSON.stringify(
+    cookie_dictionary
+  )}; expires=${expiration_date.toUTCString()}`
 
+  document.querySelector('.message').innerText =
+    '✅ The settings have been saved sucessfully!!'
 
-/*
-    This function is called when a user click on submit button
-    it validates all user inputs and saves to a cookie.
-    
-    - if input having `required` attr and is empty it generates a
-      error text and insert above the setting element
-    
-    - else store setttings to a cookie.
-*/
-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;
-    }
-  }
-  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();
+  setTimeout(() => {
+    document.querySelector('.message').innerText = ''
+  }, 10000)
 }
 
+function getClientSettings() {
+  let cookie = decodeURIComponent(document.cookie)
 
-/*
-    This function will be called on page ready.
-    it iterates over saved cookies and if cookie name is 
-    in the list of valid cookies then load it.
-
-    - if cookie is searchEng(type=toggle/checkbox) we deselect 
-      all checkboxes and select those which are stored in cookie.
+  if (cookie !== '') {
+    let cookie_value = decodeURIComponent(document.cookie)
+      .split(';')
+      .map((item) => item.split('='))
+      .reduce((acc, [_, v]) => (acc = JSON.parse(v)) && acc, {})
 
-    - if cookie is of type `select` we deselect default selected
-      option and then select option which is stored in cookie.
-*/
-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)) {
-      continue;
-    }
-    let input = document.getElementsByName(name)[0];
-    input.value = value;
-    if (name == "searchEng") {
-      // Unload all checked engines
-      document
-        .querySelectorAll(".searchEng-elem input[type=checkbox]")
-        .forEach((e) => {
-          e.checked = false;
-        });
-      value = value.replace(" ", "");
-      value.split(",").forEach((val) => {
-        if (!val) {
-          return;
+    let links = Array.from(document.querySelectorAll('link')).forEach(
+      (item) => {
+        if (item.href.includes('static/themes')) {
+          item.href = `static/themes/${cookie_value['theme']}.css`
+        } else if (item.href.includes('static/colorschemes')) {
+          item.href = `static/colorschemes/${cookie_value['colorscheme']}.css`
         }
-        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}"]`)
-      );
-    }
+      }
+    )
   }
 }
-
-// Code where settings are loaded from cookie.
-loadUserSettings();

public/static/themes/simple.css

@@ -263,38 +263,38 @@ footer {
 
 /* Styles for the about page */
 
-.about-container article{
+.about-container article {
   font-size: 1.5rem;
-  color:var(--fg);
+  color: var(--fg);
   padding-bottom: 10px;
 }
 
-.about-container article h1{
+.about-container article h1 {
   color: var(--2);
   font-size: 2.8rem;
 }
 
-.about-container article div{
+.about-container article div {
   padding-bottom: 15px;
 }
 
-.about-container a{
-  color:var(--3);
+.about-container a {
+  color: var(--3);
 }
 
-.about-container article h2{
+.about-container article h2 {
   color: var(--3);
   font-size: 1.8rem;
   padding-bottom: 10px;
 }
 
-.about-container p{
-  color:var(--fg);
-  font-size:  1.6rem;
+.about-container p {
+  color: var(--fg);
+  font-size: 1.6rem;
   padding-bottom: 10px;
 }
 
-.about-container h3{
+.about-container h3 {
   font-size: 1.5rem;
 }
 
@@ -302,12 +302,10 @@ footer {
   width: 80%;
 }
 
-/* css for settings page t */
-.settings {
-  margin: 2rem;
-  width: 80%;
-  height: 100%;
-  color: var(--fg);
+.settings_container {
+  display: flex;
+  justify-content: space-around;
+  width: 80dvw;
 }
 
 .settings h1 {
@@ -315,268 +313,187 @@ footer {
   font-size: 2.5rem;
 }
 
-
 .settings hr {
   border-color: var(--3);
-  margin: .3rem 0 1rem 0;
+  margin: 0.3rem 0 1rem 0;
 }
 
-.settings-view {
-  display: flex; 
-  flex: 1 0 auto;
-  margin: 1.5rem 0;
-}
-
-.settings-sidebar {
-  width: 25%;
-  height: 100%;
-}
-
-.settings-sidebar .set-name {
+.settings_container .sidebar {
+  width: 30%;
   cursor: pointer;
   font-size: 2rem;
-  display: block;
-  margin-right: .5rem;
-  margin-left: -.7rem;
-  padding: .7rem;
+  display: flex;
+  flex-direction: column;
+  margin-right: 0.5rem;
+  margin-left: -0.7rem;
+  padding: 0.7rem;
   border-radius: 5px;
   font-weight: bold;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
+  color: var(--fg);
+  text-transform: capitalize;
+  gap: 1.5rem;
 }
 
-.settings-sidebar .set-name:hover, .settings-sidebar .set-name.active {
-  background-color: rgba(255, 255, 255, 0.15);
+.settings_container .sidebar .btn {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
 
+.settings_container .sidebar .btn.active {
+  background-color: var(--2);
 }
 
-.settings-detail {
+.settings_container .main_container {
+  width: 70%;
   border-left: 1.5px solid var(--3);
   padding-left: 3rem;
 }
 
-.settings-detail .set-item {
-  margin: 2rem 0;
-  margin-top: 0;
-}
-
-.settings-detail .set-name {
-  font-size: 2rem;
-  font-weight: bold;
-  color: var(--4)
-}
-
-.settings-detail .set-desc {
-  font-size: 1.5rem;
-  margin-bottom: .5rem;
-}
-
-/* css for custom select */
-.custom-select, .options {
-  font-size: 1.5rem;
-  background-color: var(--bg);
-  width: 250px;
-  padding: 1rem 1.7rem;
-  border-radius: 7px;
-}
-
-.custom-select {
-  position: relative;
-  vertical-align: middle;
-  margin: .7rem 0;
-}
-
-.custom-select.invalid {
-  border: 1px solid red;
-}
-
-.custom-select svg {
-  float: right;
-}
-
-.options {
+.settings_container .tab {
   display: none;
-  position: absolute;
-  left: 0;
-  margin-top: 1.3rem;
-  width: 100%;
-  padding: .7rem 1rem;
-  cursor: pointer;
-  z-index: 3;
-  max-height: 15rem;
-  overflow-y: auto;
-}
-
-.options span {
-  display: block;
-  padding: 1rem;
-  width: 100%;
-  border-radius: 5px;
-  vertical-align: middle;
 }
 
-.options span:hover {
-  background-color: var(--1);
-}
-
-.selected-multiple-option {
-  padding: .8rem;
-  border-radius: 5px;
-  background-color: var(--bg);
-  margin: .5rem .3rem;
-}
-
-.selected-multiple-option svg {
-  width: 1.3rem;
-  height: 1.3rem;
-  vertical-align: middle;
-  margin-bottom: .5rem;
-  cursor: pointer;
-}
-
-.select-multiple-show {
-  margin: 1rem 0;
-  font-size: 1.5rem;  
-}
-
-.underlined-text {
-  font-size: 1.7rem;
-  cursor: pointer;
-  margin-bottom: .5rem;
-  display: block;
+.settings_container .tab.active {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
 }
 
-.settings .submit-btn {
+.settings_container button {
+  margin-top: 1rem;
   padding: 1rem 2rem;
   font-size: 1.5rem;
   background: var(--3);
   color: var(--bg);
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   border: 2px solid transparent;
   font-weight: bold;
-  transition: all .1s ease-out;
+  transition: all 0.1s ease-out;
   cursor: pointer;
   box-shadow: 5px 5px;
+  outline: none;
 }
 
-.settings .submit-btn:active {
-  outline: none;
+.settings_container button:active {
   box-shadow: none;
   translate: 5px 5px;
 }
 
-/* Css for error text */
-
-.errTxt {
-  color: white;
-  background: red;
-  padding: .5rem;
-  border-radius: 5px;
-  font-size: 1.3rem;
-  width: max-content;
+.settings_container .main_container .message {
+  font-size: 1.5rem;
+  color: var(--fg);
 }
 
-/* Css for toggle element */
-
-label,
-label::before,
-label::after {
-  transition: 200ms all ease-in-out 50ms;
-  box-sizing: border-box;
-  backface-visibility: hidden;
+.settings_container .tab h3 {
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--4);
+  margin-top: 1.5rem;
+  text-transform: capitalize;
 }
 
-input[type="checkbox"] {
-  display: none;
+.settings_container .tab .description {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+  color: var(--fg);
 }
 
-/*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);
+.settings_container .user_interface select {
+  margin: 0.7rem 0;
+  width: 20rem;
+  background-color: var(--bg);
+  color: var(--fg);
+  padding: 1rem 2rem;
+  border-radius: 0.5rem;
+  outline: none;
+  border: none;
+  text-transform: capitalize;
 }
 
-input[type="checkbox"]:checked ~ div[data-isCheckbox] label {
-  left: 25px;
-  transform: rotate(360deg);
+.settings_container .user_interface option:hover {
+  background-color: var(--1);
 }
 
-
-/*shared*/
-
-div[data-isCheckbox],
-label {
-  border-radius: 50px;
+.settings_container .engines .engine_selection {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem 0;
 }
 
+.settings_container .engines .toggle_btn {
+  color: var(--fg);
+  font-size: 1.5rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
 
-/*'un':checked state*/
+.settings_container .engines hr {
+  margin: 0;
+}
 
-div[data-isCheckbox] {
-  height: 25px;
-  width: 50px;
-  background: rgba(43, 43, 43, 1);
+/* The switch - the box around the slider */
+.switch {
   position: relative;
-  box-shadow: 0 0 2px rgba(43,43,43,1);
-  
+  display: inline-block;
+  width: 6rem;
+  height: 3.4rem;
 }
 
-label {
-  height: 20px;
-  width: 20px;
-  background: rgba(255, 255, 255, 1);
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  cursor: pointer;
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
-label::before {
-  content: '';
-  height: 15px;
-  width: 3px;
+/* The slider */
+.slider {
   position: absolute;
-  top: calc(50% - 8px);
-  left: calc(50% - 1.5px);
-  transform: rotate(45deg);
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--bg);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
-label::after {
-  content: '';
-  height: 3px;
-  width: 15px;
+.slider:before {
   position: absolute;
-  top: calc(50% - 2.5px);
-  left: calc(50% - 8px);
-  transform: rotate(45deg);
+  content: '';
+  height: 2.6rem;
+  width: 2.6rem;
+  left: 0.4rem;
+  bottom: 0.4rem;
+  background-color: var(--fg);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
-label::before,
-label::after{
-  background: rgba(43,43,43,1);
-  border-radius: 5px;
+input:checked + .slider {
+  background-color: var(--3);
 }
 
-/* pesduo class on toggle */
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--3);
+}
 
-input[type="checkbox"]:checked ~ div label::before{
-  height: 15px;
-  top: calc(55% - 8px);
-  left: calc(60% - 2px);
-  background: rgba(73,168,68,1);
+input:checked + .slider:before {
+  -webkit-transform: translateX(2.6rem);
+  -ms-transform: translateX(2.6rem);
+  transform: translateX(2.6rem);
 }
 
-input[type="checkbox"]:checked ~ div label::after{
-  width: 7px;
-  top: calc(95% - 7px);
-  left: calc(22.5% - 2px);
-  background: rgba(73,168,68,1);
+/* Rounded sliders */
+.slider.round {
+  border-radius: 3.4rem;
 }
 
-.searchEng-elem {
-  display: flex;
-  gap: 3rem;
-  align-items: center;
-  font-size: 1.5rem;
-  margin: 1rem 0;
+.slider.round:before {
+  border-radius: 50%;
 }

public/static/ui_plugins.js

@@ -1,110 +0,0 @@
-/*  
-    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/cookies_tab.html

@@ -0,0 +1,5 @@
+<div class="cookies tab">
+    <h1>Cookies</h1>
+    <p class="description"></p>
+    <input type="text" name="cookie_field" value="" readonly />
+</div>

public/templates/engines_tab.html

@@ -0,0 +1,31 @@
+<div class="engines tab">
+    <h3>select search engines</h3>
+    <p class="description">
+        Select the search engines from the list of engines that you want results
+        from
+    </p>
+    <div class="engine_selection">
+        <div class="toggle_btn">
+            <label class="switch">
+                <input type="checkbox" class="select_all" onchange="toggleAllSelection()" />
+                <span class="slider round"></span>
+            </label>
+            Select All
+        </div>
+        <hr />
+        <div class="toggle_btn">
+            <label class="switch">
+                <input type="checkbox" class="engine" />
+                <span class="slider round"></span>
+            </label>
+            Duckduckgo
+        </div>
+        <div class="toggle_btn">
+            <label class="switch">
+                <input type="checkbox" class="engine" />
+                <span class="slider round"></span>
+            </label>
+            Searx
+        </div>
+    </div>
+</div>

public/templates/footer.html

@@ -10,6 +10,7 @@
         </ul>
     </div>
 </footer>
+<script src="static/settings.js"></script>
 </body>
 
 </html>

public/templates/general_tab.html

@@ -0,0 +1,4 @@
+<div class="general tab active">
+    <h1>General</h1>
+    <p class="description">Coming soon!!</p>
+</div>

public/templates/header.html

@@ -1,29 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <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" /> -->
-  </head>
+    <link href="static/colorschemes/{{colorscheme}}.css" rel="stylesheet" type="text/css" />
+    <link href="static/themes/{{theme}}.css" rel="stylesheet" type="text/css" />
+</head>
 
-  <body>
+<body onload="getClientSettings()">
     <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/navbar.html

@@ -1,7 +1,6 @@
 <nav>
-  <ul>
-    <li><a href="/">search</a></li>
-    <li><a href="about">about</a></li>
-    <li><a href="settings">settings</a></li>
-  </ul>
+    <ul>
+        <li><a href="about">about</a></li>
+        <li><a href="settings">settings</a></li>
+    </ul>
 </nav>

public/templates/settings.html

@@ -1,107 +1,22 @@
 {{>header this}}
-<main class="settings">
-	<h1>Settings</h1>
-	<hr>
-	<div class="settings-view">
-		<div class="settings-sidebar">
-			<span class="set-name active" data-detailId="all">All</span>
-			<span class="set-name" data-detailId="searchEng">Search Engine</span>
-			<span class="set-name" data-detailId="theme">Theme</span>
-		</div>
-		<div class="settings-detail">
-			<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>
-					<!-- 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>
-					<!-- End search select -->
-				</div>
-				<!-- End search engine setting -->
-			
-				<!-- Theme selection settings -->
-				<div class="set-item" data-id="theme">
-					<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 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>
-						</svg>
-						<div class="options">
-							<span data-value="simple" selected>simple</span>
-						</div>
-					</div>
-					<!-- End select element -->
-				</div>
-				<!-- End theme selection select -->
-
-				<!-- Color scheme selection settings -->
-				<div class="set-item" data-id="theme">
-					<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 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>
-						</svg>
-						<div class="options">
-							<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>
-							<span data-value="oceanic-next">oceanic-next</span>
-							<span data-value="solarized-dark">solarized-dark</span>
-							<span data-value="solarized-light">solarized-light</span>
-							<span data-value="tomorrow-night">tomorrow-night</span>
-						</div>
-					</div>
-					<!-- End select element -->
-				</div>
-				<!-- End color scheme selection -->
-
-				<!-- ACTIONS -->
-				<div class="actions">
-					<input type="submit" value="Submit" class="submit-btn">
-				</div>
-				<!-- End Actions -->
-			</form>
-		</div>
-	</div>
+<main class="settings" >
+    <h1>Settings</h1>
+    <hr />
+    <div class="settings_container">
+        <div class="sidebar">
+            <div class="btn active" onclick="setActiveTab(this)">general</div>
+            <div class="btn" onclick="setActiveTab(this)">user interface</div>
+            <div class="btn" onclick="setActiveTab(this)">engines</div>
+            <div class="btn" onclick="setActiveTab(this)">cookies</div>
+        </div>
+        <div class="main_container">
+            {{> general_tab}} {{> user_interface_tab}} {{> engines_tab}} {{>
+            cookies_tab}}
+            <p class="message"></p>
+            <button type="submit" onclick="setClientSettings()">Save</button>
+        </div>
+    </div>
 </main>
-<script src="static/ui_plugins.js"></script>
 <script src="static/settings.js"></script>
+<script src="static/cookies.js"></script>
 {{>footer}}

public/templates/user_interface_tab.html

@@ -0,0 +1,27 @@
+<div class="user_interface tab">
+    <h3>select theme</h3>
+    <p class="description">
+        Select the theme from the available themes to be used in user interface
+    </p>
+    <select name="themes">
+        <option value="simple">simple</option>
+    </select>
+    <h3>select color scheme</h3>
+    <p class="description">
+        Select the color scheme for your theme to be used in user interface
+    </p>
+    <select name="colorschemes">
+        <option value="catppuccin-mocha">catppuccin mocha</option>
+        <option value="dark-chocolate">dark chocolate</option>
+        <option value="dracula">dracula</option>
+        <option value="gruvbox-dark">gruvbox dark</option>
+        <option value="monokai">monokai</option>
+        <option value="nord">nord</option>
+        <option value="oceanic-next">oceanic next</option>
+        <option value="one-dark">one dark</option>
+        <option value="solarized-dark">solarized dark</option>
+        <option value="solarized-light">solarized light</option>
+        <option value="tokyo-night">tokyo night</option>
+        <option value="tomorrow-night">tomorrow night</option>
+    </select>
+</div>