docs: replace screenshots with updated versions, add calendar/meal/settings/shopping
- Remove household screenshots (renamed to shopping) - Add new calendar, meal, settings, shopping screenshots (mobile + tablet, light + dark) - Update README screenshot section: 3x3 mobile grid covering all 9 modules, expanded tablet section Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@@ -55,6 +55,14 @@ Oikos is designed for **one family on one server** — not a SaaS product, not a
|
|||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
<td align="center" width="33%">
|
||||||
|
<picture>
|
||||||
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-dashboard.png">
|
||||||
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-dashboard.png">
|
||||||
|
<img src="docs/screenshots/mobile-light/mobile-light-dashboard.png" alt="Dashboard" width="240">
|
||||||
|
</picture>
|
||||||
|
<br><strong>Dashboard</strong>
|
||||||
|
</td>
|
||||||
<td align="center" width="33%">
|
<td align="center" width="33%">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-tasks.png">
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-tasks.png">
|
||||||
@@ -65,12 +73,30 @@ Oikos is designed for **one family on one server** — not a SaaS product, not a
|
|||||||
</td>
|
</td>
|
||||||
<td align="center" width="33%">
|
<td align="center" width="33%">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-household.png">
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-calendar.png">
|
||||||
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-household.png">
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-calendar.png">
|
||||||
<img src="docs/screenshots/mobile-light/mobile-light-household.png" alt="Shopping" width="240">
|
<img src="docs/screenshots/mobile-light/mobile-light-calendar.png" alt="Calendar" width="240">
|
||||||
|
</picture>
|
||||||
|
<br><strong>Calendar</strong>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td align="center" width="33%">
|
||||||
|
<picture>
|
||||||
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-shopping.png">
|
||||||
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-shopping.png">
|
||||||
|
<img src="docs/screenshots/mobile-light/mobile-light-shopping.png" alt="Shopping" width="240">
|
||||||
</picture>
|
</picture>
|
||||||
<br><strong>Shopping</strong>
|
<br><strong>Shopping</strong>
|
||||||
</td>
|
</td>
|
||||||
|
<td align="center" width="33%">
|
||||||
|
<picture>
|
||||||
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-meal.png">
|
||||||
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-meal.png">
|
||||||
|
<img src="docs/screenshots/mobile-light/mobile-light-meal.png" alt="Meals" width="240">
|
||||||
|
</picture>
|
||||||
|
<br><strong>Meals</strong>
|
||||||
|
</td>
|
||||||
<td align="center" width="33%">
|
<td align="center" width="33%">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-budget.png">
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-budget.png">
|
||||||
@@ -99,11 +125,11 @@ Oikos is designed for **one family on one server** — not a SaaS product, not a
|
|||||||
</td>
|
</td>
|
||||||
<td align="center" width="33%">
|
<td align="center" width="33%">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-dashboard.png">
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/mobile-dark/mobile-dark-settings.png">
|
||||||
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-dashboard.png">
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/mobile-light/mobile-light-settings.png">
|
||||||
<img src="docs/screenshots/mobile-light/mobile-light-dashboard.png" alt="Dashboard Mobile" width="240">
|
<img src="docs/screenshots/mobile-light/mobile-light-settings.png" alt="Settings" width="240">
|
||||||
</picture>
|
</picture>
|
||||||
<br><strong>Dashboard</strong>
|
<br><strong>Settings</strong>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
@@ -113,6 +139,14 @@ Oikos is designed for **one family on one server** — not a SaaS product, not a
|
|||||||
<br>
|
<br>
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
<td align="center" width="50%">
|
||||||
|
<picture>
|
||||||
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-dashboard.png">
|
||||||
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/tablet-light/tablet-light-dashboard.png">
|
||||||
|
<img src="docs/screenshots/tablet-light/tablet-light-dashboard.png" alt="Dashboard — Tablet" width="480">
|
||||||
|
</picture>
|
||||||
|
<br><strong>Dashboard</strong>
|
||||||
|
</td>
|
||||||
<td align="center" width="50%">
|
<td align="center" width="50%">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-tasks.png">
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-tasks.png">
|
||||||
@@ -121,11 +155,21 @@ Oikos is designed for **one family on one server** — not a SaaS product, not a
|
|||||||
</picture>
|
</picture>
|
||||||
<br><strong>Tasks</strong>
|
<br><strong>Tasks</strong>
|
||||||
</td>
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
<td align="center" width="50%">
|
<td align="center" width="50%">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-household.png">
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-calendar.png">
|
||||||
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/tablet-light/tablet-light-household.png">
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/tablet-light/tablet-light-calendar.png">
|
||||||
<img src="docs/screenshots/tablet-light/tablet-light-household.png" alt="Shopping — Tablet" width="480">
|
<img src="docs/screenshots/tablet-light/tablet-light-calendar.png" alt="Calendar — Tablet" width="480">
|
||||||
|
</picture>
|
||||||
|
<br><strong>Calendar</strong>
|
||||||
|
</td>
|
||||||
|
<td align="center" width="50%">
|
||||||
|
<picture>
|
||||||
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-shopping.png">
|
||||||
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/tablet-light/tablet-light-shopping.png">
|
||||||
|
<img src="docs/screenshots/tablet-light/tablet-light-shopping.png" alt="Shopping — Tablet" width="480">
|
||||||
</picture>
|
</picture>
|
||||||
<br><strong>Shopping</strong>
|
<br><strong>Shopping</strong>
|
||||||
</td>
|
</td>
|
||||||
@@ -133,11 +177,11 @@ Oikos is designed for **one family on one server** — not a SaaS product, not a
|
|||||||
<tr>
|
<tr>
|
||||||
<td align="center" width="50%">
|
<td align="center" width="50%">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-notes.png">
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-meal.png">
|
||||||
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/tablet-light/tablet-light-notes.png">
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/tablet-light/tablet-light-meal.png">
|
||||||
<img src="docs/screenshots/tablet-light/tablet-light-notes.png" alt="Notes — Tablet" width="480">
|
<img src="docs/screenshots/tablet-light/tablet-light-meal.png" alt="Meals — Tablet" width="480">
|
||||||
</picture>
|
</picture>
|
||||||
<br><strong>Notes</strong>
|
<br><strong>Meals</strong>
|
||||||
</td>
|
</td>
|
||||||
<td align="center" width="50%">
|
<td align="center" width="50%">
|
||||||
<picture>
|
<picture>
|
||||||
@@ -149,6 +193,14 @@ Oikos is designed for **one family on one server** — not a SaaS product, not a
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
<td align="center" width="50%">
|
||||||
|
<picture>
|
||||||
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-notes.png">
|
||||||
|
<source media="(prefers-color-scheme: light)" srcset="docs/screenshots/tablet-light/tablet-light-notes.png">
|
||||||
|
<img src="docs/screenshots/tablet-light/tablet-light-notes.png" alt="Notes — Tablet" width="480">
|
||||||
|
</picture>
|
||||||
|
<br><strong>Notes</strong>
|
||||||
|
</td>
|
||||||
<td align="center" width="50%">
|
<td align="center" width="50%">
|
||||||
<picture>
|
<picture>
|
||||||
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-contacts.png">
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/tablet-dark/tablet-dark-contacts.png">
|
||||||
@@ -157,7 +209,6 @@ Oikos is designed for **one family on one server** — not a SaaS product, not a
|
|||||||
</picture>
|
</picture>
|
||||||
<br><strong>Contacts</strong>
|
<br><strong>Contacts</strong>
|
||||||
</td>
|
</td>
|
||||||
<td></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</details>
|
</details>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 442 KiB |
|
After Width: | Height: | Size: 379 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 558 KiB |
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 582 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 415 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 540 KiB |
|
After Width: | Height: | Size: 371 KiB |
|
After Width: | Height: | Size: 326 KiB |
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 479 KiB |
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 449 KiB |
|
After Width: | Height: | Size: 383 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 559 KiB |
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 554 KiB |
|
Before Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 544 KiB |
|
After Width: | Height: | Size: 381 KiB |
|
After Width: | Height: | Size: 334 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 499 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 368 KiB |
|
After Width: | Height: | Size: 347 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 450 KiB |
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 583 KiB |
|
Before Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 379 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 507 KiB |
|
After Width: | Height: | Size: 308 KiB |
|
After Width: | Height: | Size: 276 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 380 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 367 KiB |
|
After Width: | Height: | Size: 345 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 447 KiB |
|
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 557 KiB |
|
Before Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 393 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 506 KiB |
|
After Width: | Height: | Size: 311 KiB |
|
After Width: | Height: | Size: 277 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 391 KiB |