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> | |
| /* Elegant, sophisticated color palette with light brown background */ | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; | |
| line-height: 1.6; | |
| color: #4A4A4A; | |
| background-color: #F0E6D2; /* Light warm brown background */ | |
| } | |
| .backgroundcontainer { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| padding: 30px; | |
| background-color: #f5f0e6; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| border: 1px solid #E0D3BA; /* Slight border to complement background */ | |
| } | |
| .header { | |
| text-align: center; | |
| padding: 20px 0; | |
| border-bottom: 1px solid #D4AD7A; | |
| margin-bottom: 30px; | |
| } | |
| .header img { | |
| max-width: 200px; | |
| height: auto; | |
| } | |
| .section { | |
| margin-bottom: 40px; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Didot', serif; | |
| color: #5D4037; /* Deep brown for headings */ | |
| margin-bottom: 15px; | |
| } | |
| /* New responsive section styles */ | |
| .section-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); /* Adjust for gap */ | |
| margin: 10px 0; | |
| text-align: center; | |
| padding: 20px; | |
| background-color: #FFF8E7; | |
| border-radius: 8px; | |
| border: 1px solid #E0D3BA; | |
| transition: transform 0.3s ease; | |
| } | |
| /* Media query for smaller screens */ | |
| @media screen and (max-width: 600px) { | |
| .section-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: #F5E6D3; /* Soft light brown */ | |
| padding: 20px; | |
| margin: 15px 0; | |
| border-radius: 8px; | |
| text-align: center; | |
| border: 1px solid #D4AD7A; | |
| } | |
| .button { | |
| display: inline-block; | |
| padding: 12px 25px; | |
| background-color: #8B6914; /* Rich brown */ | |
| color: #FFFFFF ; /* Explicitly enforce white */ | |
| text-decoration: none; | |
| border-radius: 5px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: background-color 0.3s ease; | |
| } | |
| .button:link, | |
| .button:visited, | |
| .button:hover, | |
| .button:active { | |
| color: #FFFFFF; /* Ensure white for all link states */ | |
| text-decoration: none; | |
| } | |
| .button:hover { | |
| background-color: #5D4037; /* Darker brown */ | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 20px; | |
| background-color: #F5E6D3; /* Soft light brown */ | |
| border-top: 1px solid #D4AD7A; | |
| font-size: 0.9em; | |
| } | |
| .price { | |
| font-size: 1.2em; | |
| color: #8B6914; /* Rich brown */ | |
| font-weight: bold; | |
| } | |
| a { | |
| color: #8B6914; /* Rich brown */ | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="backgroundcontainer"> | |
| <!-- Header Section --> | |
| <div class="header" style="display: flex; justify-content: center; align-items: center;"> | |
| <img src="${brand_logo}" alt="Brand Logo"> | |
| </div> | |
| <!-- Personal Greeting --> | |
| <div class="section"> | |
| <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> | |
| ${greeting} </p> | |
| </div> | |
| <!-- Previously Bought Items Section --> | |
| <div class="section"> | |
| <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="section-row"> | |
| <div class="bought-item"> | |
| <img src= ${transaction_url} alt="Previous Product 1"> | |
| <h3> ${transaction_name} </h3> | |
| </div> | |
| <div class="bought-item"> | |
| <img src= ${transaction_url} alt="Previous Product 2"> | |
| <h3>${transaction_name}</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommended Items --> | |
| <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 class="section"> | |
| <div class="section-row"> | |
| <div class="product"> | |
| <img src=${recommendation_url} alt="Recommended Product 1"> | |
| <h3>${recommendation_name}</h3> | |
| <a href="#" class="button">Explore</a> | |
| </div> | |
| <div class="product"> | |
| <img src=${recommendation_url} alt="Recommended Product 2"> | |
| <h3>${recommendation_name}</h3> | |
| <a href="#" class="button">Explore</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deals Section --> | |
| <div class="section"> | |
| <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> 30% OFF ALL DRESSES</h3> | |
| <p>Exclusive Code: LSF30</p> | |
| </div> | |
| <div class="deal-box"> | |
| <h3> BUY 2 GET 1 FREE</h3> | |
| <p>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="section" style="text-align: center;"> | |
| <h2>Ready to Refine Your Wardrobe?</h2> | |
| <a href="#" class="button">View New Arrivals</a> | |
| <a href="#" class="button" style="background-color: #5D4037;">Book Styling Consultation</a> | |
| </div> | |
| <!-- Footer --> | |
| <div class="footer"> | |
| <p style="font-weight: bold;">The ${brand_name} Team</p> | |
| <p> | |
| <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> |