Hugging Face's logo

Spaces:
SmartFashion
/
smartrec
Sleeping

App Files Community
Arcangelo Pisa commited on
Commit
4a361b5
•
1 Parent(s): 51a711e

wip fix demo

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