Initial commit
This commit is contained in:
Ronald Huynen
143
resources/views/emails/layouts/html.blade.php
Normal file
143
resources/views/emails/layouts/html.blade.php
Normal file
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{ $locale ?? config('app.locale') }}" lang="{{ $locale ?? config('app.locale') }}">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta name="x-apple-disable-message-reformatting" />
|
||||
<title>{{ $subject ?? config('app.name') }}</title>
|
||||
<!--[if mso]>
|
||||
<style type="text/css">
|
||||
body, table, td, p, a, li {
|
||||
font-family: Arial, sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<style type="text/css">
|
||||
/* Progressive Enhancement for Mobile */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.email-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
.email-content {
|
||||
padding: 20px 15px !important;
|
||||
}
|
||||
.mobile-padding {
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
}
|
||||
.mobile-button {
|
||||
width: 100% !important;
|
||||
max-width: 280px !important;
|
||||
min-width: 200px !important;
|
||||
}
|
||||
.mobile-button a {
|
||||
width: 100% !important;
|
||||
max-width: 280px !important;
|
||||
min-width: 200px !important;
|
||||
display: block !important;
|
||||
}
|
||||
.mobile-text {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.mobile-text-small {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.mobile-title {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
/* Reduce padding for outer wrapper */
|
||||
.outer-padding {
|
||||
padding: 20px 10px 0 10px !important;
|
||||
}
|
||||
/* Make tables responsive */
|
||||
table[role="presentation"] {
|
||||
width: 100% !important;
|
||||
}
|
||||
/* Adjust logo padding */
|
||||
.logo-cell {
|
||||
padding: 0 0 10px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small screens (300px) */
|
||||
@media only screen and (max-width: 360px) {
|
||||
.email-content {
|
||||
padding: 15px 10px !important;
|
||||
}
|
||||
.mobile-padding {
|
||||
padding-left: 5px !important;
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
.mobile-button {
|
||||
width: 60% !important;
|
||||
max-width: 180px !important;
|
||||
min-width: auto !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.mobile-button a {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: auto !important;
|
||||
padding-left: 5px !important;
|
||||
padding-right: 5px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.outer-padding {
|
||||
padding: 10px 5px 0 5px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--[if !mso]><!-->
|
||||
<style type="text/css">
|
||||
/* Client-specific Styles - These won't be inlined */
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
</style>
|
||||
<!--<![endif]-->
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; width: 100%; background-color: #f4f4f4; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif;">
|
||||
<table role="presentation" class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
||||
<tr>
|
||||
<td align="center" class="outer-padding" style="padding: 40px 20px 0 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
||||
<!-- Header -->
|
||||
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
||||
<tr>
|
||||
<td align="center" class="logo-cell" style="padding: 0 0 15px 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
||||
<img src="{{ asset('storage/app-images/app_mail_logo.png') }}" alt="{{ config('app.name') }}" width="120" style="width: 120px; max-width: 120px; height: auto; display: block; margin: 0 auto; border: 0; -ms-interpolation-mode: bicubic;" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Content Container -->
|
||||
<table role="presentation" class="email-container" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; background-color: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
||||
<tr>
|
||||
<td class="email-content" style="padding: 40px 30px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
||||
{{ $slot }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="background-color: #f9fafb; padding: 20px; text-align: center; border-top: 1px solid #e5e7eb; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
||||
<p style="margin: 5px 0; padding: 0; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5; text-align: center;">
|
||||
{{ __('Need help, or having issues?') }} <a href="mailto:{{ timebank_config('mail.support.email') }}" style="color: #6b7280; border-bottom: 1px solid #6b7280; text-decoration: none;">{{ __('Email our team') }}</a>
|
||||
</p>
|
||||
<p style="margin: 5px 0; padding: 0; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5; text-align: center;">
|
||||
<a href="{{ config('app.url') }}" style="color: #6b7280; border-bottom: 1px solid #6b7280; text-decoration: none;">
|
||||
{{ __('Visit our website') }}
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin: 15px 0 5px 0; padding: 0; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5; text-align: center;">
|
||||
© {{ date('Y') }} {{ config('app.name') }}. {{ __('All rights reserved.') }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user