dptxa-proxy / src /templates /email /forgot-password.html
TXAVLOG
Deploy DPTXA to Hugging Face Spaces
4bea261
Raw
History Blame Contribute Delete
3.98 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Khôi phục mật khẩu của bạn tại TPHIMX</title>
<style>
body {
background-color: #0b0c10;
color: #ffffff;
font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 600px;
margin: 40px auto;
background-color: #12141d;
border: 1px solid rgba(124, 58, 237, 0.15);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 50px rgba(124, 58, 237, 0.1);
}
.header {
padding: 40px 20px;
text-align: center;
background: linear-gradient(135deg, #12141d 0%, #1a103c 100%);
border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}
.logo {
font-size: 28px;
font-weight: 900;
letter-spacing: -1px;
color: #ffffff;
}
.logo span {
color: #7c3aed;
text-shadow: 0 0 15px rgba(124, 58, 237, 0.6);
}
.content {
padding: 40px;
line-height: 1.6;
}
h1 {
font-size: 22px;
font-weight: 800;
margin-top: 0;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: -0.5px;
}
p {
color: #9ca3af;
font-size: 15px;
margin-bottom: 24px;
}
.highlight {
color: #7c3aed;
font-weight: bold;
}
.button-container {
text-align: center;
margin: 35px 0;
}
.btn {
display: inline-block;
background-color: #7c3aed;
color: #ffffff !important;
text-decoration: none;
padding: 14px 35px;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 12px;
box-shadow: 0 0 25px rgba(124, 58, 237, 0.4);
transition: all 0.3s ease;
}
.warning-box {
background-color: rgba(239, 68, 68, 0.05);
border: 1px solid rgba(239, 68, 68, 0.15);
border-radius: 14px;
padding: 20px;
margin-top: 25px;
}
.warning-box p {
color: #ef4444;
font-size: 13px;
margin: 0;
}
.footer {
padding: 30px;
text-align: center;
background-color: #0d0f17;
border-top: 1px solid rgba(124, 58, 237, 0.05);
}
.footer p {
font-size: 11px;
color: #4b5563;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">T<span>PHIM</span>X</div>
</div>
<div class="content">
<h1>Yêu cầu khôi phục mật khẩu</h1>
<p>Xin chào <span class="highlight">{{username}}</span>,</p>
<p>Chúng tôi đã nhận được yêu cầu khôi phục lại mật khẩu cho tài khoản của bạn tại <span class="highlight">TPHIMX</span>. Vui lòng nhấp vào liên kết bên dưới để đặt lại mật khẩu mới cho tài khoản:</p>
<div class="button-container">
<a href="{{reset_url}}" class="btn" target="_blank">Đặt lại mật khẩu</a>
</div>
<p>Nếu nút phía trên không hoạt động, bạn cũng có thể sao chép liên kết này và dán vào thanh địa chỉ của trình duyệt:</p>
<p style="word-break: break-all; font-size: 13px; color: #6b7280;">{{reset_url}}</p>
<div class="warning-box">
<p><strong>Lưu ý:</strong> Liên kết đặt lại mật khẩu này chỉ có giá trị trong vòng <span style="font-weight: 800;">{{expiry_time}}</span> giây. Nếu bạn không gửi yêu cầu khôi phục này, vui lòng bỏ qua email và mật khẩu của bạn sẽ được giữ an toàn.</p>
</div>
</div>
<div class="footer">
<p>&copy; 2026 TPHIMX - All Rights Reserved</p>
</div>
</div>
</body>
</html>