ANDJ
abf761db07
Ich habe soweit automatisiert the Emails sortieren aber ich muss noch schauen was es fur bugs es gibt wenn die app online ist deswegen wurde ich mit diesen Commit die website veroffentlichen obwohjl es sein konnte das es noch nicht fertig ist und verkaufs bereit
132 lines
4.2 KiB
HTML
132 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Zahlung Erfolgreich - EmailSorter</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #0a0a0f;
|
|
--success: #10b981;
|
|
--success-glow: rgba(16, 185, 129, 0.3);
|
|
--text: #e4e4e7;
|
|
--text-muted: #71717a;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.bg {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: radial-gradient(circle at 50% 50%, var(--success-glow) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 2rem;
|
|
}
|
|
.icon {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: var(--success);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 2rem;
|
|
font-size: 3rem;
|
|
animation: pop 0.5s ease-out;
|
|
box-shadow: 0 0 60px var(--success-glow);
|
|
}
|
|
@keyframes pop {
|
|
0% { transform: scale(0); }
|
|
70% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
p {
|
|
color: var(--text-muted);
|
|
margin-bottom: 2rem;
|
|
max-width: 400px;
|
|
}
|
|
.btn {
|
|
display: inline-block;
|
|
background: var(--success);
|
|
color: white;
|
|
padding: 1rem 2rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 30px var(--success-glow);
|
|
}
|
|
.confetti {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bg"></div>
|
|
<div class="container">
|
|
<div class="icon">✓</div>
|
|
<h1>Zahlung Erfolgreich!</h1>
|
|
<p>Vielen Dank für dein Vertrauen. Dein EmailSorter Account wurde aktiviert. Du kannst jetzt deine E-Mail-Konten verbinden.</p>
|
|
<a href="/" class="btn">Zum Dashboard →</a>
|
|
</div>
|
|
<script>
|
|
// Simple confetti effect
|
|
function createConfetti() {
|
|
const colors = ['#10b981', '#6366f1', '#f59e0b', '#3b82f6', '#ec4899'];
|
|
for (let i = 0; i < 50; i++) {
|
|
setTimeout(() => {
|
|
const confetti = document.createElement('div');
|
|
confetti.style.cssText = `
|
|
position: fixed;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: ${colors[Math.floor(Math.random() * colors.length)]};
|
|
top: -10px;
|
|
left: ${Math.random() * 100}vw;
|
|
border-radius: 2px;
|
|
animation: fall ${2 + Math.random() * 2}s linear forwards;
|
|
`;
|
|
document.body.appendChild(confetti);
|
|
setTimeout(() => confetti.remove(), 4000);
|
|
}, i * 50);
|
|
}
|
|
}
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes fall {
|
|
to {
|
|
transform: translateY(100vh) rotate(720deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
createConfetti();
|
|
</script>
|
|
</body>
|
|
</html>
|