首頁 探索 說明
註冊 登入
Opentalent
/
ap2i
2
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

improve emails templates style

Olivier Massot 4 月之前
父節點
46cca70267
當前提交
a0c95dec1a
共有 3 個文件被更改，包括 160 次插入 和 124 次删除
統一視圖 顯示文件統計
  1. 118 86
      templates/emails/base.html.twig
  2. 21 20
      templates/emails/shop/NewStructureArtistPremium/confirmation-to-representative.html.twig
  3. 21 18
      templates/emails/shop/token-validation.html.twig

+ 118 - 86
templates/emails/base.html.twig
查看文件 

@@ -1,105 +1,137 @@
 
-{% apply inky_to_html|inline_css(source('@styles/foundation-emails.css'))|inline_css %}
 
+<!doctype html>
 
+<html lang="fr">
 
+<head>
 
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
+<style type="text/css" media="all">
 
+    {% block style %}
 
+    .mail_body *{
 
+        padding: 0px;
 
+        margin: 0px;
 
+        border: 0px;
 
+        font-family: Arial;
 
+    }
 
 
 
-    <style>
 
-        {% block style %}
 
-        .container *{
 
-            font-family: Arial;
 
-        }
 
-        .white{
 
-            color: #FFFFFF !important;
 
-        }
 
-        .black{
 
-            color: #000000 !important;
 
-        }
 
-        .container{
 
-            border: 2px solid #324250;
 
-            border-radius: 5px;
 
-            margin-top: 20px;
 
-        }
 
-        .header{
 
-            background: #324250;
 
-        }
 
-        .footer{
 
-            background: #1ead8f;
 
-            padding: 10px;
 
-            color: #FFFFFF;
 
-            font-weight: bold;
 
-        }
 
-        .footer-white{
 
-            padding: 10px;
 
-            color: #000000;
 
-        }
 
-        .as{
 
-            margin-bottom: 10px;
 
-        }
 
-        .center{
 
-            text-align: center;
 
-        }
 
-        .social_link {
 
-            margin: 0 5px;
 
-            padding-right: 15px;
 
-        }
 
-        .social_link img{
 
-            max-width: 30px;
 
-            max-height: 30px;
 
-        }
 
-        {% endblock %}
 
-    </style>
 
+    .mail_body .container{
 
+        max-width: 800px;
 
+        border: 2px solid #324250;
 
+        border-radius: 5px;
 
+        margin: auto;
 
+        margin-top: 20px;
 
+    }
 
+    .mail_body .content{
 
+        padding: 20px;
 
+        font-size: 14px;
 
+    }
 
+    .mail_body .header{
 
+        background: #324250;
 
+        padding: 20px;
 
+        color: #FFF;
 
+    }
 
+    .mail_body .footer{
 
+        background: #1ead8f;
 
+        padding: 10px;
 
+        color: #FFF;
 
+        font-weight: bold;
 
+        font-size: 12px;
 
+    }
 
+    .mail_body .footer-white{
 
+        padding: 10px;
 
+        color: #000000;
 
+        font-size: 12px;
 
+    }
 
+    .mail_body .footer a{
 
+        color:#FFFFFF;
 
+    }
 
+    .mail_body .btn{
 
+        color: #fff;
 
+        background-color: #00ad8e;
 
+        padding: 8px 10px;
 
+        border-color: #ccccce;
 
+        border-radius: 5px;
 
+        font-size: 18px;
 
+        font-weight: bold;
 
+        width: 50%;
 
+        margin: auto;
 
+        margin-top: 20px;
 
+        display: block;
 
+        text-decoration:none;
 
+    }
 
+    .mail_body p{
 
+        margin-bottom: 10px;
 
+    }
 
+    .mail_body .center{
 
+        text-align: center;
 
+    }
 
+    .mail_body .as{
 
+        margin-top: 20px;
 
+        padding: 10px 20px 10px 20px;
 
+        border-top: 1px solid #0a0a0a;
 
+    }
 
