git/php-llm-agent-www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IMPROVEMENT: replace header with Bootstrap top navbar

Browse Source
This commit is contained in:
Frederico @ VilaRosa02 2025-09-17 18:02:04 +00:00
parent f86097a00a
commit 039d586d7b
2 changed files with 85 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -5,22 +5,39 @@ require_once __DIR__."/backend.php"; ?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini ChatGPT (PHP + Bootstrap)</title>
<title>FMF GPT</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/main.css" rel="stylesheet">
</head>
<body>
<div class="container py-4 chat-wrap">
<div class="d-flex align-items-center mb-3 text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M12 20h9"/><path d="M16 4h-3a2 2 0 0 0-2 2v14"/><path d="M18 14h-8"/><path d="M7 8h8"/></svg>
<h1 class="h4 m-0">Mini ChatGPT</h1>
<div class="ms-auto">
<button id="resetBtn" class="btn btn-sm btn-outline-light">Reset</button>
</div>
<button id="themeToggle" class="btn btn-sm btn-outline-light ms-2" aria-pressed="false">
Toggle Theme
<nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded mb-3 px-3">
<a class="navbar-brand" href="#">FMF GPT</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#topNav" aria-controls="topNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="topNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#chat">Chat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#systemAcc">System</a>
</li>
</ul>
<div class="d-flex">
<button id="resetBtn" class="btn btn-sm btn-outline-light me-2">Reset</button>
<button id="themeToggle" class="btn btn-sm btn-outline-light" aria-pressed="false">
Toggle Theme
</button>
</div>
</div>
</nav>
<div class="accordion mb-3" id="systemAcc">
<div class="accordion-item">

59
main.css
View File

@ -13,7 +13,7 @@
html[data-theme="light"] {
/* Light theme (WhatsApp-like) */
--wa-bg: #ece5dd;
--wa-bg: #e9ecef;
--wa-panel: #ffffff;
--wa-incoming: #ffffff; /* assistant (other person) */
--wa-outgoing: #dcf8c6; /* user (me) */
@ -128,3 +128,60 @@ html[data-theme="light"] #themeToggle.btn-outline-light:hover {
background-color: var(--muted);
color: #fff;
}
/* --- Dark theme fixes for Bootstrap panels (card + accordion) --- */
html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .accordion,
html:not([data-theme="light"]) .accordion-item {
background-color: var(--wa-panel) !important;
color: var(--wa-text) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
}
/* Accordion header button */
html:not([data-theme="light"]) .accordion-button {
background-color: var(--wa-panel) !important;
color: var(--wa-text) !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
/* Collapsed state keeps same colors (Bootstrap otherwise goes light) */
html:not([data-theme="light"]) .accordion-button.collapsed {
background-color: var(--wa-panel) !important;
color: var(--wa-text) !important;
border-bottom-color: rgba(255,255,255,0.06) !important;
}
/* Accordion body */
html:not([data-theme="light"]) .accordion-body {
background-color: var(--wa-panel) !important;
color: var(--wa-text) !important;
}
/* The chevron icon (SVG background-image) needs contrast */
html:not([data-theme="light"]) .accordion-button::after {
filter: invert(1) opacity(0.7);
}
/* Inputs inside the card/accordion */
html:not([data-theme="light"]) .form-control {
background-color: var(--wa-incoming) !important;
color: var(--wa-text) !important;
border-color: rgba(255,255,255,0.08) !important;
}
html:not([data-theme="light"]) .form-control::placeholder {
color: var(--wa-muted) !important;
}
html:not([data-theme="light"]) .form-text {
color: var(--wa-muted) !important;
}
/* Outline buttons in dark context */
html:not([data-theme="light"]) .btn-outline-light {
color: var(--wa-text) !important;
border-color: rgba(255,255,255,0.25) !important;
}
html:not([data-theme="light"]) .btn-outline-light:hover {
background-color: rgba(255,255,255,0.12) !important;
}