Update web/templates/settings/home.html
This commit is contained in:
parent
9719bd80af
commit
dc79470d7b
@ -23,28 +23,24 @@
|
||||
|
||||
<div class="cc-panel-body">
|
||||
|
||||
<form method="post" action="{% url 'set_theme' %}" class="cc-form" onsubmit="return saveThemeFromSelect()">
|
||||
{# Form wraps the tiles and the Save button. A hidden input carries the choice. #}
|
||||
<form method="post" action="{% url 'set_theme' %}" class="cc-form" onsubmit="return saveTheme()">
|
||||
{% csrf_token %}
|
||||
<label for="theme-select" class="cc-label">Theme</label>
|
||||
<select id="theme-select" class="form-control" style="max-width:320px;">
|
||||
<input type="hidden" id="theme-hidden" name="theme" value="{{ request.session.theme|default:'classic' }}">
|
||||
|
||||
<div class="swatch-grid">
|
||||
{% for t in available_themes %}
|
||||
<option value="{{ t }}" {% if request.session.theme|default:'classic' == t %}selected{% endif %}>
|
||||
{{ t|capfirst }}
|
||||
</option>
|
||||
<button type="button" class="swatch" data-theme="{{ t }}" aria-label="Preview {{ t|capfirst }}">
|
||||
<span class="swatch-name">{{ t|capfirst }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="cc-actions">
|
||||
<button class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="swatch-grid">
|
||||
{% for t in available_themes %}
|
||||
<button class="swatch" data-theme="{{ t }}" aria-label="Preview {{ t|capfirst }}">
|
||||
<span class="swatch-name">{{ t|capfirst }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -61,7 +57,6 @@
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -69,10 +64,8 @@
|
||||
<section class="card cc-panel">
|
||||
<div class="cc-panel-head">
|
||||
<div class="cc-kicker">Privacy</div>
|
||||
|
||||
</div>
|
||||
<div class="cc-panel-body">
|
||||
|
||||
<button id="clear-history-btn" class="btn btn-danger">Clear My History</button>
|
||||
</div>
|
||||
</section>
|
||||
@ -110,7 +103,6 @@
|
||||
<div class="sec-cta">Open →</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -176,80 +168,54 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ---------- Console Layout (same vibe, sans quick strip) ---------- */
|
||||
/* (unchanged styles from your file) */
|
||||
.settings-console .cc-title{margin:0;font-size:24px;font-weight:700;color:#0f172a}
|
||||
.settings-console .cc-subtitle{color:#64748b;margin-top:6px}
|
||||
|
||||
.cc-header{margin:6px 0 14px}
|
||||
|
||||
.cc-grid{
|
||||
display:grid;
|
||||
grid-template-columns: repeat(3, minmax(0,1fr));
|
||||
gap:16px;
|
||||
}
|
||||
.cc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
|
||||
@media (max-width: 1020px){ .cc-grid{ grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 720px){ .cc-grid{ grid-template-columns: 1fr; } }
|
||||
|
||||
.cc-panel{padding:16px 16px 14px}
|
||||
.cc-panel-head{margin-bottom:8px}
|
||||
.cc-kicker{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#64748b}
|
||||
.cc-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
|
||||
.cc-kicker-sec{color:#22c55e}
|
||||
.cc-panel-title{margin:2px 0 0; font-size:18px; font-weight:700; color:#0f172a}
|
||||
.cc-panel-title{margin:2px 0 0;font-size:18px;font-weight:700;color:#0f172a}
|
||||
.cc-panel-body{margin-top:8px}
|
||||
.cc-label{display:block; font-weight:600; margin:8px 0 6px; color:#0f172a}
|
||||
.cc-actions{display:flex; align-items:center; gap:10px; margin-top:10px}
|
||||
.cc-form .tool-input{border:1px solid var(--border,#d1d5db); border-radius:10px; padding:8px 10px; font-size:14px}
|
||||
|
||||
.cc-label{display:block;font-weight:600;margin:8px 0 6px;color:#0f172a}
|
||||
.cc-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
|
||||
.cc-form .tool-input{border:1px solid var(--border,#d1d5db);border-radius:10px;padding:8px 10px;font-size:14px}
|
||||
/* 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}
|
||||
.slider{position:absolute; 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);}
|
||||
.switch input:checked + .slider{ background:#22c55e; }
|
||||
.switch input:checked + .slider:before{ transform:translateX(20px); }
|
||||
|
||||
.slider{position:absolute;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);}
|
||||
.switch input:checked + .slider{background:#22c55e;}
|
||||
.switch input:checked + .slider:before{transform:translateX(20px);}
|
||||
/* Swatches */
|
||||
.swatch-grid{ 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)); } }
|
||||
.swatch{
|
||||
position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
|
||||
height:64px; border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:8px;
|
||||
background:linear-gradient(135deg,#eef2f7,#dfe7f2); cursor:pointer;
|
||||
}
|
||||
.swatch[data-theme="classic"]{ background:linear-gradient(110deg,#d7b592 0%,#e7e3db 35%,#8fbfe0 100%); }
|
||||
.swatch[data-theme="dawn"]{ background:linear-gradient(135deg,#ffd9a0 0%,#ffb6b9 40%,#a3d5ff 100%); }
|
||||
.swatch[data-theme="midnight"]{ background:linear-gradient(135deg,#0b1220,#1c2741); }
|
||||
.swatch[data-theme="forest"]{ background:linear-gradient(135deg,#d7f3e2,#92c7a3); }
|
||||
.swatch[data-theme="sandstone"]{ background:linear-gradient(135deg,#f7efe4,#e4d2b6); }
|
||||
.swatch-name{ background:rgba(255,255,255,.8); padding:2px 6px; border-radius:8px; font-size:12px; color:#0f172a; }
|
||||
|
||||
.swatch-grid{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));}}
|
||||
.swatch{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;height:64px;border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:8px;background:linear-gradient(135deg,#eef2f7,#dfe7f2);cursor:pointer;}
|
||||
.swatch[data-theme="classic"]{background:linear-gradient(110deg,#d7b592 0%,#e7e3db 35%,#8fbfe0 100%);}
|
||||
.swatch[data-theme="dawn"]{background:linear-gradient(135deg,#ffd9a0 0%,#ffb6b9 40%,#a3d5ff 100%);}
|
||||
.swatch[data-theme="midnight"]{background:linear-gradient(135deg,#0b1220,#1c2741);}
|
||||
.swatch[data-theme="forest"]{background:linear-gradient(135deg,#d7f3e2,#92c7a3);}
|
||||
.swatch[data-theme="sandstone"]{background:linear-gradient(135deg,#f7efe4,#e4d2b6);}
|
||||
.swatch-name{background:rgba(255,255,255,.8);padding:2px 6px;border-radius:8px;font-size:12px;color:#0f172a;}
|
||||
/* Security accent */
|
||||
.cc-sec{ position:relative; overflow:hidden; color:#0f172a; }
|
||||
.cc-sec .cc-panel-title{ color:#0f172a; }
|
||||
.cc-sec .cc-kicker{ color:#16a34a; }
|
||||
.cc-sec-bg{
|
||||
position:absolute; inset:-1px; z-index:0;
|
||||
background: radial-gradient(800px 300px at 90% -20%, rgba(34,197,94,.25), transparent 55%),
|
||||
linear-gradient(135deg, rgba(34,197,94,.10), rgba(59,130,246,.06));
|
||||
pointer-events:none;
|
||||
}
|
||||
.cc-sec > * { position:relative; z-index:1; }
|
||||
|
||||
.sec-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
|
||||
.sec-tile{
|
||||
display:flex; align-items:center; gap:12px; padding:12px; border:1px solid rgba(34,197,94,.25);
|
||||
border-radius:12px; background:rgba(255,255,255,.8); text-decoration:none; color:inherit;
|
||||
transition:transform .12s, box-shadow .12s, border-color .12s;
|
||||
}
|
||||
.sec-tile:hover{ transform: translateY(-2px); 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-sub{ font-size:12px; color:#64748b; }
|
||||
.sec-meta{ flex:1; }
|
||||
.sec-cta{ font-size:13px; color:#0f172a; opacity:.7 }
|
||||
|
||||
/* Tiny helper */
|
||||
.tiny{ font-size:12px }
|
||||
.cc-sec{position:relative;overflow:hidden;color:#0f172a;}
|
||||
.cc-sec .cc-panel-title{color:#0f172a;}
|
||||
.cc-sec .cc-kicker{color:#16a34a;}
|
||||
.cc-sec-bg{position:absolute;inset:-1px;z-index:0;background:radial-gradient(800px 300px at 90% -20%,rgba(34,197,94,.25),transparent 55%),linear-gradient(135deg,rgba(34,197,94,.10),rgba(59,130,246,.06));pointer-events:none;}
|
||||
.cc-sec > *{position:relative;z-index:1;}
|
||||
.sec-grid{display:grid;grid-template-columns:1fr;gap:10px;}
|
||||
.sec-tile{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(34,197,94,.25);border-radius:12px;background:rgba(255,255,255,.8);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s,border-color .12s;}
|
||||
.sec-tile:hover{transform:translateY(-2px);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-sub{font-size:12px;color:#64748b;}
|
||||
.sec-meta{flex:1;}
|
||||
.sec-cta{font-size:13px;color:#0f172a;opacity:.7}
|
||||
.tiny{font-size:12px}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -262,6 +228,7 @@
|
||||
document.documentElement.setAttribute('data-theme',name);
|
||||
try{ localStorage.setItem('theme',name); }catch(e){}
|
||||
if(name==='classic'){ document.body.classList.add('themed-bg'); } else { document.body.classList.remove('themed-bg'); }
|
||||
var hidden=document.getElementById('theme-hidden'); if(hidden) hidden.value=name;
|
||||
}
|
||||
|
||||
// Clear history
|
||||
@ -280,29 +247,17 @@
|
||||
});
|
||||
})();
|
||||
|
||||
// Theme select + Save
|
||||
window.saveThemeFromSelect=function(){
|
||||
var sel=document.getElementById('theme-select');
|
||||
if(!sel) return false;
|
||||
var name=sel.value;
|
||||
setTheme(name);
|
||||
|
||||
// persist to session
|
||||
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;
|
||||
// Save from tiles
|
||||
window.saveTheme = function(){
|
||||
// Hidden input already holds current pick; just submit
|
||||
return true;
|
||||
};
|
||||
|
||||
// Swatch instant preview
|
||||
// Swatch instant preview + set hidden value
|
||||
document.querySelectorAll('.swatch').forEach(btn=>{
|
||||
btn.addEventListener('click',()=>{
|
||||
const name=btn.getAttribute('data-theme');
|
||||
setTheme(name);
|
||||
var sel=document.getElementById('theme-select');
|
||||
if(sel) sel.value=name;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user