Spaces:

habulaj
/

connect

Paused

App Files Files Community

habulaj commited on Jul 4

Commit

c046341

verified ·

1 Parent(s): ba9884c

Update routes/emails.py

Browse files

Files changed (1) hide show

routes/emails.py +220 -169

routes/emails.py CHANGED Viewed

@@ -38,263 +38,314 @@ def generate_email_html(email_type: str, to: str) -> str:
     # Defina aqui os templates HTML para cada tipo de email
     if email_type == "welcome":
         return """
-        <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Welcome to ClosetCoach</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background-color: #fafafa;
-            color: #1a1a1a;
-            line-height: 1.5;
         }
-        .container {
-            max-width: 500px;
-            margin: 40px auto;
             background: white;
-            border-radius: 16px;
             overflow: hidden;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
         }
         .header {
-            background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
             padding: 60px 40px;
             text-align: center;
         }
-        .logo {
-            font-size: 28px;
-            font-weight: 700;
             color: white;
-            letter-spacing: -0.5px;
-            margin-bottom: 8px;
         }
-        .tagline {
-            color: rgba(255, 255, 255, 0.85);
-            font-size: 15px;
-            font-weight: 400;
         }
         .content {
-            padding: 48px 40px;
         }
-        .welcome-title {
-            font-size: 24px;
             font-weight: 600;
-            color: #1a1a1a;
-            margin-bottom: 16px;
-            letter-spacing: -0.3px;
         }
-        .welcome-text {
             font-size: 16px;
-            color: #6b7280;
-            margin-bottom: 40px;
-            line-height: 1.6;
         }
         .features {
             margin: 40px 0;
         }
         .feature {
-            display: flex;
-            align-items: flex-start;
-            margin-bottom: 24px;
-            padding: 16px 0;
-        }
-        .feature:last-child {
-            margin-bottom: 0;
         }
         .feature-icon {
-            width: 40px;
-            height: 40px;
-            background: #f3f4f6;
-            border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-right: 16px;
-            font-size: 16px;
-            flex-shrink: 0;
-        }
-        .feature-content h3 {
-            font-size: 16px;
-            font-weight: 600;
-            color: #1a1a1a;
-            margin-bottom: 4px;
         }
-        .feature-content p {
-            font-size: 14px;
-            color: #6b7280;
-            line-height: 1.5;
         }
-        .cta-section {
-            background: #fafafa;
-            padding: 32px;
-            border-radius: 12px;
-            text-align: center;
-            margin: 40px 0;
         }
-        .cta-title {
-            font-size: 18px;
             font-weight: 600;
-            color: #1a1a1a;
             margin-bottom: 8px;
         }
-        .cta-text {
             font-size: 14px;
-            color: #6b7280;
-            margin-bottom: 24px;
         }
         .cta-button {
             display: inline-block;
-            background: #8b5cf6;
             color: white;
-            padding: 12px 32px;
             text-decoration: none;
-            border-radius: 8px;
-            font-weight: 500;
-            font-size: 15px;
-            transition: all 0.2s ease;
-        }
-        .cta-button:hover {
-            background: #7c3aed;
-            transform: translateY(-1px);
-        }
-        .next-steps {
-            margin-top: 40px;
-            padding: 24px;
-            background: #f8fafc;
-            border-radius: 8px;
-            border-left: 3px solid #8b5cf6;
-        }
-        .next-steps h4 {
-            font-size: 14px;
             font-weight: 600;
-            color: #1a1a1a;
-            margin-bottom: 12px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-        .next-steps ul {
-            list-style: none;
-            font-size: 14px;
-            color: #6b7280;
-        }
-        .next-steps li {
-            margin-bottom: 6px;
-            padding-left: 16px;
-            position: relative;
         }
-        .next-steps li:before {
-            content: "→";
-            position: absolute;
-            left: 0;
-            color: #8b5cf6;
-            font-weight: 500;
         }
         .footer {
-            background: #1a1a1a;
-            color: #9ca3af;
-            padding: 32px 40px;
             text-align: center;
-            font-size: 13px;
         }
-        .footer-brand {
-            color: white;
-            font-weight: 600;
-            margin-bottom: 8px;
         }
-        .footer-links {
-            margin-top: 16px;
         }
-        .footer-links a {
-            color: #9ca3af;
             text-decoration: none;
-            margin: 0 12px;
-            transition: color 0.2s ease;
         }
-        .footer-links a:hover {
-            color: #8b5cf6;
         }
         @media (max-width: 600px) {
-            .container {
-                margin: 20px;
-                max-width: none;
             }
             .header, .content, .footer {
-                padding: 32px 24px;
             }
-            .cta-section {
-                padding: 24px;
             }
         }
     </style>
 </head>
 <body>
-    <div class="container">
         <div class="header">
-            <div class="logo">ClosetCoach</div>
-            <p class="tagline">Your personal style companion</p>
         </div>
         <div class="content">
-            <h1 class="welcome-title">Welcome aboard</h1>
-            <p class="welcome-text">
-                We're excited to have you join ClosetCoach. Connect with professional stylists across the US and discover your unique style with personalized guidance that fits your lifestyle.
-            </p>
             <div class="features">
                 <div class="feature">
-                    <div class="feature-icon">✨</div>
-                    <div class="feature-content">
-                        <h3>Expert Stylists</h3>
-                        <p>Connect with certified professionals who understand your vision and budget</p>
                     </div>
                 </div>
                 <div class="feature">
-                    <div class="feature-icon">🎯</div>
-                    <div class="feature-content">
-                        <h3>Personalized Approach</h3>
-                        <p>Get tailored recommendations that match your lifestyle and preferences</p>
                     </div>
                 </div>
                 <div class="feature">
-                    <div class="feature-icon">📅</div>
-                    <div class="feature-content">
-                        <h3>Flexible Scheduling</h3>
-                        <p>Book consultations that work with your busy schedule</p>
                     </div>
                 </div>
             </div>
-            <div class="cta-section">
-                <h3 class="cta-title">Ready to get started?</h3>
-                <p class="cta-text">Browse our curated selection of stylists and find your perfect match</p>
-                <a href="#" class="cta-button">Find Your Stylist</a>
-            </div>
-            <div class="next-steps">
-                <h4>What's Next</h4>
-                <ul>
-                    <li>Complete your style profile</li>
-                    <li>Browse featured stylists</li>
-                    <li>Book your first consultation</li>
-                    <li>Start your style transformation</li>
-                </ul>
-            </div>
         </div>
         <div class="footer">
-            <div class="footer-brand">ClosetCoach</div>
-            <p>Connecting style with confidence across the USA</p>
-            <div class="footer-links">
-                <a href="#">Help Center</a>
-                <a href="#">Privacy</a>
-                <a href="#">Unsubscribe</a>
             </div>
         </div>
     </div>

     # Defina aqui os templates HTML para cada tipo de email
     if email_type == "welcome":
         return """
