Added settings in settings page and added search link to navbar

public/static/colorschemes/catppuccin-mocha.css

@@ -2,8 +2,10 @@
   --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

@@ -0,0 +1,173 @@
+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();
+        }
+        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;
+    } else {
+        elem.removeAttribute('selected');
+        elem.querySelector('svg').remove();
+        selectDiv.childNodes[0].nodeValue = selectDiv.getAttribute('data-default');
+
+        input.value = "";
+    }
+    selectDiv.blur();
+}
+
+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;
+}
+
+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;
+        }
+        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'
+        })
+    })
+})
+
+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');
+        }
+        element.style.opacity = op;
+        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
+        op -= op * 0.1;
+    }, 50);
+}
+
+function fadeIn(element) {
+    var op = 0.1;  // initial opacity
+    element.style.display = 'block';
+    var timer = setInterval(function () {
+        if (op >= 1){
+            clearInterval(timer);
+        }
+        element.style.opacity = op;
+        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
+        op += op * 0.1;
+    }, 10);
+}

public/static/themes/simple.css

@@ -263,41 +263,212 @@ footer {
 
 /* Styles for the about page */
 
-  .about-container article{
-      font-size: 1.5rem;
-      color:var(--fg);
-      padding-bottom: 10px;
-    }
-
-  .about-container article h1{
-      color: var(--2);
-      font-size: 2.8rem;
-    }
-
-  .about-container article div{
-      padding-bottom: 15px;
-    }
-
-  .about-container a{
-    color:var(--3);
-  }
-
-  .about-container article h2{
-    color: var(--3);
-    font-size: 1.8rem;
-    padding-bottom: 10px;
-  }
-
-  .about-container p{
-    color:var(--fg);
-    font-size:  1.6rem;
-    padding-bottom: 10px;
-  }
-
-  .about-container h3{
-    font-size: 1.5rem;
-  }
-
-  .about-container {
-    width: 80%;
-  }
+.about-container article{
+  font-size: 1.5rem;
+  color:var(--fg);
+  padding-bottom: 10px;
+}
+
+.about-container article h1{
+  color: var(--2);
+  font-size: 2.8rem;
+}
+
+.about-container article div{
+  padding-bottom: 15px;
+}
+
+.about-container a{
+  color:var(--3);
+}
+
+.about-container article h2{
+  color: var(--3);
+  font-size: 1.8rem;
+  padding-bottom: 10px;
+}
+
+.about-container p{
+  color:var(--fg);
+  font-size:  1.6rem;
+  padding-bottom: 10px;
+}
+
+.about-container h3{
+  font-size: 1.5rem;
+}
+
+.about-container {
+  width: 80%;
+}
+
+.settings {
+  margin: 2rem;
+  width: 80%;
+  height: 100%;
+  color: var(--fg);
+}
+
+.settings h1 {
+  color: var(--2);
+  font-size: 2.5rem;
+}
+
+
+.settings hr {
+  border-color: var(--3);
+  margin: .3rem 0 1rem 0;
+}
+
+.settings-view {
+  display: flex; 
+  flex: 1 0 auto;
+}
+
+.settings-sidebar {
+  width: 25%;
+  height: 100%;
+}
+
+.settings-sidebar .set-name {
+  cursor: pointer;
+  font-size: 2rem;
+  display: block;
+  margin-right: .5rem;
+  margin-left: -.7rem;
+  padding: .7rem;
+  border-radius: 5px;
+  font-weight: bold;
+}
+
+.settings-sidebar .set-name:hover, .settings-sidebar .set-name.active {
+  background-color: var(--1_1);
+}
+
+.settings-detail {
+  border-left: 1.5px solid var(--3);
+  padding-left: 3rem;
+  margin-top: .7rem;
+}
+
+.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;
+}
+
+.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 {
+  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_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 .submit-btn {
+  padding: 1rem 2rem;
+  font-size: 1.5rem;
+  background: var(--3);
+  color: var(--bg);
+  border-radius: .5rem;
+  border: 1px solid transparent;
+  font-weight: bold;
+  transition: background .5s ease-in;
+  cursor: pointer;
+}
+
+.settings .submit-btn:hover {
+  border: 1px solid var(--bg);
+  background: var(--3_1);
+  box-shadow: 0px 0px 2px 2px var(--fg);
+}
+
+.settings .submit-btn:active {
+  outline: none;
+  border: 2px solid var(--bg);
+}
+
+.errTxt {
+  color: white;
+  background: red;
+  padding: .5rem;
+  border-radius: 5px;
+  font-size: 1.3rem;
+  width: max-content;
+}

public/templates/navbar.html

@@ -1,5 +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>

public/templates/settings.html

@@ -1,5 +1,88 @@
 {{>header this}}
 <main class="settings">
-  <h1>Page is under construction</h1>
+	<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  method="post" name="settings" onsubmit="return submitSettings();">
+				<!-- 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>
+						</div>
+					</div>
+					<u class="underlined-text" onclick="selectAllHandler(this)">select all</u>
+					<!-- 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 name="theme" disabled style="display: none;" required></input>
+					<div class="custom-select" tabindex="0" data-input="theme" data-default="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="simple">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 name="color-sch" disabled style="display: none;" required></input>
+					<div class="custom-select" tabindex="0" data-input="color-sch" data-default="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="catppuccin-mocha">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>
+<script src="static/settings.js"></script>
 {{>footer}}