index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>chmonitor — launch films</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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: #09090b; color: #fafafa; font-family: 'Inter', system-ui, sans-serif; }
  body { min-height: 100vh; padding: 64px 32px 80px; max-width: 1280px; margin: 0 auto; }

  /* ── header ── */
  header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 64px; flex-wrap: wrap; gap: 16px; }
  .logo { display: flex; align-items: center; gap: 13px; }
  .logo-text { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
  .logo-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #f97316; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 3px; }
  .header-link { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(250,250,250,0.4); text-decoration: none; letter-spacing: 0.04em; transition: color 120ms; }
  .header-link:hover { color: rgba(250,250,250,0.75); }

  /* ── section title ── */
  .section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(250,250,250,0.35);
    margin-bottom: 24px;
  }

  /* ── grid ── */
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 24px; }
  @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } body { padding: 40px 16px 60px; } }

  /* ── video card ── */
  .vcard {
    border-radius: 20px;
    overflow: hidden;
    background: #111113;
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 32px 80px -20px rgba(0,0,0,0.7);
    transition: border-color 200ms, transform 200ms;
    cursor: pointer;
  }
  .vcard:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-3px); }

  /* video wrapper — 16:9 */
  .vcard-video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #0a0a0c;
    overflow: hidden;
  }
  .vcard-video-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* play overlay — fades out after video starts */
  .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.28);
    transition: opacity 300ms;
    pointer-events: none;
  }
  .play-overlay.hidden { opacity: 0; }
  .play-ring {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(249,115,22,0.18);
    border: 1.5px solid rgba(249,115,22,0.6);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
  }

  /* version chip in corner */
  .vcard-version-chip {
    position: absolute;
    top: 14px; left: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(249,115,22,0.85);
    padding: 5px 10px;
    border-radius: 6px;
    backdrop-filter: blur(6px);
    pointer-events: none;
  }

  /* duration chip in corner */
  .vcard-duration-chip {
    position: absolute;
    bottom: 14px; right: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.55);
    padding: 4px 9px;
    border-radius: 5px;
    backdrop-filter: blur(4px);
    pointer-events: none;
  }

  /* progress bar */
  .vcard-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    background: #f97316;
    width: 0%;
    transition: width 200ms linear;
    pointer-events: none;
  }

  /* card footer */
  .vcard-footer {
    padding: 20px 24px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .vcard-meta {}
  .vcard-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 5px; }
  .vcard-desc { font-size: 13px; color: rgba(250,250,250,0.50); line-height: 1.5; }

  .vcard-btns { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }
  .btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: opacity 120ms, background 120ms;
  }
  .btn:hover { opacity: 0.85; }
  .btn-primary { background: #f97316; color: #fff; }
  .btn-ghost {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(250,250,250,0.7);
  }

  /* ── footer ── */
  footer {
    margin-top: 72px;
    display: flex; align-items: center; justify-content: center; gap: 24px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: rgba(250,250,250,0.25); letter-spacing: 0.06em;
  }
  footer a { color: inherit; text-decoration: none; transition: color 120ms; }
  footer a:hover { color: rgba(250,250,250,0.55); }
  .footer-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(250,250,250,0.2); }
</style>
</head>
<body>

<header>
  <div class="logo">
    <svg width="34" height="34" viewBox="0 0 44 44">
      <rect x="9.3"  y="19.05" width="3.8" height="15.45" rx="0.7" fill="#f97316"/>
      <rect x="14.7" y="9.5"   width="3.8" height="25"    rx="0.7" fill="#f97316"/>
      <rect x="20.1" y="19.25" width="3.8" height="15.25" rx="0.7" fill="#f97316"/>
      <rect x="25.5" y="12.25" width="3.8" height="22.25" rx="0.7" fill="#f97316"/>
      <rect x="30.9" y="22.8"  width="3.8" height="11.7"  rx="0.7" fill="#f97316"/>
      <rect x="9.3"  y="15.75" width="3.8" height="3.3"   rx="0.7" fill="#10b981"/>
    </svg>
    <div>
      <div class="logo-text">chmonitor</div>
      <div class="logo-sub">launch films</div>
    </div>
  </div>
  <a class="header-link" href="https://github.com/chmonitor/launch">github.com/chmonitor/launch →</a>
