Thai Template » History » Version 3
karnake ruengchaicharnkij, 04/09/2026 02:26 AM
| 1 | 3 | karnake ruengchaicharnkij | ``` html |
|---|---|---|---|
| 2 | 1 | karnake ruengchaicharnkij | <!DOCTYPE html> |
| 3 | <html lang="{{.Lang}}"> |
||
| 4 | |||
| 5 | <head> |
||
| 6 | <meta charset="UTF-8"> |
||
| 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||
| 8 | <title>{{.Subject}}</title> |
||
| 9 | <style> |
||
| 10 | body { |
||
| 11 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Tahoma'; |
||
| 12 | line-height: 1.6; |
||
| 13 | color: #333333; |
||
| 14 | margin: 0; |
||
| 15 | padding: 0; |
||
| 16 | background-color: #f4f4f4; |
||
| 17 | } |
||
| 18 | |||
| 19 | .container { |
||
| 20 | width: 60%; |
||
| 21 | max-width: calc(100vw - 40px); |
||
| 22 | margin: 20px auto; |
||
| 23 | background: #ffffff; |
||
| 24 | border-radius: 8px; |
||
| 25 | overflow: hidden; |
||
| 26 | border: 1px solid #e0e0e0; |
||
| 27 | } |
||
| 28 | |||
| 29 | .header { |
||
| 30 | background-color: #0c2340; |
||
| 31 | color: #ffffff; |
||
| 32 | padding: 25px; |
||
| 33 | text-align: center; |
||
| 34 | border-bottom: 4px solid #c5a059; |
||
| 35 | } |
||
| 36 | |||
| 37 | .header h1 { |
||
| 38 | margin: 0; |
||
| 39 | font-size: 20px; |
||
| 40 | letter-spacing: 1px; |
||
| 41 | } |
||
| 42 | |||
| 43 | .content { |
||
| 44 | padding: 35px; |
||
| 45 | } |
||
| 46 | |||
| 47 | .details-table { |
||
| 48 | width: 100%; |
||
| 49 | margin: 20px 0; |
||
| 50 | border-collapse: collapse; |
||
| 51 | } |
||
| 52 | |||
| 53 | .details-table td { |
||
| 54 | padding: 12px 10px; |
||
| 55 | border-bottom: 1px solid #f0f0f0; |
||
| 56 | } |
||
| 57 | |||
| 58 | .label { |
||
| 59 | color: #666666; |
||
| 60 | width: 40%; |
||
| 61 | } |
||
| 62 | |||
| 63 | .value { |
||
| 64 | font-weight: bold; |
||
| 65 | text-align: right; |
||
| 66 | color: #0c2340; |
||
| 67 | } |
||
| 68 | |||
| 69 | .expiry-box { |
||
| 70 | background-color: #fff8e1; |
||
| 71 | border: 1px solid #ffe082; |
||
| 72 | color: #856404; |
||
| 73 | padding: 15px; |
||
| 74 | border-radius: 4px; |
||
| 75 | text-align: center; |
||
| 76 | margin: 25px 0; |
||
| 77 | font-size: 14px; |
||
| 78 | } |
||
| 79 | |||
| 80 | .button-container { |
||
| 81 | text-align: center; |
||
| 82 | margin: 30px 0; |
||
| 83 | } |
||
| 84 | |||
| 85 | .button { |
||
| 86 | background-color: #c5a059; |
||
| 87 | color: #ffffff !important; |
||
| 88 | padding: 15px 45px; |
||
| 89 | text-decoration: none; |
||
| 90 | border-radius: 4px; |
||
| 91 | font-weight: bold; |
||
| 92 | display: inline-block; |
||
| 93 | font-size: 16px; |
||
| 94 | } |
||
| 95 | |||
| 96 | .footer { |
||
| 97 | background-color: #f8f9fa; |
||
| 98 | padding: 20px; |
||
| 99 | text-align: center; |
||
| 100 | font-size: 11px; |
||
| 101 | color: #777777; |
||
| 102 | border-top: 1px solid #eeeeee; |
||
| 103 | } |
||
| 104 | </style> |
||
| 105 | </head> |
||
| 106 | |||
| 107 | <body> |
||
| 108 | <div class="container"> |
||
| 109 | <div class="header"> |
||
| 110 | <h1>{{.HeaderTitle}}</h1> |
||
| 111 | </div> |
||
| 112 | <div class="content"> |
||
| 113 | 2 | karnake ruengchaicharnkij | <p><strong>{{.GreetingPrefix}} {{.CustomerName}}</strong></p> |
| 114 | 1 | karnake ruengchaicharnkij | {{range .Contents}} |
| 115 | <p>{{.}}</p> |
||
| 116 | {{end}} |
||
| 117 | |||
| 118 | <table class="details-table"> |
||
| 119 | {{range .TableRows}} |
||
| 120 | <tr> |
||
| 121 | <td class="label">{{.Label}}</td> |
||
| 122 | <td class="value">{{.Value}}</td> |
||
| 123 | </tr> |
||
| 124 | {{end}} |
||
| 125 | </table> |
||
| 126 | |||
| 127 | <div class="expiry-box"> |
||
| 128 | <strong>{{.WarningTitle}}</strong> {{.WarningMessage}} |
||
| 129 | </div> |
||
| 130 | |||
| 131 | <div class="button-container"> |
||
| 132 | <a href="{{.ActionURL}}" class="button">{{.ButtonText}}</a> |
||
| 133 | </div> |
||
| 134 | |||
| 135 | <p style="font-size: 13px; color: #888;">{{.Note}}</p> |
||
| 136 | </div> |
||
| 137 | <div class="footer"> |
||
| 138 | <p>{{.FooterCompany}}</p> |
||
| 139 | <p>{{.FooterAddress}}</p> |
||
| 140 | <p>{{.FooterContact}}</p> |
||
| 141 | </div> |
||
| 142 | </div> |
||
| 143 | </body> |
||
| 144 | |||
| 145 | </html> |