hyper-booking / web / index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hyper-booking</title>
  <link rel="stylesheet" href="web/css/app.css">
</head>
<body>
  <div class="container">
    <nav class="nav-bar">
      <span class="nav-logo">hyper-booking</span>
      <div class="nav-right">
        <a href="dashboard" class="btn btn-secondary" id="dashboard-link" style="display:none">Dashboard</a>
        <button class="btn btn-secondary" id="sign-in-btn">Sign In</button>
      </div>
    </nav>

    <section style="text-align:center;padding:4rem 0;">
      <h1 style="font-size:2.5rem;margin-bottom:1rem;">Book with confidence</h1>
      <p style="color:var(--text-secondary);font-size:1.1rem;max-width:500px;margin:0 auto 2rem;">
        Scheduling, payments, and client management for wellness professionals.
      </p>
    </section>

    <section>
      <h2 class="section-title">Providers</h2>
      <div id="provider-list"><p class="empty">Loading...</p></div>
    </section>

    <footer class="footer">
      <p>Powered by <strong>hyper-booking</strong></p>
    </footer>
  </div>

  <script src="web/js/identity.js"></script>
  <script src="web/js/app.js"></script>
  <script>
    (async function () {
      try {
        const res = await fetch('api/providers')
        const providers = await res.json()
        const list = document.getElementById('provider-list')

        if (providers.length === 0) {
          list.innerHTML = '<p class="empty">No providers yet.</p>'
          return
        }

        list.innerHTML = providers.map(function (p) {
          return '<div class="package-card" onclick="location.href=\'' + p.slug + '\'" style="cursor:pointer;">' +
            '<div class="package-info">' +
              '<h3 class="package-title">' + (p.displayName || '') + '</h3>' +
              '<div class="package-meta">' + (p.specialties || []).join(' · ') + '</div>' +
              '<p class="package-desc">' + ((p.bio || '').slice(0, 120)) + (p.bio && p.bio.length > 120 ? '...' : '') + '</p>' +
            '</div>' +
          '</div>'
        }).join('')
      } catch (err) {
        document.getElementById('provider-list').innerHTML = '<p class="empty">Could not load providers.</p>'
      }
    })()
  </script>
</body>
</html>