88537769f6
## Summary * **What is the goal of this PR?** (e.g., Implements the new feature for file uploading.) Implement automatic dark theme on server files. Instead of a big change proposed in https://github.com/crosspoint-reader/crosspoint-reader/pull/837, this PR introduces a simple implementation of light/dark themes. * **What changes are included?** - Choose `#6e9a82` as accent color (taken from ) - Implement a very basic media query for dark themes (`@media (prefers-color-scheme: dark)`) - Update style using CSS variables ## Additional Context * Add any other information that might be helpful for the reviewer (e.g., performance implications, potential risks, specific areas to focus on). We can think of it as a incremental enhancement, this is the first phase of a series of PRs (hopefully). Next steps/Phases: 1. Light/Dark themes (this PR) 2. Load external CSS file to avoid duplication 3. HTML enhancement (for example, use dialog element instead of divs) 4. Use SVG instead of emojis 5. Use Vite + Typescript to improve DX and have better minification --- ### AI Usage While CrossPoint doesn't have restrictions on AI tools in contributing, please be transparent about their usage as it helps set the right context for reviewers. Did you use AI tools to help write this code? _**< YES | PARTIALLY | NO >**_ --------- Co-authored-by: carlosbonadeo <carlosbonadeo@skyscanner.net>
441 lines
11 KiB
HTML
441 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>CrossPoint Reader - Settings</title>
|
|
<style>
|
|
:root {
|
|
--font-color: #333;
|
|
--bg: #f5f5f5;
|
|
--title-color: #2c3e50;
|
|
--card-bg: #FFF;
|
|
--label-color: #7f8c8d;
|
|
--border-color: #eee;
|
|
--accent-color: rgb(110, 154, 130);
|
|
--accent-hover-color: #5a8c73;
|
|
--toggle-bg: #ccc;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--font-color: #f5f5f5;
|
|
--bg: #333;
|
|
--title-color: #ecf0f1;
|
|
--card-bg: #444;
|
|
--label-color: #bdc3c7;
|
|
--border-color: #555;
|
|
--toggle-bg: #666;
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen, Ubuntu, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: var(--bg);
|
|
color: var(--font-color);
|
|
}
|
|
h1 {
|
|
color: var(--title-color);
|
|
border-bottom: 2px solid var(--accent-color);
|
|
padding-bottom: 10px;
|
|
}
|
|
h2 {
|
|
color: var(--title-color);
|
|
margin-top: 0;
|
|
}
|
|
.card {
|
|
background: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.nav-links {
|
|
margin: 20px 0;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.nav-links a {
|
|
padding: 10px 20px;
|
|
color: var(--font-color);
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
}
|
|
.nav-links a.active {
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
}
|
|
.nav-links a:not(.active):hover {
|
|
background-color: var(--accent-hover-color);
|
|
color: white;
|
|
}
|
|
.setting-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.setting-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.setting-name {
|
|
font-weight: 500;
|
|
color: var(--label-color);
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-right: 12px;
|
|
}
|
|
.setting-control {
|
|
flex-shrink: 0;
|
|
}
|
|
.setting-control select,
|
|
.setting-control input[type="number"],
|
|
.setting-control input[type="text"],
|
|
.setting-control input[type="password"] {
|
|
padding: 6px 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 0.95em;
|
|
background: var(--card-bg);
|
|
}
|
|
.setting-control select {
|
|
min-width: 160px;
|
|
}
|
|
.setting-control input[type="text"],
|
|
.setting-control input[type="password"] {
|
|
width: 220px;
|
|
}
|
|
.setting-control input[type="number"] {
|
|
width: 80px;
|
|
}
|
|
/* Toggle switch */
|
|
.toggle-switch {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 48px;
|
|
height: 26px;
|
|
}
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.toggle-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: var(--toggle-bg);
|
|
border-radius: 26px;
|
|
transition: 0.3s;
|
|
}
|
|
.toggle-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
transition: 0.3s;
|
|
}
|
|
.toggle-switch input:checked + .toggle-slider {
|
|
background-color: var(--accent-color);
|
|
}
|
|
.toggle-switch input:checked + .toggle-slider:before {
|
|
transform: translateX(22px);
|
|
}
|
|
.save-container {
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
.save-btn {
|
|
background-color: #27ae60;
|
|
color: white;
|
|
padding: 12px 40px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
}
|
|
.save-btn:hover {
|
|
background-color: #219a52;
|
|
}
|
|
.save-btn:disabled {
|
|
background-color: #95a5a6;
|
|
cursor: not-allowed;
|
|
}
|
|
.message {
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
margin: 15px 0;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
.message.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.message.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.loader-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 20px 0;
|
|
}
|
|
.loader {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 5px solid #AAA;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
animation: rotation 1s linear infinite;
|
|
}
|
|
@keyframes rotation {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@media (max-width: 600px) {
|
|
body {
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
}
|
|
.card {
|
|
padding: 12px;
|
|
margin: 10px 0;
|
|
}
|
|
h1 {
|
|
font-size: 1.3em;
|
|
}
|
|
.nav-links a {
|
|
padding: 8px 12px;
|
|
font-size: 0.9em;
|
|
}
|
|
.setting-row {
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.setting-control select,
|
|
.setting-control input[type="text"],
|
|
.setting-control input[type="password"] {
|
|
min-width: 0;
|
|
width: unset;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>⚙️ Settings</h1>
|
|
|
|
<div class="nav-links">
|
|
<a href="/">Home</a>
|
|
<a href="/files">File Manager</a>
|
|
<a href="/settings" class="active">Settings</a>
|
|
</div>
|
|
|
|
<div id="message" class="message"></div>
|
|
|
|
<div id="settings-container">
|
|
<div class="loader-container">
|
|
<span class="loader"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="save-container" id="save-container" style="display:none;">
|
|
<button class="save-btn" id="saveBtn" onclick="saveSettings()">Save Settings</button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<p style="text-align: center; color: #95a5a6; margin: 0;">
|
|
CrossPoint E-Reader • Open Source
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
let allSettings = [];
|
|
let originalValues = {};
|
|
|
|
function escapeHtml(unsafe) {
|
|
return unsafe
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
}
|
|
|
|
function showMessage(text, isError) {
|
|
const msg = document.getElementById('message');
|
|
msg.textContent = text;
|
|
msg.className = 'message ' + (isError ? 'error' : 'success');
|
|
msg.style.display = 'block';
|
|
setTimeout(function() { msg.style.display = 'none'; }, 4000);
|
|
}
|
|
|
|
function renderControl(setting) {
|
|
const id = 'setting-' + setting.key;
|
|
|
|
if (setting.type === 'toggle') {
|
|
const checked = setting.value ? 'checked' : '';
|
|
return '<label class="toggle-switch">' +
|
|
'<input type="checkbox" id="' + id + '" ' + checked + ' onchange="markChanged()">' +
|
|
'<span class="toggle-slider"></span></label>';
|
|
}
|
|
|
|
if (setting.type === 'enum') {
|
|
let html = '<select id="' + id + '" onchange="markChanged()">';
|
|
setting.options.forEach(function(opt, idx) {
|
|
const selected = idx === setting.value ? ' selected' : '';
|
|
html += '<option value="' + idx + '"' + selected + '>' + escapeHtml(opt) + '</option>';
|
|
});
|
|
html += '</select>';
|
|
return html;
|
|
}
|
|
|
|
if (setting.type === 'value') {
|
|
return '<input type="number" id="' + id + '" value="' + setting.value + '"' +
|
|
' min="' + setting.min + '" max="' + setting.max + '" step="' + setting.step + '"' +
|
|
' onchange="markChanged()">';
|
|
}
|
|
|
|
if (setting.type === 'string') {
|
|
const inputType = setting.name.toLowerCase().includes('password') ? 'password' : 'text';
|
|
const val = setting.value || '';
|
|
return '<input type="' + inputType + '" id="' + id + '" value="' + escapeHtml(val) + '"' +
|
|
' oninput="markChanged()">';
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
function getValue(setting) {
|
|
const el = document.getElementById('setting-' + setting.key);
|
|
if (!el) return undefined;
|
|
|
|
if (setting.type === 'toggle') {
|
|
return el.checked ? 1 : 0;
|
|
}
|
|
if (setting.type === 'enum') {
|
|
return parseInt(el.value, 10);
|
|
}
|
|
if (setting.type === 'value') {
|
|
return parseInt(el.value, 10);
|
|
}
|
|
if (setting.type === 'string') {
|
|
return el.value;
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
function markChanged() {
|
|
document.getElementById('saveBtn').disabled = false;
|
|
}
|
|
|
|
async function loadSettings() {
|
|
try {
|
|
const response = await fetch('/api/settings');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load settings: ' + response.status);
|
|
}
|
|
allSettings = await response.json();
|
|
|
|
// Store original values
|
|
originalValues = {};
|
|
allSettings.forEach(function(s) {
|
|
originalValues[s.key] = s.value;
|
|
});
|
|
|
|
// Group by category
|
|
const groups = {};
|
|
allSettings.forEach(function(s) {
|
|
if (!groups[s.category]) groups[s.category] = [];
|
|
groups[s.category].push(s);
|
|
});
|
|
|
|
const container = document.getElementById('settings-container');
|
|
let html = '';
|
|
|
|
for (const category in groups) {
|
|
html += '<div class="card"><h2>' + escapeHtml(category) + '</h2>';
|
|
groups[category].forEach(function(s) {
|
|
html += '<div class="setting-row">' +
|
|
'<span class="setting-name">' + escapeHtml(s.name) + '</span>' +
|
|
'<span class="setting-control">' + renderControl(s) + '</span>' +
|
|
'</div>';
|
|
});
|
|
html += '</div>';
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
document.getElementById('save-container').style.display = '';
|
|
document.getElementById('saveBtn').disabled = true;
|
|
} catch (e) {
|
|
console.error(e);
|
|
document.getElementById('settings-container').innerHTML =
|
|
'<div class="card"><p style="text-align:center;color:#e74c3c;">Failed to load settings</p></div>';
|
|
}
|
|
}
|
|
|
|
async function saveSettings() {
|
|
const btn = document.getElementById('saveBtn');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Saving...';
|
|
|
|
// Collect only changed values
|
|
const changes = {};
|
|
allSettings.forEach(function(s) {
|
|
const current = getValue(s);
|
|
if (current !== undefined && current !== originalValues[s.key]) {
|
|
changes[s.key] = current;
|
|
}
|
|
});
|
|
|
|
if (Object.keys(changes).length === 0) {
|
|
showMessage('No changes to save.', false);
|
|
btn.textContent = 'Save Settings';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(changes)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const text = await response.text();
|
|
throw new Error(text || 'Save failed');
|
|
}
|
|
|
|
// Update original values to new values
|
|
for (const key in changes) {
|
|
originalValues[key] = changes[key];
|
|
}
|
|
|
|
showMessage('Settings saved successfully!', false);
|
|
} catch (e) {
|
|
console.error(e);
|
|
showMessage('Error: ' + e.message, true);
|
|
}
|
|
|
|
btn.textContent = 'Save Settings';
|
|
}
|
|
|
|
loadSettings();
|
|
</script>
|
|
</body>
|
|
</html>
|