Strony Średni

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.

Otwórz w Lab

html css vanilla-js

Targety: JS HTML

Kod

: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 { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[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.