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 > Welcome to Portfolio Tracker</ title >
7
+ < style >
8
+ * {
9
+ margin : 0 ;
10
+ padding : 0 ;
11
+ box-sizing : border-box;
12
+ }
13
+
14
+ body {
15
+ font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI' , Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
16
+ line-height : 1.6 ;
17
+ color : # 1f2937 ;
18
+ background : linear-gradient (135deg , # 667eea 0% , # 764ba2 100% );
19
+ padding : 20px ;
20
+ }
21
+
22
+ .container {
23
+ max-width : 600px ;
24
+ margin : 0 auto;
25
+ background : white;
26
+ border-radius : 20px ;
27
+ overflow : hidden;
28
+ box-shadow : 0 25px 50px -12px rgba (0 , 0 , 0 , 0.25 );
29
+ }
30
+
31
+ .header {
32
+ background : linear-gradient (135deg , # 3b82f6 0% , # 1d4ed8 100% );
33
+ padding : 40px 30px ;
34
+ text-align : center;
35
+ position : relative;
36
+ }
37
+
38
+ .header ::before {
39
+ content : '' ;
40
+ position : absolute;
41
+ top : 0 ;
42
+ left : 0 ;
43
+ right : 0 ;
44
+ bottom : 0 ;
45
+ background : url ('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>' );
46
+ opacity : 0.3 ;
47
+ }
48
+
49
+ .logo {
50
+ width : 60px ;
51
+ height : 60px ;
52
+ background : rgba (255 , 255 , 255 , 0.2 );
53
+ border-radius : 16px ;
54
+ display : flex;
55
+ align-items : center;
56
+ justify-content : center;
57
+ margin : 0 auto 20px ;
58
+ position : relative;
59
+ z-index : 1 ;
60
+ }
61
+
62
+ .logo svg {
63
+ width : 32px ;
64
+ height : 32px ;
65
+ fill : white;
66
+ }
67
+
68
+ .header h1 {
69
+ color : white;
70
+ font-size : 28px ;
71
+ font-weight : 700 ;
72
+ margin-bottom : 8px ;
73
+ position : relative;
74
+ z-index : 1 ;
75
+ }
76
+
77
+ .header p {
78
+ color : rgba (255 , 255 , 255 , 0.9 );
79
+ font-size : 16px ;
80
+ position : relative;
81
+ z-index : 1 ;
82
+ }
83
+
84
+ .content {
85
+ padding : 40px 30px ;
86
+ }
87
+
88
+ .welcome-section {
89
+ text-align : center;
90
+ margin-bottom : 40px ;
91
+ }
92
+
93
+ .welcome-section h2 {
94
+ font-size : 24px ;
95
+ font-weight : 600 ;
96
+ color : # 1f2937 ;
97
+ margin-bottom : 12px ;
98
+ }
99
+
100
+ .welcome-section p {
101
+ color : # 6b7280 ;
102
+ font-size : 16px ;
103
+ margin-bottom : 30px ;
104
+ }
105
+
106
+ .features {
107
+ display : grid;
108
+ grid-template-columns : 1fr 1fr ;
109
+ gap : 20px ;
110
+ margin-bottom : 40px ;
111
+ }
112
+
113
+ .feature {
114
+ background : # f8fafc ;
115
+ padding : 20px ;
116
+ border-radius : 12px ;
117
+ text-align : center;
118
+ border : 1px solid # e2e8f0 ;
119
+ }
120
+
121
+ .feature-icon {
122
+ width : 40px ;
123
+ height : 40px ;
124
+ background : linear-gradient (135deg , # 10b981 0% , # 059669 100% );
125
+ border-radius : 10px ;
126
+ display : flex;
127
+ align-items : center;
128
+ justify-content : center;
129
+ margin : 0 auto 12px ;
130
+ }
131
+
132
+ .feature-icon svg {
133
+ width : 20px ;
134
+ height : 20px ;
135
+ fill : white;
136
+ }
137
+
138
+ .feature h3 {
139
+ font-size : 14px ;
140
+ font-weight : 600 ;
141
+ color : # 1f2937 ;
142
+ margin-bottom : 4px ;
143
+ }
144
+
145
+ .feature p {
146
+ font-size : 12px ;
147
+ color : # 6b7280 ;
148
+ }
149
+
150
+ .cta-section {
151
+ text-align : center;
152
+ background : linear-gradient (135deg , # f0f9ff 0% , # e0f2fe 100% );
153
+ padding : 30px ;
154
+ border-radius : 16px ;
155
+ border : 1px solid # bae6fd ;
156
+ }
157
+
158
+ .cta-button {
159
+ display : inline-block;
160
+ background : linear-gradient (135deg , # 3b82f6 0% , # 1d4ed8 100% );
161
+ color : white;
162
+ text-decoration : none;
163
+ padding : 16px 32px ;
164
+ border-radius : 12px ;
165
+ font-weight : 600 ;
166
+ font-size : 16px ;
167
+ margin : 20px 0 ;
168
+ transition : all 0.3s ease;
169
+ box-shadow : 0 4px 14px 0 rgba (59 , 130 , 246 , 0.4 );
170
+ }
171
+
172
+ .cta-button : hover {
173
+ transform : translateY (-2px );
174
+ box-shadow : 0 8px 25px 0 rgba (59 , 130 , 246 , 0.5 );
175
+ }
176
+
177
+ .footer {
178
+ background : # f8fafc ;
179
+ padding : 30px ;
180
+ text-align : center;
181
+ border-top : 1px solid # e2e8f0 ;
182
+ }
183
+
184
+ .footer p {
185
+ color : # 6b7280 ;
186
+ font-size : 14px ;
187
+ margin-bottom : 8px ;
188
+ }
189
+
190
+ .footer a {
191
+ color : # 3b82f6 ;
192
+ text-decoration : none;
193
+ }
194
+
195
+ .footer a : hover {
196
+ text-decoration : underline;
197
+ }
198
+
199
+ .social-links {
200
+ margin-top : 20px ;
201
+ }
202
+
203
+ .social-links a {
204
+ display : inline-block;
205
+ margin : 0 8px ;
206
+ color : # 6b7280 ;
207
+ text-decoration : none;
208
+ }
209
+
210
+ @media (max-width : 600px ) {
211
+ .features {
212
+ grid-template-columns : 1fr ;
213
+ }
214
+
215
+ .header , .content {
216
+ padding : 30px 20px ;
217
+ }
218
+ }
219
+ </ style >
220
+ </ head >
221
+ < body >
222
+ < div class ="container ">
223
+ < div class ="header ">
224
+ < div class ="logo ">
225
+ < svg viewBox ="0 0 24 24 ">
226
+ < path d ="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z "/>
227
+ </ svg >
228
+ </ div >
229
+ < h1 > Portfolio Tracker</ h1 >
230
+ < p > Your journey to smart investing starts here</ p >
231
+ </ div >
232
+
233
+ < div class ="content ">
234
+ < div class ="welcome-section ">
235
+ < h2 > Welcome aboard! 🎉</ h2 >
236
+ < p > Hi {{ .Email }}, thank you for joining Portfolio Tracker. We're excited to help you track your investments and make informed decisions.</ p >
237
+ </ div >
238
+
239
+ < div class ="features ">
240
+ < div class ="feature ">
241
+ < div class ="feature-icon ">
242
+ < svg viewBox ="0 0 24 24 ">
243
+ < path d ="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z "/>
244
+ </ svg >
245
+ </ div >
246
+ < h3 > Real-time Tracking</ h3 >
247
+ < p > Monitor your portfolio with live stock prices and updates</ p >
248
+ </ div >
249
+
250
+ < div class ="feature ">
251
+ < div class ="feature-icon ">
252
+ < svg viewBox ="0 0 24 24 ">
253
+ < path d ="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z "/>
254
+ </ svg >
255
+ </ div >
256
+ < h3 > Smart Analytics</ h3 >
257
+ < p > Get detailed insights and performance analytics</ p >
258
+ </ div >
259
+
260
+ < div class ="feature ">
261
+ < div class ="feature-icon ">
262
+ < svg viewBox ="0 0 24 24 ">
263
+ < path d ="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z "/>
264
+ </ svg >
265
+ </ div >
266
+ < h3 > Price Alerts</ h3 >
267
+ < p > Set custom alerts for your target prices</ p >
268
+ </ div >
269
+
270
+ < div class ="feature ">
271
+ < div class ="feature-icon ">
272
+ < svg viewBox ="0 0 24 24 ">
273
+ < path d ="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z "/>
274
+ </ svg >
275
+ </ div >
276
+ < h3 > Secure & Private</ h3 >
277
+ < p > Your data is protected with enterprise-grade security</ p >
278
+ </ div >
279
+ </ div >
280
+
281
+ < div class ="cta-section ">
282
+ < h3 style ="color: #1e40af; margin-bottom: 16px; font-size: 18px; "> Ready to start tracking?</ h3 >
283
+ < p style ="color: #6b7280; margin-bottom: 20px; "> Click the button below to verify your email and access your dashboard.</ p >
284
+ < a href ="{{ .ConfirmationURL }} " class ="cta-button "> Verify Email & Get Started</ a >
285
+ < p style ="font-size: 12px; color: #6b7280; margin-top: 16px; "> This link will expire in 24 hours for security reasons.</ p >
286
+ </ div >
287
+ </ div >
288
+
289
+ < div class ="footer ">
290
+ < p > If you didn't create this account, you can safely ignore this email.</ p >
291
+ < p > Need help?
< a href ="
mailto:[email protected] "
> Contact our support team
</ a > </ p >
292
+ < div class ="social-links ">
293
+ < a href ="# "> Twitter</ a > • < a href ="# "> LinkedIn</ a > • < a href ="# "> Blog</ a >
294
+ </ div >
295
+ </ div >
296
+ </ div >
297
+ </ body >
298
+ </ html >
0 commit comments