From 11f8276c687fed2a2c0182a5aef1f51a4da20092 Mon Sep 17 00:00:00 2001
From: fred <support@qo-op.com>
Date: Sat, 7 Jan 2023 17:16:34 +0100
Subject: [PATCH] made with openAI 4096 during a cocoding session with Fred

---
 templates/index_gif4.html | 108 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 templates/index_gif4.html
diff --git a/templates/index_gif4.html b/templates/index_gif4.html
new file mode 100644
index 00000000..02d394e3
--- /dev/null
+++ b/templates/index_gif4.html
@@ -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">&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 = 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>
