Add README gallery: screenshots and walkthrough GIF generated with Playwright; replace internal IPs in docs

README.md

@@ -6,6 +6,38 @@
 
 A single-file design system (`base.css` + `base.js`) used across all LotusGuild internal services. `base.html` is a living reference template that demonstrates every component and pattern.
 
+![Design system walkthrough: boot sequence, command palette, theme toggle and component reference](docs/img/demo.gif)
+
+> Every Lotus Guild service ([Tinker Tickets](https://code.lotusguild.org/LotusGuild/tinker_tickets), [PULSE](https://code.lotusguild.org/LotusGuild/pulse), [GANDALF](https://code.lotusguild.org/LotusGuild/gandalf)) renders from this one stylesheet and script. No framework, no build step. `base.html` is a living reference page, and the screenshots below are generated from it.
+
+## Gallery
+
+| Dark (default) | Light |
+|---|---|
+| ![Dashboard, dark theme](docs/img/dark-dashboard.png) | ![Dashboard, light theme](docs/img/light-dashboard.png) |
+
+**Kanban view** with priority-coloured cards and per-column frames:
+
+![Kanban board](docs/img/kanban.png)
+
+**Command palette** (`Ctrl+K`) with fuzzy filtering and match highlighting:
+
+![Command palette filtering "ti"](docs/img/command-palette.png)
+
+**Data tables, SLA timers, alerts and progress bars:**
+
+![Ticket queue table](docs/img/ticket-queue.png)
+![SLA banners](docs/img/sla-banners.png)
+![Alert banners](docs/img/alerts.png)
+![Progress bars](docs/img/progress-bars.png)
+![Data grid and stepper](docs/img/data-grid.png)
+
+**Component reference** (buttons, badges, chips, status dots, inline messages):
+
+![Component reference](docs/img/components.png)
+
+<sub>Screenshots are produced with Playwright from `base.html` using demo data only.</sub>
+
 ---
 
 ## Table of Contents
@@ -1011,21 +1043,21 @@ web_template/
 
 **1. Create a service account in lldap**
 
-Log into lldap at `http://10.10.10.39:17170`, or use the GraphQL API:
+Log into lldap at `http://lldap.example.internal:17170`, or use the GraphQL API:
 
 ```bash
-TOKEN=$(curl -s -X POST http://10.10.10.39:17170/auth/simple/login \
+TOKEN=$(curl -s -X POST http://lldap.example.internal:17170/auth/simple/login \
   -H 'Content-Type: application/json' \
   -d '{"username":"<admin>","password":"<pw>"}' | python3 -c "import sys,json; print(json.load(sys.stdin)['token'])")
 
 # Create service account
-curl -s -X POST http://10.10.10.39:17170/api/graphql \
+curl -s -X POST http://lldap.example.internal:17170/api/graphql \
   -H "Content-Type: application/json" \
   -H "Authorization: Bearer $TOKEN" \
   -d '{"query":"mutation { createUser(user: { id: \"my-app\", email: \"my-app@lotusguild.org\", displayName: \"My App Service\" }) { id } }"}'
 
 # Add to lldap_strict_readonly (id=3) for directory read access
-curl -s -X POST http://10.10.10.39:17170/api/graphql \
+curl -s -X POST http://lldap.example.internal:17170/api/graphql \
   -H "Content-Type: application/json" \
   -H "Authorization: Bearer $TOKEN" \
   -d '{"query":"mutation { addUserToGroup(userId: \"my-app\", groupId: 3) { ok } }"}'
@@ -1033,7 +1065,7 @@ curl -s -X POST http://10.10.10.39:17170/api/graphql \
 
 Then set the password via `ldappasswd`:
 ```bash
-ldappasswd -H ldap://10.10.10.39:3890 \
+ldappasswd -H ldap://lldap.example.internal:3890 \
   -D "uid=<admin>,ou=people,dc=example,dc=com" \
   -w '<admin-pw>' \
   -s '<service-account-pw>' \
@@ -1050,7 +1082,7 @@ chown -R www-data:www-data /var/www/html/myapp/uploads/avatars
 **3. Add LDAP config to `.env`**
 ```ini
 LDAP_ENABLED=true
-LDAP_HOST=10.10.10.39
+LDAP_HOST=lldap.example.internal
 LDAP_PORT=3890
 LDAP_BIND_DN="uid=my-app,ou=people,dc=example,dc=com"
 LDAP_BIND_PW="<service-account-pw>"