31 lines
2.0 KiB
Vue
31 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
defineProps<{ message?: string }>();
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Wartung" />
|
|
<div class="page">
|
|
<div class="glow"></div>
|
|
<div class="card">
|
|
<div class="icon-wrap"><span class="icon">🔧</span></div>
|
|
<h1>Wartungsmodus</h1>
|
|
<p>{{ message || 'Wir führen gerade Wartungsarbeiten durch. Bitte komm später zurück.' }}</p>
|
|
<div class="code">503</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
.page { min-height: 100vh; background: #050505; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; position: relative; overflow: hidden; }
|
|
.glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(223,0,106,0.1) 0%, transparent 70%); pointer-events: none; }
|
|
.card { position: relative; z-index: 10; background: rgba(15,15,16,0.95); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 48px 40px; max-width: 460px; width: 90%; text-align: center; box-shadow: 0 40px 80px rgba(0,0,0,0.6); }
|
|
.icon-wrap { width: 80px; height: 80px; background: rgba(223,0,106,0.08); border: 1px solid rgba(223,0,106,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; animation: pulse 3s ease-in-out infinite; }
|
|
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(223,0,106,0.2); } 50% { box-shadow: 0 0 0 12px rgba(223,0,106,0); } }
|
|
.icon { font-size: 36px; }
|
|
h1 { font-size: 28px; font-weight: 900; color: #fff; letter-spacing: -0.5px; margin-bottom: 16px; }
|
|
p { color: #a1a1aa; font-size: 15px; line-height: 1.6; margin-bottom: 32px; }
|
|
.code { font-size: 72px; font-weight: 900; color: rgba(223,0,106,0.12); letter-spacing: -4px; line-height: 1; user-select: none; }
|
|
</style>
|