michael/Pihole block page

pi-hole-block-page.html · 6.0 KiB · HTML Raw

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Access Blocked - Pi-hole</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: #222d32;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

.container {
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            width: 100%;
            padding: 40px;
            text-align: center;
            border-top: 4px solid #dd4b39;
        }

.icon {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
        }

.icon svg {
            width: 100%;
            height: 100%;
        }

h1 {
            color: #222d32;
            font-size: 32px;
            margin-bottom: 10px;
        }

.subtitle {
            color: #222d32;
            font-size: 16px;
            margin-bottom: 30px;
            opacity: 0.7;
        }

.domain-box {
            background: #ecf0f5;
            border: 2px solid #d2d6de;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }

.domain-label {
            color: #222d32;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            font-weight: 600;
            opacity: 0.7;
        }

.domain-name {
            color: #222d32;
            font-size: 20px;
            font-weight: 600;
            word-break: break-all;
        }

.reason-box {
            background: #fee;
            border-left: 4px solid #dc2626;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: left;
        }

.unblock-btn {
            display: inline-block;
            background: #3c8dbc;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 20px;
            text-decoration: none;
        }

.unblock-btn:hover {
            background: #357ca5;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(60, 141, 188, 0.3);
        }

.unblock-btn:active {
            transform: translateY(0);
        }

.reason-title {
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 8px;
            font-size: 16px;
        }

.reason-text {
            color: #4a5568;
            font-size: 14px;
            line-height: 1.6;
        }

.loading {
            color: #718096;
            font-size: 14px;
            padding: 20px;
        }

.info {
            background: #ecf0f5;
            border-radius: 8px;
            padding: 15px;
            font-size: 14px;
            color: #222d32;
            margin-top: 20px;
            border-left: 3px solid #3c8dbc;
        }

.footer {
            margin-top: 30px;
            color: #d2d6de;
            font-size: 13px;
        }

.footer a {
            color: #3c8dbc;
            text-decoration: none;
        }

.footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 90 130">
            <defs>
                <linearGradient id="a" x1="0" x2=".8" y1="0" y2="0">
                    <stop offset="0" stop-color="#22b225"/>
                    <stop offset="1" stop-color="#29fc2e"/>
                </linearGradient>
                <path id="b"
                      d="M1 85.459c0-1.717 1.707-16.993 16.907-16.993 9.998-.717 17.766 7.169 27.464 7.169 24.208-1.814 20.952-34.293-.252-34.293-5.3-.014-10.179 2.22-13.929 5.954L6.738 71.747C2.68 75.792 1 80.972 1 85.459"/>
            </defs>
            <path fill="url(#a)"
                  d="M37.4 40.145C21.18 38.415 4.84 26.155 3.55.215c25.17 0 38.63 14.9 39.93 38.51 4.76-28.32 27.07-25 27.07-25 1.06 16.05-12.12 25.78-27.07 26.59-4.2-8.85-29.36-30.56-29.36-30.56a.07.07 0 0 0-.11.08s24.28 21.15 23.39 30.31"/>
            <use xlink:href="#b" fill="#f60d1a" transform="rotate(180 45 85.3)"/>
            <use xlink:href="#b" fill="#96060c" transform="rotate(90 45 85.3)"/>
            <use xlink:href="#b" fill="#96060c" transform="rotate(-90 45 85.3)"/>
            <use xlink:href="#b" fill="#f60d1a"/>
        </svg>

</div>
    <h1>Access Blocked</h1>
    <p class="subtitle">This domain has been blocked by Pi-hole</p>

<div class="domain-box">
        <div class="domain-label">Blocked Domain</div>
        <div class="domain-name" id="blockedDomain"></div>
    </div>

<div class="reason-box">
        <div class="reason-title">Domain Blocked</div>
        <div class="reason-text">This domain has been blocked by your Pi-hole network filter to protect your network
            from unwanted content.
        </div>
    </div>

<a href="https://home.local.thms.uk/admin/groups/domains" class="unblock-btn">
        Manage Domain Settings
    </a>

<div class="info">
	💡 Contact Michael if you have any questions.
    </div>

<div class="footer">
        Protected by <a href="https://pi-hole.net" target="_blank">Pi-hole</a>
    </div>
</div>

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Access Blocked - Pi-hole</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: #222d32;
17	min-height: 100vh;
18	display: flex;
19	align-items: center;
20	justify-content: center;
21	padding: 20px;
22	}
23
24	.container {
25	background: #ffffff;
26	border-radius: 16px;
27	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
28	max-width: 600px;
29	width: 100%;
30	padding: 40px;
31	text-align: center;
32	border-top: 4px solid #dd4b39;
33	}
34
35	.icon {
36	width: 120px;
37	height: 120px;
38	margin: 0 auto 20px;
39	}
40
41	.icon svg {
42	width: 100%;
43	height: 100%;
44	}
45
46	h1 {
47	color: #222d32;
48	font-size: 32px;
49	margin-bottom: 10px;
50	}
51
52	.subtitle {
53	color: #222d32;
54	font-size: 16px;
55	margin-bottom: 30px;
56	opacity: 0.7;
57	}
58
59	.domain-box {
60	background: #ecf0f5;
61	border: 2px solid #d2d6de;
62	border-radius: 8px;
63	padding: 20px;
64	margin-bottom: 30px;
65	}
66
67	.domain-label {
68	color: #222d32;
69	font-size: 12px;
70	text-transform: uppercase;
71	letter-spacing: 1px;
72	margin-bottom: 8px;
73	font-weight: 600;
74	opacity: 0.7;
75	}
76
77	.domain-name {
78	color: #222d32;
79	font-size: 20px;
80	font-weight: 600;
81	word-break: break-all;
82	}
83
84	.reason-box {
85	background: #fee;
86	border-left: 4px solid #dc2626;
87	padding: 20px;
88	border-radius: 8px;
89	margin-bottom: 20px;
90	text-align: left;
91	}
92
93	.unblock-btn {
94	display: inline-block;
95	background: #3c8dbc;
96	color: white;
97	border: none;
98	padding: 15px 30px;
99	border-radius: 8px;
100	font-size: 16px;
101	font-weight: 600;
102	cursor: pointer;
103	transition: all 0.3s;
104	margin-bottom: 20px;
105	text-decoration: none;
106	}
107
108	.unblock-btn:hover {
109	background: #357ca5;
110	transform: translateY(-2px);
111	box-shadow: 0 10px 25px rgba(60, 141, 188, 0.3);
112	}
113
114	.unblock-btn:active {
115	transform: translateY(0);
116	}
117
118	.reason-title {
119	font-weight: 600;
120	color: #2d3748;
121	margin-bottom: 8px;
122	font-size: 16px;
123	}
124
125	.reason-text {
126	color: #4a5568;
127	font-size: 14px;
128	line-height: 1.6;
129	}
130
131	.loading {
132	color: #718096;
133	font-size: 14px;
134	padding: 20px;
135	}
136
137	.info {
138	background: #ecf0f5;
139	border-radius: 8px;
140	padding: 15px;
141	font-size: 14px;
142	color: #222d32;
143	margin-top: 20px;
144	border-left: 3px solid #3c8dbc;
145	}
146
147	.footer {
148	margin-top: 30px;
149	color: #d2d6de;
150	font-size: 13px;
151	}
152
153	.footer a {
154	color: #3c8dbc;
155	text-decoration: none;
156	}
157
158	.footer a:hover {
159	text-decoration: underline;
160	}
161	</style>
162	</head>
163	<body>
164	<div class="container">
165	<div class="icon">
166	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 90 130">
167	<defs>
168	<linearGradient id="a" x1="0" x2=".8" y1="0" y2="0">
169	<stop offset="0" stop-color="#22b225"/>
170	<stop offset="1" stop-color="#29fc2e"/>
171	</linearGradient>
172	<path id="b"
173	d="M1 85.459c0-1.717 1.707-16.993 16.907-16.993 9.998-.717 17.766 7.169 27.464 7.169 24.208-1.814 20.952-34.293-.252-34.293-5.3-.014-10.179 2.22-13.929 5.954L6.738 71.747C2.68 75.792 1 80.972 1 85.459"/>
174	</defs>
175	<path fill="url(#a)"
176	d="M37.4 40.145C21.18 38.415 4.84 26.155 3.55.215c25.17 0 38.63 14.9 39.93 38.51 4.76-28.32 27.07-25 27.07-25 1.06 16.05-12.12 25.78-27.07 26.59-4.2-8.85-29.36-30.56-29.36-30.56a.07.07 0 0 0-.11.08s24.28 21.15 23.39 30.31"/>
177	<use xlink:href="#b" fill="#f60d1a" transform="rotate(180 45 85.3)"/>
178	<use xlink:href="#b" fill="#96060c" transform="rotate(90 45 85.3)"/>
179	<use xlink:href="#b" fill="#96060c" transform="rotate(-90 45 85.3)"/>
180	<use xlink:href="#b" fill="#f60d1a"/>
181	</svg>
182
183	</div>
184	<h1>Access Blocked</h1>
185	<p class="subtitle">This domain has been blocked by Pi-hole</p>
186
187	<div class="domain-box">
188	<div class="domain-label">Blocked Domain</div>
189	<div class="domain-name" id="blockedDomain"></div>
190	</div>
191
192	<div class="reason-box">
193	<div class="reason-title">Domain Blocked</div>
194	<div class="reason-text">This domain has been blocked by your Pi-hole network filter to protect your network
195	from unwanted content.
196	</div>
197	</div>
198
199	<a href="https://home.local.thms.uk/admin/groups/domains" class="unblock-btn">
200	Manage Domain Settings
201	</a>
202
203	<div class="info">
204	💡 Contact Michael if you have any questions.
205	</div>
206
207	<div class="footer">
208	Protected by <a href="https://pi-hole.net" target="_blank">Pi-hole</a>
209	</div>
210	</div>
211
212	<script>
213	document.getElementById('blockedDomain').textContent = new URLSearchParams(window.location.search).get('domain') \|\| window.location.hostname;
214	</script>
215	</body>
216	</html>