الصفحات متوسط
Wiki — Support / Help Center Landing
A reassuring, searchable help-center landing in the Zendesk / Intercom mold, built with vanilla HTML, CSS and JavaScript. A hero with a large how-can-we-help search bar live-filters an article preview dropdown, trending chips run demo searches, a category grid links topics with article counts, popular articles and an accessible FAQ accordion answer common questions, a was-this-helpful widget collects feedback, and a contact row offers chat, email and a status page. Calm teal accent, soft shadows, fully responsive.
فتح في المختبر
MCP
html css vanilla-js
الأهداف: JS HTML
الكود
:root {
--bg: #ffffff;
--bg-2: #f7f8fa;
--panel: #ffffff;
--ink: #1a1a1f;
--ink-2: #3a3a42;
--muted: #6b7280;
--line: rgba(20, 20, 30, 0.10);
--line-2: rgba(20, 20, 30, 0.18);
--link: #2563eb;
--link-hover: #1d4ed8;
/* Palette override: calm teal accent (support / help-center) */
--accent: #0d9488;
--accent-ink: #0f766e;
--accent-soft: #ccfbf1;
--accent-wash: #f0fdfa;
--note: #2563eb;
--tip: #16a34a;
--warn: #d97706;
--danger: #dc2626;
--code-bg: #f4f4f6;
--kbd-bg: #eceef2;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
--shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
--shadow-lg: 0 18px 50px rgba(16, 24, 40, 0.14);
--maxw: 1080px;
--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-ui);
color: var(--ink);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
.skip-link {
position: absolute;
left: -999px;
top: 8px;
background: var(--accent);
color: #fff;
padding: 10px 16px;
border-radius: var(--r-sm);
z-index: 100;
}
.skip-link:focus { left: 12px; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* ---------- TOPBAR ---------- */
.topbar {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--line);
}
.topbar__inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 24px;
height: 64px;
display: flex;
align-items: center;
gap: 20px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 800;
color: var(--ink);
font-size: 16px;
}
.brand__mark {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--accent-wash);
color: var(--accent);
border: 1px solid var(--accent-soft);
}
.brand__sub { color: var(--muted); font-weight: 600; }
.topnav {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
.topnav a {
color: var(--ink-2);
font-weight: 500;
font-size: 14px;
padding: 8px 12px;
border-radius: var(--r-sm);
}
.topnav a:hover { background: var(--bg-2); color: var(--ink); }
.topnav__status {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--line);
background: var(--bg-2);
font-size: 13px !important;
margin-left: 6px;
}
.dot {
width: 8px; height: 8px; border-radius: 50%;
display: inline-block;
background: var(--muted);
}
.dot--ok { background: var(--tip); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.nav-toggle {
display: none;
margin-left: auto;
width: 42px; height: 42px;
border: 1px solid var(--line);
background: var(--panel);
border-radius: var(--r-sm);
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.nav-toggle span {
width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
}
/* ---------- HERO ---------- */
.hero {
background:
radial-gradient(1100px 380px at 50% -120px, var(--accent-wash), transparent 70%),
linear-gradient(180deg, var(--bg-2), var(--bg));
border-bottom: 1px solid var(--line);
padding: 72px 24px 60px;
}
.hero__inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.hero__eyebrow {
margin: 0 0 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-ink);
}
.hero__title {
font-size: clamp(34px, 6vw, 52px);
font-weight: 800;
margin-bottom: 16px;
}
.hero__lede {
margin: 0 auto 30px;
max-width: 560px;
color: var(--ink-2);
font-size: 17px;
}
/* ---------- SEARCH ---------- */
.search {
position: relative;
max-width: 620px;
margin: 0 auto;
display: flex;
align-items: center;
}
.search__icon {
position: absolute;
left: 18px;
color: var(--muted);
display: grid;
place-items: center;
pointer-events: none;
}
.search__input {
width: 100%;
font-family: inherit;
font-size: 16px;
color: var(--ink);
padding: 18px 52px 18px 50px;
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
background: var(--panel);
box-shadow: var(--shadow-md);
transition: border-color 0.15s, box-shadow 0.15s;
}
.search__input::placeholder { color: var(--muted); }
.search__input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.16), var(--shadow-md);
}
.search__clear {
position: absolute;
right: 14px;
width: 30px; height: 30px;
border: none;
background: var(--bg-2);
color: var(--ink-2);
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
}
.search__clear:hover { background: var(--line); }
.search__results {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
text-align: left;
overflow: hidden;
z-index: 30;
}
.result {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
cursor: pointer;
color: var(--ink);
}
.result:last-child { border-bottom: none; }
.result:hover,
.result.is-active { background: var(--accent-wash); }
.result__title { font-weight: 600; font-size: 15px; }
.result__title mark {
background: var(--accent-soft);
color: var(--accent-ink);
padding: 0 2px;
border-radius: 3px;
}
.result__meta { font-size: 12.5px; color: var(--muted); }
.result--empty {
padding: 18px 16px;
color: var(--muted);
font-size: 14px;
cursor: default;
}
/* ---------- CHIPS ---------- */
.chips {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
}
.chips__label {
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.chip {
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
background: var(--panel);
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 7px 14px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover {
background: var(--accent-wash);
border-color: var(--accent);
color: var(--accent-ink);
}
/* ---------- SECTIONS ---------- */
.section {
max-width: var(--maxw);
margin: 0 auto;
padding: 64px 24px;
}
.section--alt {
max-width: none;
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.section--alt > .section__head,
.section--alt > .articles,
.section--alt > .contact-grid {
max-width: var(--maxw);
margin-left: auto;
margin-right: auto;
}
.section__head { margin-bottom: 32px; }
.section__head h2 {
font-size: clamp(24px, 4vw, 30px);
font-weight: 800;
margin-bottom: 8px;
}
.section__head p { margin: 0; color: var(--muted); font-size: 16px; }
/* ---------- CATEGORY GRID ---------- */
.cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.cat {
display: flex;
gap: 14px;
padding: 22px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-lg);
color: var(--ink);
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cat:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--accent-soft);
}
.cat__icon {
flex: none;
width: 46px; height: 46px;
display: grid;
place-items: center;
border-radius: var(--r-md);
background: var(--accent-wash);
color: var(--accent);
border: 1px solid var(--accent-soft);
}
.cat__icon[data-tone="billing"] { background: #eff6ff; color: #2563eb; border-color: #dbeafe; }
.cat__icon[data-tone="troubleshooting"] { background: #fff7ed; color: #d97706; border-color: #fed7aa; }
.cat__icon[data-tone="security"] { background: #faf5ff; color: #9333ea; border-color: #e9d5ff; }
.cat__icon[data-tone="api"] { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.cat__body { display: flex; flex-direction: column; gap: 4px; }
.cat__title { font-weight: 700; font-size: 16px; }
.cat__desc { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.cat__count {
margin-top: 4px;
font-size: 12.5px;
font-weight: 600;
color: var(--accent-ink);
}
/* ---------- POPULAR ARTICLES ---------- */
.articles {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.article a {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 14px;
align-items: center;
padding: 16px 18px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-md);
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.article a:hover {
border-color: var(--accent);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.article__rank {
grid-row: 1 / 3;
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
color: var(--accent);
opacity: 0.7;
}
.article__title { font-weight: 600; font-size: 15px; line-height: 1.4; }
.article__meta { font-size: 12.5px; color: var(--muted); }
/* ---------- FAQ ---------- */
.faq {
max-width: 760px;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--panel);
overflow: hidden;
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: none; }
.faq__q { margin: 0; }
.faq__btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
font-family: inherit;
font-size: 16px;
font-weight: 600;
color: var(--ink);
background: none;
border: none;
padding: 20px 22px;
cursor: pointer;
}
.faq__btn:hover { background: var(--bg-2); }
.faq__chev {
flex: none;
width: 12px; height: 12px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform 0.22s ease;
margin-top: -4px;
}
.faq__btn[aria-expanded="true"] .faq__chev {
transform: rotate(-135deg);
margin-top: 2px;
border-color: var(--accent);
}
.faq__a {
padding: 0 22px 22px;
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.65;
}
.faq__a p { margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }
.code {
font-family: var(--font-mono);
font-size: 13px;
background: var(--code-bg);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 12px 14px;
overflow-x: auto;
margin: 0 0 12px;
color: var(--ink);
}
kbd {
font-family: var(--font-mono);
font-size: 12px;
background: var(--kbd-bg);
border: 1px solid var(--line-2);
border-bottom-width: 2px;
border-radius: 5px;
padding: 1px 6px;
color: var(--ink);
}
/* ---------- WAS THIS HELPFUL ---------- */
.helpful {
max-width: 760px;
margin: 28px 0 0;
padding: 22px 24px;
background: var(--accent-wash);
border: 1px solid var(--accent-soft);
border-radius: var(--r-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.helpful__q { margin: 0; font-weight: 700; color: var(--accent-ink); }
.helpful__actions { display: flex; gap: 10px; }
.helpful__btn {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--ink);
background: var(--panel);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 9px 16px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.helpful__btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.helpful__btn[aria-pressed="true"] {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.helpful.is-done .helpful__q { color: var(--accent-ink); }
/* ---------- CONTACT ---------- */
.contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.contact {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 26px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
transition: box-shadow 0.15s, transform 0.15s;
}
.contact:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.contact__icon {
width: 52px; height: 52px;
display: grid;
place-items: center;
border-radius: 14px;
background: var(--accent-wash);
color: var(--accent);
border: 1px solid var(--accent-soft);
margin-bottom: 14px;
}
.contact__icon[data-tone="email"] { background: #eff6ff; color: #2563eb; border-color: #dbeafe; }
.contact__icon[data-tone="status"] { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.contact__title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.contact__desc { color: var(--ink-2); font-size: 14.5px; margin: 0 0 18px; line-height: 1.55; }
.contact .btn { margin-top: auto; }
.btn {
font-family: inherit;
font-size: 14px;
font-weight: 600;
border-radius: var(--r-sm);
padding: 11px 20px;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-ink); color: #fff; }
.btn--ghost { background: var(--panel); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
/* ---------- FOOTER ---------- */
.footer {
background: var(--ink);
color: #cbd5e1;
}
.footer__inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 48px 24px 36px;
display: grid;
grid-template-columns: 1.4fr 2fr;
gap: 40px;
}
.footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
.footer__brand .brand__mark {
background: rgba(13, 148, 136, 0.18);
border-color: rgba(13, 148, 136, 0.35);
color: var(--accent-soft);
}
.footer__brand p { margin: 0; font-size: 14px; line-height: 1.6; color: #94a3b8; }
.footer__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.footer__cols h4 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #e2e8f0;
margin-bottom: 12px;
}
.footer__cols a {
display: block;
color: #94a3b8;
font-size: 14px;
padding: 4px 0;
}
.footer__cols a:hover { color: #fff; }
.footer__bar {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 18px 24px;
text-align: center;
font-size: 13px;
color: #64748b;
}
/* ---------- TOAST ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 24px);
background: var(--ink);
color: #fff;
font-size: 14px;
font-weight: 500;
padding: 12px 20px;
border-radius: 999px;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s, transform 0.25s;
z-index: 80;
}
.toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px) {
.topnav {
position: absolute;
top: 64px;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 2px;
background: var(--panel);
border-bottom: 1px solid var(--line);
padding: 10px 16px 16px;
box-shadow: var(--shadow-md);
display: none;
}
.topnav.is-open { display: flex; }
.topnav a { padding: 12px 12px; }
.topnav__status { margin-left: 0; margin-top: 4px; justify-content: center; }
.nav-toggle { display: flex; }
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.articles { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 520px) {
.hero { padding: 52px 18px 44px; }
.section { padding: 48px 18px; }
.topbar__inner { padding: 0 16px; gap: 12px; }
.cat-grid { grid-template-columns: 1fr; }
.search__input { font-size: 15px; padding: 16px 48px 16px 46px; }
.footer__cols { grid-template-columns: repeat(2, 1fr); }
.helpful { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; transition: none !important; }
}(function () {
"use strict";
/* ---------------- Toast helper ---------------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-visible");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-visible");
}, 2600);
}
/* ---------------- Article index (fictional) ---------------- */
var ARTICLES = [
{ title: "How to reset your password and recover a locked account", cat: "Account", read: "3 min", kw: "reset password forgot login locked recover account" },
{ title: "Create, scope and rotate an API key", cat: "API", read: "4 min", kw: "api key token rotate bearer developer aurora" },
{ title: "Download invoices and update billing details", cat: "Billing", read: "2 min", kw: "invoice billing receipt pdf payment card tax" },
{ title: "Invite teammates and manage workspace roles", cat: "Getting Started", read: "3 min", kw: "invite team member teammate role workspace seat" },
{ title: "Why is my deploy stuck on Queued?", cat: "Troubleshooting", read: "5 min", kw: "deploy stuck queued build error troubleshoot slow" },
{ title: "Enable two-factor authentication and recovery codes", cat: "Security", read: "4 min", kw: "2fa two factor authentication mfa recovery codes security" },
{ title: "Export all of your workspace data", cat: "Account", read: "3 min", kw: "export data download archive backup json csv" },
{ title: "Upgrade, downgrade or cancel your plan", cat: "Billing", read: "3 min", kw: "upgrade downgrade cancel plan subscription billing" },
{ title: "Set up single sign-on (SSO) with SAML", cat: "Security", read: "6 min", kw: "sso saml single sign on identity provider okta security" },
{ title: "Configure webhooks for project events", cat: "API", read: "5 min", kw: "webhook event api integration payload endpoint" },
{ title: "Understand rate limits on the Aurora API", cat: "API", read: "4 min", kw: "rate limit api throttle 429 quota aurora" },
{ title: "Add a custom domain to your workspace", cat: "Getting Started", read: "4 min", kw: "custom domain dns cname workspace setup" },
{ title: "Fix sync errors between devices", cat: "Troubleshooting", read: "4 min", kw: "sync error devices conflict offline troubleshoot" },
{ title: "Change your account email address", cat: "Account", read: "2 min", kw: "change email address account profile login" },
{ title: "Apply a tax ID or VAT number to invoices", cat: "Billing", read: "2 min", kw: "tax vat id invoice billing eu number" },
];
/* ---------------- Live search ---------------- */
var form = document.getElementById("searchForm");
var input = document.getElementById("searchInput");
var results = document.getElementById("searchResults");
var clearBtn = document.getElementById("searchClear");
var activeIndex = -1;
var currentMatches = [];
function escapeHtml(s) {
return s.replace(/[&<>"']/g, function (c) {
return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c];
});
}
function highlight(title, query) {
var safe = escapeHtml(title);
var terms = query.trim().split(/\s+/).filter(Boolean);
terms.forEach(function (t) {
if (t.length < 2) return;
var re = new RegExp("(" + t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")", "ig");
safe = safe.replace(re, "<mark>$1</mark>");
});
return safe;
}
function search(query) {
var q = query.trim().toLowerCase();
if (!q) return [];
var terms = q.split(/\s+/).filter(Boolean);
return ARTICLES.map(function (a) {
var hay = (a.title + " " + a.kw + " " + a.cat).toLowerCase();
var score = 0;
terms.forEach(function (t) {
if (hay.indexOf(t) !== -1) score += 1;
if (a.title.toLowerCase().indexOf(t) !== -1) score += 1;
});
return { a: a, score: score };
})
.filter(function (m) { return m.score > 0; })
.sort(function (x, y) { return y.score - x.score; })
.slice(0, 6)
.map(function (m) { return m.a; });
}
function renderResults(query) {
currentMatches = search(query);
activeIndex = -1;
if (!query.trim()) {
hideResults();
return;
}
if (currentMatches.length === 0) {
results.innerHTML =
'<div class="result result--empty">No articles match “' +
escapeHtml(query) +
"”. Try different keywords or contact support.</div>";
} else {
results.innerHTML = currentMatches
.map(function (a, i) {
return (
'<div class="result" role="option" id="result-' + i + '" tabindex="-1">' +
'<span class="result__title">' + highlight(a.title, query) + "</span>" +
'<span class="result__meta">' + a.cat + " · " + a.read + " read</span>" +
"</div>"
);
})
.join("");
}
showResults();
}
function showResults() {
results.hidden = false;
input.setAttribute("aria-expanded", "true");
}
function hideResults() {
results.hidden = true;
input.setAttribute("aria-expanded", "false");
activeIndex = -1;
}
function openArticle(a) {
if (a) toast("Opening: " + a.title);
hideResults();
}
function setActive(i) {
var nodes = results.querySelectorAll(".result");
nodes.forEach(function (n) { n.classList.remove("is-active"); });
if (i >= 0 && i < nodes.length) {
nodes[i].classList.add("is-active");
input.setAttribute("aria-activedescendant", "result-" + i);
nodes[i].scrollIntoView({ block: "nearest" });
} else {
input.removeAttribute("aria-activedescendant");
}
}
if (input) {
input.addEventListener("input", function () {
clearBtn.hidden = input.value.length === 0;
renderResults(input.value);
});
input.addEventListener("focus", function () {
if (input.value.trim()) renderResults(input.value);
});
input.addEventListener("keydown", function (e) {
var max = currentMatches.length;
if (e.key === "ArrowDown") {
e.preventDefault();
if (!max) return;
activeIndex = (activeIndex + 1) % max;
setActive(activeIndex);
} else if (e.key === "ArrowUp") {
e.preventDefault();
if (!max) return;
activeIndex = (activeIndex - 1 + max) % max;
setActive(activeIndex);
} else if (e.key === "Enter") {
if (activeIndex >= 0) {
e.preventDefault();
openArticle(currentMatches[activeIndex]);
}
} else if (e.key === "Escape") {
hideResults();
}
});
results.addEventListener("click", function (e) {
var node = e.target.closest(".result");
if (!node || node.classList.contains("result--empty")) return;
var nodes = Array.prototype.slice.call(results.querySelectorAll(".result"));
var i = nodes.indexOf(node);
openArticle(currentMatches[i]);
});
}
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
if (currentMatches.length) {
openArticle(currentMatches[activeIndex >= 0 ? activeIndex : 0]);
} else if (input.value.trim()) {
toast("Searching for “" + input.value.trim() + "”…");
}
});
form.addEventListener("reset", function () {
clearBtn.hidden = true;
hideResults();
setTimeout(function () { input.focus(); }, 0);
});
}
/* Close dropdown on outside click */
document.addEventListener("click", function (e) {
if (form && !form.contains(e.target)) hideResults();
});
/* ---------------- Trending chips ---------------- */
document.querySelectorAll(".chip").forEach(function (chip) {
chip.addEventListener("click", function () {
var q = chip.getAttribute("data-q") || chip.textContent;
input.value = q;
clearBtn.hidden = false;
input.focus();
renderResults(q);
});
});
/* ---------------- FAQ accordion ---------------- */
var faqList = document.getElementById("faqList");
if (faqList) {
faqList.addEventListener("click", function (e) {
var btn = e.target.closest(".faq__btn");
if (!btn) return;
var panel = btn.parentElement.nextElementSibling;
var expanded = btn.getAttribute("aria-expanded") === "true";
btn.setAttribute("aria-expanded", String(!expanded));
if (panel) panel.hidden = expanded;
});
}
/* ---------------- Was this helpful ---------------- */
var helpful = document.getElementById("helpful");
if (helpful) {
helpful.addEventListener("click", function (e) {
var btn = e.target.closest(".helpful__btn");
if (!btn || helpful.classList.contains("is-done")) return;
var vote = btn.getAttribute("data-vote");
helpful.querySelectorAll(".helpful__btn").forEach(function (b) {
b.setAttribute("aria-pressed", b === btn ? "true" : "false");
b.disabled = true;
});
helpful.classList.add("is-done");
var q = helpful.querySelector(".helpful__q");
if (q) q.textContent = vote === "yes"
? "Thanks! Glad this helped."
: "Thanks for the feedback — we'll improve this page.";
toast(vote === "yes" ? "Marked as helpful" : "Feedback recorded");
});
}
/* ---------------- Mobile nav ---------------- */
var navToggle = document.getElementById("navToggle");
var topnav = document.querySelector(".topnav");
if (navToggle && topnav) {
topnav.id = "topnav";
navToggle.setAttribute("aria-controls", "topnav");
navToggle.addEventListener("click", function () {
var open = topnav.classList.toggle("is-open");
navToggle.setAttribute("aria-expanded", String(open));
});
topnav.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
topnav.classList.remove("is-open");
navToggle.setAttribute("aria-expanded", "false");
}
});
}
/* ---------------- Contact actions ---------------- */
var chatBtn = document.getElementById("chatBtn");
if (chatBtn) chatBtn.addEventListener("click", function () {
toast("Connecting you to a support specialist…");
});
var emailBtn = document.getElementById("emailBtn");
if (emailBtn) emailBtn.addEventListener("click", function (e) {
e.preventDefault();
toast("Copy [email protected] to start an email");
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Nimbus Help Center — How can we help?</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="topbar">
<div class="topbar__inner">
<a class="brand" href="#" aria-label="Nimbus Help Center home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19a4.5 4.5 0 0 0 .5-8.97A6 6 0 0 0 6.34 9.5 4 4 0 0 0 6.5 19z"/></svg>
</span>
<span class="brand__text">Nimbus <span class="brand__sub">Help Center</span></span>
</a>
<nav class="topnav" aria-label="Primary">
<a href="#categories">Browse</a>
<a href="#popular">Popular</a>
<a href="#faq">FAQ</a>
<a href="#contact">Contact</a>
<a class="topnav__status" href="#contact"><span class="dot dot--ok" aria-hidden="true"></span> All systems operational</a>
</nav>
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="topnav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="hero__inner">
<p class="hero__eyebrow">Support · Knowledge Base</p>
<h1 class="hero__title">How can we help?</h1>
<p class="hero__lede">Search 480+ guides on Project Nimbus, or browse a category below. Most questions are answered in under two minutes.</p>
<form class="search" id="searchForm" role="search" autocomplete="off">
<span class="search__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
</span>
<input
id="searchInput"
class="search__input"
type="search"
placeholder="Search for answers… e.g. reset password, billing, API key"
aria-label="Search the help center"
aria-expanded="false"
aria-controls="searchResults"
role="combobox"
aria-autocomplete="list"
/>
<button type="reset" class="search__clear" id="searchClear" aria-label="Clear search" hidden>
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
<div class="search__results" id="searchResults" role="listbox" aria-label="Search suggestions" hidden></div>
</form>
<div class="chips" aria-label="Trending questions">
<span class="chips__label">Trending:</span>
<button class="chip" data-q="reset password">Reset my password</button>
<button class="chip" data-q="invoice billing">Download an invoice</button>
<button class="chip" data-q="api key">Create an API key</button>
<button class="chip" data-q="invite team member">Invite a teammate</button>
<button class="chip" data-q="export data">Export my data</button>
</div>
</div>
</section>
<!-- CATEGORIES -->
<section class="section" id="categories" aria-labelledby="categories-h">
<div class="section__head">
<h2 id="categories-h">Browse by category</h2>
<p>Pick a topic to see step-by-step guides and reference docs.</p>
</div>
<div class="cat-grid">
<a class="cat" href="#popular">
<span class="cat__icon" data-tone="getting-started" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m13 2-3 7h6l-3 7"/><circle cx="12" cy="12" r="10"/></svg>
</span>
<span class="cat__body">
<span class="cat__title">Getting Started</span>
<span class="cat__desc">Set up your workspace, invite teammates, first deploy.</span>
<span class="cat__count">42 articles</span>
</span>
</a>
<a class="cat" href="#faq">
<span class="cat__icon" data-tone="account" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</span>
<span class="cat__body">
<span class="cat__title">Account & Login</span>
<span class="cat__desc">Passwords, two-factor, sessions and profile settings.</span>
<span class="cat__count">31 articles</span>
</span>
</a>
<a class="cat" href="#faq">
<span class="cat__icon" data-tone="billing" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
</span>
<span class="cat__body">
<span class="cat__title">Billing & Plans</span>
<span class="cat__desc">Invoices, upgrades, seats, refunds and tax IDs.</span>
<span class="cat__count">38 articles</span>
</span>
</a>
<a class="cat" href="#faq">
<span class="cat__icon" data-tone="troubleshooting" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a4 4 0 0 0-5.6 5.6L3 18v3h3l6.1-6.1a4 4 0 0 0 5.6-5.6l-2.5 2.5-2.8-.5-.5-2.8z"/></svg>
</span>
<span class="cat__body">
<span class="cat__title">Troubleshooting</span>
<span class="cat__desc">Errors, slow loads, sync issues and known incidents.</span>
<span class="cat__count">54 articles</span>
</span>
</a>
<a class="cat" href="#popular">
<span class="cat__icon" data-tone="api" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg>
</span>
<span class="cat__body">
<span class="cat__title">API & Integrations</span>
<span class="cat__desc">Keys, webhooks, rate limits and the Aurora SDK.</span>
<span class="cat__count">47 articles</span>
</span>
</a>
<a class="cat" href="#faq">
<span class="cat__icon" data-tone="security" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</span>
<span class="cat__body">
<span class="cat__title">Security & Privacy</span>
<span class="cat__desc">SSO, audit logs, data residency and compliance.</span>
<span class="cat__count">26 articles</span>
</span>
</a>
</div>
</section>
<!-- POPULAR -->
<section class="section section--alt" id="popular" aria-labelledby="popular-h">
<div class="section__head">
<h2 id="popular-h">Popular articles</h2>
<p>The guides teammates open most this week.</p>
</div>
<ul class="articles" id="popularList">
<li class="article"><a href="#faq"><span class="article__rank">01</span><span class="article__title">How to reset your password and recover a locked account</span><span class="article__meta">Account · 3 min read</span></a></li>
<li class="article"><a href="#faq"><span class="article__rank">02</span><span class="article__title">Create, scope and rotate an API key in the Aurora dashboard</span><span class="article__meta">API · 4 min read</span></a></li>
<li class="article"><a href="#faq"><span class="article__rank">03</span><span class="article__title">Download invoices and update your billing details</span><span class="article__meta">Billing · 2 min read</span></a></li>
<li class="article"><a href="#faq"><span class="article__rank">04</span><span class="article__title">Invite teammates and manage workspace roles</span><span class="article__meta">Getting Started · 3 min read</span></a></li>
<li class="article"><a href="#faq"><span class="article__rank">05</span><span class="article__title">Why is my deploy stuck on “Queued”? Common causes</span><span class="article__meta">Troubleshooting · 5 min read</span></a></li>
<li class="article"><a href="#faq"><span class="article__rank">06</span><span class="article__title">Enable two-factor authentication and recovery codes</span><span class="article__meta">Security · 4 min read</span></a></li>
</ul>
</section>
<!-- FAQ -->
<section class="section" id="faq" aria-labelledby="faq-h">
<div class="section__head">
<h2 id="faq-h">Frequently asked questions</h2>
<p>Quick answers to the things people ask us most.</p>
</div>
<div class="faq" id="faqList">
<div class="faq__item">
<h3 class="faq__q">
<button type="button" class="faq__btn" aria-expanded="false">
<span>How do I reset my password?</span>
<span class="faq__chev" aria-hidden="true"></span>
</button>
</h3>
<div class="faq__a" role="region" hidden>
<p>Go to <a href="#main">the login page</a> and choose <strong>Forgot password</strong>. We'll email a secure reset link to your account address — it expires after 30 minutes. If it doesn't arrive, check spam or use the <kbd>Resend</kbd> button. SSO users reset their password with their identity provider instead.</p>
</div>
</div>
<div class="faq__item">
<h3 class="faq__q">
<button type="button" class="faq__btn" aria-expanded="false">
<span>Where can I download my invoices?</span>
<span class="faq__chev" aria-hidden="true"></span>
</button>
</h3>
<div class="faq__a" role="region" hidden>
<p>Open <strong>Settings → Billing → Invoices</strong>. Every invoice is available as a PDF, with your tax ID and billing address included. Workspace owners and billing admins can download invoices; other roles can request access from an owner.</p>
</div>
</div>
<div class="faq__item">
<h3 class="faq__q">
<button type="button" class="faq__btn" aria-expanded="false">
<span>How do I create an API key?</span>
<span class="faq__chev" aria-hidden="true"></span>
</button>
</h3>
<div class="faq__a" role="region" hidden>
<p>In the Aurora dashboard, go to <strong>Developers → API keys → New key</strong>. Give it a name, choose a scope, and copy the secret immediately — it is shown only once. Use it as a bearer token:</p>
<pre class="code"><code>curl https://api.nimbus.dev/v1/projects \
-H "Authorization: Bearer nbs_live_••••••••"</code></pre>
<p>Rotate keys regularly and never commit them to source control.</p>
</div>
</div>
<div class="faq__item">
<h3 class="faq__q">
<button type="button" class="faq__btn" aria-expanded="false">
<span>Can I export all of my data?</span>
<span class="faq__chev" aria-hidden="true"></span>
</button>
</h3>
<div class="faq__a" role="region" hidden>
<p>Yes. Go to <strong>Settings → Data → Export</strong> and request a full export. We package your projects, documents and activity into a downloadable archive (JSON + CSV) and email you when it's ready, usually within an hour.</p>
</div>
</div>
<div class="faq__item">
<h3 class="faq__q">
<button type="button" class="faq__btn" aria-expanded="false">
<span>What happens when I cancel my plan?</span>
<span class="faq__chev" aria-hidden="true"></span>
</button>
</h3>
<div class="faq__a" role="region" hidden>
<p>Your workspace stays active until the end of the current billing period, then moves to the free Starter tier. No data is deleted — paid features are simply paused. You can re-subscribe at any time and pick up exactly where you left off.</p>
</div>
</div>
</div>
<!-- WAS THIS HELPFUL -->
<div class="helpful" id="helpful">
<p class="helpful__q">Was this page helpful?</p>
<div class="helpful__actions">
<button class="helpful__btn" data-vote="yes">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88z"/></svg>
Yes
</button>
<button class="helpful__btn" data-vote="no">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88z"/></svg>
No
</button>
</div>
</div>
</section>
<!-- CONTACT -->
<section class="section section--alt" id="contact" aria-labelledby="contact-h">
<div class="section__head">
<h2 id="contact-h">Still need help?</h2>
<p>Our team replies fast — pick whichever works for you.</p>
</div>
<div class="contact-grid">
<div class="contact">
<span class="contact__icon" data-tone="chat" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</span>
<h3 class="contact__title">Live chat</h3>
<p class="contact__desc">Chat with a support specialist. Typical reply in about 2 minutes.</p>
<button class="btn btn--primary" id="chatBtn">Start a chat</button>
</div>
<div class="contact">
<span class="contact__icon" data-tone="email" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>
</span>
<h3 class="contact__title">Email us</h3>
<p class="contact__desc">Send details and screenshots. We answer within one business day.</p>
<a class="btn btn--ghost" href="#contact" id="emailBtn">[email protected]</a>
</div>
<div class="contact">
<span class="contact__icon" data-tone="status" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</span>
<h3 class="contact__title">System status</h3>
<p class="contact__desc"><span class="dot dot--ok" aria-hidden="true"></span> All systems operational. Check live uptime and incidents.</p>
<a class="btn btn--ghost" href="#contact">View status page</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__inner">
<div class="footer__brand">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19a4.5 4.5 0 0 0 .5-8.97A6 6 0 0 0 6.34 9.5 4 4 0 0 0 6.5 19z"/></svg>
</span>
<p>Nimbus Help Center — your guide to Project Nimbus & the Aurora platform.</p>
</div>
<nav class="footer__cols" aria-label="Footer">
<div>
<h4>Help</h4>
<a href="#categories">Browse topics</a>
<a href="#popular">Popular articles</a>
<a href="#faq">FAQ</a>
</div>
<div>
<h4>Company</h4>
<a href="#">About</a>
<a href="#">Changelog</a>
<a href="#contact">Contact</a>
</div>
<div>
<h4>Legal</h4>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Security</a>
</div>
</nav>
</div>
<div class="footer__bar">© 2026 Nimbus, Inc. · Illustrative demo — fictional data.</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Support / Help Center Landing
A friendly, self-contained help-center landing for the fictional Nimbus Help Center, covering Project Nimbus and the Aurora platform. It opens with a calm hero — a large “How can we help?” search bar and a row of trending-question chips — followed by a category grid (Getting Started, Account, Billing, Troubleshooting, API, Security) with icons and article counts, a popular-articles list, an FAQ accordion, a “was this helpful?” widget, and a “still need help?” contact row offering live chat, email and a system status page.
The hero search is the centerpiece: typing live-filters a small in-memory article index and renders a suggestion dropdown with highlighted matches, keyboard navigation (arrow keys, Enter, Escape), an active-descendant combobox pattern, and a clear button. The trending chips inject demo queries and trigger the same search. The FAQ uses a semantic, aria-expanded accordion, the helpful widget records a one-time vote via aria-pressed, and a small toast() helper confirms every action. On narrow screens the top navigation collapses into a toggle drawer.
Everything is vanilla — no frameworks, no build step. The teal accent, soft shadows and generous spacing keep the page reassuring and easy to scan, with semantic landmarks, visible focus rings and AA-contrast text throughout.
Illustrative UI only — fictional articles, products, and data.