Wir frischen unsere Website für Sie auf!
<?php
/* Template Name: Fullscreen Maintenance Page */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wartungsarbeiten | <?php bloginfo( 'name' ); ?></title>
<style>
/* Base Reset */
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden; /* No scrollbars */
}
/* Fullscreen Background & Glow Effects */
.maintenance-wrapper {
position: relative;
width: 100%;
height: 100vh;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
/* Light Glow Indigo (Left Top) */
.maintenance-wrapper::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 50%;
height: 50%;
background: rgba(75, 0, 130, 0.04); /* Kamrang Indigo */
filter: blur(100px);
border-radius: 50%;
z-index: -1;
}
/* Light Glow Yellow (Right Bottom) */
.maintenance-wrapper::after {
content: '';
position: absolute;
bottom: -20%;
right: -10%;
width: 50%;
height: 50%;
background: rgba(255, 255, 0, 0.05); /* Kamrang Yellow */
filter: blur(100px);
border-radius: 50%;
z-index: -1;
}
/* Glassmorphism Box */
.glass-box {
background: rgba(255, 255, 255, 0.3); /* Transparent White */
border-radius: 20px;
padding: 40px;
width: 90%;
max-width: 500px;
text-align: center;
/* Glass Effects */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05); /* Soft Shadow */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.glass-box h1 {
font-size: 2rem;
color: #333;
margin-top: 0;
margin-bottom: 20px;
}
.glass-box p {
font-size: 1.1rem;
color: #555;
line-height: 1.7;
margin-bottom: 30px;
}
/* Button Container */
.button-group {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
/* Rounded Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
border-radius: 50px; /* Full Rounded */
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
/* Indigo Button (Call) */
.btn-call {
background-color: rgb(75, 0, 130);
color: white;
}
.btn-call:hover {
background-color: rgb(65, 0, 110);
transform: translateY(-2px);
}
/* Yellow Button (Email) */
.btn-email {
background-color: #ffd700;
color: #333;
}
.btn-email:hover {
background-color: #fbd000;
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 480px) {
.glass-box { padding: 30px 20px; }
.glass-box h1 { font-size: 1.6rem; }
.button-group { flex-direction: column; width: 100%; }
.btn { width: 100%; box-sizing: border-box; }
}
</style>
</head>
<body <?php body_class(); ?>>
<div class="maintenance-wrapper">
<div class="glass-box">
<h1>Wir frischen unsere Website für Sie auf!</h1>
<p>Wir arbeiten zurzeit an der neuen Version unserer Website, um Ihnen ein noch besseres Erlebnis zu bieten. In wenigen Stunden sind wir wieder für Sie erreichbar. Vielen Dank für Ihre Geduld!</p>
<div class="button-group">
<a href="tel:+49123456789" class="btn btn-call">📞 Anrufen</a>
<a href="mailto:info@yourdomain.com" class="btn btn-email">📧 E-Mail senden</a>
</div>
</div>
</div>
</body>
</html>
