newly designed welcome page

assets/stylesheets/matrixchat.scss

-div.matrix-chat-button {
+@import "assets/stylesheets/mixins/colors";
+@import "assets/stylesheets/scss/variables";
+
+$font-size-huge: floor($font-size-h1 * 2.5);
+
+.matrix-welcome {
+  margin: 75px auto 0 auto;
+  text-align: center;
+
+  header {
+    h1 {
+      font-size: $font-size-huge;
+      font-weight: bold;
+    }
+    p {
+      font-size: floor($font-size-large * 1.25);
+    }
+  }
+
+  ol {
+    align-items: center;
+    counter-reset: item;
+    display: flex;
+    justify-content: center;
+    list-style: none;
+
+    li {
+      align-items: center;
+      background-color: $content-color-20;
+      counter-increment: item;
+      display: flex;
+      height: 120px;
+      margin: 15px;
+      padding: 10px;
+      text-align: left;
+      vertical-align: center;
+      width: 250px;
+
+      &:before {
+        color: $content-color;
+        content: counter(item) '.';
+        font-size: floor($font-size-huge * 1.25);
+        font-weight: bold;
+        margin-right: 15px;
+        position: relative;
+        top: -25px;
+        width: 50px;
+      }
+    }
+  }
+
+  .open-chat-container {
+    margin-bottom: 50px;
+    margin-top: 25px;
+
+    button {
+      font-size: $font-size-h1;
+      padding: 15px 40px;
+
+      &:hover {
+        background-color: $white;
+      }
+
+      a {
+        img {
+          vertical-align: bottom;
+        }
+
+        .button-text {
+          line-height: 36px;
+        }
+      }
+    }
+  }
+
+  footer {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: left;
+    width: 550px;
+
+    h1 {
+      font-size: $font-size-h2;
+
+      img {
+        vertical-align: bottom;
+        margin-right: 10px;
+      }
+
+      .matrix-footer-heading {
+        display: inline-block;
+        font-size: $font-size-h1;
+        font-weight: bold;
+      }
+    }
+
+    p {
+      padding-left: 48px;
+    }
+  }
+}
+
+.matrix-chat-button {
   text-align: center;
 }
 
-div.matrix-loading {
+.matrix-loading {
   height: 64px;
   text-align: center;
   width: 100%;

plugin.manifest

 pluginname=Matrix-Chat
 pluginclassname=MatrixPlugin
 origin=data-quest
-version=1.3
+version=1.4
 screenshot=assets/images/matrix_logo.png
 description=Matrix chat for Stud.IP courses
 studipMinVersion=4.5

views/matrix_chat/_welcome.php

+<article class="matrix-welcome">
+    <header>
+        <h1><?= dgettext('Matrix', 'Matrix-Chat') ?></h1>
+        <p>
+            <?= dgettext('matrix', 'So aktivieren Sie den Chat für diese Veranstaltung.') ?>
+        </p>
+    </header>
+    <ol>
+        <li>
+            <?= dgettext('matrix', 'Rufen Sie den Chat auf und klicken dort auf ' .
+                '"Mit SAML fortfahren". Melden Sie sich per WebSSO an.') ?>
+        </li>
+        <li>
+            <?= dgettext('matrix', 'Laden Sie danach diese Seite neu. ' .
+                'Sie erhalten dann eine Einladung in den Chatraum dieser Veranstaltung.') ?>
+        </li>
+        <li>
+            <?= dgettext('matrix', 'Nach dem ersten Login können Sie einen beliebigen ' .
+                'Chatclient für Matrix verwenden.') ?>
+        </li>
+    </ol>
+    <div class="open-chat-container">
+        <button type="button" class="button">
+            <a href="<?= Config::get()->MATRIX_CHATSERVER_URL ?>"
+               title="<?= dgettext('matrix', 'Zum Chat') ?>">
+                <?= Icon::create('link-extern')->asImg(36) ?>
+                <span class="button-text">
+                    <?= dgettext('matrix', 'Jetzt zum Chat anmelden.') ?>
+                </span>
+            </a>
+        </button>
+    </div>
+    <footer>
+        <h1>
+            <?= Icon::create('info-circle')->asImg(32) ?>
+            <span class="matrix-footer-heading">
+                <?= dgettext('matrix', 'Warum ist diese Anmeldung nötig?') ?>
+            </span>
+        </h1>
+        <p>
+            <?= dgettext('matrix', 'Sie müssen sich bereits erstmalig im Chat angemeldet haben, ' .
+                'damit Ihre Kennung dort angelegt wurde. Erst dann können Sie in den Chatraum dieser Veranstaltung ' .
+                'eingeladen werden. Aus technischen Gründen ist es nicht möglich, Ihre Kennung automatisch zu ' .
+                'ermitteln.' ) ?>
+        </p>
+    </footer>
+</article>

views/matrix_chat/index.php

@@ -8,28 +8,7 @@
     </div>
 <? endif ?>
 <? if ($showAccountHint) : ?>
-    <div class="messagebox messagebox_warning">
-        <p>
-            <?= dgettext('matrix', 'Sie müssen sich bereits erstmalig im Chat angemeldet haben, ' .
-                'damit Ihre Kennung dort angelegt wurde und Sie in den Chatraum dieser Veranstaltung eingeladen ' .
-                'werden können. Aus Datenschutzgründen ist es nicht möglich, Ihre Kennung dort automatisch zu ' .
-                'ermitteln.') ?>
-        </p>
-        <p>
-            <?= dgettext('matrix', 'Wenn Sie also noch nie im Element-Chat eingeloggt waren:') ?>
-            <br>
-            <?= sprintf(dgettext('matrix', '%sBitte rufen Sie den Chat auf%s und ' .
-                'klicken dort auf "Mit SAML fortfahren", um sich per WebSSO einzuloggen. Wenn Sie danach diese Seite ' .
-                'neu laden oder später nochmals aufrufen, erhalten Sie eine Einladung in den Chatraum dieser ' .
-                'Veranstaltung.'),
-                '<a href="' . Config::get()->MATRIX_CHATSERVER_URL . '" title="Chat" target="_blank">',
-                '</a>') ?>
-        </p>
-        <p>
-            <?= dgettext('matrix', 'Nach dem ersten Login können Sie problemlos beliebige ' .
-                'Chatclients für Matrix verwenden.') ?>
-        </p>
-    </div>
+    <?= $this->render_partial('matrix_chat/_welcome') ?>
 <? endif ?>
 <? if (!$account && Config::get()->MATRIX_AUTO_CREATE_ACCOUNTS) : ?>
     <form class="default" action="<?= $controller->link_for('matrix_chat/create_account') ?>" method="post">
@@ -53,7 +32,7 @@
     <div class="matrix-loading" data-endpoint="<?= htmlReady($controller->link_for('matrix_chat/require_room')) ?>">
         <?= Assets::img('ajax-indicator-black.svg') ?>
     </div>
-<? elseif (!$noChat) : ?>
+<? elseif (!$noChat && !$showAccountHint) : ?>
     <? if (Config::get()->MATRIX_USE_CHAT_IFRAME) : ?>
         <iframe src="<?= Config::get()->MATRIX_CHATSERVER_URL ?>" width="100%" height="100%"></iframe>
     <? else : ?>