explore.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
  // Preflight is disabled so Tailwind's reset doesn't override the
  // hand-tuned design system in style.css. Tailwind is loaded purely
  // for utility classes on any new markup going forward.
  tailwind.config = { corePlugins: { preflight: false } };
</script>
</head>
<body>

<div class="app">
  <div class="topbar">
    <div class="wordmark">Explore</div>
    <div class="readout" id="tierReadout">—</div>
  </div>

  <main>
    <div class="section-label">People nearby</div>
    <div id="npcList"></div>

    <div class="section-label">News</div>
    <div id="newsList"></div>
  </main>

  <nav class="tabbar">
    <a href="home.html"><svg viewBox="0 0 24 24"><path d="M4 11.5 12 4l8 7.5"/><path d="M6 10v9h12v-9"/><path d="M10 19v-5h4v5"/></svg>Home</a>
    <a href="explore.html" class="active"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M15 9l-2 6-6 2 2-6 6-2z"/></svg>Explore</a>
    <a href="dms.html"><svg viewBox="0 0 24 24"><rect x="3.5" y="5.5" width="17" height="13" rx="1.5"/><path d="M4 6.5l8 6.5 8-6.5"/></svg>Messages</a>
    <a href="profile.html"><svg viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.5"/><path d="M4.5 20c1.4-4 4.2-6 7.5-6s6.1 2 7.5 6"/></svg>Profile</a>
  </nav>
</div>

<script src="data.js"></script>
<script src="explore.js"></script>
</body>
</html>