UI Components Easy

Coworking — Mobile Access Card

A warm-industrial mobile access card for a coworking space, built in pure HTML, CSS and vanilla JS. Shows a member photo, tier badge and an auto-refreshing QR credential with a 30-second countdown, plus an NFC-style hold-to-unlock door button with a success pulse and live toast. Flip the card for plan details, home desk and meeting-room credits, and watch a recent access log update in real time after each unlock.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  --concrete: #efeae3;
  --concrete-d: #e2dcd2;
  --amber: #e8902b;
  --amber-d: #cc7918;
  --amber-50: #fdf1e2;
  --char: #1c1b19;
  --ink: #26241f;
  --ink-2: #4a463e;
  --muted: #7b766c;
  --bg: #f6f3ee;
  --surface: #ffffff;
  --plant: #5f7a52;
  --line: rgba(28, 27, 25, 0.1);
  --line-2: rgba(28, 27, 25, 0.18);
  --ok: #2f9e6f;
  --warn: #d98a2b;
  --danger: #d4503e;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow: 0 18px 40px -22px rgba(28, 27, 25, 0.45);
  --shadow-sm: 0 6px 18px -10px rgba(28, 27, 25, 0.4);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--amber-50) 0%, transparent 45%),
    radial-gradient(100% 70% at 0% 100%, rgba(95, 122, 82, 0.12) 0%, transparent 50%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  padding: 28px 16px 48px;
}

.stage {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header */
.stage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand__mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--char);
  color: var(--amber);
  font-size: 22px;
  box-shadow: var(--shadow-sm);
}
.brand__name { margin: 0; font-weight: 700; font-size: 15px; color: var(--char); letter-spacing: -0.01em; }
.brand__sub { margin: 0; font-size: 12px; color: var(--muted); }
.net {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--plant);
  background: rgba(95, 122, 82, 0.12);
  padding: 6px 11px; border-radius: 999px;
}
.net__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--plant);
  box-shadow: 0 0 0 0 rgba(95, 122, 82, 0.5);
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(95, 122, 82, 0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(95, 122, 82, 0); }
}

/* Card flip scene */
.card-scene { perspective: 1400px; }
.card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.6, 0.05, 0.2, 1);
  min-height: 472px;
}
.card[data-face="back"] { transform: rotateY(180deg); }

