From b2fa9ad434dc23a80d2344d3aeff58061cffd214 Mon Sep 17 00:00:00 2001
From: haedoang <haedoang@gmail.com>
Date: Wed, 29 Nov 2023 20:29:22 +0900
Subject: [PATCH] template update

---
 .../templates/contact-email-template.html     | 371 +++++++++---------
 1 file changed, 183 insertions(+), 188 deletions(-)
diff --git a/src/main/resources/templates/contact-email-template.html b/src/main/resources/templates/contact-email-template.html
index 73410431..96aee6d5 100644
--- a/src/main/resources/templates/contact-email-template.html
+++ b/src/main/resources/templates/contact-email-template.html
@@ -1,204 +1,199 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title th:value="${title}"></title>
-    <style>
-      :root {
-        --main-color: #ff8e00;
-        --secondary-color: #fafafa;
-        --text-color: #424242;
-        --subtext-color: #757575;
-        --border-color: #eee;
-        --card-bg: rgba(255, 142, 0, 0.1);
-      }
-
-      /* Shared styles */
-      .flex-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .text-center {
-        text-align: center;
-      }
-
-      /* Header */
-      header {
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title th:value="${title}"></title>
+</head>
+<body style="margin: 0; font-family: 'Pretendard', sans-serif">
+<header
+    style="
         display: flex;
         flex-direction: column;
         padding: 20px 0;
-        background: var(--main-color);
+        background: #ff8e00;
         align-items: center;
-      }
-
-      /* Content */
-      .content {
+      "
+>
+  <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;
-      }
-
-      /* Title */
-      .title {
-        color: var(--main-color);
-        text-align: center;
-        font-size: 18px;
-        font-weight: 600;
-      }
-
-      /* Profile */
-      .profile {
-        width: 50%;
-        display: flex;
-        padding: 20px;
-        flex-direction: column;
-        align-items: flex-start;
-        border-radius: 4px;
-        background: var(--secondary-color);
-      }
-
-      .profile-title {
-        width: 100%;
-        color: #212121;
-        text-align: center;
-        font-size: 18px;
-        font-weight: 600;
-        padding-bottom: 10px;
-      }
-
-      .profile-info {
-        display: flex;
-        padding-bottom: 0px;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        align-self: stretch;
-      }
-
-      .profile-info--name {
-        color: var(--text-color);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-        padding-top: 10px;
-      }
-
-      .profile-info--year,
-      .profile-info--email,
-      .profile-introduction {
-        color: var(--subtext-color);
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-      }
-
-      /* Horizontal Rule */
-      hr {
-        width: 100%;
-        border: 1px solid var(--border-color);
-      }
-
-      /* Card */
-      .card {
-        display: flex;
-        padding: 20px;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        gap: 10px;
-        border-radius: 4px;
-        background: var(--card-bg);
-        width: 50%;
-      }
-
-      .card-title {
-        color: var(--main-color);
-        text-align: center;
-        font-size: 18px;
-        font-weight: 600;
-        width: 100%;
-      }
-
-      .card-description {
-        color: var(--text-color);
-        font-family: Pretendard;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        margin: 0;
-      }
-
-      /* Link */
-      a {
-        display: flex;
-        padding: 8px 10px;
-        justify-content: center;
-        align-items: center;
-        gap: 4px;
-        flex: 1 0 0;
-        border-radius: 2px;
-        border: 1px solid var(--main-color);
-        color: var(--main-color);
-        text-align: center;
-        font-size: 14px;
-        font-weight: 700;
-        width: 50%;
-        background-color: white;
-        text-decoration: none;
-      }
-
-      /* Profile Image */
-      .profile-info-image--box {
-        width: 50px;
-        height: 50px;
-        border-radius: 45px;
-        overflow: hidden;
-      }
-
-      .profile-info-image--img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    </style>
-  </head>
-  <body>
-    <header>
-      <img src="https://kr.object.ncloudstorage.com/backend-bucket/images/templates/house.svg" alt="house" />
-    </header>
-    <div class="content">
-      <div class="title"><span th:text="${subtitle}"/></div>
-      <div class="profile">
-        <div class="profile-title">Sender’s Profile</div>
-        <div class="profile-info">
-          <div class="profile-info-image--box" style="background: #bdbdbd">
-            <img class="profile-info-image--img" th:src="${userImageProfile}" />
-          </div>
-          <div class="profile-info--name" th:text="${userName}"/>
-          <div class="profile-info--year">
-            <span th:text="${userAge}"/>
-            <span> years old | </span>
-            <span th:text="${userGender}"/>
-          </div>
-          <div class="profile-info--email" th:text="${contact}"/>
-        </div>
-        <hr />
-        <p class="profile-introduction" th:text="${userDescription}">
-        </p>
-      </div>
-      <div class="card">
-        <div class="card-title">Message</div>
-        <p class="card-description" th:text="${message}"></p>
+      "
+>
+  <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
+        style="
+            width: 100%;
+            color: #212121;
+            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;
+          "
+    >
+      <div
+          style="
+              width: 50px;
+              height: 50px;
+              border-radius: 45px;
+              overflow: hidden;
+              background: #bdbdbd;
+            "
+      >
+        <img
+            style="width: 100%; height: 100%; object-fit: cover"
+            th:src="${userImageProfile}"
+        />
       </div>
-      <a th:href="${roomLink}" target="_blank"
-        ><img src="https://kr.object.ncloudstorage.com/backend-bucket/images/templates/house-cute.svg" alt="" /> Go to room</a
+      <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="
+          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>
-  </body>
+    <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>
+</body>
 </html>
