CSS : Modify the design of download page;

Python: Add instructions for operating systems and for featured clients;
SVG   : Add new icons and optimize existing icons;
TOML  : Add a file for operating systems;
XHTML : Add a page for operating systems.
This commit is contained in:
Schimon Jehudah, Adv. 2024-10-26 20:14:45 +03:00
parent 6625035969
commit 8675f295e6
24 changed files with 608 additions and 1159 deletions

View file

@ -31,7 +31,7 @@
Download
</a>
</div>
<div id="container-of-content">
<div id="container">
<div id="content">
{% if links %}
<div id="action-bar">
@ -85,51 +85,38 @@
<code id="exception">{{exception}}</code>
</div>
{% endif %}
{% if number_of_pages %}
<div id="number-of-pages">
{% if number_of_pages > 3 %}
{% if page_number < 2 %}
<span class="inactive" id="first">First</span>
<span class="inactive">Back</span>
{% else %}
<a href="?page=1" id="first">First</a>
<a href="?page={{page_number-1}}">Back</a>
{% endif %}
<a href="?page={{page_number}}">{{page_number}}</a>
{% if page_number == number_of_pages %}
<span class="inactive">Proceed</span>
<span class="inactive" id="last">Last</span>
{% else %}
<a href="?page={{page_number+1}}">Proceed</a>
<a href="?page={{number_of_pages}}" id="last">Last</a>
{% endif %}
{% else %}
{% for number in range(number_of_pages) %}
<a href="?page={{number+1}}">{{number+1}}</a>
{% endfor %}
{% endif %}
</div>
{% endif %}
{% if previous %}
<div id="number-of-pages">
<a href="./">Previous</a>
</div>
{% endif %}
<!-- div>
<a id="preview" href="/view/{{jid_bare}}">
Preview journal OR Preview group chat
</a>
</div -->
<!-- div>
<a href="{{brand_site}}">
<img id="logo-bottom" src="/img/logo-wordmark-vertical.svg" />
</a>
</div -->
<!-- div id="note">
The Universal Messaging Standard
</div -->
</div>
</div>
{% if number_of_pages %}
<div id="number-of-pages">
{% if number_of_pages > 3 %}
{% if page_number < 2 %}
<span class="inactive" id="first">First</span>
<span class="inactive">Back</span>
{% else %}
<a href="?page=1" id="first">First</a>
<a href="?page={{page_number-1}}">Back</a>
{% endif %}
<a href="?page={{page_number}}">{{page_number}}</a>
{% if page_number == number_of_pages %}
<span class="inactive">Proceed</span>
<span class="inactive" id="last">Last</span>
{% else %}
<a href="?page={{page_number+1}}">Proceed</a>
<a href="?page={{number_of_pages}}" id="last">Last</a>
{% endif %}
{% else %}
{% for number in range(number_of_pages) %}
<a href="?page={{number+1}}">{{number+1}}</a>
{% endfor %}
{% endif %}
</div>
{% endif %}
{% if previous %}
<div id="number-of-pages">
<a href="./">Previous</a>
</div>
{% endif %}
{% if message %}
<div id="xmpp-message">{{message}}</div>
{% endif %}

View file

@ -31,7 +31,7 @@
Download
</a>
</div>
<div id="container-of-profile">
<div id="container">
<div id="profile-compact">
</div>

View file

@ -26,33 +26,21 @@
<a href="{{brand_site}}">
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
</a>
<a id="download" href="/download/{{software}}">
{{title}}
<a id="download" href="/download">
Download
</a>
</div>
<div id="action-bar">
<a href="/download/android" id="android">
Android
</a>
<a href="/download/apple" id="apple">
Apple
</a>
<a href="/download/browser" id="browser">
Browser
</a>
<a href="/download/haiku" id="haiku">
Haiku
</a>
<a href="/download/linux" id="linux">
Linux
</a>
<a href="/download/windows" id="windows">
Windows
</a>
</div>
<div id="container-of-selection">
{% if client_selection %}
<h1>XMPP Clients For {{title}}</h1>
<h1>{{title}}</h1>
<div id="software-menu">
{% for client in client_selection %}
<a class="system" href="#{{client['iden']}}">
<img src="/img/{{client['iden']}}.svg"/>
<div>{{client['name']}}</div>
</a>
{% endfor %}
</div>
{% if title == 'Apple' %}
<div id="security-notices">
<span class="notice">
@ -60,9 +48,9 @@
<img src="/img/haiku.svg" />
</a>
<span>
Please refer to the section <a href="/download/haiku">XMPP
Clients For Haiku</a>, if you are using the Haiku operating
system.
Please refer to the section
<a href="/download/haiku">Haiku</a> for a selection of
clients for the Haiku operating system.
</span>
</span>
</div>
@ -103,8 +91,9 @@
<span class="notice">
<img src="/img/haikudepot.svg" />
<span>
Most of the software that are listed here should be available
for you to install from desktop directly with HaikuDepot.
Most of the software that are listed herein should be
available for you to install from desktop directly with
HaikuDepot.
</span>
</span>
</div>
@ -112,7 +101,7 @@
{% if title == 'Linux' %}
<div id="security-notices">
<span class="notice">
<img src="/img/tux.svg" />
<img src="/img/linux.svg" />
<span>
The listed XMPP clients, herein, are also usable with Linux
systems that are designed for mobile devices, such as
@ -126,19 +115,20 @@
<img src="/img/posix.svg" />
</a>
<span>
Please refer to section <a href="/download/posix">XMPP
Clients For POSIX</a>, if you prefer console software with
text based interface.
Please refer to section <a href="/download/posix">POSIX</a>
for a selection of console software with text-based interface.
</span>
</span>
</div>
{% endif %}
{% if title == 'POSIX' %}
<div id="security-notices">
<span class="notice">
<a href="/download/ubports">
<img src="/img/ubports.svg" />
</a>
<img src="/img/posix.svg" />
<span>
Please refer to section <a href="/download/ubports">XMPP
Clients For UBports</a>, if you are using the UBports
mobile system (also Ubuntu Touch).
The software that are listed herein are intended for people
who either want to use console interface, or remotely
control their chat client.
</span>
</span>
</div>
@ -148,8 +138,8 @@
<span class="notice">
<img src="/img/openstore.svg" style="border-radius: 8px" />
<span>
Most of the software that are listed here should be available
for you to install from device directly with OpenStore.
The software that are listed herein are available for you to
install directly with OpenStore.
</span>
</span>
</div>
@ -161,12 +151,25 @@
<img src="/img/reactos.svg" />
</a>
<span>
The listed XMPP clients, herein, are compatible with the
<a href="https://reactos.org">ReactOS</a> operating system.
The listed XMPP clients, herein, are also compatible with
the <a href="https://reactos.org">ReactOS</a> operating
system.
</span>
</span>
</div>
{% endif %}
<div class="plain-note">
XMPP clients of other devices and systems can be found at the
<a href="/selection">main selection</a> page.
</div>
{% if skipped %}
<div class="plain-note">
Display the <a href="/download/{{software}}/all">
complete list</a> of XMPP clients for {{title}}.
</div>
{% endif %}
<br/>
<hr/>
<dl id="selection">
{% for client in client_selection %}
<dt>
@ -179,26 +182,26 @@
<span>
<span class="text">{{client['about']}}</span>
<div class="features">
{% if 'adhoc' in client['features'] %}
{% if 'adhoc' in client['properties'] %}
<span>🪄️ Ad-Hoc Commands</span>
{% endif %}
{% if 'desktop' in client['features'] %}
{% if 'desktop' in client['properties'] %}
<span>🖥️ Desktop</span>
{% endif %}
{% if 'mobile' in client['features'] %}
{% if 'mobile' in client['properties'] %}
<span>📱 Mobile</span>
{% endif %}
{% if 'omemo' in client['features'] %}
{% if 'omemo' in client['properties'] %}
<!-- img class="icon" src="/img/omemo.svg" / -->
<span>🐟 OMEMO</span>
{% endif %}
{% if 'openpgp' in client['features'] %}
{% if 'openpgp' in client['properties'] %}
<span>🔐️ OpenPGP</span>
{% endif %}
{% if 'otr' in client['features'] %}
{% if 'otr' in client['properties'] %}
<span>🔏️ OTR</span>
{% endif %}
{% if 'pubsub' in client['features'] %}
{% if 'pubsub' in client['properties'] %}
<span>📡️ PubSub</span>
{% endif %}
{% if 'resources' in client %}
@ -217,8 +220,8 @@
</span>
</dd>
{% endfor %}
<hr/>
<br/>
<hr/>
<dt>
<a href="https://xmpp.org/software/">
<img class="narrow" src="/img/xmpp.svg"/>

View file

@ -66,7 +66,7 @@
Download
</a>
</div>
<div id="container-of-profile">
<div id="container">
<div id="profile">
<h1>{{title}}</h1>
{% if filename %}

View file

@ -32,7 +32,7 @@
Download
</a>
</div>
<div id="container-of-profile">
<div id="container">
<div id="profile">
<h1>FASI</h1>
<h3>Fast And Sleek Invite</h3>

View file

@ -31,7 +31,7 @@
Download
</a>
</div>
<div id="container-of-content">
<div id="container">
<div id="content">
{% if links %}
<div id="action-bar">

View file

@ -29,7 +29,7 @@
Download
</a>
</div>
<div id="container-of-profile">
<div id="container">
<div id="profile">
<h1>{{title}}</h1>
{% if note %}

52
xhtml/software.xhtml Normal file
View file

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Kayla (Céile) XMPP Invite -->
<!-- Zenya (Xenia) XMPP Invite -->
<!-- Fast And Sleek Invite (FASI) -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>{{brand_name}}: System</title>
<meta name="description" content="Operating System Selection" />
<meta name="generator" content="Fast And Sleek Invite" />
<meta name="uri" content="{{xmpp_uri}}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:description" content="Operating System Selection" />
<meta property="og:image" content="/img/logo-wordmark-horizontal.svg" />
<meta property="og:site_name" content="Operating System Selection" />
<meta property="og:title" content="Operating System Selection" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{url}}" />
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/img/favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="/css/stylesheet.css" media="screen" type="text/css" />
</head>
<body>
<div id="overlay">
<div id="bar">
<a href="{{brand_site}}">
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
</a>
<a id="download" href="/download">
Download
</a>
</div>
<div id="container-of-profile">
<div id="profile">
<h1>Choose Your System</h1>
<div class="plain-note">
And find the XMPP clients that are best for you.
</div>
<div id="software">
{% for system in software %}
<a class="system" href="/download/{{system['id']}}">
<img src="/img/{{system['id']}}.svg" />
<div>{{system['name']}}</div>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</body>
</html>