Hugging Face's logo

Spaces:
SmartFashion
/
smartrec
Sleeping

App Files Community
Arcangelo Pisa commited on
Commit
51a711e
·
1 Parent(s): 4752182

new template

Browse files
Files changed (1) hide show
  1. newsletter_examples/4.html +243 -0
newsletter_examples/4.html ADDED
@@ -0,0 +1,243 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Your Personalized Style Curation</title>
8
+ <style>
9
+ /* Adjusted colors for better visibility */
10
+ body {
11
+ margin: 0;
12
+ padding: 0;
13
+ width: 100%;
14
+ font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
15
+ line-height: 1.6;
16
+ color: #2C2C2C;
17
+ /* Darker gray for better contrast */
18
+ background-color: #FAF9F6;
19
+ /* Light neutral background */
20
+ }
21
+
22
+ .nlbackgroundcontainer {
23
+ max-width: 600px;
24
+ margin: 0 auto;
25
+ padding: 30px;
26
+ background-color: #FFFFFF;
27
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
28
+ border: 1px solid #DDDDDD;
29
+ /* Neutral border */
30
+ color: black;
31
+ }
32
+
33
+ .nlheader {
34
+ text-align: center;
35
+ padding: 20px 0;
36
+ border-bottom: 1px solid #CCCCCC;
37
+ margin-bottom: 30px;
38
+ }
39
+
40
+ .nlheader img {
41
+ max-width: 200px;
42
+ height: auto;
43
+ }
44
+
45
+ .nlsection {
46
+ margin-bottom: 40px;
47
+ }
48
+
49
+ h1,
50
+ h2,
51
+ h3 {
52
+ font-family: 'Didot', serif;
53
+ color: #333333;
54
+ /* Dark neutral tone for headings */
55
+ margin-bottom: 15px;
56
+ }
57
+
58
+ .nlsection-row {
59
+ display: flex;
60
+ flex-wrap: wrap;
61
+ justify-content: space-between;
62
+ gap: 20px;
63
+ }
64
+
65
+ .bought-item,
66
+ .product {
67
+ display: flex;
68
+ flex-direction: column;
69
+ align-items: center;
70
+ width: calc(50% - 10px);
71
+ margin: 10px 0;
72
+ text-align: center;
73
+ padding: 20px;
74
+ background-color: #f9f9f900;
75
+ border-radius: 8px;
76
+ border: 1px solid #dddddd00;
77
+ transition: transform 0.3s ease;
78
+ color: rgba(0, 0, 0, 0);
79
+ }
80
+
81
+ @media screen and (max-width: 600px) {
82
+ .nlsection-row {
83
+ flex-direction: column;
84
+ }
85
+
86
+ .bought-item,
87
+ .product {
88
+ width: 100%;
89
+ margin: 10px 0;
90
+ }
91
+ }
92
+
93
+ .bought-item:hover,
94
+ .product:hover {
95
+ transform: scale(1.02);
96
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
97
+ }
98
+
99
+ .deal-box {
100
+ background-color: #F4F4F4;
101
+ color: rgba(0, 0, 0, 0.1);
102
+ padding: 20px;
103
+ margin: 15px 0;
104
+ border-radius: 8px;
105
+ text-align: center;
106
+ border: 1px solid #CCCCCC;
107
+ }
108
+
109
+ .nlbutton {
110
+ display: inline-block;
111
+ padding: 12px 25px;
112
+ background-color: #5A5A5A;
113
+ /* Neutral dark button */
114
+ color: #050505;
115
+ text-decoration: none;
116
+ border-radius: 5px;
117
+ font-weight: 600;
118
+ text-transform: uppercase;
119
+ letter-spacing: 1px;
120
+ transition: background-color 0.3s ease;
121
+ }
122
+
123
+ .nlbutton:hover {
124
+ background-color: #333333;
125
+ /* Slightly darker on hover */
126
+ }
127
+
128
+ .nlfooter {
129
+ text-align: center;
130
+ padding: 20px;
131
+ background-color: #F4F4F4;
132
+ border-top: 1px solid #CCCCCC;
133
+ font-size: 0.9em;
134
+ }
135
+
136
+ a {
137
+ color: rgba(0, 0, 0, 0.1);
138
+ /* Neutral dark links */
139
+ text-decoration: none;
140
+ }
141
+
142
+ a:hover {
143
+ text-decoration: underline;
144
+ }
145
+ </style>
146
+ </head>
147
+
148
+ <body>
149
+ <div class="nlbackgroundcontainer">
150
+ <!-- nlheader nlsection -->
151
+ <div class="nlheader" style="display: flex; justify-content: center; align-items: center;">
152
+ <img src="${brand_logo}" alt="Brand Logo">
153
+ </div>
154
+
155
+ <!-- Personal Greeting -->
156
+ <div class="nlsection">
157
+ <p
158
+ 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;">
159
+ ${greeting} </p>
160
+ </div>
161
+
162
+ <p
163
+ 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;">
164
+ ${intro} </p>
165
+ <h2 style="color:black;"> Your recent selections </h2>
166
+
167
+ <p
168
+ 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;">
169
+ ${recommendations} </p>
170
+
171
+ <div style="background-color: #EBEAE8; padding: 20px; border-radius: 10px; margin-top: 20;">
172
+ <!-- Previously Bought Items nlsection -->
173
+ <div class="nlsection">
174
+
175
+ <div class="nlsection-row">
176
+ <div class="bought-item">
177
+ <img src=${transaction_url} alt="Previous Product 1">
178
+ </div>
179
+
180
+ <div class="product">
181
+ <img src=${recommendation_url} alt="Recommended Product 1">
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Recommended Items -->
187
+
188
+ <div class="nlsection">
189
+ <div class="nlsection-row">
190
+ <div class="bought-item">
191
+ <img src=${transaction_url} alt="Previous Product 2">
192
+ </div>
193
+ <div class="product">
194
+ <img src=${recommendation_url} alt="Recommended Product 2">
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Deals nlsection -->
201
+ <div class="nlsection">
202
+ <h2 style="color: #8B6914;">Not Your Style?</h2>
203
+ <p
204
+ 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;">
205
+ Well, I always try my best and recommend what I think would suit you well, but hey, we all make
206
+ mistakes, right? </p>
207
+ <p
208
+ 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;">
209
+ No worries though, I still have a lot of stuff for you! Take a look at these weekly deals! </p>
210
+ <div class="deal-box">
211
+ <h3 style="color:black;"> 30% OFF ALL DRESSES</h3>
212
+ <p style="color:black;">Exclusive Code: LSF30</p>
213
+ </div>
214
+ <div class="deal-box">
215
+ <h3 style="color:black;"> BUY 2 GET 1 FREE</h3>
216
+ <p style="color:black;">On our curated accessories collection</p>
217
+ </div>
218
+ <p
219
+ 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;">
220
+ ${closing} </p>
221
+ </div>
222
+
223
+ <!-- Call to Action -->
224
+ <div class="nlsection" style="text-align: center;">
225
+ <h2 style="color:black;">Ready to Refine Your Wardrobe?</h2>
226
+ <a href="#" class="nlbutton">View New Arrivals</a>
227
+ <a href="#" class="nlbutton" style="background-color: #5D4037;">Book Styling Consultation</a>
228
+ </div>
229
+
230
+ <!-- nlfooter -->
231
+ <div class="nlfooter">
232
+ <p style="font-weight: bold; color:black">The ${brand_name} Team</p>
233
+ <p style="color:black;">
234
+ <small>
235
+ You're receiving this curated selection because you're part of our stylish community.
236
+ <a href="#">Unsubscribe</a> | <a href="#">View in Browser</a>
237
+ </small>
238
+ </p>
239
+ </div>
240
+ </div>
241
+ </body>
242
+
243
+ </html>