← back to Rentv Bloom Flyers
public/index.html
140 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RENTV × Steve Bloom — Flyer Concepts</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
:root{--blue:#16357A;--navy:#0E2350;--gold:#E8A81C;--red:#D0202E}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,sans-serif;background:#0b1730;color:#eaf0ff;display:flex;flex-direction:column;min-height:100vh}
a{color:inherit}
header{padding:16px 24px 0;background:linear-gradient(180deg,#0e2350,#0b1730);border-bottom:1px solid #24345f}
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{width:104px;height:38px;flex:none}
.htxt h1{font-family:'Playfair Display',serif;font-size:19px;margin:0}
.htxt p{margin:2px 0 0;font-size:12.5px;color:#9fb0d8}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.tab{padding:9px 14px;border:1px solid #2c3e6e;border-bottom:none;border-radius:8px 8px 0 0;font-size:12.5px;font-weight:600;background:#101f42;cursor:pointer;white-space:nowrap;color:#cdd8f5}
.tab:hover{background:#16264d}
.tab.active{background:var(--gold);color:#1a1200;border-color:var(--gold)}
.tab .k{opacity:.6;font-weight:700;margin-right:5px}
main{flex:1;position:relative;background:#0b1730}
.view{display:none;position:absolute;inset:0}
.view.active{display:block}
.flyerbar{position:absolute;top:0;left:0;right:0;height:44px;background:#0f1d3d;border-bottom:1px solid #24345f;display:flex;align-items:center;gap:10px;padding:0 16px;z-index:2;font-size:13px}
.flyerbar b{font-weight:700}
.flyerbar .sp{flex:1}
.flyerbar a{padding:6px 12px;border:1px solid #2c3e6e;border-radius:7px;font-size:12px;font-weight:600;background:#132347;text-decoration:none;color:#eaf0ff}
.flyerbar a.gold{background:var(--gold);color:#1a1200;border-color:var(--gold)}
iframe{position:absolute;top:44px;left:0;width:100%;height:calc(100% - 44px);border:0;background:#525663}
.imgwrap{position:absolute;inset:44px 0 0;overflow:auto;text-align:center;background:#3a3f4c;padding:20px}
.imgwrap2{position:absolute;inset:0;overflow:auto;background:#3a3f4c;padding:24px;display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.imgwrap2 figure{margin:0;max-width:460px}
.imgwrap2 img,.imgwrap figure img{max-width:100%;box-shadow:0 8px 40px rgba(0,0,0,.5);border-radius:4px}
.imgwrap2 figcaption{color:#dfe6f7;font-size:12.5px;margin-top:8px}
/* sponsors */
.spwrap{position:absolute;inset:0;overflow:auto;padding:18px 24px 60px}
.callout{padding:14px 16px;background:#0a7c3e22;border:1px solid #0a7c3e;border-left:4px solid #23c274;border-radius:10px;font-size:13px;line-height:1.55;margin-bottom:16px}
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.subtab{padding:8px 14px;border:1px solid #2c3e6e;border-radius:8px;font-size:12.5px;font-weight:600;background:#101f42;cursor:pointer}
.subtab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.md{background:#0f1d3d;border:1px solid #24345f;border-radius:12px;padding:22px 26px;line-height:1.6;font-size:13.5px;max-width:1150px}
.md h1{font-family:'Playfair Display',serif;font-size:23px;color:#fff;border-bottom:1px solid #2c3e6e;padding-bottom:8px}
.md h2{color:var(--gold);font-size:17px;margin-top:24px}
.md table{border-collapse:collapse;width:100%;margin:12px 0;font-size:12px}
.md th,.md td{border:1px solid #2c3e6e;padding:6px 8px;text-align:left;vertical-align:top}
.md th{background:#16357A;color:#fff}
.md tr:nth-child(even) td{background:#122142}
.md a{color:#ffd980;word-break:break-word}
.loading{color:#9fb0d8;padding:16px}
</style>
</head>
<body>
<header>
<div class="top">
<svg class="logo" viewBox="0 0 240 88" xmlns="http://www.w3.org/2000/svg" aria-label="RENTV">
<ellipse cx="120" cy="40" rx="112" ry="34" fill="none" stroke="#E8A81C" stroke-width="6"/>
<text x="120" y="52" text-anchor="middle" font-family="Inter,sans-serif" font-weight="800" font-size="40" fill="#fff" letter-spacing="2">RENTV</text>
<text x="120" y="80" text-anchor="middle" font-family="Inter,sans-serif" font-weight="600" font-size="12" fill="#9fb0d8" letter-spacing="3">REAL ESTATE NEWS & MEDIA</text>
</svg>
<div class="htxt"><h1>Steve Bloom / RENTV — 6 Flyer Concepts + Key Art</h1>
<p>Pick a version with the tabs, then <b>⬇ Download PDF</b> on any flyer. Every concept carries the full contact block · (310) 213-6409 · sbloom@rentv.com · rentv.com</p></div>
<span style="flex:1"></span>
<a download href="pdf/RENTV-Steve-Bloom-all-6-concepts.pdf" style="align-self:center;padding:10px 16px;border-radius:9px;background:var(--gold);color:#1a1200;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap">⬇ Download all 6 (PDF)</a>
</div>
<div class="tabs" id="tabs"></div>
</header>
<main id="main"></main>
<script>
const FLYERS = [
{k:'1', label:'Editorial Kit', file:'concepts/concept-1-editorial-media-kit.html', dir:'Media Kit', png:'thumbs/concept-1-editorial-media-kit.png'},
{k:'2', label:'Data Terminal', file:'concepts/concept-2-data-terminal.html', dir:'Media Kit (dark)', png:'thumbs/concept-2-data-terminal.png'},
{k:'3', label:'Ad-Sales Tiers', file:'concepts/concept-3-adsales-pricing.html', dir:'Ad-Sales 1-pager', png:'thumbs/concept-3-adsales-pricing.png'},
{k:'4', label:'Reach Infographic',file:'concepts/concept-4-reach-infographic.html', dir:'Ad-Sales 1-pager', png:'thumbs/concept-4-reach-infographic.png'},
{k:'5', label:'Podcast Host', file:'concepts/concept-5-podcast-host.html', dir:'Bloom personal brand', png:'thumbs/concept-5-podcast-host.png'},
{k:'6', label:'CEO Profile', file:'concepts/concept-6-ceo-profile.html', dir:'Bloom personal brand', png:'thumbs/concept-6-ceo-profile.png'},
];
const SPONSORS = [
{f:'research/sponsors-la-socal.md', label:'LA / SoCal · 30'},
{f:'research/sponsors-western-footprint.md',label:'Western Footprint · 33'},
{f:'research/sponsors-central-coast.md', label:'Central Coast · 20'},
{f:'research/sponsors-national.md', label:'National · 28'},
];
const tabsEl=document.getElementById('tabs'), mainEl=document.getElementById('main');
const views={};
function addTab(id,html,build){
const t=document.createElement('div'); t.className='tab'; t.innerHTML=html; t.dataset.id=id;
t.onclick=()=>select(id); tabsEl.appendChild(t);
const v=document.createElement('div'); v.className='view'; v.id='view-'+id; mainEl.appendChild(v);
views[id]={tab:t,view:v,build,built:false};
}
function select(id){
Object.values(views).forEach(o=>{o.tab.classList.remove('active');o.view.classList.remove('active')});
const o=views[id]; o.tab.classList.add('active'); o.view.classList.add('active');
if(!o.built){o.build(o.view);o.built=true;}
}
// flyer tabs
FLYERS.forEach(fl=>addTab('f'+fl.k, '<span class="k">'+fl.k+'</span>'+fl.label, v=>{
var pdf=fl.file.replace('concepts/','pdf/').replace('.html','.pdf');
v.innerHTML='<div class="flyerbar"><b>'+fl.label+'</b> — '+fl.dir+
'<span class="sp"></span>'+
'<a class="gold" download href="'+pdf+'">⬇ Download PDF</a>'+
'<a rel="noopener noreferrer" href="'+fl.file+'" target="_blank">Open full ↗</a>'+
'<a rel="noopener noreferrer" href="'+fl.png+'" target="_blank">PNG</a></div>'+
'<iframe src="'+fl.file+'" title="'+fl.label+'"></iframe>';
}));
// key art tab
addTab('keyart','<span class="k">★</span>Key Art (PS)', v=>{
v.innerHTML='<div class="flyerbar"><b>Photoshop Key Art</b> — Steve Bloom / Commercial Real Estate Talk'+
'<span class="sp"></span><a class="gold" download href="concepts/ps-keyart-steve-bloom.png">⬇ Download PNG</a><a rel="noopener noreferrer" href="concepts/ps-keyart-steve-bloom.png" target="_blank">Open ↗</a></div>'+
'<div class="imgwrap"><figure><img src="concepts/ps-keyart-steve-bloom.png" alt="Steve Bloom key art"></figure></div>';
});
// sponsors tab
addTab('sponsors','◉ CRE Ad-Buyers', v=>{
v.innerHTML='<div class="spwrap">'+
'<div class="callout">🔥 <b>Warmest — already paying:</b> RENTV.com's own homepage currently runs live ads from <b>CBRE</b>, <b>Rockefeller Group</b>, <b>Premier Workspaces</b> and <b>Chase Partners</b> — renew/upsell first. Next: commercial <b>title/escrow</b> (First American, Fidelity, Chicago Title) and repeat brokerage spenders (<b>Marcus & Millichap</b>, <b>Kidder Mathews</b>).</div>'+
'<div class="subtabs" id="sptabs"></div><div class="md" id="spmd"><div class="loading">Loading…</div></div></div>';
const st=v.querySelector('#sptabs'), md=v.querySelector('#spmd');
async function load(f){ md.innerHTML='<div class="loading">Loading…</div>';
try{const r=await fetch(f);const t=await r.text();md.innerHTML=marked.parse(t);
md.querySelectorAll('a').forEach(a=>a.target='_blank');}catch(e){md.innerHTML='<div class="loading">Error: '+e+'</div>';}}
SPONSORS.forEach((s,i)=>{const b=document.createElement('div');b.className='subtab'+(i===0?' active':'');b.textContent=s.label;
b.onclick=()=>{st.querySelectorAll('.subtab').forEach(x=>x.classList.remove('active'));b.classList.add('active');load(s.f);};st.appendChild(b);});
load(SPONSORS[0].f);
});
// original tab
addTab('source','⌸ Original', v=>{
v.innerHTML='<div class="imgwrap2">'+
'<figure><img src="source/corp-flyer-apr2026-v3.jpg" alt="corp flyer"><figcaption>Corp Flyer Apr 2026 V3 — the current corporate services menu (primary redesign target)</figcaption></figure>'+
'<figure><img src="source/property-spotlight-flyer-apr2025.jpg" alt="spotlight flyer"><figcaption>Property Spotlight Flyer Rev Apr 2025 — the eblast sell-sheet</figcaption></figure></div>';
});
select('f1');
</script>
</body>
</html>