+    .mail_body .small{
 
+        font-size: 12px;
 
+        font-style: italic;
 
+    }
 
+    .social_link{
 
+        padding-right: 15px;
 
+    }
 
+    h3{
 
+        margin-bottom: 10px !important;
 
+    }
 
 
 
-    <container>
 
+    ul{
 
+        margin-left:30px !important;
 
+        margin-bottom:30px !important;
 
+    }
 
+    {% endblock %}
 
+</style>
 
+</head>
 
+<body>
 
+<div class="mail_body">
 
+    <div class="container">
 
         {% block header %}
 
         {% block header %}
 
-            <row>
 
-                <columns small="12" class="header">
 
-                    <spacer size="10"></spacer>
 
-                    <p class="white">{{ organization.name ?? '' }}</p>
 
-                </columns>
 
-            </row>
 
+        <div class="header">
 
+            {{ organization.name ?? '' }}
 
+        </div>
 
         {% endblock %}
 
         {% endblock %}
 
 
 
-        <row>
 
-            <columns small="12">
 
-                <spacer size="10"></spacer>
 
-                    {% block content %}
 
-                    {% endblock %}
 
-                <spacer size="10"></spacer>
 
-            </columns>
 
-        </row>
 
+        <div class="content">
 
+            {% block content %}
 
+            {% endblock %}
 
+        </div>
 
 
 
         {% block antispam %}
 
         {% block antispam %}
 
-            <div class="as">
 
-                <p style="font-size:12px">
 
-                    Cet e-mail a été envoyé automatiquement à&nbsp;#__#ANTISPAM_PERSON_EMAIL#__# par le logiciel Opentalent utilisé par votre structure.
 
-                    <br />Merci de ne pas y répondre.
 
-                </p>
 
-            </div>
 
+        <div class="as">
 
+            <p class="small">
 
+                Cet e-mail a été envoyé automatiquement à&nbsp;#__#ANTISPAM_PERSON_EMAIL#__# par le logiciel Opentalent utilisé par votre structure.
 
+                <br>Merci de ne pas y répondre.
 
+            </p>
 
+        </div>
 
         {% endblock %}
 
         {% endblock %}
 
 
 
         <div class="footer center">
 
         <div class="footer center">
 
             {% block footer %}
 
             {% block footer %}
 
-                <a href="https://support.opentalent.fr" target="_blank">Aide du logiciel</a>   - <a href="https://www.opentalent.fr/login" target="_blank">Se connecter au logiciel</a>
 
+            <a href="https://support.opentalent.fr" target="_blank">Aide du logiciel</a>   - <a href="https://www.opentalent.fr/login" target="_blank">Se connecter au logiciel</a>
 
             {% endblock %}
 
             {% endblock %}
 
         </div>
 
         </div>
 
 
 
         <div class="footer-white center">
 
         <div class="footer-white center">
 
             {% block footer_signature %}
 
             {% block footer_signature %}
 
-                © Opentalent - {{ 'now' | date('Y') }}
 
-                : Agenda et Logiciels pour les acteurs culturels - <a href="https://www.opentalent.fr" target="_blank">opentalent.fr</a>
 
-                <br />
 
-                <br />
 
-                <h3>Suivez-nous :</h3>
 
+            © Opentalent - {{ 'now' | date('Y') }}
 
+            : Agenda et Logiciels pour les acteurs culturels - <a href="https://www.opentalent.fr" target="_blank">opentalent.fr</a>
 
+            <br><br><h3>Suivez-nous :</h3>
 
 
 
-                <a href="https://www.facebook.com/opentalent" target="_blank" class="social_link">
 
-                    <img src="{{ 'images/facebook.jpg' | img_to_base64 }}" width="30px"/>
 
-                </a>
 
-                <a href="https://www.linkedin.com/company/opentalent-agenda-et-logiciels-culturels" target="_blank" class="social_link">
 
-                    <img src="{{ 'images/linkedin.jpg' | img_to_base64 }}" width="30px"/>
 
