diff --git a/_data/screenshots.yml b/_data/screenshots.yml new file mode 100644 index 00000000..71861137 --- /dev/null +++ b/_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/.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 diff --git a/_includes/schema-index.html b/_includes/schema-index.html index 6f50f521..115f28da 100644 --- a/_includes/schema-index.html +++ b/_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", diff --git a/img/screenshots/v0.14.0/activity-browser-dark.png b/img/screenshots/v0.14.0/activity-browser-dark.png new file mode 100644 index 00000000..1697ef0f Binary files /dev/null and b/img/screenshots/v0.14.0/activity-browser-dark.png differ diff --git a/img/screenshots/v0.14.0/activity-browser.png b/img/screenshots/v0.14.0/activity-browser.png new file mode 100644 index 00000000..bba987b4 Binary files /dev/null and b/img/screenshots/v0.14.0/activity-browser.png differ diff --git a/img/screenshots/v0.14.0/activity-day-dark.png b/img/screenshots/v0.14.0/activity-day-dark.png new file mode 100644 index 00000000..4491494d Binary files /dev/null and b/img/screenshots/v0.14.0/activity-day-dark.png differ diff --git a/img/screenshots/v0.14.0/activity-day-full-dark.png b/img/screenshots/v0.14.0/activity-day-full-dark.png new file mode 100644 index 00000000..779e8273 Binary files /dev/null and b/img/screenshots/v0.14.0/activity-day-full-dark.png differ diff --git a/img/screenshots/v0.14.0/activity-day-full.png b/img/screenshots/v0.14.0/activity-day-full.png new file mode 100644 index 00000000..a1ba68da Binary files /dev/null and b/img/screenshots/v0.14.0/activity-day-full.png differ diff --git a/img/screenshots/v0.14.0/activity-day.png b/img/screenshots/v0.14.0/activity-day.png new file mode 100644 index 00000000..8fc2abee Binary files /dev/null and b/img/screenshots/v0.14.0/activity-day.png differ diff --git a/img/screenshots/v0.14.0/activity-month-dark.png b/img/screenshots/v0.14.0/activity-month-dark.png new file mode 100644 index 00000000..fae0bf1a Binary files /dev/null and b/img/screenshots/v0.14.0/activity-month-dark.png differ diff --git a/img/screenshots/v0.14.0/activity-month.png b/img/screenshots/v0.14.0/activity-month.png new file mode 100644 index 00000000..6863b4ee Binary files /dev/null and b/img/screenshots/v0.14.0/activity-month.png differ diff --git a/img/screenshots/v0.14.0/activity-week-dark.png b/img/screenshots/v0.14.0/activity-week-dark.png new file mode 100644 index 00000000..44d10c8b Binary files /dev/null and b/img/screenshots/v0.14.0/activity-week-dark.png differ diff --git a/img/screenshots/v0.14.0/activity-week.png b/img/screenshots/v0.14.0/activity-week.png new file mode 100644 index 00000000..04bed78b Binary files /dev/null and b/img/screenshots/v0.14.0/activity-week.png differ diff --git a/img/screenshots/v0.14.0/activity-year-dark.png b/img/screenshots/v0.14.0/activity-year-dark.png new file mode 100644 index 00000000..2fb4737a Binary files /dev/null and b/img/screenshots/v0.14.0/activity-year-dark.png differ diff --git a/img/screenshots/v0.14.0/activity-year.png b/img/screenshots/v0.14.0/activity-year.png new file mode 100644 index 00000000..33d8dc17 Binary files /dev/null and b/img/screenshots/v0.14.0/activity-year.png differ diff --git a/img/screenshots/v0.14.0/buckets-dark.png b/img/screenshots/v0.14.0/buckets-dark.png new file mode 100644 index 00000000..62f81abd Binary files /dev/null and b/img/screenshots/v0.14.0/buckets-dark.png differ diff --git a/img/screenshots/v0.14.0/buckets.png b/img/screenshots/v0.14.0/buckets.png new file mode 100644 index 00000000..60e7f1d8 Binary files /dev/null and b/img/screenshots/v0.14.0/buckets.png differ diff --git a/img/screenshots/v0.14.0/categorization-dark.png b/img/screenshots/v0.14.0/categorization-dark.png new file mode 100644 index 00000000..63311f96 Binary files /dev/null and b/img/screenshots/v0.14.0/categorization-dark.png differ diff --git a/img/screenshots/v0.14.0/categorization.png b/img/screenshots/v0.14.0/categorization.png new file mode 100644 index 00000000..fa03b4bb Binary files /dev/null and b/img/screenshots/v0.14.0/categorization.png differ diff --git a/img/screenshots/v0.14.0/query-dark.png b/img/screenshots/v0.14.0/query-dark.png new file mode 100644 index 00000000..b9a2675a Binary files /dev/null and b/img/screenshots/v0.14.0/query-dark.png differ diff --git a/img/screenshots/v0.14.0/query.png b/img/screenshots/v0.14.0/query.png new file mode 100644 index 00000000..8c9ee225 Binary files /dev/null and b/img/screenshots/v0.14.0/query.png differ diff --git a/img/screenshots/v0.14.0/search-dark.png b/img/screenshots/v0.14.0/search-dark.png new file mode 100644 index 00000000..d76fc57c Binary files /dev/null and b/img/screenshots/v0.14.0/search-dark.png differ diff --git a/img/screenshots/v0.14.0/search.png b/img/screenshots/v0.14.0/search.png new file mode 100644 index 00000000..26972548 Binary files /dev/null and b/img/screenshots/v0.14.0/search.png differ diff --git a/img/screenshots/v0.14.0/settings-dark.png b/img/screenshots/v0.14.0/settings-dark.png new file mode 100644 index 00000000..6b3b8965 Binary files /dev/null and b/img/screenshots/v0.14.0/settings-dark.png differ diff --git a/img/screenshots/v0.14.0/settings.png b/img/screenshots/v0.14.0/settings.png new file mode 100644 index 00000000..d69b02a5 Binary files /dev/null and b/img/screenshots/v0.14.0/settings.png differ diff --git a/img/screenshots/v0.14.0/stopwatch-dark.png b/img/screenshots/v0.14.0/stopwatch-dark.png new file mode 100644 index 00000000..1f727928 Binary files /dev/null and b/img/screenshots/v0.14.0/stopwatch-dark.png differ diff --git a/img/screenshots/v0.14.0/stopwatch.png b/img/screenshots/v0.14.0/stopwatch.png new file mode 100644 index 00000000..1a3da353 Binary files /dev/null and b/img/screenshots/v0.14.0/stopwatch.png differ diff --git a/img/screenshots/v0.14.0/timeline-dark.png b/img/screenshots/v0.14.0/timeline-dark.png new file mode 100644 index 00000000..a8949931 Binary files /dev/null and b/img/screenshots/v0.14.0/timeline-dark.png differ diff --git a/img/screenshots/v0.14.0/timeline.png b/img/screenshots/v0.14.0/timeline.png new file mode 100644 index 00000000..1df20a68 Binary files /dev/null and b/img/screenshots/v0.14.0/timeline.png differ diff --git a/img/screenshots/web/BelKed_screenshot-v0.12.0b2-activity-full.webp b/img/screenshots/web/BelKed_screenshot-v0.12.0b2-activity-full.webp new file mode 100644 index 00000000..3f6aa66b Binary files /dev/null and b/img/screenshots/web/BelKed_screenshot-v0.12.0b2-activity-full.webp differ diff --git a/img/screenshots/web/BelKed_screenshot-v0.12.0b2-activity.webp b/img/screenshots/web/BelKed_screenshot-v0.12.0b2-activity.webp new file mode 100644 index 00000000..5ffabb05 Binary files /dev/null and b/img/screenshots/web/BelKed_screenshot-v0.12.0b2-activity.webp differ diff --git a/img/screenshots/web/maholli_month.webp b/img/screenshots/web/maholli_month.webp new file mode 100644 index 00000000..16e25ee6 Binary files /dev/null and b/img/screenshots/web/maholli_month.webp differ diff --git a/img/screenshots/web/realhyperchango_activity-productivity.webp b/img/screenshots/web/realhyperchango_activity-productivity.webp new file mode 100644 index 00000000..f5fbc2ad Binary files /dev/null and b/img/screenshots/web/realhyperchango_activity-productivity.webp differ diff --git a/img/screenshots/web/screenshot-v0.14.0b8-aw-tauri-activity.webp b/img/screenshots/web/screenshot-v0.14.0b8-aw-tauri-activity.webp new file mode 100644 index 00000000..223533b4 Binary files /dev/null and b/img/screenshots/web/screenshot-v0.14.0b8-aw-tauri-activity.webp differ diff --git a/img/screenshots/web/screenshot-v0.8.0b9-timeline.webp b/img/screenshots/web/screenshot-v0.8.0b9-timeline.webp new file mode 100644 index 00000000..45b3f470 Binary files /dev/null and b/img/screenshots/web/screenshot-v0.8.0b9-timeline.webp differ diff --git a/img/screenshots/web/screenshot-v0.8.0b9-today.webp b/img/screenshots/web/screenshot-v0.8.0b9-today.webp new file mode 100644 index 00000000..bbecb2c0 Binary files /dev/null and b/img/screenshots/web/screenshot-v0.8.0b9-today.webp differ diff --git a/img/screenshots/web/screenshot-v0.8.0dev-activity.webp b/img/screenshots/web/screenshot-v0.8.0dev-activity.webp new file mode 100644 index 00000000..3fa5f748 Binary files /dev/null and b/img/screenshots/web/screenshot-v0.8.0dev-activity.webp differ diff --git a/img/screenshots/web/screenshot-v0.9.3-activity.webp b/img/screenshots/web/screenshot-v0.9.3-activity.webp new file mode 100644 index 00000000..23f80a65 Binary files /dev/null and b/img/screenshots/web/screenshot-v0.9.3-activity.webp differ diff --git a/img/screenshots/web/thelifeimliving_activity.webp b/img/screenshots/web/thelifeimliving_activity.webp new file mode 100644 index 00000000..a453e12e Binary files /dev/null and b/img/screenshots/web/thelifeimliving_activity.webp differ diff --git a/img/screenshots/web/thelifeimliving_query-explorer-dark.webp b/img/screenshots/web/thelifeimliving_query-explorer-dark.webp new file mode 100644 index 00000000..39b33942 Binary files /dev/null and b/img/screenshots/web/thelifeimliving_query-explorer-dark.webp differ diff --git a/img/screenshots/web/thelifeimliving_query-explorer.webp b/img/screenshots/web/thelifeimliving_query-explorer.webp new file mode 100644 index 00000000..c53ce81c Binary files /dev/null and b/img/screenshots/web/thelifeimliving_query-explorer.webp differ diff --git a/img/screenshots/web/thelifeimliving_search.webp b/img/screenshots/web/thelifeimliving_search.webp new file mode 100644 index 00000000..91cb39ea Binary files /dev/null and b/img/screenshots/web/thelifeimliving_search.webp differ diff --git a/img/screenshots/web/thelifeimliving_settings-dark.webp b/img/screenshots/web/thelifeimliving_settings-dark.webp new file mode 100644 index 00000000..8ca29d2e Binary files /dev/null and b/img/screenshots/web/thelifeimliving_settings-dark.webp differ diff --git a/img/screenshots/web/thelifeimliving_settings.webp b/img/screenshots/web/thelifeimliving_settings.webp new file mode 100644 index 00000000..fa8f181f Binary files /dev/null and b/img/screenshots/web/thelifeimliving_settings.webp differ diff --git a/img/screenshots/web/thelifeimliving_stopwatch-dark.webp b/img/screenshots/web/thelifeimliving_stopwatch-dark.webp new file mode 100644 index 00000000..56eeb3b4 Binary files /dev/null and b/img/screenshots/web/thelifeimliving_stopwatch-dark.webp differ diff --git a/img/screenshots/web/thelifeimliving_stopwatch.webp b/img/screenshots/web/thelifeimliving_stopwatch.webp new file mode 100644 index 00000000..ba13202f Binary files /dev/null and b/img/screenshots/web/thelifeimliving_stopwatch.webp differ diff --git a/img/screenshots/web/thelifeimliving_timeline-dark.webp b/img/screenshots/web/thelifeimliving_timeline-dark.webp new file mode 100644 index 00000000..c5307a95 Binary files /dev/null and b/img/screenshots/web/thelifeimliving_timeline-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-browser-dark.webp b/img/screenshots/web/v0.14.0_activity-browser-dark.webp new file mode 100644 index 00000000..d467bcee Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-browser-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-browser.webp b/img/screenshots/web/v0.14.0_activity-browser.webp new file mode 100644 index 00000000..c17fd1fb Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-browser.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-day-dark.webp b/img/screenshots/web/v0.14.0_activity-day-dark.webp new file mode 100644 index 00000000..95f8639d Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-day-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-day-full-dark.webp b/img/screenshots/web/v0.14.0_activity-day-full-dark.webp new file mode 100644 index 00000000..e0de9bc9 Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-day-full-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-day-full.webp b/img/screenshots/web/v0.14.0_activity-day-full.webp new file mode 100644 index 00000000..6924faea Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-day-full.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-day.webp b/img/screenshots/web/v0.14.0_activity-day.webp new file mode 100644 index 00000000..8b0e202e Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-day.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-month-dark.webp b/img/screenshots/web/v0.14.0_activity-month-dark.webp new file mode 100644 index 00000000..28961f43 Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-month-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-month.webp b/img/screenshots/web/v0.14.0_activity-month.webp new file mode 100644 index 00000000..0a2893be Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-month.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-week-dark.webp b/img/screenshots/web/v0.14.0_activity-week-dark.webp new file mode 100644 index 00000000..514630e4 Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-week-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-week.webp b/img/screenshots/web/v0.14.0_activity-week.webp new file mode 100644 index 00000000..0f9010b7 Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-week.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-year-dark.webp b/img/screenshots/web/v0.14.0_activity-year-dark.webp new file mode 100644 index 00000000..478aba2c Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-year-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_activity-year.webp b/img/screenshots/web/v0.14.0_activity-year.webp new file mode 100644 index 00000000..73b7d16a Binary files /dev/null and b/img/screenshots/web/v0.14.0_activity-year.webp differ diff --git a/img/screenshots/web/v0.14.0_buckets-dark.webp b/img/screenshots/web/v0.14.0_buckets-dark.webp new file mode 100644 index 00000000..07771ca5 Binary files /dev/null and b/img/screenshots/web/v0.14.0_buckets-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_buckets.webp b/img/screenshots/web/v0.14.0_buckets.webp new file mode 100644 index 00000000..0ba6ebec Binary files /dev/null and b/img/screenshots/web/v0.14.0_buckets.webp differ diff --git a/img/screenshots/web/v0.14.0_categorization-dark.webp b/img/screenshots/web/v0.14.0_categorization-dark.webp new file mode 100644 index 00000000..5fb25ee1 Binary files /dev/null and b/img/screenshots/web/v0.14.0_categorization-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_categorization.webp b/img/screenshots/web/v0.14.0_categorization.webp new file mode 100644 index 00000000..846bf112 Binary files /dev/null and b/img/screenshots/web/v0.14.0_categorization.webp differ diff --git a/img/screenshots/web/v0.14.0_query-dark.webp b/img/screenshots/web/v0.14.0_query-dark.webp new file mode 100644 index 00000000..66f1dfee Binary files /dev/null and b/img/screenshots/web/v0.14.0_query-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_query.webp b/img/screenshots/web/v0.14.0_query.webp new file mode 100644 index 00000000..bd0c3534 Binary files /dev/null and b/img/screenshots/web/v0.14.0_query.webp differ diff --git a/img/screenshots/web/v0.14.0_search-dark.webp b/img/screenshots/web/v0.14.0_search-dark.webp new file mode 100644 index 00000000..265b602c Binary files /dev/null and b/img/screenshots/web/v0.14.0_search-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_search.webp b/img/screenshots/web/v0.14.0_search.webp new file mode 100644 index 00000000..bcdcc82b Binary files /dev/null and b/img/screenshots/web/v0.14.0_search.webp differ diff --git a/img/screenshots/web/v0.14.0_settings-dark.webp b/img/screenshots/web/v0.14.0_settings-dark.webp new file mode 100644 index 00000000..3f87c6e6 Binary files /dev/null and b/img/screenshots/web/v0.14.0_settings-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_settings.webp b/img/screenshots/web/v0.14.0_settings.webp new file mode 100644 index 00000000..3fc2965f Binary files /dev/null and b/img/screenshots/web/v0.14.0_settings.webp differ diff --git a/img/screenshots/web/v0.14.0_stopwatch-dark.webp b/img/screenshots/web/v0.14.0_stopwatch-dark.webp new file mode 100644 index 00000000..54958979 Binary files /dev/null and b/img/screenshots/web/v0.14.0_stopwatch-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_stopwatch.webp b/img/screenshots/web/v0.14.0_stopwatch.webp new file mode 100644 index 00000000..1fe944d1 Binary files /dev/null and b/img/screenshots/web/v0.14.0_stopwatch.webp differ diff --git a/img/screenshots/web/v0.14.0_timeline-dark.webp b/img/screenshots/web/v0.14.0_timeline-dark.webp new file mode 100644 index 00000000..1936b572 Binary files /dev/null and b/img/screenshots/web/v0.14.0_timeline-dark.webp differ diff --git a/img/screenshots/web/v0.14.0_timeline.webp b/img/screenshots/web/v0.14.0_timeline.webp new file mode 100644 index 00000000..d28270f0 Binary files /dev/null and b/img/screenshots/web/v0.14.0_timeline.webp differ diff --git a/index.pug b/index.pug index 3ecebe4d..6b8972dd 100644 --- a/index.pug +++ b/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 diff --git a/screenshots.pug b/screenshots.pug index 97aa316f..70784064 100644 --- a/screenshots.pug +++ b/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)); }); }); + });