Une page Web pour aider à rejoindre le réseau XMPP
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

184 lines
6.7 KiB

<!DOCTYPE html>
<html>
<head>
<title>J'ai déménagé !</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="//chapril.org/sites/v2.chapril.org/squelettes/css/favicon.ico" type="image/x-icon">
<style>
body { text-align: center; font: 20px Helvetica, sans-serif; color: #333; background-color: white; max-width: 600px; margin: auto;}
h1 { font-size: 28px; text-align: center; margin: 5px;}
body > header > img {
width: 100%;
height: auto;
}
article { display: inline-block; text-align: left; margin: 0 auto; padding: 10px;}
div { padding: 5px; }
footer { font-size: 14px; }
a { color: #ff9843; text-decoration: none; }
a:hover { color: #aaa; text-decoration: none; }
.appbutton, .button {
background-color: #ff9843;
border: none;
color: #fff;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
font-size: 14px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 4px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button:hover {
background-color: #fbae6e;
color: #fff;
}
#downloads {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul {
padding: 0;
}
li {
list-style-type: none;
margin: 0.2rem;
}
.appbutton {
background-color: #2e5281;
background: linear-gradient(to right, #2e5281, #0a3877);
border-radius: 0.2rem;
width: 220px;
box-shadow: 0 0 5px 0px rgba(0,81,132,0.5);
}
.appbutton:hover {
background: #ff5e00;
}
img.app, img.store {
max-height: 40px;
}
#downloads a > div {
display: flex;
justify-content: space-between;
align-items: center;
}
#downloads a > div > div {
width: 120px;
}
#downloads span {
display: block;
text-align: left;
}
#downloads span.store {
color: black;
text-align: right;
text-transform: none;
}
@media screen and (min-width: 801px) {
.mobile-app { display: none; }
}
@media screen and (max-width: 800px) {
.desktop-app { display: none; }
}
</style>
</head>
<body>
<header>
<img src="assets/moved-to-xmpp.svg" alt="J'ai déménagé sur XMPP !"/>
</header>
<article>
<h1>J'ai déménagé&nbsp;!</h1>
<p>Je suis désormais joignable pour tchatter sur le réseau indépendant Jabber/XMPP.</p>
<p>Mon adresse XMPP&nbsp;: <strong>{{user_jid}}</strong></p>
<u>Pour me joindre&nbsp;:</u><br/>
<p>1) Installe une des applis Jabber/XMPP suivantes et crée-toi un compte</p>
<ul id="downloads">
<li class="mobile-app">
<a href="https://play.google.com/store/apps/details?id=im.blabber.messenger" title="Blabber.im sur Google Play">
<div class="appbutton">
<img class="app" src="assets/logo_blabber_64px.png" />
<div>
<span>Blabber.im</span>
<span class="store">sur Play Store</span>
</div>
<img class="store" src="assets/google-play.svg" />
</div>
</a>
</li>
<li class="mobile-app">
<a href="https://apps.apple.com/fr/app/tigase-messenger/id1153516838" title="Siskin IM sur Apple Store">
<div class="appbutton">
<img class="app" src="assets/logo_siskin_64px.png" />
<div>
<span>Siskin IM</span>
<span class="store">sur iOS</span>
</div>
<img class="store" src="assets/apple.svg" />
</div>
</a>
</li>
<li class="mobile-app">
<a href="https://f-droid.org/fr/packages/eu.siacs.conversations/" title="Conversations sur F-Droid">
<div class="appbutton">
<img class="app" src="assets/logo_conversations_64px.png" />
<div>
<span>Conversations</span>
<span class="store">sur F-Droid</span>
</div>
<img class="store" src="assets/fdroid_black.svg" />
</div>
</a>
</li>
<li class="desktop-app">
<a href="https://gajim.org/fr/download/" title="Gajim sur windows">
<div class="appbutton">
<img class="app" src="assets/logo_gajim_64px.png" />
<div>
<span>Gajim</span>
<span class="store">sur Windows</span>
</div>
<img class="store" src="assets/windows.svg" />
</div>
</a>
</li>
<li class="desktop-app">
<a href="https://dino.im/" title="Dino sur Linux">
<div class="appbutton">
<img class="app" src="assets/logo_dino_custom_64px.png" />
<div>
<span>Dino</span>
<span class="store">sur Linux</span>
</div>
<img class="store" src="assets/linux.svg" />
</div>
</a>
</li>
<li class="desktop-app">
<a href="https://beagle.im/" title="Beagle IM sur MacOS">
<div class="appbutton">
<img class="app" src="assets/logo_beagle_64px.png" />
<div>
<span>Beagle IM</span>
<span class="store">sur MacOS</span>
</div>
<img class="store" src="assets/apple.svg" />
</div>
</a>
</li>
</ul>
<!--
<div>
<a href="https://chapril.org/XMPP">... autres applis</a>
</div>
-->
<p>2) Puis ajoute mon adresse à ta liste de contacts en cliquant sur ce bouton&nbsp;:
<a href="xmpp:{{user_jid}}"><button class="button"><strong>{{user_jid}}</strong></button></a>
</p>
</article>
</body>
</html>