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