Spaces:

habulaj
/

connect

Paused

App Files Files Community

habulaj commited on Jul 5

Commit

4c76272

verified ·

1 Parent(s): 86a9d1b

Update routes/emails.py

Browse files

Files changed (1) hide show

routes/emails.py +178 -220

routes/emails.py CHANGED Viewed

@@ -39,314 +39,272 @@ def generate_email_html(email_type: str, to: str) -> str:
     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>
 </body>

     if email_type == "welcome":
         return """
         <!DOCTYPE html>
+<html lang="en">
 <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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+            background-color: #ffffff;
+            color: #1d1d1f;
+            line-height: 1.6;
         }
         .email-container {
             max-width: 600px;
             margin: 0 auto;
+            background-color: #ffffff;
         }
         .header {
             text-align: center;
+            padding: 60px 40px 40px;
         }
+        .logo {
+            font-size: 28px;
+            font-weight: 700;
+            color: #6b46c1;
+            letter-spacing: -0.5px;
         }
+        .hero-section {
+            text-align: center;
+            padding: 0 40px 60px;
         }
+        .hero-image {
+            width: 100%;
+            max-width: 400px;
+            height: auto;
+            margin: 0 auto 50px;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(107, 70, 193, 0.1);
         }
+        .headline {
             font-size: 36px;
             font-weight: 700;
+            color: #1d1d1f;
+            margin-bottom: 24px;
+            line-height: 1.2;
+            letter-spacing: -0.8px;
         }
+        .subheadline {
+            font-size: 20px;
+            font-weight: 400;
+            color: #6e6e73;
+            margin-bottom: 50px;
+            line-height: 1.4;
+            max-width: 480px;
+            margin-left: auto;
+            margin-right: auto;
         }
+        .cta-button {
+            display: inline-block;
+            background: linear-gradient(135deg, #6b46c1 0%, #8b5cf6 100%);
+            color: #ffffff;
+            text-decoration: none;
+            padding: 16px 40px;
+            border-radius: 50px;
+            font-size: 18px;
             font-weight: 600;
+            letter-spacing: 0.2px;
+            transition: all 0.3s ease;
+            box-shadow: 0 8px 24px rgba(107, 70, 193, 0.3);
+            margin-bottom: 60px;
         }
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 12px 32px rgba(107, 70, 193, 0.4);
         }
         .features {
+            padding: 0 40px 60px;
+        }
+        .feature-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 40px;
+            margin-top: 50px;
         }
+        .feature-item {
             text-align: center;
+            padding: 30px 20px;
+            border-radius: 16px;
+            background-color: #fafafa;
+            border: 1px solid #f5f5f7;
         }
         .feature-icon {
             width: 60px;
             height: 60px;
+            background: linear-gradient(135deg, #6b46c1 0%, #8b5cf6 100%);
             border-radius: 50%;
+            margin: 0 auto 24px;
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 24px;
+            color: white;
         }
+        .feature-title {
+            font-size: 20px;
             font-weight: 600;
+            color: #1d1d1f;
+            margin-bottom: 12px;
         }
+        .feature-description {
             font-size: 16px;
+            color: #6e6e73;
+            line-height: 1.5;
         }
         .footer {
             text-align: center;
+            padding: 40px;
+            border-top: 1px solid #f5f5f7;
+            margin-top: 40px;
         }
+        .footer-text {
             font-size: 14px;
+            color: #86868b;
+            margin-bottom: 16px;
         }
         .social-links {
             display: flex;
             justify-content: center;
+            gap: 24px;
             margin-top: 20px;
         }
+        .social-link {
+            display: inline-block;
             width: 40px;
             height: 40px;
+            background-color: #6b46c1;
             border-radius: 50%;
+            color: white;
             text-decoration: none;
+            line-height: 40px;
+            font-size: 18px;
+            transition: all 0.3s ease;
         }
+        .social-link:hover {
+            background-color: #553c9a;
+            transform: translateY(-2px);
         }
+        @media (max-width: 480px) {
+            .header {
+                padding: 40px 20px 20px;
             }
+            .hero-section {
+                padding: 0 20px 40px;
             }
+            .headline {
                 font-size: 28px;
             }
+            .subheadline {
+                font-size: 18px;
             }
             .features {
+                padding: 0 20px 40px;
+            }
+            .feature-grid {
                 grid-template-columns: 1fr;
+                gap: 30px;
+            }
+            .footer {
+                padding: 30px 20px;
             }
         }
     </style>
 </head>
 <body>
     <div class="email-container">
+        <!-- Header -->
         <div class="header">
+            <div class="logo">ClosetCoach</div>
         </div>
+        <!-- Hero Section -->
+        <div class="hero-section">
+            <img src="https://huggingface.co/spaces/habulaj/connect/resolve/main/brazuca.png" alt="Style transformation illustration" class="hero-image">
+            <h1 class="headline">Welcome to your style journey</h1>
+            <p class="subheadline">
+                Connect with professional stylists who understand your unique style and help you create looks that make you feel confident and authentic.
+            </p>
+            <a href="#" class="cta-button">Start Your Style Quiz</a>
+        </div>
+        <!-- Features -->
+        <div class="features">
+            <div class="feature-grid">
+                <div class="feature-item">
+                    <div class="feature-icon">✨</div>
+                    <h3 class="feature-title">Personal Styling</h3>
+                    <p class="feature-description">Get matched with expert stylists who curate looks just for you</p>
                 </div>
+                <div class="feature-item">
+                    <div class="feature-icon">👗</div>
+                    <h3 class="feature-title">Wardrobe Refresh</h3>
+                    <p class="feature-description">Discover new ways to style pieces you already own</p>
                 </div>
+                <div class="feature-item">
+                    <div class="feature-icon">💜</div>
+                    <h3 class="feature-title">Confidence Boost</h3>
+                    <p class="feature-description">Feel amazing in clothes that truly reflect who you are</p>
                 </div>
             </div>
         </div>
+        <!-- Footer -->
         <div class="footer">
+            <p class="footer-text">
+                You're receiving this email because you signed up for ClosetCoach.<br>
+                Ready to transform your style? Let's get started!
+            </p>
             <div class="social-links">
+                <a href="#" class="social-link">f</a>
+                <a href="#" class="social-link">t</a>
+                <a href="#" class="social-link">i</a>
             </div>
+            <p class="footer-text" style="margin-top: 24px;">
+                © 2025 ClosetCoach. All rights reserved.<br>
+                San Francisco, CA • [email protected]
+            </p>
         </div>
     </div>
 </body>