Skip to content

Commit 2f4e8cb

Browse files
author
gauthier witkowski
committed
Refactor for improved styling
1 parent a941789 commit 2f4e8cb

File tree

1 file changed

+95
-53
lines changed

1 file changed

+95
-53
lines changed

‎email_template.php‎

Lines changed: 95 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,94 +2,136 @@
22
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
33

44
<head>
5-
<meta charset="UTF-8" />
6-
<title>[GITHUB] <?= $subject; ?></title>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="x-apple-disable-message-reformatting" />
9-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
9+
<title>[GitHub] <?= $subject; ?></title>
10+
<!--[if mso]><style type="text/css">body, table, td {font-family: Arial, Helvetica, sans-serif !important;} a {text-decoration:none;}</style><![endif]-->
11+
<style>
12+
@media (prefers-color-scheme: dark) {
13+
.bg-body {
14+
background: #111827 !important;
15+
}
16+
17+
.bg-card {
18+
background: #1f2937 !important;
19+
border-color: #374151 !important;
20+
}
21+
22+
.text-main {
23+
color: #f1f5f9 !important;
24+
}
25+
26+
.text-dim {
27+
color: #94a3b8 !important;
28+
}
29+
30+
.badge {
31+
background: #3b82f6 !important;
32+
color: #fff !important;
33+
}
34+
}
35+
36+
/* Mobile spacing refinement */
37+
@media only screen and (max-width:600px) {
38+
.p-sm {
39+
padding: 20px !important;
40+
}
41+
42+
.h1 {
43+
font-size: 20px !important;
44+
line-height: 24px !important;
45+
}
46+
}
47+
</style>
1048
</head>
1149

1250
<body style="margin:0; padding:0; background:#f0f2f5; font-family:Arial, Helvetica, sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
13-
<!-- Preheader -->
14-
<span style="display:none; font-size:1px; color:#ffffff; line-height:1px; max-height:0; max-width:0; opacity:0; overflow:hidden; mso-hide:all;">
15-
You've received a new message from the contact form. &#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;&#8203;
16-
</span>
51+
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">New contact form message received. &#8203;&#8203;&#8203;&#8203;&#8203;&#8203;</div>
1752

1853
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f0f2f5;">
1954
<tr>
20-
<td align="center" style="padding:24px 12px;">
55+
<td align="center" style="padding:28px 12px;">
2156

