made with openAI 4096 during a cocoding session with Fred
This commit is contained in:
parent
3eba17427d
commit
11f8276c68
|
@ -0,0 +1,108 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>_G1VOEU_ WELL</title>
|
||||
<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>Gifs Animés</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 = [];
|
||||
|
||||
// Récupérer les données
|
||||
fetch('_LIBRA_/ipns/_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);
|
||||
// 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 output = '';
|
||||
|
||||
// Générer le HTML
|
||||
pageGifs.forEach((gif, i) => {
|
||||
output += `
|
||||
<a href="_LIBRA_${pageUrls[i]}">
|
||||
<img src="_LIBRA_${gif}" />
|
||||
</a>
|
||||
`;
|
||||
});
|
||||
|
||||
// Ajouter le HTML
|
||||
gifContainer.innerHTML = output;
|
||||
}
|
||||
|
||||
// Écouter les évènements
|
||||
prevBtn.addEventListener('click', () => {
|
||||
pageNumber--;
|
||||
showGifs();
|
||||
});
|
||||
nextBtn.addEventListener('click', () => {
|
||||
pageNumber++;
|
||||
showGifs();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue