c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Initial astro commit

Browse Source
This commit is contained in:
Daniel Kluge
2023-12-11 23:41:48 +01:00
commit 4671378238
81 changed files with 18248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
src/pages/404.astro Normal file
View File

@@ -0,0 +1,241 @@
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="Not found">
<div id="wrapper">
<div id="box">
<svg viewBox="30 -20 450 280" x="0" y="0">
<!-- Box -->
<polygon
points="100,70 170,0 370,50 370,180"
style="fill:#b58747;"></polygon>
<defs>
<linearGradient
id="shadow_grad1"
x1="50%"
y1="0%"
x2="0%"
y2="50%"
>
<stop
offset="0%"
style="stop-color:#876029;stop-opacity:1"></stop>
<stop
offset="100%"
style="stop-color:#000000;stop-opacity:1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient
id="shadow_grad2"
x1="0%"
y1="0%"
x2="50%"
y2="100%"
>
<stop
offset="0%"
style="stop-color:#876029;stop-opacity:1"></stop>
<stop
offset="100%"
style="stop-color:#000000;stop-opacity:1"></stop>
</linearGradient>
</defs>
<polygon
points="100,70 170,0 330,100 300,120"
style="fill:#876029;fill:url(#shadow_grad1)"></polygon>
<polygon
points="100,70 170,0 170,130 100,200, 100,70"
style="fill:#876029;fill:url(#shadow_grad2)"></polygon>
<line
x1="170"
y1="0"
x2="370"
y2="50"
style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"
></line>
<line
x1="170"
y1="0"
x2="170"
y2="130"
style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"
></line>
<!-- Katzenschweif -->
<path
id="schweif"
d="M 280,120 C 250 100, 310 70, 320 20"
style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round"
></path>
<!-- Box-linien -->
<polygon
points="100,70 300,120 370,50 370,180 300,250 100,200"
style="fill:#d19b4f;"></polygon>
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
<line x1="100" y1="70" x2="100" y2="200"></line>
<line x1="100" y1="200" x2="300" y2="250"></line>
<line x1="300" y1="250" x2="300" y2="120"></line>
<line x1="100" y1="70" x2="300" y2="120"></line>
<line x1="300" y1="120" x2="370" y2="50"></line>
<line x1="300" y1="250" x2="370" y2="180"></line>
<line x1="370" y1="50" x2="370" y2="180"></line>
</g>
<!-- Lappen-rechts -->
<polygon
points="300,120 350,150 420,80 370,50"
style="fill:#b58747;"></polygon>
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
<line x1="300" y1="120" x2="370" y2="50"></line>
<line x1="300" y1="120" x2="350" y2="150"></line>
<line x1="350" y1="150" x2="420" y2="80"></line>
<line x1="370" y1="50" x2="420" y2="80"></line>
</g>
<!-- Lappen-links -->
<polygon
points="100,70 50,100 120,30 170,0"
style="fill:#b58747;"></polygon>
<g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
<line x1="100" y1="70" x2="170" y2="0"></line>
<line x1="100" y1="70" x2="50" y2="100"></line>
<line x1="50" y1="100" x2="120" y2="30"></line>
<line x1="170" y1="0" x2="120" y2="30"></line>
</g>
<!-- Text -->
<text
x="120"
y="120"
style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);"
>404</text
>
<!-- Killeraugen -->
<ellipse
cx="275"
cy="150"
rx="32"
ry="20"
style="fill:#291e0f;transform:rotateZ(12deg)"></ellipse>
<ellipse
cx="266"
cy="153"
rx="7"
ry="5"
style="fill:#4a6b2a;transform:rotateZ(12deg)"></ellipse>
<ellipse
cx="266"
cy="153"
rx="2"
ry="5"
style="fill:#000000;transform:rotateZ(12deg)"></ellipse>
<ellipse
cx="285"
cy="153"
rx="7"
ry="5"
style="fill:#4a6b2a;transform:rotateZ(12deg)"></ellipse>
<ellipse
cx="285"
cy="153"
rx="2"
ry="5"
style="fill:#000000;transform:rotateZ(12deg)"></ellipse>
<rect
id="blinzeln"
width="40"
height="22"
x="255"
y="139"
style="fill:#291e0f;transform:rotateZ(12deg);"></rect>
</svg>
</div>
<div id="errorText">
The site you requested could not be found.<br />
<a href="/">&gt; Back to the main page &lt;</a>
</div>
</div>
</Layout>
<style>
/*.container {
background: #222222;
width: 100vw;
height: 100vh;
}*/
#errorText {
margin-top: 2vh;
color: #fff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 150%;
}
#wrapper a:link,
#wrapper a:visited,
#wrapper a:hover,
#wrapper a:active {
color: #fff;
font-weight: bold;
text-decoration: none;
}
#wrapper {
margin: auto;
position: relative;
}
#box {
max-width: 800px;
margin: auto;
}
@keyframes schweif {
0% {
d: path("M 280,120 C 250 100, 310 70, 320 20");
}
12.5% {
d: path("M 280,120 C 260 100, 280 70, 310 20");
}
25% {
d: path("M 280,120 C 280 100, 260 70, 290 20");
}
37.5% {
d: path("M 280,120 C 280 100, 240 70, 270 20");
}
50% {
d: path("M 280,120 C 280 100, 240 70, 230 20");
}
62.5% {
d: path("M 280,120 C 270 100, 260 70, 250 20");
}
75% {
d: path("M 280,120 C 270 100, 280 70, 270 20");
}
87.5% {
d: path("M 280,120 C 250 100, 310 70, 290 20");
}
100% {
d: path("M 280,120 C 250 100, 310 70, 320 20");
}
}
#schweif {
animation-name: schweif;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#box svg:hover > #schweif {
animation-duration: 1s;
}
#blinzeln {
fill-opacity: 1;
transition: fill-opacity 0.5s;
}
#box svg:hover > #blinzeln {
fill-opacity: 0;
}
</style>