29 lines
1.9 KiB
HTML
29 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CardSync — Verbunden!</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root { --bg:#0e0f14;--accent:#4f8ef7;--accent2:#7c5cfc;--success:#3ecf8e;--text:#e8eaf0;--muted:#7a7f96; }
|
|
body { min-height:100vh;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center; }
|
|
.card { text-align:center;max-width:440px;padding:48px 40px; }
|
|
.icon { font-size:64px;margin-bottom:24px;animation:pop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
|
|
@keyframes pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
|
|
h1 { font-family:'DM Serif Display',serif;font-size:32px;margin-bottom:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
|
|
p { color:var(--muted);margin-bottom:32px;line-height:1.7;font-size:15px; }
|
|
.btn { display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;transition:opacity 0.2s; }
|
|
.btn:hover { opacity:0.9; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="icon">✅</div>
|
|
<h1>Erfolgreich verbunden!</h1>
|
|
<p>Dein Microsoft-365-Konto ist jetzt mit CardSync verknüpft. Wähle auf der Startseite dein Synology-Adressbuch aus und aktiviere den Sync.</p>
|
|
<a href="/" class="btn">Zum Dashboard →</a>
|
|
</div>
|
|
</body>
|
|
</html>
|