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