+        <!DOCTYPE html>
+<html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bem-vindo(a)!</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
         }
+        .email-container {
+            max-width: 600px;
+            margin: 0 auto;
             background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
             overflow: hidden;
         }
         .header {
+            background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
             padding: 60px 40px;
             text-align: center;
+            position: relative;
         }
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="3" fill="white" opacity="0.1"/><circle cx="40" cy="80" r="2" fill="white" opacity="0.1"/><circle cx="70" cy="70" r="2" fill="white" opacity="0.1"/></svg>');
+            pointer-events: none;
+        }
+        .welcome-icon {
+            width: 80px;
+            height: 80px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 30px;
+            backdrop-filter: blur(10px);
+        }
+        .welcome-icon svg {
+            width: 40px;
+            height: 40px;
+            fill: white;
+        }
+        .header h1 {
             color: white;
+            font-size: 36px;
+            font-weight: 700;
+            margin-bottom: 15px;
+            position: relative;
+            z-index: 1;
         }
+        .header p {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 18px;
+            font-weight: 300;
+            position: relative;
+            z-index: 1;
         }
         .content {
+            padding: 50px 40px;
+            text-align: center;
         }
+        .content h2 {
+            color: #374151;
+            font-size: 28px;
             font-weight: 600;
+            margin-bottom: 20px;
         }
