feat(screenshots): v0.14.0 shots, version-history slider, lighter page

_data/screenshots.yml

@@ -0,0 +1,103 @@
+# Screenshots page data (rendered by screenshots.pug).
+#
+# `src` is relative to /img/screenshots/; a downscaled copy for display lives at
+# /img/screenshots/web/<src with / replaced by _>.webp, and the full PNG is linked.
+#
+# latest: regenerate with `scripts/screenshots.py` in ActivityWatch/activitywatch
+# (demo data, isolated server), then move the previous `latest` shots into
+# `evolution` so the history keeps growing.
+
+latest:
+  version: v0.14.0
+  shots:
+    - {title: Activity, src: v0.14.0/activity-day.png, dark: v0.14.0/activity-day-dark.png, note: One day across all your devices}
+    - {title: Activity (year), src: v0.14.0/activity-year.png, dark: v0.14.0/activity-year-dark.png, note: "A whole year, back in under a second once cached"}
+    - {title: Activity (week), src: v0.14.0/activity-week.png, dark: v0.14.0/activity-week-dark.png}
+    - {title: Activity (month), src: v0.14.0/activity-month.png, dark: v0.14.0/activity-month-dark.png}
+    - {title: Browser activity, src: v0.14.0/activity-browser.png, dark: v0.14.0/activity-browser-dark.png}
+    - {title: Timeline, src: v0.14.0/timeline.png, dark: v0.14.0/timeline-dark.png, note: Every device on one timeline}
+    - {title: Search, src: v0.14.0/search.png, dark: v0.14.0/search-dark.png}
+    - {title: Query explorer, src: v0.14.0/query.png, dark: v0.14.0/query-dark.png}
+    - {title: Stopwatch, src: v0.14.0/stopwatch.png, dark: v0.14.0/stopwatch-dark.png}
+    - {title: Categorization, src: v0.14.0/categorization.png, dark: v0.14.0/categorization-dark.png, note: Rules that sort your time into categories}
+    - {title: Settings, src: v0.14.0/settings.png, dark: v0.14.0/settings-dark.png}
+    - {title: Buckets, src: v0.14.0/buckets.png, dark: v0.14.0/buckets-dark.png, note: Raw data from each watcher and device}
+
+# One entry per view, oldest first. Each shot is that view as it looked in a version.
+evolution:
+  - view: Activity
+    shots:
+      - version: v0.8.0dev
+        year: 2018
+        src: screenshot-v0.8.0dev-activity.png
+      - version: v0.8.0b9
+        year: 2019
+        src: screenshot-v0.8.0b9-today.png
+        note: The “Today” view, before it became Activity
+      - version: v0.9.3
+        year: 2020
+        src: screenshot-v0.9.3-activity.png
+      - version: v0.12.0b2
+        year: 2022
+        src: BelKed/screenshot-v0.12.0b2-activity.png
+        by: BelKed
+        note: Dark mode
+      - version: v0.12
+        year: 2023
+        src: realhyperchango/activity-productivity.png
+        by: realhyperchango
+        note: Productivity categories
+      - version: v0.14.0b8
+        year: 2026
+        src: screenshot-v0.14.0b8-aw-tauri-activity.png
+        note: The new Tauri app
+      - version: v0.14.0
+        year: 2026
+        src: v0.14.0/activity-day.png
+        note: Multi-device, with demo data
+  - view: Timeline
+    shots:
+      - version: v0.8.0b9
+        year: 2019
+        src: screenshot-v0.8.0b9-timeline.png
+      - version: v0.12
+        year: 2023
+        src: thelifeimliving/timeline-dark.png
+        by: thelifeimliving
+        note: Dark mode
+      - version: v0.14.0
+        year: 2026
+        src: v0.14.0/timeline.png
+        note: Multi-device, with demo data
+
+# Screenshot competition entries (github.com/ActivityWatch/activitywatch/discussions/741).
+community:
+  version: v0.12
+  shots:
+    - title: Activity
+      src: [thelifeimliving/activity.png]
+      by: thelifeimliving
+    - title: Activity with productivity categories
+      src: [realhyperchango/activity-productivity.png]
+      by: realhyperchango
+    - title: Activity (dark)
+      src: [BelKed/screenshot-v0.12.0b2-activity.png]
+      by: BelKed
+    - title: Timeline (dark)
+      src: [thelifeimliving/timeline-dark.png]
+      by: thelifeimliving
+    - title: Month view
+      src: [maholli/month.png]
+      by: maholli
+    - title: Search
+      src: [thelifeimliving/search.png]
+      by: thelifeimliving
+    - title: Stopwatch
+      src: [thelifeimliving/stopwatch.png, thelifeimliving/stopwatch-dark.png]
+      by: thelifeimliving
+    - title: Query explorer
+      src: [thelifeimliving/query-explorer.png, thelifeimliving/query-explorer-dark.png]
+      by: thelifeimliving
+    - title: Settings
+      src: [thelifeimliving/settings.png, thelifeimliving/settings-dark.png]
+      by: thelifeimliving

