Skip to content

Commit

Permalink
Merge pull request #245 from haedoang/feature/report
Browse files Browse the repository at this point in the history 
[refact] CSS 수정에 따른 템플릿 업데이트
  • Loading branch information
@haedoang
haedoang authored Nov 29, 2023
2 parents 302693c + b2fa9ad commit 400fea3
Showing 1 changed file with 183 additions and 188 deletions.
371 changes: 183 additions & 188 deletions src/main/resources/templates/contact-email-template.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 400fea3

Please sign in to comment.