patx/miadruck
Improve listing highlight animation and functionality
Commit e1383e8 · Harrison Erd · 2026-01-15T23:38:14-05:00
Improve listing highlight animation and functionality Enhanced the listing highlight animation and updated related functions for better user experience.
Comments
No comments yet.
Diff
diff --git a/index.html b/index.html
index 3b5f38b..6f7efcd 100644
--- a/index.html
+++ b/index.html
@@ -345,11 +345,24 @@
transform:translateX(-50%) translateY(-4px);
}
- /* --- listing deep-link highlight --- */
+ /* --- listing deep-link highlight (strong + obvious) --- */
+ @keyframes listingPulse {
+ 0% { box-shadow: 0 16px 46px rgba(0,0,0,.08), 0 0 0 0 rgba(var(--accent-rgb), .0); }
+ 30% { box-shadow: 0 22px 70px rgba(0,0,0,.12), 0 0 0 10px rgba(var(--accent-rgb), .18); }
+ 60% { box-shadow: 0 22px 70px rgba(0,0,0,.12), 0 0 0 6px rgba(var(--accent-rgb), .10); }
+ 100% { box-shadow: 0 16px 46px rgba(0,0,0,.08), 0 0 0 0 rgba(var(--accent-rgb), .0); }
+ }
+
.card.listing-highlight{
- border-color: rgba(var(--accent-rgb), .38);
- box-shadow: 0 22px 70px rgba(var(--accent-rgb), .20);
- transform: translateY(-2px);
+ border-color: rgba(var(--accent-rgb), .55);
+ box-shadow:
+ 0 22px 70px rgba(0,0,0,.12),
+ 0 0 0 4px rgba(var(--accent-rgb), .22),
+ 0 0 0 12px rgba(var(--accent-rgb), .10);
+ animation: listingPulse 1.6s ease-out 0s 2;
+ transform: translateY(-3px);
+ position: relative;
+ z-index: 5;
}
.form{ display:grid; gap:12px; }
@@ -814,7 +827,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.
@@ -1140,30 +1153,18 @@
`;
}
- 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 + scroll/highlight
+ // If URL has ?listing=..., auto-prefill + scroll to listing
const p = new URLSearchParams(location.search);
const listing = p.get("listing");
if (listing){
prefillListing(listing);
- setTimeout(() => scrollToListing(listing), 60);
+ // wait a bit so layout/images are ready, then scroll + highlight
+ setTimeout(() => scrollToListing(listing), 320);
}
}
@@ -1211,11 +1212,33 @@
// ---------------------------
function listingShareUrl(id){
const u = new URL(location.href);
- u.hash = ""; // ensure we never copy #contact etc
+ u.hash = ""; // remove #contact or any hash
u.searchParams.set("listing", String(id || ""));
return u.toString();
}
+ function scrollToListing(id){
+ const targetId = String(id || "");
+ const el = document.getElementById(targetId);
+ if (!el) return false;
+
+ // clear previous highlight
+ document.querySelectorAll(".card.listing-highlight")
+ .forEach(n => n.classList.remove("listing-highlight"));
+
+ // smooth scroll to the card
+ el.scrollIntoView({ behavior: "smooth", block: "center" });
+
+ // apply highlight after scroll begins (more reliable visually)
+ setTimeout(() => {
+ el.classList.add("listing-highlight");
+ clearTimeout(scrollToListing._t);
+ scrollToListing._t = setTimeout(() => el.classList.remove("listing-highlight"), 4500);
+ }, 220);
+
+ return true;
+ }
+
async function copyListingLink(id){
const url = listingShareUrl(id);
@@ -1233,13 +1256,13 @@
document.execCommand("copy");
ta.remove();
}
- showToast("Link copied");
+ showToast("Link copied ✅");
} catch (e){
// last resort: prompt
window.prompt("Copy this link:", url);
}
- // bonus: highlight immediately when they copy
+ // Bonus: draw attention immediately if they tap copy while on-page
scrollToListing(id);
}
@@ -1333,6 +1356,7 @@
window.switchToContact = switchToContact;
window.prefillListing = prefillListing;
window.copyListingLink = copyListingLink;
+ window.scrollToListing = scrollToListing;
render();
</script>