forked from STI/Astroport.ONE
282 lines
10 KiB
HTML
282 lines
10 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/QmYjUbg8NzsXxkYV5NnK2rwv38VGd5z8dhxr3zEph6qFQM/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;
|
|
top: 2%;
|
|
right: 3%;
|
|
width: 55%;
|
|
}
|
|
|
|
#green {
|
|
background: black;
|
|
position: absolute;
|
|
top: 2%;
|
|
right: 2%;
|
|
width: 45%;
|
|
}
|
|
|
|
#ainfo {
|
|
background: grey;
|
|
position: absolute;
|
|
top: 1%;
|
|
right: 1%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a href="javascript:FriendWithMe()"><img title="Connect with Me" 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>
|
|
<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="640px"></iframe>
|
|
</div>
|
|
|
|
<div id="demo">
|
|
<div id="description">
|
|
|
|
<div class="slidecontainer">
|
|
|
|
<div class="gif-container">
|
|
<!-- gifs -->
|
|
</div>
|
|
<div class="slider">
|
|
<a href="#" id="prev"><</a>
|
|
<a href="#" id="next">></a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function FriendWithMe() {
|
|
let cookies = document.cookie;
|
|
console.log(cookies);
|
|
let salt = prompt("Secret 1");
|
|
let pepper = prompt("Secret 2");
|
|
let resultUt = 'http://astroport.localhost:1234/?salt=' + salt + '&pepper=' + pepper + '&friend=_G1PUB_';
|
|
console.log(resultUt)
|
|
homeAstroportStation( resultUt,'aframe', 4000)
|
|
}
|
|
|
|
const gifContainer = document.querySelector('.gif-container');
|
|
const prevBtn = document.querySelector('#prev');
|
|
const nextBtn = document.querySelector('#next');
|
|
const pageSize = 2;
|
|
|
|
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
|
|
// <a target="aframe" href="http://127.0.0.1:8080${pageUrls[i]}">
|
|
// <a target="aframe" href="http://127.0.0.1:8080/ipns/_ASTRONAUTENS_#${pageTitles[i]}">
|
|
pageGifs.forEach((gif, i) => {
|
|
output += `
|
|
<a target="aframe" href="http://127.0.0.1:8080/ipns/_ASTRONAUTENS_#${pageTitles[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>
|
|
|
|
|
|
<h3>_PLAYER_ Ŋ1Flux</h3>
|
|
|
|
<h2>:⚡:~ <a href="https://cesium.app">Cesium </a> ~:📱:</h2>
|
|
<p>
|
|
<a target="_PLAYER_" href="http://127.0.0.1:8080/ipns/_ASTRONAUTENS_">
|
|
<img src="http://127.0.0.1:8080/ipfs/QmWUpjGFuF7NhpXgkrCmx8Tbu4xjcFpKhE7Bsvt6HeKYxu/g1ticket_qrcode.png" width=300>
|
|
</a>
|
|
</p>
|
|
<div id="astropub"><a target="gchange" href="https://data.gchange.fr/user/profile/_G1PUB_/_share">_G1PUB_</a></div>
|
|
<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="http://127.0.0.1:8080/ipns/_ASTRONAUTENS_">TW♥BOX of "_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>
|
|
|
|
</body></html>
|