Merge pull request #88 from sam-sunder/rolling

public/static/settings.js

@@ -0,0 +1,186 @@
+/* 
+    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";
+}
+
+/* 
+    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
+
+    - 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;
+    }
+    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";
+      });
+  });
+});
+
+
+/*
+    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();
+}
+
+
+/*
+    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 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;
+        }
+        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,41 +263,320 @@ 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%;
+}
+
+/* css for settings page t */
+.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;
+  margin: 1.5rem 0;
+}
+
+.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;
+  margin-bottom: .5rem;
+}
+
+.settings-sidebar .set-name:hover, .settings-sidebar .set-name.active {
+  background-color: rgba(255, 255, 255, 0.15);
+
+}
+
+.settings-detail {
+  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 {
+  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 .submit-btn {
+  padding: 1rem 2rem;
+  font-size: 1.5rem;
+  background: var(--3);
+  color: var(--bg);
+  border-radius: .5rem;
+  border: 2px solid transparent;
+  font-weight: bold;
+  transition: all .1s ease-out;
+  cursor: pointer;
+  box-shadow: 5px 5px;
+}
+
+.settings .submit-btn:active {
+  outline: none;
+  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;
+}
+
+/* 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;
+}

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/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,107 @@
 {{>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 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>
+<script src="static/ui_plugins.js"></script>
+<script src="static/settings.js"></script>
 {{>footer}}