Commit 2fd98189 authored by  JosephK's avatar JosephK
Browse files

Examples/doc + add dio, chaplin and wikipedia + data style + banner id as parameter

parent b6b35206
Pipeline #42601 passed with stages
in 47 seconds
<!DOCTYPE html>
<html lang="fr">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, follow" />
<title>Sense3 - Exemple</title>
<title>Sense3 - Examples</title>
<link rel="icon" type="image/png" href="favicon.png">
<style>
body {
background: #eee;
}
iframe.sense3 {
border:none;
overflow:hidden;
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;
}
</style>
</head>
<body>
<div>
<div class="container">
<h1><img src="logo.png" alt="Sense3" /></h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<div style="text-align:center">
<script
type="text/javascript" src="/sense3/sense3.js"
data-sense3="728x90;;#fff,#3F7DFB,#000,#A1A1A1,#5B99FE,#F3F3F3">
</script>
</div>
<p>
Gumbo beet greens corn soko endive gumbo gourd.
Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut
pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea
lettuce kohlrabi amaranth water spinach avocado daikon napa
cabbage asparagus winter purslane kale.
Celery potato scallion desert raisin horseradish spinach carrot soko.
Lotus root water spinach fennel kombu maize bamboo shoot green
bean swiss chard seakale pumpkin onion chickpea gram corn pea.
Brussels sprout coriander water chestnut gourd swiss chard wakame
kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya
nuts nori azuki bean chickweed potato bell pepper artichoke.
</p>
<p>
Nori grape silver beet broccoli kombu beet greens fava bean
potato quandong celery.
Bunya nuts black-eyed pea prairie turnip leek lentil turnip
greens parsnip.
Sea lettuce lettuce water chestnut eggplant winter purslane
fennel azuki bean earthnut pea sierra leone bologi leek
soko chicory celtuce parsley jacama salsify.
</p>
<div style="float:left; margin-right:20px">
<script type="text/javascript" src="sense3.js" data-sense3="300x250;adblock;"></script>
</div>
<p>
Celery quandong swiss chard chicory earthnut pea potato.
Salsify taro catsear garlic gram celery bitterleaf wattle seed
collard greens nori.
Grape wattle seed kombu beetroot horseradish carrot squash
brussels sprout chard.
</p>
<p>
Pea horseradish azuki bean lettuce avocado asparagus okra.
Kohlrabi radish okra azuki bean corn fava bean mustard tigernut
jacama green bean celtuce collard greens avocado quandong fennel
gumbo black-eyed pea.
Grape silver beet watercress potato tigernut corn groundnut.
Chickweed okra pea winter purslane coriander yarrow sweet pepper
radish garlic brussels sprout groundnut summer purslane earthnut
pea tomato spring onion azuki bean gourd.
Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini
gourd winter purslane silver beet rock melon radish asparagus spinach.
</p>
<p>
Beetroot water spinach okra water chestnut ricebean pea catsear
courgette summer purslane.
Water spinach arugula pea tatsoi aubergine spring onion bush
tomato kale radicchio turnip chicory salsify pea sprouts fava bean.
Dandelion zucchini burdock yarrow chickpea dandelion sorrel
courgette turnip greens tigernut soybean radish artichoke wattle
seed endive groundnut broccoli arugula.
</p>
<p>
Soko radicchio bunya nuts gram dulse silver beet parsnip napa
cabbage lotus root sea lettuce brussels sprout cabbage.
Catsear cauliflower garbanzo yarrow salsify chicory garlic bell
pepper napa cabbage lettuce tomato kale arugula melon sierra
leone bologi rutabaga tigernut.
Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi
okra sea lettuce broccoli celery lotus root carrot winter
purslane turnip greens garlic.
Ja­cama garlic courgette coriander radicchio plantain scallion
cauliflower fava bean desert raisin spring onion chicory bunya nuts.
Sea lettuce water spinach gram fava bean leek dandelion silver
beet eggplant bush tomato.
</p>
<h2>Examples</h2>
<h3>Leaderboard (728 x 90)</h3>
<div class="text-center">
<script type="text/javascript" src="/sense3/sense3.js" data-sense3="728x90;;;vangogh"></script>
<script type="text/javascript" src="/sense3/sense3.js" data-sense3="728x90;;;wikipedia"></script>
<pre><code>&lt;script type="text/javascript" src="sense3.js" data-sense3="728x90"&gt;&lt;/script&gt;</code></pre>
</div>
<h3>Medium rectangle (350 x 200)</h3>
<div class="text-center">
<script type="text/javascript" src="sense3.js" data-sense3="300x250;;;vangogh"></script>
<script type="text/javascript" src="/sense3/sense3.js" data-sense3="300x250;;;wikipedia"></script>
<pre><code>&lt;script type="text/javascript" src="sense3.js" data-sense3="300x250"&gt;&lt;/script&gt;</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="&lt;size&gt;;&lt;keywords&gt;;&lt;colors&gt;;&lt;bannerId&gt;"</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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" src="sense3.js" data-sense3="300x250;;;dioGafam"></script>
<pre><code>data-sense3="300x250;;;dioGafam"</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 type="text/javascript" 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 type="text/javascript" src="sense3.js" data-sense3="300x250;wikipedia;#FFFFFF,#F1680D,#616161,#757575,#F1680D,#F1680D"></script>
<pre><code>data-sense3="728x90;;#FFFFFF,#F1680D,#616161,#757575,#F1680D,#F1680D"</code></pre>
</div>
<div class="text-center col-sm-6">
<h5>Framaporn</h5>
<script type="text/javascript" src="sense3.js" data-sense3="300x250;wikipedia;#FFF,#EF7896,#757776,#757575,#EF7896,#EF7896"></script>
<pre><code>data-sense3="728x90;;#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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" 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>
<!DOCTYPE html>
<html lang="fr">
<html lang="xx">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, follow" />
......@@ -9,6 +9,8 @@
margin: 0;
padding: 0;
overflow: hidden;
font-family: sans-serif;
background: #fff;
}
body.hidden {
......@@ -72,6 +74,7 @@
color: #333;
text-align: center;
background: #ccc;
line-height: 17px;
}
#about {
......
......@@ -3,6 +3,9 @@
(function sense3() {
let sense3Baseurl = '';
const avalaibleTags = [];
const avalaibleId = [];
const i18n = {
en: {
close: 'Close',
......@@ -16,14 +19,7 @@
const s = {
init() {
if (s.is.inframe()) {
s.selectBanner();
} else {
s.addIframes();
}
},
/** Banners ***************************************************** */
data() {
return {
/**
......@@ -31,7 +27,8 @@
condition: <boolean function>,
format: ['<filetype>', '<width>x<height>', '<width>x<height>'],
link: {
xx: 'https://example.com/',
xx: 'https://example.com/', (i18n managed by the website)
or
en: 'https://example.com/en/',
fr: 'https://example.com/fr/',
},
......@@ -43,6 +40,44 @@
},
*/
// Referrer
dioGafam: {
condition: (s.is.referrer('facebook.com') || s.is.referrer('google.com') ||
s.is.referrer('amazon.com') || s.is.referrer('bing.com') ||
bowser.chrome || bowser.safari || bowser.mac ||
bowser.windows || bowser.ios),
format: ['png', '300x250'],
link: { xx: 'https://degooglisons-internet.org/' },
text: { en: ['GAFAM', 'We <3 your data !'] },
tags: ['referrer', 'facebook', 'degooglisons', 'google', 'apple', 'microsoft', 'amazon', 'gafam'],
},
dioAmazon: {
condition: s.is.referrer('amazon.com'),
format: ['png', '300x250'],
link: { xx: 'https://degooglisons-internet.org/' },
text: { fr: ['Amazon', 'très méchant'] },
tags: ['referrer', 'amazon', 'degooglisons', 'gafam'],
},
dioFacebook: {
condition: s.is.referrer('facebook.com'),
format: ['png', '300x250'],
link: { xx: 'https://degooglisons-internet.org/' },
text: { en: ['Facebook', 'is watching you…'] },
tags: ['referrer', 'facebook', 'degooglisons', 'gafam'],
},
dioGoogle: {
condition: (s.is.referrer('google.com') || bowser.chrome),
format: ['png', '300x250'],
link: { xx: 'https://degooglisons-internet.org/' },
text: { en: ['Warning', 'Don’t feed the Google'] },
tags: ['referrer', 'google', 'degooglisons', 'gafam'],
},
dioMicrosoft: {
condition: (s.is.referrer('bing.com') || bowser.windows),
format: ['png', '300x250'],
link: { xx: 'https://degooglisons-internet.org/' },
text: { en: ['Microsoft', 'Do you need a backdoor ?'] },
tags: ['referrer', 'microsoft', 'degooglisons', 'gafam'],
},
diaspora: {
condition: s.is.referrer('facebook.com'),
format: ['txt', '300x250', '728x90'],
......@@ -51,19 +86,18 @@
fr: 'https://framasphere.org',
},
text: {
en: ['', ''],
fr: ['Merci d’être venu·e depuis Facebook', 'Avez-vous pensé à essayer Diaspora*'],
en: ['Thank you for coming from Facebook', 'Have you thought about trying Diaspora*?'],
fr: ['Merci d’être venu·e depuis Facebook', 'Avez-vous pensé à essayer Diaspora*&nbsp;?'],
},
tags: ['referrer', 'facebook', 'social'],
},
mastodon: {
condition: s.is.referrer('twitter.com'),
format: ['txt', '300x250', '728x90'],
link: {
xx: 'https://joinmastodon.org',
},
style: '#282c37,#9baec8,#d9e1e8,#2b90d9,#2b90d9,#9baec8',
link: { xx: 'https://joinmastodon.org' },
text: {
en: ['', ''],
en: ['Join Mastodon', 'A free social network in 500 characters'],
fr: ['Rejoignez Mastodon', 'Le réseau social libre en 500 caractères.'],
},
tags: ['referrer', 'twitter', 'social'],
......@@ -77,7 +111,7 @@
fr: 'https://www.mozilla.org/fr-FR/firefox/',
},
text: {
en: ['', ''],
en: ['Drop Google Chrome', 'Surf 2x faster with Firefox Quantum'],
fr: ['Laisser tomber Google Chrome', 'Surfez 2x plus vite avec Firefox Quantum'],
},
tags: ['browser', 'firefox', 'mozilla'],
......@@ -99,47 +133,51 @@
ublock: {
condition: !s.is.adblock(),
format: ['txt', '300x250', '728x90'],
link: {
xx: 'https://www.ublock.org/',
},
link: { xx: 'https://www.ublock.org/' },
text: {
en: ['', ''],
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'],
},
green: {
condition: (!s.is.adblock() && (s.is.referrer('lilo.org') || s.is.referrer('ecosia.org'))),
format: ['txt', '300x250', '728x90'],
link: { xx: 'https://www.ublock.org/' },
text: {
en: ['', ''],
fr: ['Un geste écolo et simple', 'Bloquer la pub réduit le trafic web de ~60%'],
},
tags: ['browser', 'adblock', 'advertising', 'green', 'referrer'],
},
// OS
elementary: {
condition: (bowser.windows || bowser.mac),
link: {
xx: 'https://elementary.io/fr/',
},
link: { xx: 'https://elementary.io' },
text: {
en: ['Elementary', ''],
fr: ['Elementary', ''],
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: (bowser.windows || bowser.mac),
link: {
xx: 'https://www.mageia.org/fr/',
},
link: { xx: 'https://www.mageia.org' },
text: {
en: ['Mageia', ''],
fr: ['', ''],
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'],
},
windows10: {
condition: (bowser.windows && bowser.check({ windows: '10' })),
link: {
en: '',
en: 'https://www.ubuntu.com/desktop',
fr: 'http://ubuntu-fr.org',
},
text: {
en: '',
fr: 'Remplacez votre Windows 10 par Ubuntu',
en: ['Ubuntu', 'Replace your Windows 10 with the most popular linux distribution'],
fr: ['Ubuntu', 'Remplacez votre Windows 10 par la distribution linux la plus populaire'],
},
tags: ['system', 'ubuntu', 'windows', 'linux', 'mac'],
},
......@@ -147,9 +185,7 @@
vangogh: {
condition: true,
format: ['jpg', '300x250', '728x90'],
link: {
xx: 'https://commons.wikimedia.org/wiki/File:VanGogh-starry_night.jpg',
},
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'],
......@@ -159,39 +195,72 @@
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'],
},
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',
},
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'],
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: ['wikipedia', 'encyclopedia'],
},
};
},
/** Sense3 ****************************************************** */
init() {
if (s.is.inframe()) {
document.addEventListener('DOMContentLoaded', () => {
s.selectBanner();
});
} else {