PackIt/offline.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PackIt – Offline</title>
<meta name="theme-color" content="#e8c547">
<link rel="icon" type="image/png" sizes="192x192" href="/img/icon-192.png">
<style>
  :root { --bg:#0f1117; --surface:#181c27; --border:#2a2f3f; --accent:#e8c547; --text:#e8eaf0; --muted:#7a8099; }
  *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,'DM Sans',sans-serif;
         min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
  .box { background:var(--surface); border:1px solid var(--border); border-radius:10px;
         padding:2.5rem 2rem; max-width:420px; text-align:center; }
  .logo { font-size:2.2rem; font-weight:700; letter-spacing:.04em; color:var(--accent); margin-bottom:.5rem; }
  h1 { font-size:1.05rem; font-weight:600; margin-bottom:.75rem; }
  p { font-size:.9rem; color:var(--muted); line-height:1.55; margin-bottom:1.5rem; }
  a { display:inline-block; background:var(--accent); color:#0f1117; text-decoration:none;
      font-weight:600; font-size:.9rem; padding:.7rem 1.6rem; border-radius:10px; }
</style>
</head>
<body>
<div class="box">
  <div class="logo">PackIt</div>
  <h1>You're offline</h1>
  <p>This list hasn't been opened on this device yet, so there's no copy to show.
     Lists you've already opened stay available offline, ticks and all.</p>
  <a href="/index.php">Try again</a>
</div>
</body>
</html>