Astroport.ONE/www/PasseportTerre/index.html

261 lines
8.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>_PLAYER_ : _G1VOEU_ : http://astroport.localhost:1234</title>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/favicon.ico">
<link rel="stylesheet" href="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/demo.css">
<link rel="stylesheet" href="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/jquery-ui.min.css">
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/requestanimationframe.polyfill.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/instascan.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/html5-qrcode.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/jquery-ui.0.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/sphere-hacked.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/jquery.earth-3d.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/world.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/index_fichiers/demo.js"></script>
<script src="http://127.0.0.1:8080/ipfs/QmRyLAbPErFY4nv56Dun1C1KBhE4wyP38ivpeV7rDFb7Fq/astro.js"></script>
<script type="text/javascript">
examples['simple_mars'] = function() {
$('#sphere').earth3d({
texture: 'http://127.0.0.1:8080/ipfs/QmNNSAJyzVSF2m16dReYgmqmiRkKa5HMKvFUgwhbRzTYto/mars1024x1024.jpg', // texture used by G1Wish planet
dragElement: $('#locations') // where do we catch the mouse drag
});
};
</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;
}
#glow-shadows.earth {
background: url(http://127.0.0.1:8080/ipfs/QmTVspfoaNL1BK2CR1vVNrEnwo4PfUjwdQxEt57mGJjsLX/earth-glow-shadows.png);
}
#glow-shadows.mars {
background: url(http://127.0.0.1:8080/ipfs/QmTVspfoaNL1BK2CR1vVNrEnwo4PfUjwdQxEt57mGJjsLX/mars-glow-shadows.png);
}
.flight {
position: absolute;
width: 24px;
height: 25px;
left: 10px;
top: 10px;
background: url(http://127.0.0.1:8080/ipfs/QmTVspfoaNL1BK2CR1vVNrEnwo4PfUjwdQxEt57mGJjsLX/plain.png);
background-size: 100% 100%;
margin-left: -12px;
margin-top: -12.5px;
cursor: pointer;
}
#yellow {
background: black;
position: absolute;
bottom: 2%;
left: 2%;
width: 60%;
}
#ainfo {
background: grey;
position: absolute;
top: 2%;
left: 2%;
}
</style>
</head>
<body>
<a href="javascript:history.go(-1)"><img style="width:40% height:40% position: absolute; top: 0; right: 0; border: 0;" src="http://127.0.0.1:8080/ipfs/QmYdWBx32dP14XcbXF7hhtDq7Uu6jFmDaRnuL5t7ARPYkW/l0g0.png" alt="BAck in Le Claude"></a>
<div id="countdown"></div>
<div class="subtitle">A Friendly Planet of Friends</div>
<div class="slidecontainer">
<div class="gif-container">
<!-- gifs -->
</div>
<div class="slider">
<a href="#" id="prev">&lt;</a>
<a href="#" id="next">&gt;</a>
</div>
</div>
<script>
const gifContainer = document.querySelector('.gif-container');
const prevBtn = document.querySelector('#prev');
const nextBtn = document.querySelector('#next');
const pageSize = 4;
let pageNumber = 0;
let gifs = [];
let urls = [];
let titles = [];
let durees = [];
// Récupérer les données
fetch('http://127.0.0.1:8080_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 target="aframe" href="http://127.0.0.1:8080${pageUrls[i]}">
<img src="http://127.0.0.1:8080${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>
<div id="demo">
<div id="description">
<h3>_PLAYER_ Ŋ1Flux</h3>
<h2>:⚡:~ <a href="https://cesium.app">Cesium </a> ~:📱:</h2>
<p>
<a target="_PLAYER_" href="https://ipfs.copylaradio.com/ipns/_ASTRONAUTENS_">
<img src="http://127.0.0.1:8080/ipfs/QmWUpjGFuF7NhpXgkrCmx8Tbu4xjcFpKhE7Bsvt6HeKYxu/g1ticket_qrcode.png" width=300>
</a>
</p>
<p>
TODO:
+ display video with overlay link to grab Tid into my TW.
+ planet map with poster (or gifanime)
+ locations = real friendŊ1flux
</p>
</div>
<div id="showoff">
<div id="container">
<h2>G1_G1VOEU_ W0rld</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 target="_PLAYER_" href="https://ipfs.copylaradio.com/ipns/_ASTRONAUTENS_">TW♥BOX "_PLAYER_"</a></p>
<p>
<br>
<br> 👍 IPFS DATA STORAGE 👍 </p>
<p>Powered by <a href="https://github.com/papiche/Astroport.ONE">Astroport.ONE</a></p>
<p>/ <a href="https://opencollective.com/monnaie-libre/projects/stiits">LaSTI</a> / <a href="https://opencollective.com/monnaie-libre/projects/coeurbox">La♥BOX</a> /
</div>
</div>
<div class="choose_example">
Choose Planet: <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="flights">Earth with locations and flights</option>
-->
<option value="locations" selected >Ŋ1 Friends</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>
<button id="ainfo" onclick="javascript:var x = document.getElementById('yellow'); if (x.style.visibility === 'hidden') {x.style.visibility = 'visible';} else {x.style.visibility = 'hidden';}">0/1</button>
<div id="yellow" >
<iframe name="aframe" id="aframe" src="_STATION_" width="100%" height="300px"></iframe>
</div>
</body></html>