+        .content p {
+            color: #6B7280;
             font-size: 16px;
+            line-height: 1.7;
+            margin-bottom: 30px;
         }
         .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 30px;
             margin: 40px 0;
         }
         .feature {
+            text-align: center;
         }
         .feature-icon {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
+            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
+            margin: 0 auto 15px;
+            transition: transform 0.3s ease;
         }
+        .feature-icon:hover {
+            transform: scale(1.1);
         }
+        .feature-icon svg {
+            width: 30px;
+            height: 30px;
+            fill: white;
         }
+        .feature h3 {
+            color: #374151;
+            font-size: 16px;
             font-weight: 600;
             margin-bottom: 8px;
         }
+        .feature p {
+            color: #6B7280;
             font-size: 14px;
+            margin: 0;
         }
         .cta-button {
             display: inline-block;
+            background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
             color: white;
+            padding: 15px 40px;
             text-decoration: none;
+            border-radius: 50px;
             font-weight: 600;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
         }
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);
         }
         .footer {
+            background: #F9FAFB;
+            padding: 30px 40px;
             text-align: center;
+            border-top: 1px solid #E5E7EB;
         }
+        .footer p {
+            color: #9CA3AF;
+            font-size: 14px;
+            margin-bottom: 10px;
         }
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin-top: 20px;
         }
+        .social-links a {
+            width: 40px;
+            height: 40px;
+            background: #E5E7EB;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             text-decoration: none;
+            transition: background 0.3s ease;
+        }
+        .social-links a:hover {
+            background: #8B5CF6;
         }
+        .social-links svg {
+            width: 20px;
+            height: 20px;
+            fill: #6B7280;
+            transition: fill 0.3s ease;
+        }
+        .social-links a:hover svg {
+            fill: white;
         }
         @media (max-width: 600px) {
+            .email-container {
+                margin: 0;
+                border-radius: 0;
             }
             .header, .content, .footer {
+                padding: 30px 20px;
+            }
+            .header h1 {
+                font-size: 28px;
+            }
+            .content h2 {
+                font-size: 24px;
             }
+            .features {
+                grid-template-columns: 1fr;
+                gap: 20px;
             }
         }
     </style>
 </head>
 <body>
+    <div class="email-container">
         <div class="header">
+            <div class="welcome-icon">
+                <svg viewBox="0 0 24 24">
+                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                </svg>
+            </div>
+            <h1>Bem-vindo(a)!</h1>
+            <p>Estamos muito felizes em tê-lo(a) conosco</p>
         </div>
         <div class="content">
+            <h2>Obrigado por se juntar a nós!</h2>
+            <p>Você acabou de dar o primeiro passo em uma jornada incrível. Nossa equipe está empolgada para ajudá-lo(a) a aproveitar ao máximo nossa plataforma.</p>
             <div class="features">
                 <div class="feature">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
                     </div>
+                    <h3>Qualidade Premium</h3>
+                    <p>Acesso a recursos exclusivos e conteúdo de alta qualidade</p>
                 </div>
                 <div class="feature">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+                        </svg>
                     </div>
+                    <h3>Suporte 24/7</h3>
+                    <p>Nossa equipe está sempre disponível para ajudá-lo(a)</p>
                 </div>
                 <div class="feature">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-1 16H9V7h9v14z"/>
+                        </svg>
                     </div>
+                    <h3>Atualizações</h3>
+                    <p>Receba as últimas novidades e melhorias em primeira mão</p>
                 </div>
             </div>
+            <a href="#" class="cta-button">Começar Agora</a>
         </div>
         <div class="footer">
+            <p>Se você tiver alguma dúvida, não hesite em nos contatar.</p>
+            <p>Atenciosamente,<br><strong>Equipe de Suporte</strong></p>
+            <div class="social-links">
+                <a href="#">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                    </svg>
+                </a>
+                <a href="#">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                    </svg>
+                </a>
+                <a href="#">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.748.099.12.112.225.085.348-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z"/>
+                    </svg>
+                </a>
             </div>
         </div>
     </div>