05/22 Enhance codes and fix bugs 2
This commit is contained in:
+102
-1
@@ -2,6 +2,9 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<script>
|
||||
(function(){var t=localStorage.getItem('theme');if(t)document.documentElement.setAttribute('data-bs-theme',t);})();
|
||||
</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}" />
|
||||
@@ -52,6 +55,36 @@
|
||||
--shadow-lg: 0 10px 25px rgba(0, 0, 0, .1), 0 4px 10px rgba(0, 0, 0, .06);
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] {
|
||||
--bg: #0d1117;
|
||||
--surface: #161b22;
|
||||
--surface2: #1c2333;
|
||||
--border: #30363d;
|
||||
--border2: #3d444d;
|
||||
--text: #e6edf3;
|
||||
--text2: #adbac7;
|
||||
--muted: #8b949e;
|
||||
--muted2: #545d68;
|
||||
--success: #3fb950;
|
||||
--success-bg: #0b2a12;
|
||||
--warning: #d29922;
|
||||
--warning-bg: #1c1100;
|
||||
--danger: #f85149;
|
||||
--danger-bg: #210b0a;
|
||||
--info: #388bfd;
|
||||
--info-bg: #031d40;
|
||||
--sidebar-bg: #0d1117;
|
||||
--sidebar-text: #8b949e;
|
||||
--sidebar-active: #e6edf3;
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
|
||||
--shadow: 0 4px 6px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
|
||||
--shadow-lg: 0 10px 25px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] #topbar {
|
||||
background: rgba(22, 27, 34, .95);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@@ -1181,6 +1214,10 @@
|
||||
{{ unread_notifications if unread_notifications > 0 }}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Dark mode toggle -->
|
||||
<button id="dark-toggle" class="btn btn-sm btn-secondary" title="Toggle dark mode" onclick="toggleDarkMode()" style="padding:4px 8px;">
|
||||
<i class="bi bi-moon" id="dark-icon"></i>
|
||||
</button>
|
||||
<a href="{{ url_for('auth.profile') }}" class="btn btn-sm btn-secondary">
|
||||
<i class="bi bi-person-circle me-1"></i>{{ current_user.full_name.split()[0] }}
|
||||
</a>
|
||||
@@ -1513,7 +1550,7 @@
|
||||
|
||||
function showToast(title, msg) {
|
||||
const t = document.createElement('div');
|
||||
t.style.cssText = 'position:fixed;bottom:90px;right:28px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent3);border-radius:8px;padding:12px 16px;z-index:300;max-width:300px;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:slideIn .25s ease;';
|
||||
t.style.cssText = 'position:fixed;top:72px;right:16px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent3);border-radius:8px;padding:12px 16px;z-index:1090;max-width:320px;box-shadow:0 4px 16px rgba(0,0,0,.18);animation:slideIn .25s ease;';
|
||||
t.innerHTML = `<div style="font-size:13px;font-weight:600;margin-bottom:4px;">${_esc(title)}</div><div style="font-size:12px;color:var(--muted);">${_esc(msg)}</div>`;
|
||||
document.body.appendChild(t);
|
||||
setTimeout(() => t.remove(), 5000);
|
||||
@@ -1591,7 +1628,71 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#nprogress-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
width: 0%;
|
||||
background: var(--accent);
|
||||
z-index: 9999;
|
||||
transition: width .2s ease, opacity .4s ease;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
const bar = document.createElement('div');
|
||||
bar.id = 'nprogress-bar';
|
||||
document.body.appendChild(bar);
|
||||
|
||||
let _raf;
|
||||
function startProgress() {
|
||||
bar.style.opacity = '1';
|
||||
bar.style.width = '0%';
|
||||
bar.style.transition = 'width .2s ease';
|
||||
let w = 0;
|
||||
function tick() {
|
||||
w = w < 70 ? w + (70 - w) * 0.08 : w < 90 ? w + 0.4 : w;
|
||||
bar.style.width = Math.min(w, 90) + '%';
|
||||
_raf = requestAnimationFrame(tick);
|
||||
}
|
||||
_raf = requestAnimationFrame(tick);
|
||||
}
|
||||
function finishProgress() {
|
||||
cancelAnimationFrame(_raf);
|
||||
bar.style.width = '100%';
|
||||
bar.style.transition = 'width .15s ease, opacity .4s ease .15s';
|
||||
setTimeout(() => { bar.style.opacity = '0'; setTimeout(() => { bar.style.width = '0%'; }, 400); }, 200);
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
const a = e.target.closest('a[href]');
|
||||
if (!a) return;
|
||||
const href = a.getAttribute('href');
|
||||
if (!href || href.startsWith('#') || href.startsWith('javascript') || a.target === '_blank' || e.ctrlKey || e.metaKey || e.shiftKey) return;
|
||||
try { const u = new URL(href, location.href); if (u.origin !== location.origin) return; } catch (_) { return; }
|
||||
startProgress();
|
||||
});
|
||||
window.addEventListener('pageshow', finishProgress);
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
function toggleDarkMode() {
|
||||
const html = document.documentElement;
|
||||
const next = html.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
|
||||
html.setAttribute('data-bs-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
_syncDarkIcon(next);
|
||||
}
|
||||
function _syncDarkIcon(theme) {
|
||||
const icon = document.getElementById('dark-icon');
|
||||
if (!icon) return;
|
||||
icon.className = theme === 'dark' ? 'bi bi-sun' : 'bi bi-moon';
|
||||
}
|
||||
_syncDarkIcon(document.documentElement.getAttribute('data-bs-theme') || 'light');
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user