updates
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@@ -0,0 +1 @@
|
||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}
|
||||
@@ -0,0 +1 @@
|
||||
@font-face{font-family:revicons;fallback:fallback;src:url(/_next/static/media/revicons.ff59b316.woff) format("woff"),url(/_next/static/media/revicons.b96bdb22.ttf) format("ttf"),url(/_next/static/media/revicons.652e7269.eot) format("ttf")}.react-multi-carousel-list{display:flex;align-items:center;overflow:hidden;position:relative}.react-multi-carousel-track{list-style:none;padding:0;margin:0;display:flex;flex-direction:row;position:relative;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform,transition}.react-multiple-carousel__arrow{position:absolute;outline:0;transition:all .5s;border-radius:35px;z-index:1000;border:0;background:rgba(0,0,0,.5);min-width:43px;min-height:43px;opacity:1;cursor:pointer}.react-multiple-carousel__arrow:hover{background:rgba(0,0,0,.8)}.react-multiple-carousel__arrow:before{font-size:20px;color:#fff;display:block;font-family:revicons;text-align:center;z-index:2;position:relative}.react-multiple-carousel__arrow:disabled{cursor:default;background:rgba(0,0,0,.5)}.react-multiple-carousel__arrow--left{left:calc(4% + 1px)}.react-multiple-carousel__arrow--left:before{content:"\e824"}.react-multiple-carousel__arrow--right{right:calc(4% + 1px)}.react-multiple-carousel__arrow--right:before{content:"\e825"}.react-multi-carousel-dot-list{position:absolute;bottom:0;display:flex;left:0;right:0;justify-content:center;padding:0;margin:0;list-style:none;text-align:center}.react-multi-carousel-dot button{display:inline-block;width:12px;height:12px;border-radius:50%;opacity:1;box-shadow:none;transition:background .5s;border:2px solid grey;padding:0;margin:0 6px 0 0;outline:0;cursor:pointer}.react-multi-carousel-dot button:hover:active,.react-multi-carousel-dot--active button{background:#080808}.react-multi-carousel-item{transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.react-multi-carousel-item{flex-shrink:0!important}.react-multi-carousel-track{overflow:visible!important}}[dir=rtl].react-multi-carousel-list{direction:rtl}.rtl.react-multiple-carousel__arrow--right{right:auto;left:calc(4% + 1px)}.rtl.react-multiple-carousel__arrow--right:before{content:"\e824"}.rtl.react-multiple-carousel__arrow--left{left:auto;right:calc(4% + 1px)}.rtl.react-multiple-carousel__arrow--left:before{content:"\e825"}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../template/real_estate_html/site/css
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../template/real_estate_html/site/fonts
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../template/real_estate_html/site/images
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>MKDRealtor.com — Proposal UX Gallery</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="hub-page">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<section class="hub-hero">
|
||||
<h1>MKDRealtor.com — UX proposal</h1>
|
||||
<p>Click-through mockups for MKDRealtor.com — public marketing site and private realtor portal: leads, UTM analytics, mailing list, multi-channel campaigns, postcard design, email engagement, and social scheduling.</p>
|
||||
</section>
|
||||
<div class="hub-grid">
|
||||
<a class="hub-card" href="public-home.html"><div class="eyebrow">Public · Phase 1</div><h3>Marketing home</h3><p>Brand-forward landing with hero, services, and CTA to contact.</p></a>
|
||||
<a class="hub-card" href="public-about.html"><div class="eyebrow">Public · Phase 1</div><h3>About</h3><p>Realtor story and trust signals.</p></a>
|
||||
<a class="hub-card" href="public-contact.html"><div class="eyebrow">Public · Phase 1</div><h3>Contact form</h3><p>reCAPTCHA-protected lead capture; consent notice; creates Lead + Contact.</p></a>
|
||||
<a class="hub-card" href="public-unsubscribe.html"><div class="eyebrow">Public · Phase 2</div><h3>Opt-out / unsubscribe</h3><p>One-click email unsubscribe and per-channel preference.</p></a>
|
||||
<a class="hub-card" href="public-404.html"><div class="eyebrow">Public · system</div><h3>404 not found</h3><p>Branded error page with path home or to contact.</p></a>
|
||||
<a class="hub-card" href="public-under-construction.html"><div class="eyebrow">Public · system</div><h3>Under construction</h3><p>Pre-launch / maintenance holding page with notify-me email.</p></a>
|
||||
<a class="hub-card" href="portal-login.html"><div class="eyebrow">Portal · Phase 1</div><h3>Login</h3><p>Private realtor authentication.</p></a>
|
||||
<a class="hub-card" href="portal-dashboard.html"><div class="eyebrow">Portal · Phase 1</div><h3>Dashboard</h3><p>Home widgets: new leads, campaign health, scheduled posts.</p></a>
|
||||
<a class="hub-card" href="portal-leads.html"><div class="eyebrow">Portal · Phase 1</div><h3>Lead inbox</h3><p>Statuses, source attribution, quick filter.</p></a>
|
||||
<a class="hub-card" href="portal-lead-detail.html"><div class="eyebrow">Portal · Phase 1</div><h3>Lead detail</h3><p>Notes, UTM attribution, linked contact consent.</p></a>
|
||||
<a class="hub-card" href="portal-analytics.html"><div class="eyebrow">Portal · Phase 1</div><h3>UTM analytics</h3><p>Leads by source/campaign over time.</p></a>
|
||||
<a class="hub-card" href="portal-contacts.html"><div class="eyebrow">Portal · Phase 2</div><h3>Mailing list</h3><p>Contacts with per-channel consent (email / SMS / postcard).</p></a>
|
||||
<a class="hub-card" href="portal-contacts-import.html"><div class="eyebrow">Portal · Phase 2</div><h3>Import contacts</h3><p>CSV/Excel upload, column mapping, consent defaults, duplicate merge.</p></a>
|
||||
<a class="hub-card" href="portal-campaign.html"><div class="eyebrow">Portal · Phase 2–3</div><h3>Campaign composer</h3><p>Email, SMS, or postcard — select recipients, schedule, send.</p></a>
|
||||
<a class="hub-card" href="portal-campaign-report.html"><div class="eyebrow">Portal · Phase 2</div><h3>Email engagement</h3><p>SMTP2GO opens, clicks, bounces, unsubscribes per campaign.</p></a>
|
||||
<a class="hub-card" href="portal-postcard-designer.html"><div class="eyebrow">Portal · Phase 3</div><h3>Postcard designer</h3><p>Size picker (4×6–jumbo), reusable media library uploads, live front/back preview.</p></a>
|
||||
<a class="hub-card" href="portal-social.html"><div class="eyebrow">Portal · Phase 4</div><h3>Social live preview</h3><p>Compose with AI chat assist; live FB / IG / LinkedIn previews update as you type.</p></a>
|
||||
<a class="hub-card" href="portal-social-accounts.html"><div class="eyebrow">Portal · Phase 4</div><h3>Social accounts</h3><p>Add via OAuth; reconnect when tokens expire; health + disconnect.</p></a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../template/real_estate_html/site/js
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>UTM analytics · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="active" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>UTM analytics</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Conversion attribution we own (UTMVisit → Lead). Pageviews stay in Tianji; this view answers “which campaigns create leads?”</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">Leads (30d)</div><div class="value">34</div><div class="delta">↑ 12% vs prior</div></div>
|
||||
<div class="stat-card"><div class="label">Top source</div><div class="value" style="font-size:18px;margin-top:10px">Facebook</div><div class="delta">14 leads</div></div>
|
||||
<div class="stat-card"><div class="label">Top campaign</div><div class="value" style="font-size:18px;margin-top:10px">spring-open</div><div class="delta">9 leads</div></div>
|
||||
<div class="stat-card"><div class="label">Direct / none</div><div class="value">6</div><div class="delta">organic / typed URL</div></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Leads by week</h2><span style="font-size:12px;color:#6b7280">Chart.js in production</span></div>
|
||||
<div class="panel-b">
|
||||
<div class="chart-placeholder">
|
||||
<div class="bar" style="height:40%"></div><div class="bar" style="height:55%"></div><div class="bar" style="height:35%"></div>
|
||||
<div class="bar" style="height:70%"></div><div class="bar" style="height:60%"></div><div class="bar" style="height:85%"></div>
|
||||
<div class="bar" style="height:50%"></div><div class="bar" style="height:75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>By source / campaign</h2></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Source</th><th>Medium</th><th>Campaign</th><th>Leads</th><th>Won</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>facebook</td><td>cpc</td><td>spring-open</td><td>9</td><td>2</td></tr>
|
||||
<tr><td>google</td><td>organic</td><td>brand</td><td>7</td><td>1</td></tr>
|
||||
<tr><td>instagram</td><td>social</td><td>reel-tour</td><td>5</td><td>1</td></tr>
|
||||
<tr><td>postcard</td><td>mail</td><td>march-mailer</td><td>4</td><td>0</td></tr>
|
||||
<tr><td>(direct)</td><td>—</td><td>—</td><td>6</td><td>1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Email campaign report · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="active" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Email campaign report</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> SMTP2GO webhooks feed opens, clicks, bounces into ProviderEvent. Dashboard shows unique opens, click rate, and per-recipient activity.</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;align-items:center">
|
||||
<div>
|
||||
<div class="muted" style="font-size:13px">Campaign</div>
|
||||
<strong style="font-size:16px">Spring seller tips</strong>
|
||||
<span class="badge badge-sent" style="margin-left:8px">Sent</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<a class="btn btn-ghost" href="portal-campaign.html">Back to campaigns</a>
|
||||
<button class="btn btn-sm btn-ghost" type="button">Export CSV</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">Delivered</div><div class="value">182</div><div class="delta">of 186 sent · 97.8%</div></div>
|
||||
<div class="stat-card"><div class="label">Opened</div><div class="value">94</div><div class="delta">51.6% open rate</div></div>
|
||||
<div class="stat-card"><div class="label">Clicked</div><div class="value">27</div><div class="delta">14.8% click rate</div></div>
|
||||
<div class="stat-card"><div class="label">Bounced / unsub</div><div class="value">4 / 2</div><div class="delta">SMTP2GO events</div></div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Engagement over time</h2><span class="muted" style="font-size:12px">From SMTP2GO webhooks → ProviderEvent</span></div>
|
||||
<div class="panel-b">
|
||||
<div class="chart-placeholder">
|
||||
<div class="bar" style="height:20%;opacity:.4" title="sent"></div>
|
||||
<div class="bar" style="height:45%"></div>
|
||||
<div class="bar" style="height:70%"></div>
|
||||
<div class="bar" style="height:85%"></div>
|
||||
<div class="bar" style="height:60%"></div>
|
||||
<div class="bar" style="height:40%"></div>
|
||||
<div class="bar" style="height:25%"></div>
|
||||
<div class="bar" style="height:15%"></div>
|
||||
</div>
|
||||
<p class="muted" style="font-size:12px;margin:8px 0 0">Opens by hour after send (tracking pixel + SMTP2GO open events)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>What we track</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<ul class="plain-list">
|
||||
<li><strong>Sent / delivered / bounced</strong> — SMTP2GO delivery webhooks</li>
|
||||
<li><strong>Opened</strong> — open tracking (unique + total)</li>
|
||||
<li><strong>Clicked</strong> — link click tracking</li>
|
||||
<li><strong>Unsubscribed</strong> — our opt-out link + SMTP2GO complaint</li>
|
||||
<li><strong>Failed</strong> — provider errors (retried via django.tasks)</li>
|
||||
</ul>
|
||||
<p class="muted" style="margin:0">SMS: delivery + STOP via SMTP2GO SMS API (no “opens”). Postcards: Lob/Click2Mail in-transit status, not opens.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Recipients</h2>
|
||||
<select style="padding:6px 10px;border:1px solid #e3e8ef;font-size:13px">
|
||||
<option>All</option><option>Opened</option><option>Clicked</option><option>Not opened</option><option>Bounced</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Contact</th><th>Status</th><th>Opened</th><th>Clicked</th><th>Last event</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Jordan Lee</td><td><span class="badge badge-delivered">Delivered</span></td><td>Yes · 2×</td><td>Yes</td><td>Jul 18 10:22a open</td></tr>
|
||||
<tr><td>Sam Ortiz</td><td><span class="badge badge-delivered">Delivered</span></td><td>Yes · 1×</td><td>—</td><td>Jul 18 11:05a open</td></tr>
|
||||
<tr><td>Riley Brooks</td><td><span class="badge badge-delivered">Delivered</span></td><td>—</td><td>—</td><td>Jul 18 10:01a delivered</td></tr>
|
||||
<tr><td>Casey Ng</td><td><span class="badge badge-failed">Bounced</span></td><td>—</td><td>—</td><td>Jul 18 10:00a hard bounce</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Campaign composer · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="active" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Campaign composer</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Email/SMS/postcard composer. Email engagement (opens/clicks) from SMTP2GO. Postcards use the live designer.</div>
|
||||
|
||||
<div class="channel-tabs">
|
||||
<a class="active" href="#email">Email</a>
|
||||
<a href="#sms">SMS</a>
|
||||
<a href="portal-postcard-designer.html">Postcard</a>
|
||||
</div>
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Compose</h2></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Campaign name</label><input value="Spring seller tips"></div>
|
||||
<div class="field"><label>Template</label>
|
||||
<select><option>Seller tips — newsletter</option><option>Open house invite</option><option>Just listed</option><option>(blank)</option></select>
|
||||
</div>
|
||||
<div class="field"><label>Subject</label><input value="3 things sellers overlook this spring"></div>
|
||||
<div class="field"><label>Body</label>
|
||||
<textarea style="min-height:140px">Hi {{first_name}},
|
||||
|
||||
A few timing tips for listing this season…
|
||||
|
||||
— Monica</textarea>
|
||||
<div class="hint">Merge tags: {{first_name}}, {{last_name}}. Unsubscribe link appended. Open/click tracking via SMTP2GO.</div>
|
||||
</div>
|
||||
<div class="form-grid cols-2">
|
||||
<div class="field"><label>Recipients</label><input value="186 consented email contacts" readonly></div>
|
||||
<div class="field"><label>Schedule</label><input type="datetime-local" value="2026-07-18T10:00"></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
||||
<button class="btn btn-primary" type="button">Schedule send</button>
|
||||
<button class="btn btn-ghost" type="button">Save draft</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Preview</h2></div>
|
||||
<div class="panel-b"><div class="preview-pane">
|
||||
<strong>Subject:</strong> 3 things sellers overlook this spring<br><br>
|
||||
Hi Jordan,<br><br>
|
||||
A few timing tips for listing this season…<br><br>
|
||||
— Monica<br><br>
|
||||
<span class="muted" style="font-size:12px"><a href="public-unsubscribe.html">Unsubscribe</a> · Monica Dhillon · MKDRealtor.com</span>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>After send</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<p>SMTP2GO reports <strong>opens, clicks, bounces, complaints</strong> via webhooks.</p>
|
||||
<a class="btn btn-sm btn-primary" href="portal-campaign-report.html">View sample engagement report</a>
|
||||
<p class="muted" style="margin:12px 0 0;font-size:13px">Postcard campaigns: design in <a href="portal-postcard-designer.html">Postcard designer</a>, then select recipients with addresses.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Recent campaigns</h2></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Name</th><th>Channel</th><th>Recipients</th><th>Engagement</th><th>Status</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>March mailer</td><td>Postcard</td><td>120</td><td>—</td><td><span class="badge badge-delivered">Delivered</span></td><td></td></tr>
|
||||
<tr><td>Open house SMS</td><td>SMS</td><td>42</td><td>delivered 40</td><td><span class="badge badge-sent">Sent</span></td><td></td></tr>
|
||||
<tr><td>Spring seller tips</td><td>Email</td><td>186</td><td>94 opens · 27 clicks</td><td><span class="badge badge-sent">Sent</span></td><td><a href="portal-campaign-report.html">Report</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Import contacts · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="active" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Import contacts</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> CSV/Excel upload → map columns → set consent defaults → merge duplicates. Creates Contact + ConsentRecord rows.</div>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step active"><span>1</span> Upload</div>
|
||||
<div class="step active"><span>2</span> Map columns</div>
|
||||
<div class="step"><span>3</span> Consent & review</div>
|
||||
<div class="step"><span>4</span> Import</div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Upload file</h2></div>
|
||||
<div class="panel-b">
|
||||
<div class="dropzone" id="dropzone">
|
||||
<strong>Drop CSV or Excel here</strong>
|
||||
<p class="muted">or click to browse · .csv, .xlsx · max 10MB</p>
|
||||
<input type="file" accept=".csv,.xlsx" style="margin-top:12px" onchange="document.getElementById('file-name').textContent=this.files[0]?this.files[0].name:'No file'">
|
||||
<p id="file-name" style="margin:8px 0 0;font-size:13px">sample-contacts.csv (mock loaded)</p>
|
||||
</div>
|
||||
<p class="hint-block">Download <a href="#">sample CSV template</a> with columns: first_name, last_name, email, phone, street, city, state, zip, consent_email, consent_sms, consent_postcard.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Column mapping</h2></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Your column</th><th>Maps to</th><th>Sample</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>First Name</td><td><select><option selected>first_name</option><option>Skip</option></select></td><td>Jordan</td></tr>
|
||||
<tr><td>Last Name</td><td><select><option selected>last_name</option></select></td><td>Lee</td></tr>
|
||||
<tr><td>Email Address</td><td><select><option selected>email</option></select></td><td>jordan.lee@example.com</td></tr>
|
||||
<tr><td>Mobile</td><td><select><option selected>phone</option><option>Skip</option></select></td><td>555-018-4420</td></tr>
|
||||
<tr><td>Mailing Street</td><td><select><option selected>street</option></select></td><td>214 Maple St</td></tr>
|
||||
<tr><td>City / ST / ZIP</td><td><select><option selected>city + state + zip</option></select></td><td>Metro, ST 94117</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Consent defaults</h2></div>
|
||||
<div class="panel-b form-grid">
|
||||
<p class="muted" style="margin:0">Applied when the file has no consent columns. You are responsible for having permission to contact.</p>
|
||||
<label class="check-row"><input type="checkbox" checked> Mark email opted-in</label>
|
||||
<label class="check-row"><input type="checkbox"> Mark SMS opted-in</label>
|
||||
<label class="check-row"><input type="checkbox"> Mark postcard opted-in (needs address)</label>
|
||||
<div class="field"><label>Source label</label><input value="csv-import-jul2026"></div>
|
||||
<div class="field"><label>Duplicates</label>
|
||||
<select><option>Merge on email/phone (update blank fields)</option><option>Skip existing</option><option>Create new anyway</option></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Preview · first 3 rows</h2></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Consent</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Jordan Lee</td><td>jordan.lee@example.com</td><td><span class="badge badge-optin">E</span></td></tr>
|
||||
<tr><td>Sam Ortiz</td><td>sam.ortiz@example.com</td><td><span class="badge badge-optin">E</span> <span class="badge badge-optin">P</span></td></tr>
|
||||
<tr><td>Avery Chen</td><td>—</td><td><span class="badge badge-optin">S</span> <span class="badge badge-optin">P</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-b">
|
||||
<p style="font-size:14px;margin:0 0 12px"><strong>Ready:</strong> 248 rows · 12 missing email · 31 missing address · 4 duplicates to merge</p>
|
||||
<button class="btn btn-primary" type="button" onclick="alert('Mockup: enqueue import task → create/update Contact + ConsentRecord')">Import 248 contacts</button>
|
||||
<a class="btn btn-ghost" href="portal-contacts.html">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Mailing list · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="active" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Mailing list</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> One list. Per-channel consent. Import CSV/Excel or capture from the contact form.</div>
|
||||
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;justify-content:space-between">
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap">
|
||||
<input style="padding:8px 12px;border:1px solid #e3e8ef;min-width:200px" placeholder="Search contacts…">
|
||||
<select style="padding:8px 12px;border:1px solid #e3e8ef"><option>Any consent</option><option>Email opted in</option><option>SMS opted in</option><option>Postcard opted in</option></select>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<a class="btn btn-ghost" href="portal-contacts-import.html">Import CSV / Excel</a>
|
||||
<a class="btn btn-primary" href="portal-campaign.html">New campaign</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th></th><th>Contact</th><th>Address</th><th>Consent</th><th>Source</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><input type="checkbox" checked></td><td>Jordan Lee<br><span class="muted">jordan.lee@example.com · (555) 018-4420</span></td><td>—</td><td><span class="badge badge-optin">E</span> <span class="badge badge-optin">S</span> <span class="badge badge-optout">P</span></td><td>form</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>Sam Ortiz<br><span class="muted">sam.ortiz@example.com</span></td><td>214 Maple St</td><td><span class="badge badge-optin">E</span> <span class="badge badge-optout">S</span> <span class="badge badge-optin">P</span></td><td>import</td></tr>
|
||||
<tr><td><input type="checkbox"></td><td>Avery Chen<br><span class="muted">(555) 014-2291</span></td><td>88 Birch Ave</td><td><span class="badge badge-optout">E</span> <span class="badge badge-optin">S</span> <span class="badge badge-optin">P</span></td><td>postcard</td></tr>
|
||||
<tr><td><input type="checkbox" checked></td><td>Riley Brooks<br><span class="muted">riley.b@example.com</span></td><td>—</td><td><span class="badge badge-optin">E</span> <span class="badge badge-optin">S</span> <span class="badge badge-optout">P</span></td><td>form</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p class="muted" style="font-size:13px">E = email · S = SMS · P = postcard. <a href="portal-contacts-import.html">Import contacts</a> for bulk CSV/Excel.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Dashboard · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="active" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Dashboard</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Portal home — glanceable widgets for leads, list health, and scheduled work. No CRM pipeline chrome.</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-card"><div class="label">New leads</div><div class="value">7</div><div class="delta">+3 this week</div></div>
|
||||
<div class="stat-card"><div class="label">Open pipeline</div><div class="value">18</div><div class="delta">4 contacted</div></div>
|
||||
<div class="stat-card"><div class="label">Mailing list</div><div class="value">412</div><div class="delta">8 opted out (30d)</div></div>
|
||||
<div class="stat-card"><div class="label">Scheduled posts</div><div class="value">5</div><div class="delta">Next: tomorrow 9am</div></div>
|
||||
</div>
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Recent leads</h2><a class="btn btn-sm btn-ghost" href="portal-leads.html">View all</a></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Name</th><th>Source</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><a href="portal-lead-detail.html">Jordan Lee</a></td><td>facebook / spring-open</td><td><span class="badge badge-new">New</span></td></tr>
|
||||
<tr><td><a href="portal-lead-detail.html">Sam Ortiz</a></td><td>google / brand</td><td><span class="badge badge-contacted">Contacted</span></td></tr>
|
||||
<tr><td><a href="portal-lead-detail.html">Avery Chen</a></td><td>postcard / march-mailer</td><td><span class="badge badge-new">New</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Upcoming outreach</h2><a class="btn btn-sm btn-ghost" href="portal-campaign.html">Compose</a></div>
|
||||
<div class="panel-b">
|
||||
<p style="margin:0 0 12px;font-size:14px"><strong>Spring seller tips</strong> — Email · scheduled Fri 10:00 · 186 recipients</p>
|
||||
<p style="margin:0 0 12px;font-size:14px"><strong>Open house reminder</strong> — SMS · draft · 42 recipients</p>
|
||||
<p style="margin:0;font-size:14px"><strong>Neighborhood just listed</strong> — Postcard · queued · 120 pieces</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lead detail · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="active" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Lead detail</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Lead + notes + Attribution from UTMVisit. Consent shown from linked Contact (per channel).</div>
|
||||
|
||||
<div class="split">
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Jordan Lee</h2><span class="badge badge-new">New</span></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Email</label><div>jordan.lee@example.com</div></div>
|
||||
<div class="field"><label>Phone</label><div>(555) 018-4420</div></div>
|
||||
<div class="field"><label>Interest</label><div>Buying a home · 3bed, under $450k, north side</div></div>
|
||||
<div class="field"><label>Message</label><div>“Saw your open-house post — available Saturday morning?”</div></div>
|
||||
<div class="field"><label>Status</label>
|
||||
<select><option selected>New</option><option>Contacted</option><option>Won</option><option>Lost</option></select>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="button">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Notes</h2></div>
|
||||
<div class="panel-b">
|
||||
<div style="font-size:13px;color:#6b7280;margin-bottom:12px"><strong style="color:#1a1f2c">You</strong> · Today 8:20a — Prefers text over call. Looking near Oakridge schools.</div>
|
||||
<div class="field"><textarea placeholder="Add a note…"></textarea></div>
|
||||
<button class="btn btn-sm btn-primary" type="button">Add note</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Attribution</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<p><strong>utm_source</strong> facebook<br>
|
||||
<strong>utm_medium</strong> cpc<br>
|
||||
<strong>utm_campaign</strong> spring-open<br>
|
||||
<strong>utm_content</strong> carousel-a<br>
|
||||
<strong>Landing</strong> /contact?utm_…<br>
|
||||
<strong>First touch</strong> Today 8:02a · <strong>Converted</strong> 8:14a</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Linked contact · consent</h2></div>
|
||||
<div class="panel-b">
|
||||
<div class="consent-pills">
|
||||
<span class="badge badge-optin">Email on</span>
|
||||
<span class="badge badge-optin">SMS on</span>
|
||||
<span class="badge badge-optout">Postcard off</span>
|
||||
</div>
|
||||
<p style="font-size:13px;color:#6b7280;margin:12px 0 0">Form submit defaulted email+SMS opt-in with notice. Postcard requires address + separate consent.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lead inbox · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="active" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Lead inbox</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Lead lifecycle: new → contacted → won/lost. Source column shows UTM attribution when available.</div>
|
||||
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;align-items:center">
|
||||
<input style="padding:8px 12px;border:1px solid #e3e8ef;min-width:200px" placeholder="Search leads…">
|
||||
<select style="padding:8px 12px;border:1px solid #e3e8ef"><option>All statuses</option><option>New</option><option>Contacted</option><option>Won</option><option>Lost</option></select>
|
||||
<select style="padding:8px 12px;border:1px solid #e3e8ef"><option>All sources</option><option>facebook</option><option>google</option><option>postcard</option><option>direct</option></select>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Lead</th><th>Interest</th><th>UTM / source</th><th>Status</th><th>Received</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><a href="portal-lead-detail.html">Jordan Lee</a><br><span style="font-size:12px;color:#6b7280">jordan.lee@example.com</span></td><td>Buying</td><td>facebook / cpc / spring-open</td><td><span class="badge badge-new">New</span></td><td>Today 8:14a</td></tr>
|
||||
<tr><td><a href="portal-lead-detail.html">Sam Ortiz</a><br><span style="font-size:12px;color:#6b7280">sam.ortiz@example.com</span></td><td>Selling</td><td>google / organic / brand</td><td><span class="badge badge-contacted">Contacted</span></td><td>Yesterday</td></tr>
|
||||
<tr><td><a href="portal-lead-detail.html">Avery Chen</a><br><span style="font-size:12px;color:#6b7280">(555) 014-2291</span></td><td>Both</td><td>postcard / mail / march-mailer</td><td><span class="badge badge-new">New</span></td><td>Mon</td></tr>
|
||||
<tr><td><a href="portal-lead-detail.html">Riley Brooks</a><br><span style="font-size:12px;color:#6b7280">riley.b@example.com</span></td><td>Buying</td><td>instagram / social / reel-tour</td><td><span class="badge badge-won">Won</span></td><td>Last week</td></tr>
|
||||
<tr><td><a href="portal-lead-detail.html">Casey Ng</a><br><span style="font-size:12px;color:#6b7280">casey.ng@example.com</span></td><td>Selling</td><td>direct / (none)</td><td><span class="badge badge-lost">Lost</span></td><td>2 weeks ago</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Sign in · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="login-wrap">
|
||||
<div class="login-card">
|
||||
<div class="proposal-note" style="margin-bottom:20px"><strong>UX note:</strong> Private realtor login (Django auth). Not public.</div>
|
||||
<h1>MKD Portal</h1>
|
||||
<p class="sub">MKDRealtor.com · EXIT Realty Redefined</p>
|
||||
<p class="sub" style="margin-top:0;margin-bottom:16px;font-size:13px">Leads, campaigns, and social — one place.</p>
|
||||
<form class="form-grid" action="portal-dashboard.html" method="get">
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" value="monica@example.com">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input id="password" type="password" value="••••••••">
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Sign in</button>
|
||||
</form>
|
||||
<p style="margin-top:16px;font-size:13px;color:#6b7280"><a href="index.html">← Back to proposal gallery</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Postcard designer · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="active" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Postcard designer</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Pick print size (4×6 / 6×9 / 6×11 / square). Upload images once into a reusable media library, then apply to any design. Save as template → attach to postcard campaign.</div>
|
||||
|
||||
<div class="designer-layout">
|
||||
<div class="designer-controls">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Card size</h2><span class="muted" style="font-size:12px" id="size-label">4×6 in</span></div>
|
||||
<div class="panel-b">
|
||||
<div class="size-grid" id="size-grid">
|
||||
<button type="button" class="size-option active" data-size="4x6" data-label="4×6 in" data-ratio="6/4" onclick="setSize(this)">
|
||||
<div class="sz-name">4 × 6</div>
|
||||
<div class="sz-meta">Standard · lowest postage</div>
|
||||
<span class="sz-badge">Most common</span>
|
||||
</button>
|
||||
<button type="button" class="size-option" data-size="6x9" data-label="6×9 in" data-ratio="9/6" onclick="setSize(this)">
|
||||
<div class="sz-name">6 × 9</div>
|
||||
<div class="sz-meta">More room for photo + copy</div>
|
||||
</button>
|
||||
<button type="button" class="size-option" data-size="6x11" data-label="6×11 in" data-ratio="11/6" onclick="setSize(this)">
|
||||
<div class="sz-name">6 × 11</div>
|
||||
<div class="sz-meta">Jumbo · stands out in mail</div>
|
||||
</button>
|
||||
<button type="button" class="size-option" data-size="square" data-label="6×6 in square" data-ratio="1/1" onclick="setSize(this)">
|
||||
<div class="sz-name">6 × 6</div>
|
||||
<div class="sz-meta">Square · social-ready crop</div>
|
||||
</button>
|
||||
</div>
|
||||
<p class="library-hint">Size locked when campaign is queued. Provider pricing varies by size.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Media library</h2><span class="muted" style="font-size:12px">Reusable</span></div>
|
||||
<div class="panel-b">
|
||||
<input type="file" id="pc-upload" accept="image/*" multiple hidden onchange="handleUpload(event)">
|
||||
<div class="dropzone compact" id="pc-drop" onclick="document.getElementById('pc-upload').click()"
|
||||
ondragover="event.preventDefault();this.style.borderColor='#00626c'"
|
||||
ondragleave="this.style.borderColor=''"
|
||||
ondrop="event.preventDefault();this.style.borderColor=''; handleDrop(event)">
|
||||
Drop images here or <strong>click to upload</strong><br>
|
||||
<span class="muted">Saved to your library — reuse across postcards & campaigns</span>
|
||||
</div>
|
||||
<div class="media-library" id="media-library" style="margin-top:12px"></div>
|
||||
<p class="library-hint" id="library-count">0 images in library</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Side</h2></div>
|
||||
<div class="panel-b">
|
||||
<div class="channel-tabs" style="margin:0">
|
||||
<a href="#" class="active" id="tab-front" onclick="showSide('front');return false">Front</a>
|
||||
<a href="#" id="tab-back" onclick="showSide('back');return false">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" id="front-controls">
|
||||
<div class="panel-h"><h2>Front artwork</h2></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Headline</label>
|
||||
<input id="pc-headline" value="JUST LISTED" oninput="syncPostcard()">
|
||||
</div>
|
||||
<div class="field"><label>Subhead</label>
|
||||
<input id="pc-sub" value="412 Willow Lane · Open Sat 11–1" oninput="syncPostcard()">
|
||||
</div>
|
||||
<div class="field"><label>Accent color</label>
|
||||
<input id="pc-color" type="color" value="#00626c" oninput="syncPostcard()">
|
||||
</div>
|
||||
<div class="field"><label>Overlay</label>
|
||||
<select id="pc-overlay" onchange="syncPostcard()">
|
||||
<option value="dark">Dark gradient</option>
|
||||
<option value="light">Light band</option>
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" id="back-controls" style="display:none">
|
||||
<div class="panel-h"><h2>Back copy</h2></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Body text</label>
|
||||
<textarea id="pc-body" style="min-height:100px" oninput="syncPostcard()">Quiet street, updated kitchen, walkable to Oakridge schools. Asking $449,000.
|
||||
|
||||
Call or text Monica for a private showing.</textarea>
|
||||
</div>
|
||||
<div class="field"><label>Agent line</label>
|
||||
<input id="pc-agent" value="Monica Dhillon · (555) 123-4567 · mkdrealtor.com" oninput="syncPostcard()">
|
||||
</div>
|
||||
<div class="field"><label>Include</label>
|
||||
<label class="check-row"><input type="checkbox" id="pc-qr" checked onchange="syncPostcard()"> QR to listing / contact</label>
|
||||
<label class="check-row"><input type="checkbox" id="pc-addr" checked onchange="syncPostcard()"> Recipient address block ( Lob )</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-b" style="display:flex;gap:8px;flex-wrap:wrap">
|
||||
<button class="btn btn-primary" type="button" onclick="alert('Mockup: save front/back assets + size + library refs → MessageTemplate')">Save design</button>
|
||||
<a class="btn btn-ghost" href="portal-campaign.html">Use in campaign</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designer-preview-col">
|
||||
<div class="panel">
|
||||
<div class="panel-h">
|
||||
<h2>Live preview · <span id="preview-size">4×6</span></h2>
|
||||
<span class="muted" style="font-size:12px" id="side-label">Front</span>
|
||||
</div>
|
||||
<div class="panel-b" style="background:#e8edf3;display:flex;justify-content:center;padding:28px">
|
||||
<div class="postcard size-4x6" id="postcard-front">
|
||||
<div class="postcard-media" id="pc-media"></div>
|
||||
<div class="postcard-overlay" id="pc-ov"></div>
|
||||
<div class="postcard-copy">
|
||||
<div class="postcard-headline" id="pc-h-out">JUST LISTED</div>
|
||||
<div class="postcard-sub" id="pc-s-out">412 Willow Lane · Open Sat 11–1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="postcard postcard-back size-4x6" id="postcard-back" style="display:none">
|
||||
<div class="postcard-back-grid">
|
||||
<div class="postcard-back-msg">
|
||||
<div class="postcard-back-body" id="pc-b-out"></div>
|
||||
<div class="postcard-agent" id="pc-a-out"></div>
|
||||
<div class="postcard-qr" id="pc-qr-out">QR</div>
|
||||
</div>
|
||||
<div class="postcard-back-mail" id="pc-mail-out">
|
||||
<div class="stamp">Stamp</div>
|
||||
<div class="addr-block">
|
||||
{{first_name}} {{last_name}}<br>
|
||||
{{street}}<br>
|
||||
{{city}}, {{state}} {{zip}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="muted" style="font-size:13px;margin:0">Print provider receives front + back images at selected size. Address verified before batch send (Lob).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const LIBRARY_KEY = 'monica_postcard_library_v1';
|
||||
let selectedBg = 'images/grid-layout-1-370x256.jpg';
|
||||
let currentSize = '4x6';
|
||||
|
||||
const SEED_LIBRARY = [
|
||||
{ id: 'seed-1', name: 'Willow exterior', src: 'images/grid-layout-1-370x256.jpg', reused: 3 },
|
||||
{ id: 'seed-2', name: 'Kitchen', src: 'images/grid-layout-2-370x256.jpg', reused: 1 },
|
||||
{ id: 'seed-3', name: 'Living room', src: 'images/grid-layout-3-370x256.jpg', reused: 0 },
|
||||
{ id: 'seed-4', name: 'Neighborhood', src: 'images/bg-image-1.jpg', reused: 2 },
|
||||
];
|
||||
|
||||
function loadLibrary() {
|
||||
try {
|
||||
const raw = localStorage.getItem(LIBRARY_KEY);
|
||||
if (raw) return JSON.parse(raw);
|
||||
} catch (e) {}
|
||||
return SEED_LIBRARY.slice();
|
||||
}
|
||||
|
||||
function saveLibrary(items) {
|
||||
try { localStorage.setItem(LIBRARY_KEY, JSON.stringify(items)); } catch (e) {}
|
||||
}
|
||||
|
||||
let library = loadLibrary();
|
||||
|
||||
function renderLibrary() {
|
||||
const root = document.getElementById('media-library');
|
||||
root.innerHTML = '';
|
||||
const upload = document.createElement('button');
|
||||
upload.type = 'button';
|
||||
upload.className = 'media-tile upload-tile';
|
||||
upload.innerHTML = '<span>+</span>Upload';
|
||||
upload.onclick = () => document.getElementById('pc-upload').click();
|
||||
root.appendChild(upload);
|
||||
|
||||
library.forEach(item => {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'media-tile' + (item.src === selectedBg ? ' active' : '');
|
||||
btn.style.backgroundImage = 'url(' + JSON.stringify(item.src).slice(1, -1) + ')';
|
||||
btn.title = item.name + (item.reused ? ' · used ' + item.reused + '×' : '');
|
||||
btn.innerHTML = '<span class="media-label">' + escapeHtml(item.name) + '</span>';
|
||||
btn.onclick = () => selectMedia(item.id);
|
||||
root.appendChild(btn);
|
||||
});
|
||||
document.getElementById('library-count').textContent =
|
||||
library.length + ' image' + (library.length === 1 ? '' : 's') + ' in library · click to use on this card';
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
||||
}
|
||||
|
||||
function selectMedia(id) {
|
||||
const item = library.find(x => x.id === id);
|
||||
if (!item) return;
|
||||
selectedBg = item.src;
|
||||
item.reused = (item.reused || 0) + 1;
|
||||
saveLibrary(library);
|
||||
renderLibrary();
|
||||
syncPostcard();
|
||||
}
|
||||
|
||||
function addFiles(files) {
|
||||
Array.from(files || []).forEach(file => {
|
||||
if (!file.type.startsWith('image/')) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const item = {
|
||||
id: 'up-' + Date.now() + '-' + Math.random().toString(36).slice(2, 7),
|
||||
name: file.name.replace(/\.[^.]+$/, '') || 'Upload',
|
||||
src: reader.result,
|
||||
reused: 0,
|
||||
};
|
||||
library.unshift(item);
|
||||
saveLibrary(library);
|
||||
selectedBg = item.src;
|
||||
renderLibrary();
|
||||
syncPostcard();
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
function handleUpload(e) { addFiles(e.target.files); e.target.value = ''; }
|
||||
function handleDrop(e) { addFiles(e.dataTransfer.files); }
|
||||
|
||||
function setSize(btn) {
|
||||
currentSize = btn.dataset.size;
|
||||
document.querySelectorAll('.size-option').forEach(el => el.classList.toggle('active', el === btn));
|
||||
document.getElementById('size-label').textContent = btn.dataset.label;
|
||||
document.getElementById('preview-size').textContent = btn.dataset.label.replace(' in', '');
|
||||
['postcard-front', 'postcard-back'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
el.className = el.className.replace(/size-\S+/g, '').trim() + ' size-' + currentSize;
|
||||
if (id === 'postcard-back') el.classList.add('postcard-back');
|
||||
});
|
||||
}
|
||||
|
||||
function showSide(side) {
|
||||
const front = side === 'front';
|
||||
document.getElementById('postcard-front').style.display = front ? 'block' : 'none';
|
||||
document.getElementById('postcard-back').style.display = front ? 'none' : 'block';
|
||||
document.getElementById('front-controls').style.display = front ? 'block' : 'none';
|
||||
document.getElementById('back-controls').style.display = front ? 'none' : 'block';
|
||||
document.getElementById('tab-front').classList.toggle('active', front);
|
||||
document.getElementById('tab-back').classList.toggle('active', !front);
|
||||
document.getElementById('side-label').textContent = front ? 'Front' : 'Back';
|
||||
}
|
||||
|
||||
function syncPostcard() {
|
||||
const color = document.getElementById('pc-color').value;
|
||||
const ov = document.getElementById('pc-overlay').value;
|
||||
document.getElementById('pc-media').style.backgroundImage = 'url(' + JSON.stringify(selectedBg).slice(1, -1) + ')';
|
||||
document.getElementById('pc-h-out').textContent = document.getElementById('pc-headline').value;
|
||||
document.getElementById('pc-s-out').textContent = document.getElementById('pc-sub').value;
|
||||
const textColor = ov === 'light' ? '#111' : '#fff';
|
||||
document.getElementById('pc-h-out').style.color = textColor;
|
||||
document.getElementById('pc-s-out').style.color = textColor;
|
||||
document.getElementById('pc-h-out').style.borderColor = color;
|
||||
document.getElementById('pc-ov').className = 'postcard-overlay ov-' + ov;
|
||||
document.getElementById('pc-b-out').textContent = document.getElementById('pc-body').value;
|
||||
document.getElementById('pc-a-out').textContent = document.getElementById('pc-agent').value;
|
||||
document.getElementById('pc-qr-out').style.display = document.getElementById('pc-qr').checked ? 'flex' : 'none';
|
||||
document.getElementById('pc-mail-out').style.display = document.getElementById('pc-addr').checked ? 'block' : 'none';
|
||||
}
|
||||
|
||||
renderLibrary();
|
||||
syncPostcard();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Social accounts · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="" href="portal-social.html">Compose & preview</a>
|
||||
<a class="active" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Social accounts</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Add via OAuth (Meta / LinkedIn). Re-authorize when token expires or refresh fails — same connect button, no data loss.</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px">
|
||||
<p style="margin:0;font-size:14px;color:#6b7280">Connect native APIs (Meta + LinkedIn). Tokens encrypted. Re-auth when expired or scopes change.</p>
|
||||
<button class="btn btn-primary" type="button" onclick="document.getElementById('add-panel').style.display='block'">Add account</button>
|
||||
</div>
|
||||
|
||||
<div class="panel" id="add-panel" style="display:none;border-color:#93c5fd">
|
||||
<div class="panel-h"><h2>Add a social account</h2><button class="btn btn-sm btn-ghost" type="button" onclick="document.getElementById('add-panel').style.display='none'">Close</button></div>
|
||||
<div class="panel-b">
|
||||
<div class="connect-grid">
|
||||
<button class="connect-card" type="button" onclick="alert('Mockup: redirect to Meta OAuth → grant Pages + Instagram Business')">
|
||||
<div class="platform-icon meta">f</div>
|
||||
<div>
|
||||
<strong>Facebook Page</strong>
|
||||
<p>Meta Graph OAuth. Pick a Page you manage.</p>
|
||||
</div>
|
||||
</button>
|
||||
<button class="connect-card" type="button" onclick="alert('Mockup: same Meta OAuth → select IG Business linked to a Page')">
|
||||
<div class="platform-icon ig">ig</div>
|
||||
<div>
|
||||
<strong>Instagram Business</strong>
|
||||
<p>Requires IG Business/Creator linked to a Facebook Page.</p>
|
||||
</div>
|
||||
</button>
|
||||
<button class="connect-card" type="button" onclick="alert('Mockup: redirect to LinkedIn OAuth → org or member posting')">
|
||||
<div class="platform-icon li">in</div>
|
||||
<div>
|
||||
<strong>LinkedIn</strong>
|
||||
<p>Organization or member posting. App review may take 2–4 weeks.</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<p class="hint-block">Flow: click Connect → provider consent screen → callback stores encrypted token + SocialAccount row → status = Connected.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Connected accounts</h2></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Platform</th><th>Account</th><th>Status</th><th>Token</th><th>Actions</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="platform-pill meta">Facebook</span></td>
|
||||
<td>Monica Dhillon · MKDRealtor.com<br><span class="muted">Page ID · 1029384756</span></td>
|
||||
<td><span class="badge badge-won">Connected</span></td>
|
||||
<td><span class="muted">Expires Oct 2026</span></td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-ghost" type="button">Test post</button>
|
||||
<button class="btn btn-sm btn-ghost" type="button" onclick="alert('Mockup: disconnect + revoke token')">Disconnect</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="platform-pill ig">Instagram</span></td>
|
||||
<td>@monicadhillonhomes<br><span class="muted">Linked to FB Page above</span></td>
|
||||
<td><span class="badge badge-won">Connected</span></td>
|
||||
<td><span class="muted">Expires Oct 2026</span></td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-ghost" type="button">Test post</button>
|
||||
<button class="btn btn-sm btn-ghost" type="button">Disconnect</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="row-warn">
|
||||
<td><span class="platform-pill li">LinkedIn</span></td>
|
||||
<td>Monica Dhillon<br><span class="muted">Member + Company page</span></td>
|
||||
<td><span class="badge badge-contacted">Needs re-auth</span></td>
|
||||
<td><span class="text-warn">Expired Jul 12 · refresh failed</span></td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-primary" type="button" onclick="alert('Mockup: LinkedIn OAuth re-consent → refresh_token()')">Re-authorize</button>
|
||||
<button class="btn btn-sm btn-ghost" type="button">Disconnect</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>When to re-auth</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<ul class="plain-list">
|
||||
<li>Token expired / refresh failed (banner on compose + Accounts)</li>
|
||||
<li>Provider asks for new scopes (e.g. Meta Graph version bump)</li>
|
||||
<li>You switched Page / IG account</li>
|
||||
<li>Password change or security review on the social side</li>
|
||||
</ul>
|
||||
<p class="muted" style="margin:0">Re-auth = same OAuth connect flow; we replace the encrypted token and clear the “needs re-auth” flag. Scheduled posts stay queued until token works again.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Health checks</h2></div>
|
||||
<div class="panel-b" style="font-size:14px">
|
||||
<p><strong>Last refresh job</strong> — today 6:00a · 2 OK · 1 failed (LinkedIn)</p>
|
||||
<p><strong>Failed publish (7d)</strong> — 1 IG (media format) · 2 LI (auth)</p>
|
||||
<p style="margin:0"><a href="portal-social.html">Open composer</a> — platforms that need re-auth are disabled until fixed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Compose & preview · Portal · MKDRealtor.com</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700%7CPoppins:400,600,700">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body class="portal">
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="portal-shell">
|
||||
<aside class="portal-sidebar">
|
||||
<a class="portal-brand" href="portal-dashboard.html"><img src="brand/exit_logo.png" alt="EXIT Realty"><span>MKDRealtor.com</span></a>
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">Overview</div>
|
||||
<a class="" href="portal-dashboard.html">Dashboard</a>
|
||||
<a class="" href="portal-leads.html">Leads</a>
|
||||
<a class="" href="portal-analytics.html">Analytics</a>
|
||||
<div class="nav-section">Outreach</div>
|
||||
<a class="" href="portal-contacts.html">Mailing list</a>
|
||||
<a class="" href="portal-campaign.html">Campaigns</a>
|
||||
<a class="" href="portal-postcard-designer.html">Postcard design</a>
|
||||
<div class="nav-section">Social</div>
|
||||
<a class="active" href="portal-social.html">Compose & preview</a>
|
||||
<a class="" href="portal-social-accounts.html">Accounts</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="portal-main">
|
||||
<div class="portal-topbar">
|
||||
<h1>Compose & preview</h1>
|
||||
<div class="portal-user">Signed in as <strong>Monica Dhillon</strong> · <a href="portal-login.html" style="color:#00626c">Sign out</a></div>
|
||||
</div>
|
||||
<div class="portal-content">
|
||||
<div class="proposal-note"><strong>UX note:</strong> AI chat helps draft captions (tone, length, hashtags). Insert or replace into the composer — live FB / IG / LinkedIn previews update instantly.</div>
|
||||
|
||||
<div class="auth-alert" id="li-warn">
|
||||
<strong>LinkedIn needs re-auth.</strong> Token expired —
|
||||
<a href="portal-social-accounts.html">Re-authorize in Accounts</a> before scheduling to LinkedIn.
|
||||
</div>
|
||||
|
||||
<div class="designer-layout with-ai">
|
||||
<div class="designer-controls">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Compose</h2><a class="btn btn-sm btn-ghost" href="portal-social-accounts.html">Manage accounts</a></div>
|
||||
<div class="panel-b form-grid">
|
||||
<div class="field"><label>Caption</label>
|
||||
<textarea id="soc-caption" style="min-height:130px" oninput="syncSocial()">Open house this Saturday 11–1 at 412 Willow Lane. Quiet street, updated kitchen, walkable to Oakridge. DM or text me for details.
|
||||
|
||||
#JustListed #OpenHouse</textarea>
|
||||
<div class="hint"><span id="char-count">0</span> characters · IG soft limit ~2,200</div>
|
||||
</div>
|
||||
<div class="field"><label>Media</label>
|
||||
<select id="soc-media" onchange="syncSocial()">
|
||||
<option value="images/grid-layout-1-370x256.jpg">Willow Lane exterior</option>
|
||||
<option value="images/grid-layout-2-370x256.jpg">Kitchen</option>
|
||||
<option value="images/grid-layout-3-370x256.jpg">Living room</option>
|
||||
<option value="">Text only (FB / LI)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field"><label>Platforms</label>
|
||||
<div class="platform-toggles">
|
||||
<label class="toggle-pill"><input type="checkbox" id="plat-fb" checked onchange="syncSocial()"> Facebook</label>
|
||||
<label class="toggle-pill"><input type="checkbox" id="plat-ig" checked onchange="syncSocial()"> Instagram</label>
|
||||
<label class="toggle-pill warn"><input type="checkbox" id="plat-li" onchange="syncSocial()"> LinkedIn <span class="muted">(re-auth)</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid cols-2">
|
||||
<div class="field"><label>Publish</label>
|
||||
<select id="soc-when-mode"><option>Schedule</option><option>Publish now</option></select>
|
||||
</div>
|
||||
<div class="field"><label>When</label><input type="datetime-local" value="2026-07-16T09:00"></div>
|
||||
</div>
|
||||
<div class="field"><label>Preview as</label>
|
||||
<div class="channel-tabs" style="margin:0">
|
||||
<a href="#" class="active" id="prev-fb" onclick="setPreview('fb');return false">Facebook</a>
|
||||
<a href="#" id="prev-ig" onclick="setPreview('ig');return false">Instagram</a>
|
||||
<a href="#" id="prev-li" onclick="setPreview('li');return false">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="button" onclick="alert('Mockup: SocialPost + SocialPostTargets enqueued')">Schedule to selected platforms</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ai-assist-col">
|
||||
<div class="ai-chat">
|
||||
<div class="ai-chat-h">
|
||||
<h2>AI post assistant</h2>
|
||||
<span class="ai-pill">Beta mockup</span>
|
||||
</div>
|
||||
<div class="ai-chat-messages" id="ai-messages">
|
||||
<div class="ai-msg bot">
|
||||
<div class="who">Assistant</div>
|
||||
<div class="bubble">
|
||||
I can draft or refine captions for Facebook, Instagram, and LinkedIn.
|
||||
Tell me the listing, tone (warm / bold / luxury), and any must-include details —
|
||||
or tap a quick prompt below.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-chat-prompts">
|
||||
<button type="button" class="chip" onclick="sendPrompt('Write an open-house post for 412 Willow Lane')">Open house draft</button>
|
||||
<button type="button" class="chip" onclick="sendPrompt('Make my caption shorter for Instagram')">Shorter for IG</button>
|
||||
<button type="button" class="chip" onclick="sendPrompt('Rewrite in a warmer, neighborly tone')">Warmer tone</button>
|
||||
<button type="button" class="chip" onclick="sendPrompt('Add 4 relevant hashtags')">Add hashtags</button>
|
||||
<button type="button" class="chip" onclick="sendPrompt('Make a LinkedIn-friendly professional version')">LinkedIn version</button>
|
||||
</div>
|
||||
<div class="ai-chat-input">
|
||||
<textarea id="ai-input" placeholder="Ask for a draft, rewrite, or hashtags…" rows="2"
|
||||
onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendChat();}"></textarea>
|
||||
<button class="btn btn-primary" type="button" onclick="sendChat()">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="designer-preview-col">
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Live post preview</h2><span class="muted" style="font-size:12px" id="prev-label">Facebook</span></div>
|
||||
<div class="panel-b" style="background:#e8edf3;display:flex;justify-content:center;padding:24px">
|
||||
<div class="social-phone" id="preview-fb">
|
||||
<div class="soc-header">
|
||||
<div class="soc-avatar">MR</div>
|
||||
<div>
|
||||
<div class="soc-name">Monica Dhillon · MKDRealtor.com</div>
|
||||
<div class="soc-meta">Sponsored · Just now · 🌐</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="soc-caption" id="fb-caption"></div>
|
||||
<div class="soc-image" id="fb-image"></div>
|
||||
<div class="soc-actions">Like · Comment · Share</div>
|
||||
</div>
|
||||
<div class="social-phone ig" id="preview-ig" style="display:none">
|
||||
<div class="soc-header">
|
||||
<div class="soc-avatar round">MR</div>
|
||||
<div>
|
||||
<div class="soc-name">monicadhillonhomes</div>
|
||||
<div class="soc-meta">Metro Area</div>
|
||||
</div>
|
||||
<div class="soc-more">•••</div>
|
||||
</div>
|
||||
<div class="soc-image square" id="ig-image"></div>
|
||||
<div class="soc-actions ig-act">♥ 💬 ✉</div>
|
||||
<div class="soc-caption"><strong>monicadhillonhomes</strong> <span id="ig-caption"></span></div>
|
||||
</div>
|
||||
<div class="social-phone li" id="preview-li" style="display:none">
|
||||
<div class="soc-header">
|
||||
<div class="soc-avatar sq">MR</div>
|
||||
<div>
|
||||
<div class="soc-name">Monica Dhillon</div>
|
||||
<div class="soc-meta">Realtor · 1st · Just now</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="soc-caption" id="li-caption"></div>
|
||||
<div class="soc-image" id="li-image"></div>
|
||||
<div class="soc-actions">Like · Comment · Repost · Send</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-h"><h2>Scheduled</h2></div>
|
||||
<div class="panel-b" style="padding:0">
|
||||
<table class="table">
|
||||
<thead><tr><th>Post</th><th>Platforms</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Open house Willow Lane</td><td>FB · IG</td><td><span class="badge badge-scheduled">Scheduled</span></td></tr>
|
||||
<tr><td>Just sold — Birch Ave</td><td>FB · IG · LI</td><td><span class="badge badge-delivered">Published</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let previewPlat = 'fb';
|
||||
let lastDraft = '';
|
||||
|
||||
function setPreview(p) {
|
||||
previewPlat = p;
|
||||
['fb','ig','li'].forEach(x => {
|
||||
document.getElementById('preview-' + x).style.display = x === p ? 'block' : 'none';
|
||||
document.getElementById('prev-' + x).classList.toggle('active', x === p);
|
||||
});
|
||||
document.getElementById('prev-label').textContent = ({fb:'Facebook',ig:'Instagram',li:'LinkedIn'})[p];
|
||||
}
|
||||
|
||||
function syncSocial() {
|
||||
const cap = document.getElementById('soc-caption').value;
|
||||
const media = document.getElementById('soc-media').value;
|
||||
document.getElementById('char-count').textContent = cap.length;
|
||||
document.getElementById('fb-caption').textContent = cap;
|
||||
document.getElementById('ig-caption').textContent = cap;
|
||||
document.getElementById('li-caption').textContent = cap;
|
||||
['fb','ig','li'].forEach(x => {
|
||||
const el = document.getElementById(x + '-image');
|
||||
if (!media) { el.style.display = 'none'; }
|
||||
else { el.style.display = 'block'; el.style.backgroundImage = 'url(' + media + ')'; }
|
||||
});
|
||||
document.getElementById('li-warn').style.display = document.getElementById('plat-li').checked ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
||||
}
|
||||
|
||||
function appendMsg(role, html) {
|
||||
const root = document.getElementById('ai-messages');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'ai-msg ' + role;
|
||||
div.innerHTML =
|
||||
'<div class="who">' + (role === 'user' ? 'You' : 'Assistant') + '</div>' +
|
||||
'<div class="bubble">' + html + '</div>';
|
||||
root.appendChild(div);
|
||||
root.scrollTop = root.scrollHeight;
|
||||
}
|
||||
|
||||
function draftActions(draft) {
|
||||
lastDraft = draft;
|
||||
const id = 'draft-' + Date.now();
|
||||
return (
|
||||
'<div class="ai-draft" id="' + id + '">' + escapeHtml(draft) + '</div>' +
|
||||
'<div class="ai-msg-actions">' +
|
||||
'<button type="button" class="btn btn-sm btn-primary" onclick="insertDraft(false)">Replace caption</button>' +
|
||||
'<button type="button" class="btn btn-sm btn-ghost" onclick="insertDraft(true)">Append</button>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
function insertDraft(append) {
|
||||
const ta = document.getElementById('soc-caption');
|
||||
if (append && ta.value.trim()) ta.value = ta.value.replace(/\s*$/, '') + '\n\n' + lastDraft;
|
||||
else ta.value = lastDraft;
|
||||
syncSocial();
|
||||
}
|
||||
|
||||
function inventReply(prompt, current) {
|
||||
const p = prompt.toLowerCase();
|
||||
if (p.includes('shorter') || p.includes('instagram')) {
|
||||
return 'Open house Sat 11–1 · 412 Willow Lane\nUpdated kitchen, quiet street, walk to Oakridge.\nDM for details 🏡\n\n#JustListed #OpenHouse #WillowLane';
|
||||
}
|
||||
if (p.includes('warm') || p.includes('neighbor')) {
|
||||
return 'I\'d love to show you around this Saturday.\n\n412 Willow Lane is open 11–1 — quiet street, bright kitchen, and an easy walk to Oakridge schools. Come say hi, no pressure.\n\nText me anytime if you want a private look first.';
|
||||
}
|
||||
if (p.includes('hashtag')) {
|
||||
const base = current.trim() || 'Just listed — 412 Willow Lane. Open house Saturday 11–1.';
|
||||
return base.replace(/\s*#\S+/g, '').trim() + '\n\n#JustListed #OpenHouse #RealEstate #HomeTour';
|
||||
}
|
||||
if (p.includes('linkedin') || p.includes('professional')) {
|
||||
return 'Hosting an open house this Saturday, 11–1, at 412 Willow Lane.\n\nUpdated kitchen, walkable to Oakridge schools, asking $449,000. Happy to arrange a private showing for clients who can\'t make the window.\n\n#RealEstate #OpenHouse';
|
||||
}
|
||||
if (p.includes('open house') || p.includes('willow') || p.includes('draft')) {
|
||||
return 'Open house this Saturday 11–1 at 412 Willow Lane.\n\nQuiet street · updated kitchen · walkable to Oakridge.\nDM or text me for details — hope to see you there!\n\n#JustListed #OpenHouse';
|
||||
}
|
||||
if (p.includes('rewrite') || p.includes('improve') || current.trim()) {
|
||||
return 'Just listed: 412 Willow Lane.\n\nOpen Saturday 11–1. Updated kitchen, quiet street, walkable to Oakridge schools. Asking $449,000.\n\nMessage me for a private showing.\n\n#JustListed #OpenHouse';
|
||||
}
|
||||
return 'Tell me the address, price band, and vibe (warm / bold / luxury) and I\'ll draft a caption you can drop straight into the composer.';
|
||||
}
|
||||
|
||||
function respond(prompt) {
|
||||
const current = document.getElementById('soc-caption').value;
|
||||
const draft = inventReply(prompt, current);
|
||||
const needsDraft = !/tell me the address/i.test(draft);
|
||||
const body = needsDraft
|
||||
? 'Here\'s a draft you can use:' + draftActions(draft)
|
||||
: escapeHtml(draft);
|
||||
appendMsg('bot', body);
|
||||
}
|
||||
|
||||
function sendPrompt(text) {
|
||||
document.getElementById('ai-input').value = text;
|
||||
sendChat();
|
||||
}
|
||||
|
||||
function sendChat() {
|
||||
const input = document.getElementById('ai-input');
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
appendMsg('user', escapeHtml(text));
|
||||
input.value = '';
|
||||
setTimeout(() => respond(text), 350);
|
||||
}
|
||||
|
||||
syncSocial();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,643 @@
|
||||
/* MKDRealtor.com — proposal mockup extras (Exit Realty Wheaton palette) */
|
||||
|
||||
:root {
|
||||
--monica-primary: #00626c;
|
||||
--monica-primary-light: #008898;
|
||||
--monica-ink: #212121;
|
||||
--monica-muted: #6b7280;
|
||||
--monica-surface: #f4f7f7;
|
||||
--monica-border: #d9e3e4;
|
||||
--monica-ok: #1a7f4b;
|
||||
--monica-warn: #b45309;
|
||||
--monica-danger: #b91c1c;
|
||||
--portal-sidebar: 240px;
|
||||
--exit-dark: #080808;
|
||||
--exit-teal: #00626c;
|
||||
--exit-teal-bright: #008898;
|
||||
}
|
||||
|
||||
/* Proposal chrome */
|
||||
.proposal-banner {
|
||||
background: #111827;
|
||||
color: #e5e7eb;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-size: 13px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
.proposal-banner a { color: #7dd3da; text-decoration: none; }
|
||||
.proposal-banner a:hover { text-decoration: underline; }
|
||||
.proposal-banner .tag {
|
||||
display: inline-block;
|
||||
background: #00626c;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.proposal-note {
|
||||
border-left: 3px solid var(--monica-primary);
|
||||
background: #e8f4f5;
|
||||
padding: 12px 16px;
|
||||
margin: 0 0 24px;
|
||||
font-size: 14px;
|
||||
color: #0d4a52;
|
||||
}
|
||||
|
||||
/* Hub */
|
||||
.hub-page { background: var(--monica-surface); min-height: 100vh; font-family: "Work Sans", sans-serif; }
|
||||
.hub-hero {
|
||||
background: linear-gradient(135deg, #080808 0%, #00626c 55%, #008898 100%);
|
||||
color: #fff;
|
||||
padding: 64px 24px 56px;
|
||||
}
|
||||
.hub-hero h1 { font-family: Poppins, sans-serif; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 12px; }
|
||||
.hub-hero p { max-width: 560px; opacity: 0.9; margin: 0; }
|
||||
.hub-grid { max-width: 1100px; margin: -32px auto 48px; padding: 0 24px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
|
||||
.hub-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--monica-border);
|
||||
padding: 20px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
.hub-card:hover { border-color: var(--monica-primary); transform: translateY(-2px); color: inherit; text-decoration: none; }
|
||||
.hub-card .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--monica-primary); font-weight: 600; margin-bottom: 6px; }
|
||||
.hub-card h3 { margin: 0 0 8px; font-size: 18px; font-family: Poppins, sans-serif; }
|
||||
.hub-card p { margin: 0; font-size: 14px; color: var(--monica-muted); }
|
||||
|
||||
/* Public brand text logo */
|
||||
.brand-text {
|
||||
font-family: Poppins, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--monica-ink);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.brand-text span { color: var(--monica-primary); }
|
||||
.brand-text:hover { text-decoration: none; color: var(--monica-ink); }
|
||||
.brand-logo { height: 44px; width: auto; display: block; }
|
||||
.brand-logo.sm { height: 32px; }
|
||||
.footer-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
|
||||
.footer-brand-row img { height: 40px; width: auto; }
|
||||
|
||||
/* Portal shell */
|
||||
body.portal {
|
||||
margin: 0;
|
||||
background: var(--monica-surface);
|
||||
font-family: "Work Sans", sans-serif;
|
||||
color: var(--monica-ink);
|
||||
}
|
||||
.portal-shell { display: flex; min-height: calc(100vh - 36px); }
|
||||
.portal-sidebar {
|
||||
width: var(--portal-sidebar);
|
||||
background: #080808;
|
||||
color: #cbd5e1;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.portal-brand {
|
||||
padding: 16px 18px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
font-family: Poppins, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.portal-brand img {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
.portal-brand span { color: #7dd3da; font-size: 12px; letter-spacing: 0.04em; }
|
||||
.portal-nav { padding: 12px 0; flex: 1; }
|
||||
.portal-nav a {
|
||||
display: block;
|
||||
padding: 10px 18px;
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.portal-nav a:hover { color: #fff; background: rgba(255,255,255,0.04); }
|
||||
.portal-nav a.active { color: #fff; background: rgba(0,98,108,0.28); border-left-color: #00a0ab; }
|
||||
.portal-nav .nav-section {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #64748b;
|
||||
padding: 16px 18px 6px;
|
||||
}
|
||||
.portal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.portal-topbar {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--monica-border);
|
||||
padding: 14px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.portal-topbar h1 { margin: 0; font-size: 20px; font-family: Poppins, sans-serif; font-weight: 600; }
|
||||
.portal-content { padding: 24px; flex: 1; }
|
||||
.portal-user { font-size: 13px; color: var(--monica-muted); }
|
||||
.portal-user strong { color: var(--monica-ink); }
|
||||
|
||||
/* Portal widgets */
|
||||
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--monica-border);
|
||||
padding: 18px;
|
||||
}
|
||||
.stat-card .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--monica-muted); }
|
||||
.stat-card .value { font-size: 28px; font-weight: 700; font-family: Poppins, sans-serif; margin-top: 4px; }
|
||||
.stat-card .delta { font-size: 12px; margin-top: 4px; color: var(--monica-ok); }
|
||||
|
||||
.panel {
|
||||
background: #fff;
|
||||
border: 1px solid var(--monica-border);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.panel-h {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--monica-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.panel-h h2 { margin: 0; font-size: 15px; font-family: Poppins, sans-serif; font-weight: 600; }
|
||||
.panel-b { padding: 18px; }
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 9px 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
}
|
||||
.btn-primary { background: var(--monica-primary); color: #fff; }
|
||||
.btn-primary:hover { background: #004e56; color: #fff; text-decoration: none; }
|
||||
.btn-ghost { background: transparent; border: 1px solid var(--monica-border); color: var(--monica-ink); }
|
||||
.btn-sm { padding: 6px 12px; font-size: 12px; }
|
||||
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.table th {
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--monica-muted);
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--monica-border);
|
||||
font-weight: 600;
|
||||
}
|
||||
.table td { padding: 12px; border-bottom: 1px solid var(--monica-border); vertical-align: middle; }
|
||||
.table tr:hover td { background: #f8fafc; }
|
||||
.table a { color: var(--monica-primary); text-decoration: none; font-weight: 500; }
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.badge-new { background: #d0eef0; color: #00626c; }
|
||||
.badge-contacted { background: #fef3c7; color: #92400e; }
|
||||
.badge-won { background: #d1fae5; color: #065f46; }
|
||||
.badge-lost { background: #fee2e2; color: #991b1b; }
|
||||
.badge-sent { background: #d0eef0; color: #00626c; }
|
||||
.badge-scheduled { background: #ede9fe; color: #5b21b6; }
|
||||
.badge-delivered { background: #d1fae5; color: #065f46; }
|
||||
.badge-failed { background: #fee2e2; color: #991b1b; }
|
||||
.badge-optin { background: #d1fae5; color: #065f46; }
|
||||
.badge-optout { background: #f3f4f6; color: #4b5563; }
|
||||
|
||||
.form-grid { display: grid; gap: 16px; }
|
||||
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
|
||||
@media (max-width: 700px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }
|
||||
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #374151; }
|
||||
.field input, .field select, .field textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--monica-border);
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.field textarea { min-height: 100px; resize: vertical; }
|
||||
.field .hint { font-size: 12px; color: var(--monica-muted); margin-top: 4px; }
|
||||
|
||||
.channel-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--monica-border); margin-bottom: 18px; }
|
||||
.channel-tabs a {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--monica-muted);
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.channel-tabs a.active { color: var(--monica-primary); border-bottom-color: var(--monica-primary); }
|
||||
|
||||
.chart-placeholder {
|
||||
height: 220px;
|
||||
background: linear-gradient(180deg, #e8f4f5 0%, #fff 100%);
|
||||
border: 1px dashed #a8d8dc;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
padding: 24px 16px 16px;
|
||||
}
|
||||
.chart-placeholder .bar {
|
||||
flex: 1;
|
||||
background: var(--monica-primary);
|
||||
opacity: 0.75;
|
||||
border-radius: 2px 2px 0 0;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.consent-pills { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.preview-pane {
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--monica-border);
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
min-height: 160px;
|
||||
}
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.calendar-grid .dow { text-align: center; color: var(--monica-muted); font-weight: 600; padding: 6px; }
|
||||
.calendar-grid .day {
|
||||
aspect-ratio: 1;
|
||||
border: 1px solid var(--monica-border);
|
||||
background: #fff;
|
||||
padding: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.calendar-grid .day.has-post { background: #e8f4f5; }
|
||||
.calendar-grid .day .dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--monica-primary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.login-wrap {
|
||||
min-height: calc(100vh - 36px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(160deg, #080808, #00626c 60%, #e8f4f5 60%);
|
||||
padding: 24px;
|
||||
}
|
||||
.login-card {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 36px 32px;
|
||||
border: 1px solid var(--monica-border);
|
||||
}
|
||||
.login-card h1 { font-family: Poppins, sans-serif; font-size: 22px; margin: 0 0 6px; }
|
||||
.login-card .sub { color: var(--monica-muted); font-size: 14px; margin-bottom: 24px; }
|
||||
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
@media (max-width: 900px) {
|
||||
.portal-shell { flex-direction: column; }
|
||||
.portal-sidebar { width: 100%; }
|
||||
.portal-nav { display: flex; flex-wrap: wrap; padding: 8px; }
|
||||
.portal-nav .nav-section { display: none; }
|
||||
.portal-nav a { border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; }
|
||||
.portal-nav a.active { border-bottom-color: #00a0ab; }
|
||||
.split { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Public brand — EXIT Realty logo from exitrealtywheaton.com */
|
||||
.page .rd-navbar-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.page .rd-navbar-brand img {
|
||||
display: block !important;
|
||||
height: 44px;
|
||||
width: auto;
|
||||
max-width: 160px;
|
||||
}
|
||||
.page .rd-navbar-brand::before,
|
||||
.page .rd-navbar-brand::after { content: none !important; display: none !important; }
|
||||
.page .rd-navbar-brand .brand-site {
|
||||
font-family: Poppins, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.04em;
|
||||
color: #00626c;
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.page .rd-navbar-brand .brand-site span {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Shared extras */
|
||||
.muted { color: var(--monica-muted); font-size: 12px; }
|
||||
.text-warn { color: var(--monica-warn); font-size: 12px; }
|
||||
.hint-block { font-size: 13px; color: var(--monica-muted); margin: 12px 0 0; }
|
||||
.plain-list { margin: 0 0 12px; padding-left: 18px; }
|
||||
.plain-list li { margin-bottom: 6px; }
|
||||
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
|
||||
.row-warn td { background: #fffbeb; }
|
||||
.auth-alert {
|
||||
background: #fff7ed;
|
||||
border: 1px solid #fdba74;
|
||||
color: #9a3412;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.auth-alert a { color: #9a3412; font-weight: 600; }
|
||||
|
||||
/* Social accounts */
|
||||
.connect-grid { display: grid; gap: 12px; }
|
||||
.connect-card {
|
||||
display: flex; gap: 14px; align-items: flex-start; text-align: left;
|
||||
padding: 14px; border: 1px solid var(--monica-border); background: #fff;
|
||||
cursor: pointer; font: inherit; width: 100%;
|
||||
}
|
||||
.connect-card:hover { border-color: var(--monica-primary); }
|
||||
.connect-card p { margin: 4px 0 0; font-size: 13px; color: var(--monica-muted); }
|
||||
.platform-icon {
|
||||
width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center;
|
||||
justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; font-size: 14px;
|
||||
}
|
||||
.platform-icon.meta { background: #1877f2; }
|
||||
.platform-icon.ig { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); font-size: 12px; }
|
||||
.platform-icon.li { background: #0a66c2; }
|
||||
.platform-pill {
|
||||
display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
|
||||
color: #fff; border-radius: 2px;
|
||||
}
|
||||
.platform-pill.meta { background: #1877f2; }
|
||||
.platform-pill.ig { background: #dd2a7b; }
|
||||
.platform-pill.li { background: #0a66c2; }
|
||||
|
||||
/* Import wizard */
|
||||
.steps {
|
||||
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
|
||||
}
|
||||
.step {
|
||||
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--monica-muted);
|
||||
padding: 8px 12px; background: #fff; border: 1px solid var(--monica-border);
|
||||
}
|
||||
.step span {
|
||||
width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #374151;
|
||||
display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
|
||||
}
|
||||
.step.active { border-color: var(--monica-primary); color: var(--monica-ink); }
|
||||
.step.active span { background: var(--monica-primary); color: #fff; }
|
||||
.dropzone {
|
||||
border: 2px dashed var(--monica-border); padding: 32px; text-align: center; background: #f8fafc;
|
||||
}
|
||||
|
||||
/* Designer shared layout */
|
||||
.designer-layout {
|
||||
display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; align-items: start;
|
||||
}
|
||||
.designer-layout.with-ai {
|
||||
grid-template-columns: minmax(260px, 340px) minmax(240px, 320px) 1fr;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.designer-layout.with-ai { grid-template-columns: 1fr 1fr; }
|
||||
.designer-layout.with-ai .designer-preview-col { grid-column: 1 / -1; }
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.designer-layout,
|
||||
.designer-layout.with-ai { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Size picker */
|
||||
.size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.size-option {
|
||||
border: 1px solid var(--monica-border); background: #fff; padding: 10px 12px;
|
||||
text-align: left; cursor: pointer; font: inherit; color: inherit;
|
||||
}
|
||||
.size-option:hover { border-color: var(--monica-primary); }
|
||||
.size-option.active {
|
||||
border-color: var(--monica-primary); background: #e8f4f5;
|
||||
box-shadow: inset 3px 0 0 var(--monica-primary);
|
||||
}
|
||||
.size-option .sz-name { font-weight: 700; font-size: 13px; font-family: Poppins, sans-serif; }
|
||||
.size-option .sz-meta { font-size: 11px; color: var(--monica-muted); margin-top: 2px; }
|
||||
.size-option .sz-badge {
|
||||
display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.04em; color: var(--monica-primary);
|
||||
}
|
||||
|
||||
/* Media library */
|
||||
.media-library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.media-tile {
|
||||
position: relative; aspect-ratio: 4 / 3; border: 2px solid transparent;
|
||||
background-size: cover; background-position: center; background-color: #e5e7eb;
|
||||
cursor: pointer; padding: 0; overflow: hidden;
|
||||
}
|
||||
.media-tile.active { border-color: var(--monica-primary); }
|
||||
.media-tile .media-label {
|
||||
position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px;
|
||||
background: rgba(15, 23, 42, 0.72); color: #fff; font-size: 10px;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.media-tile.upload-tile {
|
||||
border: 2px dashed var(--monica-border); background: #f8fafc;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 4px; color: var(--monica-muted); font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.media-tile.upload-tile:hover { border-color: var(--monica-primary); color: var(--monica-primary); }
|
||||
.media-tile.upload-tile span { font-size: 22px; line-height: 1; color: var(--monica-primary); }
|
||||
.dropzone.compact { padding: 16px; font-size: 13px; cursor: pointer; }
|
||||
.dropzone.compact:hover { border-color: var(--monica-primary); }
|
||||
.library-hint { font-size: 12px; color: var(--monica-muted); margin: 8px 0 0; }
|
||||
|
||||
/* AI chat assist */
|
||||
.ai-chat {
|
||||
display: flex; flex-direction: column; height: min(640px, 75vh);
|
||||
background: #fff; border: 1px solid var(--monica-border);
|
||||
}
|
||||
.ai-chat-h {
|
||||
padding: 12px 14px; border-bottom: 1px solid var(--monica-border);
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
||||
}
|
||||
.ai-chat-h h2 { margin: 0; font-size: 15px; font-family: Poppins, sans-serif; font-weight: 600; }
|
||||
.ai-pill {
|
||||
font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
|
||||
background: #e8f4f5; color: var(--monica-primary); padding: 3px 8px;
|
||||
}
|
||||
.ai-chat-messages {
|
||||
flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #fff 40%);
|
||||
}
|
||||
.ai-msg { max-width: 92%; font-size: 13px; line-height: 1.45; }
|
||||
.ai-msg.bot { align-self: flex-start; }
|
||||
.ai-msg.user { align-self: flex-end; }
|
||||
.ai-msg .bubble {
|
||||
padding: 10px 12px; border: 1px solid var(--monica-border); background: #fff;
|
||||
}
|
||||
.ai-msg.user .bubble {
|
||||
background: var(--monica-primary); color: #fff; border-color: var(--monica-primary);
|
||||
}
|
||||
.ai-msg .who {
|
||||
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
|
||||
color: var(--monica-muted); margin-bottom: 4px;
|
||||
}
|
||||
.ai-msg.user .who { text-align: right; color: var(--monica-primary); }
|
||||
.ai-draft {
|
||||
margin-top: 8px; padding: 10px; background: #f8fafc; border: 1px dashed #a8d8dc;
|
||||
white-space: pre-wrap; font-size: 12px; color: var(--monica-ink);
|
||||
}
|
||||
.ai-msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
||||
.ai-chat-prompts {
|
||||
padding: 8px 12px; border-top: 1px solid var(--monica-border);
|
||||
display: flex; flex-wrap: wrap; gap: 6px; background: #fafbfc;
|
||||
}
|
||||
.chip {
|
||||
border: 1px solid var(--monica-border); background: #fff; font: inherit;
|
||||
font-size: 11px; font-weight: 600; padding: 5px 10px; cursor: pointer; color: var(--monica-ink);
|
||||
}
|
||||
.chip:hover { border-color: var(--monica-primary); color: var(--monica-primary); }
|
||||
.ai-chat-input {
|
||||
border-top: 1px solid var(--monica-border); padding: 10px 12px;
|
||||
display: flex; gap: 8px; align-items: flex-end;
|
||||
}
|
||||
.ai-chat-input textarea {
|
||||
flex: 1; min-height: 44px; max-height: 100px; resize: vertical;
|
||||
border: 1px solid var(--monica-border); padding: 8px 10px; font: inherit; font-size: 13px;
|
||||
}
|
||||
.ai-chat-input .btn { flex-shrink: 0; }
|
||||
|
||||
/* Postcard */
|
||||
.postcard {
|
||||
width: 100%; max-width: 420px; aspect-ratio: 6 / 4; position: relative; overflow: hidden;
|
||||
background: #111; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25); color: #fff;
|
||||
transition: max-width 0.2s, aspect-ratio 0.2s;
|
||||
}
|
||||
.postcard.size-4x6 { max-width: 420px; aspect-ratio: 6 / 4; }
|
||||
.postcard.size-6x9 { max-width: 480px; aspect-ratio: 9 / 6; }
|
||||
.postcard.size-6x11 { max-width: 520px; aspect-ratio: 11 / 6; }
|
||||
.postcard.size-square { max-width: 400px; aspect-ratio: 1 / 1; }
|
||||
.postcard-media {
|
||||
position: absolute; inset: 0; background-size: cover; background-position: center;
|
||||
}
|
||||
.postcard-overlay { position: absolute; inset: 0; pointer-events: none; }
|
||||
.postcard-overlay.ov-dark { background: linear-gradient(transparent 35%, rgba(0,0,0,.75)); }
|
||||
.postcard-overlay.ov-light { background: linear-gradient(transparent 50%, rgba(255,255,255,.92)); }
|
||||
.postcard-overlay.ov-none { background: none; }
|
||||
.postcard-overlay.ov-light ~ .postcard-copy,
|
||||
.ov-light + .postcard-copy { color: #111; }
|
||||
.postcard-copy {
|
||||
position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
|
||||
}
|
||||
.postcard-headline {
|
||||
font-family: Poppins, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: 0.04em;
|
||||
border-left: 4px solid #00626c; padding-left: 10px; line-height: 1.1;
|
||||
}
|
||||
.postcard-sub { margin-top: 8px; font-size: 14px; opacity: 0.95; }
|
||||
.postcard-back { background: #fafafa; color: #212121; }
|
||||
.postcard-back-grid { display: grid; grid-template-columns: 1.2fr 1fr; height: 100%; }
|
||||
.postcard-back-msg { padding: 16px; display: flex; flex-direction: column; gap: 10px; border-right: 1px dashed #cbd5e1; }
|
||||
.postcard-back-body { font-size: 12px; white-space: pre-wrap; flex: 1; line-height: 1.45; }
|
||||
.postcard-agent { font-size: 11px; font-weight: 600; color: #00626c; }
|
||||
.postcard-qr {
|
||||
width: 48px; height: 48px; background: #111; color: #fff; font-size: 10px;
|
||||
display: flex; align-items: center; justify-content: center; letter-spacing: 0.05em;
|
||||
}
|
||||
.postcard-back-mail { padding: 12px; position: relative; }
|
||||
.stamp {
|
||||
width: 44px; height: 52px; border: 2px dashed #94a3b8; float: right;
|
||||
font-size: 9px; color: #94a3b8; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.addr-block {
|
||||
margin-top: 48px; font-size: 12px; line-height: 1.4;
|
||||
border-bottom: 1px solid #e2e8f0; padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Social live preview */
|
||||
.platform-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.toggle-pill {
|
||||
border: 1px solid var(--monica-border); padding: 8px 12px; font-size: 13px;
|
||||
background: #fff; display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.toggle-pill.warn { border-color: #fdba74; background: #fff7ed; }
|
||||
.social-phone {
|
||||
width: 100%; max-width: 360px; background: #fff; border: 1px solid #d1d5db;
|
||||
box-shadow: 0 8px 30px rgba(15,23,42,.12); overflow: hidden; font-size: 14px;
|
||||
}
|
||||
.social-phone.ig { max-width: 340px; }
|
||||
.soc-header {
|
||||
display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: relative;
|
||||
}
|
||||
.soc-avatar {
|
||||
width: 40px; height: 40px; background: #00626c; color: #fff; display: flex;
|
||||
align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
|
||||
}
|
||||
.soc-avatar.round { border-radius: 50%; background: linear-gradient(45deg, #f58529, #dd2a7b); }
|
||||
.soc-avatar.sq { border-radius: 4px; background: #0a66c2; }
|
||||
.soc-name { font-weight: 700; font-size: 13px; }
|
||||
.soc-meta { font-size: 11px; color: #6b7280; }
|
||||
.soc-more { margin-left: auto; color: #6b7280; }
|
||||
.soc-caption { padding: 0 14px 12px; white-space: pre-wrap; line-height: 1.4; font-size: 13px; }
|
||||
.soc-image {
|
||||
height: 200px; background-size: cover; background-position: center; background-color: #e5e7eb;
|
||||
}
|
||||
.soc-image.square { height: 340px; }
|
||||
.soc-actions {
|
||||
padding: 10px 14px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #4b5563; font-weight: 600;
|
||||
}
|
||||
.ig-act { font-size: 18px; border-top: none; padding-top: 8px; }
|
||||
|
||||
|
||||
/* Exit brand overrides on template buttons */
|
||||
.page .button-primary,
|
||||
.page .button-primary:focus,
|
||||
.page .button-primary:active {
|
||||
background-color: #00626c !important;
|
||||
border-color: #00626c !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.page .button-primary:hover {
|
||||
background-color: #008898 !important;
|
||||
border-color: #008898 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.page .breadcrumbs-custom-path a,
|
||||
.page a.link-default { color: #00626c; }
|
||||
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="wide wow-animation" lang="en">
|
||||
<head>
|
||||
<title>404 · Monica Dhillon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="brand/favicon-32.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800%7CPoppins:300,400,700">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/fonts.css">
|
||||
<link rel="stylesheet" href="css/style.css" id="main-styles-link">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<section class="section section-single bg-gray-800 primary-overlay" style="background-image: url(images/bg-image-7.jpg);">
|
||||
<div class="section-single-inner">
|
||||
<div class="section-single-dummy"></div>
|
||||
<div class="section-single-main">
|
||||
<div class="container">
|
||||
<div class="proposal-note" style="max-width:640px;margin:0 auto 24px;text-align:left">
|
||||
<strong>UX note:</strong> Custom 404 for broken or removed URLs. Keeps visitor on-brand and offers a path home or to contact.
|
||||
</div>
|
||||
<div class="row row-30">
|
||||
<div class="col-sm-6 text-center text-sm-left">
|
||||
<p class="text-extra-large">404</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="section-single-main-content">
|
||||
<h6 class="title-decorated title-decorated-lg">Page not found</h6>
|
||||
<p><span class="text-width-2">That page may have moved or the link is outdated. Let’s get you back on track.</span></p>
|
||||
<a class="button button-lg button-primary button-winona" href="public-home.html">Back to home</a>
|
||||
<a class="button button-lg button-default-outline button-winona" href="public-contact.html" style="margin-left:8px">Contact Monica</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-minimal section-single-footer">
|
||||
<div class="container">
|
||||
<div class="footer-minimal-inner">
|
||||
<a class="brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
<p class="rights"><span>© </span><span>2026</span><span> </span><span>Monica Dhillon · MKDRealtor.com</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script src="js/core.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="wide wow-animation" lang="en">
|
||||
<head>
|
||||
<title>About · Monica Dhillon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="brand/favicon-32.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800%7CPoppins:300,400,700">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/fonts.css">
|
||||
<link rel="stylesheet" href="css/style.css" id="main-styles-link">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<header class="section page-header">
|
||||
<div class="rd-navbar-wrap">
|
||||
<nav class="rd-navbar rd-navbar-corporate" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-static" data-lg-stick-up="true" data-lg-stick-up-offset="118px" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xl-stick-up="true" data-xl-stick-up-offset="118px" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-xxl-stick-up-offset="118px" data-xxl-stick-up="true">
|
||||
<div class="rd-navbar-aside-outer">
|
||||
<div class="rd-navbar-aside">
|
||||
<div class="rd-navbar-panel">
|
||||
<button class="rd-navbar-toggle" data-rd-navbar-toggle="#rd-navbar-nav-wrap-1"><span></span></button>
|
||||
<a class="rd-navbar-brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
</div>
|
||||
<div class="rd-navbar-collapse">
|
||||
<button class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle="#rd-navbar-collapse-content-1"><span></span></button>
|
||||
<div class="rd-navbar-collapse-content" id="rd-navbar-collapse-content-1">
|
||||
<article class="unit align-items-center">
|
||||
<div class="unit-left"><span class="icon icon-md icon-modern mdi mdi-phone"></span></div>
|
||||
<div class="unit-body"><a class="link-default" href="tel:+15551234567">(555) 123-4567</a></div>
|
||||
</article>
|
||||
<article class="unit align-items-center">
|
||||
<div class="unit-left"><span class="icon icon-md icon-modern mdi mdi-map-marker"></span></div>
|
||||
<div class="unit-body"><span class="link-default">Serving Greater Metro Area</span></div>
|
||||
</article>
|
||||
<a class="button button-gray-bordered button-winona" href="public-contact.html">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rd-navbar-main-outer">
|
||||
<div class="rd-navbar-main">
|
||||
<div class="rd-navbar-nav-wrap" id="rd-navbar-nav-wrap-1">
|
||||
<ul class="rd-navbar-nav">
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-home.html">Home</a></li>
|
||||
<li class="rd-nav-item active"><a class="rd-nav-link" href="public-about.html">About</a></li>
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="breadcrumbs-custom bg-image context-dark" style="background-image: url(images/breadcrumbs-image-1.jpg);">
|
||||
<div class="breadcrumbs-custom-inner">
|
||||
<div class="container breadcrumbs-custom-container">
|
||||
<div class="breadcrumbs-custom-main">
|
||||
<h6 class="breadcrumbs-custom-subtitle title-decorated">About</h6>
|
||||
<h2 class="text-uppercase breadcrumbs-custom-title">Meet Monica</h2>
|
||||
</div>
|
||||
<ul class="breadcrumbs-custom-path">
|
||||
<li><a href="public-home.html">Home</a></li>
|
||||
<li class="active">About</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section section-lg">
|
||||
<div class="container">
|
||||
<div class="row row-50 justify-content-center justify-content-lg-between flex-lg-row-reverse">
|
||||
<div class="col-md-10 col-lg-6 col-xl-5">
|
||||
<h3 class="text-uppercase">Local realtor,<br>personal service</h3>
|
||||
<p class="about-subtitle">I help families buy and sell homes with clear communication and marketing that actually reaches people — not just another postcard blast.</p>
|
||||
<p>This site replaces a costly third-party campaign platform. Visitors reach me through a protected contact form; every inquiry lands in my portal with source tracking so I know which campaigns work.</p>
|
||||
<a class="button button-lg button-primary button-winona" href="public-contact.html">Work with me</a>
|
||||
</div>
|
||||
<div class="col-md-10 col-lg-6 col-xl-6"><img class="img-responsive" src="images/careers-1-570x388.jpg" alt="Monica Dhillon" width="570" height="388"/></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="section footer-advanced bg-gray-700">
|
||||
<div class="footer-advanced-main">
|
||||
<div class="container">
|
||||
<div class="row row-50">
|
||||
<div class="col-lg-6">
|
||||
<div class="footer-brand-row"><img src="brand/exit_logo.png" alt="EXIT Realty"><div><h5 class="font-weight-bold text-uppercase text-white" style="margin:0">Monica Dhillon</h5><span style="color:#7dd3da;font-size:12px">MKDRealtor.com · EXIT Realty Redefined</span></div></div>
|
||||
<p class="footer-advanced-text">Local expertise, clear communication, and a marketing platform built to bring serious buyers and sellers to you — not to a generic campaign factory.</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5 class="font-weight-bold text-uppercase text-white">Navigate</h5>
|
||||
<ul class="list-marked list-marked-sm">
|
||||
<li><a href="public-home.html">Home</a></li>
|
||||
<li><a href="public-about.html">About</a></li>
|
||||
<li><a href="public-contact.html">Contact</a></li>
|
||||
<li><a href="portal-login.html">Realtor portal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-advanced-aside">
|
||||
<div class="container">
|
||||
<div class="footer-advanced-layout"><a class="brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
<p class="rights"><span>© </span><span>2026 </span><span>Monica Dhillon · MKDRealtor.com</span><span>. </span><a href="public-unsubscribe.html">Email preferences</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/core.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="wide wow-animation" lang="en">
|
||||
<head>
|
||||
<title>Contact · Monica Dhillon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="brand/favicon-32.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800%7CPoppins:300,400,700">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/fonts.css">
|
||||
<link rel="stylesheet" href="css/style.css" id="main-styles-link">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<header class="section page-header">
|
||||
<div class="rd-navbar-wrap">
|
||||
<nav class="rd-navbar rd-navbar-corporate" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-static" data-lg-stick-up="true" data-lg-stick-up-offset="118px" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xl-stick-up="true" data-xl-stick-up-offset="118px" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-xxl-stick-up-offset="118px" data-xxl-stick-up="true">
|
||||
<div class="rd-navbar-aside-outer">
|
||||
<div class="rd-navbar-aside">
|
||||
<div class="rd-navbar-panel">
|
||||
<button class="rd-navbar-toggle" data-rd-navbar-toggle="#rd-navbar-nav-wrap-1"><span></span></button>
|
||||
<a class="rd-navbar-brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
</div>
|
||||
<div class="rd-navbar-collapse">
|
||||
<button class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle="#rd-navbar-collapse-content-1"><span></span></button>
|
||||
<div class="rd-navbar-collapse-content" id="rd-navbar-collapse-content-1">
|
||||
<article class="unit align-items-center">
|
||||
<div class="unit-left"><span class="icon icon-md icon-modern mdi mdi-phone"></span></div>
|
||||
<div class="unit-body"><a class="link-default" href="tel:+15551234567">(555) 123-4567</a></div>
|
||||
</article>
|
||||
<article class="unit align-items-center">
|
||||
<div class="unit-left"><span class="icon icon-md icon-modern mdi mdi-map-marker"></span></div>
|
||||
<div class="unit-body"><span class="link-default">Serving Greater Metro Area</span></div>
|
||||
</article>
|
||||
<a class="button button-gray-bordered button-winona" href="public-contact.html">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rd-navbar-main-outer">
|
||||
<div class="rd-navbar-main">
|
||||
<div class="rd-navbar-nav-wrap" id="rd-navbar-nav-wrap-1">
|
||||
<ul class="rd-navbar-nav">
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-home.html">Home</a></li>
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-about.html">About</a></li>
|
||||
<li class="rd-nav-item active"><a class="rd-nav-link" href="public-contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="breadcrumbs-custom bg-image context-dark" style="background-image: url(images/breadcrumbs-image-1.jpg);">
|
||||
<div class="breadcrumbs-custom-inner">
|
||||
<div class="container breadcrumbs-custom-container">
|
||||
<div class="breadcrumbs-custom-main">
|
||||
<h6 class="breadcrumbs-custom-subtitle title-decorated">Contact</h6>
|
||||
<h2 class="text-uppercase breadcrumbs-custom-title">Get in touch</h2>
|
||||
</div>
|
||||
<ul class="breadcrumbs-custom-path">
|
||||
<li><a href="public-home.html">Home</a></li>
|
||||
<li class="active">Contact</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section section-sm">
|
||||
<div class="container">
|
||||
<div class="layout-bordered">
|
||||
<div class="layout-bordered-item wow-outer">
|
||||
<div class="layout-bordered-item-inner wow slideInUp">
|
||||
<div class="icon icon-lg mdi mdi-phone text-primary"></div>
|
||||
<ul class="list-0"><li><a class="link-default" href="tel:+15551234567">(555) 123-4567</a></li></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-bordered-item wow-outer">
|
||||
<div class="layout-bordered-item-inner wow slideInUp">
|
||||
<div class="icon icon-lg mdi mdi-email text-primary"></div>
|
||||
<a class="link-default" href="mailto:monica@example.com">monica@example.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-bordered-item wow-outer">
|
||||
<div class="layout-bordered-item-inner wow slideInUp">
|
||||
<div class="icon icon-lg mdi mdi-map-marker text-primary"></div>
|
||||
<span class="link-default">Greater Metro Area</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section bg-gray-100">
|
||||
<div class="container section-lg">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Form protected by reCAPTCHA v3 (invisible). Submit creates/updates a <em>Contact</em>, opens a <em>Lead</em>, and ties UTM visit → attribution. Consent notice below.</div>
|
||||
<h3 class="text-uppercase">Send a message</h3>
|
||||
<form class="rd-form" action="#" method="post" onsubmit="alert('Mockup only — in production this submits with reCAPTCHA and creates a lead.'); return false;">
|
||||
<div class="row row-10">
|
||||
<div class="col-md-6">
|
||||
<div class="form-wrap">
|
||||
<label class="form-label-outside" for="contact-first-name">First name</label>
|
||||
<input class="form-input" id="contact-first-name" type="text" name="first_name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-wrap">
|
||||
<label class="form-label-outside" for="contact-last-name">Last name</label>
|
||||
<input class="form-input" id="contact-last-name" type="text" name="last_name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-wrap">
|
||||
<label class="form-label-outside" for="contact-email">Email</label>
|
||||
<input class="form-input" id="contact-email" type="email" name="email" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-wrap">
|
||||
<label class="form-label-outside" for="contact-phone">Phone</label>
|
||||
<input class="form-input" id="contact-phone" type="tel" name="phone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-wrap">
|
||||
<label class="form-label-outside" for="contact-interest">I am interested in</label>
|
||||
<select class="form-input" id="contact-interest" name="interest">
|
||||
<option>Buying a home</option>
|
||||
<option>Selling a home</option>
|
||||
<option>Both / not sure yet</option>
|
||||
<option>Something else</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-wrap">
|
||||
<label class="form-label-outside" for="contact-message">Message</label>
|
||||
<textarea class="form-input" id="contact-message" name="message" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:13px;color:#6b7280;margin:12px 0 20px;">By submitting, you agree I may contact you about your inquiry. You can unsubscribe from marketing email anytime. Protected by reCAPTCHA.</p>
|
||||
<button class="button button-primary button-winona" type="submit">Send message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="section footer-advanced bg-gray-700">
|
||||
<div class="footer-advanced-main">
|
||||
<div class="container">
|
||||
<div class="row row-50">
|
||||
<div class="col-lg-6">
|
||||
<div class="footer-brand-row"><img src="brand/exit_logo.png" alt="EXIT Realty"><div><h5 class="font-weight-bold text-uppercase text-white" style="margin:0">Monica Dhillon</h5><span style="color:#7dd3da;font-size:12px">MKDRealtor.com · EXIT Realty Redefined</span></div></div>
|
||||
<p class="footer-advanced-text">Local expertise, clear communication, and a marketing platform built to bring serious buyers and sellers to you — not to a generic campaign factory.</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5 class="font-weight-bold text-uppercase text-white">Navigate</h5>
|
||||
<ul class="list-marked list-marked-sm">
|
||||
<li><a href="public-home.html">Home</a></li>
|
||||
<li><a href="public-about.html">About</a></li>
|
||||
<li><a href="public-contact.html">Contact</a></li>
|
||||
<li><a href="portal-login.html">Realtor portal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-advanced-aside">
|
||||
<div class="container">
|
||||
<div class="footer-advanced-layout"><a class="brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
<p class="rights"><span>© </span><span>2026 </span><span>Monica Dhillon · MKDRealtor.com</span><span>. </span><a href="public-unsubscribe.html">Email preferences</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/core.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="wide wow-animation" lang="en">
|
||||
<head>
|
||||
<title>Home · Monica Dhillon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="brand/favicon-32.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800%7CPoppins:300,400,700">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/fonts.css">
|
||||
<link rel="stylesheet" href="css/style.css" id="main-styles-link">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<header class="section page-header">
|
||||
<div class="rd-navbar-wrap">
|
||||
<nav class="rd-navbar rd-navbar-corporate" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-static" data-lg-stick-up="true" data-lg-stick-up-offset="118px" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xl-stick-up="true" data-xl-stick-up-offset="118px" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-xxl-stick-up-offset="118px" data-xxl-stick-up="true">
|
||||
<div class="rd-navbar-aside-outer">
|
||||
<div class="rd-navbar-aside">
|
||||
<div class="rd-navbar-panel">
|
||||
<button class="rd-navbar-toggle" data-rd-navbar-toggle="#rd-navbar-nav-wrap-1"><span></span></button>
|
||||
<a class="rd-navbar-brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
</div>
|
||||
<div class="rd-navbar-collapse">
|
||||
<button class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle="#rd-navbar-collapse-content-1"><span></span></button>
|
||||
<div class="rd-navbar-collapse-content" id="rd-navbar-collapse-content-1">
|
||||
<article class="unit align-items-center">
|
||||
<div class="unit-left"><span class="icon icon-md icon-modern mdi mdi-phone"></span></div>
|
||||
<div class="unit-body"><a class="link-default" href="tel:+15551234567">(555) 123-4567</a></div>
|
||||
</article>
|
||||
<article class="unit align-items-center">
|
||||
<div class="unit-left"><span class="icon icon-md icon-modern mdi mdi-map-marker"></span></div>
|
||||
<div class="unit-body"><span class="link-default">Serving Greater Metro Area</span></div>
|
||||
</article>
|
||||
<a class="button button-gray-bordered button-winona" href="public-contact.html">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rd-navbar-main-outer">
|
||||
<div class="rd-navbar-main">
|
||||
<div class="rd-navbar-nav-wrap" id="rd-navbar-nav-wrap-1">
|
||||
<ul class="rd-navbar-nav">
|
||||
<li class="rd-nav-item active"><a class="rd-nav-link" href="public-home.html">Home</a></li>
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-about.html">About</a></li>
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="swiper-container swiper-slider swiper-slider-minimal" data-loop="true" data-slide-effect="fade" data-autoplay="false" data-simulate-touch="true">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" data-slide-bg="images/slider-minimal-slide-1-1920x968.jpg">
|
||||
<div class="container">
|
||||
<div class="jumbotron-classic-content">
|
||||
<div class="wow-outer">
|
||||
<div class="title-docor-text font-weight-bold title-decorated text-uppercase wow slideInLeft text-white">Monica Dhillon · MKDRealtor.com</div>
|
||||
</div>
|
||||
<h1 class="text-uppercase text-white font-weight-bold wow-outer"><span class="wow slideInDown" data-wow-delay=".2s">Your Home,<br>Guided Well</span></h1>
|
||||
<p class="text-white wow-outer"><span class="wow slideInDown" data-wow-delay=".35s">EXIT Realty Redefined — buying or selling in the metro area with clear advice, strong marketing, and a team that answers the phone.</span></p>
|
||||
<div class="wow-outer button-outer"><a class="button button-md button-primary button-winona wow slideInDown" href="public-contact.html" data-wow-delay=".4s">Start a conversation</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide" data-slide-bg="images/slider-minimal-slide-2-1920x968.jpg">
|
||||
<div class="container">
|
||||
<div class="jumbotron-classic-content">
|
||||
<div class="wow-outer">
|
||||
<div class="title-docor-text font-weight-bold title-decorated text-uppercase wow slideInLeft text-white">Local Market Insight</div>
|
||||
</div>
|
||||
<h1 class="text-uppercase text-white font-weight-bold wow-outer"><span class="wow slideInDown" data-wow-delay=".2s">Sell With<br>Confidence</span></h1>
|
||||
<p class="text-white wow-outer"><span class="wow slideInDown" data-wow-delay=".35s">Pricing strategy, staging guidance, and multi-channel outreach so the right buyers see your listing.</span></p>
|
||||
<div class="wow-outer button-outer"><a class="button button-md button-primary button-winona wow slideInDown" href="public-about.html" data-wow-delay=".4s">Meet Monica</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination-outer container">
|
||||
<div class="swiper-pagination swiper-pagination-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="section section-lg">
|
||||
<div class="container">
|
||||
<div class="proposal-note"><strong>UX note:</strong> First viewport = brand + one headline + one CTA + full-bleed hero. No stats strip or card clutter in the hero.</div>
|
||||
<h3 class="text-uppercase text-center wow-outer"><span class="wow slideInDown">How I can help</span></h3>
|
||||
<div class="row row-50">
|
||||
<div class="col-md-4 wow-outer">
|
||||
<article class="box-chloe wow slideInUp">
|
||||
<div class="box-chloe__icon linearicons-home-icon3"></div>
|
||||
<div class="box-chloe__main">
|
||||
<h4 class="box-chloe__title">Buyers</h4>
|
||||
<p>Neighborhood tours, offer strategy, and negotiation that protects your timeline and budget.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-md-4 wow-outer">
|
||||
<article class="box-chloe wow slideInUp" data-wow-delay=".05s">
|
||||
<div class="box-chloe__icon linearicons-apartment"></div>
|
||||
<div class="box-chloe__main">
|
||||
<h4 class="box-chloe__title">Sellers</h4>
|
||||
<p>Listing prep, professional marketing, and outreach across email, SMS, postcard, and social.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-md-4 wow-outer">
|
||||
<article class="box-chloe wow slideInUp" data-wow-delay=".1s">
|
||||
<div class="box-chloe__icon linearicons-chart-growth"></div>
|
||||
<div class="box-chloe__main">
|
||||
<h4 class="box-chloe__title">Market guidance</h4>
|
||||
<p>Honest comps and timing advice — whether you move this season or plan ahead.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section section-lg bg-gray-100 text-center">
|
||||
<div class="container">
|
||||
<h3 class="text-uppercase wow-outer"><span class="wow slideInUp">Ready when you are</span></h3>
|
||||
<p class="wow-outer"><span class="text-width-1 wow slideInDown">Tell me what you are looking for. I will follow up personally — your message becomes a lead in my private portal.</span></p>
|
||||
<a class="button button-lg button-primary button-winona" href="public-contact.html">Contact Monica</a>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="section footer-advanced bg-gray-700">
|
||||
<div class="footer-advanced-main">
|
||||
<div class="container">
|
||||
<div class="row row-50">
|
||||
<div class="col-lg-6">
|
||||
<div class="footer-brand-row"><img src="brand/exit_logo.png" alt="EXIT Realty"><div><h5 class="font-weight-bold text-uppercase text-white" style="margin:0">Monica Dhillon</h5><span style="color:#7dd3da;font-size:12px">MKDRealtor.com · EXIT Realty Redefined</span></div></div>
|
||||
<p class="footer-advanced-text">Local expertise, clear communication, and a marketing platform built to bring serious buyers and sellers to you — not to a generic campaign factory.</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5 class="font-weight-bold text-uppercase text-white">Navigate</h5>
|
||||
<ul class="list-marked list-marked-sm">
|
||||
<li><a href="public-home.html">Home</a></li>
|
||||
<li><a href="public-about.html">About</a></li>
|
||||
<li><a href="public-contact.html">Contact</a></li>
|
||||
<li><a href="portal-login.html">Realtor portal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-advanced-aside">
|
||||
<div class="container">
|
||||
<div class="footer-advanced-layout"><a class="brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
<p class="rights"><span>© </span><span>2026 </span><span>Monica Dhillon · MKDRealtor.com</span><span>. </span><a href="public-unsubscribe.html">Email preferences</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/core.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="wide wow-animation" lang="en">
|
||||
<head>
|
||||
<title>Under construction · Monica Dhillon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="brand/favicon-32.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800%7CPoppins:300,400,700">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/fonts.css">
|
||||
<link rel="stylesheet" href="css/style.css" id="main-styles-link">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<section class="section section-single bg-gray-800 primary-overlay" style="background-image: url(images/bg-image-4.jpg);">
|
||||
<div class="section-single-inner">
|
||||
<div class="section-single-dummy"></div>
|
||||
<div class="section-single-main">
|
||||
<div class="container">
|
||||
<div class="row row-30 justify-content-center justify-content-sm-start">
|
||||
<div class="col-sm-10 col-md-9 col-lg-7 col-xl-6">
|
||||
<div class="proposal-note" style="margin-bottom:20px">
|
||||
<strong>UX note:</strong> Holding page for maintenance or pre-launch. Optional notify list; still offers a way to reach Monica.
|
||||
</div>
|
||||
<h6 class="title-decorated title-decorated-lg">We’re getting ready to launch</h6>
|
||||
<p>Monica Dhillon · MKDRealtor.com’s new site is almost here. Leave your email and I’ll let you know when it’s live — or reach out now if you need help buying or selling.</p>
|
||||
<div class="rd-mailform-wrap">
|
||||
<form class="rd-form form-inline" action="#" method="post" onsubmit="alert('Mockup only — would store a notify-me Contact.'); return false;">
|
||||
<div class="form-wrap">
|
||||
<input class="form-input" id="subscribe-form-1-email" type="email" name="email" required>
|
||||
<label class="form-label" for="subscribe-form-1-email">Your e-mail</label>
|
||||
</div>
|
||||
<div class="form-button">
|
||||
<button class="button button-primary button-winona" type="submit">Notify me</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<p style="margin-top:20px">
|
||||
<a class="button button-default-outline button-winona" href="public-contact.html">Contact Monica now</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-minimal section-single-footer">
|
||||
<div class="container">
|
||||
<div class="footer-minimal-inner">
|
||||
<a class="brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
<p class="rights"><span>© </span><span>2026</span><span> </span><span>Monica Dhillon · MKDRealtor.com</span><span> · </span><a href="tel:+15551234567">(555) 123-4567</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script src="js/core.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="wide wow-animation" lang="en">
|
||||
<head>
|
||||
<title>Email preferences · Monica Dhillon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="brand/favicon-32.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800%7CPoppins:300,400,700">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<link rel="stylesheet" href="css/fonts.css">
|
||||
<link rel="stylesheet" href="css/style.css" id="main-styles-link">
|
||||
<link rel="stylesheet" href="proposal.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="proposal-banner">
|
||||
<div><span class="tag">Proposal mockup</span> MKDRealtor.com — UX examples (not production)</div>
|
||||
<div><a href="index.html">All screens</a></div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<header class="section page-header">
|
||||
<div class="rd-navbar-wrap">
|
||||
<nav class="rd-navbar rd-navbar-corporate" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-static" data-lg-stick-up="true" data-lg-stick-up-offset="118px" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xl-stick-up="true" data-xl-stick-up-offset="118px" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-xxl-stick-up-offset="118px" data-xxl-stick-up="true">
|
||||
<div class="rd-navbar-aside-outer">
|
||||
<div class="rd-navbar-aside">
|
||||
<div class="rd-navbar-panel">
|
||||
<button class="rd-navbar-toggle" data-rd-navbar-toggle="#rd-navbar-nav-wrap-1"><span></span></button>
|
||||
<a class="rd-navbar-brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
</div>
|
||||
<div class="rd-navbar-collapse">
|
||||
<button class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle="#rd-navbar-collapse-content-1"><span></span></button>
|
||||
<div class="rd-navbar-collapse-content" id="rd-navbar-collapse-content-1">
|
||||
<article class="unit align-items-center">
|
||||
<div class="unit-left"><span class="icon icon-md icon-modern mdi mdi-phone"></span></div>
|
||||
<div class="unit-body"><a class="link-default" href="tel:+15551234567">(555) 123-4567</a></div>
|
||||
</article>
|
||||
<article class="unit align-items-center">
|
||||
<div class="unit-left"><span class="icon icon-md icon-modern mdi mdi-map-marker"></span></div>
|
||||
<div class="unit-body"><span class="link-default">Serving Greater Metro Area</span></div>
|
||||
</article>
|
||||
<a class="button button-gray-bordered button-winona" href="public-contact.html">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rd-navbar-main-outer">
|
||||
<div class="rd-navbar-main">
|
||||
<div class="rd-navbar-nav-wrap" id="rd-navbar-nav-wrap-1">
|
||||
<ul class="rd-navbar-nav">
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-home.html">Home</a></li>
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-about.html">About</a></li>
|
||||
<li class="rd-nav-item "><a class="rd-nav-link" href="public-contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section section-lg">
|
||||
<div class="container" style="max-width:560px;">
|
||||
<div class="proposal-note"><strong>UX note:</strong> Signed-token one-click unsubscribe. Per-channel consent — opt out of email while keeping SMS if desired.</div>
|
||||
<h3 class="text-uppercase">Email preferences</h3>
|
||||
<p>You are subscribed as <strong>jordan.lee@example.com</strong>.</p>
|
||||
<form onsubmit="alert('Mockup: would write ConsentRecord + Suppression.'); return false;">
|
||||
<div class="form-wrap">
|
||||
<label><input type="checkbox" checked> Email marketing</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label><input type="checkbox" checked> SMS updates</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label><input type="checkbox" checked> Postcard mailings</label>
|
||||
</div>
|
||||
<p style="font-size:13px;color:#6b7280;">SMS: reply STOP anytime. Changes take effect immediately.</p>
|
||||
<button class="button button-primary button-winona" type="submit">Save preferences</button>
|
||||
<button class="button button-gray-bordered button-winona" type="button" onclick="alert('Mockup: unsubscribe all channels')">Unsubscribe from all</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="section footer-advanced bg-gray-700">
|
||||
<div class="footer-advanced-main">
|
||||
<div class="container">
|
||||
<div class="row row-50">
|
||||
<div class="col-lg-6">
|
||||
<div class="footer-brand-row"><img src="brand/exit_logo.png" alt="EXIT Realty"><div><h5 class="font-weight-bold text-uppercase text-white" style="margin:0">Monica Dhillon</h5><span style="color:#7dd3da;font-size:12px">MKDRealtor.com · EXIT Realty Redefined</span></div></div>
|
||||
<p class="footer-advanced-text">Local expertise, clear communication, and a marketing platform built to bring serious buyers and sellers to you — not to a generic campaign factory.</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h5 class="font-weight-bold text-uppercase text-white">Navigate</h5>
|
||||
<ul class="list-marked list-marked-sm">
|
||||
<li><a href="public-home.html">Home</a></li>
|
||||
<li><a href="public-about.html">About</a></li>
|
||||
<li><a href="public-contact.html">Contact</a></li>
|
||||
<li><a href="portal-login.html">Realtor portal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-advanced-aside">
|
||||
<div class="container">
|
||||
<div class="footer-advanced-layout"><a class="brand" href="public-home.html"><img src="brand/exit_logo.png" alt="EXIT Realty · Monica Dhillon" width="151" height="44"/></a>
|
||||
<p class="rights"><span>© </span><span>2026 </span><span>Monica Dhillon · MKDRealtor.com</span><span>. </span><a href="public-unsubscribe.html">Email preferences</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/core.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user