Email Sorter Beta

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
2026-01-22 19:32:12 +01:00
parent 95349af50b
commit abf761db07
596 changed files with 56405 additions and 51231 deletions
--- a/public/success.html
+++ b/public/success.html
@@ -3,16 +3,129 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bezahlung erfolgreich - Email Sortierer</title>
+    <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 style="max-width: 600px; margin: 50px auto; padding: 20px; text-align: center;">
-        <h1>✅ Bezahlung erfolgreich!</h1>
-        <p>Vielen Dank für deinen Kauf des Email Sortierer Service.</p>
-        <p>Deine Bestellung wurde erfolgreich abgeschlossen.</p>
-        <p>Du erhältst in Kürze eine Bestätigungs-E-Mail mit weiteren Informationen.</p>
-        <br>
-        <a href="/" style="display: inline-block; padding: 10px 20px; background: #0066cc; color: white; text-decoration: none; border-radius: 5px;">Zurück zur Startseite</a>
+    <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>