154 lines
16 KiB
HTML
154 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org" lang="en-US">
|
|
<head>
|
|
<title>Code-Create</title>
|
|
<style type="text/css">
|
|
@media screen and (max-width: 600px) {
|
|
#header_wrapper {
|
|
padding: 27px 36px !important;
|
|
font-size: 24px;
|
|
}
|
|
#body_content table > tbody > tr > td {
|
|
padding: 10px !important;
|
|
}
|
|
#body_content_inner {
|
|
font-size: 10px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="background-color: #f7f7f7; padding: 0; text-align: center;" bgcolor="#f7f7f7">
|
|
<div id="wrapper" dir="ltr" style="margin: 0 auto; padding: 70px 0; width: 100%; max-width: 600px; -webkit-text-size-adjust: none;" width="100%">
|
|
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
|
|
<tr>
|
|
<td align="center" valign="top">
|
|
<div id="template_header_image">
|
|
<p style="margin-top: 0;"><img src="https://code-create.com.hk/wp-content/uploads/2022/12/logo_black.png" alt="Code-Create" style="border: none; display: inline-block; font-size: 14px; font-weight: bold; height: auto; outline: none; text-decoration: none; text-transform: capitalize; vertical-align: middle; max-width: 100%; margin-left: 0; margin-right: 0;" border="0"></p>
|
|
</div>
|
|
<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_container" style="background-color: #fff; border: 1px solid #dedede; box-shadow: 0 1px 4px rgba(0,0,0,.1); border-radius: 3px;" bgcolor="#fff">
|
|
<tr>
|
|
<td align="center" valign="top">
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #9a2125; color: #fff; border-bottom: 0; font-weight: bold; line-height: 100%; vertical-align: middle; font-family: &quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif; border-radius: 3px 3px 0 0;" bgcolor="#9a2125">
|
|
<tr>
|
|
<td id="header_wrapper" style="padding: 36px 48px; display: block;">
|
|
<h1 style="font-family: &quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif; font-size: 30px; font-weight: 300; line-height: 150%; margin: 0; text-align: left; text-shadow: 0 1px 0 #ae4d51; color: #fff; background-color: inherit;" bgcolor="inherit">New subscription renewal order</h1>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="center" valign="top">
|
|
<table border="0" cellpadding="0" cellspacing="0" width="600" id="template_body">
|
|
<tr>
|
|
<td valign="top" id="body_content" style="background-color: #fff;" bgcolor="#fff">
|
|
<table border="0" cellpadding="20" cellspacing="0" width="100%">
|
|
<tr>
|
|
<td valign="top" style="padding: 48px 48px 32px;">
|
|
<div id="body_content_inner" style="color: #636363; font-family: &quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif; font-size: 14px; line-height: 150%; text-align: left;" align="left">
|
|
|
|
<p style="margin: 0 0 16px;">You have received a subscription renewal order from <span th:text="${username}"></span>. Their order is as follows:</p>
|
|
|
|
<h2 style="color: #9a2125; display: block; font-family: &quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif; font-size: 18px; font-weight: bold; line-height: 130%; margin: 0 0 18px; text-align: left;">
|
|
[Order #<span th:text="${orderId}"></span>] (<span th:text="${createDate}"></span>)</h2>
|
|
|
|
<div style="margin-bottom: 40px;">
|
|
<table class="td" cellspacing="0" cellpadding="6" border="1" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th class="td" scope="col" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">Product</th>
|
|
<th class="td" scope="col" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">Quantity</th>
|
|
<th class="td" scope="col" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="order_item">
|
|
<td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; word-wrap: break-word;" align="left">
|
|
AiDA
|
|
</td>
|
|
<td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;" align="left">
|
|
<span th:text="${quantity}"></span>
|
|
</td>
|
|
<td class="td" style="color: #636363; border: 1px solid #e5e5e5; padding: 12px; text-align: left; vertical-align: middle; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;" align="left">
|
|
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span><span th:text="${totalFee}"></span></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th class="td" scope="row" colspan="2" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left; border-top-width: 4px;" align="left">Subtotal:</th>
|
|
<td class="td" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left; border-top-width: 4px;" align="left"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span><span th:text="${totalFee}"></span></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th class="td" scope="row" colspan="2" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">Payment method:</th>
|
|
<td class="td" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left"><span th:text="${paymentMethod}"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th class="td" scope="row" colspan="2" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">Total:</th>
|
|
<td class="td" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span><span th:text="${totalFee}"></span></span></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 40px;">
|
|
<h2 style="color: #9a2125; display: block; font-family: &quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif; font-size: 18px; font-weight: bold; line-height: 130%; margin: 0 0 18px; text-align: left;">Subscription information</h2>
|
|
<table class="td" cellspacing="0" cellpadding="6" border="1" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; width: 100%; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; margin-bottom: 0.5em;" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th class="td" scope="col" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">ID</th>
|
|
<th class="td" scope="col" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">Start date</th>
|
|
<th class="td" scope="col" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">End date</th>
|
|
<th class="td" scope="col" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">Recurring total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="td" scope="row" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">#<span th:text="${subscriptionId}"></span></td>
|
|
<td class="td" scope="row" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left"><span th:text="${startDate}"></span></td>
|
|
<td class="td" scope="row" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">When cancelled</td>
|
|
<td class="td" scope="row" style="color: #636363; border: 1px solid #e5e5e5; vertical-align: middle; padding: 12px; text-align: left;" align="left">
|
|
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span><span th:text="${totalFee}"></span></span> every 1 <span th:text="${subscriptionType}"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<p style="margin: 0 0 10px; text-align: left;" align="left">Username: <strong><span th:text="${username}"></span></strong></p>
|
|
<p style="margin: 0 0 20px; text-align: left;" align="left">Your next payment is due on <strong><span th:text="${nextPayDate}"></span></strong></p>
|
|
<p style="margin: 0 0 16px;">Congratulations on the sale.</p>
|
|
<p style="margin: 0 0 16px;">Yours sincerely,<br>Code-Create</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="center" valign="top">
|
|
<table border="0" cellpadding="10" cellspacing="0" width="600" id="template_footer">
|
|
<tr>
|
|
<td valign="top" style="padding: 0; border-radius: 6px;">
|
|
<table border="0" cellpadding="10" cellspacing="0" width="100%">
|
|
<tr>
|
|
<td colspan="2" valign="middle" id="credit" style="border-radius: 6px; border: 0; font-family: &quot;Helvetica Neue&quot;,Helvetica,Roboto,Arial,sans-serif; font-size: 12px; line-height: 150%; text-align: center; padding: 24px 0; color: #3c3c3c;" align="center">
|
|
<p style="margin: 0 0 16px;">From Code-Create</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html> |