273 lines
5.7 KiB
PHP
273 lines
5.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kode Unik Anda</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
/* background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); */
|
|
padding: 40px 20px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #1e3ce6 0%, #b0b8ff 100%);
|
|
padding: 40px 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
color: #ffffff;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header p {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.content {
|
|
padding: 50px 40px;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 24px;
|
|
color: #2d3748;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.message {
|
|
color: #4a5568;
|
|
font-size: 16px;
|
|
margin-bottom: 30px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.button-container {
|
|
text-align: center;
|
|
margin: 40px 0;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.reset-button {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
|
|
color: #ffffff !important;
|
|
padding: 16px 48px;
|
|
text-decoration: none;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
box-shadow: 0 10px 25px rgba(132, 204, 22, 0.4);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.reset-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 15px 35px rgba(132, 204, 22, 0.5);
|
|
}
|
|
|
|
.info-box {
|
|
background: #f7fee7;
|
|
border-left: 4px solid #7065ff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.info-box .code {
|
|
background: #f7fee7;
|
|
border-left: 4px solid #7065ff;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.info-box p {
|
|
color: #4a5568;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
|
|
.info-box strong {
|
|
color: #2d3748;
|
|
}
|
|
|
|
.warning {
|
|
background: #fff5f5;
|
|
border-left: 4px solid #f56565;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.warning p {
|
|
color: #742a2a;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
|
|
.alternative-link {
|
|
background: #edf2f7;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.alternative-link p {
|
|
color: #4a5568;
|
|
font-size: 13px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.alternative-link a {
|
|
color: #84cc16;
|
|
word-break: break-all;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.footer {
|
|
background: #2d3748;
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer p {
|
|
color: #a0aec0;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.footer .company-name {
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.social-links {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.social-links a {
|
|
display: inline-block;
|
|
margin: 0 10px;
|
|
color: #a0aec0;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
body {
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.content {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.header {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.greeting {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.reset-button {
|
|
padding: 14px 36px;
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="email-container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="logo">
|
|
|
|
</div>
|
|
<h1>Smart Anxiety</h1>
|
|
<p>Sistem Pendeteksi Kecemasan</p>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="content">
|
|
<h2 class="greeting">Halo! 👋</h2>
|
|
|
|
<p class="message">
|
|
🔑 Berikut adalah kode unik Anda untuk verifikasi booking:
|
|
</p>
|
|
|
|
<div class="info-box code">
|
|
<h1 style="text-align: center">{{ $code }}</h1>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<p><strong>⏰ Penting:</strong> Kode unik ini akan berlaku pada tanggal <strong>{{ $tglExpired }}</strong>, dari jam <strong>{{ $startExpirationTime }}</strong> sampai <strong>{{ $endExpirationTime }}</strong></p>
|
|
</div>
|
|
|
|
{{-- <div class="warning">
|
|
<p><strong>⚠️ Tidak meminta reset password?</strong> Abaikan email ini dan tidak ada perubahan yang akan
|
|
dilakukan pada akun Anda.</p>
|
|
</div> --}}
|
|
|
|
{{-- <div class="alternative-link">
|
|
<p><strong>Mengalami masalah dengan tombol di atas?</strong></p>
|
|
<p>Salin dan tempel URL berikut ke browser Anda:</p>
|
|
<a href="{{ $url }}">{{ $url }}</a>
|
|
</div> --}}
|
|
|
|
<p class="message" style="margin-top: 40px; font-size: 14px; color: #718096;">
|
|
Salam hangat,<br>
|
|
<strong>Tim Smart Anxiety</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<p class="company-name">Smart Anxiety</p>
|
|
<p>Email ini dikirim secara otomatis, mohon tidak membalas email ini.</p>
|
|
<p style="margin-top: 20px; font-size: 12px;">
|
|
© {{ date('Y') }} Smart Anxiety. All rights reserved.
|
|
</p>
|
|
<div class="social-links">
|
|
<a href="#">Bantuan</a> •
|
|
<a href="#">Kebijakan Privasi</a> •
|
|
<a href="#">Syarat & Ketentuan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |