Skip to content

Commit ebcdd33

Browse files
hhftechnologyhhftechnology
committed
Add screenshots gallery and update docs meta
Introduce a new screenshots documentation page (docs/content/docs/screenshots.mdx) providing a visual UI reference gallery (dashboard, alerts/decisions, hub, management/operations) with images hosted on the project's GitHub raw URL. Also update docs/content/docs/meta.json to include the new "screenshots" entry so the page appears in the docs navigation.
1 parent 30e821b commit ebcdd33

2 files changed

Lines changed: 170 additions & 0 deletions

File tree

‎docs/content/docs/meta.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"index",
44
"installation",
55
"quick-start",
6+
"screenshots",
67
"features",
78
"configuration",
89
"development",

‎docs/content/docs/screenshots.mdx‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
title: Screenshots
3+
description: Visual walkthrough of CrowdSec Manager pages
4+
---
5+
6+
export const imageBase = 'https://raw.githubusercontent.com/hhftechnology/crowdsec_manager/main/images';
7+
8+
<div
9+
style={{
10+
padding: '1rem',
11+
borderRadius: '1rem',
12+
background: 'linear-gradient(135deg, #f3e7d3 0%, #ead8bc 60%, #e2ccb0 100%)',
13+
border: '1px solid #d4bfa1',
14+
marginBottom: '1.5rem',
15+
}}
16+
>
17+
<h1 style={{ margin: 0, color: '#6d1f2f' }}>Screenshots</h1>
18+
<p style={{ marginTop: '0.5rem', color: '#7a4d2a' }}>
19+
Product UI reference gallery with semantic filenames and page mapping.
20+
</p>
21+
</div>
22+
23+
## Dashboard and Health
24+
25+
<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
26+
<a href={`${imageBase}/dashboard-overview-countries-systems.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
27+
<img src={`${imageBase}/dashboard-overview-countries-systems.jpeg`} alt="Dashboard overview countries systems" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
28+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>dashboard-overview-countries-systems.jpeg</p>
29+
</a>
30+
<a href={`${imageBase}/dashboard-overview-scenarios-blocked-ips.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
31+
<img src={`${imageBase}/dashboard-overview-scenarios-blocked-ips.jpeg`} alt="Dashboard overview scenarios blocked ips" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
32+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>dashboard-overview-scenarios-blocked-ips.jpeg</p>
33+
</a>
34+
<a href={`${imageBase}/health-diagnostics-overview.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
35+
<img src={`${imageBase}/health-diagnostics-overview.jpeg`} alt="Health diagnostics overview" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
36+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>health-diagnostics-overview.jpeg</p>
37+
</a>
38+
<a href={`${imageBase}/crowdsec-health-overview.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
39+
<img src={`${imageBase}/crowdsec-health-overview.jpeg`} alt="Crowdsec health overview" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
40+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>crowdsec-health-overview.jpeg</p>
41+
</a>
42+
</div>
43+
44+
## Alerts and Decisions
45+
46+
<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
47+
<a href={`${imageBase}/alerts-analysis-overview.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
48+
<img src={`${imageBase}/alerts-analysis-overview.jpeg`} alt="Alerts analysis overview" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
49+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>alerts-analysis-overview.jpeg</p>
50+
</a>
51+
<a href={`${imageBase}/alerts-analysis-filters.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
52+
<img src={`${imageBase}/alerts-analysis-filters.jpeg`} alt="Alerts analysis filters" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
53+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>alerts-analysis-filters.jpeg</p>
54+
</a>
55+
<a href={`${imageBase}/alerts-analysis-results-table.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
56+
<img src={`${imageBase}/alerts-analysis-results-table.jpeg`} alt="Alerts analysis results table" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
57+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>alerts-analysis-results-table.jpeg</p>
58+
</a>
59+
<a href={`${imageBase}/alerts-analysis-inspect-modal.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
60+
<img src={`${imageBase}/alerts-analysis-inspect-modal.jpeg`} alt="Alerts analysis inspect modal" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
61+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>alerts-analysis-inspect-modal.jpeg</p>
62+
</a>
63+
<a href={`${imageBase}/decisions-analysis-overview.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
64+
<img src={`${imageBase}/decisions-analysis-overview.jpeg`} alt="Decisions analysis overview" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
65+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>decisions-analysis-overview.jpeg</p>
66+
</a>
67+
<a href={`${imageBase}/decisions-results-table.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
68+
<img src={`${imageBase}/decisions-results-table.jpeg`} alt="Decisions results table" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
69+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>decisions-results-table.jpeg</p>
70+
</a>
71+
</div>
72+
73+
## Hub Browser
74+
75+
<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
76+
<a href={`${imageBase}/hub-home-categories.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
77+
<img src={`${imageBase}/hub-home-categories.jpeg`} alt="Hub home categories" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
78+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>hub-home-categories.jpeg</p>
79+
</a>
80+
<a href={`${imageBase}/hub-collections.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
81+
<img src={`${imageBase}/hub-collections.jpeg`} alt="Hub collections" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
82+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>hub-collections.jpeg</p>
83+
</a>
84+
<a href={`${imageBase}/hub-scenarios-install-mode.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
85+
<img src={`${imageBase}/hub-scenarios-install-mode.jpeg`} alt="Hub scenarios install mode" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
86+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>hub-scenarios-install-mode.jpeg</p>
87+
</a>
88+
<a href={`${imageBase}/hub-log-parsers.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
89+
<img src={`${imageBase}/hub-log-parsers.jpeg`} alt="Hub log parsers" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
90+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>hub-log-parsers.jpeg</p>
91+
</a>
92+
<a href={`${imageBase}/hub-postoverflows.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
93+
<img src={`${imageBase}/hub-postoverflows.jpeg`} alt="Hub postoverflows" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
94+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>hub-postoverflows.jpeg</p>
95+
</a>
96+
<a href={`${imageBase}/hub-remediation-components.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
97+
<img src={`${imageBase}/hub-remediation-components.jpeg`} alt="Hub remediation components" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
98+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>hub-remediation-components.jpeg</p>
99+
</a>
100+
<a href={`${imageBase}/hub-appsec-configurations.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
101+
<img src={`${imageBase}/hub-appsec-configurations.jpeg`} alt="Hub appsec configurations" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
102+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>hub-appsec-configurations.jpeg</p>
103+
</a>
104+
<a href={`${imageBase}/hub-appsec-rules.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
105+
<img src={`${imageBase}/hub-appsec-rules.jpeg`} alt="Hub appsec rules" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
106+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>hub-appsec-rules.jpeg</p>
107+
</a>
108+
</div>
109+
110+
## Management and Operations
111+
112+
<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
113+
<a href={`${imageBase}/allowlists-management.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
114+
<img src={`${imageBase}/allowlists-management.jpeg`} alt="Allowlists management" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
115+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>allowlists-management.jpeg</p>
116+
</a>
117+
<a href={`${imageBase}/whitelist-management.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
118+
<img src={`${imageBase}/whitelist-management.jpeg`} alt="Whitelist management" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
119+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>whitelist-management.jpeg</p>
120+
</a>
121+
<a href={`${imageBase}/ip-management.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
122+
<img src={`${imageBase}/ip-management.jpeg`} alt="IP management" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
123+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>ip-management.jpeg</p>
124+
</a>
125+
<a href={`${imageBase}/bouncers-management.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
126+
<img src={`${imageBase}/bouncers-management.jpeg`} alt="Bouncers management" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
127+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>bouncers-management.jpeg</p>
128+
</a>
129+
<a href={`${imageBase}/scenarios-management.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
130+
<img src={`${imageBase}/scenarios-management.jpeg`} alt="Scenarios management" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
131+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>scenarios-management.jpeg</p>
132+
</a>
133+
<a href={`${imageBase}/captcha-protection-detect.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
134+
<img src={`${imageBase}/captcha-protection-detect.jpeg`} alt="Captcha protection detect" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
135+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>captcha-protection-detect.jpeg</p>
136+
</a>
137+
<a href={`${imageBase}/notifications-detect.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
138+
<img src={`${imageBase}/notifications-detect.jpeg`} alt="Notifications detect" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
139+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>notifications-detect.jpeg</p>
140+
</a>
141+
<a href={`${imageBase}/services-management.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
142+
<img src={`${imageBase}/services-management.jpeg`} alt="Services management" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
143+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>services-management.jpeg</p>
144+
</a>
145+
<a href={`${imageBase}/logs-service-logs.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
146+
<img src={`${imageBase}/logs-service-logs.jpeg`} alt="Logs service logs" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
147+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>logs-service-logs.jpeg</p>
148+
</a>
149+
<a href={`${imageBase}/backup-management.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
150+
<img src={`${imageBase}/backup-management.jpeg`} alt="Backup management" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
151+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>backup-management.jpeg</p>
152+
</a>
153+
<a href={`${imageBase}/system-update.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
154+
<img src={`${imageBase}/system-update.jpeg`} alt="System update" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
155+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>system-update.jpeg</p>
156+
</a>
157+
<a href={`${imageBase}/config-validation.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
158+
<img src={`${imageBase}/config-validation.jpeg`} alt="Config validation" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
159+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>config-validation.jpeg</p>
160+
</a>
161+
<a href={`${imageBase}/configuration-settings.jpeg`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
162+
<img src={`${imageBase}/configuration-settings.jpeg`} alt="Configuration settings" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
163+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>configuration-settings.jpeg</p>
164+
</a>
165+
<a href={`${imageBase}/terminal-container-shell.png`} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
166+
<img src={`${imageBase}/terminal-container-shell.png`} alt="Terminal container shell" style={{ borderRadius: '0.75rem', border: '1px solid #d4bfa1' }} />
167+
<p style={{ color: '#6d1f2f', fontWeight: 600 }}>terminal-container-shell.png</p>
168+
</a>
169+
</div>

0 commit comments

Comments
 (0)