Initial project
This commit is contained in:
Timi
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Title</title>
|
||||
<style>
|
||||
<#include "StyleSheet.ftl" />
|
||||
</style>
|
||||
<style>
|
||||
.btn {
|
||||
color: #FFF !important;
|
||||
width: 7rem;
|
||||
margin: 32px auto 48px auto;
|
||||
border: none;
|
||||
display: block;
|
||||
padding: 8px 24px;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
background: #53BD93;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #5AC79B;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 12px 0 6px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
<div class="mail">
|
||||
<#if user.data.hasWrapper>
|
||||
<img
|
||||
class="wrapper ir-${user.data.wrapperType?lower_case}"
|
||||
src="https://res.imyeyu.net/user/wrapper/${user.id}.png"
|
||||
/>
|
||||
<#else>
|
||||
<img class="wrapper ir-pixelated" src="https://res.imyeyu.net/user/wrapper/default.png" />
|
||||
</#if>
|
||||
<h4 class="title">
|
||||
<span class="pink bold">${user.name} </span>
|
||||
<span>您好，您正在验证</span>
|
||||
<span class="pink bold"> 夜雨博客 </span>
|
||||
<span>的邮箱绑定，请在 10 分钟内点击下面的按钮完成校验，让我确定这是你的电子邮箱，不要泄露此邮件内容。</span>
|
||||
</h4>
|
||||
<a class="btn" href="${url}" multilingualField="_blank">继续完成验证</a>
|
||||
<aside class="tips center gray">如果这不是你本人操作，请无视此邮件</aside>
|
||||
<#include "Footer.ftl" />
|
||||
</div>
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="line3"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<footer class="footer font12 center">
|
||||
<p>这是由系统自动发送的邮件，请不要回复</p>
|
||||
<p>
|
||||
<span>如果这封邮件打扰到您，请直接屏蔽本邮箱或登录</span>
|
||||
<a href="https://www.imyeyu.net">夜雨博客</a>
|
||||
<span>个人空间中的设置随时关闭</span>
|
||||
</p>
|
||||
<p> </p>
|
||||
<p>朝朝频顾惜，夜夜不相忘</p>
|
||||
<p>Copyright © 2017 - ${.now?string["yyyy"]} 夜雨 All Rights Reserved 版权所有</p>
|
||||
</footer>
|
||||
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Title</title>
|
||||
<style>
|
||||
<#include "StyleSheet.ftl" />
|
||||
</style>
|
||||
<style>
|
||||
.comment {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
margin: 16px auto 4px auto;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.comment .content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment .content .avatar {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #777;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.comment .content h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment .content .data {
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.sign-in-tips {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
<div class="mail">
|
||||
<#if user.data.hasWrapper>
|
||||
<img
|
||||
class="wrapper ir-${user.data.wrapperType?lower_case}"
|
||||
src="https://res.imyeyu.net/user/wrapper/${user.id}.png"
|
||||
/>
|
||||
<#else>
|
||||
<img class="wrapper ir-pixelated" src="https://res.imyeyu.net/user/wrapper/default.png" />
|
||||
</#if>
|
||||
<h4 class="title">
|
||||
<span class="pink bold">${user.name} </span>
|
||||
<span>您好，您在</span>
|
||||
<span class="pink bold"> 夜雨博客 </span>
|
||||
<span>的评论收到以下回复</span>
|
||||
<span class="gray">(24 小时内)</span>
|
||||
</h4>
|
||||
<#list reminds as remind>
|
||||
<section class="comment">
|
||||
<div class="content">
|
||||
<#if remind.reply.sender??>
|
||||
<#if remind.reply.sender.data.avatarType>
|
||||
<img
|
||||
class="avatar ir-${remind.reply.sender.data.avatarType?lower_case}"
|
||||
src="https://res.imyeyu.net/user/avatar/${remind.reply.sender.id}.png"
|
||||
/>
|
||||
<#else>
|
||||
<img class="avatar ir-pixelated" src="https://res.imyeyu.net/user/avatar/default.png" />
|
||||
</#if>
|
||||
<h4>${remind.reply.sender.name} 说：</h4>
|
||||
<#else>
|
||||
<img class="avatar ir-pixelated" src="https://res.imyeyu.net/user/avatar/default.png" />
|
||||
<h4>${remind.reply.senderNick} 说：</h4>
|
||||
</#if>
|
||||
<p class="data clip-text">${remind.reply.data}</p>
|
||||
</div>
|
||||
<span class="gray time font12">${remind.reply.createdAt?number_to_datetime?string("yyyy-MM-dd HH:mm:ss")}</span>
|
||||
</section>
|
||||
</#list>
|
||||
<p class="sign-in-tips gray font12 center">本邮件仅作摘要提醒，登录博客查看详细信息</p>
|
||||
<#include "Footer.ftl" />
|
||||
</div>
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="line3"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Title</title>
|
||||
<style>
|
||||
<#include "StyleSheet.ftl" />
|
||||
</style>
|
||||
<style>
|
||||
.btn {
|
||||
color: #FFF !important;
|
||||
width: 7rem;
|
||||
margin: 32px auto 48px auto;
|
||||
border: none;
|
||||
display: block;
|
||||
padding: 8px 24px;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
background: #53BD93;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #5AC79B;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 12px 0 6px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
<div class="mail">
|
||||
<#if user.data.hasWrapper>
|
||||
<img
|
||||
class="wrapper ir-${user.data.wrapperType?lower_case}"
|
||||
src="https://res.imyeyu.net/user/wrapper/${user.id}.png"
|
||||
alt="user wrapper"
|
||||
/>
|
||||
<#else>
|
||||
<img
|
||||
class="wrapper ir-pixelated"
|
||||
src="https://res.imyeyu.net/user/wrapper/default.png"
|
||||
alt="user wrapper"
|
||||
/>
|
||||
</#if>
|
||||
<h4 class="title">
|
||||
<span class="pink bold">${user.name} </span>
|
||||
<span>您好，</span>
|
||||
<span class="pink bold">夜雨博客 </span>
|
||||
<span>收到了您的重置密码请求，请在 10 分钟内点击下面的按钮继续完成，不要泄露此邮件内容。</span>
|
||||
</h4>
|
||||
<a class="btn" href="${url}" multilingualField="_blank">重置密码</a>
|
||||
<aside class="tips center gray">如果这不是你本人操作，请无视此邮件</aside>
|
||||
<#include "Footer.ftl" />
|
||||
</div>
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="line3"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,163 @@
|
||||
/* 基本样式 */
|
||||
.font12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pink {
|
||||
color: #FF7A9B;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.clip-text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ir-pixelated {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.ir-auto {
|
||||
image-rendering: auto;
|
||||
}
|
||||
|
||||
.ir-smooth {
|
||||
image-rendering: smooth;
|
||||
}
|
||||
|
||||
/* 布局样式 */
|
||||
|
||||
.root {
|
||||
width: 42rem;
|
||||
margin: 24px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mail {
|
||||
margin: 0 3rem;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, .5);
|
||||
background: #F4F4F4;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-bottom: 1px solid #CDDEF0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 4px 12px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #555;
|
||||
padding: 12px 0;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.line1 {
|
||||
height: 3px;
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
margin-top: -50px;
|
||||
background: #FF7A9B;
|
||||
}
|
||||
|
||||
.line1::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 3px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background: #FF7A9B;
|
||||
transform: rotate(-30deg);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.line1::after {
|
||||
content: "";
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 3px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background: #FF7A9B;
|
||||
transform: rotate(30deg);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.line2,
|
||||
.line3 {
|
||||
width: 3px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
background: linear-gradient(to bottom, rgba(255,122,155,1) 0%, rgba(255,255,255,0) 100%);;
|
||||
}
|
||||
|
||||
.line2::before,
|
||||
.line3::before {
|
||||
content: "";
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.line2::before {
|
||||
top: 33px;
|
||||
left: 12px;
|
||||
transform: rotate(16deg);
|
||||
}
|
||||
|
||||
.line3::before {
|
||||
top: 32px;
|
||||
right: 12px;
|
||||
transform: rotate(-16deg);
|
||||
}
|
||||
|
||||
.line2::after,
|
||||
.line3::after {
|
||||
content: "";
|
||||
top: -1px;
|
||||
width: 21.8rem;
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
background: #FF7A9B;
|
||||
}
|
||||
|
||||
.line2::after {
|
||||
left: 2px;
|
||||
transform: rotate(16deg);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.line3::after {
|
||||
right: 2px;
|
||||
transform: rotate(-16deg);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.line3 {
|
||||
right: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user