ajout d'une fonctionnalité de dépêche par API

2026-03-30 19:52:21 +02:00 · 2026-03-30 19:52:21 +02:00 · 91f1af02d7
parent 3ebec7bec2
commit 91f1af02d7
1 changed files with 148 additions and 0 deletions
--- a/depeches.html
+++ b/depeches.html
@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>dépêches — eweng.space</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>☆</text></svg>">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'IM Fell English', serif;
+            font-size: 20px;
+        }
+
+        .fenetre {
+            max-width: 600px;
+            border: 1px solid black;
+            padding: 0.3rem 1.5rem 0 1.5rem;
+            padding-bottom: 0;
+            margin-top: 0px;
+            position: relative;
+            overflow-wrap: break-word;
+        }
+        .fenetre-nom {
+            margin-bottom: 1px;
+            margin-left: 2px;
+        }
+        .fenetre-contenu {
+            padding: 0 1rem 1.5rem 1rem;
+            min-width: 0;
+        }
+
+        .retour {
+            font-family: 'IM Fell English', serif;
+            font-size: 20px;
+            color: inherit;
+            display: inline-block;
+            margin-bottom: 1px;
+            margin-right: 0.4rem;
+            text-decoration: none;
+        }
+
+        /* ── feed ── */
+        .feed {
+            margin-top: 1.2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0;
+        }
+
+        .depeche {
+            border-top: 1px solid #ddd;
+            padding: 1rem 0;
+        }
+        .depeche:last-child {
+            border-bottom: 1px solid #ddd;
+        }
+
+        .depeche-date {
+            font-size: 0.75rem;
+            font-style: italic;
+            color: #999;
+            margin-bottom: 0.4rem;
+        }
+
+        .depeche-texte {
+            line-height: 1.6;
+            color: #111;
+        }
+
+        .depeche-image {
+            margin-top: 0.8rem;
+            max-width: 100%;
+            border: 1px solid #ddd;
+            display: block;
+        }
+
+        .chargement {
+            font-style: italic;
+            color: #aaa;
+            padding: 1rem 0;
+        }
+
+        @media (max-width: 600px) {
+            body { font-size: 17px; }
+        }
+    </style>
+</head>
+<body>
+
+<div>
+    <a href="index.html" class="retour">←</a><span class="fenetre-nom" id="titre-nav">eweng.space &#9734;</span>
+</div>
+
+<div class="fenetre">
+    <div class="fenetre-contenu">
+        <h1>dépêches</h1>
+        <p>feed actif de ce que je pense.</p>
+
+        <div class="feed" id="feed">
+            <p class="chargement">chargement…</p>
+        </div>
+    </div>
+</div>
+
+<script>
+fetch('/api/depeches')
+    .then(r => r.json())
+    .then(depeches => {
+        const feed = document.getElementById('feed');
+        feed.innerHTML = '';
+
+        if (depeches.length === 0) {
+            feed.innerHTML = '<p class="chargement">aucune dépêche pour l\'instant.</p>';
+            return;
+        }
+
+        depeches.forEach(d => {
+            const el = document.createElement('div');
+            el.className = 'depeche';
+
+            const img = d.image
+                ? `<img src="${d.image}" class="depeche-image" alt="">`
+                : '';
+
+            el.innerHTML = `
+                <div class="depeche-date">${d.date}</div>
+                <div class="depeche-texte">${d.texte}</div>
+                ${img}
+            `;
+
+            feed.appendChild(el);
+        });
+    })
+    .catch(() => {
+        document.getElementById('feed').innerHTML =
+            '<p class="chargement">impossible de charger les dépêches.</p>';
+    });
+
+const el = document.getElementById('titre-nav');
+el.innerHTML = el.textContent.split('').map(c =>
+    c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
+).join('');
+</script>
+</body>
+</html>