<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Member Calendar</title>
<style>
:root { --bg:#fff; --text:#111; --muted:#4b5563; --line:#e5e7eb; --blue:#2563eb; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:#f8fafc; color:var(--text); }
.wrap { max-width:860px; margin:16px auto; padding:8px; }
.card { background:var(--bg); border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.04); padding:20px; }
h2 { font-size:22px; margin:0 0 6px; }
p.sub { margin:0 0 16px; color:var(--muted); font-size:14px; }
.btns { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; padding:10px 14px; border-radius:12px; text-decoration:none; color:#fff; }
.gcal { background:#111; }
.apple { background:#1f2937; }
.outlook { background:#2563eb; }
.o365 { background:#1d4ed8; }
.preview { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
iframe { border:0; width:100%; height:560px; }
.note { font-size:12px; color:#6b7280; margin-top:8px; }
@media (max-width:640px){ iframe{ height:450px; } }
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<h2>Member Calendar</h2>
<p class="sub">Subscribe with one click. Works on Google, Apple, and Outlook.</p>
<!-- Public ICS feed -->
<!-- https://calendar.google.com/calendar/ical/c_dk9jmvnbb55sbqpm6tmbtjr81o%40group.calendar.google.com/public/basic.ics -->
<div class="btns">
<!-- Google -->
<a class="btn gcal" href="https://calendar.google.com/calendar/r?cid=https%3A%2F%2Fcalendar.google.com%2Fcalendar%2Fical%2Fc_dk9jmvnbb55sbqpm6tmbtjr81o%2540group.calendar.google.com%2Fpublic%2Fbasic.ics" target="_blank" rel="noreferrer">Add to Google</a>
<!-- Apple -->
<a class="btn apple" href="webcal://calendar.google.com/calendar/ical/c_dk9jmvnbb55sbqpm6tmbtjr81o%40group.calendar.google.com/public/basic.ics">Add to Apple</a>
<!-- Outlook consumer -->
<a class="btn outlook" href="https://outlook.live.com/owa/?path=/calendar/action/subscribe&url=https%3A%2F%2Fcalendar.google.com%2Fcalendar%2Fical%2Fc_dk9jmvnbb55sbqpm6tmbtjr81o%2540group.calendar.google.com%2Fpublic%2Fbasic.ics" target="_blank" rel="noreferrer">Add to Outlook</a>
<!-- Outlook 365 -->
<a class="btn o365" href="https://outlook.office.com/calendar/0/addbyurl?url=https%3A%2F%2Fcalendar.google.com%2Fcalendar%2Fical%2Fc_dk9jmvnbb55sbqpm6tmbtjr81o%2540group.calendar.google.com%2Fpublic%2Fbasic.ics" target="_blank" rel="noreferrer">Outlook 365</a>
</div>
<!-- Agenda preview -->
<div class="preview">
<iframe
title="Upcoming events"
src="https://calendar.google.com/calendar/embed?mode=AGENDA&showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&wkst=1&ctz=America%2FNew_York&src=c_dk9jmvnbb55sbqpm6tmbtjr81o%40group.calendar.google.com">
</iframe>
</div>
<div class="note">Agenda view shows upcoming events.</div>
</div>
</div>
</body>
</html>