github.com/masterhung0112/hk_server/v5@v5.0.0-20220302090640-ec71aef15e1c/templates/messages_notification.html (about) 1 {{define "messages_notification"}} 2 3 <!-- FILE: messages_notification.mjml --> 4 <!doctype html> 5 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 6 7 <head> 8 <title> 9 </title> 10 <!--[if !mso]><!--> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 12 <!--<![endif]--> 13 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 14 <meta name="viewport" content="width=device-width, initial-scale=1"> 15 <style type="text/css"> 16 #outlook a { 17 padding: 0; 18 } 19 20 body { 21 margin: 0; 22 padding: 0; 23 -webkit-text-size-adjust: 100%; 24 -ms-text-size-adjust: 100%; 25 } 26 27 table, 28 td { 29 border-collapse: collapse; 30 mso-table-lspace: 0pt; 31 mso-table-rspace: 0pt; 32 } 33 34 img { 35 border: 0; 36 height: auto; 37 line-height: 100%; 38 outline: none; 39 text-decoration: none; 40 -ms-interpolation-mode: bicubic; 41 } 42 43 p { 44 display: block; 45 margin: 13px 0; 46 } 47 </style> 48 <!--[if mso]> 49 <xml> 50 <o:OfficeDocumentSettings> 51 <o:AllowPNG/> 52 <o:PixelsPerInch>96</o:PixelsPerInch> 53 </o:OfficeDocumentSettings> 54 </xml> 55 <![endif]--> 56 <!--[if lte mso 11]> 57 <style type="text/css"> 58 .mj-outlook-group-fix { width:100% !important; } 59 </style> 60 <![endif]--> 61 <!--[if !mso]><!--> 62 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css"> 63 <style type="text/css"> 64 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700); 65 </style> 66 <!--<![endif]--> 67 <style type="text/css"> 68 @media only screen and (min-width:480px) { 69 .mj-column-per-100 { 70 width: 100% !important; 71 max-width: 100%; 72 } 73 74 .mj-column-per-50 { 75 width: 50% !important; 76 max-width: 50%; 77 } 78 79 .mj-column-per-90 { 80 width: 90% !important; 81 max-width: 90%; 82 } 83 } 84 </style> 85 <style type="text/css"> 86 @media only screen and (max-width:480px) { 87 table.mj-full-width-mobile { 88 width: 100% !important; 89 } 90 91 td.mj-full-width-mobile { 92 width: auto !important; 93 } 94 } 95 </style> 96 <style type="text/css"> 97 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700); 98 99 .emailBody { 100 background: #F3F3F3 !important; 101 } 102 103 .emailBody a { 104 text-decoration: none !important; 105 color: #166DE0 !important; 106 } 107 108 .title div { 109 font-weight: 600 !important; 110 font-size: 28px !important; 111 line-height: 36px !important; 112 letter-spacing: -0.01em !important; 113 color: #3D3C40 !important; 114 } 115 116 .subTitle div { 117 font-size: 16px !important; 118 line-height: 24px !important; 119 color: rgba(61, 60, 64, 0.64) !important; 120 } 121 122 .button a { 123 background-color: #166DE0 !important; 124 font-weight: 600 !important; 125 font-size: 16px !important; 126 line-height: 18px !important; 127 color: #FFFFFF !important; 128 padding: 15px 24px !important; 129 } 130 131 .messageButton a { 132 background-color: #FFFFFF !important; 133 border: 1px solid #FFFFFF !important; 134 box-sizing: border-box !important; 135 color: #166DE0 !important; 136 padding: 12px 20px !important; 137 font-weight: 600 !important; 138 font-size: 14px !important; 139 line-height: 14px !important; 140 } 141 142 .info div { 143 font-size: 14px !important; 144 line-height: 20px !important; 145 color: #3D3C40 !important; 146 padding: 40px 0px !important; 147 } 148 149 .footerTitle div { 150 font-weight: 600 !important; 151 font-size: 16px !important; 152 line-height: 24px !important; 153 color: #3D3C40 !important; 154 padding: 0px 0px 4px 0px !important; 155 } 156 157 .footerInfo div { 158 font-size: 14px !important; 159 line-height: 20px !important; 160 color: #3D3C40 !important; 161 padding: 0px 48px 0px 48px !important; 162 } 163 164 .footerInfo a { 165 color: #166DE0 !important; 166 } 167 168 .appDownloadButton a { 169 background-color: #FFFFFF !important; 170 border: 1px solid #166DE0 !important; 171 box-sizing: border-box !important; 172 color: #166DE0 !important; 173 padding: 13px 20px !important; 174 font-weight: 600 !important; 175 font-size: 14px !important; 176 line-height: 14px !important; 177 } 178 179 .emailFooter div { 180 font-size: 12px !important; 181 line-height: 16px !important; 182 color: rgba(61, 60, 64, 0.56) !important; 183 padding: 8px 24px 8px 24px !important; 184 } 185 186 .postCard { 187 padding: 0px 24px 40px 24px !important; 188 } 189 190 .messageCard { 191 background: #FFFFFF !important; 192 border: 1px solid rgba(61, 60, 64, 0.08) !important; 193 box-sizing: border-box !important; 194 box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important; 195 border-radius: 4px !important; 196 padding: 32px !important; 197 } 198 199 .messageAvatar img { 200 width: 32px !important; 201 height: 32px !important; 202 padding: 0px !important; 203 border-radius: 32px !important; 204 } 205 206 .messageAvatarCol { 207 width: 32px !important; 208 } 209 210 .postNameAndTime { 211 padding: 0px 0px 4px 0px !important; 212 display: flex; 213 } 214 215 .senderName { 216 font-family: Open Sans, sans-serif; 217 text-align: left !important; 218 font-weight: 600 !important; 219 font-size: 14px !important; 220 line-height: 20px !important; 221 color: #3D3C40 !important; 222 } 223 224 .time { 225 font-family: Open Sans, sans-serif; 226 font-size: 12px; 227 line-height: 16px; 228 color: rgba(61, 60, 64, 0.56); 229 padding: 2px 6px; 230 align-items: center; 231 float: left; 232 } 233 234 .channelBg { 235 background: rgba(61, 60, 64, 0.08); 236 border-radius: 4px; 237 display: flex; 238 } 239 240 .channelLogo { 241 width: 10px; 242 height: 10px; 243 padding: 5px 4px 5px 6px; 244 float: left; 245 } 246 247 .channelName { 248 font-family: Open Sans, sans-serif; 249 font-weight: 600; 250 font-size: 10px; 251 line-height: 16px; 252 letter-spacing: 0.01em; 253 text-transform: uppercase; 254 color: rgba(61, 60, 64, 0.64); 255 padding: 2px 6px 2px 0px; 256 } 257 258 .senderMessage div { 259 text-align: left !important; 260 font-size: 14px !important; 261 line-height: 20px !important; 262 color: #3D3C40 !important; 263 padding: 0px !important; 264 } 265 266 .senderInfoCol { 267 width: 394px !important; 268 padding: 0px 0px 0px 12px !important; 269 } 270 271 @media all and (min-width: 541px) { 272 .emailBody { 273 padding: 32px !important; 274 } 275 } 276 277 @media all and (max-width: 540px) and (min-width: 401px) { 278 .emailBody { 279 padding: 16px !important; 280 } 281 282 .messageCard { 283 padding: 16px !important; 284 } 285 286 .senderInfoCol { 287 width: 80% !important; 288 padding: 0px 0px 0px 12px !important; 289 } 290 } 291 292 @media all and (max-width: 400px) { 293 .emailBody { 294 padding: 0px !important; 295 } 296 297 .footerInfo div { 298 padding: 0px !important; 299 } 300 301 .messageCard { 302 padding: 16px !important; 303 } 304 305 .postCard { 306 padding: 0px 0px 40px 0px !important; 307 } 308 309 .senderInfoCol { 310 width: 80% !important; 311 padding: 0px 0px 0px 12px !important; 312 } 313 } 314 </style> 315 </head> 316 317 <body style="word-spacing:normal;"> 318 <div class="emailBody" style=""> 319 <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> 320 <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;"> 321 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;"> 322 <tbody> 323 <tr> 324 <td style="direction:ltr;font-size:0px;padding:24px;text-align:center;"> 325 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> 326 <div style="margin:0px auto;max-width:552px;"> 327 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 328 <tbody> 329 <tr> 330 <td style="direction:ltr;font-size:0px;padding:0px 0px 40px 0px;text-align:center;"> 331 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]--> 332 <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"> 333 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 334 <tbody> 335 <tr> 336 <td align="center" style="font-size:0px;padding:0px;word-break:break-word;"> 337 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"> 338 <tbody> 339 <tr> 340 <td style="width:132px;"> 341 <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_blue.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" /> 342 </td> 343 </tr> 344 </tbody> 345 </table> 346 </td> 347 </tr> 348 </tbody> 349 </table> 350 </div> 351 <!--[if mso | IE]></td></tr></table><![endif]--> 352 </td> 353 </tr> 354 </tbody> 355 </table> 356 </div> 357 <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> 358 <div style="margin:0px auto;max-width:552px;"> 359 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 360 <tbody> 361 <tr> 362 <td style="direction:ltr;font-size:0px;padding:0px 24px 40px 24px;text-align:center;"> 363 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:504px;" ><![endif]--> 364 <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"> 365 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 366 <tbody> 367 <tr> 368 <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;"> 369 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div> 370 </td> 371 </tr> 372 <tr> 373 <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 16px 24px;word-break:break-word;"> 374 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle}}</div> 375 </td> 376 </tr> 377 <tr> 378 <td align="center" vertical-align="middle" class="button" style="font-size:0px;padding:0px;word-break:break-word;"> 379 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"> 380 <tr> 381 <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle"> 382 <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank"> 383 {{.Props.Button}} 384 </a> 385 </td> 386 </tr> 387 </table> 388 </td> 389 </tr> 390 </tbody> 391 </table> 392 </div> 393 <!--[if mso | IE]></td></tr></table><![endif]--> 394 </td> 395 </tr> 396 </tbody> 397 </table> 398 </div> 399 <!--[if mso | IE]></td></tr></table></td></tr><![endif]--> 400 {{range .Props.Posts}} 401 <div class="postCard"> 402 <!--[if mso | IE]><tr><td class="messageCard-outlook" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="messageCard-outlook" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> 403 <div class="messageCard" style="margin:0px auto;max-width:552px;"> 404 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 405 <tbody> 406 <tr> 407 <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;"> 408 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:552px;" ><![endif]--> 409 <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"> 410 <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:276px;" ><![endif]--> 411 <div class="mj-column-per-50 mj-outlook-group-fix messageAvatarCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"> 412 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 413 <tbody> 414 <tr> 415 <td align="center" class="messageAvatar" style="font-size:0px;padding:0px;word-break:break-word;"> 416 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"> 417 <tbody> 418 <tr> 419 <td style="width:276px;"> 420 <img alt="" height="auto" src="cid:{{.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="276" /> 421 </td> 422 </tr> 423 </tbody> 424 </table> 425 </td> 426 </tr> 427 </tbody> 428 </table> 429 </div> 430 <!--[if mso | IE]></td><td style="vertical-align:top;width:496px;" ><![endif]--> 431 <div class="mj-column-per-90 mj-outlook-group-fix senderInfoCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:90%;"> 432 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 433 <tbody> 434 <tr> 435 <td> 436 <div class="postNameAndTime"> 437 <div class="senderName">{{.SenderName}}</div> 438 {{if .Time}} 439 <div class="time">{{.Time}}</div> 440 {{end}} 441 {{if .ChannelName}} 442 <div class="channelBg"> 443 <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div> 444 <div class="channelName">{{.ChannelName}}</div> 445 </div> 446 {{end}} 447 </div> 448 </td> 449 </tr> 450 <tr> 451 <td align="center" class="senderMessage" style="font-size:0px;padding:0px;word-break:break-word;"> 452 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Message}}</div> 453 </td> 454 </tr> 455 {{if .MessageURL}} 456 <tr> 457 <td align="center" vertical-align="middle" class="messageButton" style="font-size:0px;padding:16px 0px 0px 0px;word-break:break-word;"> 458 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"> 459 <tr> 460 <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle"> 461 <a href="{{.MessageURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank"> 462 {{$.Props.MessageButton}} 463 </a> 464 </td> 465 </tr> 466 </table> 467 </td> 468 </tr> 469 {{end}} 470 </tbody> 471 </table> 472 </div> 473 <!--[if mso | IE]></td></tr></table><![endif]--> 474 </div> 475 <!--[if mso | IE]></td></tr></table><![endif]--> 476 </td> 477 </tr> 478 </tbody> 479 </table> 480 </div> 481 <!--[if mso | IE]></td></tr></table></td></tr><![endif]--> 482 </div>{{end}} 483 <!--[if mso | IE]><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> 484 <div style="margin:0px auto;max-width:552px;"> 485 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 486 <tbody> 487 <tr> 488 <td style="direction:ltr;font-size:0px;padding:16px 0px 40px 0px;text-align:center;"> 489 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]--> 490 <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"> 491 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 492 <tbody> 493 <tr> 494 <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;"> 495 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.NotificationFooterTitle}}</div> 496 </td> 497 </tr> 498 <tr> 499 <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;"> 500 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;"><a href="{{.Props.SiteURL}}">{{.Props.NotificationFooterInfoLogin}}</a>{{.Props.NotificationFooterInfo}}</div> 501 </td> 502 </tr> 503 </tbody> 504 </table> 505 </div> 506 <!--[if mso | IE]></td></tr></table><![endif]--> 507 </td> 508 </tr> 509 </tbody> 510 </table> 511 </div> 512 <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> 513 <div style="margin:0px auto;max-width:552px;"> 514 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 515 <tbody> 516 <tr> 517 <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;"> 518 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]--> 519 <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"> 520 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 521 <tbody> 522 <tr> 523 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;"> 524 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}} 525 {{.Props.FooterV2}} 526 </div> 527 </td> 528 </tr> 529 </tbody> 530 </table> 531 </div> 532 <!--[if mso | IE]></td></tr></table><![endif]--> 533 </td> 534 </tr> 535 </tbody> 536 </table> 537 </div> 538 <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]--> 539 </td> 540 </tr> 541 </tbody> 542 </table> 543 </div> 544 <!--[if mso | IE]></td></tr></table><![endif]--> 545 </div> 546 </body> 547 548 </html> 549 550 {{end}}