From a9ccfa1ab04186a98174953fe9ed1377229f68e0 Mon Sep 17 00:00:00 2001
From: Khushboo Verma <43381712+vermakhushboo@users.noreply.github.com>
Date: Fri, 12 Jan 2024 14:43:17 +0530
Subject: [PATCH] Added cloud base templates to appwrite/appwrite

---
 .../locale/templates/email-base-branded.tpl   |  98 ++++++++
 .../locale/templates/email-base-cloud.tpl     | 234 ++++++++++++++++++
 2 files changed, 332 insertions(+)
 create mode 100644 app/config/locale/templates/email-base-branded.tpl
 create mode 100644 app/config/locale/templates/email-base-cloud.tpl
diff --git a/app/config/locale/templates/email-base-branded.tpl b/app/config/locale/templates/email-base-branded.tpl
new file mode 100644
index 0000000000..61be4472a7
--- /dev/null
+++ b/app/config/locale/templates/email-base-branded.tpl
@@ -0,0 +1,98 @@
+<!doctype html>
+<html>
+    <head>
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600&display=swap"
+            rel="stylesheet"
+        />
+        <style>
+            .main {
+                padding: 32px;
+                color: #616b7c;
+                font-size: 15px;
+                font-family: "Inter", sans-serif;
+            }
+
+            table {
+                width: 100%;
+                border-spacing: 0 !important;
+            }
+
+            table,
+            tr,
+            th,
+            td {
+                margin: 0;
+                padding: 0;
+            }
+
+            td {
+                vertical-align: top;
+            }
+
+            .main a {
+                color: currentColor;
+            }
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+                font-family: "Poppins", sans-serif;
+            }
+
+            hr {
+                border: none;
+                border-top: 1px solid #e8e9f0;
+            }
+
+            p {
+                margin-bottom: 10px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div
+            class="main"
+            style="
+                direction: {{direction}};
+                max-width: 650px;
+                word-wrap: break-word;
+                overflow-wrap: break-word;
+                word-break: break-all;
+                margin: 0 auto;
+            "
+        >
+            <table style="margin-top: 32px">
+                <tr>
+                    <td>{{body}}</td>
+                </tr>
+            </table>
+
+            <div
+                style="
+                    border-top: solid 1px #ededf0;
+                    width: 100%;
+                    color: #818186;
+                "
+            >
+                <table style="padding-top: 24px; margin: 0 auto; width: auto">
+                    <tr>
+                        <td style="display: flex">
+                            <a target="_blank" href="https://appwrite.io?utm_source=email&utm_medium=footer&utm_campaign=user_emails">
+                                <img
+                                    src="https://appwrite.io/email/footer.png"
+                                    width="378"
+                                    height="27"
+                                />
+                            </a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/app/config/locale/templates/email-base-cloud.tpl b/app/config/locale/templates/email-base-cloud.tpl
new file mode 100644
index 0000000000..be877e3577
--- /dev/null
+++ b/app/config/locale/templates/email-base-cloud.tpl
@@ -0,0 +1,234 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+    <head>
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Sans:wght@500;600&display=swap"
+            rel="stylesheet"
+        />
+        <style>
+            .main a {
+                color: currentColor;
+            }
+            .main {
+                padding: 32px;
+                line-height: 1.5;
+                color: #616b7c;
+                font-size: 15px;
+                font-weight: 400;
+                font-family: "Inter", sans-serif;
+            }
+            table {
+                width: 100%;
+                border-spacing: 0;
+            }
+            table,
+            tr,
+            th,
+            td {
+                margin: 0;
+                padding: 0;
+            }
+            td {
+                vertical-align: top;
+            }
+            h1 {
+                font-size: 22px;
+                margin-bottom: 0px;
+                margin-top: 0px;
+                color: #373b4d;
+            }
+            h2 {
+                font-size: 20px;
+                font-weight: 600;
+                color: #373b4d;
+            }
+            h3,
+            td h3 {
+                font-size: 14px;
+                font-weight: 500;
+                color: #373b4d;
+                line-height: 21px;
+                margin: 0;
+                padding: 0;
+            }
+            h4 {
+                font-family: "DM Sans", sans-serif;
+                font-weight: 600;
+                font-size: 12px;
+                color: #4f5769;
+                margin: 0;
+                padding: 0;
+            }
+            hr {
+                border: none;
+                border-top: 1px solid #e8e9f0;
+            }
+            .main a.button {
+                display: inline-block;
+                background: #fd366e;
+                color: #ffffff;
+                border-radius: 8px;
+                height: 48px;
+                padding: 12px 20px;
+                box-sizing: border-box;
+                cursor: pointer;
+                text-align: center;
+                text-decoration: none;
+                border-color: #fd366e;
+                border-style: solid;
+                border-width: 1px;
+                margin-right: 24px;
+                margin-top: 8px;
+            }
+            .main a.button:hover,
+            .main a.button:focus {
+                opacity: 0.8;
+            }
+            .main a.button.is-reverse {
+                background: #fff;
+                color: #fd366e;
+            }
+            .fs12 {
+                font-size: 12px;
+            }
+            .ta-right {
+                text-align: right !important;
+            }
+            .ta-left {
+                text-align: left !important;
+            }
+            .ff-dmsans {
+                font-family: "DM Sans", sans-serif !important;
+            }
+            .ff-inter {
+                font-family: "Inter", sans-serif !important;
+            }
+            .w500 {
+                font-weight: 500 !important;
+            }
+            .w400 {
+                font-weight: 400 !important;
+            }
+            .w600 {
+                font-weight: 600 !important;
+            }
+            .tc-accent {
+                color: #da1a5b;
+            }
+            .pt-16 {
+                padding-top: 16px !important;
+            }
+            .pt-32 {
+                padding-top: 32px !important;
+            }
+            .divider {
+                padding-top: 32px;
+                border-bottom: solid 1px #d8d8db;
+            }
+            .social-icon {
+                border-radius: 6px;
+                background: rgba(216, 216, 219, 0.1);
+                width: 32px;
+                height: 32px;
+                line-height: 32px;
+                display: flex; 
+                align-items: center; 
+                justify-content: center;
+            }
+
+            .social-icon > img {
+                margin: auto;
+            }
+
+            @media only screen and (max-width: 600px) {
+                .button {
+                    width: 100%;
+                }
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class="main" style="max-width: 650px; margin: 0 auto">
+            <table>
+                <tr>
+                    <td>
+                        <img
+                            height="32px"
+                            src="https://appwrite.io/assets/logotype/white.png"
+                        />
+                    </td>
+                </tr>
+            </table>
+
+            <table style="margin-top: 32px">
+                <tr>
+                    <td>
+                        <h1>{{subject}}</h1>
+                    </td>
+                </tr>
+            </table>
+
+            <table style="margin-top: 40px">
+                <tr>
+                    <td>{{message}}</td>
+                </tr>
+            </table>
+
+            <table
+                style="
+                    padding-top: 32px;
+                    margin-top: 32px;
+                    border-top: solid 1px #e8e9f0;
+                "
+            >
+                <tr>
+                    <td></td>
+                </tr>
+            </table>
+
+            <table style="width: auto; margin: 0 auto">
+                <tr>
+                    <td style="padding-left: 4px; padding-right: 4px">
+                        <a
+                            href="https://twitter.com/appwrite"
+                            class="social-icon"
+                            title="Twitter"
+                        >
+                            <img src="https://appwrite.io/email/x.png" height="24" width="24" />
+                        </a>
+                    </td>
+                    <td style="padding-left: 4px; padding-right: 4px">
+                        <a
+                            href="https://appwrite.io/discord"
+                            class="social-icon"
+                        >
+                            <img src="https://appwrite.io/email/discord.png" height="24" width="24" />
+                        </a>
+                    </td>
+                    <td style="padding-left: 4px; padding-right: 4px">
+                        <a
+                            href="https://github.com/appwrite/appwrite"
+                            class="social-icon"
+                        >
+                            <img src="https://appwrite.io/email/github.png" height="24" width="24" />
+                        </a>
+                    </td>
+                </tr>
+            </table>
+            <table style="width: auto; margin: 0 auto; margin-top: 60px">
+                <tr>
+                    <td><a href="https://appwrite.io/terms">Terms</a></td>
+                    <td style="color: #e8e9f0">
+                        <div style="margin: 0 8px">|</div>
+                    </td>
+                    <td><a href="https://appwrite.io/privacy">Privacy</a></td>
+                </tr>
+            </table>
+            <p style="text-align: center" align="center">
+                &copy; 2023 Appwrite | 251 Little Falls Drive, Wilmington 19808,
+                Delaware, United States
+            </p>
+        </div>
+    </body>
+</html>
\ No newline at end of file
