2023-01-07 19:40:01 +01:00
<!DOCTYPE html>
2023-01-07 17:16:34 +01:00
< html >
< head >
2023-01-08 23:51:43 +01:00
< title > _PLAYER_ : TW : _G1VOEU_< / title >
2023-02-27 15:10:21 +01:00
< meta charset = "UTF-8" >
2023-02-27 19:25:41 +01:00
< link rel = "icon" type = "image/x-icon" href = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/favicon.ico" >
< link rel = "stylesheet" href = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/jquery-ui.min.css" >
2023-02-27 18:04:44 +01:00
2023-02-27 19:25:41 +01:00
< script type = "text/javascript" src = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/requestanimationframe.polyfill.js" > < / script >
2023-02-27 18:04:44 +01:00
2023-02-27 19:25:41 +01:00
< script type = "text/javascript" src = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/jquery-1.7.2.min.js" > < / script >
< script type = "text/javascript" src = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/instascan.min.js" > < / script >
< script type = "text/javascript" src = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/html5-qrcode.min.js" > < / script >
2023-02-27 18:04:44 +01:00
2023-02-27 19:25:41 +01:00
< script type = "text/javascript" src = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/jquery-ui.0.min.js" > < / script >
< script type = "text/javascript" src = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/sphere-hacked.js" > < / script >
< script type = "text/javascript" src = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/jquery.earth-3d.js" > < / script >
< script type = "text/javascript" src = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/demo.js" > < / script >
2023-02-27 18:04:44 +01:00
< script type = "text/javascript" >
examples['simple_mars'] = function() {
$('#sphere').earth3d({
texture: '/ipfs/QmNNSAJyzVSF2m16dReYgmqmiRkKa5HMKvFUgwhbRzTYto/mars1024x1024.jpg', // texture used by G1Wish planet
dragElement: $('#locations') // where do we catch the mouse drag
});
};
< / script >
2023-01-07 17:16:34 +01:00
< style >
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
2023-02-27 15:10:21 +01:00
.slidecontainer {
width: 80%;
2023-01-07 17:16:34 +01:00
margin: 0 auto;
text-align: center;
}
.gif-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gif-container img {
margin: 10px;
max-width: 200px;
}
.slider {
width: 100%;
text-align: center;
}
.slider #prev {
float: left;
font-size: 40px;
}
.slider #next {
float: right;
font-size: 40px;
}
2023-02-27 17:19:17 +01:00
#glow-shadows.earth {
2023-03-02 23:48:10 +01:00
background: url(/ipfs/QmTVspfoaNL1BK2CR1vVNrEnwo4PfUjwdQxEt57mGJjsLX/earth-glow-shadows.png);
2023-02-27 17:19:17 +01:00
}
#glow-shadows.mars {
2023-03-02 23:48:10 +01:00
background: url(/ipfs/QmTVspfoaNL1BK2CR1vVNrEnwo4PfUjwdQxEt57mGJjsLX/mars-glow-shadows.png);
2023-02-27 17:19:17 +01:00
}
.flight {
position: absolute;
width: 24px;
height: 25px;
left: 10px;
top: 10px;
2023-03-02 23:48:10 +01:00
background: url(/ipfs/QmTVspfoaNL1BK2CR1vVNrEnwo4PfUjwdQxEt57mGJjsLX/plain.png);
2023-02-27 17:19:17 +01:00
background-size: 100% 100%;
margin-left: -12px;
margin-top: -12.5px;
cursor: pointer;
}
2023-01-07 17:16:34 +01:00
< / style >
2023-02-27 19:25:41 +01:00
< link rel = "stylesheet" href = "/ipfs/QmWbZm4dkxTQbayPLPNUKxdpMt9wjkkU3u5V2JQiCui979/index_fichiers/demo.css" >
2023-01-07 17:16:34 +01:00
< / head >
2023-02-27 15:10:21 +01:00
2023-01-07 17:16:34 +01:00
< body >
2023-02-27 15:10:21 +01:00
2023-02-27 17:19:17 +01:00
< div class = "slidecontainer" >
2023-01-08 23:51:43 +01:00
< h1 > G1_G1VOEU_< / h1 >
2023-01-07 17:16:34 +01:00
< div class = "gif-container" >
<!-- gifs -->
< / div >
< div class = "slider" >
< a href = "#" id = "prev" > < < / a >
< a href = "#" id = "next" > > < / a >
< / div >
2023-02-27 17:19:17 +01:00
< / div >
2023-02-27 15:10:21 +01:00
2023-01-07 17:16:34 +01:00
< script >
const gifContainer = document.querySelector('.gif-container');
const prevBtn = document.querySelector('#prev');
const nextBtn = document.querySelector('#next');
const pageSize = 12;
let pageNumber = 0;
let gifs = [];
let urls = [];
2023-01-07 19:00:55 +01:00
let titles = [];
let durees = [];
2023-01-07 17:16:34 +01:00
// Récupérer les données
2023-03-02 23:48:10 +01:00
fetch('_LIBRA__VOEUNS_/__PLAYER_.tiddlers.json')
2023-01-07 17:16:34 +01:00
.then(res => res.json())
.then(data => {
// Extraire les gifanime
gifs = data.map(tiddler => tiddler.gifanime);
urls = data.map(tiddler => tiddler.ipfs);
2023-01-07 19:00:55 +01:00
titles = data.map(tiddler => tiddler.title);
durees = data.map(tiddler => tiddler.duree);
2023-01-07 17:16:34 +01:00
// Afficher les gifs
showGifs();
});
// Afficher les images
function showGifs() {
let start = pageNumber * pageSize;
let end = start + pageSize;
let pageGifs = gifs.slice(start, end);
let pageUrls = urls.slice(start, end);
2023-01-07 19:00:55 +01:00
let pageTitles = titles.slice(start, end);
let pageDurees = durees.slice(start, end);
2023-01-07 17:16:34 +01:00
let output = '';
// Générer le HTML
pageGifs.forEach((gif, i) => {
output += `
2023-01-08 23:46:26 +01:00
< a href = "_LIBRA_${pageUrls[i]}" >
< img src = "_LIBRA_${gif}" title = "${pageDurees[i]} - ${pageTitles[i]}" / >
2023-01-07 17:16:34 +01:00
< / a >
`;
});
// Ajouter le HTML
gifContainer.innerHTML = output;
}
// Écouter les évènements
prevBtn.addEventListener('click', () => {
pageNumber--;
showGifs();
});
nextBtn.addEventListener('click', () => {
pageNumber++;
showGifs();
});
< / script >
2023-02-27 15:10:21 +01:00
< a target = _blank href = "https://astroport.copylaradio.com" > < img style = "position: absolute; top: 0; right: 0; border: 0;" src = "l0g0.png" alt = "Entrez par le Le Claude" > < / a >
< h1 > < a target = _blank href = "http://astroport.localhost:1234" > Astroport Ŋ1< / a > < / h1 >
2023-02-27 17:19:17 +01:00
< div class = "subtitle" > Une Planète à Vous< br > Un Internet entre Nous !< / div >
2023-02-27 15:10:21 +01:00
< div id = "demo" >
< div id = "description" >
2023-02-27 17:19:17 +01:00
< h2 > Un DON ? Flashez le QRCode !< / h2 >
2023-02-27 15:10:21 +01:00
2023-02-27 17:19:17 +01:00
Visitez TW "_PLAYER_"
< p > < a href = "https://ipfs.copylaradio.com/ipns/_ASTRONAUTENS_" >
2023-02-27 15:10:21 +01:00
< img src = "/ipfs/QmWUpjGFuF7NhpXgkrCmx8Tbu4xjcFpKhE7Bsvt6HeKYxu/g1ticket_qrcode.png" width = 65% > < / p >
< / a >
2023-02-27 17:19:17 +01:00
< h3 > Installez < a href = "https://cesium.app" > Cesium< / a > . Indiquez en commentaire vos "G1Talents" et les emails de vos amis qui partage(ront) votre dons.< / h3 >
< p > / < a href = "https://opencollective.com/monnaie-libre/projects/stiits" > LaSTI< / a > / G1Services by U + La♥BOX< / p >
2023-02-27 15:10:21 +01:00
< br >
2023-02-27 17:19:17 +01:00
< / div >
2023-02-27 15:10:21 +01:00
2023-02-27 17:19:17 +01:00
< div id = "showoff" >
2023-02-27 15:10:21 +01:00
< div id = "container" >
2023-03-02 23:48:10 +01:00
< h2 > ONE WORLD< / h2 >
2023-02-27 15:10:21 +01:00
< canvas id = "sphere" width = "400" height = "400" > < / canvas >
< div id = "glow-shadows" class = "earth" > < / div >
< canvas id = "flights" width = "400" height = "400" > < / canvas >
< div id = "locations" > < / div >
< / div >
2023-02-27 17:19:17 +01:00
< p > < a href = "https://opencollective.com/monnaie-libre/projects/coeurbox" > La♥BOX< / a > , sauvegarde, diffuse et partage vos DATA 👍 à l'abris dans "Le Claude"< / p >
2023-02-27 15:52:48 +01:00
< p > Powered by < a href = "https://github.com/papiche/Astroport.ONE" > Astroport.ONE< / a > < / p >
2023-02-27 15:10:21 +01:00
< div class = "choose_example" >
Choose example: < select id = "example" >
< option value = "simple" > Simple earth< / option >
< option value = "simple_tilted" > Simple tilted earth< / option >
< option value = "simple_mars" > Simple mars< / option >
< option value = "locations" > Earth with locations< / option >
< option value = "flights" selected > Earth with locations and flights< / option >
< / select >
< / div >
< div class = "code" >
< a href = "#" onclick = "$('#example_code').show(); $(this).hide().siblings('a').show(); return false;" > Show code< / a >
< a href = "#" style = "display: none;" onclick = "$('#example_code').hide(); $(this).hide().siblings('a').show(); return false;" > Hide code< / a >
< textarea id = "example_code" onclick = "this.focus();this.select();" > < / textarea >
< / div >
< / div >
2023-01-07 17:16:34 +01:00
< / body >
< / html >