22-
<!--[if mso]>
23-
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td>
24-
<![endif]-->
25-
26-
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="max-width:600px; width:100%; background:#ffffff; border:1px solid #e6e9ef;">
57+
<!--[if mso]><table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
58+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px; background:#ffffff; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden;" class="bg-card">
2759
<tr>
28-
<td bgcolor="#2563eb" align="left" style="padding:24px; color:#ffffff; font-size:20px; line-height:24px; font-weight:bold;">
29-
[GITHUB] <?= $subject; ?>
60+
<td align="left" style="background:#2563eb; padding:24px; font-size:20px; line-height:24px; font-weight:700; color:#ffffff; font-family:Arial,Helvetica,sans-serif;" class="h1">
61+
<span class="badge" style="display:inline-block; background:#1d4ed8; color:#fff; padding:4px 10px; font-size:11px; line-height:1; letter-spacing:.5px; border-radius:3px; text-transform:uppercase;">Message</span><br style="line-height:20px;" />
62+
<?= htmlspecialchars($subject, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); ?>
3063
</td>
3164
</tr>
32-
3365
<tr>
34-
<td align="left" style="padding:24px; color:#1f2937; font-size:15px; line-height:1.6;">
35-
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
36-
<tr>
37-
<td style="padding:0 0 16px 0;">
38-
<div style="font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin:0 0 4px 0;">Date</div>
39-
<div style="font-size:15px; color:#111827;"><?= $date; ?></div>
40-
</td>
41-
</tr>
42-
<tr>
43-
<td style="padding:0 0 16px 0;">
44-
<div style="font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin:0 0 4px 0;">Name</div>
45-
<div style="font-size:15px; color:#111827;"><?= $name; ?></div>
46-
</td>
47-
</tr>
48-
<tr>
49-
<td style="padding:0 0 16px 0;">
50-
<div style="font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin:0 0 4px 0;">Email</div>
51-
<a href="mailto:<?= $email; ?>" style="font-size:15px; color:#2563eb; text-decoration:none; word-break:break-all;"><?= $email; ?></a>
52-
</td>
53-
</tr>
54-
<tr>
55-
<td style="padding:0;">
56-
<div style="font-size:12px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin:0 0 8px 0;">Message</div>
57-
<div style="margin:0; font-size:15px; line-height:1.7; color:#111827;">
58-
<?= $message; ?>
59-
</div>
60-
</td>
61-
</tr>
66+
<td style="padding:28px 28px 8px 28px; font-size:15px; line-height:1.55; color:#1f2937; font-family:Arial,Helvetica,sans-serif;" class="p-sm text-main">
67+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
68+
<tbody>
69+
<tr>
70+
<td style="padding:0 0 18px 0; vertical-align:top;">
71+
<div style="font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin:0 0 4px 0;">Date</div>
72+
<div style="font-size:15px; color:#111827; font-weight:500;"><?= $date; ?></div>
73+
</td>
74+
</tr>
75+
<tr>
76+
<td style="padding:0 0 18px 0; vertical-align:top;">
77+
<div style="font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin:0 0 4px 0;">Name</div>
78+
<div style="font-size:15px; color:#111827; font-weight:500;"><?= $name; ?></div>
79+
</td>
80+
</tr>
81+
<tr>
82+
<td style="padding:0 0 18px 0; vertical-align:top; word-break:break-all;">
83+
<div style="font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin:0 0 4px 0;">Email</div>
84+
<a href="mailto:<?= $email; ?>" style="font-size:15px; color:#2563eb; text-decoration:none;"><?= $email; ?></a>
85+
</td>
86+
</tr>
87+
<tr>
88+
<td style="padding:0; vertical-align:top;">
89+
<div style="font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin:0 0 8px 0;">Message</div>
90+
<div style="margin:0; font-size:15px; line-height:1.7; color:#111827; word-break:break-word;">
91+
<?= $message; ?>
92+
</div>
93+
</td>
94+
</tr>
95+
<tr>
96+
<td style="padding:24px 0 0 0;">
97+
<!-- Reply Button -->
98+
<?php $replySubject = rawurlencode('Re: ' . $subject); ?>
99+
<a href="mailto:<?= $email; ?>?subject=<?= $replySubject; ?>"
100+
style="display:inline-block; background:#2563eb; color:#ffffff; text-decoration:none; font-size:14px; line-height:18px; padding:12px 20px; border-radius:4px; font-weight:600; font-family:Arial,Helvetica,sans-serif;">
101+
Reply to <?= htmlspecialchars($name, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); ?>
102+
</a>
103+
</td>
104+
</tr>
105+
</tbody>
62106
</table>
63107

64-
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:24px 0;">
108+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:28px 0 16px 0;">
65109
<tr>
66110
<td style="border-top:1px solid #e5e7eb; font-size:0; line-height:0;">&nbsp;</td>
67111
</tr>
68112
</table>
69113

70114
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
71115
<tr>
72-
<td style="font-size:13px; color:#6b7280;">
73-
<strong style="color:#374151;">IP address:</strong> <?= $ip; ?>
116+
<td style="font-size:12px; color:#6b7280; line-height:1.4;">
117+
<strong style="color:#374151;">IP:</strong> <?= $ip; ?><br />
118+
<span style="color:#9ca3af;">This email was generated automatically</span>
74119
</td>
75120
</tr>
76121
</table>
77122
</td>
78123
</tr>
79-
80124
<tr>
81-
<td bgcolor="#f9fafb" align="center" style="padding:16px; font-size:12px; line-height:18px; color:#6b7280;">
82-
This is an automated message.
125+
<td align="center" style="background:#f9fafb; padding:18px; font-size:12px; line-height:18px; color:#6b7280; font-family:Arial,Helvetica,sans-serif;">
126+
© <?= date('Y'); ?> Contact Form • Raspgot
83127
</td>
84128
</tr>
85129
</table>
86-
87130
<!--[if mso]></td></tr></table><![endif]-->
88-
89-
<div style="line-height:24px; font-size:24px;">&nbsp;</div>
90131
</td>
91132
</tr>
92133
</table>
134+
<div style="line-height:28px; font-size:28px;">&nbsp;</div>
93135
</body>
94136

95137
</html>

0 commit comments

Comments
 (0)