update base-html

odeimaiz · odeimaiz · commit c3fb2bbce450 · 2025-03-26T11:26:53.000+01:00
diff --git a/packages/notifications-library/src/notifications_library/templates/base.html b/packages/notifications-library/src/notifications_library/templates/base.html
@@ -5,28 +5,88 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{% block title %}{% endblock %}</title>
 <style>
-    body {
-        font-family: Arial, sans-serif;
-        margin: 0;
-        padding: 20px;
-        color: #333;
-    }
-    .container {
-        background-color: #f9f9f9;
-        padding: 20px;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-    a {
-        color: #007bff;
-        text-decoration: none;
-    }
+  body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+  }
+  .email-container {
+      max-width: 600px;
+      margin: 20px auto;
+      background-color: #ffffff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  .header {
+      display: flex;
+      align-items: center;
+      border-bottom: 2px solid #ddd;
+      padding-bottom: 10px;
+      margin-bottom: 20px;
+  }
+  .logo {
+      height: 40px;
+  }
+  .content {
+      color: #333;
+      font-size: 16px;
+      line-height: 1.5;
+  }
+  a {
+      color: #007bff;
+      text-decoration: none;
+  }
+  .footer {
+      margin-top: 20px;
+      padding-top: 15px;
+      border-top: 2px solid #ddd;
+      font-size: 14px;
+      text-align: center;
+      color: #666;
+  }
+  .footer a {
+      color: #007bff;
+      text-decoration: none;
+  }
+  .github-logo {
+    height: 20px;
+    vertical-align: middle;
+  }
 </style>
 </head>
 <body>
-  <div class="container">
-    {% block content %}
-    {% endblock %}
+  <div class="email-container">
+    <div class="header">
+      <a href="__product.homepage" target="_blank" rel="noopener noreferrer">
+        <img
+          src="https://raw.githubusercontent.com/ITISFoundation/osparc-simcore/refs/heads/master/services/static-webserver/client/source/resource/osparc/osparc-black.svg"
+          alt="Logo"
+          class="logo"
+        >
+      </a>
+    </div>
+
+    <div class="content">
+      {% block content %}
+      {% endblock %}
+    </div>
+
+    <div class="footer">
+      <p>
+        Visit the <a href="__product.homepage" target="_blank" rel="noopener noreferrer">Platform</a> |
+        Need help? <a href="__product.support_link" target="_blank" rel="noopener noreferrer">Support</a> |
+        Powered by oSPARC
+        <a href="https://github.com/ITISFoundation/osparc-simcore" target="_blank" rel="noopener noreferrer">
+          <img
+            src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+            alt="GitHub"
+            class="github-logo"
+          >
+        </a>
+      </p>
+    </div>
   </div>
 </body>
 </html>
