refactor(email): Redesign "remember-to-login" template

Author: pan93412

templates/email/mjml/_partials/footer.mjml.twig

@@ -0,0 +1,52 @@
+<mjml>
+  <mj-head>
+    <mj-preview>資料庫練功房 | 情況報告</mj-preview>
+    <mj-style inline="inline">
+      .highlight { color: #E74C3C; font-weight: bold; }
+      .button { background-color: #3498DB; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; }
+    </mj-style>
+  </mj-head>
+  <mj-body>
+    <mj-section background-color="#F4F4F4" padding="20px 0">
+      <mj-column>
+        <mj-image src="https://s3.dbplay.pan93.com/icon.svg" alt="資料庫練功房" align="center" width="24px" />
+        <mj-text font-size="20px" font-weight="bold" color="#2C3E50" align="center">
+          資料庫練功房｜情況報告
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <mj-section background-color="#FFFFFF" padding="20px" border-radius="8px" border="1px solid #E0E0E0">
+      <mj-column width="100%">
+        <mj-text font-size="18px" color="#2C3E50">
+          📉 登入天數 <span class="highlight">減少 ⬇</span>
+        </mj-text>
+
+        <mj-divider border-color="#E0E0E0" />
+
+        <mj-text font-size="14px" color="#34495E" line-height="1.6">
+          ⚠️ 我注意到這週你沒有登入，記得持續學習和練習對進步非常重要！
+          提醒你一下，如果這週做題數量未達 <b>5 題</b>，每少做一題將會扣 <b>4 分</b>，
+          希望你能儘快投入學習，保持進度，這樣才能持續提升自己的 SQL 能力。
+          加油！
+        </mj-text>
+
+        <mj-button background-color="#4154F1" color="#FFFFFF" font-size="16px" font-weight="bold" href="https://dbplay.pan93.com">
+          立刻登入
+        </mj-button>
+
+        <mj-text font-size="12px" color="#95A5A6" align="center" line-height="1.5">
+          如果對信件有任何問題，<a href="https://dbplay.pan93.com/feedback?url=mail://html" style="color:#3498DB; text-decoration:none;">請與我們回報</a>。
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <mj-section background-color="#F4F4F4" padding="10px">
+      <mj-column width="100%">
+        <mj-text font-size="12px" color="#BDC3C7" align="center">
+          &copy; 2024 資料庫練功房
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>

templates/email/mjml/_partials/header-situation.mjml.twig

@@ -1,43 +1,5 @@
 {% block email_content %}
     {% mjml %}
-        <mjml>
-            <mj-head>
-                <mj-preview>
-                    ⚠️ 我注意到這週你沒有登入，記得持續學習和練習對進步非常重要！提醒你一下，如果這週做題數量未達 5
-                    題，每少做一題將會扣 4 分，希望你能儘快投入學習，保持進度，這樣才能持續提升自己的 SQL 能力。加油！
-                </mj-preview>
-            </mj-head>
-            <mj-body>
-                <!-- <header> -->
-                {{ include('email/mjml/_partials/header-situation.mjml.twig') }}
-                <!-- </header> -->
-
-                <!-- <section> -->
-                <mj-wrapper padding="20px 12px">
-                    <!-- <article> -->
-                    <mj-section padding="0" text-align="center">
-                        <mj-column width="500px">
-                            <mj-image src="https://s3.dbplay.pan93.com/email-assets/section-login-recency-decrease.png"
-                                      alt="登入天數 – 減少" padding="0" padding-bottom="10px"/>
-                            <mj-text line-height="1.4" padding="0px 24px">
-                                ⚠️ 我注意到這週你沒有登入，記得持續學習和練習對進步非常重要！提醒你一下，如果這週做題數量未達
-                                5
-                                題，每少做一題將會扣 4 分，希望你能儘快投入學習，保持進度，這樣才能持續提升自己的 SQL 能力。加油！
-                            </mj-text>
-                            <mj-button href="https://dbplay.pan93.com" font-size="12px" background-color="#4154F1"
-                                       color="#ffffff" border-radius="12px" align="left" inner-padding="8px 14px">
-                                立即登入
-                            </mj-button>
-                        </mj-column>
-                    </mj-section>
-                    <!-- </article> -->
-                </mj-wrapper>
-                <!-- </section> -->
-
-                <!-- <footer> -->
-                {{ include('email/mjml/_partials/footer.mjml.twig') }}
-                <!-- </footer> -->
-            </mj-body>
-        </mjml>
+        {{ include('email/mjml/remember-to-login.mjml') }}
     {% endmjml %}
 {% endblock %}