improv(invites): add favicon and change color to match ejabberd branding
This commit is contained in:
Stefan Strigler
@@ -1,7 +1,7 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{% for item in apps %}
|
||||
<div class="card m-3 client-card {% for platform in item.platforms %}app-platform-{{ platform|lower }} {% endfor %} flex-wrap col-sm-12 col-md-8 col-lg-5">
|
||||
<div class="card mx-0 mb-3 me-3 client-card {% for platform in item.platforms %}app-platform-{{ platform|lower }} {% endfor %}flex-wrap col-sm-12 col-md-8 col-lg-5">
|
||||
<div class="row no-gutters h-100">
|
||||
<div class="col-md-4">
|
||||
<img src="{{ static }}/{{ item.image }}" class="p-2 img-fluid" alt="{{ item.alttext }}">
|
||||
@@ -13,7 +13,7 @@
|
||||
{% for platform in item.platforms %}<span class="badge text-bg-info client-platform-badge client-platform-badge-{{ platform|lower }} me-1 mb-3">{{ platform }}</span>{% endfor %}
|
||||
</div>
|
||||
<p class="card-text">{{ item.text }}</p>
|
||||
<a href="{{ item.proceed_url }}" class="btn btn-primary mt-md-auto">{% if item.select_text %}{{ item.select_text }}{% else %}{% trans "Select" %}{% endif %}</a>
|
||||
<a href="{{ item.proceed_url }}" class="btn btn-primary mt-md-auto" tabindex="{{ forloop.counter|add:2 }}">{% if item.select_text %}{{ item.select_text }}{% else %}{% trans "Select" %}{% endif %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -22,5 +22,5 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="show-all-clients-button-container" class="d-none alert alert-info">
|
||||
{% trans "Showing apps for <span class='platform-name'>your current platform</span> only. You may also <a href='#' id='show-all-clients-button'>view all apps.</a>" %}
|
||||
{% blocktrans with tabidx=apps|length|add:2 %}Showing apps for <span class='platform-name'>your current platform</span> only. You may also <a href='#' id='show-all-clients-button' tabindex="{{ tabidx }}">view all apps.</a>{% endblocktrans %}
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
{% block rel_alternate %}<link rel="alternate" href="{{ uri }}">{% endblock %}
|
||||
|
||||
{% block qr_button %}
|
||||
<div id="qr-button-container" class="float-end w-25 border border-info p-3 d-none">
|
||||
<div id="qr-button-container" class="float-end w-25 border border-info p-3 ms-3 d-none">
|
||||
{% trans "<strong>Tip:</strong> You can open this invite on your mobile device by scanning a barcode with your camera." %}
|
||||
<button id="qr-modal-show" class="mt-2 d-block btn btn-info" title="{% trans "Send this invite to your device" %}"
|
||||
data-bs-toggle="modal" data-bs-target="#qr-modal">
|
||||
<button id="qr-modal-show" class="mt-2 mx-auto d-block btn btn-info" title="{% trans "Send this invite to your device" %}"
|
||||
data-bs-toggle="modal" data-bs-target="#qr-modal" tabindex="1">
|
||||
{% trans "Scan with mobile device" %}
|
||||
</button>
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">{% trans "Close" %}</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" tabindex="2">{% trans "Close" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,21 +3,16 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{% blocktrans %}Invite to {{ site_name }}{% endblocktrans %}{% endblock %}</title>
|
||||
<title>{% block title %}{% trans "Invite" %} | {{ site_name }}{% endblock %}</title>
|
||||
{% block rel_alternate %}{% endblock %}
|
||||
<link rel="stylesheet" href="{{ static }}/bootstrap/css/bootstrap.min.css" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB">
|
||||
<!-- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> -->
|
||||
<!-- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> -->
|
||||
<!-- <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> -->
|
||||
<!-- <link rel="manifest" href="/site.webmanifest"> -->
|
||||
<!-- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> -->
|
||||
<meta name="msapplication-TileColor" content="#fbd308">
|
||||
<meta name="theme-color" content="#fbd308">
|
||||
<link rel="stylesheet" href="{{ static }}/invite.css" integrity="sha384-hN1sIlm8uxqtq9Q4lhN1KW+O4HHk7Iwu+8ZT5QOZ4NU65xAXc99wTMJQ729MgOBJ">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ static }}/favicon.png">
|
||||
<meta name="msapplication-TileColor" content="#4acac3">
|
||||
<meta name="theme-color" content="#4acac3">
|
||||
<link rel="stylesheet" href="{{ static }}/invite.css" integrity="sha384-k6usDEL8f5OYugdzmHwAlWjdQA/YkOZre60c604zXvE9fSJpptDg2jzE2PaQ5/c+">
|
||||
</head>
|
||||
<body>
|
||||
<div id="background" class="fixed-top overflow-hidden"></div>
|
||||
<div id="form" class="{% block form_class %}container col-md-10 col-md-offset-1 col-sm-8 col-sm-offset-2 col-lg-10 col-lg-offset-1 mt-2 mt-md-5{% endblock %}">
|
||||
<div id="form" class="{% block form_class %}container col-md-10 col-md-offset-1 col-sm-8 col-sm-offset-2 col-lg-10 col-lg-offset-1 my-3 mt-md-5{% endblock %}">
|
||||
<div class="card rounded-2 shadow">
|
||||
<h1 class="card-header">{%block h1 %}{% blocktrans %}Invite to {{ site_name }}{% endblocktrans %}{% endblock %}</h1>
|
||||
<div class="card-body">
|
||||
@@ -30,6 +25,6 @@
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
<script src="{{ static }}/jquery/jquery.min.js" integrity="sha384-fgGyf7Mo7DURSOMnOy7ed+dkq5Job205Gnzu6QIg0BOHKaqt4D76Dt8VlDCzcMHV"></script>
|
||||
<script src="{{ static }}/bootstrap/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y"></script>
|
||||
<script src="{{ static }}/invite.js" integrity="sha384-ipfEWDupA8ErMMGTLXGpx93/xQwq9rwfRUtDI5NH3GfCS+QFSYmpFS+blGWXcBBL"></script>
|
||||
<script src="{{ static }}/invite.js" integrity="sha384-ov8LmXw6nEmT+QvXBRPMol0e90WFX9ZysvQudQ7H+nYDyolH4K/+GKJhq7qmTk4T"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% trans "Create Account" %} | {{ app.name }} | {{ site_name }}{% endblock %}
|
||||
{% block h1 %}{% blocktrans with app_name=app.name %}Join {{ site_name }} with {{ app_name }}{% endblocktrans %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
@@ -35,12 +35,12 @@
|
||||
<div class="ms-5">
|
||||
{% for button in app.download.buttons %}
|
||||
{% if button.image %}
|
||||
<a href="{% if button.magic_link %}{{ button.magic_link }}{% else %}{{ button.url }}{% endif %}" {% if button.target %}target="{{ button.target }}"{% endif %} rel="noopener">
|
||||
<a href="{% if button.magic_link %}{{ button.magic_link }}{% else %}{{ button.url }}{% endif %}" {% if button.target %}target="{{ button.target }}"{% endif %} rel="noopener" tabindex="3">
|
||||
<img src="{{ button.image }}" {% if button.alttext %}alt="{{ button.alttext }}"{% endif %} class="invite-download-button">
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if button.text %}
|
||||
<a href="{{ button.url }}" {% if button.target %}target="{{ button.target }}"{% endif %} class="btn btn-primary" rel="noopener">
|
||||
<a href="{{ button.url }}" {% if button.target %}target="{{ button.target }}"{% endif %} class="btn btn-primary" rel="noopener" tabindex="4">
|
||||
{{ button.text }}
|
||||
</a>
|
||||
{% endif %}
|
||||
@@ -54,13 +54,13 @@
|
||||
<p>{% trans "Installed ok? Great! <strong>Click or tap the button below</strong> to accept your invite and continue with your account setup:" %}</p>
|
||||
|
||||
<div>
|
||||
<a href="{{ uri }}" id="uri-cta" class="btn btn-primary ms-5 mt-1 mb-3">{% blocktrans with app_name=app.name %}Accept invite using {{ app_name }}{% endblocktrans %}</a><br/>
|
||||
<a href="{{ uri }}" id="uri-cta" class="btn btn-primary ms-5 mt-1 mb-3" tabindex="5">{% blocktrans with app_name=app.name %}Accept invite using {{ app_name }}{% endblocktrans %}</a><br/>
|
||||
</div>
|
||||
|
||||
<p>{% blocktrans with app_name=app.name %}After clicking the button you will be taken to {{ app_name }} to finish setting up your new {{ site_name }} account.{% endblocktrans %}</p>
|
||||
<nav aria-label="{% trans 'Page navigation' %}">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a tabindex="4" class="page-link" href="/{{ base }}/{{ token }}" aria-label="{% trans 'Previous' %}">
|
||||
<li class="page-item"><a tabindex="6" class="page-link" href="/{{ base }}/{{ token }}" aria-label="{% trans 'Previous' %}">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span>{% trans "Previous" %}</span>
|
||||
</a></li>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% trans "Create Account" %} | {{ site_name }}{% endblock %}
|
||||
{% block content %}
|
||||
<p>{% if invite.inviter|user %}
|
||||
{% blocktrans with inviter=invite.inviter|user %}You have been invited to chat with <strong>{{ inviter }}</strong> on <strong>{{ site_name }}</strong>, part of the XMPP secure and decentralized messaging network.{% endblocktrans %}
|
||||
@@ -12,5 +12,5 @@
|
||||
{% include "apps.html" %}
|
||||
|
||||
<h2 class="h5">{% trans "Other software" %}</h2>
|
||||
<p id="other-software">{% blocktrans %}You can connect to {{ site_name }} using any XMPP-compatible software. If your preferred software is not listed above, you may still <a href="{{ registration_url }}">register an account manually</a>.{% endblocktrans %}</p>
|
||||
<p id="other-software">{% blocktrans with tabidx=apps|length|add:3 %}You can connect to {{ site_name }} using any XMPP-compatible software. If your preferred software is not listed above, you may still <a href="{{ registration_url }}" tabindex='{{ tabidx }}'>register an account manually</a>.{% endblocktrans %}</p>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
{% extends "base_min.html" %}
|
||||
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 mt-2 mt-md-5{% endblock %}
|
||||
{% block title %}{% trans "Invite Expired" %} | {{ site_name }}{% endblock %}
|
||||
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 my-3 mt-md-5{% endblock %}
|
||||
{% block content %}
|
||||
<h2 class="card-title h5">{% trans "Invite expired" %}</h2>
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
{% extends "base_min.html" %}
|
||||
|
||||
{% block title %}{% if error %}{% trans "Registration Error" %}{% else %}{% trans "Registration Form" %}{% endif %} | {{ site_name }}{% endblock %}
|
||||
{% block h1 %}{% if error %}{% trans "Registration Error" %}{% else %}{% blocktrans %}Register on {{ site_name }}{% endblocktrans %}{% endif %}{% endblock %}
|
||||
|
||||
{% block title %}{% if error %}{% trans "Registration Error" %}{% else %}{% blocktrans %}Register on {{ site_name }}{% endblocktrans %}{% endif %}{% endblock %}
|
||||
{% block h1 %}{% block title %}{% endblock %}{% endblock %}
|
||||
|
||||
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 mt-2 mt-md-5{% endblock %}
|
||||
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 my-3 mt-md-5{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<p>{% if app %}{% blocktrans with app_name=app.name %}<strong>{{ site_name }}</strong> is part of XMPP, a secure and decentralized messaging network. To begin chatting using <strong>{{ app_name }}</strong> you need to first register an account.{% endblocktrans %}{% else %}{% blocktrans %}<strong>{{ site_name }}</strong> is part of XMPP, a secure and decentralized messaging network. To begin chatting you need to first register an account.{% endblocktrans %}{% endif %}</p>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% extends "base_min.html" %}
|
||||
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 mt-2 mt-md-5{% endblock %}
|
||||
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 my-3 mt-md-5{% endblock %}
|
||||
{% block content %}
|
||||
<h2 class="card-title h5">{% trans "Registration error" %}</h2>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% extends "base_min.html" %}
|
||||
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 mt-2 mt-md-5{% endblock %}
|
||||
{% block title %}{{site_name}}{% endblock %}
|
||||
{% block form_class %}container col-md-8 col-md-offset-2 col-sm-8 cold-sm-offset-2 col-lg-6 col-lg-offset-3 my-3 mt-md-5{% endblock %}
|
||||
{% block title %}{% trans "Registration Success" %} | {{site_name}}{% endblock %}
|
||||
{% block h1 %}{{site_name}}{% endblock %}
|
||||
{% block content %}
|
||||
<h2 class="card-title h5">{% trans "Congratulations!" %}</h2>
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% trans "Add Contact" %}{% endblock %}
|
||||
{% block title %}{% trans "Add Contact" %} | {{ site_name }}{% endblock %}
|
||||
{% block h1 %}{% blocktrans with inviter=invite.inviter|user %}{{ inviter }} has invited you to connect!{% endblocktrans %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="col-md-8">
|
||||
<div class="col-12 col-md-8">
|
||||
{% blocktrans with inviter=invite.inviter|jid %}This is an invite from <strong>{{ inviter }}</strong> to connect and chat on the XMPP network. If you already have an XMPP client installed just press the button below!{% endblocktrans %}
|
||||
<div class="col-md-4">
|
||||
<a href="{{ invite.uri }}" class="btn btn-primary my-3 mb-3">{% blocktrans with inviter=invite.inviter|user %}Add {{ inviter }} to your contact list{% endblocktrans %}</a><br/>
|
||||
<div class="text-center">
|
||||
<a href="{{ invite.uri }}" class="btn btn-success my-3" tabindex="3">{% blocktrans with inviter=invite.inviter|user %}Add {{ inviter }} to your contact list{% endblocktrans %}</a><br/>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="h6 clear-both">{% trans "If you don't have an XMPP client installed yet, here's a list of suitable clients for your platform." %}</h2>
|
||||
|
||||
<div class="bd-callout bd-callout-info col-12 col-md-8 mb-3">
|
||||
<svg class="svg-inline--fa fa-lightbulb fa-w-11 text-warning" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg=""><path fill="currentColor" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg>
|
||||
<strong class="text-warning-emphasis">{% trans 'Hint' %}:</strong> {% trans "If you don't have an XMPP client installed yet, here's a list of suitable clients for your platform." %}
|
||||
</p>
|
||||
</div>
|
||||
{% include "apps.html" %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 395 B |
@@ -1,23 +1,3 @@
|
||||
#other-software a {
|
||||
text-decoration: underline;
|
||||
color: #0072ed;
|
||||
}
|
||||
a#show-all-clients-button {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #0072ed;
|
||||
}
|
||||
.badge-success {
|
||||
background-color: #0a8927;
|
||||
}
|
||||
.alert-info, .alert-info a, .btn-info {
|
||||
background-color: #008297;
|
||||
color: white;
|
||||
}
|
||||
.border-info {
|
||||
border-color: #008297 !important;
|
||||
}
|
||||
#qr-invite-page{
|
||||
width: 256px;
|
||||
}
|
||||
@@ -27,3 +7,47 @@ a#show-all-clients-button {
|
||||
.clear-both {
|
||||
clear: both;
|
||||
}
|
||||
.bd-callout {
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
background-color: var(--bd-callout-bg, var(--bs-gray-100));
|
||||
border-left:0.25rem solid var(--bd-callout-border, var(--bs-gray-300))
|
||||
}
|
||||
.bd-callout h4 {
|
||||
margin-bottom:.25rem
|
||||
}
|
||||
.bd-callout > :last-child {
|
||||
margin-bottom:0
|
||||
}
|
||||
.bd-callout + .bd-callout {
|
||||
margin-top:-.25rem
|
||||
}
|
||||
.bd-callout .highlight {
|
||||
background-color:rgba(0, 0, 0, 0.05)
|
||||
}
|
||||
.bd-callout-info {
|
||||
--bd-callout-bg: rgba(var(--bs-info-rgb), .075);
|
||||
--bd-callout-border: rgba(var(--bs-info-rgb), .5)
|
||||
}
|
||||
.bd-callout-warning {
|
||||
--bd-callout-bg: rgba(var(--bs-warning-rgb), .075);
|
||||
--bd-callout-border: rgba(var(--bs-warning-rgb), .5)
|
||||
}
|
||||
.bd-callout-danger {
|
||||
--bd-callout-bg: rgba(var(--bs-danger-rgb), .075);
|
||||
--bd-callout-border: rgba(var(--bs-danger-rgb), .5)
|
||||
}
|
||||
.fa-w-11 {
|
||||
width: .6875em;
|
||||
}
|
||||
.fa-w-16 {
|
||||
widht: 1em;
|
||||
}
|
||||
.svg-inline--fa {
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
vertical-align: -.125em;
|
||||
}
|
||||
|
||||
+130
-126
@@ -1,137 +1,141 @@
|
||||
(function () {
|
||||
document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
|
||||
document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
|
||||
|
||||
// If QR lib loaded ok, show QR button on desktop devices
|
||||
if(window.QRCode) {
|
||||
const qrcode_opts = {
|
||||
text : document.location.href,
|
||||
addQuietZone: true
|
||||
};
|
||||
new QRCode(document.getElementById("qr-invite-page"), qrcode_opts);
|
||||
document.getElementById('qr-button-container').classList.add("d-md-block");
|
||||
}
|
||||
// If QR lib loaded ok, show QR button on desktop devices
|
||||
if (window.QRCode) {
|
||||
const qrcode_opts = {
|
||||
text: document.location.href,
|
||||
addQuietZone: true
|
||||
};
|
||||
new QRCode(document.getElementById("qr-invite-page"), qrcode_opts);
|
||||
document.getElementById('qr-button-container').classList.add("d-md-block");
|
||||
}
|
||||
|
||||
const toggle_pw_button = document.getElementById('toggle-pw-button');
|
||||
if (toggle_pw_button)
|
||||
toggle_pw_button.addEventListener('click', toggle_password);
|
||||
const toggle_pw_button = document.getElementById('toggle-pw-button');
|
||||
if (toggle_pw_button)
|
||||
toggle_pw_button.addEventListener('click', toggle_password);
|
||||
|
||||
// Detect current platform and show/hide appropriate clients
|
||||
if(window.platform) {
|
||||
let platform_friendly = null;
|
||||
let platform_classname = null;
|
||||
switch(platform.os.family) {
|
||||
case "Ubuntu":
|
||||
case "Linux":
|
||||
case "Fedora":
|
||||
case "Red Hat":
|
||||
case "SuSE":
|
||||
platform_friendly = platform.os.family + " (Linux)";
|
||||
platform_classname = "linux";
|
||||
break;
|
||||
case "Linux aarch64":
|
||||
platform_friendly = "Linux mobile";
|
||||
platform_classname = "linux";
|
||||
break;
|
||||
case "Haiku R1":
|
||||
platform_friendly = "Haiku";
|
||||
platform_classname = "haiku";
|
||||
break;
|
||||
case "Windows Phone":
|
||||
platform_friendly = "Windows Phone";
|
||||
platform_classname = "windows-phone";
|
||||
break;
|
||||
case "OS X":
|
||||
if (navigator.maxTouchPoints > 1) {
|
||||
// looks like iPad to me!
|
||||
platform_friendly = "iPadOS";
|
||||
platform_classname = "ipados";
|
||||
} else {
|
||||
platform_friendly = "macOS";
|
||||
platform_classname = "macos";
|
||||
}
|
||||
break;
|
||||
default:
|
||||
if(platform.os.family.startsWith("Windows")) {
|
||||
platform_friendly = "Windows";
|
||||
platform_classname = "windows";
|
||||
} else {
|
||||
platform_friendly = platform.os.family;
|
||||
platform_classname = platform_friendly.toLowerCase();
|
||||
}
|
||||
}
|
||||
// Detect current platform and show/hide appropriate clients
|
||||
if (window.platform) {
|
||||
let platform_friendly = null;
|
||||
let platform_classname = null;
|
||||
switch (platform.os.family) {
|
||||
case "Ubuntu":
|
||||
case "Linux":
|
||||
case "Fedora":
|
||||
case "Red Hat":
|
||||
case "SuSE":
|
||||
platform_friendly = platform.os.family + " (Linux)";
|
||||
platform_classname = "linux";
|
||||
break;
|
||||
case "Linux aarch64":
|
||||
platform_friendly = "Linux mobile";
|
||||
platform_classname = "linux";
|
||||
break;
|
||||
case "Haiku R1":
|
||||
platform_friendly = "Haiku";
|
||||
platform_classname = "haiku";
|
||||
break;
|
||||
case "Windows Phone":
|
||||
platform_friendly = "Windows Phone";
|
||||
platform_classname = "windows-phone";
|
||||
break;
|
||||
case "OS X":
|
||||
if (navigator.maxTouchPoints > 1) {
|
||||
// looks like iPad to me!
|
||||
platform_friendly = "iPadOS";
|
||||
platform_classname = "ipados";
|
||||
} else {
|
||||
platform_friendly = "macOS";
|
||||
platform_classname = "macos";
|
||||
}
|
||||
break;
|
||||
default:
|
||||
if (platform.os.family.startsWith("Windows")) {
|
||||
platform_friendly = "Windows";
|
||||
platform_classname = "windows";
|
||||
} else {
|
||||
platform_friendly = platform.os.family;
|
||||
platform_classname = platform_friendly.toLowerCase();
|
||||
}
|
||||
}
|
||||
|
||||
if(platform_friendly && platform_classname) {
|
||||
if(document.querySelectorAll('.client-card .client-platform-badge-'+platform_classname).length == 0) {
|
||||
const badges = document.querySelectorAll('.client-card .client-platform-badge');
|
||||
for (let badge of badges) {
|
||||
badge.classList.add("text-bg-secondary");
|
||||
badge.classList.remove("text-bg-info");
|
||||
}
|
||||
// No clients recognised for this platform, do nothing
|
||||
return;
|
||||
}
|
||||
// Hide clients not for this platform
|
||||
const client_cards = document.getElementsByClassName('client-card');
|
||||
for (let card of client_cards) {
|
||||
if (card.classList.contains('app-platform-'+platform_classname))
|
||||
card.classList.add('supported-platform');
|
||||
else if (!card.classList.contains('app-platform-web'))
|
||||
card.hidden = true;
|
||||
const badges = card.querySelectorAll('.client-platform-badge');
|
||||
for (let badge of badges) {
|
||||
if (badge.classList.contains('client-platform-badge-'+platform_classname)) {
|
||||
badge.classList.add("text-bg-success");
|
||||
badge.classList.remove("text-bg-info");
|
||||
} else {
|
||||
badge.classList.add("text-bg-secondary");
|
||||
badge.classList.remove("text-bg-info");
|
||||
}
|
||||
}
|
||||
}
|
||||
const show_all_clients_button_container = document.getElementById('show-all-clients-button-container');
|
||||
if (show_all_clients_button_container) {
|
||||
show_all_clients_button_container.querySelector('.platform-name').innerHTML = platform_friendly;
|
||||
show_all_clients_button_container.classList.remove("d-none");
|
||||
document.getElementById('show-all-clients-button').addEventListener('click', function (e) {
|
||||
for (let card of client_cards)
|
||||
card.hidden = false;
|
||||
show_all_clients_button_container.hidden = true;
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (platform_friendly && platform_classname) {
|
||||
if (document.querySelectorAll('.client-card .client-platform-badge-' + platform_classname).length == 0) {
|
||||
const badges = document.querySelectorAll('.client-card .client-platform-badge');
|
||||
for (let badge of badges) {
|
||||
badge.classList.add("text-bg-secondary");
|
||||
badge.classList.remove("text-bg-info");
|
||||
}
|
||||
// No clients recognised for this platform, do nothing
|
||||
return;
|
||||
}
|
||||
// Hide clients not for this platform
|
||||
const client_cards = document.getElementsByClassName('client-card');
|
||||
for (let card of client_cards) {
|
||||
if (card.classList.contains('app-platform-' + platform_classname))
|
||||
card.classList.add('supported-platform');
|
||||
else if (!card.classList.contains('app-platform-web'))
|
||||
card.hidden = true;
|
||||
const badges = card.querySelectorAll('.client-platform-badge');
|
||||
let has_platform = false;
|
||||
for (let badge of badges) {
|
||||
if (badge.classList.contains('client-platform-badge-' + platform_classname)) {
|
||||
badge.classList.add("text-bg-success");
|
||||
badge.classList.remove("text-bg-info");
|
||||
has_platform = true;
|
||||
} else {
|
||||
badge.classList.add("text-bg-secondary");
|
||||
badge.classList.remove("text-bg-info");
|
||||
}
|
||||
}
|
||||
if (!has_platform)
|
||||
$(card).find("a.btn").removeClass("btn-primary").addClass("btn-secondary");
|
||||
}
|
||||
const show_all_clients_button_container = document.getElementById('show-all-clients-button-container');
|
||||
if (show_all_clients_button_container) {
|
||||
show_all_clients_button_container.querySelector('.platform-name').innerHTML = platform_friendly;
|
||||
show_all_clients_button_container.classList.remove("d-none");
|
||||
document.getElementById('show-all-clients-button').addEventListener('click', function (e) {
|
||||
for (let card of client_cards)
|
||||
card.hidden = false;
|
||||
show_all_clients_button_container.hidden = true;
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
function toggle_password(e) {
|
||||
var button = e.target;
|
||||
var input = button.parentNode.parentNode.querySelector("input");
|
||||
switch(input.attributes.type.value) {
|
||||
case "password":
|
||||
input.attributes.type.value = "text";
|
||||
button.innerText = button.getAttribute('data-text-hide');
|
||||
break;
|
||||
case "text":
|
||||
input.attributes.type.value = "password";
|
||||
button.innerText = button.getAttribute('data-text-show');
|
||||
break;
|
||||
}
|
||||
var button = e.target;
|
||||
var input = button.parentNode.parentNode.querySelector("input");
|
||||
switch (input.attributes.type.value) {
|
||||
case "password":
|
||||
input.attributes.type.value = "text";
|
||||
button.innerText = button.getAttribute('data-text-hide');
|
||||
break;
|
||||
case "text":
|
||||
input.attributes.type.value = "password";
|
||||
button.innerText = button.getAttribute('data-text-show');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
window.addEventListener('load', function() {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
var validation = Array.prototype.filter.call(forms, function(form) {
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
(function () {
|
||||
'use strict';
|
||||
window.addEventListener('load', function () {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
var validation = Array.prototype.filter.call(forms, function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
|
||||
@@ -1,24 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter width="64" height="64" id="shadow">
|
||||
<feDropShadow dx="3" dy="3" stdDeviation="0" flood-opacity="0.4"/>
|
||||
</filter>
|
||||
<g filter="url(#shadow)">
|
||||
<path fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<svg version="1.1" width="512" height="512" viewBox="0 0 64 64" color-interpolation="linearRGB"
|
||||
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path style="fill:#000000; fill-opacity:0.4"
|
||||
d="M20.99 2C10.5 2 1.99 9.15 1.99 18C1.99 26.82 10.5 34 20.99 34C31.47 34 40 26.82 40 18C40 9.15 31.47 2 20.99 2z
|
||||
M40 36C37 33 36 26 36 26L28 32C28 32 36 36 40 36z"
|
||||
transform="matrix(1.4544,0,0,1.4544,0,4)"
|
||||
transform="matrix(1.4544,0,0,1.4544,2.9135,6.9089)"
|
||||
/>
|
||||
<linearGradient id="gradient0" gradientUnits="userSpaceOnUse" x1="128" y1="2" x2="128" y2="40">
|
||||
<stop offset="0" stop-color="#fff"/>
|
||||
<path style="fill:none; stroke:#000000; stroke-width:4; stroke-linecap:round; stroke-linejoin:round"
|
||||
d="M20.99 2C10.5 2 1.99 9.15 1.99 18C1.99 26.82 10.5 34 20.99 34C31.47 34 40 26.82 40 18C40 9.15 31.47 2 20.99 2z
|
||||
M40 36C37 33 36 26 36 26L28 32C28 32 36 36 40 36z"
|
||||
transform="matrix(1.4544,0,0,1.4544,0.0047,4)"
|
||||
/>
|
||||
<linearGradient id="gradient0" gradientUnits="userSpaceOnUse" x1="128" y1="1.99" x2="128" y2="40">
|
||||
<stop offset="0" stop-color="#ffffff"/>
|
||||
<stop offset="1" stop-color="#e5e5e5"/>
|
||||
</linearGradient>
|
||||
<path fill="url(#gradient0)"
|
||||
<path style="fill:url(#gradient0)"
|
||||
d="M20.99 2C10.5 2 1.99 9.15 1.99 18C1.99 26.82 10.5 34 20.99 34C31.47 34 40 26.82 40 18C40 9.15 31.47 2 20.99 2z
|
||||
M40 36C37 33 36 26 36 26L28 32C28 32 36 36 40 36z"
|
||||
transform="matrix(1.4544,0,0,1.4544,0,4)"
|
||||
transform="matrix(1.4544,0,0,1.4544,0.0047,4)"
|
||||
/>
|
||||
<path fill="#000"
|
||||
<path style="fill:#000000"
|
||||
d="M22.48 26.76H26.1V28.82H22.48
|
||||
M26.1 21.75V23.99H22.48V21.75
|
||||
M34.03 23.99H30.29V21.75H34.03
|
||||
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.7 KiB |
Reference in New Issue
Block a user