mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:31:09 -05:00
remove backend
This commit is contained in:
pacnpal
161
templates/404/home.html
Normal file
161
templates/404/home.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>PARK CLOSED</title>
|
||||
<style>
|
||||
:root{
|
||||
--bg-wood:#6b4b2a;
|
||||
--plank-dark:#5a3f28;
|
||||
--plank-light:#8b5e3c;
|
||||
--text:#f7f3ee;
|
||||
--accent:#d9534f;
|
||||
}
|
||||
@media (prefers-color-scheme:dark){
|
||||
:root{
|
||||
--bg-wood:#2b1d14;
|
||||
--plank-dark:#24170f;
|
||||
--plank-light:#3b2a1f;
|
||||
--text:#fff8f2;
|
||||
--accent:#ff6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
|
||||
/* Boarded-up background using repeating gradients to simulate planks and nails */
|
||||
body{
|
||||
min-height:100%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 10%, rgba(0,0,0,0.08) 0%, transparent 40%),
|
||||
repeating-linear-gradient(90deg, var(--plank-dark) 0 60px, var(--plank-light) 60px 120px),
|
||||
linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02));
|
||||
color:var(--text);
|
||||
padding:24px;
|
||||
}
|
||||
|
||||
.boarded {
|
||||
width:100%;
|
||||
max-width:1100px;
|
||||
padding:48px;
|
||||
border-radius:8px;
|
||||
text-align:center;
|
||||
position:relative;
|
||||
box-shadow: 0 12px 40px rgba(2,6,23,0.45);
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* darkened vignette to feel abandoned */
|
||||
.boarded::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0;
|
||||
background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.32));
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
/* Big roughed-up title */
|
||||
h1 {
|
||||
margin:0;
|
||||
font-size:clamp(48px, 12vw, 180px);
|
||||
line-height:0.9;
|
||||
letter-spacing:6px;
|
||||
font-weight:900;
|
||||
text-transform:uppercase;
|
||||
color:var(--text);
|
||||
text-shadow:
|
||||
0 2px 0 rgba(0,0,0,0.35),
|
||||
0 8px 30px rgba(0,0,0,0.45);
|
||||
transform:skewX(-6deg);
|
||||
display:inline-block;
|
||||
padding:12px 28px;
|
||||
background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255,255,255,0.02));
|
||||
border-radius:6px;
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
|
||||
/* Painted-on look for the board text */
|
||||
.stencil {
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
color:var(--text);
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(0,0,0,0.12) 0 2px,
|
||||
rgba(255,255,255,0.02) 2px 4px
|
||||
);
|
||||
-webkit-mask-image: linear-gradient(#000, #000);
|
||||
}
|
||||
|
||||
p.lead{
|
||||
margin:20px 0 0;
|
||||
font-size:18px;
|
||||
color:rgba(255,255,255,0.85);
|
||||
}
|
||||
|
||||
.actions{
|
||||
margin-top:26px;
|
||||
display:flex;
|
||||
gap:12px;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background:var(--accent);
|
||||
color:white;
|
||||
padding:12px 20px;
|
||||
border-radius:8px;
|
||||
text-decoration:none;
|
||||
font-weight:700;
|
||||
box-shadow:0 8px 20px rgba(0,0,0,0.32);
|
||||
}
|
||||
|
||||
.link {
|
||||
color:rgba(255,255,255,0.9);
|
||||
text-decoration:underline;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
/* decorative nails */
|
||||
.nail{
|
||||
width:14px;height:14px;border-radius:50%;
|
||||
position:absolute;background:radial-gradient(circle at 35% 30%, #fff8, #0003 40%);
|
||||
box-shadow:0 2px 6px rgba(0,0,0,0.6);
|
||||
transform:translate(-50%,-50%);
|
||||
mix-blend-mode:multiply;
|
||||
opacity:0.9;
|
||||
}
|
||||
|
||||
/* responsive smaller paddings */
|
||||
@media (max-width:720px){
|
||||
.boarded{padding:28px}
|
||||
p.lead{font-size:15px}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="boarded" role="main" aria-labelledby="page-title">
|
||||
<!-- decorative nails placed around -->
|
||||
<div class="nail" style="left:8%;top:12%;"></div>
|
||||
<div class="nail" style="left:92%;top:14%;"></div>
|
||||
<div class="nail" style="left:6%;top:86%;"></div>
|
||||
<div class="nail" style="left:94%;top:84%;"></div>
|
||||
|
||||
<h1 id="page-title" class="stencil">PARK CLOSED</h1>
|
||||
|
||||
<p class="lead">We're sorry — this page is temporarily closed.</p>
|
||||
|
||||
<div class="actions" role="group" aria-label="navigation">
|
||||
<a class="btn" href="/">Home</a>
|
||||
<a class="link" href="/search/">Search</a>
|
||||
<a class="link" href="/contact/">Contact Us</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user