Pagine Medio
Salon — Client Portal
A luxe client account portal for a boutique salon. A warm greeting header pairs with a Lumière Rewards loyalty pill and a live account summary. Tabbed sections move between upcoming appointments with reschedule and inline-confirm cancel, a searchable past-visit history with one-tap rebook, and saved favorite services and stylists with toggleable hearts. A your-stylist-recommends rail and live counts keep everything feeling personal, current, and quietly premium.
Apri in Lab
MCP
html css vanilla-js
Target: JS HTML
Codice
:root {
--serif: "Cormorant Garamond", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--gold: #b08d57;
--gold-d: #8c6d3f;
--gold-soft: #efe2cf;
--rose: #c9a78f;
--rose-soft: #f3e6dc;
--ink: #1c1814;
--ink-2: #3d362f;
--muted: #8a7d70;
--cream: #f7f1e8;
--bg: #faf6ef;
--white: #ffffff;
--line: rgba(28, 24, 20, 0.1);
--line-2: rgba(28, 24, 20, 0.18);
--ok: #5f8a6b;
--warn: #c08a3e;
--danger: #b3503e;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--sh-sm: 0 1px 2px rgba(28, 24, 20, 0.05), 0 1px 3px rgba(28, 24, 20, 0.04);
--sh-md: 0 6px 22px rgba(28, 24, 20, 0.07), 0 2px 6px rgba(28, 24, 20, 0.05);
--sh-lg: 0 18px 50px rgba(28, 24, 20, 0.12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 15px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.12; letter-spacing: 0.01em; }
.eyebrow {
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-d);
}
.portal {
max-width: 1120px;
margin: 0 auto;
padding: 36px 24px 80px;
}
/* ===== Hero ===== */
.hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
padding-bottom: 30px;
border-bottom: 1px solid var(--line);
}
.hero__brand { display: flex; gap: 18px; align-items: center; }
.hero__mark {
display: grid;
place-items: center;
width: 56px;
height: 56px;
flex: none;
border-radius: 50%;
background: linear-gradient(150deg, var(--gold) 0%, var(--gold-d) 100%);
color: var(--white);
font-family: var(--serif);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.04em;
box-shadow: var(--sh-md);
}
.hero__greet { font-size: 34px; margin-top: 6px; color: var(--ink); }
.hero__greet span { font-style: italic; color: var(--gold-d); }
.hero__sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.hero__sub strong { color: var(--ink-2); }
.hero__loyalty { flex: none; }
.loyalty {
display: grid;
gap: 5px;
min-width: 250px;
padding: 18px 22px;
background: var(--white);
border: 1px solid var(--gold-soft);
border-radius: var(--r-lg);
box-shadow: var(--sh-md);
}
.loyalty__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-d);
}
.loyalty__pts { font-family: var(--serif); font-size: 28px; color: var(--ink); line-height: 1; }
.loyalty__pts strong { font-weight: 700; }
.loyalty__tier { font-size: 12px; color: var(--muted); }
.loyalty__bar {
margin-top: 7px;
height: 6px;
border-radius: 99px;
background: var(--rose-soft);
overflow: hidden;
}
.loyalty__bar i {
display: block;
height: 100%;
width: var(--w, 0%);
border-radius: 99px;
background: linear-gradient(90deg, var(--rose), var(--gold));
}
/* ===== Stats ===== */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 26px 0 8px;
}
.stat {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px 18px;
box-shadow: var(--sh-sm);
}
.stat b { display: block; font-family: var(--serif); font-size: 26px; color: var(--ink); line-height: 1; }
.stat span { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
/* ===== Tabs ===== */
.tabs {
display: flex;
gap: 6px;
margin: 28px 0 22px;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.tab {
appearance: none;
border: 0;
background: none;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--muted);
padding: 11px 16px;
cursor: pointer;
position: relative;
border-radius: var(--r-sm) var(--r-sm) 0 0;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.18s ease;
}
.tab:hover { color: var(--ink-2); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after {
content: "";
position: absolute;
left: 12px; right: 12px; bottom: -1px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-d));
}
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tab__count {
font-size: 11px;
font-weight: 700;
min-width: 20px;
height: 20px;
padding: 0 6px;
display: inline-grid;
place-items: center;
border-radius: 99px;
background: var(--gold-soft);
color: var(--gold-d);
}
/* ===== Layout ===== */
.layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 30px;
align-items: start;
}
.panel { animation: rise 0.32s ease; }
.panel[hidden] { display: none; }
@keyframes rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* ===== Upcoming cards ===== */
.cards { display: grid; gap: 16px; }
.appt {
position: relative;
display: grid;
grid-template-columns: 78px 1fr auto;
gap: 18px;
align-items: center;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 18px 20px;
box-shadow: var(--sh-sm);
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.appt:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--gold-soft); }
.appt::before {
content: "";
position: absolute;
left: 0; top: 16px; bottom: 16px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(var(--rose), var(--gold));
}
.datechip {
text-align: center;
border-radius: var(--r-md);
background: var(--cream);
border: 1px solid var(--gold-soft);
padding: 10px 8px;
}
.datechip .m { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-d); }
.datechip .d { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1; }
.datechip .t { font-size: 11px; color: var(--muted); margin-top: 2px; }
.appt__svc { font-family: var(--serif); font-size: 21px; color: var(--ink); }
.appt__meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.appt__meta b { color: var(--ink-2); font-weight: 600; }
.appt__tags { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.pill {
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 99px;
background: var(--rose-soft);
color: var(--gold-d);
letter-spacing: 0.02em;
}
.pill--soft { background: var(--cream); color: var(--ink-2); }
.appt__actions { display: flex; flex-direction: column; gap: 8px; }
/* Buttons */
.btn {
appearance: none;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
border-radius: 99px;
padding: 8px 16px;
cursor: pointer;
white-space: nowrap;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.08s ease;
border: 1px solid var(--line-2);
background: var(--white);
color: var(--ink);
}
.btn:hover { border-color: var(--gold); color: var(--gold-d); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn--gold { background: linear-gradient(150deg, var(--gold), var(--gold-d)); color: var(--white); border-color: transparent; }
.btn--gold:hover { color: var(--white); filter: brightness(1.06); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--muted); padding-inline: 12px; }
.btn--ghost:hover { color: var(--danger); background: rgba(179, 80, 62, 0.07); }
.btn--sm { padding: 6px 13px; font-size: 12px; }
/* Inline confirm */
.confirm {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-top: 4px;
padding: 13px 16px;
border-radius: var(--r-md);
background: rgba(179, 80, 62, 0.06);
border: 1px solid rgba(179, 80, 62, 0.22);
animation: rise 0.2s ease;
}
.confirm p { margin: 0; font-size: 13px; color: var(--ink-2); }
.confirm__btns { display: flex; gap: 8px; }
.btn--danger { background: var(--danger); color: var(--white); border-color: transparent; }
.btn--danger:hover { color: var(--white); filter: brightness(1.05); }
.appt.is-cancelled { opacity: 0.55; }
.appt.is-cancelled .appt__svc { text-decoration: line-through; text-decoration-color: var(--line-2); }
/* ===== Past visits rows ===== */
.filterbar { margin-bottom: 16px; }
.srch {
display: flex;
align-items: center;
gap: 10px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 99px;
padding: 9px 16px;
box-shadow: var(--sh-sm);
}
.srch:focus-within { border-color: var(--gold); }
.srch svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.srch input { border: 0; background: none; outline: none; font: inherit; font-size: 14px; width: 100%; color: var(--ink); }
.srch input::placeholder { color: var(--muted); }
.rows { display: grid; gap: 10px; }
.row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 14px 18px;
box-shadow: var(--sh-sm);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.row:hover { border-color: var(--gold-soft); box-shadow: var(--sh-md); }
.row__date {
font-size: 12px;
font-weight: 600;
color: var(--gold-d);
letter-spacing: 0.04em;
min-width: 64px;
}
.row__svc { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.row__meta { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.row__right { display: flex; align-items: center; gap: 14px; }
.row__price { font-family: var(--serif); font-size: 18px; color: var(--ink-2); }
/* ===== Favorites ===== */
.grp {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-d);
font-family: var(--sans);
margin: 4px 0 14px;
}
.grp:not(:first-child) { margin-top: 30px; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fav-grid--people { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fav {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px 18px;
box-shadow: var(--sh-sm);
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fav:hover { border-color: var(--gold-soft); box-shadow: var(--sh-md); }
.fav__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fav__name { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.fav__sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fav__price { font-family: var(--serif); font-size: 17px; color: var(--gold-d); }
.fav .person { display: flex; align-items: center; gap: 12px; }
.avatar {
width: 44px; height: 44px; flex: none;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--serif); font-weight: 600; font-size: 17px;
color: var(--white);
background: linear-gradient(150deg, var(--rose), var(--gold-d));
}
.heart {
appearance: none;
border: 0;
background: none;
cursor: pointer;
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 50%;
color: var(--gold);
transition: background 0.16s ease, transform 0.12s ease;
}
.heart:hover { background: var(--rose-soft); }
.heart:active { transform: scale(0.88); }
.heart:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.heart svg { width: 18px; height: 18px; }
.heart[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }
.heart[aria-pressed="false"] svg { fill: none; stroke: var(--muted); }
/* ===== Rail ===== */
.rail { display: grid; gap: 18px; position: sticky; top: 24px; }
.rec, .note {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 22px;
box-shadow: var(--sh-sm);
}
.rec { background: linear-gradient(180deg, var(--cream), var(--white)); border-color: var(--gold-soft); }
.rec__title { font-size: 22px; margin: 6px 0 14px; color: var(--ink); }
.rec__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rec__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rec__item:last-child { border-bottom: 0; padding-bottom: 0; }
.rec__svc { font-weight: 600; font-size: 14px; color: var(--ink); }
.rec__why { font-size: 12px; color: var(--muted); margin-top: 1px; }
.rec__add { flex: none; }
.note__body { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.6; }
.note__body em { color: var(--gold-d); font-style: italic; }
.empty {
text-align: center;
color: var(--muted);
font-size: 14px;
padding: 40px 20px;
border: 1px dashed var(--line-2);
border-radius: var(--r-md);
}
/* ===== Toast ===== */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 24px);
background: var(--ink);
color: var(--cream);
font-size: 13.5px;
font-weight: 500;
padding: 12px 20px;
border-radius: 99px;
box-shadow: var(--sh-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 50;
max-width: calc(100vw - 32px);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: "✦"; color: var(--gold); margin-right: 8px; }
/* ===== Responsive ===== */
@media (max-width: 860px) {
.layout { grid-template-columns: 1fr; }
.rail { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.rail { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.portal { padding: 24px 16px 64px; }
.hero { gap: 22px; }
.hero__greet { font-size: 28px; }
.hero__loyalty, .loyalty { width: 100%; min-width: 0; }
.stats { grid-template-columns: 1fr 1fr; }
.appt { grid-template-columns: 60px 1fr; }
.appt__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
.row { grid-template-columns: 1fr; gap: 8px; }
.row__right { justify-content: space-between; }
.tab { padding: 10px 12px; font-size: 13px; }
}(function () {
"use strict";
/* ----- Data ----- */
var upcoming = [
{
id: "u1", month: "Jun", day: "11", time: "4:30 PM", weekday: "Thursday",
service: "Balayage + Gloss", stylist: "Aria Vance",
duration: "2h 15m", price: 245, tags: ["Colour", "Confirmed"],
},
{
id: "u2", month: "Jun", day: "27", time: "11:00 AM", weekday: "Saturday",
service: "Silk Press & Trim", stylist: "Noor Halabi",
duration: "1h 30m", price: 120, tags: ["Styling", "Confirmed"],
},
];
var past = [
{ id: "p1", date: "May 22", service: "Root Touch-Up", stylist: "Aria Vance", price: 95, dur: "1h" },
{ id: "p2", date: "Apr 30", service: "Hydrating Mask Treatment", stylist: "Noor Halabi", price: 65, dur: "45m" },
{ id: "p3", date: "Apr 09", service: "Balayage + Gloss", stylist: "Aria Vance", price: 245, dur: "2h 15m" },
{ id: "p4", date: "Mar 18", service: "Cut & Blow-Dry", stylist: "Léa Moreau", price: 85, dur: "1h" },
{ id: "p5", date: "Feb 27", service: "Keratin Smoothing", stylist: "Noor Halabi", price: 210, dur: "2h 30m" },
{ id: "p6", date: "Feb 06", service: "Silk Press & Trim", stylist: "Noor Halabi", price: 120, dur: "1h 30m" },
{ id: "p7", date: "Jan 15", service: "Brow Shape & Tint", stylist: "Léa Moreau", price: 48, dur: "30m" },
];
var favServices = [
{ id: "fs1", name: "Balayage + Gloss", sub: "Signature colour · 2h 15m", price: 245, saved: true },
{ id: "fs2", name: "Hydrating Mask", sub: "Treatment · 45m", price: 65, saved: true },
{ id: "fs3", name: "Cut & Blow-Dry", sub: "Styling · 1h", price: 85, saved: true },
];
var favStylists = [
{ id: "ft1", name: "Aria Vance", sub: "Colour Director", initials: "AV", saved: true },
{ id: "ft2", name: "Noor Halabi", sub: "Senior Stylist", initials: "NH", saved: true },
];
var recommends = [
{ svc: "Bond-Repair Add-On", why: "Pairs with your balayage", price: 35 },
{ svc: "Scalp Detox Ritual", why: "You're due — last one in March", price: 55 },
{ svc: "Glaze Refresh", why: "Keeps tone bright between visits", price: 45 },
];
/* ----- Helpers ----- */
var $ = function (s, r) { return (r || document).querySelector(s); };
var $$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };
var esc = function (v) {
return String(v).replace(/[&<>"']/g, function (c) {
return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c];
});
};
var toastEl = $("#toast");
var toastTimer;
function toast(msg) {
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () { toastEl.classList.remove("is-show"); }, 2600);
}
/* ----- Live counts ----- */
function refreshCounts() {
var up = upcoming.filter(function (a) { return !a.cancelled; }).length;
var fv = favServices.filter(function (f) { return f.saved; }).length +
favStylists.filter(function (f) { return f.saved; }).length;
$("#countUpcoming").textContent = up;
$("#countPast").textContent = past.length;
$("#countFavs").textContent = fv;
$("#statUpcoming").textContent = up;
$("#statPast").textContent = past.length;
$("#statFavs").textContent = fv;
}
/* ----- Tabs ----- */
$$(".tab").forEach(function (tab) {
tab.addEventListener("click", function () {
$$(".tab").forEach(function (t) {
var on = t === tab;
t.classList.toggle("is-active", on);
t.setAttribute("aria-selected", on ? "true" : "false");
});
$$(".panel").forEach(function (p) {
var on = p.id === "panel-" + tab.dataset.tab;
p.classList.toggle("is-active", on);
p.hidden = !on;
});
});
});
/* ----- Render upcoming ----- */
function renderUpcoming() {
var list = $("#upcomingList");
var active = upcoming.filter(function (a) { return !a.cancelled; });
$("#upcomingEmpty").hidden = active.length !== 0;
list.innerHTML = upcoming.map(function (a) {
var tags = a.tags.map(function (t, i) {
return '<span class="pill' + (i ? " pill--soft" : "") + '">' + esc(t) + "</span>";
}).join("");
return '' +
'<article class="appt' + (a.cancelled ? " is-cancelled" : "") + '" data-id="' + a.id + '">' +
'<div class="datechip">' +
'<div class="m">' + esc(a.month) + '</div>' +
'<div class="d">' + esc(a.day) + '</div>' +
'<div class="t">' + esc(a.time) + '</div>' +
'</div>' +
'<div class="appt__body">' +
'<div class="appt__svc">' + esc(a.service) + '</div>' +
'<div class="appt__meta">' + esc(a.weekday) + ' · with <b>' + esc(a.stylist) + '</b> · ' + esc(a.duration) + '</div>' +
'<div class="appt__tags">' + tags + '</div>' +
'</div>' +
(a.cancelled
? '<div class="appt__actions"><span class="pill pill--soft">Cancelled</span></div>'
: '<div class="appt__actions">' +
'<button class="btn btn--sm" data-act="reschedule">Reschedule</button>' +
'<button class="btn btn--ghost btn--sm" data-act="cancel">Cancel</button>' +
'</div>') +
'</article>';
}).join("");
}
// delegated actions for upcoming
$("#upcomingList").addEventListener("click", function (e) {
var btn = e.target.closest("button[data-act]");
if (!btn) return;
var card = btn.closest(".appt");
var id = card.dataset.id;
var appt = upcoming.find(function (a) { return a.id === id; });
if (!appt) return;
if (btn.dataset.act === "reschedule") {
toast("Reschedule link sent for " + appt.service + ".");
return;
}
if (btn.dataset.act === "cancel") {
if ($(".confirm", card)) return;
var c = document.createElement("div");
c.className = "confirm";
c.innerHTML =
'<p>Cancel <strong>' + esc(appt.service) + '</strong> on ' + esc(appt.month) + " " + esc(appt.day) + '?</p>' +
'<div class="confirm__btns">' +
'<button class="btn btn--sm" data-confirm="no">Keep it</button>' +
'<button class="btn btn--danger btn--sm" data-confirm="yes">Yes, cancel</button>' +
'</div>';
card.appendChild(c);
$('[data-confirm="yes"]', c).focus();
c.addEventListener("click", function (ev) {
var cb = ev.target.closest("button[data-confirm]");
if (!cb) return;
if (cb.dataset.confirm === "yes") {
appt.cancelled = true;
renderUpcoming();
refreshCounts();
toast(appt.service + " cancelled. We hope to see you soon.");
} else {
c.remove();
}
});
}
});
/* ----- Render past ----- */
function renderPast(filter) {
var q = (filter || "").trim().toLowerCase();
var rows = past.filter(function (p) {
return !q || p.service.toLowerCase().indexOf(q) > -1 || p.stylist.toLowerCase().indexOf(q) > -1;
});
$("#pastEmpty").hidden = rows.length !== 0;
$("#pastList").innerHTML = rows.map(function (p) {
return '' +
'<div class="row" data-id="' + p.id + '">' +
'<div class="row__date">' + esc(p.date) + '</div>' +
'<div>' +
'<div class="row__svc">' + esc(p.service) + '</div>' +
'<div class="row__meta">with ' + esc(p.stylist) + ' · ' + esc(p.dur) + '</div>' +
'</div>' +
'<div class="row__right">' +
'<span class="row__price">$' + p.price + '</span>' +
'<button class="btn btn--gold btn--sm" data-rebook="' + p.id + '">Rebook</button>' +
'</div>' +
'</div>';
}).join("");
}
$("#pastList").addEventListener("click", function (e) {
var btn = e.target.closest("button[data-rebook]");
if (!btn) return;
var p = past.find(function (x) { return x.id === btn.dataset.rebook; });
if (!p) return;
toast("Rebooking " + p.service + " with " + p.stylist + " — details pre-filled.");
});
$("#pastSearch").addEventListener("input", function (e) {
renderPast(e.target.value);
});
/* ----- Render favorites ----- */
function heartSvg() {
return '<svg viewBox="0 0 24 24" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
'<path d="M12 20.5 4.4 13a4.6 4.6 0 1 1 6.5-6.5l1.1 1.1 1.1-1.1A4.6 4.6 0 1 1 19.6 13z"/></svg>';
}
function renderFavServices() {
$("#favServices").innerHTML = favServices.map(function (f) {
return '' +
'<div class="fav" data-id="' + f.id + '">' +
'<div class="fav__head">' +
'<div><div class="fav__name">' + esc(f.name) + '</div><div class="fav__sub">' + esc(f.sub) + '</div></div>' +
'<button class="heart" data-fav="service" aria-pressed="' + (f.saved ? "true" : "false") +
'" aria-label="' + (f.saved ? "Remove" : "Save") + " " + esc(f.name) + '">' + heartSvg() + '</button>' +
'</div>' +
'<div class="fav__head" style="align-items:center">' +
'<span class="fav__price">$' + f.price + '</span>' +
'<button class="btn btn--gold btn--sm" data-book="' + f.id + '">Book</button>' +
'</div>' +
'</div>';
}).join("");
}
function renderFavStylists() {
$("#favStylists").innerHTML = favStylists.map(function (f) {
return '' +
'<div class="fav" data-id="' + f.id + '">' +
'<div class="fav__head">' +
'<div class="person">' +
'<span class="avatar">' + esc(f.initials) + '</span>' +
'<div><div class="fav__name">' + esc(f.name) + '</div><div class="fav__sub">' + esc(f.sub) + '</div></div>' +
'</div>' +
'<button class="heart" data-fav="stylist" aria-pressed="' + (f.saved ? "true" : "false") +
'" aria-label="' + (f.saved ? "Remove" : "Save") + " " + esc(f.name) + '">' + heartSvg() + '</button>' +
'</div>' +
'</div>';
}).join("");
}
function bindFavToggle(container, store, kind) {
container.addEventListener("click", function (e) {
var heart = e.target.closest('.heart[data-fav]');
var book = e.target.closest("button[data-book]");
if (book) {
var bi = store.find(function (x) { return x.id === book.dataset.book; });
if (bi) toast("Booking " + bi.name + " — choose a time to confirm.");
return;
}
if (!heart) return;
var card = heart.closest(".fav");
var item = store.find(function (x) { return x.id === card.dataset.id; });
if (!item) return;
item.saved = !item.saved;
heart.setAttribute("aria-pressed", item.saved ? "true" : "false");
heart.setAttribute("aria-label", (item.saved ? "Remove " : "Save ") + item.name);
refreshCounts();
toast(item.saved ? item.name + " saved to favorites." : item.name + " removed from favorites.");
});
}
/* ----- Recommendations ----- */
function renderRecs() {
$("#recList").innerHTML = recommends.map(function (r) {
return '' +
'<li class="rec__item">' +
'<div><div class="rec__svc">' + esc(r.svc) + '</div><div class="rec__why">' + esc(r.why) + '</div></div>' +
'<button class="btn btn--sm rec__add" data-rec="' + esc(r.svc) + '">+ $' + r.price + '</button>' +
'</li>';
}).join("");
}
$("#recList").addEventListener("click", function (e) {
var btn = e.target.closest("button[data-rec]");
if (!btn) return;
toast("Added " + btn.dataset.rec + " to your next visit.");
});
/* ----- Init ----- */
renderUpcoming();
renderPast("");
renderFavServices();
renderFavStylists();
renderRecs();
bindFavToggle($("#favServices"), favServices, "service");
bindFavToggle($("#favStylists"), favStylists, "stylist");
refreshCounts();
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Client Portal · Maison Lumière Salon</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=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="portal">
<!-- ===== Header ===== -->
<header class="hero">
<div class="hero__brand">
<span class="hero__mark" aria-hidden="true">ML</span>
<div>
<p class="eyebrow">Maison Lumière Salon</p>
<h1 class="hero__greet">Good evening, <span>Eloise</span>.</h1>
<p class="hero__sub">Your next appointment is in <strong>3 days</strong> with Aria Vance.</p>
</div>
</div>
<div class="hero__loyalty">
<div class="loyalty">
<span class="loyalty__label">Lumière Rewards</span>
<span class="loyalty__pts"><strong id="loyaltyPts">2,480</strong> pts</span>
<span class="loyalty__tier">Gold member · 520 to Platinum</span>
<div class="loyalty__bar" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" aria-label="Progress to Platinum tier">
<i style="--w:83%"></i>
</div>
</div>
</div>
</header>
<!-- ===== Stats strip ===== -->
<div class="stats" aria-label="Account summary">
<div class="stat"><b id="statUpcoming">2</b><span>Upcoming</span></div>
<div class="stat"><b id="statPast">14</b><span>Past visits</span></div>
<div class="stat"><b id="statFavs">5</b><span>Favorites</span></div>
<div class="stat"><b>2.1y</b><span>Member since</span></div>
</div>
<!-- ===== Tabs ===== -->
<nav class="tabs" role="tablist" aria-label="Portal sections">
<button class="tab is-active" role="tab" aria-selected="true" id="tab-upcoming" aria-controls="panel-upcoming" data-tab="upcoming">
Upcoming <span class="tab__count" id="countUpcoming">2</span>
</button>
<button class="tab" role="tab" aria-selected="false" id="tab-past" aria-controls="panel-past" data-tab="past">
Past visits <span class="tab__count" id="countPast">14</span>
</button>
<button class="tab" role="tab" aria-selected="false" id="tab-favorites" aria-controls="panel-favorites" data-tab="favorites">
Favorites <span class="tab__count" id="countFavs">5</span>
</button>
</nav>
<main class="layout">
<div class="layout__main">
<!-- ===== Upcoming ===== -->
<section class="panel is-active" id="panel-upcoming" role="tabpanel" aria-labelledby="tab-upcoming" tabindex="0">
<div id="upcomingList" class="cards"></div>
<p class="empty" id="upcomingEmpty" hidden>You have no upcoming appointments. Browse the salon menu to book your next visit.</p>
</section>
<!-- ===== Past visits ===== -->
<section class="panel" id="panel-past" role="tabpanel" aria-labelledby="tab-past" tabindex="0" hidden>
<div class="filterbar">
<label class="srch">
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<input id="pastSearch" type="search" placeholder="Search past services or stylists" aria-label="Search past visits" />
</label>
</div>
<div id="pastList" class="rows"></div>
<p class="empty" id="pastEmpty" hidden>No visits match your search.</p>
</section>
<!-- ===== Favorites ===== -->
<section class="panel" id="panel-favorites" role="tabpanel" aria-labelledby="tab-favorites" tabindex="0" hidden>
<h2 class="grp">Saved services</h2>
<div id="favServices" class="fav-grid"></div>
<h2 class="grp">Saved stylists</h2>
<div id="favStylists" class="fav-grid fav-grid--people"></div>
</section>
</div>
<!-- ===== Aside: recommendations ===== -->
<aside class="rail" aria-label="Recommendations from your stylist">
<div class="rec">
<p class="eyebrow">Aria recommends</p>
<h2 class="rec__title">Curated for your next visit</h2>
<ul class="rec__list" id="recList"></ul>
</div>
<div class="note">
<p class="eyebrow">A note from your stylist</p>
<p class="note__body">Eloise — your colour is holding beautifully. Let's refresh the gloss and book a hydrating mask before the holidays. — <em>Aria</em></p>
</div>
</aside>
</main>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Client Portal
The signed-in home for a Maison Lumière guest. A serif greeting and a gold Lumière Rewards pill open the screen, with a slim progress bar tracking the climb to the next tier and a four-stat band summarising the account at a glance. Three tabs — Upcoming, Past visits and Favorites — switch the main column while a sticky rail offers curated recommendations and a handwritten-feeling note from the client’s stylist.
Upcoming appointments render as editorial cards with a date chip, stylist, duration and status pills; Reschedule fires a confirmation toast, while Cancel asks for an inline confirm before greying the card and updating every live count. Past visits list in a searchable history where a single Rebook tap pre-fills the booking and toasts the details. Favorites hold saved services and stylists, each with a toggleable heart that re-syncs the counts in real time.
Built in vanilla JavaScript with no dependencies: delegated event handling, accessible tabs and pressed-state hearts, a reusable toast() helper, and a rose-gold-on-cream palette set in Cormorant Garamond and Inter. Fully responsive down to 360px.