BUG: the navbar works well in light-theme
This commit is contained in:
parent
039d586d7b
commit
42206afc88
@ -1,5 +1,3 @@
|
|||||||
<?php // index.php — Simple ChatGPT-like UI in a single PHP file (Bootstrap 5)
|
|
||||||
require_once __DIR__."/backend.php"; ?>
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en" data-theme="<?= $theme ?>">
|
<html lang="en" data-theme="<?= $theme ?>">
|
||||||
<head>
|
<head>
|
||||||
@ -87,7 +85,6 @@ require_once __DIR__."/backend.php"; ?>
|
|||||||
</div>
|
</div>
|
||||||
<div class="d-flex gap-2">
|
<div class="d-flex gap-2">
|
||||||
<button id="sendBtn" type="submit" class="btn btn-primary">Send</button>
|
<button id="sendBtn" type="submit" class="btn btn-primary">Send</button>
|
||||||
<button id="saveSysBtn" type="button" class="btn btn-outline-secondary">Save System Prompt</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
24
main.css
24
main.css
@ -128,6 +128,30 @@ html[data-theme="light"] #themeToggle.btn-outline-light:hover {
|
|||||||
background-color: var(--muted);
|
background-color: var(--muted);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
/* --- Light theme: make the navbar truly light --- */
|
||||||
|
html[data-theme="light"] .navbar {
|
||||||
|
background-color: #f8f9fa !important; /* light bg (like .bg-light) */
|
||||||
|
/* override Bootstrap navbar-dark CSS variables to dark text */
|
||||||
|
--bs-navbar-color: rgba(0,0,0,.65);
|
||||||
|
--bs-navbar-hover-color: rgba(0,0,0,.85);
|
||||||
|
--bs-navbar-active-color: rgba(0,0,0,1);
|
||||||
|
--bs-navbar-brand-color: rgba(0,0,0,.9);
|
||||||
|
--bs-navbar-toggler-border-color: rgba(0,0,0,.15);
|
||||||
|
/* dark “hamburger” icon on light bg */
|
||||||
|
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Optional: tighten brand + links for light theme (keeps consistency) */
|
||||||
|
html[data-theme="light"] .navbar .navbar-brand,
|
||||||
|
html[data-theme="light"] .navbar .nav-link {
|
||||||
|
color: var(--bs-navbar-color) !important;
|
||||||
|
}
|
||||||
|
html[data-theme="light"] .navbar .nav-link.active,
|
||||||
|
html[data-theme="light"] .navbar .nav-link:focus,
|
||||||
|
html[data-theme="light"] .navbar .nav-link:hover {
|
||||||
|
color: var(--bs-navbar-hover-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* --- Dark theme fixes for Bootstrap panels (card + accordion) --- */
|
/* --- Dark theme fixes for Bootstrap panels (card + accordion) --- */
|
||||||
html:not([data-theme="light"]) .card,
|
html:not([data-theme="light"]) .card,
|
||||||
|
|||||||
10
main.js
10
main.js
@ -74,16 +74,6 @@ formEl?.addEventListener('submit', async (e) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Save system prompt
|
|
||||||
qs('#saveSysBtn')?.addEventListener('click', async () => {
|
|
||||||
const message = '';
|
|
||||||
const system = sysInput ? sysInput.value.trim() : '';
|
|
||||||
if (!system) return;
|
|
||||||
// Use a no-op message to persist system prompt? Better: do nothing and let backend save on 'chat'
|
|
||||||
// Here we just show a toast-like confirmation:
|
|
||||||
appendAssistantHtml('<em>System prompt saved for next messages.</em>');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reset chat
|
// Reset chat
|
||||||
resetBtn?.addEventListener('click', async () => {
|
resetBtn?.addEventListener('click', async () => {
|
||||||
const res = await post('reset', {});
|
const res = await post('reset', {});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user