185 lines
6.7 KiB
Smarty
185 lines
6.7 KiB
Smarty
<!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é !</h1>
|
|
<p>Je suis désormais joignable pour tchatter sur le réseau indépendant Jabber/XMPP.</p>
|
|
<p>Mon adresse XMPP : <strong>{{user_jid}}</strong></p>
|
|
<u>Pour me joindre :</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 :
|
|
<a href="xmpp:{{user_jid}}"><button class="button"><strong>{{user_jid}}</strong></button></a>
|
|
</p>
|
|
</article>
|
|
</body>
|
|
</html>
|