Skip to content

Commit 124bfcc

Browse files
mamullen13316mamullen13316
committed
updated html styling
1 parent 57882bb commit 124bfcc

File tree

6 files changed

+1033
-230
lines changed

6 files changed

+1033
-230
lines changed

‎pyproject.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[tool.poetry]
22
name = "sophos-firewall-audit"
3-
version = "1.0.13"
3+
version = "1.0.14"
44
description = "Sophos Firewall Audit"
55
authors = ["Matt Mullen <matt.mullen@sophos.com>"]
66
readme = "README.md"

‎sophos_firewall_audit/templates/audit_index.j2‎

Lines changed: 203 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,208 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23
<head>
3-
<div>
4-
<a href="/en-us" rel="home" class="site-logo">
5-
<svg role="img" aria-label="Sophos" aria-hidden="true" focusable="false" width="120" height="20"
6-
viewBox="0 0 120 20">
7-
<g fill="#F1F8FE" fill-rule="evenodd">
8-
<path
9-
d="M101.235 16.433H111.7c1.626 0 2.516-.15 3.037-.48.644-.39 1.01-1.05 1.01-1.83 0-.93-.49-1.738-1.317-2.129-.43-.24-1.227-.36-2.21-.36h-4.367c-2.453 0-4.047-.42-5.12-1.318-1.227-1.05-1.933-2.669-1.933-4.41 0-2.547 1.44-4.766 3.556-5.485C105.28.089 106.35 0 108.744 0h10.665v3.568h-9.685c-1.932.031-2.679.031-3.323.18-.859.21-1.38.99-1.38 2.039 0 .9.428 1.62 1.165 1.95.613.269 1.698.329 3.172.329h3.28c3.008 0 4.633.45 5.83 1.65.92.898 1.532 2.668 1.532 4.406 0 2.13-1.013 4.11-2.608 5.069-1.01.628-2.3.809-5.337.809h-10.82v-3.567zM86.062 5.453c-.584.947-.862 2.467-.862 4.505 0 4.475 1.499 6.513 4.828 6.513 3.273 0 4.772-2.038 4.772-6.456 0-4.477-1.47-6.486-4.772-6.486-1.803 0-3.218.69-3.966 1.924m11.671-2.404c1.198 1.597 1.867 4.198 1.867 7.248 0 3.46-1.08 6.3-3.005 7.868C95.135 19.347 92.92 20 90.292 20c-3.734 0-6.68-1.243-8.199-3.463-1.138-1.626-1.693-3.785-1.693-6.418 0-3.786 1.02-6.658 2.947-8.197C84.864.68 87.258 0 90 0c3.471 0 6.243 1.095 7.732 3.05M78 20L73.59 20 73.59 11.754 65.611 11.754 65.611 20 61.2 20 61.2 0 65.611 0 65.611 8.185 73.59 8.185 73.59 0 78 0zM52.26 9.412c1.074 0 1.696-.151 2.121-.571.509-.451.819-1.41.819-2.52 0-1.32-.51-2.28-1.385-2.61-.312-.122-.82-.182-1.471-.182H46.8v5.882h5.46zM46.296 20H42V0h10.076c3.538 0 4.779.359 6.11 1.828C59.366 3.088 60 4.738 60 6.506c0 2.099-.845 4.048-2.238 5.22-1.178.987-2.27 1.286-4.568 1.286h-6.897V20zM26.06 5.453c-.584.947-.86 2.467-.86 4.505 0 4.475 1.498 6.513 4.827 6.513 3.274 0 4.773-2.038 4.773-6.456 0-4.477-1.47-6.486-4.773-6.486-1.803 0-3.22.69-3.968 1.924m11.674-2.404C38.93 4.646 39.6 7.247 39.6 10.297c0 3.46-1.08 6.3-3.006 7.868C35.136 19.347 32.919 20 30.292 20c-3.736 0-6.682-1.243-8.2-3.463-1.138-1.626-1.692-3.785-1.692-6.418 0-3.786 1.021-6.658 2.948-8.197C24.864.68 27.258 0 30 0c3.472 0 6.245 1.095 7.733 3.05M.435 16.433h10.466c1.624 0 2.515-.15 3.035-.48.646-.39 1.013-1.05 1.013-1.83 0-.93-.49-1.738-1.319-2.129-.43-.24-1.226-.36-2.208-.36H7.056c-2.454 0-4.05-.42-5.123-1.318C.707 9.266 0 7.647 0 5.906 0 3.36 1.443 1.14 3.559.421 4.479.089 5.55 0 7.945 0h10.666v3.568H8.925c-1.932.031-2.68.031-3.322.18-.86.21-1.38.99-1.38 2.039 0 .9.43 1.62 1.164 1.95.614.269 1.7.329 3.171.329h3.28c3.006 0 4.632.45 5.828 1.65.92.898 1.534 2.668 1.534 4.406 0 2.13-1.012 4.11-2.607 5.069-1.011.628-2.299.809-5.336.809H.436v-3.567z">
10-
</path>
11-
</g>
12-
</svg>
13-
</a>
14-
</div>
15-
</head>
16-
<style>
17-
body {
18-
background-color: #005BC8;
19-
color: #ffffff;
20-
font-family:Arial, Helvetica, sans-serif;
21-
}
22-
div {
23-
margin: 15px;
24-
}
25-
a {
26-
color: yellow;
27-
}
28-
table {
29-
width: 50%;
30-
}
31-
th, td {
32-
/* border: 1px solid; */
33-
height: 50px;
34-
padding-left: 10px;
35-
}
36-
</style>
37-
<div>
38-
<h1>{{ title }}</h1>
39-
<table frame="box" rules="all">
40-
<tbody>
41-
<tr>
42-
<th style="text-align: left;">Firewall</th>
43-
<th style="text-align: center;">Passed</th>
44-
<th style="text-align: center;">Failed</th>
45-
</tr>
46-
{% for firewall in status_dict.keys() %}
47-
<tr>
48-
{% if 'web' in dirname %}
49-
{% set dir_paths = dirname.split('/') %}
50-
{% set audit_dir = dir_paths[1] %}
51-
<td style="text-align: left;"><a href="/{{ audit_dir }}/{{ firewall }}.html">{{ firewall }}</a></td>
52-
{% else %}
53-
<td style="text-align: left;"><a href="file:{{ firewall }}.html">{{ firewall }}</a></td>
54-
{% endif %}
55-
<td style="text-align: center;">{{ status_dict[firewall].success_ct }}</td>
56-
<td style="text-align: center;">{{ status_dict[firewall].failed_ct }}</td>
57-
</tr>
58-
{% endfor %}
59-
</tbody>
60-
</table>
61-
62-
63-
</div>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{{ title }} - Sophos Firewall Audit</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
16+
background: linear-gradient(135deg, #005BC8 0%, #003d8f 100%);
17+
color: #ffffff;
18+
min-height: 100vh;
19+
line-height: 1.6;
20+
}
21+
22+
.container {
23+
max-width: 1200px;
24+
margin: 0 auto;
25+
padding: 2rem;
26+
}
27+
28+
.header {
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
margin-bottom: 3rem;
33+
padding: 2rem 0;
34+
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
35+
}
36+
37+
.site-logo {
38+
display: inline-block;
39+
transition: transform 0.3s ease;
40+
}
41+
42+
.site-logo:hover {
43+
transform: scale(1.05);
44+
}
45+
46+
.main-content {
47+
background: rgba(255, 255, 255, 0.1);
48+
backdrop-filter: blur(10px);
49+
border-radius: 16px;
50+
padding: 3rem;
51+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
52+
border: 1px solid rgba(255, 255, 255, 0.2);
53+
}
54+
55+
h1 {
56+
font-size: 2.5rem;
57+
font-weight: 700;
58+
text-align: center;
59+
margin-bottom: 2rem;
60+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
61+
}
62+
63+
.table-container {
64+
overflow-x: auto;
65+
border-radius: 12px;
66+
background: rgba(255, 255, 255, 0.05);
67+
backdrop-filter: blur(5px);
68+
border: 1px solid rgba(255, 255, 255, 0.1);
69+
}
70+
71+
table {
72+
width: 100%;
73+
border-collapse: collapse;
74+
font-size: 1rem;
75+
}
76+
77+
th {
78+
background: rgba(255, 255, 255, 0.1);
79+
padding: 1.2rem 1rem;
80+
font-weight: 600;
81+
text-transform: uppercase;
82+
letter-spacing: 0.5px;
83+
font-size: 0.9rem;
84+
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
85+
}
86+
87+
td {
88+
padding: 1rem;
89+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
90+
transition: background-color 0.3s ease;
91+
}
92+
93+
tr:hover td {
94+
background: rgba(255, 255, 255, 0.05);
95+
}
96+
97+
tr:last-child td {
98+
border-bottom: none;
99+
}
100+
101+
a {
102+
color: #ffd700;
103+
text-decoration: none;
104+
font-weight: 500;
105+
transition: all 0.3s ease;
106+
border-bottom: 2px solid transparent;
107+
}
108+
109+
a:hover {
110+
color: #ffed4e;
111+
border-bottom-color: #ffd700;
112+
}
113+
114+
.status-badge {
115+
display: inline-block;
116+
padding: 0.4rem 0.8rem;
117+
border-radius: 20px;
118+
font-weight: 600;
119+
font-size: 0.9rem;
120+
min-width: 50px;
121+
text-align: center;
122+
}
123+
124+
.status-passed {
125+
background: linear-gradient(135deg, #28a745, #20c997);
126+
color: white;
127+
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
128+
}
129+
130+
.status-failed {
131+
background: linear-gradient(135deg, #dc3545, #e74c3c);
132+
color: white;
133+
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
134+
}
135+
136+
@media (max-width: 768px) {
137+
.container {
138+
padding: 1rem;
139+
}
140+
141+
.main-content {
142+
padding: 2rem;
143+
}
144+
145+
h1 {
146+
font-size: 2rem;
147+
}
148+
149+
th, td {
150+
padding: 0.8rem 0.5rem;
151+
font-size: 0.9rem;
152+
}
64153
154+
.status-badge {
155+
padding: 0.3rem 0.6rem;
156+
font-size: 0.8rem;
157+
}
158+
}
159+
</style>
65160
</head>
161+
<body>
162+
<div class="container">
163+
<header class="header">
164+
<a href="/audit" rel="home" class="site-logo">
165+
<img src="https://cdn.cookielaw.org/logos/8814ea97-7d41-4933-8a06-f5b8e65f6da8/019875a3-220e-7660-b879-5fc4d8416586/902ccc58-4d41-43a9-8194-dfe1b4404bb0/sophos-logo@2x.png"
166+
alt="Sophos"
167+
style="height: 32px; width: auto; filter: brightness(0) invert(1) drop-shadow(1px 1px 2px rgba(0,0,0,0.3));" />
168+
</a>
169+
</header>
66170

171+
<main class="main-content">
172+
<h1>{{ title }}</h1>
173+
<div class="table-container">
174+
<table>
175+
<thead>
176+
<tr>
177+
<th style="text-align: left;">Firewall</th>
178+
<th style="text-align: center;">Passed</th>
179+
<th style="text-align: center;">Failed</th>
180+
</tr>
181+
</thead>
182+
<tbody>
183+
{% for firewall in status_dict.keys() %}
184+
<tr>
185+
<td style="text-align: left;">
186+
{% if 'web' in dirname %}
187+
{% set dir_paths = dirname.split('/') %}
188+
{% set audit_dir = dir_paths[1] %}
189+
<a href="/{{ audit_dir }}/{{ firewall }}.html">{{ firewall }}</a>
190+
{% else %}
191+
<a href="file:{{ firewall }}.html">{{ firewall }}</a>
192+
{% endif %}
193+
</td>
194+
<td style="text-align: center;">
195+
<span class="status-badge status-passed">{{ status_dict[firewall].success_ct }}</span>
196+
</td>
197+
<td style="text-align: center;">
198+
<span class="status-badge status-failed">{{ status_dict[firewall].failed_ct }}</span>
199+
</td>
200+
</tr>
201+
{% endfor %}
202+
</tbody>
203+
</table>
204+
</div>
205+
</main>
206+
</div>
207+
</body>
67208
</html>

0 commit comments

Comments
 (0)