new template added for the otp email.

utils/__init__.py

@@ -97,18 +97,47 @@ def send_email(recipient, code):
     
     subject = 'Verification Code'
     html_content = f"""
-    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e0e0e0; border-radius: 10px;">
-        <h2 style="color: #333; text-align: center;">Verification Code</h2>
-        <p style="font-size: 16px; color: #555;">Hello,</p>
-        <p style="font-size: 16px; color: #555;">Your verification code for <strong>Imam Javad App</strong> is:</p>
-        <div style="text-align: center; margin: 30px 0;">
-            <span style="font-size: 32px; font-weight: bold; color: #007bff; letter-spacing: 5px; background: #f8f9fa; padding: 10px 20px; border-radius: 5px; border: 1px dashed #007bff;">{code}</span>
-        </div>
-        <p style="font-size: 14px; color: #777; text-align: center;">This code will expire shortly. If you did not request this code, please ignore this email.</p>
-        <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">
-        <p style="font-size: 12px; color: #999; text-align: center;">Sent via Resend API</p>
+<div
+    style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; max-width: 600px; margin: 0 auto; background-color: #FAF6E9; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #25D076; overflow: hidden;">
+
+    <!-- Logo / Header Section with Vertical Gradient -->
+    <!-- The negative margin makes it stretch flush to the edges of the padded container -->
+    <div
+        style="text-align: center; padding: 40px 20px 40px 20px; margin: -20px -20px 25px -20px; background: linear-gradient(to bottom, #052B18 30%, #0A522E 80%);">
+        <!-- UPDATE THE SRC BELOW WITH YOUR ACTUAL LOGO URL -->
+        <img src="{settings.SITE_DOMAIN}/static/images/logo1.svg" alt="Imam Javad Online School Logo" style="width: 150px; height: auto;">
     </div>
-    """
+
+    <!-- Main Heading -->
+    <h2 style="color: #0A522E; text-align: center; font-weight: 800; margin-top: 0;">Verification Code</h2>
+
+    <!-- Greeting and Intro -->
+    <p style="font-size: 17px; color: #333333; line-height: 1.6; margin-bottom: 15px;">Hello,</p>
+    <p style="font-size: 17px; color: #333333; line-height: 1.6;">Your verification code for <strong
+            style="color: #0A522E;">Imam Javad Online School</strong> is:</p>
+
+    <!-- Stylized Verification Code Box -->
+    <div style="text-align: center; margin: 40px 0;">
+        <span
+            style="font-size: 40px; font-weight: 900; color: #0A522E; letter-spacing: 6px; background-color: rgba(37, 208, 118, 0.2); padding: 15px 30px; border-radius: 8px; border: 2px dashed #0A522E; display: inline-block;">56243</span>
+    </div>
+
+    <!-- Disclaimer -->
+    <p style="font-size: 14px; color: #777777; text-align: center; margin-top: 10px;">This code will expire shortly. If
+        you did not request this code, please ignore this email.</p>
+
+    <!-- Footer Section -->
+    <hr style="border: 0; border-top: 1px solid #d4d0c3; margin: 30px 0;">
+    <p style="font-size: 13px; color: #999999; text-align: center; line-height: 1.5; margin-bottom: 0;">
+        <strong style="color: #0A522E;">Imam Javad Online School</strong><br>
+        имам джавад | امام جواد<br>
+        Learn more: <a href="https://imamjavad.nwhco.ir/"
+            style="color: #0A522E; text-decoration: none;">imamjavad.nwhco.ir</a><br>
+        <span style="font-style: italic;">Contact us: <a href="mailto:support@yourwebsite.com"
+                style="color: #0A522E; text-decoration: none;">support@yourwebsite.com</a></span>
+    </p>
+</div>
+"""
     
     payload = {
         "from": settings.RESEND_FROM_EMAIL,