alamin/websurfx
alamin/websurfx
0
0
Fork 0
mirror of https://github.com/neon-mmd/websurfx.git synced 2024-12-22 12:28:21 -05:00
Code Issues Releases Activity

Provide settings page with full functionality.

Browse Source
This commit is contained in:
Sam sunder 2023-06-03 12:56:42 +05:30
parent 1e7f646260
commit c6e833c235
6 changed files with 378 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/static/colorschemes/catppuccin-mocha.css
View File

@ -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;

229
public/static/settings.js
View File

@ -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();
}
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());
}
// UI: Method for selecting all search engines
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);
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 = '';
}
return false;
span.innerText = prevStateSelectAll ? 'Deselect all' : 'Select all';
}
// 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();

136
public/static/themes/simple.css
View File

@ -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"]

110
public/static/ui_plugins.js Normal file
View File

@ -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') + ',';
}
});
})

21
public/templates/header.html
View File

@ -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>

61
public/templates/settings.html
View File

@ -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}}