diff --git a/README.md b/README.md index c7e031f..f1a72c7 100644 --- a/README.md +++ b/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) + +Screenshots are produced with Playwright from `base.html` using demo data only. + --- ## 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":"","password":""}' | 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=,ou=people,dc=example,dc=com" \ -w '' \ -s '' \ @@ -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="" diff --git a/docs/img/alerts.png b/docs/img/alerts.png new file mode 100644 index 0000000..3ea064e Binary files /dev/null and b/docs/img/alerts.png differ diff --git a/docs/img/command-palette.png b/docs/img/command-palette.png new file mode 100644 index 0000000..85dfeba Binary files /dev/null and b/docs/img/command-palette.png differ diff --git a/docs/img/components.png b/docs/img/components.png new file mode 100644 index 0000000..24d60c0 Binary files /dev/null and b/docs/img/components.png differ diff --git a/docs/img/dark-dashboard.png b/docs/img/dark-dashboard.png new file mode 100644 index 0000000..777b031 Binary files /dev/null and b/docs/img/dark-dashboard.png differ diff --git a/docs/img/data-grid.png b/docs/img/data-grid.png new file mode 100644 index 0000000..cd54dfa Binary files /dev/null and b/docs/img/data-grid.png differ diff --git a/docs/img/demo.gif b/docs/img/demo.gif new file mode 100644 index 0000000..df8caac Binary files /dev/null and b/docs/img/demo.gif differ diff --git a/docs/img/kanban.png b/docs/img/kanban.png new file mode 100644 index 0000000..1713f74 Binary files /dev/null and b/docs/img/kanban.png differ diff --git a/docs/img/light-dashboard.png b/docs/img/light-dashboard.png new file mode 100644 index 0000000..57b59f0 Binary files /dev/null and b/docs/img/light-dashboard.png differ diff --git a/docs/img/progress-bars.png b/docs/img/progress-bars.png new file mode 100644 index 0000000..8e3a311 Binary files /dev/null and b/docs/img/progress-bars.png differ diff --git a/docs/img/sla-banners.png b/docs/img/sla-banners.png new file mode 100644 index 0000000..ccb8475 Binary files /dev/null and b/docs/img/sla-banners.png differ diff --git a/docs/img/ticket-queue.png b/docs/img/ticket-queue.png new file mode 100644 index 0000000..8e3c616 Binary files /dev/null and b/docs/img/ticket-queue.png differ