</header>

<div class="section-label">All releases</div>

<div class="grid" id="grid">

  <div class="vcard" data-src="v0.3.3-remocn/chmonitor-v033-remocn-4k-launch.mp4">
    <div class="vcard-video-wrap">
      <video muted loop playsinline preload="metadata"></video>
      <div class="play-overlay">
        <div class="play-ring">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <path d="M5 3l11 6-11 6V3z" fill="#f97316"/>
          </svg>
        </div>
      </div>
      <div class="vcard-version-chip">v0.3.3</div>
      <div class="vcard-duration-chip">0:48</div>
      <div class="vcard-progress"></div>
    </div>
    <div class="vcard-footer">
      <div class="vcard-meta">
        <div class="vcard-title">Launch wrap — remocn</div>
        <div class="vcard-desc">Soft Blur In intro · v0.3 · native 3680×2160 main film · GitHub Stars · chmonitor.dev</div>
      </div>
      <div class="vcard-btns">
        <a class="btn btn-primary" download href="v0.3.3-remocn/chmonitor-v033-remocn-4k-launch.mp4" onclick="event.stopPropagation()">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1.5v6M3.5 5.5l2.5 2.5 2.5-2.5M1.5 10h9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
          MP4
        </a>
      </div>
    </div>
  </div>

  <div class="vcard" data-src="v0.3/chmonitor-v03-design-launch.mp4">
    <div class="vcard-video-wrap">
      <video muted loop playsinline preload="metadata"></video>
      <div class="play-overlay">
        <div class="play-ring">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <path d="M5 3l11 6-11 6V3z" fill="#f97316"/>
          </svg>
        </div>
      </div>
      <div class="vcard-version-chip">v0.3</div>
      <div class="vcard-duration-chip">0:28</div>
      <div class="vcard-progress"></div>
    </div>
    <div class="vcard-footer">
      <div class="vcard-meta">
        <div class="vcard-title">Full rebuild launch film</div>
        <div class="vcard-desc">TanStack Start · AI agent · query monitoring · data explorer · topology · health &amp; audit · 13 scenes</div>
      </div>
      <div class="vcard-btns">
        <a class="btn btn-primary" href="v0.3/src/" onclick="event.stopPropagation()">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 1.5l8 4.5-8 4.5V1.5z" fill="currentColor"/></svg>
          Player
        </a>
        <a class="btn btn-ghost" download href="v0.3/chmonitor-v03-design-launch.mp4" onclick="event.stopPropagation()">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 1.5v6M3.5 5.5l2.5 2.5 2.5-2.5M1.5 10h9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
          MP4
        </a>
      </div>
    </div>
  </div>

</div>

<footer>
  <a href="https://chmonitor.dev">chmonitor.dev</a>
  <div class="footer-dot"></div>
  <a href="https://github.com/chmonitor/chmonitor">github.com/chmonitor/chmonitor</a>
  <div class="footer-dot"></div>
  <a href="https://github.com/chmonitor/launch">source</a>
</footer>

<script>
  // Wire up each video card: hover to play, progress bar, click to open player
  document.querySelectorAll('.vcard').forEach(card => {
    const src = card.dataset.src
    const video = card.querySelector('video')
    const overlay = card.querySelector('.play-overlay')
    const progress = card.querySelector('.vcard-progress')

    video.src = src

    // Play on hover
    card.addEventListener('mouseenter', () => {
      video.play().catch(() => {})
      overlay.classList.add('hidden')
    })
    card.addEventListener('mouseleave', () => {
      video.pause()
      video.currentTime = 0
      overlay.classList.remove('hidden')
      progress.style.width = '0%'
    })

    // Progress bar
    video.addEventListener('timeupdate', () => {
      if (!video.duration) return
      progress.style.width = (video.currentTime / video.duration * 100) + '%'
    })

    // Click card body → open player
    card.addEventListener('click', (e) => {
      if (e.target.closest('a')) return
      const playerHref = card.querySelector('.btn-primary').getAttribute('href')
      window.location.href = playerHref
    })
  })
</script>

</body>
</html>