<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Boat Assistant OS — Version Server</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ocean-cyan:    #14CFE3;
      --marine-blue:   #0A78B7;
      --deep-ocean:    #003B78;
      --midnight-navy: #081A2E;
      --mist:          #F7FBFF;
      --color-border:  rgba(10, 120, 183, 0.15);
      --font-sans: 'Manrope', 'Avenir Next', -apple-system, system-ui, sans-serif;
    }

    body {
      font-family: var(--font-sans);
      background: var(--mist);
      color: var(--midnight-navy);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 48px 24px 64px;
    }

    header {
      text-align: center;
      margin-bottom: 48px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      margin-bottom: 24px;
    }

    .logo svg { width: 36px; height: 36px; }

    .logo-text {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--midnight-navy);
      letter-spacing: -0.01em;
    }

    h1 {
      font-size: clamp(1.5rem, 4vw, 2rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      background: linear-gradient(90deg, var(--marine-blue) 0%, var(--ocean-cyan) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 0.95rem;
      color: rgba(8, 26, 46, 0.55);
      font-weight: 500;
    }

    .channels {
      width: 100%;
      max-width: 680px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 48px;
    }

    .channel-card {
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      padding: 24px 28px;
      box-shadow: 0 4px 16px rgba(10, 120, 183, 0.08);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .channel-header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .channel-badge {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 9999px;
    }

    .channel-badge.stable {
      background: rgba(20, 207, 227, 0.12);
      color: #0A78B7;
    }

    .channel-badge.beta {
      background: rgba(10, 120, 183, 0.10);
      color: #003B78;
    }

    .channel-name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--midnight-navy);
    }

    .channel-url {
      font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
      font-size: 0.8rem;
      background: var(--mist);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 8px 14px;
      color: var(--marine-blue);
      text-decoration: none;
      display: block;
      word-break: break-all;
      transition: border-color 150ms ease, background 150ms ease;
    }

    .channel-url:hover {
      border-color: var(--ocean-cyan);
      background: #edf9fc;
    }

    .versions {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 8px;
    }

    .version-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .version-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(8, 26, 46, 0.45);
    }

    .version-value {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--midnight-navy);
    }

    footer {
      font-size: 0.8rem;
      color: rgba(8, 26, 46, 0.40);
      text-align: center;
    }

    footer a {
      color: var(--marine-blue);
      text-decoration: none;
    }

    footer a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <header>
    <a class="logo" href="https://boat-assistant.io">
      <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="36" height="36" rx="10" fill="#0A78B7"/>
        <path d="M7 24 L18 10 L29 24 Z" fill="none" stroke="#14CFE3" stroke-width="2.2" stroke-linejoin="round"/>
        <path d="M10 24 L26 24" stroke="white" stroke-width="2.2" stroke-linecap="round"/>
        <path d="M18 10 L18 24" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-dasharray="2 2"/>
      </svg>
      <span class="logo-text">Boat Assistant</span>
    </a>
    <h1>OS Version Server</h1>
    <p class="subtitle">Update channel manifests for Boat Assistant OS devices</p>
  </header>

  <div class="channels" id="channels">
    <div class="channel-card">
      <div class="channel-header">
        <span class="channel-badge stable">Stable</span>
        <span class="channel-name">stable.baos</span>
      </div>
      <a class="channel-url" href="/stable.baos.json"
         >https://version.boat-assistant.io/stable.baos.json</a>
      <div class="versions" id="stable-versions">
        <div class="version-item"><span class="version-label">Loading</span></div>
      </div>
    </div>

    <div class="channel-card">
      <div class="channel-header">
        <span class="channel-badge beta">Beta</span>
        <span class="channel-name">beta.baos</span>
      </div>
      <a class="channel-url" href="/beta.baos.json"
         >https://version.boat-assistant.io/beta.baos.json</a>
      <div class="versions" id="beta-versions">
        <div class="version-item"><span class="version-label">Loading</span></div>
      </div>
    </div>
  </div>

  <footer>
    <a href="https://boat-assistant.io">boat-assistant.io</a> &mdash;
    Served by <a href="https://marimotica.com">Marimotica</a>
  </footer>

  <script>
    async function loadChannel(file, containerId) {
      const container = document.getElementById(containerId);
      try {
        const res = await fetch('/' + file);
        const data = await res.json();
        const items = [
          { label: 'Operating System', value: data.hassos?.['rpi5-64'] ?? '—' },
          { label: 'HA Core',          value: data.homeassistant?.default ?? '—' },
          { label: 'Supervisor',       value: data.supervisor ?? '—' },
          { label: 'CLI',              value: data.cli ?? '—' },
          { label: 'DNS',              value: data.dns ?? '—' },
          { label: 'Audio',            value: data.audio ?? '—' },
        ];
        container.innerHTML = items.map(({ label, value }) => `
          <div class="version-item">
            <span class="version-label">${label}</span>
            <span class="version-value">${value}</span>
          </div>`).join('');
      } catch {
        container.innerHTML = '<div class="version-item"><span class="version-label" style="color:#c0392b">Failed to load</span></div>';
      }
    }

    loadChannel('stable.baos.json', 'stable-versions');
    loadChannel('beta.baos.json',   'beta-versions');
  </script>
</body>
</html>
