UI 컴포넌트 Medium

Real Estate — Offer Tracker

An editorial offer-management board for a single listing, pairing a photographic property header with a live stack of buyer offers. Each row shows the buyer, agent, bid amount with over- or under-ask delta, cash or financed badge, contingency terms, status pill, and timestamp. A counter-offer composer logs the seller's response, while accept, reject, and reopen actions recompute the highest and leading offer, summary stats, and the spread against list price in real time.

Lab에서 열기

html css vanilla-js

Targets: JS HTML

Code

:root {
  --ivory: #f7f4ec;
  --paper: #fffdf8;
  --white: #ffffff;
  --green: #1f3d34;
  --green-d: #16302a;
  --green-700: #26493e;
  --green-50: #e8efea;
  --brass: #b08d57;
  --brass-d: #94733f;
  --brass-50: #f3ead9;
  --ink: #1c2a25;
  --ink-2: #33433d;
  --muted: #6b7a72;
  --line: rgba(31, 61, 52, 0.12);
  --line-2: rgba(31, 61, 52, 0.22);
  --ok: #2f9e6f;
  --warn: #c98a2b;
  --danger: #c4503e;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --sh-1: 0 1px 2px rgba(28, 42, 37, 0.06), 0 8px 24px rgba(28, 42, 37, 0.06);
  --sh-2: 0 2px 6px rgba(28, 42, 37, 0.08), 0 18px 48px rgba(28, 42, 37, 0.12);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.2px;
}

.shell {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px) 72px;
  display: grid;
  gap: 26px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-d);
  margin: 0 0 6px;
}

.muted {
  color: var(--muted);
}

/* ---------- Listing header ---------- */
.listing {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}

.listing__photo {
  position: relative;
  min-height: 280px;
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(255, 244, 214, 0.5), transparent 55%),
    radial-gradient(90% 70% at 14% 92%, rgba(22, 48, 42, 0.55), transparent 60%),
    linear-gradient(155deg, #2c5145 0%, #1f3d34 42%, #16302a 70%, #244036 100%);
}

.listing__photo::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background:
    linear-gradient(180deg, transparent, rgba(11, 24, 20, 0.42)),
    repeating-linear-gradient(105deg, rgba(176, 141, 87, 0.16) 0 2px, transparent 2px 26px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
  mask-image: linear-gradient(180deg, transparent, #000 40%);
}

.listing__photo::after {
  content: "";
  position: absolute;
  right: 16%;
  bottom: 0;
  width: 30%;
  height: 64%;
  background: linear-gradient(180deg, rgba(243, 234, 217, 0.22), rgba(176, 141, 87, 0.32));
  border-radius: 4px 4px 0 0;
  box-shadow: -54px 0 0 -8px rgba(243, 234, 217, 0.16), 60px 8px 0 -12px rgba(243, 234, 217, 0.12);
}

.listing__chip {
  position: absolute;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 11px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.listing__chip--status {
  top: 14px;
  left: 14px;
  background: rgba(47, 158, 111, 0.92);
  color: #fff;
}

.listing__chip--days {
  bottom: 14px;
  left: 14px;
  background: rgba(255, 253, 248, 0.9);
  color: var(--green-d);
}

.listing__body {
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
}

.listing__title {
  font-size: clamp(30px, 4.5vw, 42px);
  color: var(--green-d);
}

.listing__addr {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 16px 0 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.fact {
  font-size: 14px;
  color: var(--muted);
}

.fact strong {
  color: var(--ink);
  font-weight: 600;
}

.listing__price {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: flex-end;
}

.price__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.price__value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700;
  color: var(--green-d);
  line-height: 1;
}

.price__value--lead {
  color: var(--brass-d);
}

.lead__by {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Summary band ---------- */
.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--sh-1);
}

.stat__num {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}

.stat__lbl {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Offers ---------- */
.offers__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.offers__head h2 {
  font-size: 26px;
  color: var(--green-d);
}

.offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.offer {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px 18px 24px;
  box-shadow: var(--sh-1);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.offer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--line-2);
  transition: background 0.18s ease;
}

.offer:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-1px);
}

