Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
02a6976a98 |
@ -1,403 +1,247 @@
|
|||||||
|
:root {
|
||||||
|
--color-bg: #f7f7f5;
|
||||||
|
--color-surface: #ffffff;
|
||||||
|
--color-surface-2: #efefec;
|
||||||
|
--color-text: #171717;
|
||||||
|
--color-muted: #686868;
|
||||||
|
--color-border: #deded9;
|
||||||
|
--color-accent: #111111;
|
||||||
|
--color-accent-2: #525252;
|
||||||
|
--radius-xs: 4px;
|
||||||
|
--radius-sm: 8px;
|
||||||
|
--radius-md: 12px;
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||||
|
--shadow-md: 0 14px 40px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
|
||||||
background-size: 400% 400%;
|
|
||||||
animation: gradient 15s ease infinite;
|
|
||||||
color: #212529;
|
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
background: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.55;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-wrapper {
|
.skip-link {
|
||||||
display: flex;
|
left: 1rem;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradient {
|
|
||||||
0% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
background: rgba(255, 255, 255, 0.85);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 85vh;
|
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
|
||||||
backdrop-filter: blur(15px);
|
|
||||||
-webkit-backdrop-filter: blur(15px);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-header {
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-messages {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom Scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
max-width: 85%;
|
|
||||||
padding: 0.85rem 1.1rem;
|
|
||||||
border-radius: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
||||||
animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; transform: translateY(20px) scale(0.95); }
|
|
||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.visitor {
|
|
||||||
align-self: flex-end;
|
|
||||||
background: linear-gradient(135deg, #212529 0%, #343a40 100%);
|
|
||||||
color: #fff;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.bot {
|
|
||||||
align-self: flex-start;
|
|
||||||
background: #ffffff;
|
|
||||||
color: #212529;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area {
|
|
||||||
padding: 1.25rem;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area form {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area input {
|
|
||||||
flex: 1;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
outline: none;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area input:focus {
|
|
||||||
border-color: #23a6d5;
|
|
||||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area button {
|
|
||||||
background: #212529;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input-area button:hover {
|
|
||||||
background: #000;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Background Animations */
|
|
||||||
.bg-animations {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 500px;
|
top: -4rem;
|
||||||
height: 500px;
|
z-index: 2000;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: var(--color-text);
|
||||||
border-radius: 50%;
|
|
||||||
filter: blur(80px);
|
|
||||||
animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-1 {
|
|
||||||
top: -10%;
|
|
||||||
left: -10%;
|
|
||||||
background: rgba(238, 119, 82, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-2 {
|
|
||||||
bottom: -10%;
|
|
||||||
right: -10%;
|
|
||||||
background: rgba(35, 166, 213, 0.4);
|
|
||||||
animation-delay: -7s;
|
|
||||||
width: 600px;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-3 {
|
|
||||||
top: 40%;
|
|
||||||
left: 30%;
|
|
||||||
background: rgba(231, 60, 126, 0.3);
|
|
||||||
animation-delay: -14s;
|
|
||||||
width: 450px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes move {
|
|
||||||
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
|
||||||
33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
|
|
||||||
66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
|
|
||||||
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-link {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
padding: .55rem .8rem;
|
||||||
background: rgba(0, 0, 0, 0.2);
|
border-radius: var(--radius-xs);
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-link:hover {
|
.skip-link:focus { top: 1rem; }
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
text-decoration: none;
|
a { color: var(--color-text); text-underline-offset: 3px; }
|
||||||
|
|
||||||
|
.navbar { min-height: 66px; }
|
||||||
|
.navbar-brand { font-weight: 800; letter-spacing: -0.03em; }
|
||||||
|
.nav-link { color: #353535; font-weight: 600; font-size: .92rem; }
|
||||||
|
.nav-link:hover, .nav-link:focus { color: #000; }
|
||||||
|
.brand-mark {
|
||||||
|
align-items: center;
|
||||||
|
background: #111;
|
||||||
|
border-radius: var(--radius-xs);
|
||||||
|
color: #fff;
|
||||||
|
display: inline-flex;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
font-size: .78rem;
|
||||||
|
height: 28px;
|
||||||
|
justify-content: center;
|
||||||
|
letter-spacing: -.08em;
|
||||||
|
width: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Admin Styles */
|
.hero-section { background: var(--color-surface); }
|
||||||
.admin-container {
|
.py-lg-6 { padding-bottom: 5.5rem; padding-top: 5.5rem; }
|
||||||
max-width: 900px;
|
.text-balance { text-wrap: balance; }
|
||||||
margin: 3rem auto;
|
.lead { font-size: 1.08rem; max-width: 720px; }
|
||||||
padding: 2.5rem;
|
.eyebrow {
|
||||||
background: rgba(255, 255, 255, 0.85);
|
color: #4d4d4d;
|
||||||
backdrop-filter: blur(20px);
|
font-size: .75rem;
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
border-radius: 24px;
|
|
||||||
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-container h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: #212529;
|
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
letter-spacing: .14em;
|
||||||
|
|
||||||
.table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 8px;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table th {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
padding: 1rem;
|
|
||||||
color: #6c757d;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.75rem;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table td {
|
.btn { border-radius: var(--radius-sm); font-weight: 700; }
|
||||||
background: #fff;
|
.btn-lg { --bs-btn-padding-y: .78rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .98rem; }
|
||||||
|
.btn-dark { background: var(--color-accent); border-color: var(--color-accent); }
|
||||||
|
.btn-dark:hover { background: #2b2b2b; border-color: #2b2b2b; }
|
||||||
|
.btn-outline-secondary { border-color: #c9c9c3; color: #252525; }
|
||||||
|
|
||||||
|
.hero-panel, .app-shell, .provider-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-panel { border: 1px solid var(--color-border); padding: 1.15rem; }
|
||||||
|
.panel-topline { color: var(--color-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
|
||||||
|
.status-dot { color: #1f6b3a; font-weight: 800; }
|
||||||
|
.code-window {
|
||||||
|
background: #151515;
|
||||||
|
border: 1px solid #2b2b2b;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: #f6f6f3;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
font-size: .9rem;
|
||||||
|
line-height: 1.9;
|
||||||
|
overflow-x: auto;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
.code-window .muted { color: #9ca3af; }
|
||||||
|
.code-window .string { color: #d8d8d2; }
|
||||||
|
.runtime-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
.runtime-grid div { background: var(--color-surface-2); border-radius: var(--radius-sm); padding: .75rem; }
|
||||||
|
.runtime-grid dt { color: var(--color-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
|
||||||
|
.runtime-grid dd { font-size: .88rem; font-weight: 700; margin: .1rem 0 0; }
|
||||||
|
|
||||||
.table tr td:first-child { border-radius: 12px 0 0 12px; }
|
.section-pad { padding: 4.5rem 0; }
|
||||||
.table tr td:last-child { border-radius: 0 12px 12px 0; }
|
.bg-subtle { background: var(--color-surface-2); }
|
||||||
|
.narrow { max-width: 560px; }
|
||||||
|
.section-heading { max-width: 760px; }
|
||||||
|
|
||||||
.form-group {
|
.app-shell { overflow: hidden; }
|
||||||
margin-bottom: 1.25rem;
|
.search-card { padding: 1.15rem; }
|
||||||
|
.form-label { color: #303030; font-size: .82rem; font-weight: 800; }
|
||||||
|
.form-control, .form-select {
|
||||||
|
border-color: #cfcfca;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
.form-control:focus, .form-select:focus, .btn:focus-visible, .chip:focus-visible, .result-item:focus-visible, .language-card:focus-visible {
|
||||||
.form-group label {
|
border-color: #111;
|
||||||
display: block;
|
box-shadow: 0 0 0 .2rem rgba(17, 17, 17, .14);
|
||||||
margin-bottom: 0.5rem;
|
outline: 0;
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
}
|
||||||
|
.quick-searches { display: flex; flex-wrap: wrap; gap: .5rem; }
|
||||||
.form-control {
|
.chip {
|
||||||
width: 100%;
|
background: var(--color-surface-2);
|
||||||
padding: 0.75rem 1rem;
|
border: 1px solid var(--color-border);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
border-radius: 999px;
|
||||||
border-radius: 12px;
|
color: #252525;
|
||||||
background: #fff;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
font-size: .82rem;
|
||||||
box-sizing: border-box;
|
font-weight: 700;
|
||||||
|
padding: .4rem .7rem;
|
||||||
}
|
}
|
||||||
|
.chip:hover { background: #e7e7e1; }
|
||||||
|
|
||||||
.form-control:focus {
|
.results-column { background: #fbfbfa; min-height: 540px; }
|
||||||
outline: none;
|
.detail-column { background: var(--color-surface); min-height: 540px; }
|
||||||
border-color: #23a6d5;
|
.results-toolbar {
|
||||||
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
|
align-items: center;
|
||||||
}
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
|
||||||
.header-container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
.admin-card {
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-card h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-delete {
|
|
||||||
background: #dc3545;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add {
|
|
||||||
background: #212529;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-save {
|
|
||||||
background: #0088cc;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
width: 100%;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.webhook-url {
|
|
||||||
font-size: 0.85em;
|
|
||||||
color: #555;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-table-container {
|
|
||||||
overflow-x: auto;
|
|
||||||
background: rgba(255, 255, 255, 0.4);
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
}
|
}
|
||||||
|
.results-list { display: grid; gap: .65rem; padding: 1rem; }
|
||||||
.history-table {
|
.result-item {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: .95rem;
|
||||||
|
text-align: left;
|
||||||
|
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.result-item:hover { border-color: #b9b9b3; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
|
||||||
.history-table-time {
|
.result-item.active { border-color: #111; box-shadow: 0 0 0 1px #111 inset; }
|
||||||
width: 15%;
|
.result-title { font-weight: 800; letter-spacing: -.02em; margin-bottom: .25rem; }
|
||||||
white-space: nowrap;
|
.result-excerpt { color: var(--color-muted); font-size: .88rem; margin-bottom: .75rem; }
|
||||||
font-size: 0.85em;
|
.badge-soft {
|
||||||
color: #555;
|
background: var(--color-surface-2);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 999px;
|
||||||
|
color: #333;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: .72rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 .3rem .3rem 0;
|
||||||
|
padding: .25rem .5rem;
|
||||||
}
|
}
|
||||||
|
.score { color: var(--color-muted); font-size: .78rem; font-weight: 700; }
|
||||||
.history-table-user {
|
.detail-panel { min-height: 100%; padding: 1.25rem; }
|
||||||
width: 35%;
|
.empty-state {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
align-items: center;
|
||||||
border-radius: 8px;
|
display: flex;
|
||||||
padding: 8px;
|
flex-direction: column;
|
||||||
}
|
justify-content: center;
|
||||||
|
min-height: 420px;
|
||||||
.history-table-ai {
|
|
||||||
width: 50%;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-messages {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #777;
|
}
|
||||||
|
.empty-icon {
|
||||||
|
align-items: center;
|
||||||
|
background: var(--color-surface-2);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
height: 54px;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
width: 54px;
|
||||||
|
}
|
||||||
|
.detail-meta { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
|
||||||
|
.detail-summary { color: #333; font-size: 1rem; }
|
||||||
|
.code-block {
|
||||||
|
background: #151515;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: #f7f7f5;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
font-size: .86rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 1rem;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
.detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
|
||||||
|
|
||||||
|
.language-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
color: var(--color-text);
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 112px;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: left;
|
||||||
|
transition: border-color .15s ease, transform .15s ease;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.language-card:hover { border-color: #111; transform: translateY(-1px); }
|
||||||
|
.language-card span { font-size: 1rem; font-weight: 800; }
|
||||||
|
.language-card small { color: var(--color-muted); margin-top: .35rem; }
|
||||||
|
.provider-card { padding: 1.25rem; }
|
||||||
|
.checklist { color: #333; padding-left: 1.2rem; }
|
||||||
|
.checklist li + li { margin-top: .55rem; }
|
||||||
|
.site-footer { background: var(--color-surface); color: #333; font-size: .9rem; }
|
||||||
|
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
.py-lg-6 { padding-bottom: 3.5rem; padding-top: 3.5rem; }
|
||||||
|
.section-pad { padding: 3.25rem 0; }
|
||||||
|
.results-column { border-right: 0 !important; min-height: auto; }
|
||||||
|
.detail-column { border-top: 1px solid var(--color-border); min-height: auto; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575.98px) {
|
||||||
|
body { font-size: 14px; }
|
||||||
|
.display-5 { font-size: 2.1rem; }
|
||||||
|
.runtime-grid { grid-template-columns: 1fr; }
|
||||||
|
.results-toolbar { align-items: flex-start; flex-direction: column; }
|
||||||
}
|
}
|
||||||
@ -1,39 +1,262 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
const lessons = [
|
||||||
const chatForm = document.getElementById('chat-form');
|
{
|
||||||
const chatInput = document.getElementById('chat-input');
|
id: 'go-json-parse',
|
||||||
const chatMessages = document.getElementById('chat-messages');
|
title: 'Parse JSON into a Go struct',
|
||||||
|
language: 'Go',
|
||||||
|
tags: ['json', 'struct', 'api'],
|
||||||
|
excerpt: 'Use encoding/json with exported struct fields and explicit error handling.',
|
||||||
|
summary: 'Go parses JSON by unmarshalling bytes into a struct. Field names must be exported, and struct tags let you map JSON keys to Go names.',
|
||||||
|
code: `type Payload struct {\n Name string \`json:"name"\`\n}\n\nvar p Payload\nif err := json.Unmarshal(body, &p); err != nil {\n return err\n}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'js-async-await',
|
||||||
|
title: 'Use async/await for readable JavaScript APIs',
|
||||||
|
language: 'JavaScript',
|
||||||
|
tags: ['async', 'fetch', 'promises'],
|
||||||
|
excerpt: 'Wrap fetch calls in async functions, await the response, then handle errors explicitly.',
|
||||||
|
summary: 'async/await keeps asynchronous JavaScript code close to synchronous control flow. Always check response.ok and catch failures near the calling boundary.',
|
||||||
|
code: `async function loadUser(id) {\n const res = await fetch(\`/api/users/\${id}\`);\n if (!res.ok) throw new Error('Request failed');\n return await res.json();\n}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'python-list-comprehension',
|
||||||
|
title: 'Filter and transform Python lists',
|
||||||
|
language: 'Python',
|
||||||
|
tags: ['lists', 'comprehension', 'clean code'],
|
||||||
|
excerpt: 'List comprehensions are concise when the expression and predicate stay simple.',
|
||||||
|
summary: 'Use a list comprehension when you can express mapping and filtering in one readable line. Prefer a normal loop when you need multiple steps or side effects.',
|
||||||
|
code: `names = ['Ada', 'Linus', 'Grace']\nshort_names = [name.lower() for name in names if len(name) <= 5]`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'sql-joins',
|
||||||
|
title: 'Choose the right SQL join',
|
||||||
|
language: 'SQL',
|
||||||
|
tags: ['joins', 'select', 'relational'],
|
||||||
|
excerpt: 'INNER JOIN returns matching rows; LEFT JOIN keeps all rows from the left table.',
|
||||||
|
summary: 'Start with INNER JOIN when both records must exist. Use LEFT JOIN for optional related records, such as users without orders yet.',
|
||||||
|
code: `SELECT users.name, orders.total\nFROM users\nLEFT JOIN orders ON orders.user_id = users.id\nWHERE users.active = 1;`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'php-pdo-prepared',
|
||||||
|
title: 'Run safe PHP PDO queries',
|
||||||
|
language: 'PHP',
|
||||||
|
tags: ['pdo', 'security', 'mysql'],
|
||||||
|
excerpt: 'Prepared statements prevent SQL injection and keep user input out of raw SQL strings.',
|
||||||
|
summary: 'Create a PDO statement, bind values, execute it, and fetch typed results. Never concatenate untrusted request input into SQL.',
|
||||||
|
code: `$stmt = $pdo->prepare('SELECT * FROM posts WHERE slug = :slug');\n$stmt->execute(['slug' => $slug]);\n$post = $stmt->fetch(PDO::FETCH_ASSOC);`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'ts-generics',
|
||||||
|
title: 'Model reusable TypeScript functions with generics',
|
||||||
|
language: 'TypeScript',
|
||||||
|
tags: ['types', 'generics', 'safety'],
|
||||||
|
excerpt: 'Generics preserve specific types while keeping helpers reusable.',
|
||||||
|
summary: 'Use a generic type parameter when the function should work with many input types but return or store the same specific type information.',
|
||||||
|
code: `function first<T>(items: T[]): T | undefined {\n return items[0];\n}\n\nconst value = first<string>(['docs', 'code']);`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
const appendMessage = (text, sender) => {
|
const els = {};
|
||||||
const msgDiv = document.createElement('div');
|
let activeResults = [];
|
||||||
msgDiv.classList.add('message', sender);
|
let selectedId = null;
|
||||||
msgDiv.textContent = text;
|
let toastInstance = null;
|
||||||
chatMessages.appendChild(msgDiv);
|
|
||||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
||||||
};
|
|
||||||
|
|
||||||
chatForm.addEventListener('submit', async (e) => {
|
function $(selector) { return document.querySelector(selector); }
|
||||||
e.preventDefault();
|
|
||||||
const message = chatInput.value.trim();
|
|
||||||
if (!message) return;
|
|
||||||
|
|
||||||
appendMessage(message, 'visitor');
|
function escapeHtml(value) {
|
||||||
chatInput.value = '';
|
return String(value).replace(/[&<>"']/g, (char) => ({'&': '&', '<': '<', '>': '>', '"': '"', "'": '''}[char]));
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
function scoreLesson(lesson, query, language) {
|
||||||
const response = await fetch('api/chat.php', {
|
const q = query.trim().toLowerCase();
|
||||||
method: 'POST',
|
const haystack = `${lesson.title} ${lesson.language} ${lesson.tags.join(' ')} ${lesson.excerpt} ${lesson.summary}`.toLowerCase();
|
||||||
headers: { 'Content-Type': 'application/json' },
|
let score = 0;
|
||||||
body: JSON.stringify({ message })
|
if (language === 'all' || lesson.language === language) score += 25;
|
||||||
|
if (language !== 'all' && lesson.language !== language) return 0;
|
||||||
|
if (!q) return score;
|
||||||
|
const terms = q.split(/\s+/).filter(Boolean);
|
||||||
|
terms.forEach((term) => {
|
||||||
|
if (lesson.title.toLowerCase().includes(term)) score += 18;
|
||||||
|
if (lesson.tags.join(' ').toLowerCase().includes(term)) score += 12;
|
||||||
|
if (haystack.includes(term)) score += 6;
|
||||||
});
|
});
|
||||||
const data = await response.json();
|
return score;
|
||||||
|
}
|
||||||
|
|
||||||
// Artificial delay for realism
|
function searchLessons(query, language) {
|
||||||
setTimeout(() => {
|
return lessons
|
||||||
appendMessage(data.reply, 'bot');
|
.map((lesson) => ({ ...lesson, score: scoreLesson(lesson, query, language) }))
|
||||||
}, 500);
|
.filter((lesson) => lesson.score > 0)
|
||||||
|
.sort((a, b) => b.score - a.score || a.title.localeCompare(b.title));
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderResults(results) {
|
||||||
|
activeResults = results;
|
||||||
|
els.resultCount.textContent = results.length ? `${results.length} result${results.length === 1 ? '' : 's'} ranked by relevance.` : 'No matches yet. Try another language or broader topic.';
|
||||||
|
if (!results.length) {
|
||||||
|
const hasQuery = els.query && els.query.value.trim().length >= 2;
|
||||||
|
els.resultsList.innerHTML = hasQuery
|
||||||
|
? `<div class="empty-state py-5"><div class="empty-icon" aria-hidden="true">?</div><h2 class="h5">No results found</h2><p class="text-secondary mb-0">Try “JSON”, “async”, “join”, or choose All languages.</p></div>`
|
||||||
|
: `<div class="empty-state py-5"><div class="empty-icon" aria-hidden="true">/</div><h2 class="h5">Start with a query</h2><p class="text-secondary mb-0">Search a topic or choose a suggested chip to preview the knowledge workflow.</p></div>`;
|
||||||
|
renderEmptyDetail();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
els.resultsList.innerHTML = results.map((lesson, index) => `
|
||||||
|
<button class="result-item ${lesson.id === selectedId ? 'active' : ''}" type="button" data-id="${escapeHtml(lesson.id)}" aria-label="Open ${escapeHtml(lesson.title)}">
|
||||||
|
<div class="d-flex justify-content-between gap-3">
|
||||||
|
<div class="result-title">${escapeHtml(lesson.title)}</div>
|
||||||
|
<div class="score">#${index + 1}</div>
|
||||||
|
</div>
|
||||||
|
<p class="result-excerpt">${escapeHtml(lesson.excerpt)}</p>
|
||||||
|
<div>${[lesson.language, ...lesson.tags].map(tag => `<span class="badge-soft">${escapeHtml(tag)}</span>`).join('')}</div>
|
||||||
|
</button>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderEmptyDetail() {
|
||||||
|
selectedId = null;
|
||||||
|
els.detail.innerHTML = `<div class="empty-state"><div class="empty-icon" aria-hidden="true">⌘</div><h2 class="h4">Choose a result</h2><p class="text-secondary mb-0">Open a result to see a concise explanation, tags, and copy-ready code examples.</p></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDetail(id) {
|
||||||
|
const lesson = lessons.find(item => item.id === id);
|
||||||
|
if (!lesson) return renderEmptyDetail();
|
||||||
|
selectedId = id;
|
||||||
|
els.detail.innerHTML = `
|
||||||
|
<div class="detail-meta">
|
||||||
|
<span class="badge-soft">${escapeHtml(lesson.language)}</span>
|
||||||
|
${lesson.tags.map(tag => `<span class="badge-soft">${escapeHtml(tag)}</span>`).join('')}
|
||||||
|
</div>
|
||||||
|
<h2 class="h3 mb-3">${escapeHtml(lesson.title)}</h2>
|
||||||
|
<p class="detail-summary">${escapeHtml(lesson.summary)}</p>
|
||||||
|
<h3 class="h6 mt-4">Code example</h3>
|
||||||
|
<pre class="code-block"><code>${escapeHtml(lesson.code)}</code></pre>
|
||||||
|
<div class="detail-actions">
|
||||||
|
<button type="button" class="btn btn-dark btn-sm" data-copy-code="${escapeHtml(lesson.id)}">Copy code</button>
|
||||||
|
<button type="button" class="btn btn-outline-secondary btn-sm" data-share-result="${escapeHtml(lesson.id)}">Share result</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
renderResults(activeResults);
|
||||||
|
updateUrl({ result: id });
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateUrl(extra = {}) {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const query = els.query.value.trim();
|
||||||
|
const language = els.language.value;
|
||||||
|
if (query) params.set('q', query); else params.delete('q');
|
||||||
|
if (language && language !== 'all') params.set('language', language); else params.delete('language');
|
||||||
|
if (extra.result) params.set('result', extra.result);
|
||||||
|
const next = `${window.location.pathname}${params.toString() ? `?${params}` : ''}#search`;
|
||||||
|
history.replaceState({}, '', next);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showToast(message) {
|
||||||
|
els.toastMessage.textContent = message;
|
||||||
|
if (window.bootstrap && toastInstance) toastInstance.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitSearch(showNotification = true) {
|
||||||
|
const query = els.query.value.trim();
|
||||||
|
if (query.length < 2) {
|
||||||
|
els.form.classList.add('was-validated');
|
||||||
|
els.query.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
els.form.classList.remove('was-validated');
|
||||||
|
selectedId = null;
|
||||||
|
const results = searchLessons(query, els.language.value);
|
||||||
|
renderResults(results);
|
||||||
|
if (results[0]) renderDetail(results[0].id);
|
||||||
|
updateUrl();
|
||||||
|
if (showNotification) showToast('Search complete. Results ranked locally for the MVP demo.');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function copyText(text, message) {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
showToast(message);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error:', error);
|
showToast('Copy failed. You can manually copy from the page.');
|
||||||
appendMessage("Sorry, something went wrong. Please try again.", 'bot');
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initFromUrl() {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const q = params.get('q');
|
||||||
|
const language = params.get('language');
|
||||||
|
const result = params.get('result');
|
||||||
|
if (q) els.query.value = q;
|
||||||
|
if (language && [...els.language.options].some(option => option.value === language || option.textContent === language)) els.language.value = language;
|
||||||
|
if (q && q.length >= 2) {
|
||||||
|
const results = searchLessons(q, els.language.value);
|
||||||
|
renderResults(results);
|
||||||
|
renderDetail(result && lessons.some(item => item.id === result) ? result : (results[0]?.id || null));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindEvents() {
|
||||||
|
els.form.addEventListener('submit', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
submitSearch();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
|
const resultButton = event.target.closest('[data-id]');
|
||||||
|
if (resultButton) {
|
||||||
|
renderDetail(resultButton.dataset.id);
|
||||||
|
document.getElementById('detail').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const chip = event.target.closest('.chip');
|
||||||
|
if (chip) {
|
||||||
|
els.query.value = chip.dataset.query || '';
|
||||||
|
els.language.value = chip.dataset.language || 'all';
|
||||||
|
submitSearch();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const languageCard = event.target.closest('.language-card');
|
||||||
|
if (languageCard) {
|
||||||
|
els.language.value = languageCard.dataset.language;
|
||||||
|
els.query.value = languageCard.dataset.language;
|
||||||
|
submitSearch();
|
||||||
|
document.getElementById('search').scrollIntoView({ behavior: 'smooth' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyCode = event.target.closest('[data-copy-code]');
|
||||||
|
if (copyCode) {
|
||||||
|
const lesson = lessons.find(item => item.id === copyCode.dataset.copyCode);
|
||||||
|
if (lesson) copyText(lesson.code, 'Code example copied.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const shareResult = event.target.closest('[data-share-result]');
|
||||||
|
if (shareResult) {
|
||||||
|
updateUrl({ result: shareResult.dataset.shareResult });
|
||||||
|
copyText(window.location.href, 'Shareable result link copied.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
els.copySearchLink.addEventListener('click', () => {
|
||||||
|
updateUrl(selectedId ? { result: selectedId } : {});
|
||||||
|
copyText(window.location.href, 'Shareable search link copied.');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
els.form = $('#searchForm');
|
||||||
|
els.query = $('#queryInput');
|
||||||
|
els.language = $('#languageFilter');
|
||||||
|
els.resultsList = $('#resultsList');
|
||||||
|
els.resultCount = $('#resultCount');
|
||||||
|
els.detail = $('#detail');
|
||||||
|
els.copySearchLink = $('#copySearchLink');
|
||||||
|
els.toastMessage = $('#toastMessage');
|
||||||
|
const toastEl = $('#appToast');
|
||||||
|
if (window.bootstrap && toastEl) toastInstance = new bootstrap.Toast(toastEl, { delay: 2800 });
|
||||||
|
renderResults([]);
|
||||||
|
bindEvents();
|
||||||
|
initFromUrl();
|
||||||
});
|
});
|
||||||
|
|||||||
312
index.php
312
index.php
@ -1,9 +1,10 @@
|
|||||||
<?php
|
<?php
|
||||||
declare(strict_types=1);
|
declare(strict_types=1);
|
||||||
@ini_set('display_errors', '1');
|
|
||||||
@error_reporting(E_ALL);
|
|
||||||
@date_default_timezone_set('UTC');
|
@date_default_timezone_set('UTC');
|
||||||
|
|
||||||
|
$projectName = $_SERVER['PROJECT_NAME'] ?? ($_SERVER['APP_NAME'] ?? 'CodeAtlas');
|
||||||
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A modern programming knowledge and global search platform for developers.';
|
||||||
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||||
$phpVersion = PHP_VERSION;
|
$phpVersion = PHP_VERSION;
|
||||||
$now = date('Y-m-d H:i:s');
|
$now = date('Y-m-d H:i:s');
|
||||||
?>
|
?>
|
||||||
@ -12,139 +13,210 @@ $now = date('Y-m-d H:i:s');
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>New Style</title>
|
<title><?= htmlspecialchars($projectName) ?> — Programming Search Platform</title>
|
||||||
<?php
|
|
||||||
// Read project preview data from environment
|
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
||||||
?>
|
|
||||||
<?php if ($projectDescription): ?>
|
<?php if ($projectDescription): ?>
|
||||||
<!-- Meta description -->
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
|
||||||
<!-- Open Graph meta tags -->
|
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<!-- Twitter meta tags -->
|
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php if ($projectImageUrl): ?>
|
<?php if ($projectImageUrl): ?>
|
||||||
<!-- Open Graph image -->
|
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
<!-- Twitter image -->
|
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?> — Programming Search Platform" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||||
<style>
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
:root {
|
<link rel="stylesheet" href="assets/css/custom.css?v=2026062701">
|
||||||
--bg-color-start: #6a11cb;
|
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<a class="skip-link" href="#main">Skip to main content</a>
|
||||||
<div class="card">
|
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<header class="site-header border-bottom bg-white sticky-top">
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
|
||||||
<span class="sr-only">Loading…</span>
|
<div class="container-xl">
|
||||||
|
<a class="navbar-brand d-flex align-items-center gap-2" href="#top" aria-label="<?= htmlspecialchars($projectName) ?> home">
|
||||||
|
<span class="brand-mark" aria-hidden="true">{ }</span>
|
||||||
|
<span><?= htmlspecialchars($projectName) ?></span>
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="mainNav">
|
||||||
|
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#search">Search</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#languages">Languages</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="#detail">Result detail</a></li>
|
||||||
|
<li class="nav-item"><a class="btn btn-dark btn-sm ms-lg-2" href="#provider">Configure provider</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
<section id="top" class="hero-section border-bottom">
|
||||||
|
<div class="container-xl py-5 py-lg-6">
|
||||||
|
<div class="row align-items-center g-4">
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div class="eyebrow mb-3">Programming language knowledge search</div>
|
||||||
|
<h1 class="display-5 fw-bold text-balance mb-3">Search code answers across languages from one precise workspace.</h1>
|
||||||
|
<p class="lead text-secondary mb-4">A first MVP slice for an AI-style developer search platform: enter a programming question, filter by language, inspect ranked results, open a structured explanation, and share the search URL.</p>
|
||||||
|
<div class="d-flex flex-column flex-sm-row gap-2">
|
||||||
|
<a class="btn btn-dark btn-lg" href="#search">Start searching</a>
|
||||||
|
<a class="btn btn-outline-secondary btn-lg" href="#languages">Browse languages</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-5">
|
||||||
|
<aside class="hero-panel" aria-label="Platform preview">
|
||||||
|
<div class="panel-topline d-flex justify-content-between align-items-center mb-3">
|
||||||
|
<span>global-search.js</span>
|
||||||
|
<span class="status-dot">Ready</span>
|
||||||
|
</div>
|
||||||
|
<div class="code-window" aria-hidden="true">
|
||||||
|
<div><span class="muted">const</span> query = <span class="string">"parse JSON in Go"</span>;</div>
|
||||||
|
<div><span class="muted">rank</span>(docs).filter(<span class="string">"Go"</span>);</div>
|
||||||
|
<div><span class="muted">open</span>(best.explanation);</div>
|
||||||
|
</div>
|
||||||
|
<dl class="runtime-grid mt-4 mb-0">
|
||||||
|
<div><dt>Runtime</dt><dd>PHP <?= htmlspecialchars($phpVersion) ?></dd></div>
|
||||||
|
<div><dt>Updated</dt><dd><?= htmlspecialchars($now) ?> UTC</dd></div>
|
||||||
|
</dl>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="search" class="section-pad">
|
||||||
|
<div class="container-xl">
|
||||||
|
<div class="section-heading mb-4">
|
||||||
|
<p class="eyebrow mb-2">Global query</p>
|
||||||
|
<h2 class="h1 mb-2">Find explanations and snippets</h2>
|
||||||
|
<p class="text-secondary mb-0">V1 uses a local demo index so the workflow works immediately. The provider card below shows where Google CSE or Algolia keys plug in next.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="app-shell border">
|
||||||
|
<form id="searchForm" class="search-card" novalidate>
|
||||||
|
<div class="row g-3 align-items-end">
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<label for="queryInput" class="form-label">Programming question</label>
|
||||||
|
<input id="queryInput" name="q" class="form-control form-control-lg" type="search" placeholder="Try: parse JSON in Go" minlength="2" autocomplete="off" required>
|
||||||
|
<div class="invalid-feedback">Enter at least 2 characters.</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-lg-3">
|
||||||
|
<label for="languageFilter" class="form-label">Language</label>
|
||||||
|
<select id="languageFilter" name="language" class="form-select form-select-lg">
|
||||||
|
<option value="all">All languages</option>
|
||||||
|
<option>JavaScript</option>
|
||||||
|
<option>Python</option>
|
||||||
|
<option>Go</option>
|
||||||
|
<option>SQL</option>
|
||||||
|
<option>PHP</option>
|
||||||
|
<option>TypeScript</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 col-lg-2 d-grid">
|
||||||
|
<button class="btn btn-dark btn-lg" type="submit">Search</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="quick-searches mt-3" aria-label="Suggested searches">
|
||||||
|
<button type="button" class="chip" data-query="async await JavaScript" data-language="JavaScript">async await</button>
|
||||||
|
<button type="button" class="chip" data-query="parse JSON in Go" data-language="Go">Go JSON</button>
|
||||||
|
<button type="button" class="chip" data-query="SQL join examples" data-language="SQL">SQL joins</button>
|
||||||
|
<button type="button" class="chip" data-query="Python list comprehension" data-language="Python">Python lists</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="row g-0 border-top">
|
||||||
|
<div class="col-lg-5 results-column border-end">
|
||||||
|
<div class="results-toolbar">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow mb-1">Ranked results</p>
|
||||||
|
<p id="resultCount" class="mb-0 text-secondary small">Search to see matching lessons.</p>
|
||||||
|
</div>
|
||||||
|
<button id="copySearchLink" type="button" class="btn btn-outline-secondary btn-sm">Copy link</button>
|
||||||
|
</div>
|
||||||
|
<div id="resultsList" class="results-list" aria-live="polite"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-7 detail-column">
|
||||||
|
<article id="detail" class="detail-panel" aria-live="polite">
|
||||||
|
<div class="empty-state">
|
||||||
|
<div class="empty-icon" aria-hidden="true">⌘</div>
|
||||||
|
<h2 class="h4">Choose a result</h2>
|
||||||
|
<p class="text-secondary mb-0">Open a result to see a concise explanation, tags, and copy-ready code examples.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="languages" class="section-pad bg-subtle border-top border-bottom">
|
||||||
|
<div class="container-xl">
|
||||||
|
<div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mb-4">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow mb-2">Browse</p>
|
||||||
|
<h2 class="h1 mb-0">Language categories</h2>
|
||||||
|
</div>
|
||||||
|
<p class="text-secondary narrow mb-0">These cards drive quick filters now and can become React routes or Algolia facets later.</p>
|
||||||
|
</div>
|
||||||
|
<div class="row g-3" id="languageCards">
|
||||||
|
<div class="col-sm-6 col-lg-4"><button class="language-card" data-language="JavaScript"><span>JavaScript</span><small>DOM, async, APIs</small></button></div>
|
||||||
|
<div class="col-sm-6 col-lg-4"><button class="language-card" data-language="Python"><span>Python</span><small>Data, scripts, APIs</small></button></div>
|
||||||
|
<div class="col-sm-6 col-lg-4"><button class="language-card" data-language="Go"><span>Go</span><small>Services, JSON, errors</small></button></div>
|
||||||
|
<div class="col-sm-6 col-lg-4"><button class="language-card" data-language="SQL"><span>SQL</span><small>Joins, filtering, indexes</small></button></div>
|
||||||
|
<div class="col-sm-6 col-lg-4"><button class="language-card" data-language="PHP"><span>PHP</span><small>PDO, forms, sessions</small></button></div>
|
||||||
|
<div class="col-sm-6 col-lg-4"><button class="language-card" data-language="TypeScript"><span>TypeScript</span><small>Types, generics, safety</small></button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="provider" class="section-pad">
|
||||||
|
<div class="container-xl">
|
||||||
|
<div class="row g-4 align-items-start">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<p class="eyebrow mb-2">External search provider</p>
|
||||||
|
<h2 class="h1 mb-3">Ready for Google CSE or Algolia</h2>
|
||||||
|
<p class="text-secondary">This first slice intentionally avoids a backend/database. The UI is provider-ready: swap the local demo index in <code>assets/js/main.js</code> with Google Custom Search JSON API or Algolia InstantSearch when keys are available.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="provider-card border">
|
||||||
|
<h3 class="h5 mb-3">Configuration checklist</h3>
|
||||||
|
<ol class="checklist mb-0">
|
||||||
|
<li>Create a Google Programmable Search Engine or Algolia app.</li>
|
||||||
|
<li>Restrict API keys by domain before production use.</li>
|
||||||
|
<li>Replace the demo search adapter with the provider client.</li>
|
||||||
|
<li>Keep query, language, and result id in the URL for sharing.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||||
|
<div id="appToast" class="toast align-items-center text-bg-dark border-0" role="status" aria-live="polite" aria-atomic="true">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div id="toastMessage" class="toast-body">Ready.</div>
|
||||||
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="site-footer border-top py-4">
|
||||||
|
<div class="container-xl d-flex flex-column flex-md-row justify-content-between gap-2">
|
||||||
|
<span><?= htmlspecialchars($projectName) ?> MVP slice</span>
|
||||||
|
<span class="text-secondary">No backend required yet · Search-ready UI · <a href="#search">Try a query</a></span>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="assets/js/main.js?v=2026062701" defer></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user