Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Your Personalized Style Curation</title> | |
| <style> | |
| /* Adjusted colors for better visibility */ | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; | |
| line-height: 1.6; | |
| color: #2C2C2C; | |
| /* Darker gray for better contrast */ | |
| background-color: #FAF9F6; | |
| /* Light neutral background */ | |
| } | |
| .nlbackgroundcontainer { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| padding: 30px; | |
| background-color: #FFFFFF; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| border: 1px solid #DDDDDD; | |
| /* Neutral border */ | |
| color: black; | |
| } | |
| .nlheader { | |
| text-align: center; | |
| padding: 20px 0; | |
| border-bottom: 1px solid #CCCCCC; | |
| margin-bottom: 30px; | |
| } | |
| .nlheader img { | |
| max-width: 200px; | |
| height: auto; | |
| } | |
| .nlsection { | |
| margin-bottom: 40px; | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: 'Didot', serif; | |
| color: #333333; | |
| /* Dark neutral tone for headings */ | |
| margin-bottom: 15px; | |
| } | |
| .nlsection-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| gap: 20px; | |
| } | |
| .bought-item, | |
| .product { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: calc(50% - 10px); | |
| margin: 10px 0; | |
| text-align: center; | |
| padding: 20px; | |
| background-color: #f9f9f900; | |
| border-radius: 8px; | |
| border: 1px solid #dddddd00; | |
| transition: transform 0.3s ease; | |
| color: rgba(0, 0, 0, 0); | |
| } | |
| @media screen and (max-width: 600px) { | |
| .nlsection-row { | |
| flex-direction: column; | |
| } | |
| .bought-item, | |
| .product { | |
| width: 100%; | |
| margin: 10px 0; | |
| } | |
| } | |
| .bought-item:hover, | |
| .product:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .deal-box { | |
| background-color: #F4F4F4; | |
| color: rgba(0, 0, 0, 0.1); | |
| padding: 20px; | |
| margin: 15px 0; | |
| border-radius: 8px; | |
| text-align: center; | |
| border: 1px solid #CCCCCC; | |
| } | |
| .nlbutton { | |
| display: inline-block; | |
| padding: 12px 25px; | |
| background-color: #5A5A5A; | |
| /* Neutral dark button */ | |
| color: #050505; | |
| text-decoration: none; | |
| border-radius: 5px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: background-color 0.3s ease; | |
| } | |
| .nlbutton:hover { | |
| background-color: #333333; | |
| /* Slightly darker on hover */ | |
| } | |
| .nlfooter { | |
| text-align: center; | |
| padding: 20px; | |
| background-color: #F4F4F4; | |
| border-top: 1px solid #CCCCCC; | |
| font-size: 0.9em; | |
| } | |
| a { | |
| color: rgba(0, 0, 0, 0.1); | |
| /* Neutral dark links */ | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="nlbackgroundcontainer"> | |
| <!-- nlheader nlsection --> | |
| <div class="nlheader" style="display: flex; justify-content: center; align-items: center;"> | |
| <img src="${brand_logo}" alt="Brand Logo"> | |
| </div> | |
| <!-- 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: black; letter-spacing: 0.5px; text-align: left;"> | |
| ${greeting} </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;"> | |
| ${intro} </p> | |
| <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;"> | |
| ${recommendations} </p> | |
| <div style="background-color: #EBEAE8; padding: 20px; border-radius: 10px; margin-top: 20;"> | |
| <!-- Previously Bought Items nlsection --> | |
| <div class="nlsection"> | |
| <div class="nlsection-row"> | |
| <div class="bought-item"> | |
| <img src=${transaction_url} alt="Previous Product 1"> | |
| </div> | |
| <div class="product"> | |
| <img src=${recommendation_url} alt="Recommended Product 1"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommended Items --> | |
| <div class="nlsection"> | |
| <div class="nlsection-row"> | |
| <div class="bought-item"> | |
| <img src=${transaction_url} alt="Previous Product 2"> | |
| </div> | |
| <div class="product"> | |
| <img src=${recommendation_url} alt="Recommended Product 2"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deals nlsection --> | |
| <div class="nlsection"> | |
| <h2 style="color: #8B6914;">Not Your Style?</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;"> | |
| Well, I always try my best and recommend what I think would suit you well, but hey, we all make | |
| mistakes, right? </p> | |
| <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 style="color:black;"> 30% OFF ALL DRESSES</h3> | |
| <p style="color:black;">Exclusive Code: LSF30</p> | |
| </div> | |
| <div class="deal-box"> | |
| <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> | |
| </div> | |
| <!-- Call to Action --> | |
| <div class="nlsection" style="text-align: center;"> | |
| <h2 style="color:black;">Ready to Refine Your Wardrobe?</h2> | |
| <a href="#" class="nlbutton">View New Arrivals</a> | |
| <a href="#" class="nlbutton" style="background-color: #5D4037;">Book Styling Consultation</a> | |
| </div> | |
| <!-- nlfooter --> | |
| <div class="nlfooter"> | |
| <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> | |
| </small> | |
| </p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |