From f2724266d6dcf93766e3349e13c8f10e517e6fad Mon Sep 17 00:00:00 2001
From: haedoang <haedoang@gmail.com>
Date: Tue, 26 Dec 2023 20:45:51 +0900
Subject: [PATCH] update template

---
 .../templates/contact-email-template.html     | 324 +++++++++---------
 1 file changed, 156 insertions(+), 168 deletions(-)
diff --git a/src/main/resources/templates/contact-email-template.html b/src/main/resources/templates/contact-email-template.html
index 96aee6d..1772ffd 100644
--- a/src/main/resources/templates/contact-email-template.html
+++ b/src/main/resources/templates/contact-email-template.html
@@ -6,194 +6,182 @@
   <title th:value="${title}"></title>
 </head>
 <body style="margin: 0; font-family: 'Pretendard', sans-serif">
-<header
+<table
     style="
-        display: flex;
-        flex-direction: column;
-        padding: 20px 0;
-        background: #ff8e00;
-        align-items: center;
+        width: 100%;
+        border-collapse: collapse;
+        margin: 0;
+        font-family: 'Pretendard', sans-serif;
       "
 >
-  <img
-      src="https://kr.object.ncloudstorage.com/backend-bucket/images/templates/house.svg"
-      alt="house"
-  />
-</header>
-<div
-    style="
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        padding-top: 20px;
-        text-align: center;
-        align-items: center;
-      "
->
-  <div
-      style="
-          color: #ff8e00;
-          text-align: center;
-          font-size: 18px;
-          font-weight: 600;
-        "
-  >
-    <span th:text="${subtitle}" />
-  </div>
-  <div
-      style="
-          width: 50%;
-          display: flex;
-          padding: 20px;
-          flex-direction: column;
-          align-items: flex-start;
-          border-radius: 4px;
-          background: #fafafa;
-        "
-  >
-    <div
+  <tr>
+    <td
         style="
-            width: 100%;
-            color: #212121;
+            display: block;
+            padding: 20px 0;
+            background: #FF8E00;
             text-align: center;
-            font-size: 18px;
-            font-weight: 600;
-            padding-bottom: 10px;
-          "
-    >
-      Sender’s Profile
-    </div>
-    <div
-        style="
-            display: flex;
-            padding-bottom: 0px;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            align-self: stretch;
           "
     >
+      <img
+          src="https://kr.object.ncloudstorage.com/backend-bucket/images/templates/house.svg"
+          alt="house"
+      />
+    </td>
+  </tr>
+  <tr>
+    <td style="display: block; padding: 20px; text-align: center">
       <div
           style="
-              width: 50px;
-              height: 50px;
-              border-radius: 45px;
-              overflow: hidden;
-              background: #bdbdbd;
+              color: #FF8E00;
+              text-align: center;
+              font-size: 18px;
+              font-weight: 600;
             "
       >
-        <img
-            style="width: 100%; height: 100%; object-fit: cover"
-            th:src="${userImageProfile}"
-        />
+        <span th:text="${subtitle}" />
       </div>
       <div
           style="
-              color: #424242;
-              font-size: 14px;
-              font-style: normal;
-              font-weight: 600;
-              padding-top: 10px;
+              width: 50%;
+              display: block;
+              padding: 20px;
+              margin: 0 auto;
+              border-radius: 4px;
+              background: #FAFAFA;
             "
-          th:text="${userName}"
-      ></div>
+      >
+        <div
+            style="
+                width: 100%;
+                color: #212121;
+                text-align: center;
+                font-size: 18px;
+                font-weight: 600;
+                padding-bottom: 10px;
+              "
+        >
+          Sender’s Profile
+        </div>
+        <div style="display: block; margin-bottom: 0px; text-align: center">
+          <div
+              style="
+                  width: 50px;
+                  height: 50px;
+                  border-radius: 45px;
+                  overflow: hidden;
+                  background: #BDBDBD;
+                  margin: 0 auto;
+                "
+          >
+            <img
+                style="width: 100%; height: 100%; object-fit: cover"
+                th:src="${userImageProfile}"
+            />
+          </div>
+          <div
+              style="
+                  color: #424242;
+                  font-size: 14px;
+                  font-style: normal;
+                  font-weight: 600;
+                  padding-top: 10px;
+                "
+              th:text="${userName}"
+          ></div>
+          <div
+              style="
+                  color: #757575;
+                  font-size: 12px;
+                  font-style: normal;
+                  font-weight: 400;
+                "
+          >
+            <span th:text="${userAge}"></span>
+            <span>years old | </span>
+            <span th:text="${userGender}"></span>
+          </div>
+          <div
+              style="
+                  color: #757575;
+                  font-size: 12px;
+                  font-style: normal;
+                  font-weight: 400;
+                "
+              th:text="${contact}"
+          ></div>
+        </div>
+        <hr style="width: 100%; border: 1px solid #eee" />
+        <p
+            style="
+                color: #757575;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 400;
+              "
+            th:text="${userDescription}"
+        ></p>
+      </div>
       <div
           style="
-              color: #757575;
-              font-size: 12px;
-              font-style: normal;
-              font-weight: 400;
+              width: 50%;
+              display: block;
+              padding: 20px;
+              margin: 0 auto;
+              border-radius: 4px;
+              background: rgba(255, 142, 0, 0.1);
             "
       >
-        <span th:text="${userAge}"></span>
-        <span> years old | </span>
-        <span th:text="${userGender}"></span>
+        <div
+            style="
+                color: #FF8E00;
+                text-align: center;
+                font-size: 18px;
+                font-weight: 600;
+                width: 100%;
+              "
+        >
+          Message
+        </div>
+        <p
+            style="
+                color: #424242;
+                font-family: Pretendard;
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 400;
+                margin: 0;
+              "
+            th:text="${message}"
+        ></p>
       </div>
-      <div
+      <a
           style="
-              color: #757575;
-              font-size: 12px;
-              font-style: normal;
-              font-weight: 400;
+              display: block;
+              padding: 8px 10px;
+              margin: 0 auto;
+              border-radius: 2px;
+              border: 1px solid #FF8E00;
+              color: #FF8E00;
+              text-align: center;
+              font-size: 14px;
+              font-weight: 700;
+              width: 50%;
+              background-color: white;
+              text-decoration: none;
             "
-          th:text="${contact}"
-      ></div>
-    </div>
-    <hr style="width: 100%; border: 1px solid #eee" />
-    <p
-        style="
-            color: #757575;
-            font-size: 12px;
-            font-style: normal;
-            font-weight: 400;
-          "
-        th:text="${userDescription}"
-    ></p>
-  </div>
-  <div
-      style="
-          width: 50%;
-          display: flex;
-          padding: 20px;
-          flex-direction: column;
-          justify-content: center;
-          align-items: flex-start;
-          gap: 10px;
-          border-radius: 4px;
-          background: rgba(255, 142, 0, 0.1);
-        "
-  >
-    <div
-        style="
-            color: #ff8e00;
-            text-align: center;
-            font-size: 18px;
-            font-weight: 600;
-            width: 100%;
-          "
-    >
-      Message
-    </div>
-    <p
-        style="
-            color: #424242;
-            font-family: Pretendard;
-            font-size: 14px;
-            font-style: normal;
-            font-weight: 400;
-            margin: 0;
-          "
-        th:text="${message}"
-    ></p>
-  </div>
-  <a
-      style="
-          display: flex;
-          padding: 8px 10px;
-          justify-content: center;
-          align-items: center;
-          gap: 4px;
-          flex: 1 0 0;
-          border-radius: 2px;
-          border: 1px solid #ff8e00;
-          color: #ff8e00;
-          text-align: center;
-          font-size: 14px;
-          font-weight: 700;
-          width: 50%;
-          background-color: white;
-          text-decoration: none;
-        "
-      th:href="${roomLink}"
-      target="_blank"
-  >
-    <img
-        src="https://kr.object.ncloudstorage.com/backend-bucket/images/templates/house-cute.svg"
-        alt=""
-        style="width: 20px; height: auto"
-    />
-    Go to room
-  </a>
-</div>
+          th:href="${roomLink}"
+          target="_blank"
+      >
+        <img
+            src="https://kr.object.ncloudstorage.com/backend-bucket/images/templates/house-cute.svg"
+            alt=""
+            style="width: 20px; height: auto; margin-right: 4px"
+        />
+        Go to room
+      </a>
+    </td>
+  </tr>
+</table>
 </body>
-</html>
+</html>
\ No newline at end of file
