Skip to content

Instantly share code, notes, and snippets.

@psynewave

psynewave/rick_minimal_market_explorer.html

Created May 9, 2025 17:53
Show Gist options
  • Save psynewave/3069602fb4bb05135b08c3145d9a9636 to your computer and use it in GitHub Desktop.
Save psynewave/3069602fb4bb05135b08c3145d9a9636 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rick_minimal_market_explorer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Rick Smith – Market Explorer</title>
<style>
/* reset & layout */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: –apple-system, BlinkMacSystemFont, sans-serif; }
body { display: flex; flex-direction: column; }
/* header */
header {
padding: 1rem 2rem;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
}
.contact-info {
display: flex;
gap: 2rem;
font-size: 0.95rem;
color: #333;
}
.contact-info div {
display: flex;
align-items: center;
gap: 0.5rem;
}
.contact-info svg { width: 1em; height: 1em; }
/* iframe container */
#pageContainer {
flex: 1;
display: flex;
flex-direction: column;
background: #f8f8f8;
}
#otherContent {
padding: 2rem;
}
#iframeWrapper {
flex: 1;
min-height: 0;
position: relative;
}
#marketExplorer {
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<header>
<div>
<h1 style="font-size:1.25rem; font-weight:500;">Keller Williams</h1>
<p style="font-size:1rem; margin-top:0.25rem;">Rick Smith</p>
</div>
<div class="contact-info">
<div>
<!-- email icon -->
<svg viewBox="0 0 24 24"><path fill="currentColor"
d="M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2
2 0 0 1-2-2V4zm2 0v.01L12 13 20 4.01V4H4zm16
16V6.236l-8 7.636-8-7.636V20h16z"/>
</svg>
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div>
<!-- map icon -->
<svg viewBox="0 0 24 24"><path fill="currentColor"
d="M12 2C8.14 2 5 5.14 5 9c0
5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0
9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>
</svg>
<address>
16780 A Lark Ave.<br>
Los Gatos, CA 95032
</address>
</div>
<div>
<!-- phone icon -->
<svg viewBox="0 0 24 24"><path fill="currentColor"
d="M6.62 10.79a15.05
15.05 0 0 0 6.59 6.59l2.2-2.2a1
1 0 0 1 1.11-.21 11.36 11.36 0 0 0
3.56.57 1 1 0 0 1 1 1v3.5a1
1 0 0 1-1 1A16 16 0 0 1 3
5a1 1 0 0 1 1-1h3.5a1 1 0 0
1 1 1 11.36 11.36 0 0 0
.57 3.56 1 1 0 0 1-.21
1.11l-2.24 2.12z"/>
</svg>
<a href="tel:+14084820539">(408) 482-0539</a>
</div>
</div>
</header>
<div id="pageContainer">
<div id="otherContent">
<h2 style="margin-bottom:0.5rem;">Market Explorer</h2>
<p>Browse live MLS data right here:</p>
</div>
<div id="iframeWrapper">
<iframe
id="marketExplorer"
src="https://mlslcmscdn-cdn.mlslmedia.com/cms/content?root=public+site&path=embed/marketexplorer&v=1"
allowfullscreen>
</iframe>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment