Skip to content

Commit 1592856

Browse files
mhmdkshmhmdksh
committed
Add Cloudflare DNS support and access-denied.html template
1 parent a87d6bb commit 1592856

File tree

2 files changed

+349
-2
lines changed

2 files changed

+349
-2
lines changed

‎Dockerfile‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ RUN xcaddy build \
55
--with github.com/porech/caddy-maxmind-geolocation \
66
--with github.com/muety/caddy-remote-host \
77
--with github.com/caddy-dns/godaddy \
8-
--with github.com/greenpau/caddy-security
8+
--with github.com/greenpau/caddy-security \
9+
--with github.com/caddy-dns/cloudflare
910

1011
FROM caddy:2-alpine
1112

12-
COPY --from=builder /usr/bin/caddy /usr/bin/caddy
13+
COPY --from=builder /usr/bin/caddy /usr/bin/caddy
14+
COPY access-denied.html /opt/access-denied.html

‎access-denied.html‎

Lines changed: 345 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,345 @@
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 Denied</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
html, body {
15+
height: 100%;
16+
width: 100%;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
21+
background-color: #f8f8f8;
22+
color: #1a1523;
23+
}
24+
25+
.page-container {
26+
width: 100%;
27+
height: 100%;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
padding: 20px;
32+
background-image:
33+
linear-gradient(0deg, transparent 24%,
34+
rgba(26, 21, 35, 0.03) 25%,
35+
rgba(26, 21, 35, 0.03) 26%,
36+
transparent 27%, transparent 74%,
37+
rgba(26, 21, 35, 0.03) 75%,
38+
rgba(26, 21, 35, 0.03) 76%,
39+
transparent 77%),
40+
linear-gradient(90deg, transparent 24%,
41+
rgba(26, 21, 35, 0.03) 25%,
42+
rgba(26, 21, 35, 0.03) 26%,
43+
transparent 27%, transparent 74%,
44+
rgba(26, 21, 35, 0.03) 75%,
45+
rgba(26, 21, 35, 0.03) 76%,
46+
transparent 77%);
47+
background-size: 50px 50px;
48+
}
49+
50+
.container {
51+
background: white;
52+
padding: 3rem;
53+
border-radius: 12px;
54+
box-shadow: 0 4px 24px rgba(26, 21, 35, 0.08);
55+
width: 100%;
56+
max-width: 800px;
57+
position: relative;
58+
overflow: hidden;
59+
text-align: center;
60+
}
61+
62+
.container::before {
63+
content: '';
64+
position: absolute;
65+
top: 0;
66+
left: 0;
67+
right: 0;
68+
bottom: 0;
69+
background: repeating-radial-gradient(
70+
circle at 50% 50%,
71+
transparent,
72+
transparent 40px,
73+
rgba(26, 21, 35, 0.03) 40px,
74+
rgba(26, 21, 35, 0.03) 41px
75+
);
76+
pointer-events: none;
77+
animation: rotateBackground 20s linear infinite;
78+
}
79+
80+
.container::after {
81+
content: '';
82+
position: absolute;
83+
top: 0;
84+
left: 0;
85+
right: 0;
86+
bottom: 0;
87+
background: radial-gradient(
88+
circle at 50% 50%,
89+
transparent 0%,
90+
rgba(26, 21, 35, 0.02) 70%,
91+
rgba(26, 21, 35, 0.05) 100%
92+
);
93+
pointer-events: none;
94+
}
95+
96+
@keyframes rotateBackground {
97+
0% { transform: rotate(0deg); }
98+
100% { transform: rotate(360deg); }
99+
}
100+
101+
.logo {
102+
margin-bottom: 2rem;
103+
position: relative;
104+
z-index: 1;
105+
}
106+
107+
.logo svg {
108+
width: 500px;
109+
height: 250px;
110+
max-width: 100%;
111+
}
112+
113+
.divider {
114+
margin: 2rem 0;
115+
height: 120px;
116+
position: relative;
117+
z-index: 1;
118+
}
119+
120+
.divider svg {
121+
width: 100%;
122+
height: 100%;
123+
}
124+
125+
@keyframes textGlitch {
126+
0% { transform: translate(0, 0); text-shadow: none; }
127+
2% { transform: translate(-2px, 1px); text-shadow: -1px 0 #1a1523; }
128+
4% { transform: translate(2px, -1px); text-shadow: 1px 0 #1a1523; }
129+
6% { transform: translate(0, 0); text-shadow: none; }
130+
100% { transform: translate(0, 0); text-shadow: none; }
131+
}
132+
133+
@keyframes flicker {
134+
0% { opacity: 0.97; }
135+
5% { opacity: 0.95; }
136+
10% { opacity: 0.97; }
137+
15% { opacity: 0.94; }
138+
25% { opacity: 0.98; }
139+
30% { opacity: 0.93; }
140+
35% { opacity: 0.97; }
141+
40% { opacity: 0.95; }
142+
45% { opacity: 0.98; }
143+
50% { opacity: 0.94; }
144+
100% { opacity: 0.98; }
145+
}
146+
147+
h1 {
148+
animation: textGlitch 4s infinite;
149+
margin: 0 0 1rem 0;
150+
font-size: 2.5rem;
151+
font-weight: 600;
152+
letter-spacing: -0.02em;
153+
position: relative;
154+
z-index: 1;
155+
}
156+
157+
p {
158+
margin: 1rem 0;
159+
line-height: 1.6;
160+
color: #4a4a4a;
161+
font-size: 1.125rem;
162+
position: relative;
163+
z-index: 1;
164+
}
165+
166+
.contact {
167+
margin-top: 2rem;
168+
padding-top: 2rem;
169+
border-top: 1px solid rgba(26, 21, 35, 0.1);
170+
position: relative;
171+
z-index: 1;
172+
}
173+
174+
.contact p {
175+
font-weight: 500;
176+
color: #1a1523;
177+
}
178+
179+
@media (max-width: 768px) {
180+
.container {
181+
padding: 2rem;
182+
}
183+
.logo svg {
184+
width: 400px;
185+
height: 200px;
186+
}
187+
.divider {
188+
height: 80px;
189+
}
190+
}
191+
192+
@media (max-width: 480px) {
193+
.container {
194+
padding: 1.5rem;
195+
}
196+
.logo svg {
197+
width: 280px;
198+
height: 140px;
199+
}
200+
.divider {
201+
height: 60px;
202+
}
203+
}
204+
</style>
205+
</head>
206+
<body>
207+
<div class="page-container">
208+
<div class="container">
209+
<div class="logo">
210+
<svg viewBox="0 0 500 250" xmlns="http://www.w3.org/2000/svg">
211+
<!-- Add defs first -->
212+
<defs>
213+
<filter id="crtNoise" x="0%" y="0%" width="100%" height="100%">
214+
<feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="1" result="noise"/>
215+
<feColorMatrix in="noise" type="saturate" values="0" result="desaturatedNoise"/>
216+
<feComposite operator="arithmetic" k1="0" k2="0.03" k3="0" k4="0" in="SourceGraphic" in2="desaturatedNoise"/>
217+
</filter>
218+
<radialGradient id="retroGlow" cx="50%" cy="50%" r="50%">
219+
<stop offset="0%" stop-color="#1a1523" stop-opacity="0.2"/>
220+
<stop offset="100%" stop-color="#1a1523" stop-opacity="0"/>
221+
</radialGradient>
222+
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
223+
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#1a1523" stroke-width="0.5" stroke-opacity="0.1"/>
224+
</pattern>
225+
</defs>
226+
<!-- Background grid -->
227+
<rect width="500" height="250" fill="url(#grid)" opacity="0.3"/>
228+
<!-- Text and other elements -->
229+
<text x="50%" y="40%" text-anchor="middle" fill="#1a1523" font-size="60" font-weight="600" letter-spacing="-0.02em">
230+
General Magic
231+
<animate attributeName="opacity" values="0.95;1;0.95" dur="2s" repeatCount="indefinite"/>
232+
</text>
233+
<text x="50%" y="65%" text-anchor="middle" fill="#1a1523" font-size="30" font-weight="500" letter-spacing="0.02em">
234+
Devops Team
235+
<animate attributeName="opacity" values="0.9;1;0.9" dur="2s" repeatCount="indefinite"/>
236+
</text>
237+
<!-- Animated stars -->
238+
<g fill="#1a1523">
239+
<path d="M150,70 l5,-5 l5,5 l-5,5 z">
240+
<animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/>
241+
<animateTransform attributeName="transform" type="rotate" from="0 155 70" to="360 155 70" dur="10s" repeatCount="indefinite"/>
242+
</path>
243+
<path d="M350,70 l5,-5 l5,5 l-5,5 z">
244+
<animate attributeName="opacity" values="1;0.6;1" dur="3s" repeatCount="indefinite"/>
245+
<animateTransform attributeName="transform" type="rotate" from="0 355 70" to="360 355 70" dur="8s" repeatCount="indefinite"/>
246+
</path>
247+
<path d="M250,90 l4,-4 l4,4 l-4,4 z">
248+
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
249+
<animateTransform attributeName="transform" type="rotate" from="0 254 90" to="360 254 90" dur="12s" repeatCount="indefinite"/>
250+
</path>
251+
</g>
252+
</svg>
253+
</div>
254+
255+
<div class="divider">
256+
<svg viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
257+
<!-- Animated corner accents -->
258+
<path d="M50,20 L80,20 L80,50" fill="none" stroke="#1a1523" stroke-width="1" stroke-opacity="0.2">
259+
<animate attributeName="stroke-dasharray" values="0,200;200,0" dur="3s" repeatCount="indefinite"/>
260+
</path>
261+
<path d="M750,20 L720,20 L720,50" fill="none" stroke="#1a1523" stroke-width="1" stroke-opacity="0.2">
262+
<animate attributeName="stroke-dasharray" values="0,200;200,0" dur="3s" repeatCount="indefinite"/>
263+
</path>
264+
<path d="M50,180 L80,180 L80,150" fill="none" stroke="#1a1523" stroke-width="1" stroke-opacity="0.2">
265+
<animate attributeName="stroke-dasharray" values="0,200;200,0" dur="3s" repeatCount="indefinite"/>
266+
</path>
267+
<path d="M750,180 L720,180 L720,150" fill="none" stroke="#1a1523" stroke-width="1" stroke-opacity="0.2">
268+
<animate attributeName="stroke-dasharray" values="0,200;200,0" dur="3s" repeatCount="indefinite"/>
269+
</path>
270+
271+
<!-- Animated pulse circles -->
272+
<circle cx="400" cy="100" r="80" fill="none" stroke="#1a1523" stroke-width="0.5" stroke-opacity="0.1">
273+
<animate attributeName="r" values="80;85;80" dur="4s" repeatCount="indefinite"/>
274+
<animate attributeName="stroke-opacity" values="0.1;0.05;0.1" dur="4s" repeatCount="indefinite"/>
275+
</circle>
276+
<circle cx="400" cy="100" r="90" fill="none" stroke="#1a1523" stroke-width="0.5" stroke-opacity="0.05">
277+
<animate attributeName="r" values="90;95;90" dur="4s" repeatCount="indefinite" begin="1s"/>
278+
<animate attributeName="stroke-opacity" values="0.05;0.02;0.05" dur="4s" repeatCount="indefinite"/>
279+
</circle>
280+
281+
<!-- Rotating triangles -->
282+
<g transform="translate(400 100)">
283+
<g>
284+
<path d="M-30,-30 L30,-30 L0,30 Z" fill="none" stroke="#1a1523" stroke-width="0.5" stroke-opacity="0.1">
285+
<animateTransform
286+
attributeName="transform"
287+
type="rotate"
288+
from="0"
289+
to="360"
290+
dur="20s"
291+
repeatCount="indefinite"/>
292+
</path>
293+
</g>
294+
<g>
295+
<path d="M-20,-35 L20,-35 L0,20 Z" fill="none" stroke="#1a1523" stroke-width="0.5" stroke-opacity="0.1">
296+
<animateTransform
297+
attributeName="transform"
298+
type="rotate"
299+
from="360"
300+
to="0"
301+
dur="15s"
302+
repeatCount="indefinite"/>
303+
</path>
304+
</g>
305+
</g>
306+
307+
<!-- Animated sine wave -->
308+
<path d="M200,100 Q300,60 400,100 T600,100" fill="none" stroke="#1a1523" stroke-width="2" stroke-opacity="0.3">
309+
<animate attributeName="d"
310+
values="M200,100 Q300,60 400,100 T600,100;
311+
M200,100 Q300,140 400,100 T600,100;
312+
M200,100 Q300,60 400,100 T600,100"
313+
dur="3s"
314+
repeatCount="indefinite"/>
315+
</path>
316+
317+
<!-- Central circle with CRT effect -->
318+
<circle cx="400" cy="100" r="50" fill="url(#retroGlow)" filter="url(#crtNoise)">
319+
<animate attributeName="opacity" values="0.8;0.9;0.8" dur="2s" repeatCount="indefinite"/>
320+
</circle>
321+
<circle cx="400" cy="100" r="40" fill="none" stroke="#1a1523" stroke-width="1">
322+
<animate attributeName="stroke-dasharray" values="0,251.2;251.2,0" dur="3s" repeatCount="indefinite"/>
323+
</circle>
324+
325+
<!-- Geometric accents -->
326+
<g fill="#1a1523" fill-opacity="0.2">
327+
<rect x="370" y="70" width="60" height="60" transform="rotate(45 400 100)">
328+
<animate attributeName="opacity" values="0.2;0.3;0.2" dur="4s" repeatCount="indefinite"/>
329+
</rect>
330+
<circle cx="400" cy="100" r="25">
331+
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="3s" repeatCount="indefinite"/>
332+
</circle>
333+
</g>
334+
</svg>
335+
</div>
336+
337+
<h1>Access Denied</h1>
338+
<p>You don't have permission to access this page.</p>
339+
<div class="contact">
340+
<p>If you believe this is a mistake, please contact your system administrator.</p>
341+
</div>
342+
</div>
343+
</div>
344+
</body>
345+
</html>

0 commit comments

Comments
 (0)