Show Google Calendar screenshots on the site and in the README

README.md

@@ -10,6 +10,17 @@ and scrub shows up in your calendar, in your own time zone.
 
 **Unofficial.** Not affiliated with, endorsed by, or connected to SpaceX.
 
+<table>
+  <tr>
+    <td width="58%"><img src="site/img/screens/google-event.jpg" alt="Google Calendar showing the Falcon 9 Crew-13 event with time, pad, status, booster, spacecraft, crew, orbit and webcast link"></td>
+    <td width="42%"><img src="site/img/screens/google-agenda.jpg" alt="Google Calendar schedule on a phone listing upcoming Falcon 9 and Falcon Heavy launches with local times"></td>
+  </tr>
+  <tr>
+    <td>Every launch carries the details: time, pad, booster and landing, crew, webcast.</td>
+    <td>Upcoming launches on your phone, in your time zone.</td>
+  </tr>
+</table>
+
 ## Subscribe
 
 | Calendar | What's in it | Google Calendar | Apple Calendar, Outlook, others (ICS) |
@@ -74,7 +85,7 @@ only print the changes, and `--calendar all=<calendarId>` to sync one calendar i
 | `src/event.ts` | Event text and timing, shared by ICS and Google |
 | `src/ics.ts`, `src/build.ts` | ICS writer and build entry point |
 | `src/gcal.ts`, `src/google.ts`, `src/sync.ts` | Google Calendar diff, API client and sync entry point |
-| `src/page.ts`, `src/page.html`, `site/` | Website template and static assets |
+| `src/page.ts`, `src/page.html`, `site/` | Website template and static assets (`site/img/screens/` holds the screenshots) |
 
 ## Data and credits
 

site/style.css

@@ -256,6 +256,51 @@ footer {
   border-top: 1px solid var(--line);
 }
 
+.preview {
+  padding: 72px 0;
+  border-top: 1px solid var(--line);
+}
+
+.shots {
+  display: grid;
+  gap: 24px;
+}
+
+.shots figure {
+  margin: 0;
+}
+
+.shots img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.shots figcaption,
+.shots-note {
+  margin-top: 10px;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.shots-note {
+  margin: 24px 0 0;
+  font-size: 0.85rem;
+}
+
+@media (min-width: 900px) {
+  .shots {
+    grid-template-columns: 3fr 2fr;
+    align-items: start;
+  }
+
+  .shot-main {
+    grid-row: span 2;
+  }
+}
+
 .cards {
   display: grid;
   gap: 16px;

src/page.html

@@ -35,6 +35,25 @@ <h2 id="next-heading">Next launch</h2>
   </header>
 
   <main>
+    <section class="preview">
+      <h2>What it looks like</h2>
+      <div class="shots">
+        <figure class="shot-main">
+          <img src="img/screens/google-event.jpg" width="800" height="560" loading="lazy" alt="Google Calendar showing the Falcon 9 Crew-13 event: launch time, pad, status, booster, spacecraft, crew, orbit and webcast link.">
+          <figcaption>Every launch carries the details: time, pad, booster and landing, crew, webcast.</figcaption>
+        </figure>
+        <figure>
+          <img src="img/screens/google-agenda.jpg" width="780" height="800" loading="lazy" alt="Google Calendar schedule on a phone listing upcoming Falcon 9 and Falcon Heavy launches with their local times.">
+          <figcaption>Upcoming launches on your phone, in your time zone.</figcaption>
+        </figure>
+        <figure>
+          <img src="img/screens/google-week.jpg" width="800" height="560" loading="lazy" alt="Google Calendar week view with Starship and Falcon 9 launches as one-hour events.">
+          <figcaption>Launches sit in your week next to everything else, marked as free time.</figcaption>
+        </figure>
+      </div>
+      <p class="shots-note">Screenshots of the public Google calendar, October 2026, with colours inverted to match this page.</p>
+    </section>
+
     <section class="calendars" id="calendars">
       <h2>Pick a calendar</h2>
       <div class="cards">