← back to Homesonspec
apps/web/public/offline.html
51 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Offline — Homes on Spec</title>
<link rel="icon" href="/favicon-32.png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<style>
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
margin: 0; min-height: 100vh; display: grid; place-items: center;
background: #f0f9f8; color: #123231;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
padding: 24px; text-align: center;
}
.card { max-width: 340px; }
.mark {
width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 18px;
background: #1b4645; display: grid; place-items: center;
}
.mark svg { width: 44px; height: 44px; }
h1 { font-size: 1.35rem; margin: 0 0 8px; letter-spacing: -0.02em; }
p { margin: 0 0 22px; color: #226b69; line-height: 1.5; font-size: 0.95rem; }
button {
appearance: none; border: 0; cursor: pointer;
background: #ed8f16; color: #081e1e; font-weight: 600; font-size: 0.95rem;
padding: 12px 22px; border-radius: 999px;
}
button:active { transform: translateY(1px); }
.dot { color: #ed8f16; }
</style>
</head>
<body>
<div class="card">
<div class="mark" aria-hidden="true">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M256 132 L372 250 H140 Z" fill="#fff"/>
<rect x="168" y="238" width="176" height="142" rx="10" fill="#fff"/>
<rect x="238" y="300" width="36" height="80" rx="18" fill="#ed8f16"/>
<rect x="238" y="340" width="36" height="40" fill="#ed8f16"/>
</svg>
</div>
<h1>You’re offline<span class="dot">.</span></h1>
<p>Homes on Spec needs a connection to load new listings. Pages you’ve already opened may still load from your cache — and we’ll reconnect the moment you’re back.</p>
<button onclick="location.reload()">Try again</button>
</div>
</body>
</html>