213 lines
7.2 KiB
HTML
213 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>_PLAYER_ : TW : _G1VOEU_</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="icon" type="image/x-icon" href="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/favicon.ico">
|
|
<link rel="stylesheet" href="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/jquery-ui.min.css">
|
|
|
|
<script type="text/javascript" src="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/requestanimationframe.polyfill.js"></script>
|
|
|
|
<script type="text/javascript" src="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/jquery-1.7.2.min.js"></script>
|
|
<script type="text/javascript" src="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/instascan.min.js"></script>
|
|
<script type="text/javascript" src="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/html5-qrcode.min.js"></script>
|
|
|
|
<script type="text/javascript" src="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/jquery-ui.0.min.js"></script>
|
|
<script type="text/javascript" src="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/sphere-hacked.js"></script>
|
|
<script type="text/javascript" src="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/jquery.earth-3d.js"></script>
|
|
<script type="text/javascript" src="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/demo.js"></script>
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.slidecontainer {
|
|
width: 80%;
|
|
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;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/ipfs/Qmak2row8wUvDUcNKYWfmkpts7a5wWtDyZpLkvZFmAP78o/index_fichiers/demo.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="slidecontainer">
|
|
<h1>G1_G1VOEU_</h1>
|
|
<div class="gif-container">
|
|
<!-- gifs -->
|
|
</div>
|
|
<div class="slider">
|
|
<a href="#" id="prev"><</a>
|
|
<a href="#" id="next">></a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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 = [];
|
|
let titles = [];
|
|
let durees = [];
|
|
|
|
// Récupérer les données
|
|
fetch('_LIBRA__VOEUNS_/_PLAYER_.tiddlers.json')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
// Extraire les gifanime
|
|
gifs = data.map(tiddler => tiddler.gifanime);
|
|
urls = data.map(tiddler => tiddler.ipfs);
|
|
titles = data.map(tiddler => tiddler.title);
|
|
durees = data.map(tiddler => tiddler.duree);
|
|
// 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);
|
|
let pageTitles = titles.slice(start, end);
|
|
let pageDurees = durees.slice(start, end);
|
|
let output = '';
|
|
|
|
// Générer le HTML
|
|
pageGifs.forEach((gif, i) => {
|
|
output += `
|
|
<a href="_LIBRA_${pageUrls[i]}">
|
|
<img src="_LIBRA_${gif}" title="${pageDurees[i]} - ${pageTitles[i]}" />
|
|
</a>
|
|
`;
|
|
});
|
|
|
|
// Ajouter le HTML
|
|
gifContainer.innerHTML = output;
|
|
}
|
|
|
|
// Écouter les évènements
|
|
prevBtn.addEventListener('click', () => {
|
|
pageNumber--;
|
|
showGifs();
|
|
});
|
|
nextBtn.addEventListener('click', () => {
|
|
pageNumber++;
|
|
showGifs();
|
|
});
|
|
</script>
|
|
|
|
|
|
<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>
|
|
|
|
<div class="subtitle">Une Planète à Vous<br>Un Internet à Nous</div>
|
|
<div id="demo">
|
|
<div id="description">
|
|
<h2>Installez <a href="https://cesium.app">Cesium</a> !</h2>
|
|
|
|
Flashez le QRCode. du TW de "fred@g1sms.fr"
|
|
<p><a href="https://ipfs.copylaradio.com/ipns/fred.g1sms.fr.localhost.copylaradio.com">
|
|
<img src="/ipfs/QmWUpjGFuF7NhpXgkrCmx8Tbu4xjcFpKhE7Bsvt6HeKYxu/g1ticket_qrcode.png" width=65%></p>
|
|
</a>
|
|
<h3>Indiquez en commentaire les emails de amis à qui vous souhaitez partager votre don.</h3>
|
|
<p>Compte hébergée par <a href="https://opencollective.com/monnaie-libre/projects/stiits">LaSTI</a> Service "G1CopierYoutube" & "G1PalPé"</p>
|
|
<br>
|
|
|
|
<h2>Scannez votre QRCode</h2>
|
|
|
|
<div style="width: 500px" id="reader"></div>
|
|
|
|
<video id="preview" style="transform: scaleX(-1);width: 220px;height: 220px;"></video>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function onScanSuccess(decodedText, decodedResult) {
|
|
// Handle on success condition with the decoded text or result.
|
|
console.log(`Scan result: ${decodedText}`, decodedResult);
|
|
alert("qrcode="+${decodedText});
|
|
|
|
$.ajax({
|
|
url: "http://astroport.localhost:1234",
|
|
data: "qrcode="+${decodedText},
|
|
type: 'GET'
|
|
});
|
|
|
|
}
|
|
|
|
var html5QrcodeScanner = new Html5QrcodeScanner(
|
|
"reader", { fps: 10, qrbox: 250 });
|
|
html5QrcodeScanner.render(onScanSuccess);
|
|
</script>
|
|
|
|
</div>
|
|
|
|
|
|
<div id="showoff">
|
|
<div id="container">
|
|
<h2>Votre Monde</h2>
|
|
<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>
|
|
|
|
<p><a href="https://opencollective.com/monnaie-libre/projects/coeurbox">♥BOX</a>, sauvegarde, diffuse et partage vos DATA 👍 à l'abris dans "Le Claude"</p>
|
|
<p>Powered by <a href="https://astroport.com">Astroport</a></p>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|