Files
freno-dev/src/server/email-templates/new-device-login.html
2026-01-21 12:22:19 -05:00

131 lines
3.4 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Device Login</title>
</head>
<body
style="
font-family:
-apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto,
&quot;Helvetica Neue&quot;, Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 600px;
margin: 0 auto;
padding: 20px;
"
>
<div
style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px;
border-radius: 10px 10px 0 0;
text-align: center;
"
>
<h1 style="color: white; margin: 0; font-size: 24px">
New Device Login Detected
</h1>
</div>
<div
style="
background: #ffffff;
padding: 30px;
border: 1px solid #e0e0e0;
border-top: none;
border-radius: 0 0 10px 10px;
"
>
<p style="font-size: 16px; margin-top: 0">Hello,</p>
<p style="font-size: 16px">
We detected a new login to your account from a device we haven't seen
before:
</p>
<div
style="
background: #f8f9fa;
border-left: 4px solid #667eea;
padding: 15px;
margin: 20px 0;
"
>
<p style="margin: 0; font-size: 16px">
<strong>Device:</strong> {{DEVICE_INFO}}
</p>
<p style="margin: 10px 0 0 0; font-size: 14px; color: #666">
<strong>Time:</strong> {{LOGIN_TIME}}
</p>
<p style="margin: 10px 0 0 0; font-size: 14px; color: #666">
<strong>Location:</strong> {{IP_ADDRESS}}
</p>
<p style="margin: 10px 0 0 0; font-size: 14px; color: #666">
<strong>Method:</strong> {{LOGIN_METHOD}}
</p>
</div>
<p style="font-size: 16px">
If this was you, you can safely ignore this email.
</p>
<div
style="
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 5px;
padding: 15px;
margin: 20px 0;
"
>
<p style="margin: 0; font-size: 14px; color: #856404">
<strong>⚠️ Wasn't you?</strong><br />
If you didn't log in from this device, your account may be
compromised. Please sign in immediately and:
</p>
<ul
style="
margin: 10px 0 0 0;
padding-left: 20px;
font-size: 14px;
color: #856404;
"
>
<li>Change your password</li>
<li>Review linked authentication providers</li>
</ul>
</div>
<div style="text-align: center; margin: 30px 0">
<a
href="{{ACCOUNT_URL}}"
style="
display: inline-block;
background: #667eea;
color: white;
padding: 12px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
"
>
Review Account Security
</a>
</div>
<p style="font-size: 14px; color: #666; margin-bottom: 0">Best regards</p>
</div>
<div
style="text-align: center; padding: 20px; font-size: 12px; color: #999"
>
<p style="margin: 0">
This is an automated security notification from freno.me
</p>
</div>
</body>
</html>