tomek7667 · tomek7667 · Dec 11, 2025 · Dec 11, 2025 · Dec 11, 2025 · Dec 11, 2025
diff --git a/README.md b/README.md
@@ -14,8 +14,26 @@ Self-hosted secrets management with web UI and REST API.
 
 ## Screenshots
 
+![Login](docs/screenshots/01-login.png)
+*Clean login interface with dark mode*
+
 ![Secrets Dashboard](docs/screenshots/02-secrets-dashboard.png)
-![Permissions](docs/screenshots/06-permissions.png)
+*Main dashboard showing secrets management*
+
+![Secret Revealed](docs/screenshots/03-secret-revealed.png)
+*Viewing a secret value with one click*
+
+![Users Panel](docs/screenshots/04-users-panel.png)
+*User management interface*
+
+![Tokens Panel](docs/screenshots/05-tokens-panel.png)
+*API token management*
+
+![Permissions Panel](docs/screenshots/06-permissions-panel.png)
+*Permission configuration for tokens*
+
+![Login with Cloudflare Turnstile](docs/screenshots/07-login-with-captcha.png)
+*Login page with Cloudflare Turnstile captcha enabled*
 
 ## Installation
 

diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,39 @@
+# Documentation
+
+This directory contains documentation assets for the Secrets Manager project.
+
+## Structure
+
+```
+docs/
+├── README.md           # This file
+└── screenshots/        # Application screenshots for documentation
+    ├── 01-login.png              # Login page
+    ├── 02-secrets-dashboard.png  # Secrets management panel
+    ├── 03-secret-revealed.png    # Secret value revealed
+    ├── 04-users-panel.png        # User management panel
+    ├── 05-tokens-panel.png       # API token management panel
+    ├── 06-permissions-panel.png  # Permission configuration panel
+    └── 07-login-with-captcha.png # Login with Cloudflare Turnstile captcha
+```
+
+## Screenshots
+
+All screenshots are taken at 1280x720 resolution in PNG format and show the application's dark mode interface.
+
+### Adding New Screenshots
+
+When updating screenshots:
+
+1. Start the server: `go run cmd/secretsserver/main.go --admin-password "admin123"`
+2. Navigate to `http://127.0.0.1:7770`
+3. Capture screenshots of each panel
+4. Save them with the naming convention: `##-descriptive-name.png`
+5. Update the main README.md to reference new screenshots
+
+### Screenshot Guidelines
+
+- Use consistent viewport size (1280x720 or similar)
+- Capture the full application interface including header and navigation
+- Use realistic but safe example data (no real secrets)
+- Ensure dark mode is enabled for consistency
diff --git a/docs/screenshots/01-login.png b/docs/screenshots/01-login.png
diff --git a/docs/screenshots/02-secrets-dashboard.png b/docs/screenshots/02-secrets-dashboard.png
diff --git a/docs/screenshots/03-secret-revealed.png b/docs/screenshots/03-secret-revealed.png
diff --git a/docs/screenshots/04-users-panel.png b/docs/screenshots/04-users-panel.png
diff --git a/docs/screenshots/05-tokens-panel.png b/docs/screenshots/05-tokens-panel.png
diff --git a/docs/screenshots/06-permissions-panel.png b/docs/screenshots/06-permissions-panel.png
diff --git a/docs/screenshots/06-permissions.png b/docs/screenshots/06-permissions.png
diff --git a/docs/screenshots/07-login-with-captcha.png b/docs/screenshots/07-login-with-captcha.png
diff --git a/web/.gitignore b/web/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 dist/
 yarn-error.log
+tsconfig.tsbuildinfo
diff --git a/web/tsconfig.tsbuildinfo b/web/tsconfig.tsbuildinfo