122 lines
6.1 KiB
HTML
122 lines
6.1 KiB
HTML
<!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>
|