2024-08-13 14:38:02 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2024-08-28 19:31:27 +00:00
{{ if .IsThemeDark }}
< meta name = "darkreader-lock" >
{{ end }}
2024-08-13 14:38:02 +00:00
< title > Search with Ocásek< / title >
< link rel = "stylesheet" href = "/static/css/style.css" >
< link rel = "stylesheet" href = "/static/css/{{.Theme}}.css" >
< link rel = "search" type = "application/opensearchdescription+xml" title = "Ocásek" href = "/opensearch.xml" >
< / head >
< body >
2024-08-21 20:36:45 +00:00
< script defer src = "/static/js/autocomplete.js" > < / script >
2024-08-13 14:38:02 +00:00
< script >
document.addEventListener('DOMContentLoaded', function () {
// Define the updateSettings function first
function updateSettings(settingKey, settingValue) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/updateSettings', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
if (this.status >= 200 & & this.status < 300 ) {
console.log('Settings updated successfully!');
} else {
console.log('Failed to update settings.');
}
};
xhr.send(encodeURI(settingKey + '=' + settingValue));
}
const settingsIcon = document.querySelector('.settings-icon-link-search');
const searchMenu = document.querySelector('.search-menu');
settingsIcon.addEventListener('click', function () {
searchMenu.classList.toggle('settings-menu-hidden');
searchMenu.classList.toggle('settings-menu-visible');
});
// Theme change event listeners
document.getElementById('dark_theme').addEventListener('click', function () {
window.location.href = '/search?theme=dark';
});
document.getElementById('light_theme').addEventListener('click', function () {
window.location.href = '/search?theme=light';
});
// Event listener for Safe Search Selection
document.getElementById('safeSearchSelect').addEventListener('change', function () {
updateSettings('safe', this.value);
});
// Event listener for Language Selection
document.getElementById('languageSelect').addEventListener('change', function () {
updateSettings('lang', this.value);
});
});
< / script >
< div class = "settings-search-div settings-search-div-search" >
< button class = "material-icons-round clickable settings-icon-link settings-icon-link-search" > menu< / button >
< / div >
< div class = "search-menu settings-menu-hidden" >
< h2 > Settings< / h2 >
< div class = "settings-content" >
2024-08-15 11:31:15 +00:00
< button id = "settingsButton" onclick = "window.location.href='/settings'" > All settings< / button > <!-- Well its unessesary to use js here but this menu will not work without js anyway -->
2024-08-13 14:38:02 +00:00
< div class = "theme-settings" >
< p > < span class = "highlight" > Current theme: < / span > < span id = "theme_name" > {{.Theme}}< / span > < / p >
< div class = "themes-settings-menu" >
< div > < img class = "view-image-search clickable" id = "dark_theme" alt = "Dark Theme" src = "/static/images/dark.webp" > < / div >
< div > < img class = "view-image-search clickable" id = "light_theme" alt = "Light Theme" src = "/static/images/light.webp" > < / div >
< / div >
< / div >
< select class = "lang" name = "safe" id = "safeSearchSelect" >
< option value = "disabled" { { if eq . Safe " disabled " } } selected { { end } } > Safe Search Off< / option >
< option value = "active" { { if eq . Safe " active " } } selected { { end } } > Safe Search On< / option >
< / select >
< select class = "lang" name = "lang" id = "languageSelect" >
{{range .LanguageOptions}}
< option value = "{{.Code}}" { { if eq . Code $ . CurrentLang } } selected { { end } } > {{.Name}}< / option >
{{end}}
< / select >
< / div >
< / div >
< form action = "/search" class = "search-container" method = "post" autocomplete = "off" >
< h1 > Ocásek< / h1 >
< div class = "wrapper" >
< input type = "text" name = "q" autofocus id = "search-input" placeholder = "Type to search..." / >
< button id = "search-wrapper-ico" class = "material-icons-round" name = "t" value = "text" type = "submit" > search< / button >
2024-08-21 20:36:45 +00:00
< div class = "autocomplete" >
< ul >
< / ul >
< / div >
2024-08-13 14:38:02 +00:00
<!-- <a id="clearSearch" class="material - icons - round">close</a> -->
< / div >
< div class = "search-button-wrapper" >
< input type = "hidden" name = "p" value = "1" >
< button name = "t" value = "text" type = "submit" > Search Text< / button >
< button name = "t" value = "image" type = "submit" > Search Images< / button >
< / div >
< / form >
< / body >
< / html >
