patx/miadruck
Implement listing highlight and enhance message display
Commit fddca54 · Harrison Erd · 2026-01-15T23:30:21-05:00
Implement listing highlight and enhance message display Add listing deep-link highlight functionality and improve message handling.
Comments
No comments yet.
Diff
diff --git a/index.html b/index.html
index e3690f1..3b5f38b 100644
--- a/index.html
+++ b/index.html
@@ -345,6 +345,13 @@
transform:translateX(-50%) translateY(-4px);
}
+ /* --- listing deep-link highlight --- */
+ .card.listing-highlight{
+ border-color: rgba(var(--accent-rgb), .38);
+ box-shadow: 0 22px 70px rgba(var(--accent-rgb), .20);
+ transform: translateY(-2px);
+ }
+
.form{ display:grid; gap:12px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
@@ -807,7 +814,7 @@
text-align:center;
">
<div style="font-family:Poppins,Inter,system-ui;font-weight:900;font-size:20px;">
- ✅ Your message has been sent!
+ Your message has been sent!
</div>
<div class="muted" style="margin-top:8px;font-weight:700; line-height:1.45;">
Thanks for reaching out — Mia will get back to you shortly.
@@ -1081,9 +1088,10 @@
const tags = (x.tags || []).slice(0,3).map(t => `<span class="tag">${esc(t)}</span>`).join("");
const link = (x.link || "#").toString();
const newTab = link.startsWith("http") ? `target="_blank" rel="noopener"` : "";
+ const lid = esc(x.id || x.title);
return `
- <article class="card">
+ <article class="card" id="${lid}" data-listing-id="${lid}">
<div class="card-img" style="background-image:url('${esc(x.image || "")}')"></div>
<div class="card-pad">
<div class="price">${esc(x.price || "")}</div>
@@ -1098,7 +1106,7 @@
type="button"
aria-label="Copy listing link"
title="Copy link"
- onclick="copyListingLink('${esc(x.id || x.title)}')">
+ onclick="copyListingLink('${lid}')">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M10 13a5 5 0 0 0 7.07 0l2.12-2.12a5 5 0 0 0-7.07-7.07L10.9 4.99"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1109,7 +1117,7 @@
<div class="btn-split">
<a href="${esc(link)}" ${newTab}>More Details</a>
- <a href="#contact" onclick="prefillListing('${esc(x.id || x.title)}'); switchToContact();">Contact</a>
+ <a href="#contact" onclick="prefillListing('${lid}'); switchToContact(); return false;">Contact</a>
</div>
</div>
</div>
@@ -1132,15 +1140,31 @@
`;
}
+ function scrollToListing(id){
+ const el = document.getElementById(String(id || ""));
+ if (!el) return false;
+
+ el.scrollIntoView({ behavior: "smooth", block: "center" });
+
+ el.classList.add("listing-highlight");
+ clearTimeout(scrollToListing._t);
+ scrollToListing._t = setTimeout(() => el.classList.remove("listing-highlight"), 2600);
+
+ return true;
+ }
+
function render(){
document.getElementById("featuredGrid").innerHTML = FEATURED.map(listingCard).join("");
document.getElementById("soldGrid").innerHTML = SOLD.map(soldCard).join("");
document.getElementById("y").textContent = new Date().getFullYear();
- // If URL has ?listing=..., auto-prefill
+ // If URL has ?listing=..., auto-prefill + scroll/highlight
const p = new URLSearchParams(location.search);
const listing = p.get("listing");
- if (listing) prefillListing(listing);
+ if (listing){
+ prefillListing(listing);
+ setTimeout(() => scrollToListing(listing), 60);
+ }
}
// ---------------------------
@@ -1187,6 +1211,7 @@
// ---------------------------
function listingShareUrl(id){
const u = new URL(location.href);
+ u.hash = ""; // ensure we never copy #contact etc
u.searchParams.set("listing", String(id || ""));
return u.toString();
}
@@ -1213,6 +1238,9 @@
// last resort: prompt
window.prompt("Copy this link:", url);
}
+
+ // bonus: highlight immediately when they copy
+ scrollToListing(id);
}
function showToast(msg){