_includes/schema-index.html

@@ -22,7 +22,7 @@
     "dateCreated": "2016-06-10",
     "downloadUrl": "https://activitywatch.net/downloads/",
     "softwareHelp": "https://docs.activitywatch.net/en/latest/getting-started.html#installation",
-    "screenshot": "https://activitywatch.net/img/screenshots/screenshot-v0.9.3-activity.png",
+    "screenshot": "https://activitywatch.net/img/screenshots/v0.14.0/activity-day.png",
     "inLanguage": "en",
     "featureList": [
         "Application and window tracking",

index.pug

@@ -71,12 +71,12 @@ div.container
     // Move the column to be the first one on small screens
     .col-md-4.order-first.order-md-last
       h4 Screenshots
-      a(href='/img/screenshots/screenshot-v0.9.3-activity.png')
+      a(href='/img/screenshots/v0.14.0/activity-day-full.png')
         figure(style='width: 100%; border: 1px #999 solid; border-radius: 2px')
-          img(style='width: 100%' src='/img/screenshots/screenshot-v0.9.3-activity.png' alt='Screenshot of the ActivityWatch Web App Dashboard showing the activity usage of a user.')
-      a(href='/img/screenshots/screenshot-v0.8.0b9-timeline.png')
+          img(style='width: 100%' src='/img/screenshots/web/v0.14.0_activity-day-full.webp' alt='The ActivityWatch Activity view: a day across three devices, with top applications, window titles, categories and an hourly timeline.')
+      a(href='/img/screenshots/v0.14.0/timeline.png')
         figure.mb-0(style='width: 100%; border: 1px #999 solid; border-radius: 2px')
-          img(style='width: 100%' src='/img/screenshots/screenshot-v0.8.0b9-timeline.png' alt='Screenshot of the ActivityWatch Web App Dashboard showing the activity timeline of a user.')
+          img(style='width: 100%' src='/img/screenshots/web/v0.14.0_timeline.webp' alt='The ActivityWatch Timeline view: one day of window, browser and AFK events from three devices.')
       a.mt-0.small(href="/screenshots/")
         i More screenshots here
 

screenshots.pug

@@ -3,127 +3,121 @@ title: Screenshots
 layout: page
 permalink: /screenshots/
 toc: true
-excerpt: "Some screenshots of ActivityWatch, listed in reverse chronological order (recent first)."
+excerpt: "Screenshots of the latest ActivityWatch, how it has changed over the years, and community favourites."
 container_class: container
 ---
 
 style
-  | .row img {
-  |    margin-bottom: 1rem;
-  |    border-radius: 0.25rem;
-  |    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
-  |    border: 1px solid rgba(0, 0, 0, 0.1);
+  | .shots img {
+  |   margin-bottom: 0.5rem;
+  |   border-radius: 0.25rem;
+  |   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
+  |   border: 1px solid rgba(0, 0, 0, 0.1);
+  |   max-width: 100%;
+  |   height: auto;
   | }
-  | h4 {
-  |   padding-top: 1rem !important;
-  | }
-  | .small {
-  |   font-style: italic;
+  | .shots h4 { padding-top: 1rem; }
+  | .shots .small { font-style: italic; margin-bottom: 1rem; }
+  | .evo { margin-bottom: 2.5rem; }
+  | .evo-frame { aspect-ratio: 4 / 3; background: rgba(0, 0, 0, 0.03); border-radius: 0.25rem; }
+  | .evo-frame a, .evo-frame img { display: block; width: 100%; height: 100%; }
+  | .evo-frame img { object-fit: contain; object-position: top center; box-shadow: none; border: 0; }
+  | .evo input[type=range] { width: 100%; margin: 0.75rem 0 0.25rem; }
+  | .evo-versions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+  | .evo-versions button {
+  |   border: 1px solid rgba(0, 0, 0, 0.15);
+  |   background: transparent;
+  |   border-radius: 1rem;
+  |   padding: 0.1rem 0.6rem;
+  |   font-size: 0.85rem;
+  |   cursor: pointer;
+  |   color: inherit;
   | }
+  | .evo-versions button[aria-pressed=true] { background: #2c3e50; border-color: #2c3e50; color: #fff; }
+  | .evo-caption { min-height: 1.5rem; margin-top: 0.5rem; }
 
 p
   | {{ page.excerpt }}
 
-p
-  | Your screenshots could be here too. Join our #[a(href="https://github.com/ActivityWatch/activitywatch/discussions/741") screenshot competition]!
-
-p.py-2
-  h3 v0.12.0
-
-  .row
-    .col-md-6
-      h4 Activity
-      a(href="/img/screenshots/thelifeimliving/activity.png")
-        img(src="/img/screenshots/thelifeimliving/activity.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the activity feature." width="100%")
-      .small By @thelifeimliving
-
-    .col-md-6
-      h4 Activity with productivity categories
-      a(href="/img/screenshots/realhyperchango/activity-productivity.png")
-        img(src="/img/screenshots/realhyperchango/activity-productivity.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the productivity categories feature." width="100%")
-      .small By @realhyperchango
-
-    .col-md-6
-      h4 Activity (dark)
-      a(href="/img/screenshots/BelKed/screenshot-v0.12.0b2-activity.png")
-        img(src="/img/screenshots/BelKed/screenshot-v0.12.0b2-activity.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the Dark mode feature." width="100%")
-      .small By @BelKed
-
-    .col-md-6
-      h4 Timeline (dark)
-      a(href="/img/screenshots/thelifeimliving/timeline-dark.png")
-        img(src="/img/screenshots/thelifeimliving/timeline-dark.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the timeline feature." width="100%")
-      .small By @thelifeimliving
-
-    .col-md-6
-      h4 Month view
-      a(href="/img/screenshots/maholli/month.png")
-        img(src="/img/screenshots/maholli/month.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the monthly timeline feature." width="100%")
-      .small By @maholli
-
-    .col-md-6
-      h4 Search
-      a(href="/img/screenshots/thelifeimliving/search.png")
-        img(src="/img/screenshots/thelifeimliving/search.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the search feature." width="100%")
-      .small By @thelifeimliving
-
-  .row
-    .col-md-12
-      h4 Stopwatch
-    .col-md-6
-      a(href="/img/screenshots/thelifeimliving/stopwatch.png")
-        img(src="/img/screenshots/thelifeimliving/stopwatch.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the Stopwatch feature." width="100%")
-    .col-md-6
-      a(href="/img/screenshots/thelifeimliving/stopwatch-dark.png")
-        img(src="/img/screenshots/thelifeimliving/stopwatch-dark.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the Stopwatch(dark mode) feature." width="100%")
-    .col-md-12
-      .small By @thelifeimliving
-
+.shots
+  | {% assign latest = site.data.screenshots.latest %}
+  | {% if latest.shots.size > 0 %}
+  h3#latest Latest ({{ latest.version }})
   .row
-    .col-md-12
-      h4 Query explorer
+    | {% for s in latest.shots %}
     .col-md-6
-      a(href="/img/screenshots/thelifeimliving/query-explorer.png")
-        img(src="/img/screenshots/thelifeimliving/query-explorer.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the Query explorer feature." width="100%")
-    .col-md-6
-      a(href="/img/screenshots/thelifeimliving/query-explorer-dark.png")
-        img(src="/img/screenshots/thelifeimliving/query-explorer-dark.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the Query explorer(dark mode) feature." width="100%")
-    .col-md-12
-      .small By @thelifeimliving
-
+      h4 {{ s.title | escape }}
+      a(href!="/img/screenshots/{{ s.src }}")
+        img(src!="/img/screenshots/web/{{ s.src | replace: '/', '_' | replace: '.png', '.webp' }}" alt!="ActivityWatch {{ latest.version }}: {{ s.title | escape }}" loading="lazy" width="100%")
+      .small
+        | {% if s.note %}{{ s.note | escape }}{% endif %}
+        | {% if s.dark %}{% if s.note %} · {% endif %}#[a(href!="/img/screenshots/{{ s.dark }}") dark mode]{% endif %}
+    | {% endfor %}
+  | {% endif %}
+
+  h3#evolution.pt-4 How it has evolved
+  p Drag the slider to see each view across versions, from the first releases to today.
+
+  | {% for e in site.data.screenshots.evolution %}
+  | {% assign last = e.shots.size | minus: 1 %}
+  | {% assign cur = e.shots | last %}
+  .evo(data-evo)
+    h4 {{ e.view }}
+    .evo-frame
+      a(href!="/img/screenshots/{{ cur.src }}" data-evo-link)
+        img(src!="/img/screenshots/web/{{ cur.src | replace: '/', '_' | replace: '.png', '.webp' }}" alt!="The {{ e.view }} view in ActivityWatch {{ cur.version }}" data-evo-img)
+    input(type="range" min="0" max!="{{ last }}" value!="{{ last }}" step="1" aria-label!="Version of the {{ e.view }} view" aria-valuetext!="{{ cur.version }} ({{ cur.year }})" data-evo-range)
+    .evo-versions
+      | {% for s in e.shots %}
+      button(type="button" aria-pressed!="{% if forloop.last %}true{% else %}false{% endif %}" data-i!="{{ forloop.index0 }}" data-src!="{{ s.src }}" data-web!="/img/screenshots/web/{{ s.src | replace: '/', '_' | replace: '.png', '.webp' }}" data-version!="{{ s.version }}" data-year!="{{ s.year }}" data-caption!="{{ s.version }} ({{ s.year }}){% if s.note %} · {{ s.note | escape }}{% endif %}{% if s.by %} · by @{{ s.by }}{% endif %}") {{ s.version }}
+      | {% endfor %}
+    .evo-caption.small(data-evo-caption) {{ cur.version }} ({{ cur.year }}){% if cur.note %} · {{ cur.note | escape }}{% endif %}{% if cur.by %} · by @{{ cur.by }}{% endif %}
+  | {% endfor %}
+
+  | {% assign community = site.data.screenshots.community %}
+  h3#community.pt-4 From the community ({{ community.version }})
+  p
+    | Winners of our #[a(href="https://github.com/ActivityWatch/activitywatch/discussions/741") screenshot competition]. Thank you!
   .row
+    | {% for s in community.shots %}
+    | {% if s.src.size > 1 %}
     .col-md-12
-      h4 Settings
+      h4 {{ s.title | escape }}
+    | {% for src in s.src %}
     .col-md-6
-      a(href="/img/screenshots/thelifeimliving/settings.png")
-        img(src="/img/screenshots/thelifeimliving/settings.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the settings." width="100%")
-    .col-md-6
-      a(href="/img/screenshots/thelifeimliving/settings-dark.png")
-        img(src="/img/screenshots/thelifeimliving/settings-dark.png" alt="Screenshot of the ActivityWatch Web App Dashboard showing the settings(dark mode)." width="100%")
+      a(href!="/img/screenshots/{{ src }}")
+        img(src!="/img/screenshots/web/{{ src | replace: '/', '_' | replace: '.png', '.webp' }}" alt!="ActivityWatch {{ community.version }}: {{ s.title | escape }}" loading="lazy" width="100%")
+    | {% endfor %}
     .col-md-12
-      .small By @thelifeimliving
-
-
-p.py-2
-  h3 v0.9.3
-
-  .row
-    .col-md-6
-      h4 Activity
-      a(href="/img/screenshots/screenshot-v0.9.3-activity.png")
-        img(src="/img/screenshots/screenshot-v0.9.3-activity.png" alt="Screenshot of the ActivityWatch Web App Dashboard of version 0.9.3." width="100%")
-
-p.py-2
-  h3 v0.8.0
-  Released
-
-  .row
-    .col-md-6
-      h4 Today (old Activity view)
-      a(href="/img/screenshots/screenshot-v0.8.0b9-today.png")
-        img(src="/img/screenshots/screenshot-v0.8.0b9-today.png" alt="Screenshot of the ActivityWatch Web App Dashboard of version 0.8.0(older version)." width="100%")
-
+      .small By @{{ s.by }}
+    | {% else %}
     .col-md-6
-      h4 Timeline
-      a(href="/img/screenshots/screenshot-v0.8.0b9-timeline.png")
-        img(src="/img/screenshots/screenshot-v0.8.0b9-timeline.png" alt="Screenshot of the ActivityWatch Web App Dashboard of version 0.8.0(older version)." width="100%")
+      h4 {{ s.title | escape }}
+      a(href!="/img/screenshots/{{ s.src[0] }}")
+        img(src!="/img/screenshots/web/{{ s.src[0] | replace: '/', '_' | replace: '.png', '.webp' }}" alt!="ActivityWatch {{ community.version }}: {{ s.title | escape }}" loading="lazy" width="100%")
+      .small By @{{ s.by }}
+    | {% endif %}
+    | {% endfor %}
+
+script.
+  document.querySelectorAll('[data-evo]').forEach(function (evo) {
+    var range = evo.querySelector('[data-evo-range]');
+    var img = evo.querySelector('[data-evo-img]');
+    var link = evo.querySelector('[data-evo-link]');
+    var caption = evo.querySelector('[data-evo-caption]');
+    var buttons = evo.querySelectorAll('.evo-versions button');
+    // Preload so dragging the slider doesn't flash.
+    buttons.forEach(function (b) { new Image().src = b.dataset.web; });
+    function show(i) {
+      var b = buttons[i];
+      img.src = b.dataset.web;
+      img.alt = img.alt.replace(/ActivityWatch \S+$/, 'ActivityWatch ' + b.dataset.version);
+      link.href = '/img/screenshots/' + b.dataset.src;
+      caption.textContent = b.dataset.caption;
+      range.value = i;
+      range.setAttribute('aria-valuetext', b.dataset.version + ' (' + b.dataset.year + ')');
+      buttons.forEach(function (o, j) { o.setAttribute('aria-pressed', j === i ? 'true' : 'false'); });
+    }
+    range.addEventListener('input', function () { show(Number(range.value)); });
+    buttons.forEach(function (b) { b.addEventListener('click', function () { show(Number(b.dataset.i)); }); });
+  });