-                </a>
 
-                <a href="https://www.youtube.com/@Opentalent74300" target="_blank" class="social_link">
 
-                    <img src="{{ 'images/youtube.jpg' | img_to_base64 }}" width="30px"/>
 
-                </a>
 
+            <a href="https://www.facebook.com/opentalent" target="_blank" class="social_link">
 
+                <img src="{{ 'images/facebook.jpg' | img_to_base64 }}" width="30px"/>
 
+            </a>
 
+            <a href="https://www.linkedin.com/company/opentalent-agenda-et-logiciels-culturels" target="_blank" class="social_link">
 
+                <img src="{{ 'images/linkedin.jpg' | img_to_base64 }}" width="30px"/>
 
+            </a>
 
+            <a href="https://www.youtube.com/@Opentalent74300" target="_blank" class="social_link">
 
+                <img src="{{ 'images/youtube.jpg' | img_to_base64 }}" width="30px"/>
 
+            </a>
 
             {% endblock %}
 
             {% endblock %}
 
         </div>
 
         </div>
 
-
 
-    </container>
 
-
 
-{% endapply %}
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 21 - 20
templates/emails/shop/NewStructureArtistPremium/confirmation-to-representative.html.twig
查看文件 

@@ -3,32 +3,33 @@
 
 {% block title %}Accédez à votre compte essai Opentalent Artist Premium{% endblock %}
 
 {% block title %}Accédez à votre compte essai Opentalent Artist Premium{% endblock %}
 
 
 
 {% block content %}
 
 {% block content %}
 
-    <h1>Bonjour {{ trialRequest.representativeFirstName }},</h1>
 
+<p>Bonjour {{ trialRequest.representativeFirstName }},</p>
 
 
 
-    <p>Votre demande d'essai pour Opentalent Artist Premium a été validée.</p>
 
+<p>Votre demande d'essai pour Opentalent Artist Premium a été validée.</p>
 
 
 
-    <p>Votre compte administrateur a été créé avec l'identifiant <code style="background-color: #f4f4f4; padding: 3px 5px; border-radius: 4px; font-family: monospace; border: 1px solid #ddd;">{{ adminUsername }}</code>.</p>
 
+<p>Votre compte administrateur a été créé avec l'identifiant <code style="background-color: #f4f4f4; padding: 3px 5px; border-radius: 4px; font-family: monospace; border: 1px solid #ddd;">{{ adminUsername }}</code>.</p>
 
 
 
-    <p>Pour accéder à votre espace, veuillez cliquer sur le lien ci-dessous :</p>
 
+<p>Pour accéder à votre espace, veuillez cliquer sur le lien ci-dessous :</p>
 
 
 
-    <p style="text-align: center; margin: 30px 0;">
 
-        <a href="{{ adminLoginUrl }}" style="background-color: #1ead8f; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); font-weight: bold;">
 
-            Accéder au logiciel
 
-        </a>
 
-    </p>
 
+<p class="center">
 
+    <a href="{{ adminLoginUrl }}" target="_blank" class="btn">
 
+        ACCÉDER AU LOGICIEL
 
+    </a>
 
+</p>
 
 
 
-    <p>Si le bouton ne fonctionne pas, vous pouvez copier et coller le lien suivant dans votre navigateur :</p>
 
-    <p>{{ adminLoginUrl }}</p>
 
+<p>Si le bouton ne fonctionne pas, vous pouvez copier et coller le lien suivant dans votre navigateur :</p>
 
+<p>{{ adminLoginUrl }}</p>
 
 
 
-    <p>Besoin d'aide ? Consultez notre FAQ complète pour découvrir toutes les fonctionnalités du logiciel et trouver les réponses à vos questions :</p>
 
+<p>Besoin d'aide ? Consultez notre FAQ complète pour découvrir toutes les fonctionnalités du logiciel et trouver les réponses à vos questions :</p>
 
 
 
-    <p style="text-align: center; margin: 30px 0;">
 
-        <a href="{{ faqUrl }}" style="background-color: #324250; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); font-weight: bold;">
 
-            Tout savoir sur Opentalent Artist
 
-        </a>
 
-    </p>
 
+<p class="center">
 
+    <a href="{{ faqUrl }}" target="_blank" class="btn" style="background-color: #324250;">
 
+        TOUT SAVOIR SUR OPENTALENT ARTIST
 
+    </a>
 
+</p>
 
 
 
-    <p>Nous vous remercions pour votre confiance et restons à votre disposition pour toute question.</p>
 
-
 
-    <p>Cordialement,<br>L'équipe Opentalent</p>
 
+<p>
 
+    À bientôt,<br>
 
+    L'équipe Opentalent
 
+</p>
 
 {% endblock %}
 
 {% endblock %}

+ 21 - 18
templates/emails/shop/token-validation.html.twig
查看文件 

@@ -3,30 +3,33 @@
 
 {% block title %}Validation de votre demande d'essai Opentalent Artist Premium{% endblock %}
 
 {% block title %}Validation de votre demande d'essai Opentalent Artist Premium{% endblock %}
 
 
 
 {% block content %}
 
 {% block content %}
 
-    <h1>Bonjour {{ representativeFirstName }},</h1>
 
+<p>Bonjour {{ representativeFirstName }},</p>
 
 
 
-    <p>Nous avons bien reçu votre demande d'essai pour la structure "{{ structureName }}".</p>
 
+<p>Nous avons bien reçu votre demande d'essai pour la structure "{{ structureName }}".</p>
 
 
 
-    <p>Pour valider votre demande et commencer votre période d'essai, veuillez cliquer sur le lien ci-dessous :</p>
 
+<p>Pour valider votre demande et commencer votre période d'essai, veuillez cliquer sur le lien ci-dessous :</p>
 
 
 
-    <p style="text-align: center; margin: 30px 0;">
 
-        <a href="{{ validationUrl }}" style="background-color: #1ead8f; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); font-weight: bold;">
 
-            Valider ma demande
 
-        </a>
 
-    </p>
 
+<p class="center">
 
+    <a href="{{ validationUrl }}" target="_blank" class="btn">
 
+        VALIDER MA DEMANDE
 
+    </a>
 
+</p>
 
 
 
-    <p>Si le bouton ne fonctionne pas, vous pouvez copier et coller le lien suivant dans votre navigateur :</p>
 
-    <p>{{ validationUrl }}</p>
 
+<p>Si le bouton ne fonctionne pas, vous pouvez copier et coller le lien suivant dans votre navigateur :</p>
 
+<p>{{ validationUrl }}</p>
 
 
 
-    <p>Besoin d'aide ? N'hésitez pas à consulter notre FAQ pour découvrir toutes les fonctionnalités du logiciel :</p>
 
+<p>Besoin d'aide ? N'hésitez pas à consulter notre FAQ pour découvrir toutes les fonctionnalités du logiciel :</p>
 
 
 
-    <p style="text-align: center; margin: 30px 0;">
 
-        <a href="https://support.opentalent.fr" style="background-color: #324250; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); font-weight: bold;">
 
-            Tout savoir sur Opentalent Artist
 
-        </a>
 
-    </p>
 
+<p class="center">
 
+    <a href="https://support.opentalent.fr" target="_blank" class="btn" style="background-color: #324250;">
 
+        TOUT SAVOIR SUR OPENTALENT ARTIST
 
+    </a>
 
+</p>
 
 
 
-    <p>Nous vous remercions pour votre confiance et restons à votre disposition pour toute question.</p>
 
+<p>Nous vous remercions pour votre confiance et restons à votre disposition pour toute question.</p>
 
 
 
-    <p>Cordialement,<br>L'équipe Opentalent</p>
 
+<p>
 
+    À bientôt,<br>
 
+    L'équipe Opentalent
 
+</p>
 
 {% endblock %}
 
 {% endblock %}