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:47:34 +00:00
parent 690b4126c7
commit e6bf0e3efa
1 changed files with 73 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static %} {% load static %}
{# Let base.html control gradients via theme #}
{% block body_class %}{% endblock %} {% block body_class %}{% endblock %}
{% block content %} {% block content %}
@ -13,39 +12,6 @@
<div class="cc-subtitle">Personalization · Privacy · Security</div> <div class="cc-subtitle">Personalization · Privacy · Security</div>
</div> </div>
<!-- Quick Controls Strip -->
<div class="cc-quick card">
<div class="qc-item">
<div class="qc-label">Theme</div>
<form method="post" action="{% url 'set_theme' %}" class="qc-inline">
{% csrf_token %}
<select id="theme" name="theme" class="qc-select">
{% for t in available_themes %}
<option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}>{{ t|capfirst }}</option>
{% endfor %}
</select>
<button class="btn btn-primary qc-btn">Save</button>
</form>
</div>
<div class="qc-divider" role="separator"></div>
<div class="qc-item">
<div class="qc-label">Highlight Hits</div>
<label class="switch">
<input id="highlightHitsToggle" type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="qc-divider" role="separator"></div>
<div class="qc-item">
<div class="qc-label">Clear History</div>
<button id="clear-history-btn" class="btn btn-danger">Clear</button>
</div>
</div>
<!-- 3-Column Grid --> <!-- 3-Column Grid -->
<div class="cc-grid"> <div class="cc-grid">
@ -57,12 +23,12 @@
</div> </div>
<div class="cc-panel-body"> <div class="cc-panel-body">
<p class="muted small">Pick a theme you like; preview applies instantly.</p> <p class="muted small">Pick a theme; preview applies instantly.</p>
<form method="post" action="{% url 'set_theme' %}" class="cc-form"> <form method="post" action="{% url 'set_theme' %}" class="cc-form" onsubmit="return saveThemeFromSelect()">
{% csrf_token %} {% csrf_token %}
<label for="theme" class="cc-label">Theme</label> <label for="theme-select" class="cc-label">Theme</label>
<select id="theme-dup" class="form-control" style="max-width:320px;"> <select id="theme-select" class="form-control" style="max-width:320px;">
{% for t in available_themes %} {% for t in available_themes %}
<option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}> <option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}>
{{ t|capfirst }} {{ t|capfirst }}
@ -70,7 +36,7 @@
{% endfor %} {% endfor %}
</select> </select>
<div class="cc-actions"> <div class="cc-actions">
<button class="btn btn-primary" onclick="return saveThemeFromDuplicate()">Save</button> <button class="btn btn-primary">Save</button>
<small class="text-muted">Applies across the site</small> <small class="text-muted">Applies across the site</small>
</div> </div>
</form> </form>
@ -95,7 +61,7 @@
<div class="cc-row"> <div class="cc-row">
<label class="cc-label">Highlight search hits</label> <label class="cc-label">Highlight search hits</label>
<label class="switch"> <label class="switch">
<input id="highlightHitsToggle-dup" type="checkbox"> <input id="highlightHitsToggle" type="checkbox">
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</div> </div>
@ -111,7 +77,7 @@
</div> </div>
<div class="cc-panel-body"> <div class="cc-panel-body">
<p class="small muted">Remove Recent Searches and Recently Viewed.</p> <p class="small muted">Remove Recent Searches and Recently Viewed.</p>
<button id="clear-history-btn-dup" class="btn btn-danger">Clear My History</button> <button id="clear-history-btn" class="btn btn-danger">Clear My History</button>
</div> </div>
</section> </section>
@ -128,7 +94,6 @@
<div class="sec-grid"> <div class="sec-grid">
<a class="sec-tile" href="{% url 'login_attempts' %}"> <a class="sec-tile" href="{% url 'login_attempts' %}">
<div class="sec-icon"> <div class="sec-icon">
<!-- shield -->
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M12 2l7 3v6c0 5-3.8 9.7-7 11-3.2-1.3-7-6-7-11V5l7-3z"/></svg> <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M12 2l7 3v6c0 5-3.8 9.7-7 11-3.2-1.3-7-6-7-11V5l7-3z"/></svg>
</div> </div>
<div class="sec-meta"> <div class="sec-meta">
@ -140,7 +105,6 @@
<a class="sec-tile" href="{% url 'audit_log' %}"> <a class="sec-tile" href="{% url 'audit_log' %}">
<div class="sec-icon"> <div class="sec-icon">
<!-- activity -->
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M3 12h3l2 7 4-14 3 10h6"/></svg> <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="currentColor" d="M3 12h3l2 7 4-14 3 10h6"/></svg>
</div> </div>
<div class="sec-meta"> <div class="sec-meta">
@ -154,7 +118,7 @@
</div> </div>
</section> </section>
<!-- Release Announcement (compact) --> <!-- Release Announcement -->
<section class="card cc-panel"> <section class="card cc-panel">
<div class="cc-panel-head"> <div class="cc-panel-head">
<div class="cc-kicker">Comms</div> <div class="cc-kicker">Comms</div>
@ -216,22 +180,12 @@
</div> </div>
<style> <style>
/* ---------- Console Layout ---------- */ /* ---------- Console Layout (same vibe, sans quick strip) ---------- */
.settings-console .cc-title{margin:0;font-size:24px;font-weight:700;color:#0f172a} .settings-console .cc-title{margin:0;font-size:24px;font-weight:700;color:#0f172a}
.settings-console .cc-subtitle{color:#64748b;margin-top:6px} .settings-console .cc-subtitle{color:#64748b;margin-top:6px}
.cc-header{margin:6px 0 14px} .cc-header{margin:6px 0 14px}
.cc-quick{
display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:18px;
}
.qc-item{display:flex; align-items:center; gap:10px}
.qc-label{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#64748b}
.qc-inline{display:flex; gap:8px; align-items:center}
.qc-select{min-width:180px}
.qc-btn{padding:8px 12px}
.qc-divider{width:1px; height:26px; background:var(--border,#e5e7eb); opacity:.8}
/* 3-column; collapse on small screens */
.cc-grid{ .cc-grid{
display:grid; display:grid;
grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-columns: repeat(3, minmax(0,1fr));
@ -253,19 +207,13 @@
/* Switch */ /* Switch */
.switch{position:relative; display:inline-block; width:46px; height:26px} .switch{position:relative; display:inline-block; width:46px; height:26px}
.switch input{display:none} .switch input{display:none}
.slider{ .slider{position:absolute; inset:0; background:#e5e7eb; border-radius:999px; transition:all .15s;}
position:absolute; cursor:pointer; inset:0; background:#e5e7eb; border-radius:999px; transition:all .15s; .slider:before{content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:white; border-radius:50%; transition:all .15s; box-shadow:0 2px 6px rgba(0,0,0,.15);}
}
.slider:before{
content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:white; border-radius:50%; transition:all .15s; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.switch input:checked + .slider{ background:#22c55e; } .switch input:checked + .slider{ background:#22c55e; }
.switch input:checked + .slider:before{ transform:translateX(20px); } .switch input:checked + .slider:before{ transform:translateX(20px); }
/* Swatches */ /* Swatches */
.swatch-grid{ .swatch-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px;
}
@media (max-width:720px){ .swatch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:720px){ .swatch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.swatch{ .swatch{
position:relative; display:flex; align-items:flex-end; justify-content:flex-start; position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
@ -277,11 +225,9 @@
.swatch[data-theme="midnight"]{ background:linear-gradient(135deg,#0b1220,#1c2741); } .swatch[data-theme="midnight"]{ background:linear-gradient(135deg,#0b1220,#1c2741); }
.swatch[data-theme="forest"]{ background:linear-gradient(135deg,#d7f3e2,#92c7a3); } .swatch[data-theme="forest"]{ background:linear-gradient(135deg,#d7f3e2,#92c7a3); }
.swatch[data-theme="sandstone"]{ background:linear-gradient(135deg,#f7efe4,#e4d2b6); } .swatch[data-theme="sandstone"]{ background:linear-gradient(135deg,#f7efe4,#e4d2b6); }
.swatch-name{ .swatch-name{ background:rgba(255,255,255,.8); padding:2px 6px; border-radius:8px; font-size:12px; color:#0f172a; }
background:rgba(255,255,255,.8); padding:2px 6px; border-radius:8px; font-size:12px; color:#0f172a;
}
/* Security panel accent */ /* Security accent */
.cc-sec{ position:relative; overflow:hidden; color:#0f172a; } .cc-sec{ position:relative; overflow:hidden; color:#0f172a; }
.cc-sec .cc-panel-title{ color:#0f172a; } .cc-sec .cc-panel-title{ color:#0f172a; }
.cc-sec .cc-kicker{ color:#16a34a; } .cc-sec .cc-kicker{ color:#16a34a; }
@ -299,15 +245,8 @@
border-radius:12px; background:rgba(255,255,255,.8); text-decoration:none; color:inherit; border-radius:12px; background:rgba(255,255,255,.8); text-decoration:none; color:inherit;
transition:transform .12s, box-shadow .12s, border-color .12s; transition:transform .12s, box-shadow .12s, border-color .12s;
} }
.sec-tile:hover{ .sec-tile:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(16,24,40,.08); border-color: rgba(34,197,94,.45); }
transform: translateY(-2px); .sec-icon{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:rgba(34,197,94,.18); color:#065f46; }
box-shadow:0 10px 24px rgba(16,24,40,.08);
border-color: rgba(34,197,94,.45);
}
.sec-icon{
display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
border-radius:10px; background:rgba(34,197,94,.18); color:#065f46;
}
.sec-title{ font-weight:700; } .sec-title{ font-weight:700; }
.sec-sub{ font-size:12px; color:#64748b; } .sec-sub{ font-size:12px; color:#64748b; }
.sec-meta{ flex:1; } .sec-meta{ flex:1; }
@ -315,128 +254,78 @@
/* Tiny helper */ /* Tiny helper */
.tiny{ font-size:12px } .tiny{ font-size:12px }
/* Make the quick strip responsive */
@media (max-width:720px){
.cc-quick{ flex-direction:column; align-items:stretch; gap:10px; }
.qc-divider{ display:none; }
.qc-inline{ width:100%; }
}
</style> </style>
<script> <script>
(function(){ (function(){
// --- Shared helpers --- // Helpers
function getCookie(name) { function getCookie(name){ const m=document.cookie.match("(^|;)\\s*"+name+"\\s*=\\s*([^;]+)"); return m?m.pop():""; }
const m = document.cookie.match("(^|;)\\s*" + name + "\\s*=\\s*([^;]+)"); function setTheme(name){
return m ? m.pop() : ""; var link=document.getElementById('theme-css');
} if(link) link.href='{% static "themes/" %}'+name+'.css';
function setThemeHref(name){ document.documentElement.setAttribute('data-theme',name);
var link = document.getElementById('theme-css'); try{ localStorage.setItem('theme',name); }catch(e){}
if (link) link.href = '{% static "themes/" %}' + name + '.css'; if(name==='classic'){ document.body.classList.add('themed-bg'); } else { document.body.classList.remove('themed-bg'); }
document.documentElement.setAttribute('data-theme', name);
try { localStorage.setItem('theme', name); } catch(e){}
// Classic gradient body toggle (matches base.html behavior)
if (name === 'classic') { document.body.classList.add('themed-bg'); }
else { document.body.classList.remove('themed-bg'); }
} }
// --- Clear History (both buttons) --- // Clear history
function wireClear(btnId){ (function(){
var btn = document.getElementById(btnId); var btn=document.getElementById("clear-history-btn");
if (!btn) return; var toast=document.getElementById("toast-clear-history");
btn.addEventListener("click", function(){ if(!btn) return;
fetch("{% url 'clear_history' %}", { method:"POST", headers:{ "X-CSRFToken": getCookie("csrftoken") }}) btn.addEventListener("click",function(){
.then(r => r.ok ? r.json() : Promise.reject()) fetch("{% url 'clear_history' %}",{method:"POST",headers:{"X-CSRFToken":getCookie("csrftoken")}})
.then(data => { .then(r=>r.ok?r.json():Promise.reject())
const keys = ["recent_searches","recent_entries","recent_viewed","recently_viewed","recent_results","recentSearches","recentEntries"]; .then(()=>{
try { const keys=["recent_searches","recent_entries","recent_viewed","recently_viewed","recent_results","recentSearches","recentEntries"];
keys.forEach(k => { try{ keys.forEach(k=>{localStorage.removeItem(k);sessionStorage.removeItem(k);document.cookie=k+"=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";}); }catch(e){}
localStorage.removeItem(k); if(toast){ toast.style.opacity="1"; setTimeout(()=>toast.style.opacity="0",1500); }
sessionStorage.removeItem(k); }).catch(()=>{});
document.cookie = k + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
}); });
} catch(e){} })();
var toast = document.getElementById("toast-clear-history");
if (toast){ toast.style.opacity = "1"; setTimeout(() => toast.style.opacity = "0", 1500); }
if (data && data.cleared) console.log("Cleared server keys:", data.cleared);
})
.catch(() => {});
});
}
wireClear("clear-history-btn");
wireClear("clear-history-btn-dup");
// --- Theme: quick strip select (id="theme") --- // Theme select + Save
var themeSel = document.getElementById('theme'); window.saveThemeFromSelect=function(){
if (themeSel) { var sel=document.getElementById('theme-select');
themeSel.addEventListener('change', function(e){ if(!sel) return false;
setThemeHref(e.target.value); var name=sel.value;
}); setTheme(name);
}
// --- Theme: panel select (id="theme-dup") + save button --- // persist to session
window.saveThemeFromDuplicate = function(){ var f=document.createElement('form');
var dup = document.getElementById('theme-dup'); f.method='POST'; f.action="{% url 'set_theme' %}";
if (!dup) return false; var csrf=document.createElement('input'); csrf.type='hidden'; csrf.name='csrfmiddlewaretoken'; csrf.value=getCookie('csrftoken');
var name = dup.value; var t=document.createElement('input'); t.type='hidden'; t.name='theme'; t.value=name;
setThemeHref(name); f.appendChild(csrf); f.appendChild(t); document.body.appendChild(f); f.submit();
// Also mirror back to the quick select if present return false;
if (themeSel) themeSel.value = name;
// Submit a hidden form post to persist session theme
var f = document.createElement('form');
f.method = 'POST';
f.action = "{% url 'set_theme' %}";
var csrf = document.createElement('input');
csrf.type = 'hidden'; csrf.name = 'csrfmiddlewaretoken'; csrf.value = getCookie('csrftoken');
var t = document.createElement('input');
t.type = 'hidden'; t.name = 'theme'; t.value = name;
f.appendChild(csrf); f.appendChild(t);
document.body.appendChild(f);
f.submit();
return false; // prevent default
}; };
// --- Theme swatches (instant preview) --- // Swatch instant preview
document.querySelectorAll('.swatch').forEach(btn => { document.querySelectorAll('.swatch').forEach(btn=>{
btn.addEventListener('click', () => { btn.addEventListener('click',()=>{
const name = btn.getAttribute('data-theme'); const name=btn.getAttribute('data-theme');
setThemeHref(name); setTheme(name);
// sync selects var sel=document.getElementById('theme-select');
if (themeSel) themeSel.value = name; if(sel) sel.value=name;
var dup = document.getElementById('theme-dup');
if (dup) dup.value = name;
}); });
}); });
// --- Highlight toggle (quick + panel are synced) --- // Highlight toggle
async function loadPrefsAndWire(){ (async function(){
let initial = false; const toggle=document.getElementById("highlightHitsToggle");
try { if(!toggle) return;
const res = await fetch("{% url 'api_get_prefs' %}"); try{
const data = await res.json(); const res=await fetch("{% url 'api_get_prefs' %}");
if (data && typeof data.highlight_search_hits !== "undefined") { const data=await res.json();
initial = !!data.highlight_search_hits; if(typeof data.highlight_search_hits!=="undefined") toggle.checked=!!data.highlight_search_hits;
} }catch(e){}
} catch(e){} toggle.addEventListener("change",()=>{
const form=new FormData();
const toggles = [document.getElementById("highlightHitsToggle"), document.getElementById("highlightHitsToggle-dup")].filter(Boolean); form.append("enabled", toggle.checked ? "true" : "false");
toggles.forEach(t => t.checked = initial);
function save(val){
const form = new FormData();
form.append("enabled", val ? "true" : "false");
fetch("{% url 'api_set_highlight_hits' %}", { method:"POST", body:form, headers:{ "X-CSRFToken": getCookie("csrftoken") }}) fetch("{% url 'api_set_highlight_hits' %}", { method:"POST", body:form, headers:{ "X-CSRFToken": getCookie("csrftoken") }})
.catch(() => alert("Could not save the setting. Please try again.")); .catch(()=>alert("Could not save the setting. Please try again."));
} });
toggles.forEach(t => t.addEventListener('change', () => { })();
const val = t.checked;
toggles.forEach(o => { if (o !== t) o.checked = val; });
save(val);
}));
}
loadPrefsAndWire();
})(); })();
</script> </script>
{% endblock %} {% endblock %}