Add a dynamic message in accord to JID purpose (Thanks to Ramiro from Above Phone and TBOT).

css/stylesheet.css

@@ -210,8 +210,10 @@ label,
   background: #439639; /* #a0ce67 */
 }
 
-#logo-bottom {
+#logo-bottom,
+#notice {
   display: none;
+  text-align: center;
 }
 
 #logo-bottom {
@@ -351,7 +353,7 @@ h3, h4, h5 {
   */
   /* max-height: 75vh; */
   padding-top: 1em;
-  padding-bottom: 3em;
+  padding-bottom: 2em;
   text-align: center;
   width: 80%;
 }
@@ -536,6 +538,11 @@ h3, h4, h5 {
     width: unset;
   }
 
+  #message {
+    display: none;
+  }
+
+  #notice,
   #profile #photo,
   #profile #qrcode {
     display: block;
@@ -545,12 +552,21 @@ h3, h4, h5 {
   }
 
   #profile #qrcode {
+    margin-bottom: 1em;
     outline: solid;
     outline-color: #333;
   }
 
 }
 
+@media (max-width: 725px) and (prefers-color-scheme: dark) {
+
+  body {
+    background: #2b2a33;
+  }
+
+}
+
 @media (max-width: 725px) {
 
   body {
@@ -567,10 +583,6 @@ h3, h4, h5 {
     filter: unset;
   }
 
-  #message {
-    display: none;
-  }
-
   #logo-bottom {
     display: unset;
   }
@@ -631,14 +643,6 @@ h3, h4, h5 {
 
 }
 
-@media (max-width: 725px) and (prefers-color-scheme: dark) {
-
-  body {
-    background: #2b2a33;
-  }
-
-}
-
 @media (max-width: 572px) {
 
   #bar,

fasi.py

@@ -128,7 +128,7 @@ class HttpInstance:
                 elif jid_kind in ('mix', 'muc'):
                     #title = 'Group Chat ' + title
                     # TODO Set group chat subject as description.
-                    action = 'Join to'
+                    action = 'Join'
                     instance = 'participants'
                     link_href = 'xmpp:{}?join'.format(jid_bare)
                     links.append({'name' : 'Join',
@@ -141,7 +141,7 @@ class HttpInstance:
                 elif jid_kind == 'pubsub':
                     #node_name = request.query_params.get('node', '')
                     if node_name:
-                        action = 'Subscribe to'
+                        action = 'Subscribe'
                         instance = 'articles'
                         link_href = 'xmpp:{}?pubsub;node={};action=subscribe'.format(jid_bare, node_name)
                         view_href = '/d/{}/{}'.format(jid_bare, node_name)
@@ -373,7 +373,7 @@ class HttpInstance:
                 elif jid_kind in ('mix', 'muc'):
                     #title = 'Group Chat ' + title
                     # TODO Set group chat subject as description.
-                    action = 'Join to'
+                    action = 'Join'
                     instance = 'participants'
                     link_href = 'xmpp:{}?join'.format(jid_bare)
                     links.append({'name' : 'Join',
@@ -386,7 +386,7 @@ class HttpInstance:
                 elif jid_kind == 'pubsub':
                     #node_name = request.query_params.get('node', '')
                     if node_name:
-                        action = 'Subscribe to'
+                        action = 'Subscribe'
                         instance = 'articles'
                         link_href = 'xmpp:{}?pubsub;node={};action=subscribe'.format(jid_bare, node_name)
                         view_href = '/d/{}/{}'.format(jid_bare, node_name)
@@ -770,7 +770,7 @@ class HttpInstance:
                 elif jid_kind in ('mix', 'muc'):
                     #title = 'Group Chat ' + title
                     # TODO Set group chat subject as description.
-                    action = 'Join to'
+                    action = 'Join'
                     instance = 'participants'
                     link_href = 'xmpp:{}?join'.format(jid_bare)
                     links.append(['Join', link_href])
@@ -781,7 +781,7 @@ class HttpInstance:
                 elif jid_kind == 'pubsub':
                     #node_name = request.query_params.get('node', '')
                     if node_name:
-                        action = 'Subscribe to'
+                        action = 'Subscribe'
                         instance = 'articles'
                         link_href = 'xmpp:{}?pubsub;node={};action=subscribe'.format(jid_bare, node_name)
                         links.append(['Subscribe', link_href])

xhtml/jid.xhtml

@@ -43,6 +43,16 @@
               );
           }
         }
+        @media (max-width: 725px) and (prefers-color-scheme: dark) {
+          body {
+            background: #2b2a33;
+          }
+        }
+        @media (max-width: 725px) {
+          body {
+            background: #f5f5f5;
+          }
+        }
       </style>
     {% endif %}
   </head>
@@ -92,26 +102,46 @@
               Preview journal OR Preview group chat
               </a>
           </div -->
-          {% if count or jid_kind in ('mix', 'muc') %}
+          {% if count or jid_kind in ('conference', 'mix', 'muc') %}
             <div id="count">
               <a href="{{view_href}}">
                 {% if count %}
                   {{count}} {{instance}}
-                {% elif jid_kind in ('mix', 'muc') %}
+                {% elif jid_kind in ('conference', 'mix', 'muc') %}
                   Preview
                 {% endif %}
               </a>
             </div>
           {% endif %}
-          <!-- div>
-            <a href="https://xmpp.org">
-              <img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
-            </a>
-          </div -->
-          <!-- div id="note">
-            The Universal Messaging Standard
-          </div -->
         </div>
+        <div id="notice">
+          If you already have an <strong>XMPP Client</strong> you can
+          <br/>
+          {% if jid_kind in ('conference', 'mix', 'muc') %}
+            join to
+          {% elif jid_kind == 'pubsub' %}
+            subscribe to
+          {% elif jid_kind == 'bot' %}
+            try
+          {% elif jid_kind == 'server' %}
+            explore
+          {% else %}
+            talk with
+          {% endif %}
+          <strong>{{title}}</strong>
+          right now.
+        </div>
+        <!-- div id="note">
+            <div>
+              You have been invited to
+              <abbr title="The Universal Messaging Standard">XMPP</abbr>.
+            </div>
+            <div>
+             XMPP is a decentralized, free, and private messaging and publishing
+             protocol, that allows for end-to-end encrypted messaging, voice
+             calls, video calls, groups and more. Join to the community!
+            </div>
+        </div -->
       </div>
       {% if message %}
         <div id="message">{{message}}</div>