From 103c82ae6f8070bb17258542ec325b144cd5685f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=ABl=20Poyet?= <joel.poyet@novaloop.ch>
Date: Fri, 20 Feb 2026 11:17:20 +0100
Subject: [PATCH] feat(branding): style welcome page with HealthChat colors

---
 apps/web/res/welcome.html | 192 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 apps/web/res/welcome.html

diff --git a/apps/web/res/welcome.html b/apps/web/res/welcome.html
new file mode 100644
index 0000000000..8379bb4005
--- /dev/null
+++ b/apps/web/res/welcome.html
@@ -0,0 +1,192 @@
+<style type="text/css">
+    /* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
+ * voodoo where we have to set display: none by default
+ */
+
+    .mx_Header_title::after {
+        content: "!";
+    }
+
+    .mx_Parent {
+        font-family: "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -ms-flex-align: center;
+        align-items: center;
+        text-align: center;
+        padding: 25px 35px;
+    }
+
+    .mx_Logo {
+        height: 54px;
+        margin-top: 2px;
+    }
+
+    .mx_ButtonGroup {
+        margin-top: 10px;
+    }
+
+    .mx_ButtonRow {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-justify-content: space-around;
+        -ms-flex-pack: distribute;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -ms-flex-align: center;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        margin: 12px 0 0;
+    }
+
+    .mx_ButtonRow > * {
+        margin: 0 10px;
+    }
+
+    .mx_ButtonRow > *:first-child {
+        margin-left: 0;
+    }
+
+    .mx_ButtonRow > *:last-child {
+        margin-right: 0;
+    }
+
+    .mx_ButtonParent {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        padding: 10px 20px;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -ms-flex-align: center;
+        align-items: center;
+        border-radius: 4px;
+        width: 150px;
+        background-repeat: no-repeat;
+        background-position: 10px center;
+        text-decoration: none;
+        color: #473e3e !important;
+    }
+
+    .mx_ButtonLabel {
+        margin-left: 20px;
+    }
+
+    .mx_Header_title {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 20px 0 0;
+    }
+
+    .mx_Header_subtitle {
+        font-size: 12px;
+        font-weight: normal;
+        margin: 8px 0 0;
+    }
+
+    .mx_ButtonSignIn {
+        background-color: #1f4d85;
+        color: white !important;
+    }
+
+    .mx_ButtonCreateAccount {
+        background-color: #376A91;
+        color: white !important;
+    }
+
+    .mx_SecondaryButton {
+        background-color: #ffffff;
+        color: #2e2f32;
+    }
+
+    .mx_Button_iconSignIn {
+        background-image: url("welcome/images/icon-sign-in.svg");
+    }
+    .mx_Button_iconCreateAccount {
+        background-image: url("welcome/images/icon-create-account.svg");
+    }
+    .mx_Button_iconHelp {
+        background-image: url("welcome/images/icon-help.svg");
+    }
+    .mx_Button_iconRoomDirectory {
+        background-image: url("welcome/images/icon-room-directory.svg");
+    }
+
+    /*
+.mx_WelcomePage_loggedIn is applied by EmbeddedPage from the Welcome component
+If it is set on the page, we should show the buttons. Otherwise, we have to assume
+we don't have an account and should hide them. No account == no guest account either.
+ */
+    .mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
+        display: none;
+    }
+
+    .mx_ButtonRow.mx_WelcomePage_guestFunctions {
+        margin-top: 20px;
+    }
+    .mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
+        margin: 0 auto;
+    }
+
+    @media only screen and (max-width: 480px) {
+        .mx_ButtonRow {
+            flex-direction: column;
+        }
+
+        .mx_ButtonRow > * {
+            margin: 0 0 10px 0;
+        }
+    }
+</style>
+
+<div class="mx_Parent">
+    <a href="https://healthchat.ch" target="_blank" rel="noopener">
+        <img src="$logoUrl" alt="$brand" class="mx_Logo" />
+    </a>
+    <h1 class="mx_Header_title">_t("welcome_to_element")</h1>
+    <!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it -->
+    <h2 class="mx_Header_subtitle">_t("powered_by_matrix_with_logo")</h2>
+    <div class="mx_ButtonGroup">
+        <div class="mx_ButtonRow">
+            <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
+                <div class="mx_ButtonLabel">_t("action|sign_in")</div>
+            </a>
+            <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
+                <div class="mx_ButtonLabel">_t("action|create_account")</div>
+            </a>
+        </div>
+        <div class="mx_ButtonRow mx_WelcomePage_guestFunctions">
+            <div>
+                <a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
+                    <div class="mx_ButtonLabel">_t("action|explore_rooms")</div>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>