Allégement du poinds du site + CSS adaptative
|
@ -1,2 +1,2 @@
|
||||||
[Desktop Entry]
|
[Desktop Entry]
|
||||||
Icon=folder-green
|
Icon=folder-red
|
||||||
|
|
13
README.md
|
@ -7,12 +7,13 @@ Il devrait fonctionner simplement avec la dernière version de PHP et un serveur
|
||||||
|
|
||||||
Le dossier bibli contient des dépendances incluses dans ce site.
|
Le dossier bibli contient des dépendances incluses dans ce site.
|
||||||
|
|
||||||
| Nom | Description | Source |
|
| Nom | Description | Source |
|
||||||
| -------- | -------------------------- | -------------------------------- |
|
| -------- | ----------------------- | ---------------------------------------- |
|
||||||
| ubuntu | La police Ubuntu | https://design.ubuntu.com/font/ |
|
| ubuntu | La police Ubuntu | https://design.ubuntu.com/font/ |
|
||||||
| fontello | Pack d'icônes | http://fontello.com/ |
|
| fontello | Pack d'icônes | http://fontello.com/ |
|
||||||
| lessphp | Compilateur Less en PHP | https://github.com/leafo/lessphp |
|
| lessphp | Compilateur Less en PHP | https://github.com/leafo/lessphp |
|
||||||
| sense3 | "Publicités" pour le libre | https://sense3.org/ |
|
| Konami-JS | Le code de Konami | https://snaptortoise.github.io/konami-js |
|
||||||
|
| Gomez CSS | Gomez de Fez en CSS | https://github.com/maisano/gomez-css |
|
||||||
|
|
||||||
# Licence
|
# Licence
|
||||||
|
|
||||||
|
|
|
@ -1,129 +0,0 @@
|
||||||
Font license info
|
|
||||||
|
|
||||||
|
|
||||||
## Fontelico
|
|
||||||
|
|
||||||
Copyright (C) 2012 by Fontello project
|
|
||||||
|
|
||||||
Author: Crowdsourced, for Fontello project
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://fontello.com
|
|
||||||
|
|
||||||
|
|
||||||
## Font Awesome
|
|
||||||
|
|
||||||
Copyright (C) 2016 by Dave Gandy
|
|
||||||
|
|
||||||
Author: Dave Gandy
|
|
||||||
License: SIL ()
|
|
||||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
|
||||||
|
|
||||||
|
|
||||||
## Entypo
|
|
||||||
|
|
||||||
Copyright (C) 2012 by Daniel Bruce
|
|
||||||
|
|
||||||
Author: Daniel Bruce
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://www.entypo.com
|
|
||||||
|
|
||||||
|
|
||||||
## Typicons
|
|
||||||
|
|
||||||
(c) Stephen Hutchings 2012
|
|
||||||
|
|
||||||
Author: Stephen Hutchings
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://typicons.com/
|
|
||||||
|
|
||||||
|
|
||||||
## Iconic
|
|
||||||
|
|
||||||
Copyright (C) 2012 by P.J. Onori
|
|
||||||
|
|
||||||
Author: P.J. Onori
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://somerandomdude.com/work/iconic/
|
|
||||||
|
|
||||||
|
|
||||||
## Modern Pictograms
|
|
||||||
|
|
||||||
Copyright (c) 2012 by John Caserta. All rights reserved.
|
|
||||||
|
|
||||||
Author: John Caserta
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://thedesignoffice.org/project/modern-pictograms/
|
|
||||||
|
|
||||||
|
|
||||||
## Meteocons
|
|
||||||
|
|
||||||
Copyright (C) 2012 by Alessio Atzeni
|
|
||||||
|
|
||||||
Author: Alessio Atzeni
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://www.alessioatzeni.com
|
|
||||||
|
|
||||||
|
|
||||||
## MFG Labs
|
|
||||||
|
|
||||||
Copyright (C) 2012 by Daniel Bruce
|
|
||||||
|
|
||||||
Author: MFG Labs
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://www.mfglabs.com/
|
|
||||||
|
|
||||||
|
|
||||||
## Maki
|
|
||||||
|
|
||||||
Copyright (C) Mapbox, LCC
|
|
||||||
|
|
||||||
Author: Mapbox
|
|
||||||
License: BSD (https://github.com/mapbox/maki/blob/gh-pages/LICENSE.txt)
|
|
||||||
Homepage: http://mapbox.com/maki/
|
|
||||||
|
|
||||||
|
|
||||||
## Zocial
|
|
||||||
|
|
||||||
Copyright (C) 2012 by Sam Collins
|
|
||||||
|
|
||||||
Author: Sam Collins
|
|
||||||
License: MIT (http://opensource.org/licenses/mit-license.php)
|
|
||||||
Homepage: http://zocial.smcllns.com/
|
|
||||||
|
|
||||||
|
|
||||||
## Brandico
|
|
||||||
|
|
||||||
(C) 2012 by Vitaly Puzrin
|
|
||||||
|
|
||||||
Author: Crowdsourced, for Fontello project
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage:
|
|
||||||
|
|
||||||
|
|
||||||
## Elusive
|
|
||||||
|
|
||||||
Copyright (C) 2013 by Aristeides Stathopoulos
|
|
||||||
|
|
||||||
Author: Aristeides Stathopoulos
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://aristeides.com/
|
|
||||||
|
|
||||||
|
|
||||||
## Linecons
|
|
||||||
|
|
||||||
Copyright (C) 2013 by Designmodo
|
|
||||||
|
|
||||||
Author: Designmodo for Smashing Magazine
|
|
||||||
License: CC BY ()
|
|
||||||
Homepage: http://designmodo.com/linecons-free/
|
|
||||||
|
|
||||||
|
|
||||||
## Web Symbols
|
|
||||||
|
|
||||||
Copyright (c) 2011 by Just Be Nice studio. All rights reserved.
|
|
||||||
|
|
||||||
Author: Just Be Nice studio
|
|
||||||
License: SIL (http://scripts.sil.org/OFL)
|
|
||||||
Homepage: http://www.justbenicestudio.com/
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
Font license info
|
||||||
|
|
||||||
|
|
||||||
|
## Font Awesome
|
||||||
|
|
||||||
|
Copyright (C) 2016 by Dave Gandy
|
||||||
|
|
||||||
|
Author: Dave Gandy
|
||||||
|
License: SIL ()
|
||||||
|
Homepage: http://fortawesome.github.com/Font-Awesome/
|
||||||
|
|
||||||
|
|
||||||
|
## Entypo
|
||||||
|
|
||||||
|
Copyright (C) 2012 by Daniel Bruce
|
||||||
|
|
||||||
|
Author: Daniel Bruce
|
||||||
|
License: SIL (http://scripts.sil.org/OFL)
|
||||||
|
Homepage: http://www.entypo.com
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,75 @@
|
||||||
|
This webfont is generated by http://fontello.com open source project.
|
||||||
|
|
||||||
|
|
||||||
|
================================================================================
|
||||||
|
Please, note, that you should obey original font licenses, used to make this
|
||||||
|
webfont pack. Details available in LICENSE.txt file.
|
||||||
|
|
||||||
|
- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
|
||||||
|
site in "About" section.
|
||||||
|
|
||||||
|
- If your project is open-source, usually, it will be ok to make LICENSE.txt
|
||||||
|
file publicly available in your repository.
|
||||||
|
|
||||||
|
- Fonts, used in Fontello, don't require a clickable link on your site.
|
||||||
|
But any kind of additional authors crediting is welcome.
|
||||||
|
================================================================================
|
||||||
|
|
||||||
|
|
||||||
|
Comments on archive content
|
||||||
|
---------------------------
|
||||||
|
|
||||||
|
- /font/* - fonts in different formats
|
||||||
|
|
||||||
|
- /css/* - different kinds of css, for all situations. Should be ok with
|
||||||
|
twitter bootstrap. Also, you can skip <i> style and assign icon classes
|
||||||
|
directly to text elements, if you don't mind about IE7.
|
||||||
|
|
||||||
|
- demo.html - demo file, to show your webfont content
|
||||||
|
|
||||||
|
- LICENSE.txt - license info about source fonts, used to build your one.
|
||||||
|
|
||||||
|
- config.json - keeps your settings. You can import it back into fontello
|
||||||
|
anytime, to continue your work
|
||||||
|
|
||||||
|
|
||||||
|
Why so many CSS files ?
|
||||||
|
-----------------------
|
||||||
|
|
||||||
|
Because we like to fit all your needs :)
|
||||||
|
|
||||||
|
- basic file, <your_font_name>.css - is usually enough, it contains @font-face
|
||||||
|
and character code definitions
|
||||||
|
|
||||||
|
- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
|
||||||
|
directly into html
|
||||||
|
|
||||||
|
- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
|
||||||
|
rules, but still wish to benefit from css generation. That can be very
|
||||||
|
convenient for automated asset build systems. When you need to update font -
|
||||||
|
no need to manually edit files, just override old version with archive
|
||||||
|
content. See fontello source code for examples.
|
||||||
|
|
||||||
|
- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
|
||||||
|
CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
|
||||||
|
We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
|
||||||
|
server headers. But if you ok with dirty hack - this file is for you. Note,
|
||||||
|
that data url moved to separate @font-face to avoid problems with <IE9, when
|
||||||
|
string is too long.
|
||||||
|
|
||||||
|
- animate.css - use it to get ideas about spinner rotation animation.
|
||||||
|
|
||||||
|
|
||||||
|
Attention for server setup
|
||||||
|
--------------------------
|
||||||
|
|
||||||
|
You MUST setup server to reply with proper `mime-types` for font files -
|
||||||
|
otherwise some browsers will fail to show fonts.
|
||||||
|
|
||||||
|
Usually, `apache` already has necessary settings, but `nginx` and other
|
||||||
|
webservers should be tuned. Here is list of mime types for our file extensions:
|
||||||
|
|
||||||
|
- `application/vnd.ms-fontobject` - eot
|
||||||
|
- `application/x-font-woff` - woff
|
||||||
|
- `application/x-font-ttf` - ttf
|
||||||
|
- `image/svg+xml` - svg
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 4.1 KiB |
|
@ -1,21 +0,0 @@
|
||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2018 JosephK
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
|
@ -1,80 +0,0 @@
|
||||||
body {
|
|
||||||
background: #eee;
|
|
||||||
}
|
|
||||||
iframe.sense3 {
|
|
||||||
border: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
padding: 30px;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
box-shadow: 0px 3px 4px rgba(50, 50, 50, 0.2);
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.container {
|
|
||||||
width: 750px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
width: 300px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
table > thead > tr > th,
|
|
||||||
table > tbody > tr > th,
|
|
||||||
table > thead > tr > td,
|
|
||||||
table > tbody > tr > td {
|
|
||||||
padding: 8px;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
vertical-align: top;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
table > thead > tr > th {
|
|
||||||
vertical-align: bottom;
|
|
||||||
border-bottom: 2px solid #ddd;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
display: block;
|
|
||||||
padding: 9.5px;
|
|
||||||
margin: 10px auto;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
max-width: 707px;
|
|
||||||
text-align:left;
|
|
||||||
word-break: break-all;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
pre code {
|
|
||||||
max-width: 728px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
.text-center {
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.col-sm-6 {
|
|
||||||
float: left;
|
|
||||||
padding: 0 15px;
|
|
||||||
width: calc(50% - 30px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h2, h3, h4, .clearfix {
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
display: table;
|
|
||||||
content: " ";
|
|
||||||
}
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 474 B |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 9.6 KiB |
Before Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 29 KiB |
|
@ -1,71 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- Une partie de ce texte est sujette à la Mozilla Public License, version 2.0.
|
|
||||||
- Vous pouvez en obtenir une copie à l'adresse http://mozilla.org/MPL/2.0/. -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>about:ant</title>
|
|
||||||
<style>
|
|
||||||
html {
|
|
||||||
background: maroon radial-gradient( circle, #a01010 0%, #800000 80%) center center / cover no-repeat;
|
|
||||||
color: white;
|
|
||||||
font-style: italic;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#texts {
|
|
||||||
margin-left: 15%;
|
|
||||||
margin-right: 15%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#otext {
|
|
||||||
margin-top: 15%;
|
|
||||||
font-size: 0.8em;
|
|
||||||
font-family: serif;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#anttext {
|
|
||||||
margin-top: 15%;
|
|
||||||
font-size: 1.3em;
|
|
||||||
font-family: serif;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-size: 1.3em;
|
|
||||||
line-height: 0;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<section id="texts">
|
|
||||||
|
|
||||||
<p id="otext">
|
|
||||||
La Bête se para de <strong>nouveaux ornements</strong> et étudia <strong>le Temps</strong>, <strong>l’Espace</strong>, <strong>la Lumière</strong> et <strong>les Flux</strong> d’énergie au sein de l’univers.
|
|
||||||
De son ouvrage, la Bête façonna de nouvelles structures à partir de <strong>métal oxydé</strong> et chanta leurs louanges.
|
|
||||||
Alors, les adorateurs de la Bête se réjouirent, retrouvant une destinée renouvelée au sein de ses <strong>enseignements</strong>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p id="anttext">
|
|
||||||
Le Créateur <strong>essaya</strong> et <strong>étudia</strong> longuement l'univers que protégait la <strong>Bête</strong>.
|
|
||||||
De ces études, l'Oeuvre <strong>naquit</strong> et évolua en se parant continuellement de nouveaux ornements et atouts.
|
|
||||||
Des adorateurs de l'<strong>Oeuvre</strong> se réjouirent et chantèrent ses louanges à travers l'<strong>univers</strong>.
|
|
||||||
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,19 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ABCDEFG</title>
|
|
||||||
<meta content="UTF-8">
|
|
||||||
<style>
|
|
||||||
|
|
||||||
html {
|
|
||||||
background-color: <?php function rand_color() {
|
|
||||||
return sprintf('#%06X', mt_rand(0, 0xFFFFFF));
|
|
||||||
}
|
|
||||||
echo rand_color(); ?>
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body></body>
|
|
||||||
</html>
|
|
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 735 B |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 887 B |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 735 B |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 823 B |
Before Width: | Height: | Size: 625 B |
Before Width: | Height: | Size: 575 B |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 6.9 KiB |
Before Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 31 KiB |
|
@ -1,158 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="robots" content="noindex, follow" />
|
|
||||||
<title>Sense3 - Examples</title>
|
|
||||||
<link rel="icon" type="image/png" href="favicon.png">
|
|
||||||
<link href="css/demo.css" media="all" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<h1><img src="logo.png" alt="Sense3" /></h1>
|
|
||||||
|
|
||||||
<h2>Examples</h2>
|
|
||||||
<h3>Leaderboard (728 x 90)</h3>
|
|
||||||
<div class="text-center">
|
|
||||||
<script src="sense3.js" data-sense3="728x90;;;vangogh"></script>
|
|
||||||
<script src="sense3.js" data-sense3="728x90;;;wikipedia"></script>
|
|
||||||
<pre><code><script src="sense3.js" data-sense3="728x90"></script></code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Medium rectangle (350 x 200)</h3>
|
|
||||||
<div class="text-center">
|
|
||||||
<script src="sense3.js" data-sense3="300x250;;;vangogh"></script>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;;;wikipedia"></script>
|
|
||||||
<pre><code><script src="sense3.js" data-sense3="300x250"></script></code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Customization</h2>
|
|
||||||
<p>Parameters can be added in the <code>data-sense3</code> attribut like this:</p>
|
|
||||||
<pre><code>data-sense3="<size>;<keywords>;<colors>;<bannerId>"</code></pre>
|
|
||||||
<p>Be careful with semicolons !</p>
|
|
||||||
<h3>Filters</h3>
|
|
||||||
|
|
||||||
<p>You can filter the banners to be randomly displayed according to a list of allowed keywords (separated by comas)…</p>
|
|
||||||
<div class="text-center col-sm-6" style="margin:0 auto; float:none;">
|
|
||||||
<script src="sense3.js" data-sense3="300x250;chaplin,hals"></script>
|
|
||||||
<pre><code>data-sense3="300x250;chaplin,hals"</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="clearfix">… or choose one specific banner to display.</p>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<script src="sense3.js" data-sense3="300x250;;;mastodon"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;;mastodon"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<script src="sense3.js" data-sense3="300x250;;;dioGafam"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;;dioGafam"</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="clearfix">… this one can be useful</p>
|
|
||||||
<div class="text-center">
|
|
||||||
<script src="/sense3/sense3.js" data-sense3="728x90;;;showInfos"></script>
|
|
||||||
<pre><code>data-sense3="728x90;;;showInfos"</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Color</h3>
|
|
||||||
<p>Colors on text banners can be customized.<br>Default colors are:</p>
|
|
||||||
<div class="col-sm-6 clearfix" style="margin:0 auto; float:none;">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr><th>Element</th><th>Color</th></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Background</td>
|
|
||||||
<td style="background:#FFFFFF">#FFFFFF</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Text 1</td>
|
|
||||||
<td style="background:#963425;color:#fff;">#963425</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Text 2</td>
|
|
||||||
<td style="background:#333333;color:#fff;">#333333</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Link</td>
|
|
||||||
<td style="background:#757575">#757575</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Button</td>
|
|
||||||
<td style="background:#963425;color:#fff;">#963425</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Border</td>
|
|
||||||
<td style="background:#CCCCCC">#CCCCCC</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<pre><code>#FFFFFF,#963425,#333333,#757575,#963425,#CCCCCC</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Examples from FramAdsense (for April Fools' Day)</h4>
|
|
||||||
<div class="text-center">
|
|
||||||
<h5>Default</h5>
|
|
||||||
<script src="sense3.js" data-sense3="728x90;wikipedia;#FFF,#6A5687,#616161,#757575,#6A5687,#D3C5E8"></script>
|
|
||||||
<pre><code>data-sense3="728x90;;#FFFFFF,#6A5687,#616161,#757575,#6A5687,#D3C5E8"</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Peertube</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#FFFFFF,#F1680D,#616161,#757575,#F1680D,#F1680D"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#FFFFFF,#F1680D,#616161,#757575,#F1680D,#F1680D"</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Framaporn</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#FFF,#EF7896,#757776,#757575,#EF7896,#EF7896"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#FFF,#EF7896,#757776,#757575,#EF7896,#EF7896"</code></pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Examples from Google Adsense</h4>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Default</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#FFF,#3F7DFB,#000,#A1A1A1,#5B99FE,#F3F3F3"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#FFF,#3F7DFB,#000,#A1A1A1,#5B99FE,#F3F3F3"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Minimalist</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#FFF,#212121,#838383,#858585,#C3C3C3,#E0E0E0"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#FFF,#212121,#838383,#858585,#C3C3C3,#E0E0E0"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Splash of color</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#F1F1F1,#4A4A4A,#5E5E5E,#49C4A5,#BABABA,#F1F1F1"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#F1F1F1,#4A4A4A,#5E5E5E,#49C4A5,#BABABA,#F1F1F1"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Prestige</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#000000,#F7F7F7,#CBCBCB,#707070,#444444,#ffffff"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#000000,#F7F7F7,#CBCBCB,#707070,#444444,#ffffff"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Colorful</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#4D90FE,#FFFFFF,#FFFFFF,#9DC3FF,#9DC3FF,#4D90FE"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#4D90FE,#FFFFFF,#FFFFFF,#9DC3FF,#9DC3FF,#4D90FE"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Dark blue reverse</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#336699,#FFFFFF,#FFFFFF,#6FA2C1,#6FA2C1,#336699"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#336699,#FFFFFF,#FFFFFF,#6FA2C1,#6FA2C1,#336699"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Notepad</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#FFFEEB,#8C6239,#75746E,#C7B295,#C5B092,#8C6239"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#FFFEEB,#8C6239,#75746E,#C7B295,#C5B092,#8C6239"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="text-center col-sm-6">
|
|
||||||
<h5>Neon</h5>
|
|
||||||
<script src="sense3.js" data-sense3="300x250;wikipedia;#000000,#FA8BDF,#FA8BDF,#731B50,#8C2367,#8C2367"></script>
|
|
||||||
<pre><code>data-sense3="300x250;;#000000,#FA8BDF,#FA8BDF,#731B50,#8C2367,#8C2367"</code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="clearfix"></div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 461 B |
|
@ -1,206 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="robots" content="noindex, follow" />
|
|
||||||
<title>Sense3</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
font-family: sans-serif;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.hidden {
|
|
||||||
display: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#text, #img, #video {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#text {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
padding: 10px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
img, video {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0px 0px 10px 0px;
|
|
||||||
color: #963425;
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #333;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #757575;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
font-size: 30px;
|
|
||||||
border-radius: 40px;
|
|
||||||
color: #fff;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
background: #963425;
|
|
||||||
border:none;
|
|
||||||
box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.5);
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about, #close {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
background: #ccc;
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about {
|
|
||||||
right: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about:hover, #close:hover {
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
#img ~ #about,
|
|
||||||
#video ~ #about,
|
|
||||||
#img ~ #close,
|
|
||||||
#video ~ #close {
|
|
||||||
background: rgba(255, 255, 255, 0.4);
|
|
||||||
opacity:0.8;
|
|
||||||
}
|
|
||||||
#img ~ #about:hover,
|
|
||||||
#video ~ #about:hover,
|
|
||||||
#img ~ #close:hover,
|
|
||||||
#video ~ #close:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
opacity:0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 0;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width: 300px) {
|
|
||||||
body {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#text {
|
|
||||||
height: 228px; /* 250 - 2 * 10 (padding) - 2 * 1 (border) */
|
|
||||||
background-position: center 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
margin-top:10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (width: 728px) {
|
|
||||||
#text {
|
|
||||||
height: 68px; /* 90 - 2 * 10 (padding) - 2 * 1 (border) */
|
|
||||||
background-position: 438px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, p {
|
|
||||||
margin: 0px 0px 5px 0px;
|
|
||||||
max-width: 675px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p { font-size: 12px; }
|
|
||||||
|
|
||||||
.button {
|
|
||||||
position:absolute;
|
|
||||||
top:0;
|
|
||||||
right: 0;
|
|
||||||
margin: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 300px;
|
|
||||||
height: 123px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
table > thead > tr > th,
|
|
||||||
table > tbody > tr > th,
|
|
||||||
table > thead > tr > td,
|
|
||||||
table > tbody > tr > td {
|
|
||||||
padding: 4px;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
vertical-align: top;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
table > thead > tr > th {
|
|
||||||
vertical-align: bottom;
|
|
||||||
border-bottom: 2px solid #ddd;
|
|
||||||
}
|
|
||||||
table img {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
.form-control {
|
|
||||||
display: block;
|
|
||||||
width: calc(100% - 14px);
|
|
||||||
height: 20px;
|
|
||||||
padding: 3px 6px;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 1.3;
|
|
||||||
color: #555;
|
|
||||||
background-color: #eee;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
@media (width: 728px) {
|
|
||||||
table {
|
|
||||||
float:left;
|
|
||||||
width: 364px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="bowser.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="bottomAd" style="font-size: 2px;"> </div>
|
|
||||||
<script src="sense3.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,993 +0,0 @@
|
||||||
/* global bowser */
|
|
||||||
|
|
||||||
(function sense3() {
|
|
||||||
let sense3Baseurl = '';
|
|
||||||
const defaultColors = ['#ffffff', '#963425', '#333333', '#757575', '#963425', '#cccccc'];
|
|
||||||
const i18n = {
|
|
||||||
en: {
|
|
||||||
close: 'Close',
|
|
||||||
notad: 'This is NOT an advertising',
|
|
||||||
os: 'System',
|
|
||||||
browser: 'Browser',
|
|
||||||
adblock: 'Adblock',
|
|
||||||
enabled: 'Enabled',
|
|
||||||
disabled: 'Disabled ?',
|
|
||||||
ua: 'User-Agent',
|
|
||||||
referrer: 'Referrer',
|
|
||||||
banner: 'Banner',
|
|
||||||
bannerHelp: 'Banners are displayed to visitors randomly according to the criteria detected by the software. If nothing is found, a default image will be displayed (Van Gogh). It is possible to override the detection criteria and force the display of a specific banner.',
|
|
||||||
format: 'Format',
|
|
||||||
leaderboard: 'Leaderboard (728 x 90)',
|
|
||||||
medium: 'Medium rectangle (350 x 200)',
|
|
||||||
fbanner: 'Static banner',
|
|
||||||
none: 'None (random)',
|
|
||||||
tags: 'Tags',
|
|
||||||
tagsHelp: 'It is possible to restrict the detection criteria. If you only want to display fake ads about Firefox and Linux for example and exclude everything else, you just need to check <code>firefox</code> and <code>linux</code> among the keywords. Obviously, if the visitor is already under Firefox and Linux, the default image will be displayed.',
|
|
||||||
colors: 'Colors',
|
|
||||||
colorsHelp: 'Colors only apply to text banners.',
|
|
||||||
background: 'Background',
|
|
||||||
text1: 'Text 1',
|
|
||||||
text2: 'Text 2',
|
|
||||||
link: 'Link',
|
|
||||||
button: 'Button',
|
|
||||||
border: 'Border',
|
|
||||||
generate: 'Get the code',
|
|
||||||
},
|
|
||||||
fr: {
|
|
||||||
close: 'Fermer',
|
|
||||||
notad: 'Ceci n’est PAS une publicité',
|
|
||||||
os: 'Plateforme',
|
|
||||||
browser: 'Navigateur',
|
|
||||||
adblock: 'Adblock',
|
|
||||||
enabled: 'Actif',
|
|
||||||
disabled: 'Inactif ?',
|
|
||||||
ua: 'User-Agent',
|
|
||||||
referrer: 'Référent',
|
|
||||||
banner: 'Bannière',
|
|
||||||
bannerHelp: 'Les bannières s’affichent aux visiteurs de manière aléatoire selon les critères détectés par le logiciel. Si rien n’est trouvé, une image par défaut sera affichée (Van Gogh). Il est possible d’outrepasser les critères de détection et forcer l’affichage d’une bannière spécifique.',
|
|
||||||
format: 'Format',
|
|
||||||
leaderboard: 'Entête large (728 x 90)',
|
|
||||||
medium: 'Rectangle moyen (350 x 200)',
|
|
||||||
fbanner: 'Forcer une bannière',
|
|
||||||
none: 'Aucune (aléatoire)',
|
|
||||||
tags: 'Mots-clés',
|
|
||||||
tagsHelp: 'Il est possible de restreindre les critères de détection. Si vous ne voulez afficher que des fausses pubs concernant Firefox et Linux par exemple et exclure tout le reste, il vous faudra juste cocher <code>firefox</code> et <code>linux</code> parmi les mots-clés. Évidemment, si le visiteur est déjà sous Firefox et Linux, l’image par défaut sera affichée.',
|
|
||||||
colors: 'Couleurs',
|
|
||||||
colorsHelp: 'Les couleurs ne s’appliquent qu’aux bannières textuelles.',
|
|
||||||
background: 'Arrière-plan',
|
|
||||||
text1: 'Texte 1',
|
|
||||||
text2: 'Texte 2',
|
|
||||||
link: 'Lien',
|
|
||||||
button: 'Bouton',
|
|
||||||
border: 'Bordure',
|
|
||||||
generate: 'Obtenir le code',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
let d = {};
|
|
||||||
const s = {
|
|
||||||
|
|
||||||
/** Banners ***************************************************** */
|
|
||||||
data() {
|
|
||||||
d = {
|
|
||||||
/**
|
|
||||||
<id>: {
|
|
||||||
condition: <boolean function>,
|
|
||||||
format: ['<filetype>', '<width>x<height>', '<width>x<height>'],
|
|
||||||
link: {
|
|
||||||
xx: 'https://example.com/', (i18n managed by the website)
|
|
||||||
or
|
|
||||||
en: 'https://example.com/en/',
|
|
||||||
fr: 'https://example.com/fr/',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
en: ['<title>','<subtitle>'],
|
|
||||||
fr: ['<titre>','<sous-titre>'],
|
|
||||||
},
|
|
||||||
tags: ['<category>', '<tag1>', '<tag2>', …],
|
|
||||||
},
|
|
||||||
*/
|
|
||||||
// Referrer
|
|
||||||
dioGafam: {
|
|
||||||
condition: s.is.bad('gafam'),
|
|
||||||
format: ['png', '300x250'],
|
|
||||||
link: { xx: 'https://degooglisons-internet.org/' },
|
|
||||||
text: {
|
|
||||||
en: ['GAFAM', 'We <3 your data !'],
|
|
||||||
fr: ['GAFAM', 'We <3 your data !'],
|
|
||||||
},
|
|
||||||
tags: ['referrer', 'facebook', 'degooglisons', 'google', 'apple', 'microsoft', 'amazon', 'gafam'],
|
|
||||||
},
|
|
||||||
dioAmazon: {
|
|
||||||
condition: s.is.bad('amazon'),
|
|
||||||
format: ['png', '300x250'],
|
|
||||||
link: { xx: 'https://degooglisons-internet.org/' },
|
|
||||||
text: {
|
|
||||||
en: ['Amazon', 'très méchant'],
|
|
||||||
fr: ['Amazon', 'très méchant'],
|
|
||||||
},
|
|
||||||
tags: ['referrer', 'amazon', 'degooglisons', 'gafam'],
|
|
||||||
},
|
|
||||||
dioFacebook: {
|
|
||||||
condition: s.is.bad('facebook'),
|
|
||||||
format: ['png', '300x250'],
|
|
||||||
link: { xx: 'https://degooglisons-internet.org/' },
|
|
||||||
text: {
|
|
||||||
en: ['Facebook', 'is watching you…'],
|
|
||||||
fr: ['Facebook', 'is watching you…'],
|
|
||||||
},
|
|
||||||
tags: ['referrer', 'facebook', 'degooglisons', 'gafam'],
|
|
||||||
},
|
|
||||||
dioGoogle: {
|
|
||||||
condition: s.is.bad('google'),
|
|
||||||
format: ['png', '300x250'],
|
|
||||||
link: { xx: 'https://degooglisons-internet.org/' },
|
|
||||||
text: {
|
|
||||||
en: ['Warning', 'Don’t feed the Google'],
|
|
||||||
fr: ['Warning', 'Don’t feed the Google'],
|
|
||||||
},
|
|
||||||
tags: ['referrer', 'google', 'degooglisons', 'gafam'],
|
|
||||||
},
|
|
||||||
dioMicrosoft: {
|
|
||||||
condition: s.is.bad('microsoft'),
|
|
||||||
format: ['png', '300x250'],
|
|
||||||
link: { xx: 'https://degooglisons-internet.org/' },
|
|
||||||
text: {
|
|
||||||
en: ['Microsoft', 'Do you need a backdoor ?'],
|
|
||||||
fr: ['Microsoft', 'Do you need a backdoor ?'],
|
|
||||||
},
|
|
||||||
tags: ['referrer', 'microsoft', 'degooglisons', 'gafam'],
|
|
||||||
},
|
|
||||||
amazon: {
|
|
||||||
condition: s.is.bad('amazon'),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
colors: '#231f20,#ffffff,#ffffff,#f89820,#f89820,#cccccc',
|
|
||||||
link: { xx: 'https://framabookin.org' },
|
|
||||||
text: {
|
|
||||||
en: ['Thanks for buying from Amazon', 'And thanks for your personal data!'],
|
|
||||||
fr: ['Merci pour vos achats chez Amazon', 'Et merci pour vos données personnelles !'],
|
|
||||||
},
|
|
||||||
tags: ['referrer', 'amazon', 'gafam', 'framabookin'],
|
|
||||||
},
|
|
||||||
mastodon: {
|
|
||||||
condition: s.is.bad('twitter'),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
colors: '#282c37,#9baec8,#d9e1e8,#2b90d9,#2b90d9,#9baec8',
|
|
||||||
link: { xx: 'https://joinmastodon.org' },
|
|
||||||
text: {
|
|
||||||
en: [
|
|
||||||
['Join Mastodon', 'A free social network in 500 characters'],
|
|
||||||
['Twitter chooses what you see', 'Choose what you get'],
|
|
||||||
['You came from Twitter', 'Try an ethic alternative'],
|
|
||||||
['Don’t give your life to Twitter', 'Give it a Toot!'],
|
|
||||||
],
|
|
||||||
fr: [
|
|
||||||
['Rejoignez Mastodon', 'Le réseau social libre en 500 caractères'],
|
|
||||||
['Twitter choisis ce que tu vois', 'Reprend le pouvoir'],
|
|
||||||
['Vous étiez sur Twitter', 'Voici une alternative éthique'],
|
|
||||||
['N’offre pas ta vie à Twitter', 'Offre lui des Pouets !'],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
tags: ['referrer', 'twitter', 'social'],
|
|
||||||
},
|
|
||||||
diaspora: {
|
|
||||||
condition: s.is.bad('facebook'),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: {
|
|
||||||
en: 'https://podupti.me/',
|
|
||||||
fr: 'https://framasphere.org',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
en: [
|
|
||||||
['Want to #DeleteFacebook…?', 'Here’s an ethic alternative'],
|
|
||||||
['Do you feel clostro-Facebook…?', 'Breathe with Diaspora*'],
|
|
||||||
['Thank you for coming from Facebook', 'Have you thought about trying Diaspora*?'],
|
|
||||||
['Facebook saw you came here', 'Diaspora* would never spy on you'],
|
|
||||||
],
|
|
||||||
fr: [
|
|
||||||
['Tu veux #DeleteFacebook…?', 'Voici une alternative éthique'],
|
|
||||||
['Tu te sens esclave de Facebook…?', 'Diaspora* te libère'],
|
|
||||||
['Merci d’être venu·e depuis Facebook', 'Avez-vous pensé à essayer Diaspora* ?'],
|
|
||||||
['Facebook t’a vu venir ici', 'Diaspora* ne t’espionne pas'],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
tags: ['referrer', 'facebook', 'social', 'gafam'],
|
|
||||||
},
|
|
||||||
// Browser
|
|
||||||
chrome: {
|
|
||||||
condition: s.is.bad('chrome'),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://www.mozilla.org/firefox/' },
|
|
||||||
img: 'img/bg/firefox.png',
|
|
||||||
text: {
|
|
||||||
en: [
|
|
||||||
['Drop Google Chrome', 'Surf 2x faster with Firefox Quantum'],
|
|
||||||
['Chrome is unsecure', 'Firefox protects your data'],
|
|
||||||
],
|
|
||||||
fr: [
|
|
||||||
['Laissez tomber Google Chrome', 'Surfez 2x plus vite avec Firefox Quantum'],
|
|
||||||
['Chrome n’est pas sûr', 'Firefox protège vos données'],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
tags: ['browser', 'firefox', 'mozilla', 'google', 'chrome'],
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
condition: (bowser.msedge || bowser.msie),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://www.mozilla.org/firefox/' },
|
|
||||||
img: 'img/bg/firefox.png',
|
|
||||||
text: {
|
|
||||||
en: ['Your browser is unsecure', 'Firefox protects your data'],
|
|
||||||
fr: ['Votre navigateur n’est pas sûr', 'Firefox protège vos données'],
|
|
||||||
},
|
|
||||||
tags: ['browser', 'firefox', 'mozilla', 'microsoft', 'gafam'],
|
|
||||||
},
|
|
||||||
firefoxUpdate: {
|
|
||||||
condition: (bowser.firefox && bowser.version <= 56),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
colors: '#0a84ff,#363959,#363959,#00feff,#ff9400,#cccccc',
|
|
||||||
img: 'img/bg/firefox.png',
|
|
||||||
link: { xx: 'https://www.mozilla.org/firefox/' },
|
|
||||||
text: {
|
|
||||||
en: ['Firefox Quantum', 'Internet for people, not profit.'],
|
|
||||||
fr: ['Passez à Firefox Quantum', 'La dernière version ultra-rapide de Mozilla'],
|
|
||||||
},
|
|
||||||
tags: ['browser', 'firefox', 'mozilla', 'chrome', 'google'],
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
condition: s.is.bad('browser'),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
colors: '#003eaa,#ffffff,#ffffff,#40b6f8,#16da00,#003eaa',
|
|
||||||
img: 'img/bg/firefox.png',
|
|
||||||
link: { xx: 'https://www.mozilla.org/firefox/' },
|
|
||||||
text: {
|
|
||||||
en: [
|
|
||||||
['Have you ever tried Firefox?', 'Firefox is fast and respects your privacy.'],
|
|
||||||
['Your privacy matters!', 'Firefox is fast and respects your privacy'],
|
|
||||||
],
|
|
||||||
fr: [
|
|
||||||
['Avez-vous déjà essayé Firefox ?', 'Le navigateur rapide et respectueux de votre vie privée'],
|
|
||||||
['Votre vie privée est importante !', 'Firefox est rapide et respecte votre vie privée'],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
tags: ['browser', 'firefox', 'mozilla', 'chrome', 'google', 'safari', 'opera', 'microsoft'],
|
|
||||||
},
|
|
||||||
// Adblock
|
|
||||||
ublock: {
|
|
||||||
condition: (!s.is.adblock() && !bowser.firefox && !s.is.bad('chrome')),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://github.com/gorhill/uBlock' },
|
|
||||||
text: {
|
|
||||||
en: ['Relieve the Internet (and your eyes)', 'Use an ad blocker'],
|
|
||||||
fr: ['Soulagez Internet (et vos yeux)', 'Utilisez un bloqueur de pub'],
|
|
||||||
},
|
|
||||||
tags: ['browser', 'adblock', 'advertising'],
|
|
||||||
},
|
|
||||||
ublockFirefox: {
|
|
||||||
condition: (!s.is.adblock() && bowser.firefox),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: {
|
|
||||||
en: 'https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/',
|
|
||||||
fr: 'https://addons.mozilla.org/fr/firefox/addon/ublock-origin/',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
en: ['Please, block this ad', 'Install uBlock Origins'],
|
|
||||||
fr: ['S’il te plaît, bloque cette pub…', 'Installe uBlock Origins'],
|
|
||||||
},
|
|
||||||
tags: ['browser', 'adblock', 'advertising', 'mozilla', 'firefox'],
|
|
||||||
},
|
|
||||||
ublockChrome: {
|
|
||||||
condition: (!s.is.adblock() && s.is.bad('chrome')),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: {
|
|
||||||
xx: 'https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
en: ['Relieve the Internet (and your eyes)', ' Use an ad blocker'],
|
|
||||||
fr: ['Soulagez Internet (et vos yeux)', 'Utilisez un bloqueur de pub'],
|
|
||||||
},
|
|
||||||
tags: ['browser', 'adblock', 'advertising', 'google', 'chrome'],
|
|
||||||
},
|
|
||||||
green: {
|
|
||||||
condition: (!s.is.adblock() && (s.is.ref('lilo.org') || s.is.ref('ecosia.org'))),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
colors: '#ffffff,#467c81,#333333,#8bcc49,#467c81,#cccccc',
|
|
||||||
link: { xx: 'https://github.com/gorhill/uBlock' },
|
|
||||||
text: {
|
|
||||||
en: ['Ecological and easy', 'Blocking advertising reduces web traffic by ~60%'],
|
|
||||||
fr: ['Écolo et simple', 'Bloquer la pub réduit le trafic web de ~60%'],
|
|
||||||
},
|
|
||||||
tags: ['browser', 'adblock', 'advertising', 'green', 'referrer'],
|
|
||||||
},
|
|
||||||
// OS
|
|
||||||
elementary: {
|
|
||||||
condition: s.is.bad('pc'),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://elementary.io' },
|
|
||||||
text: {
|
|
||||||
en: ['Elementary', 'A fast and open replacement for Windows and MacOS'],
|
|
||||||
fr: ['Elementary', 'Un remplaçant rapide, élégant et libre à Windows et MacOS'],
|
|
||||||
},
|
|
||||||
tags: ['system', 'elementary', 'windows', 'linux', 'mac'],
|
|
||||||
},
|
|
||||||
mageia: {
|
|
||||||
condition: s.is.bad('pc'),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://www.mageia.org' },
|
|
||||||
text: {
|
|
||||||
en: ['Mageia', 'Easy to use, user-friendly, stable and efficient linux'],
|
|
||||||
fr: ['Mageia', 'Un linux facile d’utilisation, convivial, stable et efficace'],
|
|
||||||
},
|
|
||||||
tags: ['system', 'mageia', 'windows', 'linux', 'mac'],
|
|
||||||
},
|
|
||||||
ubuntu: {
|
|
||||||
condition: s.is.bad('win10'),
|
|
||||||
colors: '#e95420,#ffffff,#ffffff,#000000,#5E2750,#cccccc',
|
|
||||||
img: 'img/bg/ubuntu.png',
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: {
|
|
||||||
en: 'https://www.ubuntu.com/desktop',
|
|
||||||
fr: 'http://ubuntu-fr.org',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
en: ['Your Windows feeds on your data', 'Here’s an alternative'],
|
|
||||||
fr: ['Ce Windows pompe tes données', 'Voici une alternative'],
|
|
||||||
},
|
|
||||||
tags: ['system', 'ubuntu', 'windows', 'linux', 'mac'],
|
|
||||||
},
|
|
||||||
win10: {
|
|
||||||
condition: s.is.bad('win10'),
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
link: {
|
|
||||||
en: 'https://fix10.isleaked.com',
|
|
||||||
fr: 'https://www.cnil.fr/fr/reglez-les-parametres-vie-privee-de-windows-10',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
en: ['Your Windows is watching you', 'Here is how to blind it'],
|
|
||||||
fr: ['Ton Windows te regarde', 'Voici comment l’aveugler'],
|
|
||||||
},
|
|
||||||
tags: ['system', 'microsoft', 'windows'],
|
|
||||||
},
|
|
||||||
sense3: {
|
|
||||||
condition: false,
|
|
||||||
format: ['png', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://sense3.org' },
|
|
||||||
text: {
|
|
||||||
en: ['This is not an ad', ' (nor a pipe)'],
|
|
||||||
fr: ['Ceci n’est pas une pub', '(ni une pipe)'],
|
|
||||||
},
|
|
||||||
tags: ['adblock', 'advertising', 'google'],
|
|
||||||
},
|
|
||||||
sense3Fork: {
|
|
||||||
condition: false,
|
|
||||||
format: ['txt', '300x250'],
|
|
||||||
link: { xx: 'https://framagit.org/josephk/sense3' },
|
|
||||||
text: {
|
|
||||||
en: ['Fork me', 'I’m famous :P'],
|
|
||||||
fr: ['Fork me', 'I’m famous :P'],
|
|
||||||
},
|
|
||||||
tags: ['adblock', 'advertising', 'google'],
|
|
||||||
},
|
|
||||||
// Art
|
|
||||||
vangogh: {
|
|
||||||
condition: true,
|
|
||||||
format: ['jpg', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://commons.wikimedia.org/wiki/File:VanGogh-starry_night.jpg' },
|
|
||||||
text: {
|
|
||||||
en: ['Starry night', 'Vincent van Gogh - Public Domain'],
|
|
||||||
fr: ['Nuit étoilée', 'Vincent van Gogh - Domaine Public'],
|
|
||||||
},
|
|
||||||
tags: ['art', 'vangogh', 'painting', 'france'],
|
|
||||||
},
|
|
||||||
patturaani: {
|
|
||||||
condition: true,
|
|
||||||
format: ['jpg', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://commons.wikimedia.org/wiki/File:Ganapathy_-_Wedding.jpg' },
|
|
||||||
text: { en: ['Ganaphathy Wedding', 'Patturaani - CC By-SA'] },
|
|
||||||
tags: ['art', 'patturaani', 'painting', 'india', 'ganesha'],
|
|
||||||
},
|
|
||||||
hals: {
|
|
||||||
condition: true,
|
|
||||||
format: ['jpg', '300x250', '728x90'],
|
|
||||||
link: { xx: 'https://commons.wikimedia.org/wiki/File:Frans_Hals_-_Luitspelende_nar.jpg' },
|
|
||||||
text: {
|
|
||||||
en: ['Buffoon playing a lute', 'Frans Hals - Public Domain'],
|
|
||||||
fr: ['Boufon au luth', 'Frans Hals - Domaine Public'],
|
|
||||||
},
|
|
||||||
tags: ['art', 'painting', 'netherlands', 'hals'],
|
|
||||||
},
|
|
||||||
chaplin: {
|
|
||||||
condition: true,
|
|
||||||
format: ['mp4', '300x250'],
|
|
||||||
link: { xx: 'https://commons.wikimedia.org/wiki/File:The_Kid_(1921).webm' },
|
|
||||||
text: {
|
|
||||||
en: ['The Kid', 'Charlie Chaplin - Public Domain'],
|
|
||||||
fr: ['Le Kid', 'Charlie Chaplin - Domaine Public'],
|
|
||||||
},
|
|
||||||
tags: ['art', 'cinema', 'chaplin', 'movie'],
|
|
||||||
},
|
|
||||||
wikipedia: {
|
|
||||||
condition: true,
|
|
||||||
format: ['txt', '300x250', '728x90'],
|
|
||||||
img: 'img/bg/wikipedia.png',
|
|
||||||
link: {
|
|
||||||
en: 'https://en.wikipedia.org',
|
|
||||||
fr: 'https://fr.wikipedia.org',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
en: ['Contribute to Wikipedia', 'The free encyclopedia that anyone can edit'],
|
|
||||||
fr: ['Contribuez à Wikipédia', 'L’encyclopédie libre que chacun peut améliorer'],
|
|
||||||
},
|
|
||||||
tags: ['generic', 'wikipedia', 'encyclopedia'],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
/** Sense3 ****************************************************** */
|
|
||||||
init() {
|
|
||||||
if (s.is.inframe()) {
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
s.data();
|
|
||||||
s.selectBanner();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
s.addIframes();
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
s.showGenerator();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
addIframes() {
|
|
||||||
const scripts = document.getElementsByTagName('script');
|
|
||||||
let j = 0;
|
|
||||||
for (let i = 0; i < scripts.length; i += 1) {
|
|
||||||
if (scripts[i].getAttribute('data-sense3')) {
|
|
||||||
let [format, tags, colors, id] = scripts[i].getAttribute('data-sense3').split(';');
|
|
||||||
format = format || '300x250';
|
|
||||||
tags = tags || '';
|
|
||||||
colors = colors || defaultColors.join().toLowerCase();
|
|
||||||
id = id || '';
|
|
||||||
const [w, h] = format.split('x');
|
|
||||||
|
|
||||||
sense3Baseurl = s.l(scripts[i].getAttribute('src').replace('sense3.js', './'));
|
|
||||||
const referrer = (document.referrer.split('/')[2] !== undefined) ? document.referrer.split('/')[2] : '';
|
|
||||||
|
|
||||||
const iframe = document.createElement('iframe');
|
|
||||||
iframe.width = w; iframe.height = h;
|
|
||||||
iframe.frameborder = '0'; iframe.marginwidth = '0'; iframe.marginheight = '0';
|
|
||||||
iframe.vspace = '0'; iframe.hspace = '0';
|
|
||||||
iframe.allowtransparency = 'true'; iframe.scrolling = 'no';
|
|
||||||
iframe.style = `width: ${w}px; height: ${h}px; border: none;`;
|
|
||||||
iframe.src = `${sense3Baseurl}sense3.html#${s.pageLang()};${tags};${colors};${id};${referrer}`;
|
|
||||||
iframe.className = 'sense3';
|
|
||||||
iframe.id = `sense3_${j}`;
|
|
||||||
if (!document.getElementById(`sense3_${j}`)) {
|
|
||||||
scripts[i].parentNode.insertBefore(iframe, scripts[i].nextSibling);
|
|
||||||
}
|
|
||||||
j += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
selectBanner() {
|
|
||||||
const w = window.innerWidth;
|
|
||||||
const h = window.innerHeight;
|
|
||||||
|
|
||||||
// Import params from hash
|
|
||||||
let lg = ''; let tags = ''; let id; let colors;
|
|
||||||
[lg, tags, colors, id] = window.location.hash.replace(/^#/, '').split(';');
|
|
||||||
document.getElementsByTagName('html')[0].setAttribute('lang', lg);
|
|
||||||
|
|
||||||
if (id !== 'showInfos') {
|
|
||||||
// List contextual banners
|
|
||||||
const banner = []; let i = 0;
|
|
||||||
Object.keys(d).forEach((k) => {
|
|
||||||
if (d[k].condition &&
|
|
||||||
d[k].format.indexOf(`${w}x${h}`) !== -1
|
|
||||||
&& s.is.inTags(d[k].tags, tags.split(','))) {
|
|
||||||
banner[i] = k;
|
|
||||||
i += 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// Choose a random banner or 'vangogh'
|
|
||||||
if (id === '') {
|
|
||||||
id = (banner.length !== 0) ? banner[Math.floor(Math.random() * (banner.length))] : 'vangogh';
|
|
||||||
}
|
|
||||||
|
|
||||||
s.showBanner(id, lg, w, h);
|
|
||||||
|
|
||||||
// Add style if exist in params or in data{}
|
|
||||||
colors = d[id].colors || colors;
|
|
||||||
const img = d[id].img || '';
|
|
||||||
s.customize(colors, img);
|
|
||||||
} else {
|
|
||||||
s.showInfos(lg);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
showBanner(id, lg, w, h) {
|
|
||||||
if (d[id] !== undefined) {
|
|
||||||
const type = d[id].format[0];
|
|
||||||
const llg = (d[id].link.xx !== undefined) ? 'xx' : lg;
|
|
||||||
const tlg = (d[id].text[lg] === undefined) ? 'en' : lg; // replace 'en' by browser default lang (if text is avalaible)
|
|
||||||
|
|
||||||
// Is a random sentense ?
|
|
||||||
let t1 = ''; let t2 = '';
|
|
||||||
if (typeof d[id].text[tlg][0] === 'string') {
|
|
||||||
[t1, t2] = d[id].text[tlg];
|
|
||||||
} else if (d[id].text[tlg][0].constructor.name === 'Array') {
|
|
||||||
const random = Math.floor(Math.random() * d[id].text[tlg].length);
|
|
||||||
[t1, t2] = d[id].text[tlg][random];
|
|
||||||
}
|
|
||||||
|
|
||||||
let html = '';
|
|
||||||
// Image
|
|
||||||
if (/(png|jpg|gif)/.test(type)) {
|
|
||||||
html = `
|
|
||||||
<a id="img" href="${d[id].link[llg]}" target="_blank" title="${d[id].text[tlg].join(' - ')}">
|
|
||||||
<img alt="" src="img/${id}-${w}_${h}-${llg}.${type}"
|
|
||||||
onerror="this.style='display:none;';document.getElementById('text').style='';" />
|
|
||||||
</a>
|
|
||||||
<a id="text" href="${d[id].link[llg]}" target="_blank" style="display:none;">
|
|
||||||
<h1>${t1}</h1>
|
|
||||||
<p>${d[id].link[llg].split('/')[2]}</p>
|
|
||||||
<h2>${t2}</h2>
|
|
||||||
<span class="button" aria-hidden="true">➤</span>
|
|
||||||
</a>`;
|
|
||||||
|
|
||||||
// Video
|
|
||||||
} else if (/(mp4|webm)/.test(type)) {
|
|
||||||
html = `
|
|
||||||
<a id="video" href="${d[id].link[llg]}" target="_blank">
|
|
||||||
<video autoplay="" muted loop="loop" preload="none">
|
|
||||||
<source src="img/${id}-${w}_${h}-${llg}.${type}" type="video/${type}"/>
|
|
||||||
<h1>${t1}</h1>
|
|
||||||
<p>${d[id].link[llg].split('/')[2]}</p>
|
|
||||||
<h2>${t2}</h2>
|
|
||||||
<span class="button" aria-hidden="true">➤</span>
|
|
||||||
</video>
|
|
||||||
</a>`;
|
|
||||||
// Text
|
|
||||||
} else {
|
|
||||||
html = `
|
|
||||||
<a id="text" href="${d[id].link[llg]}" target="_blank">
|
|
||||||
<h1>${t1}</h1>
|
|
||||||
<p>${d[id].link[llg].split('/')[2]}</p>
|
|
||||||
<h2>${t2}</h2>
|
|
||||||
<span class="button" aria-hidden="true">➤</span>
|
|
||||||
</a>`;
|
|
||||||
}
|
|
||||||
html = `${html}
|
|
||||||
<a id="about" href="https://sense3.org" target="_blank" title="${i18n[lg].notad}">
|
|
||||||
<img src="frameicon.png" alt="s3" />
|
|
||||||
</a>
|
|
||||||
<a id="close" href="#" onclick="document.getElementsByTagName('body')[0].className = 'hidden'; return false;" title="${i18n[lg].close}">
|
|
||||||
<i aria-hidden="true">×</i>
|
|
||||||
<span class="sr-only">${i18n[lg].close}</span>
|
|
||||||
</a>`;
|
|
||||||
document.getElementsByTagName('body')[0].innerHTML = html;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
customize(colors, img) {
|
|
||||||
const [bg, h1, h2, p, btn, bdr] = colors.replace(' ', '').toLowerCase().split(',');
|
|
||||||
const bgImg = (img !== '') ? `background-image: url(${img});` : '';
|
|
||||||
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.innerHTML = `
|
|
||||||
#text {
|
|
||||||
background-color: ${bg.substr(0, 7)};
|
|
||||||
border-color: ${bdr.substr(0, 7)};
|
|
||||||
${bgImg}
|
|
||||||
}
|
|
||||||
|
|
||||||
#text h1 {
|
|
||||||
color: ${h1.substr(0, 7)};
|
|
||||||
}
|
|
||||||
|
|
||||||
#text h2 {
|
|
||||||
color: ${h2.substr(0, 7)};
|
|
||||||
}
|
|
||||||
|
|
||||||
#text p {
|
|
||||||
color: ${p.substr(0, 7)};
|
|
||||||
}
|
|
||||||
|
|
||||||
#text .button {
|
|
||||||
background: ${btn.substr(0, 7)};
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#text ~ #about,
|
|
||||||
#text ~ #close {
|
|
||||||
background: ${bdr.substr(0, 7)};
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
document.getElementsByTagName('head')[0].appendChild(style);
|
|
||||||
},
|
|
||||||
|
|
||||||
showInfos(lg) {
|
|
||||||
const browsers = [
|
|
||||||
'android', 'chrome', 'chromium', 'firefox', 'ios',
|
|
||||||
'kMeleon', 'msedge', 'msie', 'opera', 'qupzilla',
|
|
||||||
'safari', 'sailfish', 'samsungBrowser', 'seamonkey',
|
|
||||||
'sleipnir', 'tizen', 'vivaldi',
|
|
||||||
];
|
|
||||||
const os = [
|
|
||||||
'android', 'blackberry', 'chromeos', 'firefoxos',
|
|
||||||
'ios', 'linux', 'mac', 'tizen', 'webos',
|
|
||||||
'windowsphone', 'windows',
|
|
||||||
];
|
|
||||||
const params = window.location.hash.replace(/#/, '').split(';');
|
|
||||||
const referrer = params[(params.length - 1)];
|
|
||||||
const img = {
|
|
||||||
os: (os.indexOf(bowser.osname.toLowerCase()) !== -1) ? `${bowser.osname.toLowerCase()}.png` : 'unknown.png',
|
|
||||||
browser: (browsers.indexOf(bowser.name.toLowerCase()) !== -1) ? `${bowser.name.toLowerCase()}.png` : 'unknown.png',
|
|
||||||
adblock: s.is.adblock() ? 'ublock-on.png' : 'ublock-off.png',
|
|
||||||
};
|
|
||||||
|
|
||||||
const html = `
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>${i18n[lg].os}</th>
|
|
||||||
<th>${i18n[lg].browser}</th>
|
|
||||||
<th>${i18n[lg].adblock}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><img src="img/icons/os/${img.os}" alt="" /><br>${bowser.osname} ${(bowser.osversion || '')}</td>
|
|
||||||
<td><img src="img/icons/browsers/${img.browser}" alt="" /><br>${bowser.name} ${(bowser.version || '')}</td>
|
|
||||||
<td><img src="img/icons/ublock/${img.adblock}" alt="" /><br>${(s.is.adblock() ? i18n[lg].enabled : i18n[lg].disabled)}</td>
|
|
||||||
<tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th><label for="ua">${i18n[lg].ua}</label></th>
|
|
||||||
<td>
|
|
||||||
<input type="text" class="form-control" id="ua" value="${window.navigator.userAgent}" readonly>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th><label for="referrer">${i18n[lg].referrer}</label></th>
|
|
||||||
<td>
|
|
||||||
<input type="text" class="form-control" id="referrer" value="${referrer}" readonly>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>`;
|
|
||||||
document.getElementsByTagName('body')[0].innerHTML = html;
|
|
||||||
},
|
|
||||||
|
|
||||||
showGenerator() {
|
|
||||||
const scripts = document.getElementsByTagName('script');
|
|
||||||
for (let i = 0; i < scripts.length; i += 1) {
|
|
||||||
if (scripts[i].getAttribute('data-sense3-generator')) {
|
|
||||||
sense3Baseurl = s.l(scripts[i].getAttribute('src').replace('sense3.js', './'));
|
|
||||||
const lg = s.pageLang();
|
|
||||||
s.data();
|
|
||||||
const tags = s.list('tags'); const ids = s.list('ids');
|
|
||||||
let htmlTags = ''; let htmlIds = '';
|
|
||||||
Object.keys(tags[0]).forEach((k) => {
|
|
||||||
htmlTags = `${htmlTags}
|
|
||||||
<label class="col-xs-6 col-sm-4 col-md-2 btn-xs btn-default">
|
|
||||||
<input type="checkbox" value="${k}"> ${k} <span class="badge">${tags[0][k]}</span>
|
|
||||||
</label>`;
|
|
||||||
});
|
|
||||||
for (let j = 0; j < ids.length; j += 1) {
|
|
||||||
htmlIds = `${htmlIds}
|
|
||||||
<option value="${ids[j]}">${ids[j]}</option>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const html = `
|
|
||||||
<form class="form-horizontal" id="sense3_generator" onsubmit="document.getElementById('sense3_code').className = ''; sense3Generate(); return false;">
|
|
||||||
<input type="hidden" id="sense3Baseurl" value="${sense3Baseurl}">
|
|
||||||
<input type="hidden" id="sense3DefaultColors" value="${defaultColors.join().toLowerCase()}">
|
|
||||||
<fieldset id="banner">
|
|
||||||
<legend>${i18n[lg].banner}</legend>
|
|
||||||
<p class="alert alert-info small">${i18n[lg].bannerHelp}</p>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="format" class="col-sm-4 control-label">${i18n[lg].format}</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<select id="format" class="form-control">
|
|
||||||
<option value="728x90">${i18n[lg].leaderboard}</option>
|
|
||||||
<option value="300x250">${i18n[lg].medium}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="force" class="col-sm-4 control-label">${i18n[lg].fbanner}</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<select id="force" class="form-control" onChange="document.getElementById('tags').style = (this.value !== '') ? 'display: none;' : '';">
|
|
||||||
<option value="">${i18n[lg].none}</option>
|
|
||||||
${htmlIds}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset id="tags">
|
|
||||||
<legend>${i18n[lg].tags}</legend>
|
|
||||||
<p class="alert alert-info small">${i18n[lg].tagsHelp}</p>
|
|
||||||
${htmlTags}
|
|
||||||
</fieldset>
|
|
||||||
<fieldset id="colors">
|
|
||||||
<legend>${i18n[lg].colors}</legend>
|
|
||||||
<p class="alert alert-info small">${i18n[lg].colorsHelp}</p>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="bg" class="col-sm-4 control-label">${i18n[lg].background}</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<input id="bg" value="${defaultColors[0].toLowerCase()}" class="form-control" type="color">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="h1" class="col-sm-4 control-label">${i18n[lg].text1}</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<input id="h1" value="${defaultColors[1].toLowerCase()}" class="form-control" type="color">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="h2" class="col-sm-4 control-label">${i18n[lg].text2}</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<input id="h2" value="${defaultColors[2].toLowerCase()}" class="form-control" type="color">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="p" class="col-sm-4 control-label">${i18n[lg].link}</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<input id="p" value="${defaultColors[3].toLowerCase()}" class="form-control" type="color">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="btn" class="col-sm-4 control-label">${i18n[lg].button}</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<input id="btn" value="${defaultColors[4].toLowerCase()}" class="form-control" type="color">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="bdr" class="col-sm-4 control-label">${i18n[lg].border}</label>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<input id="bdr" value="${defaultColors[5].toLowerCase()}" class="form-control" type="color">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<div id="sense3_code" class="hidden">
|
|
||||||
<div id="preview" class="text-center"></div>
|
|
||||||
<pre style="max-width:600px;margin:10px auto;"><code></code></pre>
|
|
||||||
</div>
|
|
||||||
<p class="text-right"><button class="btn btn-primary" type="submit">${i18n[lg].generate}</button></p>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.innerHTML = html;
|
|
||||||
div.id = 'sense3_generator';
|
|
||||||
if (!document.getElementById('sense3_generator')) {
|
|
||||||
scripts[i].parentNode.insertBefore(div, scripts[i].nextSibling);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
list(type) {
|
|
||||||
let list = []; const count = {};
|
|
||||||
switch (type) {
|
|
||||||
case 'tags':
|
|
||||||
Object.keys(d).forEach((k) => {
|
|
||||||
for (let i = 0; i < d[k].tags.length; i += 1) {
|
|
||||||
list.push(d[k].tags[i]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
list.sort();
|
|
||||||
list.forEach((x) => { count[x] = (count[x] || 0) + 1; });
|
|
||||||
list = [];
|
|
||||||
list.push(count);
|
|
||||||
break;
|
|
||||||
case 'ids':
|
|
||||||
Object.keys(d).forEach((k) => {
|
|
||||||
list.push(k);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// no default
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
},
|
|
||||||
|
|
||||||
/** Generic fonctions ******************************************* */
|
|
||||||
l(href) {
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = href;
|
|
||||||
return [link.protocol, '//', link.host, link.pathname, link.search, link.hash].join('');
|
|
||||||
},
|
|
||||||
|
|
||||||
pageLang() {
|
|
||||||
let lang = '';
|
|
||||||
const html = document.getElementsByTagName('html');
|
|
||||||
const meta = document.getElementsByTagName('script');
|
|
||||||
|
|
||||||
if (html[0].getAttribute('lang')) {
|
|
||||||
lang = html[0].getAttribute('lang');
|
|
||||||
} else if (html[0].getAttribute('locale')) {
|
|
||||||
lang = html[0].getAttribute('locale');
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < meta.length; i += 1) {
|
|
||||||
if ((meta[i].getAttribute('http-equiv') && meta[i].getAttribute('content') &&
|
|
||||||
meta[i].getAttribute('http-equiv').indexOf('Language') > -1) ||
|
|
||||||
(meta[i].getAttribute('property') && meta[i].getAttribute('content')
|
|
||||||
&& meta[i].getAttribute('property').indexOf('locale') > -1)) {
|
|
||||||
lang = meta[i].getAttribute('content');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
lang = (lang !== '') ? lang : 'en';
|
|
||||||
|
|
||||||
return lang.substr(0, 2).toLowerCase();
|
|
||||||
},
|
|
||||||
|
|
||||||
/** Boolean fonctions ******************************************* */
|
|
||||||
is: {
|
|
||||||
inframe() {
|
|
||||||
return (window.top.location !== window.self.document.location);
|
|
||||||
},
|
|
||||||
|
|
||||||
DNT() {
|
|
||||||
return (navigator.doNotTrack === 'yes' ||
|
|
||||||
navigator.doNotTrack === '1' || window.doNotTrack === '1');
|
|
||||||
},
|
|
||||||
|
|
||||||
lang(lg) {
|
|
||||||
const userLang = navigator.languages ||
|
|
||||||
[root.navigator.language || root.navigator.userLanguage];
|
|
||||||
for (let i = 0; i < userLang.length; i += 1) {
|
|
||||||
if (userLang[i].substring(0, 2).toLowerCase() === lg) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
ref(url) {
|
|
||||||
const params = window.location.hash.replace(/#/, '').split(';');
|
|
||||||
return (params[(params.length - 1)] === url);
|
|
||||||
},
|
|
||||||
|
|
||||||
adblock() {
|
|
||||||
const spoof = document.getElementById('bottomAd');
|
|
||||||
|
|
||||||
let blockedSpoof = false;
|
|
||||||
|
|
||||||
if (!spoof) {
|
|
||||||
blockedSpoof = true;
|
|
||||||
} else if (spoof.style && spoof.style.display === 'none') {
|
|
||||||
blockedSpoof = true;
|
|
||||||
} else if ((typeof spoof.clientHeight) !== 'undefined' && spoof.clientHeight === 0) {
|
|
||||||
blockedSpoof = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return blockedSpoof;
|
|
||||||
},
|
|
||||||
|
|
||||||
inTags(t1, t2) {
|
|
||||||
if (t2[0] === '') { return true; }
|
|
||||||
|
|
||||||
for (let i = 0; i < t2.length; i += 1) {
|
|
||||||
if (t1.indexOf(t2[i].toLowerCase().replace(' ', '')) !== -1) { return true; }
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shortcuts for conditions
|
|
||||||
bad(target) {
|
|
||||||
let b = false;
|
|
||||||
switch (target) {
|
|
||||||
// Browsers
|
|
||||||
case 'browser':
|
|
||||||
b = s.is.bad('chrome') || bowser.safari ||
|
|
||||||
bowser.opera || bowser.msie || bowser.msedge;
|
|
||||||
break;
|
|
||||||
case 'chrome':
|
|
||||||
b = bowser.chrome || bowser.chromium;
|
|
||||||
break;
|
|
||||||
// OS
|
|
||||||
case 'os':
|
|
||||||
b = s.is.bad('pc') || s.is.bad('mobile');
|
|
||||||
break;
|
|
||||||
case 'pc':
|
|
||||||
b = bowser.mac || bowser.windows;
|
|
||||||
break;
|
|
||||||
case 'mobile':
|
|
||||||
b = bowser.ios;
|
|
||||||
break;
|
|
||||||
case 'win10':
|
|
||||||
b = bowser.windows && bowser.check({ windows: '10' });
|
|
||||||
break;
|
|
||||||
// Referers
|
|
||||||
case 'search':
|
|
||||||
b = s.is.ref('google.com') || s.is.ref('bing.com') ||
|
|
||||||
s.is.ref('yahoo.com');
|
|
||||||
break;
|
|
||||||
case 'social':
|
|
||||||
b = s.is.bad('facebook') || s.is.bad('twitter');
|
|
||||||
break;
|
|
||||||
case 'video':
|
|
||||||
b = s.is.bad('youtube') || s.is.ref('dailymotion.com') || s.is.ref('vimeo.com');
|
|
||||||
break;
|
|
||||||
// GAFAM
|
|
||||||
case 'gafam':
|
|
||||||
b = s.is.bad('google') || s.is.bad('apple') || s.is.bad('facebook') ||
|
|
||||||
s.is.bad('amazon') || s.is.bad('microsoft');
|
|
||||||
break;
|
|
||||||
case 'google':
|
|
||||||
b = s.is.bad('chrome') || s.is.ref('google.com')
|
|
||||||
|| s.is.ref('gmail.com') || s.is.bad('youtube');
|
|
||||||
break;
|
|
||||||
case 'apple':
|
|
||||||
b = bowser.ios || bowser.safari;
|
|
||||||
break;
|
|
||||||
case 'facebook':
|
|
||||||
b = s.is.ref('facebook.com'); // TODO add facebook link reducer
|
|
||||||
break;
|
|
||||||
case 'amazon':
|
|
||||||
b = s.is.ref('amazon.com');
|
|
||||||
break;
|
|
||||||
case 'microsoft':
|
|
||||||
b = bowser.windows || bowser.msie || bowser.msedge ||
|
|
||||||
s.is.ref('bing.com');
|
|
||||||
break;
|
|
||||||
case 'twitter':
|
|
||||||
b = s.is.ref('twitter.com') || s.is.ref('t.co');
|
|
||||||
break;
|
|
||||||
case 'youtube':
|
|
||||||
b = s.is.ref('youtube.com') || s.is.ref('youtu.be');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
// no default
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return b;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
s.init();
|
|
||||||
}());
|
|
||||||
|
|
||||||
function sense3Generate() { // eslint-disable-line no-unused-vars
|
|
||||||
const sense3Baseurl = $('#sense3Baseurl').val() || '';
|
|
||||||
const sense3DefaultColors = $('#sense3DefaultColors').val() || '';
|
|
||||||
const force = $('#force').val() || '';
|
|
||||||
const tags = []; const colors = [];
|
|
||||||
if (force === '') {
|
|
||||||
$('#tags input:checked').each((i) => {
|
|
||||||
tags.push($('#tags input:checked').eq(i).val());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
$('#colors input').each((i) => {
|
|
||||||
colors.push($('#colors input').eq(i).val());
|
|
||||||
});
|
|
||||||
|
|
||||||
let params = $('#format').val();
|
|
||||||
params = `${params};${tags.join()};${colors.join()};${force}`;
|
|
||||||
params = params.replace(sense3DefaultColors, '').replace(/(;+)$/, '');
|
|
||||||
|
|
||||||
const code = `<script src="${sense3Baseurl}sense3.js" data-sense3="${params}"></script>`;
|
|
||||||
$('#sense3_code code').text(code);
|
|
||||||
$('#sense3_code #preview').html(code);
|
|
||||||
}
|
|
BIN
img/agpl.png
Before Width: | Height: | Size: 8.3 KiB |
After Width: | Height: | Size: 40 KiB |
BIN
img/antopie.png
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 100 KiB |
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 7.3 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 8.0 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 8.1 KiB |
After Width: | Height: | Size: 9.0 KiB |