fix html

README.md

@@ -3,7 +3,7 @@ title: smartrec
 app_file: app.py
 sdk: gradio
 sdk_version: 5.7.0
-hf_oauth: true
+theme: light
 ---
 # smartrec
 

newsletter_examples/1.html

@@ -66,6 +66,7 @@
                 border-radius: 8px;
                 border: 1px solid #DDDDDD;
                 transition: transform 0.3s ease;
+                color:  rgba(0,0,0,0.1);
             }
     
             @media screen and (max-width: 600px) {
@@ -86,7 +87,7 @@
             
             .deal-box {
                 background-color: #F4F4F4;
-                color: #333333;
+                color:  rgba(0,0,0,0.1);
                 padding: 20px;
                 margin: 15px 0;
                 border-radius: 8px;
@@ -120,7 +121,7 @@
             }
             
             a {
-                color: #5A5A5A; /* Neutral dark links */
+                color:  rgba(0,0,0,0.1); /* Neutral dark links */
                 text-decoration: none;
             }
             
@@ -138,21 +139,22 @@
 
         <!-- Personal Greeting -->
         <div class="nlsection">
-            <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; line-height: 1.5; color: #333; letter-spacing: 0.5px; text-align: left;">
+            <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; line-height: 1.5; color: black; letter-spacing: 0.5px; text-align: left;">
 ${greeting} </p>
         </div>
 
         <!-- Previously Bought Items nlsection -->
         <div class="nlsection">
+            <h2 style="color:black;"> Your recent selections </h2>
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> ${intro} </p>
             <div class="nlsection-row">
                 <div class="bought-item">
                     <img src= ${transaction_url} alt="Previous Product 1">
-                    <h3> ${transaction_name} </h3>
+                    <h3 style="color:black;"> ${transaction_name} </h3>
                 </div>
                 <div class="bought-item">
                     <img src= ${transaction_url} alt="Previous Product 2">
-                    <h3>${transaction_name}</h3>
+                    <h3 style="color:black;">${transaction_name}</h3>
                 </div>
             </div>
         </div>
@@ -164,12 +166,12 @@ ${recommendations} </p>
             <div class="nlsection-row">
                 <div class="product">
                     <img src=${recommendation_url} alt="Recommended Product 1">
-                    <h3>${recommendation_name}</h3>
+                    <h3 style="color:black;">${recommendation_name}</h3>
                     <a href="#" class="nlbutton" >Explore</a>
                 </div>
                 <div class="product">
                     <img src=${recommendation_url} alt="Recommended Product 2">
-                    <h3>${recommendation_name}</h3>
+                    <h3 style="color:black;">${recommendation_name}</h3>
                     <a href="#" class="nlbutton">Explore</a>
                 </div>
             </div>
@@ -183,12 +185,12 @@ Well, I always try my best and recommend what I think would suit you well, but h
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;">
 No worries though, I still have a lot of stuff for you! Take a look at these weekly deals! </p>
             <div class="deal-box">
-                <h3> 30% OFF ALL DRESSES</h3>
-                <p>Exclusive Code: LSF30</p>
+                <h3 style="color:black;"> 30% OFF ALL DRESSES</h3>
+                <p style="color:black;">Exclusive Code: LSF30</p>
             </div>
             <div class="deal-box">
-                <h3> BUY 2 GET 1 FREE</h3>
-                <p>On our curated accessories collection</p>
+                <h3 style="color:black;"> BUY 2 GET 1 FREE</h3>
+                <p style="color:black;">On our curated accessories collection</p>
             </div>
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;">
 ${closing} </p>
@@ -203,8 +205,8 @@ ${closing} </p>
 
         <!-- nlfooter -->
         <div class="nlfooter">
-            <p style="font-weight: bold;">The ${brand_name} Team</p>
-            <p>
+            <p style="font-weight: bold; color:black">The ${brand_name} Team</p>
+            <p style="color:black;">
                 <small>
                     You're receiving this curated selection because you're part of our stylish community.
                     <a href="#">Unsubscribe</a> | <a href="#">View in Browser</a>

src/utils.py

@@ -130,7 +130,7 @@ def integrate_personalized_text(newsletter_text, customer_info, textual_sections
 
     # make sure the greeting line is h1, so replace Hello ${customer_name} with <h1>Hello ${customer_name}</h1>
     customer_name = customer_info.get("customer name")
-    newsletter_text = newsletter_text.replace(f"Hello {customer_name},", f"<h1>Hello {customer_name},</h1>")
+    newsletter_text = newsletter_text.replace(f"Hello {customer_name},", f'<h1 style="color:black;">Hello {customer_name},</h1>')
 
     return newsletter_text