remixed v0
This commit is contained in:
16
app/mailers/renderer/html/components/footer.html
Normal file
16
app/mailers/renderer/html/components/footer.html
Normal file
@ -0,0 +1,16 @@
|
||||
<tr>
|
||||
<td>
|
||||
<table align="center" class="email-footer w-570 mx-auto text-center sm:w-full">
|
||||
<tr>
|
||||
<td align="center" class="content-cell p-45 text-base">
|
||||
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
|
||||
© {{ page.year }} {{ page.company.product }}. All rights reserved.
|
||||
</p>
|
||||
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
|
||||
{{ page.company.name }} {{{ page.company.address }}}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
15
app/mailers/renderer/html/components/header.html
Normal file
15
app/mailers/renderer/html/components/header.html
Normal file
@ -0,0 +1,15 @@
|
||||
<tr>
|
||||
<td align="center" class="email-masthead">
|
||||
<a
|
||||
href="https://remixtape.dev"
|
||||
class="email-masthead_name text-base font-bold no-underline text-gray-postmark-light"
|
||||
style="text-shadow: 0 1px 0 #ffffff"
|
||||
>
|
||||
<img
|
||||
width="128px"
|
||||
src="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📼</text></svg>"
|
||||
alt="Your logo"
|
||||
/>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
32
app/mailers/renderer/html/custom/postmark/buttons.css
Normal file
32
app/mailers/renderer/html/custom/postmark/buttons.css
Normal file
@ -0,0 +1,32 @@
|
||||
.button {
|
||||
@apply inline-block text-white no-underline;
|
||||
background-color: #3869d4;
|
||||
border-top: 10px solid #3869d4;
|
||||
border-right: 18px solid #3869d4;
|
||||
border-bottom: 10px solid #3869d4;
|
||||
border-left: 18px solid #3869d4;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.button--green {
|
||||
background-color: #22bc66;
|
||||
border-top: 10px solid #22bc66;
|
||||
border-right: 18px solid #22bc66;
|
||||
border-bottom: 10px solid #22bc66;
|
||||
border-left: 18px solid #22bc66;
|
||||
}
|
||||
|
||||
.button--red {
|
||||
background-color: #ff6136;
|
||||
border-top: 10px solid #ff6136;
|
||||
border-right: 18px solid #ff6136;
|
||||
border-bottom: 10px solid #ff6136;
|
||||
border-left: 18px solid #ff6136;
|
||||
}
|
||||
|
||||
@screen sm {
|
||||
.button {
|
||||
@apply w-full text-center !important;
|
||||
}
|
||||
}
|
65
app/mailers/renderer/html/custom/postmark/index.css
Normal file
65
app/mailers/renderer/html/custom/postmark/index.css
Normal file
@ -0,0 +1,65 @@
|
||||
@import "buttons";
|
||||
|
||||
.purchase_heading {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #eaeaec;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.purchase_heading p {
|
||||
@apply text-xxs leading-24 m-0;
|
||||
color: #85878e;
|
||||
}
|
||||
|
||||
.purchase_footer {
|
||||
@apply pt-16 text-base align-middle;
|
||||
border-top-width: 1px;
|
||||
border-top-color: #eaeaec;
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
.body-sub {
|
||||
@apply mt-25 pt-25 border-t;
|
||||
border-top-color: #eaeaec;
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
||||
.discount {
|
||||
@apply w-full p-24 bg-gray-postmark-lightest;
|
||||
border: 2px dashed #cbcccf;
|
||||
}
|
||||
|
||||
.email-masthead {
|
||||
@apply py-24 text-base text-center;
|
||||
}
|
||||
|
||||
@screen dark {
|
||||
body,
|
||||
.email-body,
|
||||
.email-body_inner,
|
||||
.email-content,
|
||||
.email-wrapper,
|
||||
.email-masthead,
|
||||
.email-footer {
|
||||
@apply bg-gray-postmark-darker text-white !important;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
blockquote,
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
@apply text-white !important;
|
||||
}
|
||||
|
||||
.attributes_content,
|
||||
.discount {
|
||||
@apply bg-gray-postmark-darkest !important;
|
||||
}
|
||||
|
||||
.email-masthead_name {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
}
|
10
app/mailers/renderer/html/custom/reset.css
Normal file
10
app/mailers/renderer/html/custom/reset.css
Normal file
@ -0,0 +1,10 @@
|
||||
body {
|
||||
@apply m-0 p-0 w-full;
|
||||
word-break: break-word;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
@apply max-w-full leading-full align-middle;
|
||||
}
|
3
app/mailers/renderer/html/custom/utilities.css
Normal file
3
app/mailers/renderer/html/custom/utilities.css
Normal file
@ -0,0 +1,3 @@
|
||||
.mso-leading-exactly {
|
||||
mso-line-height-rule: exactly;
|
||||
}
|
75
app/mailers/renderer/html/layouts/main.html
Normal file
75
app/mailers/renderer/html/layouts/main.html
Normal file
@ -0,0 +1,75 @@
|
||||
<!DOCTYPE {{{ page.doctype || 'html' }}}>
|
||||
<html lang="{{ page.language || 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml">
|
||||
<head>
|
||||
<meta charset="{{ page.charset || 'utf-8' }}" />
|
||||
<meta name="x-apple-disable-message-reformatting" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no" />
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<style>
|
||||
td,
|
||||
th,
|
||||
div,
|
||||
p,
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
mso-line-height-rule: exactly;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<if condition="page.title">
|
||||
<title>{{{ page.title }}}</title>
|
||||
</if>
|
||||
<if condition="page.googleFonts">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?{{{ page.googleFonts }}}&display=swap"
|
||||
rel="stylesheet"
|
||||
media="screen"
|
||||
/>
|
||||
</if>
|
||||
<if condition="page.css">
|
||||
<style>
|
||||
{{{ page.css }}}
|
||||
</style>
|
||||
</if>
|
||||
<block name="head"></block>
|
||||
</head>
|
||||
<body class="{{ page.bodyClass }}">
|
||||
<if condition="page.preheader">
|
||||
<div class="hidden">
|
||||
{{{ page.preheader }}}͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
‌  ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
|
||||
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ‌
|
||||
 ͏ ͏ ͏ ͏ ͏
|
||||
</div>
|
||||
</if>
|
||||
<div
|
||||
role="article"
|
||||
aria-roledescription="email"
|
||||
aria-label="{{{ page.title || '' }}}"
|
||||
lang="{{ page.language || 'en' }}"
|
||||
>
|
||||
<block name="template"></block>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
93
app/mailers/renderer/html/templates/forgot-password.html
Normal file
93
app/mailers/renderer/html/templates/forgot-password.html
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
bodyClass: bg-gray-postmark-lighter
|
||||
---
|
||||
|
||||
<extends src="app/mailers/renderer/html/layouts/main.html">
|
||||
<block name="template">
|
||||
<table class="email-wrapper w-full bg-gray-postmark-lighter font-sans">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table class="email-content w-full">
|
||||
<component src="app/mailers/renderer/html/components/header.html"></component>
|
||||
<tr>
|
||||
<td class="email-body w-full">
|
||||
<table align="center" class="email-body_inner w-570 bg-white mx-auto sm:w-full">
|
||||
<tr>
|
||||
<td class="px-45 py-24">
|
||||
<div class="text-base">
|
||||
<h1 class="mt-0 text-2xl font-bold text-left text-gray-postmark-darker">
|
||||
Hi {{ name }},
|
||||
</h1>
|
||||
<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
|
||||
You recently requested to reset your password for your
|
||||
{{ page.company.product }} account. Use the button below to reset it.
|
||||
<strong
|
||||
>This password reset is only valid for the next 24
|
||||
hours.</strong
|
||||
>
|
||||
</p>
|
||||
<table align="center" class="w-full text-center my-30 mx-auto">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table class="w-full">
|
||||
<tr>
|
||||
<td align="center" class="text-base">
|
||||
<a
|
||||
href="{{ action_url }}"
|
||||
class="button button--green"
|
||||
target="_blank"
|
||||
>
|
||||
Reset your password
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
|
||||
If you did not request a password reset, you can safely ignore this
|
||||
email.
|
||||
</p>
|
||||
<table class="body-sub">
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
class="
|
||||
mt-6
|
||||
mb-20
|
||||
text-xs
|
||||
leading-24
|
||||
text-gray-postmark-dark
|
||||
"
|
||||
>
|
||||
If you're having trouble with the button above, copy and
|
||||
paste the URL below into your web browser.
|
||||
</p>
|
||||
<p
|
||||
class="
|
||||
mt-6
|
||||
mb-20
|
||||
text-xs
|
||||
leading-24
|
||||
text-gray-postmark-dark
|
||||
"
|
||||
>
|
||||
{{ action_url }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<!--<component src="app/mailers/renderer/html/components/footer.html"></component>-->
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</block>
|
||||
</extends>
|
18
app/mailers/renderer/html/templates/tailwind.css
Normal file
18
app/mailers/renderer/html/templates/tailwind.css
Normal file
@ -0,0 +1,18 @@
|
||||
/* Your custom CSS resets for email */
|
||||
@import "app/mailers/renderer/html/custom/reset";
|
||||
|
||||
/* Tailwind components that are generated by plugins */
|
||||
@import "tailwindcss/components";
|
||||
|
||||
/**
|
||||
* @import here any custom components - classes that you'd want loaded
|
||||
* before the Tailwind utilities, so that the utilities could still
|
||||
* override them.
|
||||
*/
|
||||
@import "app/mailers/renderer/html/custom/postmark";
|
||||
|
||||
/* Tailwind utility classes */
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
/* Your custom utility classes */
|
||||
@import "app/mailers/renderer/html/custom/utilities";
|
81
app/mailers/renderer/html/templates/team-invitation.html
Normal file
81
app/mailers/renderer/html/templates/team-invitation.html
Normal file
@ -0,0 +1,81 @@
|
||||
---
|
||||
bodyClass: bg-gray-postmark-lighter
|
||||
---
|
||||
|
||||
<extends src="app/mailers/renderer/html/layouts/main.html">
|
||||
<block name="template">
|
||||
<table class="email-wrapper w-full bg-gray-postmark-lighter font-sans">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table class="email-content w-full">
|
||||
<component src="app/mailers/renderer/html/components/header.html"></component>
|
||||
<tr>
|
||||
<td class="email-body w-full">
|
||||
<table align="center" class="email-body_inner w-570 bg-white mx-auto sm:w-full">
|
||||
<tr>
|
||||
<td class="px-45 py-24">
|
||||
<div class="text-base">
|
||||
<h1 class="mt-0 text-2xl font-bold text-left text-gray-postmark-darker">
|
||||
Hi 👋,
|
||||
</h1>
|
||||
<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
|
||||
{{ invitation_sender_name }} from {{ invitation_sender_organization_name }}
|
||||
has invited you to join their organization.
|
||||
Use the button below to set up your account and get started.
|
||||
<strong>
|
||||
This invitation is only valid for the next 7 days.
|
||||
</strong>
|
||||
</p>
|
||||
<table align="center" class="w-full text-center my-30 mx-auto">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table class="w-full">
|
||||
<tr>
|
||||
<td align="center" class="text-base">
|
||||
<a
|
||||
href="{{ action_url }}"
|
||||
class="button button--green"
|
||||
target="_blank"
|
||||
>
|
||||
Set up account
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
|
||||
Welcome aboard,
|
||||
<br />The {{ page.company.product }} Team
|
||||
</p>
|
||||
<table class="body-sub">
|
||||
<tr>
|
||||
<td>
|
||||
<p
|
||||
class="mt-6 mb-20 text-xs leading-24 text-gray-postmark-dark"
|
||||
>
|
||||
If you're having trouble with the button above, copy and
|
||||
paste the URL below into your web browser.
|
||||
</p>
|
||||
<p
|
||||
class="mt-6 mb-20 text-xs leading-24 text-gray-postmark-dark"
|
||||
>
|
||||
{{ action_url }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<!--<component src="app/mailers/renderer/html/components/footer.html"></component>-->
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</block>
|
||||
</extends>
|
Reference in New Issue
Block a user