mycelia-front-app
Version:
Visualisation de graph sociaux
267 lines (241 loc) • 6.06 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Navigateur obsolète</title>
<style type="text/css">
body, html {
font-size: 13px;
color: #333;
background-color: #f8f8f8;
font-family: sans-serif;
text-align: center;
line-height: 1.5;
margin: 0;
padding: 0;
}
#co {
width: 755px;
margin: auto;
text-align: left;
position: relative;
clear: both;
}
@media only screen and (max-width: 800px) {
body #co {
width: auto;
margin-left: 10px;
margin-right: 10px;
min-width: 200px;
padding-top: 0;
}
body .logos, body .logos td, body .logos tr {
display: block;
width: auto;
margin: 0;
text-align: center;
}
body .logos tbody {
display: inline-block;
}
body .logos td {
width: 48%;
display: inline-block;
padding: 0;
}
.advantages li div {
margin-left: -36px;
margin-top: 8px;
}
body {
position: relative;
padding-bottom: 60px;
}
}
a {
color: #e25600;
}
ul h3 {
margin: 0;
color: #333;
}
.advantages {
font-size: 13px;
list-style: none;
margin-left: 5px;
padding-left: 0;
}
.advantages li {
margin-bottom: 1.5em;
padding-left: 40px;
color: #777;
}
.advantages li h3 {
font-size: 20px;
line-height: 30px;
}
h2, h3, a.l {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.logos {
width: 100%;
border: none;
}
.logos td {
vertical-align: top;
padding: 10px;
border: none;
background: none;
width: 25%;
}
.bf a {
background-image: url('ff.png');
}
.bi a {
background-image: url('ie.png');
}
.bo a {
background-image: url('op.png');
}
.bc a {
background-image: url('ch.png');
}
a.l {
display: block;
padding: 4px;
padding-top: 110px;
background-repeat: no-repeat;
background-position: center top;
text-decoration: none;
text-align: center;
}
a.l:hover {
padding: 3px;
padding-top: 109px;
border: 1px dashed rgb(170, 170, 170);
}
a.l .bro {
white-space: nowrap;
text-decoration: underline;
font-size: 19px;
}
a .vendor {
color: #aaa;
text-align: center;
font-size: 10px;
display: block;
}
.whatnow {
text-align: center;
margin: 13px 25px;
}
.noti {
margin: 35px 0;
border: 1px solid #777;
box-shadow: 0 0 8px #888;
background: #FFF4F4;
}
</style>
</head>
<body>
<div id="co">
<div class="noti">
<h2 class="whatnow">
<b>Ce site ne prend pas en charge votre navigateur ( qui n'est pas à jour ). Ces excellents navigateurs sont
téléchargeable gratuiement :</b>
</h2>
<table class="logos">
<tr>
<td class="b bf"><a class="l" href="https://www.mozilla.com/firefox/" target="_blank"
title="update to Firefox web browser"><span class="bro">Firefox</span><span class="vendor">Mozilla Foundation</span>
</a>
</td>
<td class="b bo"><a class="l" href="https://www.opera.com/" target="_blank" title="update to Opera web browser"><span
class="bro">Opera</span><span class="vendor">Opera Software</span>
</a>
</td>
<td class="b bc"><a class="l" href="https://www.google.com/chrome/browser/desktop/" target="_blank"
title="update to Chrome web browser"><span class="bro">Chrome</span><span class="vendor">Google</span>
</a>
</td>
<td class="b bi"><a class="l" href="https://www.microsoft.com/fr-FR/windows/microsoft-edge" target="_blank"
title="update to Edge web browser"><span class="bro">Edge</span><span class="vendor">Microsoft</span>
</a>
</td>
</tr>
</table>
<h2 class="whatnow">
Pour plus de <a href="#security">sécurité</a>, <a href="#speed">rapidité</a>, <a href="#comfort">confort</a> et <a
href="#fun">plaisir</a>.</h2>
</div>
<div>
<h2>Pourquoi ai-je besoin d'un navigateur à jour ?</h2>
<div id="advc">
<ul class="advantages">
<li class="security" id="security">
<h3>Pour la sécurité</h3>
<div>Tout navigateur actualisé vous protègera encore plus face aux arnaques, virus, chevaux de Troie, à
l'hameçonnage et à toute autre menace. Il comblera toute faille de sécurité éventuelle du navigateur utilisé
jusqu'ici et protègera votre vie privée !
</div>
</li>
<li class="speed" id="speed">
<h3>Pour la rapidité</h3>
<div>La rapidité et le confort d'utilisation augmentent avec chaque nouvelle génération de navigateurs.</div>
</li>
<li class="compatibility" id="fun">
<h3>Compatibilité</h3>
<div>Les sites Internet utilisant les nouvelles technologies s'afficheront correctement</div>
</li>
<li class="comfort" id="comfort">
<h3>Confort & meilleure expérience</h3>
<div>Avec de nouvelles fonctionnalités, des extensions et une meilleur personnalisation, vous profiterez d'une
meilleur expérience d'Internet
</div>
</li>
</ul>
</div>
</div>
</div>
<script>
// http://www.webvakman.nl/api/recentbrowserversions
/*
"Chrome": {
"Name": "chrome",
"LatestVersion": 56,
"ReleaseMonth": 1,
"ReleaseYear": 2017,
"DownloadPageUrl": "https:\/\/www.google.com\/chrome\/browser\/desktop",
},
"Firefox": {
"Name": "firefox",
"LatestVersion": 51,
"ReleaseMonth": 2,
"ReleaseYear": 2017,
"DownloadPageUrl": "https:\/\/www.mozilla.org\/en-US\/firefox\/new",
},
"Edge": {
"Name": "edge",
"LatestVersion": 38,
"ReleaseMonth": 8,
"ReleaseYear": 2016,
},
"Safari": {
"Name": "safari",
"LatestVersion": 5,
"ReleaseMonth": 0,
"ReleaseYear": 0,
},
"Opera": {
"Name": "opera",
"LatestVersion": 43,
"ReleaseMonth": 2,
"ReleaseYear": 2017,
"DownloadPageUrl": "http:\/\/www.opera.com",
}
*/
</script>
</body>
</html>