.offer--lead {
  border-color: var(--brass);
  background: linear-gradient(180deg, var(--brass-50), var(--paper) 60%);
}

.offer--lead::before {
  background: var(--brass);
}

.offer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.offer__buyer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
  background: linear-gradient(150deg, var(--green-700), var(--green-d));
  box-shadow: inset 0 0 0 2px rgba(255, 253, 248, 0.25);
}

.offer--lead .avatar {
  background: linear-gradient(150deg, var(--brass), var(--brass-d));
}

.offer__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.offer__agent {
  font-size: 12px;
  color: var(--muted);
}

.offer__amount {
  text-align: right;
  white-space: nowrap;
}

.offer__amount b {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--green-d);
}

.offer__delta {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

.offer__delta--up {
  color: var(--ok);
}

.offer__delta--down {
  color: var(--danger);
}

.offer__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.badge {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--cash {
  background: var(--green-50);
  color: var(--green-700);
  border-color: rgba(38, 73, 62, 0.18);
}

.badge--financed {
  background: var(--brass-50);
  color: var(--brass-d);
  border-color: rgba(176, 141, 87, 0.3);
}

.badge--term {
  background: var(--white);
  color: var(--ink-2);
  border-color: var(--line-2);
}

.badge--lead {
  background: var(--brass);
  color: #fff;
}

.status {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px 5px 22px;
  border-radius: 999px;
  position: relative;
}

.status::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status--submitted {
  background: rgba(107, 122, 114, 0.12);
  color: var(--ink-2);
}

.status--countered {
  background: rgba(201, 138, 43, 0.14);
  color: var(--warn);
}

.status--accepted {
  background: rgba(47, 158, 111, 0.16);
  color: var(--ok);
}

.status--rejected {
  background: rgba(196, 80, 62, 0.14);
  color: var(--danger);
}

.offer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.offer__time {
  font-size: 12px;
  color: var(--muted);
}

.offer__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--white);
  color: var(--ink-2);
  padding: 7px 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.btn:hover {
  border-color: var(--green-700);
  color: var(--green-d);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.btn--accept:hover {
  background: var(--green-50);
  border-color: var(--ok);
  color: var(--green-700);
}

.btn--reject:hover {
  background: rgba(196, 80, 62, 0.08);
  border-color: var(--danger);
  color: var(--danger);
}

.btn--primary {
  background: var(--green);
  border-color: var(--green-d);
  color: var(--white);
  padding: 11px 22px;
  font-size: 14px;
}

.btn--primary:hover {
  background: var(--green-d);
  color: var(--white);
}

/* ---------- Composer ---------- */
.composer {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--sh-1);
  position: relative;
}

.composer::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent 70%);
  border-radius: 2px;
}

.composer h2 {
  font-size: 24px;
  color: var(--green-d);
  margin-bottom: 4px;
}

.composer__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
  align-items: end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field--terms {
  grid-column: 1 / -1;
}

.field label,
.field__legend {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.18);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-toggle {
  position: relative;
  cursor: pointer;
}

.chip-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip-toggle span {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--white);
  color: var(--ink-2);
  transition: all 0.15s ease;
}

.chip-toggle:hover span {
  border-color: var(--green-700);
}

.chip-toggle input:checked + span {
  background: var(--green-50);
  border-color: var(--green-700);
  color: var(--green-700);
}

.chip-toggle input:focus-visible + span {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.composer .btn--primary {
  justify-self: start;
  grid-column: 1 / -1;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 18px);
  background: var(--green-d);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
  max-width: calc(100vw - 32px);
}

.toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast__accent {
  color: var(--brass-50);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .listing {
    grid-template-columns: 1fr;
  }
  .listing__photo {
    min-height: 200px;
  }
  .band {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .shell {
    padding: 18px 14px 56px;
    gap: 20px;
  }
  .composer__form {
    grid-template-columns: 1fr;
  }
  .offer__amount {
    text-align: left;
  }
  .offer__amount b {
    font-size: 23px;
  }
  .status {
    margin-left: 0;
  }
  .offer__meta {
    gap: 6px;
  }
}

(function () {
  "use strict";

  var LIST_PRICE = 1285000;

  /** @type {Array} */
  var offers = [
    {
      id: 1,
      buyer: "Marisol & Devin Okafor",
      agent: "Repped by Hartwell & Vane Realty",
      amount: 1310000,
      financing: "cash",
      terms: ["Inspection waived", "Close in 18 days"],
      status: "submitted",
      ts: Date.now() - 1000 * 60 * 60 * 5,
    },
    {
      id: 2,
      buyer: "The Castellano Trust",
      agent: "Repped by Linden Grove Properties",
      amount: 1342000,
      financing: "financed",
      terms: ["20% down", "Appraisal contingency", "Close in 35 days"],
      status: "countered",
      ts: Date.now() - 1000 * 60 * 60 * 26,
    },
    {
      id: 3,
      buyer: "Priya Ramanathan",
      agent: "Repped by Coast & Key Brokerage",
      amount: 1268000,
      financing: "financed",
      terms: ["10% down", "Inspection contingency", "Seller credit $8k"],
      status: "submitted",
      ts: Date.now() - 1000 * 60 * 60 * 49,
    },
    {
      id: 4,
      buyer: "Aldous Penhaligon",
      agent: "Repped by Meridian House Group",
      amount: 1255000,
      financing: "cash",
      terms: ["As-is", "Close in 14 days"],
      status: "rejected",
      ts: Date.now() - 1000 * 60 * 60 * 72,
    },
  ];

  var nextId = 5;

  var STATUS_LABEL = {
    submitted: "Submitted",
    countered: "Countered",
    accepted: "Accepted",
    rejected: "Rejected",
  };

  // ---- helpers --------------------------------------------------------------
  var $ = function (sel, ctx) {
    return (ctx || document).querySelector(sel);
  };

  function usd(n) {
    return "$" + Math.round(n).toLocaleString("en-US");
  }

  function initials(name) {
    var parts = name.replace(/[^A-Za-z& ]/g, "").trim().split(/\s+/);
    var first = parts[0] ? parts[0][0] : "?";
    var last = parts.length > 1 ? parts[parts.length - 1][0] : "";
    return (first + last).toUpperCase();
  }

  function relTime(ts) {
    var diff = Date.now() - ts;
    var h = Math.floor(diff / 3600000);
    if (h < 1) return "moments ago";
    if (h < 24) return h + (h === 1 ? " hour ago" : " hours ago");
    var d = Math.floor(h / 24);
    return d + (d === 1 ? " day ago" : " days ago");
  }

  function parseAmount(str) {
    var n = parseInt(String(str).replace(/[^0-9]/g, ""), 10);
    return isNaN(n) ? 0 : n;
  }

  var toastTimer;
  function toast(msg) {
    var el = $("#toast");
    el.innerHTML = msg;
    el.classList.add("toast--show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      el.classList.remove("toast--show");
    }, 2600);
  }

  // Offers still "in play" for leading calculation.
  function liveOffers() {
    return offers.filter(function (o) {
      return o.status !== "rejected";
    });
  }

  function leadingOffer() {
    var live = liveOffers();
    if (!live.length) return null;
    // An accepted offer always leads; otherwise the highest live amount.
    var accepted = live.filter(function (o) {
      return o.status === "accepted";
    });
    var pool = accepted.length ? accepted : live;
    return pool.reduce(function (best, o) {
      return o.amount > best.amount ? o : best;
    });
  }

  // ---- rendering ------------------------------------------------------------
  function render() {
    var list = $("#offerList");
    var lead = leadingOffer();

    list.innerHTML = "";
    offers
      .slice()
      .sort(function (a, b) {
        return b.amount - a.amount;
      })
      .forEach(function (o) {
        list.appendChild(offerEl(o, lead));
      });

    updateSummary(lead);
    updateComposerTargets();
  }

  function offerEl(o, lead) {
    var isLead = lead && o.id === lead.id;
    var li = document.createElement("li");
    li.className = "offer" + (isLead ? " offer--lead" : "");
    li.dataset.id = o.id;

    var delta = o.amount - LIST_PRICE;
    var deltaCls = delta >= 0 ? "offer__delta--up" : "offer__delta--down";
    var deltaTxt =
      (delta >= 0 ? "+" : "−") +
      usd(Math.abs(delta)).slice(1) +
      (delta >= 0 ? " over ask" : " under ask");

    var finBadge =
      o.financing === "cash"
        ? '<span class="badge badge--cash">All cash</span>'
        : '<span class="badge badge--financed">Financed</span>';

    var termBadges = o.terms
      .map(function (t) {
        return '<span class="badge badge--term">' + esc(t) + "</span>";
      })
      .join("");

    var leadBadge = isLead ? '<span class="badge badge--lead">Leading</span>' : "";

    li.innerHTML =
      '<div class="offer__top">' +
      '<div class="offer__buyer">' +
      '<span class="avatar" aria-hidden="true">' +
      initials(o.buyer) +
      "</span>" +
      "<span>" +
      '<span class="offer__name">' +
      esc(o.buyer) +
      "</span><br>" +
      '<span class="offer__agent">' +
      esc(o.agent) +
      "</span>" +
      "</span>" +
      "</div>" +
      '<div class="offer__amount">' +
      "<b>" +
      usd(o.amount) +
      "</b>" +
      '<span class="offer__delta ' +
      deltaCls +
      '">' +
      deltaTxt +
      "</span>" +
      "</div>" +
      "</div>" +
      '<div class="offer__meta">' +
      finBadge +
      termBadges +
      leadBadge +
      '<span class="status status--' +
      o.status +
      '">' +
      STATUS_LABEL[o.status] +
      "</span>" +
      "</div>" +
      '<div class="offer__foot">' +
      '<span class="offer__time">Updated ' +
      relTime(o.ts) +
      "</span>" +
      '<span class="offer__actions">' +
      actionBtns(o) +
      "</span>" +
      "</div>";

    return li;
  }

  function actionBtns(o) {
    if (o.status === "accepted") {
      return '<button class="btn" data-act="reopen" type="button">Reopen</button>';
    }
    if (o.status === "rejected") {
      return '<button class="btn" data-act="reopen" type="button">Restore</button>';
    }
    return (
      '<button class="btn btn--accept" data-act="accept" type="button">Accept</button>' +
      '<button class="btn btn--reject" data-act="reject" type="button">Reject</button>'
    );
  }

  function updateSummary(lead) {
    var live = liveOffers();
    var high = live.reduce(function (m, o) {
      return Math.max(m, o.amount);
    }, 0);
    var cash = offers.filter(function (o) {
      return o.financing === "cash" && o.status !== "rejected";
    }).length;

    $("#statCount").textContent = String(live.length);
    $("#statHigh").textContent = high ? usd(high) : "—";

    if (high) {
      var spread = high - LIST_PRICE;
      var pct = ((spread / LIST_PRICE) * 100).toFixed(1);
      $("#statSpread").textContent =
        (spread >= 0 ? "+" : "−") + Math.abs(pct) + "%";
    } else {
      $("#statSpread").textContent = "—";
    }
    $("#statCash").textContent = String(cash);

    if (lead) {
      $("#leadAmount").textContent = usd(lead.amount);
      $("#leadBy").textContent =
        (lead.status === "accepted" ? "Accepted · " : "Leading · ") + lead.buyer;
    } else {
      $("#leadAmount").textContent = "—";
      $("#leadBy").textContent = "No active offers";
    }
  }

  function updateComposerTargets() {
    var sel = $("#counterTarget");
    var prev = sel.value;
    sel.innerHTML = "";
    var targets = offers.filter(function (o) {
      return o.status === "submitted" || o.status === "countered";
    });
    if (!targets.length) {
      var opt = document.createElement("option");
      opt.value = "";
      opt.textContent = "No open offers to counter";
      opt.disabled = true;
      sel.appendChild(opt);
      sel.disabled = true;
      return;
    }
    sel.disabled = false;
    targets.forEach(function (o) {
      var opt = document.createElement("option");
      opt.value = String(o.id);
      opt.textContent = o.buyer + " — " + usd(o.amount);
      sel.appendChild(opt);
    });
    if (prev && sel.querySelector('option[value="' + prev + '"]')) {
      sel.value = prev;
    }
  }

  function esc(s) {
    return String(s).replace(/[&<>"]/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c];
    });
  }

  function findById(id) {
    return offers.filter(function (o) {
      return o.id === id;
    })[0];
  }

  // ---- interactions ---------------------------------------------------------
  $("#offerList").addEventListener("click", function (e) {
    var btn = e.target.closest("button[data-act]");
    if (!btn) return;
    var card = btn.closest(".offer");
    var o = findById(parseInt(card.dataset.id, 10));
    if (!o) return;

    var act = btn.dataset.act;
    if (act === "accept") {
      offers.forEach(function (x) {
        if (x.status === "accepted") x.status = "submitted";
      });
      o.status = "accepted";
      o.ts = Date.now();
      toast("Accepted <span class='toast__accent'>" + esc(o.buyer) + "</span> at " + usd(o.amount));
    } else if (act === "reject") {
      o.status = "rejected";
      o.ts = Date.now();
      toast("Rejected offer from " + esc(o.buyer));
    } else if (act === "reopen") {
      o.status = "submitted";
      o.ts = Date.now();
      toast(esc(o.buyer) + " moved back to Submitted");
    }
    render();
  });

  $("#counterForm").addEventListener("submit", function (e) {
    e.preventDefault();
    var sel = $("#counterTarget");
    var target = findById(parseInt(sel.value, 10));
    var amount = parseAmount($("#counterAmount").value);

    if (!target) {
      toast("Select an offer to counter.");
      return;
    }
    if (amount < 50000) {
      toast("Enter a valid counter amount.");
      $("#counterAmount").focus();
      return;
    }

    var terms = [];
    Array.prototype.forEach.call(
      document.querySelectorAll('#counterForm .chips input:checked'),
      function (c) {
        terms.push(c.value);
      }
    );
    if (!terms.length) terms.push("Standard terms");

    // Mark the buyer's offer as countered, then log the seller's counter as a new row.
    target.status = "countered";
    target.ts = Date.now();

    offers.push({
      id: nextId++,
      buyer: "Seller counter → " + target.buyer,
      agent: "Listing side · 14 Marlow Crescent",
      amount: amount,
      financing: target.financing,
      terms: terms,
      status: "submitted",
      ts: Date.now(),
    });

    $("#counterForm").reset();
    render();
    toast("Counter of <span class='toast__accent'>" + usd(amount) + "</span> sent to " + esc(target.buyer));
  });

  // Live thousands-format the counter amount input.
  $("#counterAmount").addEventListener("input", function () {
    var n = parseAmount(this.value);
    this.value = n ? n.toLocaleString("en-US") : "";
  });

  $("#listPrice").textContent = usd(LIST_PRICE);
  render();
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Offer Tracker — 14 Marlow Crescent</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>
    <main class="shell">
      <!-- Listing header -->
      <header class="listing" aria-label="Listing summary">
        <div class="listing__photo" role="img" aria-label="Architectural photo of a modern green-roofed home at dusk">
          <span class="listing__chip listing__chip--status">Active</span>
          <span class="listing__chip listing__chip--days">12 days on market</span>
        </div>
        <div class="listing__body">
          <p class="eyebrow">Single-family residence · MLS&nbsp;#A4-77310</p>
          <h1 class="listing__title">14 Marlow Crescent</h1>
          <p class="listing__addr">Brookhaven Heights, Aldermont · 90427</p>

          <div class="facts">
            <span class="fact"><strong>4</strong> beds</span>
            <span class="fact"><strong>3.5</strong> baths</span>
            <span class="fact"><strong>3,240</strong> sq ft</span>
            <span class="fact"><strong>0.34</strong> ac lot</span>
          </div>

          <div class="listing__price">
            <div>
              <span class="price__label">List price</span>
              <span class="price__value" id="listPrice">$1,285,000</span>
            </div>
            <div class="listing__lead">
              <span class="price__label">Leading offer</span>
              <span class="price__value price__value--lead" id="leadAmount">—</span>
              <span class="lead__by" id="leadBy">No offers yet</span>
            </div>
          </div>
        </div>
      </header>

      <!-- Summary band -->
      <section class="band" aria-label="Offer summary">
        <div class="stat">
          <span class="stat__num" id="statCount">0</span>
          <span class="stat__lbl">Active offers</span>
        </div>
        <div class="stat">
          <span class="stat__num" id="statHigh">—</span>
          <span class="stat__lbl">Highest bid</span>
        </div>
        <div class="stat">
          <span class="stat__num" id="statSpread">—</span>
          <span class="stat__lbl">Over / under ask</span>
        </div>
        <div class="stat">
          <span class="stat__num" id="statCash">0</span>
          <span class="stat__lbl">All-cash offers</span>
        </div>
      </section>

      <!-- Offers -->
      <section class="offers" aria-label="Offers on this listing">
        <div class="offers__head">
          <h2>Offers</h2>
          <p class="muted">Highlighted row is currently leading.</p>
        </div>
        <ul class="offer-list" id="offerList"></ul>
      </section>

      <!-- Counter-offer composer -->
      <section class="composer" aria-label="Counter-offer composer">
        <h2>Send a counter-offer</h2>
        <p class="muted">Respond to an offer with revised price and terms. The seller&rsquo;s counter is logged as a new line in the offer history.</p>
        <form id="counterForm" class="composer__form" novalidate>
          <div class="field">
            <label for="counterTarget">Respond to</label>
            <select id="counterTarget" required></select>
          </div>
          <div class="field">
            <label for="counterAmount">Counter amount (USD)</label>
            <input id="counterAmount" type="text" inputmode="numeric" placeholder="1,300,000" autocomplete="off" required />
          </div>
          <div class="field field--terms">
            <span class="field__legend">Terms</span>
            <div class="chips" role="group" aria-label="Counter terms">
              <label class="chip-toggle"><input type="checkbox" value="Inspection waived" /><span>Inspection waived</span></label>
              <label class="chip-toggle"><input type="checkbox" value="Close in 21 days" /><span>21-day close</span></label>
              <label class="chip-toggle"><input type="checkbox" value="Seller credit removed" /><span>No seller credit</span></label>
              <label class="chip-toggle"><input type="checkbox" value="As-is" /><span>As-is</span></label>
            </div>
          </div>
          <button class="btn btn--primary" type="submit">Send counter</button>
        </form>
      </section>
    </main>

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

Offer Tracker

A focused negotiation board for the listing agent on a single property. A photographic, gradient-rendered header anchors the page with the list price, key facts, and a running readout of the current leading offer. Beneath it, a summary band tallies active offers, the highest bid, the spread over or under asking, and how many bids are all-cash.

Every offer is a refined card: buyer and representing brokerage, the bid amount with an over- or under-ask delta, a cash or financed badge, contingency term chips, a colour-coded status pill (Submitted, Countered, Accepted, Rejected) and a relative timestamp. The leading offer is highlighted with a brass accent and a “Leading” badge — accepting one bid automatically steps any prior acceptance back, and rejecting a bid pulls it out of the leading calculation.

The counter-offer composer lets the seller respond to any open offer with a revised price and toggleable terms. Sending a counter flips the buyer’s offer to Countered and logs the seller’s counter as a new line in the history, then recomputes the highest bid, spread, and leading offer. Inputs format thousands as you type, and a small toast confirms each action.

Illustrative UI only — sample listings and data are fictional; not a real real-estate service.