mirror of
https://github.com/neon-mmd/websurfx.git
synced 2024-11-22 05:58:21 -05:00
This commit is contained in:
neon_arch
parent
d65958924f
commit
8e9fe4d03a
14
public/static/cookies.js
Normal file
14
public/static/cookies.js
Normal file
@ -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
|
||||||
|
)
|
||||||
@ -1,186 +1,73 @@
|
|||||||
/*
|
function toggleAllSelection() {
|
||||||
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
|
document
|
||||||
.querySelectorAll('[data-isCheckbox]:not([data-value="all"])')
|
.querySelectorAll('.engine')
|
||||||
.forEach((elem) => {
|
.forEach(
|
||||||
value += elem.getAttribute("data-value") + ",";
|
(engine_checkbox) =>
|
||||||
});
|
(engine_checkbox.checked =
|
||||||
return value;
|
document.querySelector('.select_all').checked)
|
||||||
};
|
|
||||||
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();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setActiveTab(current_tab) {
|
||||||
/*
|
|
||||||
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
|
document
|
||||||
.querySelectorAll(".searchEng-elem input[type=checkbox]")
|
.querySelectorAll('.tab')
|
||||||
.forEach((e) => {
|
.forEach((tab) => tab.classList.remove('active'))
|
||||||
e.checked = false;
|
document
|
||||||
});
|
.querySelectorAll('.btn')
|
||||||
value = value.replace(" ", "");
|
.forEach((tab) => tab.classList.remove('active'))
|
||||||
value.split(",").forEach((val) => {
|
current_tab.classList.add('active')
|
||||||
if (!val) {
|
document
|
||||||
return;
|
.querySelector(`.${current_tab.innerText.toLowerCase().replace(' ', '_')}`)
|
||||||
|
.classList.add('active')
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
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!!'
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector('.message').innerText = ''
|
||||||
|
}, 10000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getClientSettings() {
|
||||||
|
let cookie = decodeURIComponent(document.cookie)
|
||||||
|
|
||||||
|
if (cookie !== '') {
|
||||||
|
let cookie_value = decodeURIComponent(document.cookie)
|
||||||
|
.split(';')
|
||||||
|
.map((item) => item.split('='))
|
||||||
|
.reduce((acc, [_, v]) => (acc = JSON.parse(v)) && acc, {})
|
||||||
|
|
||||||
|
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();
|
|
||||||
|
|||||||
@ -302,12 +302,10 @@ footer {
|
|||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* css for settings page t */
|
.settings_container {
|
||||||
.settings {
|
display: flex;
|
||||||
margin: 2rem;
|
justify-content: space-around;
|
||||||
width: 80%;
|
width: 80dvw;
|
||||||
height: 100%;
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings h1 {
|
.settings h1 {
|
||||||
@ -315,268 +313,187 @@ footer {
|
|||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.settings hr {
|
.settings hr {
|
||||||
border-color: var(--3);
|
border-color: var(--3);
|
||||||
margin: .3rem 0 1rem 0;
|
margin: 0.3rem 0 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-view {
|
.settings_container .sidebar {
|
||||||
display: flex;
|
width: 30%;
|
||||||
flex: 1 0 auto;
|
|
||||||
margin: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-sidebar {
|
|
||||||
width: 25%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-sidebar .set-name {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
display: block;
|
display: flex;
|
||||||
margin-right: .5rem;
|
flex-direction: column;
|
||||||
margin-left: -.7rem;
|
margin-right: 0.5rem;
|
||||||
padding: .7rem;
|
margin-left: -0.7rem;
|
||||||
|
padding: 0.7rem;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-weight: bold;
|
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 {
|
.settings_container .sidebar .btn {
|
||||||
background-color: rgba(255, 255, 255, 0.15);
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-detail {
|
.settings_container .sidebar .btn.active {
|
||||||
|
background-color: var(--2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .main_container {
|
||||||
|
width: 70%;
|
||||||
border-left: 1.5px solid var(--3);
|
border-left: 1.5px solid var(--3);
|
||||||
padding-left: 3rem;
|
padding-left: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-detail .set-item {
|
.settings_container .tab {
|
||||||
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;
|
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 {
|
.settings_container .tab.active {
|
||||||
display: block;
|
display: flex;
|
||||||
padding: 1rem;
|
flex-direction: column;
|
||||||
width: 100%;
|
justify-content: space-around;
|
||||||
border-radius: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.options span:hover {
|
.settings_container button {
|
||||||
background-color: var(--1);
|
margin-top: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
padding: 1rem 2rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
background: var(--3);
|
background: var(--3);
|
||||||
color: var(--bg);
|
color: var(--bg);
|
||||||
border-radius: .5rem;
|
border-radius: 0.5rem;
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
transition: all .1s ease-out;
|
transition: all 0.1s ease-out;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 5px 5px;
|
box-shadow: 5px 5px;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings .submit-btn:active {
|
.settings_container button:active {
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
translate: 5px 5px;
|
translate: 5px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Css for error text */
|
.settings_container .main_container .message {
|
||||||
|
|
||||||
.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;
|
font-size: 1.5rem;
|
||||||
margin: 1rem 0;
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .tab h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--4);
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .tab .description {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .user_interface option:hover {
|
||||||
|
background-color: var(--1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .engines hr {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The switch - the box around the slider */
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 6rem;
|
||||||
|
height: 3.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide default HTML checkbox */
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The slider */
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--bg);
|
||||||
|
-webkit-transition: 0.4s;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
height: 2.6rem;
|
||||||
|
width: 2.6rem;
|
||||||
|
left: 0.4rem;
|
||||||
|
bottom: 0.4rem;
|
||||||
|
background-color: var(--fg);
|
||||||
|
-webkit-transition: 0.4s;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: var(--3);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
box-shadow: 0 0 1px var(--3);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
-webkit-transform: translateX(2.6rem);
|
||||||
|
-ms-transform: translateX(2.6rem);
|
||||||
|
transform: translateX(2.6rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rounded sliders */
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 3.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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') + ',';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
5
public/templates/cookies_tab.html
Normal file
5
public/templates/cookies_tab.html
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<div class="cookies tab">
|
||||||
|
<h1>Cookies</h1>
|
||||||
|
<p class="description"></p>
|
||||||
|
<input type="text" name="cookie_field" value="" readonly />
|
||||||
|
</div>
|
||||||
31
public/templates/engines_tab.html
Normal file
31
public/templates/engines_tab.html
Normal file
@ -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>
|
||||||
@ -10,6 +10,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="static/settings.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
4
public/templates/general_tab.html
Normal file
4
public/templates/general_tab.html
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<div class="general tab active">
|
||||||
|
<h1>General</h1>
|
||||||
|
<p class="description">Coming soon!!</p>
|
||||||
|
</div>
|
||||||
@ -1,29 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Websurfx</title>
|
<title>Websurfx</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<!-- <link href="static/colorschemes/{{colorscheme}}.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" /> -->
|
<link href="static/themes/{{theme}}.css" rel="stylesheet" type="text/css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body onload="getClientSettings()">
|
||||||
<header>{{>navbar}}</header>
|
<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>
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/">search</a></li>
|
|
||||||
<li><a href="about">about</a></li>
|
<li><a href="about">about</a></li>
|
||||||
<li><a href="settings">settings</a></li>
|
<li><a href="settings">settings</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@ -1,107 +1,22 @@
|
|||||||
{{>header this}}
|
{{>header this}}
|
||||||
<main class="settings" >
|
<main class="settings" >
|
||||||
<h1>Settings</h1>
|
<h1>Settings</h1>
|
||||||
<hr>
|
<hr />
|
||||||
<div class="settings-view">
|
<div class="settings_container">
|
||||||
<div class="settings-sidebar">
|
<div class="sidebar">
|
||||||
<span class="set-name active" data-detailId="all">All</span>
|
<div class="btn active" onclick="setActiveTab(this)">general</div>
|
||||||
<span class="set-name" data-detailId="searchEng">Search Engine</span>
|
<div class="btn" onclick="setActiveTab(this)">user interface</div>
|
||||||
<span class="set-name" data-detailId="theme">Theme</span>
|
<div class="btn" onclick="setActiveTab(this)">engines</div>
|
||||||
|
<div class="btn" onclick="setActiveTab(this)">cookies</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-detail">
|
<div class="main_container">
|
||||||
<form name="settings" onsubmit="submitSettings(); return false;">
|
{{> general_tab}} {{> user_interface_tab}} {{> engines_tab}} {{>
|
||||||
<!-- Search engine settings -->
|
cookies_tab}}
|
||||||
<div class="set-item" data-id="searchEng">
|
<p class="message"></p>
|
||||||
<h3 class="set-name">Select search engines</h3>
|
<button type="submit" onclick="setClientSettings()">Save</button>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script src="static/ui_plugins.js"></script>
|
|
||||||
<script src="static/settings.js"></script>
|
<script src="static/settings.js"></script>
|
||||||
|
<script src="static/cookies.js"></script>
|
||||||
{{>footer}}
|
{{>footer}}
|
||||||
|
|||||||
27
public/templates/user_interface_tab.html
Normal file
27
public/templates/user_interface_tab.html
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user