117 lines
2.5 KiB
HTML
117 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>_PLAYER_ : TW : _G1VOEU_</title>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.container {
|
|
width: 70%;
|
|
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>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<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>
|
|
</body>
|
|
</html>
|