joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/templates/settings/home.html

Browse Source
This commit is contained in:
Joshua Laymon 2025-09-06 03:39:08 +00:00
parent 6917a47604
commit d3dcf1da44
1 changed files with 200 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
web/templates/settings/home.html
View File

@ -1,14 +1,19 @@
{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}
{% load static %}
{# Leave body_class empty so Classic gradient is controlled by base.html logic #}
{% block body_class %}{% endblock %}
{% block content %}
<div class="container">
<h1 class="page-title">Settings</h1>
<!-- Blank Settings box -->
<!-- Intro / placeholder -->
<div class="card" style="padding:20px; margin-bottom:20px;">
<p class="muted small">Add your settings here when you’re ready.</p>
</div>
<!-- Privacy: Clear History -->
<div class="card" style="margin-top:18px; padding:20px;">
<h2 class="page-title">Privacy · Clear My History</h2>
<p class="muted" style="margin:-6px 0 12px;">
@ -17,63 +22,15 @@
<button id="clear-history-btn" class="btn btn-danger">Clear History</button>
</div>
<!-- toast -->
<div id="toast-clear-history"
style="position:fixed; right:16px; bottom:16px; padding:10px 14px; border-radius:10px;
background:#111827; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.25);
opacity:0; pointer-events:none; transition:opacity .25s;">
History cleared.
</div>
<script>
(function(){
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
}
var btn = document.getElementById("clear-history-btn");
var toast = document.getElementById("toast-clear-history");
if (!btn) return;
btn.addEventListener("click", function(){
fetch("{% url 'clear_history' %}", {
method: "POST",
headers: { "X-CSRFToken": getCookie("csrftoken") }
})
.then(function(r){ return r.ok ? r.json() : Promise.reject(); })
.then(function(data){
// Clear likely client-side copies too (harmless if not present)
var keys = ["recent_searches","recent_entries","recent_viewed","recently_viewed","recent_results","recentSearches","recentEntries"];
try {
keys.forEach(function(k){ localStorage.removeItem(k); sessionStorage.removeItem(k); });
} catch(e) {}
// Clear same-named cookies if any
try {
var expire = "expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
keys.forEach(function(k){ document.cookie = k + "=; " + expire; });
} catch(e) {}
// Toast
if (toast){
toast.textContent = "History cleared.";
toast.style.opacity = "1";
setTimeout(function(){ toast.style.opacity = "0"; }, 1500);
}
// Optional: log which server keys were removed
if (data && data.cleared) { console.log("Cleared server keys:", data.cleared); }
})
.catch(function(){ /* silent per spec */ });
});
})();
</script>
<!-- Your future settings content goes here -->
<div class="card" style="padding:20px; margin-bottom:20px;">
<form method="post" action="{% url 'set_theme' %}">
<!-- Theme chooser -->
<div class="card" style="padding:20px; margin-top:18px;">
<h2 class="page-title">Appearance · Theme</h2>
<form method="post" action="{% url 'set_theme' %}" style="margin-top:10px;">
{% csrf_token %}
<label for="theme">Theme</label>
<label for="theme" class="small muted" style="display:block; margin-bottom:6px;">Choose site theme</label>
<select id="theme" name="theme" class="form-control" style="max-width: 320px;">
{% for t in available_themes %}
<option value="{{ t }}" {% if request.session.theme|default:'midnight' == t %}selected{% endif %}>
<option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}>
{{ t|capfirst }}
</option>
{% endfor %}
@ -81,31 +38,22 @@
<button class="btn btn-primary" style="margin-top:10px;">Save</button>
<small class="text-muted" style="display:block;margin-top:6px;">Changes apply immediately across the site.</small>
</form>
</div>
<script>
/* Optional live preview without saving */
document.getElementById('theme').addEventListener('change', function(e){
const name = e.target.value;
document.getElementById('theme-css').href = '{% static "themes/" %}' + name + '.css';
try { localStorage.setItem('theme', name); } catch(e){}
});
</script>
<div class="card" style="padding:20px; margin-bottom:20px;">
<label style="display:flex;gap:10px;align-items:center;">
<!-- Highlight search hits -->
<div class="card" style="padding:20px; margin-top:18px;">
<h2 class="page-title">Reading · Highlight Search Hits</h2>
<label style="display:flex;gap:10px;align-items:center; margin-top:8px;">
<input id="highlightHitsToggle" type="checkbox">
<span>Highlight search hits on entry page</span>
</label>
<p class="small muted" style="margin-top:6px;">When on, your last search terms are lightly highlighted on result pages—but only in the fields you searched.</p>
</div>
</div>
</div>
{% if user.is_authenticated and user.is_superuser %}
<h1 class="page-title">Tools</h1>
<h1 class="page-title" style="margin-top:22px;">Tools</h1>
{% if user.is_superuser %}
<!-- Release Announcement -->
<div class="card" style="margin-top:18px; padding:20px;">
<h2 class="page-title">Release Announcement</h2>
<p class="muted" style="margin:-6px 0 12px;">
@ -117,16 +65,15 @@ document.getElementById('theme').addEventListener('change', function(e){
{% if announcement_form %}
{{ announcement_form.as_p }}
{% else %}
{# If this page isn't rendered via announcement_tools view, render a fresh form #}
<label>Title (optional)</label>
<label class="small muted" style="display:block; margin-bottom:4px;">Title (optional)</label>
<input type="text" name="title" class="tool-input">
<label>Message</label>
<label class="small muted" style="display:block; margin:10px 0 4px;">Message</label>
<textarea name="message" rows="6" class="tool-input" placeholder="What’s new in this release…"></textarea>
<label style="display:flex; gap:6px; align-items:center; margin-top:8px;">
<input type="checkbox" name="is_active" checked> Active
</label>
{% endif %}
<button class="btn btn-primary">Publish</button>
@ -155,9 +102,8 @@ document.getElementById('theme').addEventListener('change', function(e){
</table>
{% endif %}
</div>
{% endif %}
{% if user.is_superuser %}
<!-- Security tools -->
<div class="card" style="margin-top:18px; padding:20px;">
<h2 class="page-title">Security · Login Attempts (7 days)</h2>
<p class="muted" style="margin:-6px 0 12px;">
@ -172,67 +118,97 @@ document.getElementById('theme').addEventListener('change', function(e){
<a class="btn btn-secondary" href="{% url 'audit_log' %}">Open Audit Log</a>
</div>
{% endif %}
</div>
<!-- Toast for Clear History -->
<div id="toast-clear-history"
style="position:fixed; right:16px; bottom:16px; padding:10px 14px; border-radius:10px;
background:#111827; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.25);
opacity:0; pointer-events:none; transition:opacity .25s;">
History cleared.
</div>
<style>
.tool-block { margin-bottom:16px; }
.tool-block h3 {
margin:0 0 6px;
font-size:18px;
color:#0f172a;
}
.tool-actions {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:8px;
}
.tool-input {
border:1px solid var(--border, #d1d5db);
border-radius:8px;
padding:6px 8px;
font-size:14px;
margin-right:6px;
}
.tool-sep {
border:none;
border-top:1px solid var(--border, #e5e7eb);
margin:18px 0;
width:100%;
max-width:640px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const toggle = document.getElementById("darkToggle");
if (!toggle) return;
toggle.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
});
// Restore preference on load
if (localStorage.getItem("darkMode") === "true") {
document.body.classList.add("dark-mode");
(function(){
// Simple CSRF helper
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
return "";
}
// Clear history
var btn = document.getElementById("clear-history-btn");
var toast = document.getElementById("toast-clear-history");
if (btn) {
btn.addEventListener("click", function(){
fetch("{% url 'clear_history' %}", {
method: "POST",
headers: { "X-CSRFToken": getCookie("csrftoken") }
})
.then(function(r){ return r.ok ? r.json() : Promise.reject(); })
.then(function(data){
// Clear likely client-side copies too (harmless if not present)
var keys = ["recent_searches","recent_entries","recent_viewed","recently_viewed","recent_results","recentSearches","recentEntries"];
try {
keys.forEach(function(k){
localStorage.removeItem(k);
sessionStorage.removeItem(k);
document.cookie = k + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
});
</script>
<script>
document.addEventListener("DOMContentLoaded", async () => {
} catch(e) {}
if (toast){
toast.textContent = "History cleared.";
toast.style.opacity = "1";
setTimeout(function(){ toast.style.opacity = "0"; }, 1500);
}
if (data && data.cleared) { console.log("Cleared server keys:", data.cleared); }
})
.catch(function(){ /* silent */ });
});
}
// Theme live preview (without saving)
var themeSel = document.getElementById('theme');
if (themeSel) {
themeSel.addEventListener('change', function(e){
var name = e.target.value;
var link = document.getElementById('theme-css');
if (link) link.href = '{% static "themes/" %}' + name + '.css';
try {
localStorage.setItem('theme', name);
// Toggle the classic gradient body class in case user previews Classic
if (name === 'classic') {
document.body.classList.add('themed-bg');
} else {
document.body.classList.remove('themed-bg');
}
document.documentElement.setAttribute('data-theme', name);
} catch(e){}
});
}
// Highlight search hits toggle
(async function(){
const toggle = document.getElementById("highlightHitsToggle");
if (!toggle) return;
// Load current prefs
try {
const res = await fetch("/api/get-prefs/");
const res = await fetch("{% url 'api_get_prefs' %}");
const data = await res.json();
if (data && typeof data.highlight_search_hits !== "undefined") {
toggle.checked = !!data.highlight_search_hits;
@ -244,18 +220,16 @@ document.addEventListener("DOMContentLoaded", async () => {
const form = new FormData();
form.append("enabled", toggle.checked ? "true" : "false");
try {
await fetch("/api/set-highlight-hits/", { method: "POST", body: form, headers: { "X-CSRFToken": getCookie("csrftoken") }});
await fetch("{% url 'api_set_highlight_hits' %}", {
method: "POST",
body: form,
headers: { "X-CSRFToken": getCookie("csrftoken") }
});
} catch (e) {
alert("Could not save the setting. Please try again.");
}
});
// Standard Django CSRF helper
function getCookie(name) {
const m = document.cookie.match("(^|;)\\s*" + name + "\\s*=\\s*([^;]+)");
return m ? m.pop() : "";
}
});
})();
})();
</script>
{% endblock %}