github.com/masterhung0112/hk_server/v5@v5.0.0-20220302090640-ec71aef15e1c/templates/invite_body.html (about) 1 {{define "invite_body"}} 2 3 <!-- FILE: invite_body.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 media="screen and (min-width:480px)"> 86 .moz-text-html .mj-column-per-100 { 87 width: 100% !important; 88 max-width: 100%; 89 } 90 91 .moz-text-html .mj-column-per-50 { 92 width: 50% !important; 93 max-width: 50%; 94 } 95 96 .moz-text-html .mj-column-per-90 { 97 width: 90% !important; 98 max-width: 90%; 99 } 100 </style> 101 <style type="text/css"> 102 @media only screen and (max-width:480px) { 103 table.mj-full-width-mobile { 104 width: 100% !important; 105 } 106 107 td.mj-full-width-mobile { 108 width: auto !important; 109 } 110 } 111 </style> 112 <style type="text/css"> 113 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700); 114 115 .emailBody { 116 background: #F3F3F3 !important; 117 } 118 119 .emailBody a { 120 text-decoration: none !important; 121 color: #166DE0 !important; 122 } 123 124 .title div { 125 font-weight: 600 !important; 126 font-size: 28px !important; 127 line-height: 36px !important; 128 letter-spacing: -0.01em !important; 129 color: #3D3C40 !important; 130 } 131 132 .subTitle div { 133 font-size: 16px !important; 134 line-height: 24px !important; 135 color: rgba(61, 60, 64, 0.64) !important; 136 } 137 138 .button a { 139 background-color: #166DE0 !important; 140 font-weight: 600 !important; 141 font-size: 16px !important; 142 line-height: 18px !important; 143 color: #FFFFFF !important; 144 padding: 15px 24px !important; 145 } 146 147 .messageButton a { 148 background-color: #FFFFFF !important; 149 border: 1px solid #FFFFFF !important; 150 box-sizing: border-box !important; 151 color: #166DE0 !important; 152 padding: 12px 20px !important; 153 font-weight: 600 !important; 154 font-size: 14px !important; 155 line-height: 14px !important; 156 } 157 158 .info div { 159 font-size: 14px !important; 160 line-height: 20px !important; 161 color: #3D3C40 !important; 162 padding: 40px 0px !important; 163 } 164 165 .footerTitle div { 166 font-weight: 600 !important; 167 font-size: 16px !important; 168 line-height: 24px !important; 169 color: #3D3C40 !important; 170 padding: 0px 0px 4px 0px !important; 171 } 172 173 .footerInfo div { 174 font-size: 14px !important; 175 line-height: 20px !important; 176 color: #3D3C40 !important; 177 padding: 0px 48px 0px 48px !important; 178 } 179 180 .footerInfo a { 181 color: #166DE0 !important; 182 } 183 184 .appDownloadButton a { 185 background-color: #FFFFFF !important; 186 border: 1px solid #166DE0 !important; 187 box-sizing: border-box !important; 188 color: #166DE0 !important; 189 padding: 13px 20px !important; 190 font-weight: 600 !important; 191 font-size: 14px !important; 192 line-height: 14px !important; 193 } 194 195 .emailFooter div { 196 font-size: 12px !important; 197 line-height: 16px !important; 198 color: rgba(61, 60, 64, 0.56) !important; 199 padding: 8px 24px 8px 24px !important; 200 } 201 202 .postCard { 203 padding: 0px 24px 40px 24px !important; 204 } 205 206 .messageCard { 207 background: #FFFFFF !important; 208 border: 1px solid rgba(61, 60, 64, 0.08) !important; 209 box-sizing: border-box !important; 210 box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important; 211 border-radius: 4px !important; 212 padding: 32px !important; 213 } 214 215 .messageAvatar img { 216 width: 32px !important; 217 height: 32px !important; 218 padding: 0px !important; 219 border-radius: 32px !important; 220 } 221 222 .messageAvatarCol { 223 width: 32px !important; 224 } 225 226 .postNameAndTime { 227 padding: 0px 0px 4px 0px !important; 228 display: flex; 229 } 230 231 .senderName { 232 font-family: Open Sans, sans-serif; 233 text-align: left !important; 234 font-weight: 600 !important; 235 font-size: 14px !important; 236 line-height: 20px !important; 237 color: #3D3C40 !important; 238 } 239 240 .time { 241 font-family: Open Sans, sans-serif; 242 font-size: 12px; 243 line-height: 16px; 244 color: rgba(61, 60, 64, 0.56); 245 padding: 2px 6px; 246 align-items: center; 247 float: left; 248 } 249 250 .channelBg { 251 background: rgba(61, 60, 64, 0.08); 252 border-radius: 4px; 253 display: flex; 254 } 255 256 .channelLogo { 257 width: 10px; 258 height: 10px; 259 padding: 5px 4px 5px 6px; 260 float: left; 261 } 262 263 .channelName { 264 font-family: Open Sans, sans-serif; 265 font-weight: 600; 266 font-size: 10px; 267 line-height: 16px; 268 letter-spacing: 0.01em; 269 text-transform: uppercase; 270 color: rgba(61, 60, 64, 0.64); 271 padding: 2px 6px 2px 0px; 272 } 273 274 .senderMessage div { 275 text-align: left !important; 276 font-size: 14px !important; 277 line-height: 20px !important; 278 color: #3D3C40 !important; 279 padding: 0px !important; 280 } 281 282 .senderInfoCol { 283 width: 394px !important; 284 padding: 0px 0px 0px 12px !important; 285 } 286 287 @media all and (min-width: 541px) { 288 .emailBody { 289 padding: 32px !important; 290 } 291 } 292 293 @media all and (max-width: 540px) and (min-width: 401px) { 294 .emailBody { 295 padding: 16px !important; 296 } 297 298 .messageCard { 299 padding: 16px !important; 300 } 301 302 .senderInfoCol { 303 width: 80% !important; 304 padding: 0px 0px 0px 12px !important; 305 } 306 } 307 308 @media all and (max-width: 400px) { 309 .emailBody { 310 padding: 0px !important; 311 } 312 313 .footerInfo div { 314 padding: 0px !important; 315 } 316 317 .messageCard { 318 padding: 16px !important; 319 } 320 321 .postCard { 322 padding: 0px 0px 40px 0px !important; 323 } 324 325 .senderInfoCol { 326 width: 80% !important; 327 padding: 0px 0px 0px 12px !important; 328 } 329 } 330 </style> 331 </head> 332 333 <body style="word-spacing:normal;"> 334 <div class="emailBody" style=""> 335 <!--[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]--> 336 <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;"> 337 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;"> 338 <tbody> 339 <tr> 340 <td style="direction:ltr;font-size:0px;padding:24px;text-align:center;"> 341 <!--[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]--> 342 <div style="margin:0px auto;max-width:552px;"> 343 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 344 <tbody> 345 <tr> 346 <td style="direction:ltr;font-size:0px;padding:0px 0px 40px 0px;text-align:center;"> 347 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]--> 348 <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%;"> 349 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 350 <tbody> 351 <tr> 352 <td align="center" style="font-size:0px;padding:0px;word-break:break-word;"> 353 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"> 354 <tbody> 355 <tr> 356 <td style="width:132px;"> 357 <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" /> 358 </td> 359 </tr> 360 </tbody> 361 </table> 362 </td> 363 </tr> 364 </tbody> 365 </table> 366 </div> 367 <!--[if mso | IE]></td></tr></table><![endif]--> 368 </td> 369 </tr> 370 </tbody> 371 </table> 372 </div> 373 <!--[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]--> 374 <div style="margin:0px auto;max-width:552px;"> 375 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 376 <tbody> 377 <tr> 378 <td style="direction:ltr;font-size:0px;padding:0px 24px 40px 24px;text-align:center;"> 379 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:504px;" ><![endif]--> 380 <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%;"> 381 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 382 <tbody> 383 <tr> 384 <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;"> 385 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div> 386 </td> 387 </tr> 388 <tr> 389 <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 16px 24px;word-break:break-word;"> 390 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle}}</div> 391 </td> 392 </tr> 393 <tr> 394 <td align="center" vertical-align="middle" class="button" style="font-size:0px;padding:0px;word-break:break-word;"> 395 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"> 396 <tr> 397 <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle"> 398 <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"> 399 {{.Props.Button}} 400 </a> 401 </td> 402 </tr> 403 </table> 404 </td> 405 </tr> 406 </tbody> 407 </table> 408 </div> 409 <!--[if mso | IE]></td></tr></table><![endif]--> 410 </td> 411 </tr> 412 </tbody> 413 </table> 414 </div> 415 <!--[if mso | IE]></td></tr></table></td></tr><![endif]--> 416 {{if .Props.Message}} 417 <div class="postCard"> 418 <!--[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]--> 419 <div class="messageCard" style="margin:0px auto;max-width:552px;"> 420 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 421 <tbody> 422 <tr> 423 <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;"> 424 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:552px;" ><![endif]--> 425 <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;"> 426 <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:276px;" ><![endif]--> 427 <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%;"> 428 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 429 <tbody> 430 <tr> 431 <td align="center" class="messageAvatar" style="font-size:0px;padding:0px;word-break:break-word;"> 432 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"> 433 <tbody> 434 <tr> 435 <td style="width:276px;"> 436 <img alt="" height="auto" src="cid:{{.Props.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="276" /> 437 </td> 438 </tr> 439 </tbody> 440 </table> 441 </td> 442 </tr> 443 </tbody> 444 </table> 445 </div> 446 <!--[if mso | IE]></td><td style="vertical-align:top;width:496px;" ><![endif]--> 447 <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%;"> 448 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 449 <tbody> 450 <tr> 451 <td> 452 <div class="postNameAndTime"> 453 <div class="senderName">{{.Props.SenderName}}</div> 454 {{if .Props.Time}} 455 <div class="time">{{.Props.Time}}</div> 456 {{end}} 457 {{if .Props.ChannelName}} 458 <div class="channelBg"> 459 <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div> 460 <div class="channelName">{{.Props.ChannelName}}</div> 461 </div> 462 {{end}} 463 </div> 464 </td> 465 </tr> 466 <tr> 467 <td align="center" class="senderMessage" style="font-size:0px;padding:0px;word-break:break-word;"> 468 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Message}}</div> 469 </td> 470 </tr> 471 </tbody> 472 </table> 473 </div> 474 <!--[if mso | IE]></td></tr></table><![endif]--> 475 </div> 476 <!--[if mso | IE]></td></tr></table><![endif]--> 477 </td> 478 </tr> 479 </tbody> 480 </table> 481 </div> 482 <!--[if mso | IE]></td></tr></table></td></tr><![endif]--> 483 </div> 484 {{else}} 485 <!--[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]--> 486 <div style="margin:0px auto;max-width:552px;"> 487 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 488 <tbody> 489 <tr> 490 <td style="direction:ltr;font-size:0px;padding:0px 0px 40px 0px;text-align:center;"> 491 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]--> 492 <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%;"> 493 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 494 <tbody> 495 <tr> 496 <td align="center" style="font-size:0px;padding:0px;word-break:break-word;"> 497 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"> 498 <tbody> 499 <tr> 500 <td style="width:320px;"> 501 <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/invite_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" /> 502 </td> 503 </tr> 504 </tbody> 505 </table> 506 </td> 507 </tr> 508 </tbody> 509 </table> 510 </div> 511 <!--[if mso | IE]></td></tr></table><![endif]--> 512 </td> 513 </tr> 514 </tbody> 515 </table> 516 </div> 517 <!--[if mso | IE]></td></tr></table></td></tr><![endif]--> 518 {{end}} 519 <!--[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]--> 520 <div style="margin:0px auto;max-width:552px;"> 521 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 522 <tbody> 523 <tr> 524 <td style="direction:ltr;font-size:0px;padding:16px 0px 40px 0px;text-align:center;"> 525 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]--> 526 <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%;"> 527 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 528 <tbody> 529 <tr> 530 <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;"> 531 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.InviteFooterTitle}}</div> 532 </td> 533 </tr> 534 <tr> 535 <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;"> 536 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.InviteFooterInfo}}</div> 537 </td> 538 </tr> 539 <tr> 540 <td align="center" class="footerInfo" style="font-size:0px;padding:4px 0px 0px 0px;word-break:break-word;"> 541 <div style="font-family:Open Sans, sans-serif;font-size:13px;font-weight:600;line-height:1;text-align:center;color:#000000;"><a href="mattermost.com" color="#166DE0"> 542 {{.Props.InviteFooterLearnMore}}</a></div> 543 </td> 544 </tr> 545 </tbody> 546 </table> 547 </div> 548 <!--[if mso | IE]></td></tr></table><![endif]--> 549 </td> 550 </tr> 551 </tbody> 552 </table> 553 </div> 554 <!--[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]--> 555 <div style="margin:0px auto;max-width:552px;"> 556 <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> 557 <tbody> 558 <tr> 559 <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;"> 560 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]--> 561 <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%;"> 562 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"> 563 <tbody> 564 <tr> 565 <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;"> 566 <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}} 567 {{.Props.FooterV2}} 568 </div> 569 </td> 570 </tr> 571 </tbody> 572 </table> 573 </div> 574 <!--[if mso | IE]></td></tr></table><![endif]--> 575 </td> 576 </tr> 577 </tbody> 578 </table> 579 </div> 580 <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]--> 581 </td> 582 </tr> 583 </tbody> 584 </table> 585 </div> 586 <!--[if mso | IE]></td></tr></table><![endif]--> 587 </div> 588 </body> 589 590 </html> 591 592 {{end}}