.card__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.card__front {
  background:
    radial-gradient(140% 90% at 50% -10%, var(--amber-50) 0%, var(--surface) 42%);
}
.card__back {
  transform: rotateY(180deg);
  background:
    linear-gradient(160deg, var(--char) 0%, #2a2824 100%);
  color: var(--concrete);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Front: member */
.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.member { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(150deg, var(--amber) 0%, var(--amber-d) 100%);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.02em;
}
.member__name { margin: 0; font-weight: 700; font-size: 16px; color: var(--char); letter-spacing: -0.01em; }
.member__role { margin: 0; font-size: 12px; color: var(--muted); }
.tier {
  font-size: 11px; font-weight: 700;
  color: var(--amber-d);
  background: var(--amber-50);
  border: 1px solid rgba(204, 121, 24, 0.25);
  padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
}

/* QR */
.qr-zone {
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.qr {
  position: relative;
  width: 168px; height: 168px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--concrete);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.qr:hover { box-shadow: var(--shadow-sm); }
.qr:active { transform: scale(0.97); }
.qr:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr.refreshing svg { animation: qrflip 0.5s ease; }
@keyframes qrflip {
  0% { opacity: 0.25; transform: rotateY(50deg) scale(0.94); }
  100% { opacity: 1; transform: none; }
}
.qr__ring {
  position: absolute; inset: 6px;
  border: 2px solid transparent;
  border-radius: 11px;
  pointer-events: none;
}
.qr.refreshing .qr__ring {
  border-color: var(--amber);
  animation: ringpulse 0.5s ease;
}
@keyframes ringpulse {
  from { opacity: 1; transform: scale(0.94); }
  to { opacity: 0; transform: scale(1.04); }
}
.qr-meta { text-align: center; }
.qr-meta__code {
  margin: 0; font-weight: 700; font-size: 14px;
  letter-spacing: 0.14em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.qr-meta__timer { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.qr-meta__timer strong { color: var(--amber-d); font-variant-numeric: tabular-nums; }

/* Unlock */
.unlock {
  margin-top: auto;
  position: relative;
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  padding: 15px 16px;
  font-family: inherit;
  font-weight: 700; font-size: 15px;
  color: #fff;
  background: linear-gradient(150deg, var(--char) 0%, #322f29 100%);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  overflow: hidden;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.unlock:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.unlock:active { transform: scale(0.99); }
.unlock__nfc {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  position: relative;
  flex: none;
}
.unlock__nfc::before,
.unlock__nfc::after {
  content: ""; position: absolute; inset: -6px;
  border: 2px solid var(--amber);
  border-radius: 50%;
  opacity: 0;
  animation: wave 2s ease-out infinite;
}
.unlock__nfc::after { animation-delay: 1s; }
@keyframes wave {
  0% { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 0; }
}
/* progress fill while holding */
.unlock::before {
  content: ""; position: absolute; inset: 0;
  width: var(--hold, 0%);
  background: rgba(232, 144, 43, 0.35);
  transition: width 0.05s linear;
}
.unlock__label { position: relative; }
.unlock.success {
  background: linear-gradient(150deg, var(--ok) 0%, #258a5e 100%);
  animation: pop 0.45s ease;
}
.unlock.success .unlock__nfc { border-color: #fff; }
@keyframes pop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47, 158, 111, 0.55); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); box-shadow: 0 0 0 22px rgba(47, 158, 111, 0); }
}

.flip-btn {
  margin-top: 14px;
  background: none; border: 0;
  align-self: center;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
}
.flip-btn:hover { color: var(--ink); }
.flip-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.flip-btn--back { color: rgba(239, 234, 227, 0.7); }
.flip-btn--back:hover { color: #fff; }

/* Back face */
.back__title {
  margin: 0 0 14px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--amber);
}
.facts { margin: 0; display: grid; gap: 12px; }
.fact {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fact dt { margin: 0; font-size: 13px; color: rgba(239, 234, 227, 0.6); }
.fact dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; }
.meter { margin-top: 18px; }
.meter__row {
  display: flex; justify-content: space-between;
  font-size: 13px; margin-bottom: 8px;
}
.meter__row span:last-child { font-weight: 700; color: var(--amber); }
.meter__track {
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  width: 62%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber-d) 100%);
}
.card__back .flip-btn--back { margin-top: auto; }

/* Access log */
.log {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px 8px;
}
.log__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.log__head h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--char); }
.log__count { font-size: 12px; color: var(--muted); }
.log__list { list-style: none; margin: 0; padding: 0; }
.log__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.log__item:last-child { border-bottom: 0; }
.log__item.is-new { animation: slidein 0.4s ease; }
@keyframes slidein {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
}
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--deny { background: var(--danger); }
.log__body { flex: 1; min-width: 0; }
.log__where { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.log__meta { margin: 0; font-size: 12px; color: var(--muted); }
.log__time { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Toast */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--char);
  color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
  max-width: 88vw;
  display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast::before {
  content: "✓";
  color: var(--ok);
  font-weight: 800;
}
.toast.toast--warn::before { content: "!"; color: var(--warn); }

@media (max-width: 520px) {
  body { padding: 18px 12px 40px; }
  .card { min-height: 452px; }
  .qr { width: 150px; height: 150px; }
}
@media (max-width: 360px) {
  .qr { width: 132px; height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

(function () {
  "use strict";

  /* ---------- Toast helper ---------- */
  var toastEl = document.getElementById("toast");
  var toastTimer;
  function toast(msg, kind) {
    toastEl.textContent = msg;
    toastEl.className = "toast show" + (kind === "warn" ? " toast--warn" : "");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("show");
    }, 2400);
  }

  /* ---------- Deterministic QR-ish matrix ---------- */
  var qrSvg = document.getElementById("qrSvg");
  var qrCodeEl = document.getElementById("qrCode");
  var qrEl = document.getElementById("qr");

  function rng(seed) {
    var s = seed % 2147483647;
    if (s <= 0) s += 2147483646;
    return function () {
      s = (s * 16807) % 2147483647;
      return (s - 1) / 2147483646;
    };
  }

  function drawQR(seed) {
    var N = 21;
    var cell = 100 / N;
    var rand = rng(seed);
    var parts = ['<rect width="100" height="100" fill="#efeae3"/>'];
    function finder(x, y) {
      parts.push(
        '<rect x="' + x * cell + '" y="' + y * cell + '" width="' + cell * 7 +
        '" height="' + cell * 7 + '" fill="#1c1b19"/>'
      );
      parts.push(
        '<rect x="' + (x + 1) * cell + '" y="' + (y + 1) * cell + '" width="' + cell * 5 +
        '" height="' + cell * 5 + '" fill="#efeae3"/>'
      );
      parts.push(
        '<rect x="' + (x + 2) * cell + '" y="' + (y + 2) * cell + '" width="' + cell * 3 +
        '" height="' + cell * 3 + '" fill="#1c1b19"/>'
      );
    }
    function inFinder(r, c) {
      return (
        (r < 8 && c < 8) ||
        (r < 8 && c > N - 9) ||
        (r > N - 9 && c < 8)
      );
    }
    for (var r = 0; r < N; r++) {
      for (var c = 0; c < N; c++) {
        if (inFinder(r, c)) continue;
        if (rand() > 0.52) {
          parts.push(
            '<rect x="' + c * cell + '" y="' + r * cell + '" width="' + cell +
            '" height="' + cell + '" fill="#26241f"/>'
          );
        }
      }
    }
    finder(0, 0);
    finder(N - 7, 0);
    finder(0, N - 7);
    // amber locator accent
    parts.push(
      '<rect x="' + (N - 9) * cell + '" y="' + (N - 9) * cell + '" width="' + cell * 4 +
      '" height="' + cell * 4 + '" fill="none" stroke="#e8902b" stroke-width="' +
      cell * 0.7 + '"/>'
    );
    qrSvg.innerHTML = parts.join("");
  }

  function codeChunk() {
    var chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
    var out = "";
    for (var i = 0; i < 4; i++) {
      out += chars[Math.floor(Math.random() * chars.length)];
    }
    return out;
  }

  function refreshCode(announce) {
    var seed = Date.now() % 1000000;
    drawQR(seed);
    qrCodeEl.textContent = "FC · " + codeChunk() + " · " + codeChunk();
    qrEl.classList.remove("refreshing");
    void qrEl.offsetWidth; // reflow to restart animation
    qrEl.classList.add("refreshing");
    countdown = REFRESH_SECS;
    timerEl.textContent = countdown;
    if (announce) toast("Access code refreshed");
  }

  qrEl.addEventListener("click", function () {
    refreshCode(true);
  });

  /* ---------- Auto-refresh timer ---------- */
  var REFRESH_SECS = 30;
  var countdown = REFRESH_SECS;
  var timerEl = document.getElementById("qrTimer");
  setInterval(function () {
    countdown -= 1;
    if (countdown <= 0) {
      refreshCode(false);
      return;
    }
    timerEl.textContent = countdown;
  }, 1000);

  /* ---------- Hold-to-unlock ---------- */
  var unlock = document.getElementById("unlock");
  var unlockLabel = document.getElementById("unlockLabel");
  var HOLD_MS = 850;
  var holdStart = 0;
  var holdRAF = null;
  var unlocking = false;

  function setHold(pct) {
    unlock.style.setProperty("--hold", pct + "%");
  }

  function tick() {
    var elapsed = Date.now() - holdStart;
    var pct = Math.min(100, (elapsed / HOLD_MS) * 100);
    setHold(pct);
    if (pct >= 100) {
      completeUnlock();
      return;
    }
    holdRAF = requestAnimationFrame(tick);
  }

  function startHold() {
    if (unlocking) return;
    holdStart = Date.now();
    unlockLabel.textContent = "Reading credential…";
    holdRAF = requestAnimationFrame(tick);
  }

  function cancelHold() {
    if (unlocking) return;
    if (holdRAF) cancelAnimationFrame(holdRAF);
    holdRAF = null;
    setHold(0);
    unlockLabel.textContent = "Hold to unlock door";
  }

  function completeUnlock() {
    if (unlocking) return;
    unlocking = true;
    if (holdRAF) cancelAnimationFrame(holdRAF);
    setHold(100);
    unlock.classList.add("success");
    unlockLabel.textContent = "Door unlocked";
    toast("Loft Bay door unlocked");
    addLog({
      where: "Loft Bay · Floor 3",
      meta: "QR credential · Studio Pass",
      status: "ok",
      time: "now"
    });
    setTimeout(function () {
      unlock.classList.remove("success");
      unlockLabel.textContent = "Hold to unlock door";
      setHold(0);
      unlocking = false;
    }, 2200);
  }

  unlock.addEventListener("mousedown", startHold);
  unlock.addEventListener("mouseup", cancelHold);
  unlock.addEventListener("mouseleave", cancelHold);
  unlock.addEventListener("touchstart", function (e) {
    e.preventDefault();
    startHold();
  }, { passive: false });
  unlock.addEventListener("touchend", cancelHold);
  unlock.addEventListener("touchcancel", cancelHold);
  // keyboard: Enter/Space triggers an instant unlock for accessibility
  unlock.addEventListener("keydown", function (e) {
    if ((e.key === "Enter" || e.key === " ") && !unlocking) {
      e.preventDefault();
      setHold(100);
      completeUnlock();
    }
  });

  /* ---------- Card flip ---------- */
  var card = document.getElementById("card");
  var frontFace = card.querySelector(".card__front");
  var backFace = card.querySelector(".card__back");

  function flip(toBack) {
    card.dataset.face = toBack ? "back" : "front";
    backFace.setAttribute("aria-hidden", String(!toBack));
    frontFace.setAttribute("aria-hidden", String(toBack));
  }
  document.getElementById("toBack").addEventListener("click", function () {
    flip(true);
  });
  document.getElementById("toFront").addEventListener("click", function () {
    flip(false);
  });

  /* ---------- Access log ---------- */
  var logList = document.getElementById("logList");
  var logCount = document.getElementById("logCount");
  var events = [
    { where: "Main Entrance · Floor 1", meta: "NFC tap · turnstile B", status: "ok", time: "08:41" },
    { where: "Roof Terrace", meta: "QR credential", status: "ok", time: "07:55" },
    { where: "Quiet Pod 2 · Floor 2", meta: "Booking expired", status: "warn", time: "Yesterday" },
    { where: "Server Room", meta: "Zone not permitted", status: "deny", time: "Mon" }
  ];

  var dotClass = { ok: "dot--ok", warn: "dot--warn", deny: "dot--deny" };

  function renderItem(ev, isNew) {
    var li = document.createElement("li");
    li.className = "log__item" + (isNew ? " is-new" : "");
    li.innerHTML =
      '<span class="dot ' + dotClass[ev.status] + '"></span>' +
      '<div class="log__body">' +
        '<p class="log__where"></p>' +
        '<p class="log__meta"></p>' +
      '</div>' +
      '<span class="log__time"></span>';
    li.querySelector(".log__where").textContent = ev.where;
    li.querySelector(".log__meta").textContent = ev.meta;
    li.querySelector(".log__time").textContent = ev.time;
    return li;
  }

  function updateCount() {
    var n = logList.children.length;
    logCount.textContent = n + (n === 1 ? " event" : " events");
  }

  function addLog(ev) {
    logList.insertBefore(renderItem(ev, true), logList.firstChild);
    while (logList.children.length > 6) {
      logList.removeChild(logList.lastChild);
    }
    updateCount();
  }

  events.forEach(function (ev) {
    logList.appendChild(renderItem(ev, false));
  });
  updateCount();

  /* ---------- Init ---------- */
  refreshCode(false);
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Coworking — Mobile Access Card</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&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="stage">
    <header class="stage__head">
      <div class="brand">
        <span class="brand__mark" aria-hidden="true">◍</span>
        <div>
          <p class="brand__name">Foundry &amp; Co.</p>
          <p class="brand__sub">Riverside Studio · Floor 3</p>
        </div>
      </div>
      <span class="net" aria-label="Connection secure">
        <span class="net__dot"></span> Secure
      </span>
    </header>

    <!-- Access card with flip -->
    <section class="card-scene" aria-label="Member access card">
      <div class="card" id="card" data-face="front">
        <!-- FRONT -->
        <div class="card__face card__front">
          <div class="card__top">
            <div class="member">
              <div class="avatar" aria-hidden="true">MR</div>
              <div class="member__id">
                <p class="member__name">Mara Reyes</p>
                <p class="member__role">Resident Member · #FC-2048</p>
              </div>
            </div>
            <span class="tier" id="tierBadge">Studio Pass</span>
          </div>

          <div class="qr-zone">
            <button class="qr" id="qr" type="button" aria-label="Refresh access code">
              <svg viewBox="0 0 100 100" id="qrSvg" role="img" aria-label="Access QR code"></svg>
              <span class="qr__ring"></span>
            </button>
            <div class="qr-meta">
              <p class="qr-meta__code" id="qrCode">FC · 8K4Q · 19T2</p>
              <p class="qr-meta__timer">Refreshes in <strong id="qrTimer">30</strong>s</p>
            </div>
          </div>

          <button class="unlock" id="unlock" type="button">
            <span class="unlock__nfc" aria-hidden="true"></span>
            <span class="unlock__label" id="unlockLabel">Hold to unlock door</span>
          </button>

          <button class="flip-btn" id="toBack" type="button">Card details &rarr;</button>
        </div>

        <!-- BACK -->
        <div class="card__face card__back" aria-hidden="true">
          <p class="back__title">Membership</p>
          <dl class="facts">
            <div class="fact"><dt>Plan</dt><dd>Studio Pass · Monthly</dd></div>
            <div class="fact"><dt>Home space</dt><dd>Desk 14 · Loft Bay</dd></div>
            <div class="fact"><dt>Valid thru</dt><dd>Apr 2027</dd></div>
            <div class="fact"><dt>Access zones</dt><dd>Floors 1–3, Roof</dd></div>
          </dl>
          <div class="meter">
            <div class="meter__row">
              <span>Meeting-room credits</span><span id="creditTxt">7.5 / 12 h</span>
            </div>
            <div class="meter__track"><div class="meter__fill" id="creditBar"></div></div>
          </div>
          <button class="flip-btn flip-btn--back" id="toFront" type="button">&larr; Back to card</button>
        </div>
      </div>
    </section>

    <!-- Access log -->
    <section class="log" aria-label="Recent access">
      <div class="log__head">
        <h2>Recent access</h2>
        <span class="log__count" id="logCount">4 events</span>
      </div>
      <ul class="log__list" id="logList"></ul>
    </section>
  </main>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>
  <script src="script.js"></script>
</body>
</html>

Mobile Access Card

A pocket-sized digital keycard for the fictional Foundry & Co. studio. The front face pairs a member avatar, tier badge and rotating QR credential that visibly refreshes every 30 seconds — tap it to force a new code and watch the amber locator ring pulse. Below it sits a matte-black, NFC-style unlock button: press and hold to fill the progress bar, release the credential, and trigger a green success pulse with a confirmation toast.

Tap the “Card details” link to flip the card over and reveal the warm-charcoal back: membership plan, home desk, valid-through date, permitted access zones and a meeting-room credits meter. The whole thing is driven by a small vanilla-JS controller with a deterministic QR matrix generator, a hold-timer using requestAnimationFrame, and an aria-live toast helper.

A live access log beneath the card tracks recent entries with free / warning / denied status dots. Every successful door unlock prepends a fresh “now” entry with a slide-in animation, so the card feels like a working credential rather than a static mockup. The layout collapses cleanly to roughly 360px and respects reduced-motion preferences.

Illustrative UI only — fictional coworking space, not a real booking system.