matthias.lotz
e4a76a6b3d
- Created generic ErrorPage.js with errorCode prop - Centralized error messages in ERROR_MESSAGES dictionary - Updated App.js to use ErrorPage for all error routes - Updated ErrorBoundary.js to use new ErrorPage component - Removed duplicate files: 403Page.js, 404Page.js, 500Page.js, 502Page.js, 503Page.js - Fixed 403/404 routing: protected routes show 403, unknown routes show 404 - Error pages now vertically centered with min-height: 100vh
151 lines
5.7 KiB
HTML
151 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Loading Animation Test</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto', Arial, sans-serif;
|
|
background-color: whitesmoke;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.demo-section {
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
margin-bottom: 30px;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
}
|
|
|
|
.demo-section h2 {
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.demo-description {
|
|
color: #666;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.loading-logo-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 400px;
|
|
position: relative;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
/* Äußerer Container: Y-Achsen-Rotation für Wolke UND Hammer zusammen */
|
|
.rotor {
|
|
display: inline-block;
|
|
transform-origin: center;
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
animation: rotateY 4s linear infinite;
|
|
}
|
|
|
|
.loading-logo {
|
|
display: block;
|
|
width: 400px;
|
|
height: auto;
|
|
}
|
|
|
|
/* Hammer: zusätzliche Rotation um eigene Längsachse */
|
|
.loading-logo #g136 {
|
|
transform-box: fill-box; /* Bezieht sich auf eigene Bounding Box */
|
|
transform-origin: center; /* Mittelpunkt der eigenen BBox */
|
|
will-change: transform;
|
|
animation: rotateHammerAxis 3s linear infinite;
|
|
}
|
|
|
|
/* Y-Achsen-Rotation mit leichter X-Neigung (vermeidet Totpunkt bei 90°) */
|
|
@keyframes rotateY {
|
|
from {
|
|
transform: rotateY(0deg);
|
|
}
|
|
to {
|
|
transform: rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
/* Hammer-Rotation um eigene Längsachse (diagonal) */
|
|
@keyframes rotateHammerAxis {
|
|
from {
|
|
transform: rotate3d(1, -1, 0, 0deg);
|
|
}
|
|
to {
|
|
transform: rotate3d(1, -1, 0, 360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎨 Loading Animation Test & Fehlerseiten-Design</h1>
|
|
|
|
<!-- Original Loading Animation -->
|
|
<div class="demo-section">
|
|
<h2>Original Loading Animation</h2>
|
|
<p class="demo-description">Die Standard-Loading-Animation mit grünem Hammer</p>
|
|
<div class="loading-logo-container">
|
|
<div class="rotor">
|
|
<svg
|
|
class="loading-logo"
|
|
version="1.1"
|
|
viewBox="260 90 310 190"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g id="g136" display="inline">
|
|
<path
|
|
display="inline"
|
|
fill="#76b043"
|
|
d="m 386.456,248.659 c -0.824,0.825 -2.157,0.825 -2.987,0 L 365.572,230.76 c -0.818,-0.816 -0.818,-2.136 -0.005,-2.962 0.005,-0.008 0.005,-0.011 0.011,-0.019 0.006,-0.002 0.01,-0.002 0.017,-0.01 l 52.177,-52.177 20.877,20.876 z"
|
|
/>
|
|
<path
|
|
display="inline"
|
|
fill="#76b043"
|
|
d="m 473.015,185.95 c -0.021,0.018 -0.025,0.045 -0.043,0.063 -0.02,0.02 -0.045,0.022 -0.064,0.041 l -17.811,17.813 c -0.018,0.019 -0.023,0.046 -0.041,0.061 -0.02,0.02 -0.045,0.026 -0.064,0.045 -0.815,0.758 -2.064,0.754 -2.877,-0.012 -0.012,-0.014 -0.035,-0.018 -0.047,-0.033 -0.012,-0.012 -0.019,-0.033 -0.032,-0.046 l -49.265,-49.265 c -0.014,-0.016 -0.035,-0.02 -0.048,-0.034 -0.013,-0.011 -0.019,-0.034 -0.032,-0.049 -0.783,-0.826 -0.779,-2.121 0.032,-2.929 0.31,-0.312 0.698,-0.465 1.093,-0.543 l 0.004,-0.039 30.859,-5.149 0.035,0.034 c 0.607,-0.061 1.232,0.107 1.704,0.578 l 36.547,36.548 c 0.808,0.811 0.819,2.087 0.05,2.916"
|
|
/>
|
|
</g>
|
|
<g id="g561" display="inline">
|
|
<path
|
|
fill="#48484a"
|
|
d="m 501.16,142.979 c -4.11,0 -8.124,0.403 -12.017,1.146 -14.397,-26.528 -42.494,-44.539 -74.798,-44.539 -41.217,0 -75.58,29.322 -83.381,68.243 -1.451,-0.123 -2.914,-0.2 -4.396,-0.2 -28.181,0 -51.027,22.845 -51.027,51.026 0,28.18 22.847,51.026 51.027,51.026 14.838,0 159.491,-10e-4 174.591,-10e-4 35.229,0 63.787,-27.689 63.787,-62.916 10e-4,-35.225 -28.557,-63.785 -63.786,-63.785 M 386.432,248.707 c -0.824,0.825 -2.157,0.825 -2.987,0 l -17.897,-17.899 c -0.818,-0.816 -0.818,-2.136 -0.005,-2.962 0.005,-0.008 0.005,-0.011 0.011,-0.019 0.006,-0.002 0.01,-0.002 0.017,-0.01 l 52.177,-52.177 20.877,20.876 z m 86.558,-62.709 c -0.021,0.018 -0.025,0.045 -0.043,0.063 -0.02,0.02 -0.045,0.022 -0.064,0.041 l -17.811,17.813 c -0.018,0.019 -0.023,0.046 -0.041,0.061 -0.02,0.02 -0.045,0.026 -0.064,0.045 -0.815,0.758 -2.064,0.754 -2.877,-0.012 -0.012,-0.014 -0.035,-0.018 -0.047,-0.033 -0.012,-0.012 -0.019,-0.033 -0.032,-0.046 l -49.265,-49.265 c -0.014,-0.016 -0.035,-0.02 -0.048,-0.034 -0.013,-0.011 -0.019,-0.034 -0.032,-0.049 -0.783,-0.826 -0.779,-2.121 0.032,-2.929 0.31,-0.312 0.698,-0.465 1.093,-0.543 l 0.004,-0.039 30.859,-5.149 0.035,0.034 c 0.607,-0.061 1.232,0.107 1.704,0.578 l 36.547,36.548 c 0.809,0.811 0.82,2.087 0.05,2.916"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|