✨Enhancements

docker-compose.yml

@@ -13,4 +13,6 @@ services:
     environment:
       - PROJECT_SLUG=199996  # Remplacez par le slug de votre campagne
       - REFRESH_INTERVAL=10  # En secondes
-      - PORT=2106
+      - PORT=2106
+    networks:
+      - supabase_default

public/index.html

@@ -15,7 +15,7 @@
             text-align: center;
             background-color: #2c5282;
             /* Couleur de secours si l'image ne charge pas */
-            background-image: url('background.png');
+            background-image: url('/background.png');
             background-position: center;
             background-size: cover;
             background-attachment: fixed;
@@ -35,18 +35,26 @@
         }
 
         .card {
-            background-color: #1a365d;
+            background-color: rgba(26, 54, 93, 0.6);
-            /* Bleu plus foncé pour les cartes */
+            /* Bleu foncé semi-transparent */
+            backdrop-filter: blur(10px);
+            /* Effet de flou */
+            -webkit-backdrop-filter: blur(10px);
+            /* Pour Safari */
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            /* Bordure légère */
             border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
             padding: 20px;
             margin: 10px;
             width: 280px;
-            transition: transform 0.3s ease;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
 
         .card:hover {
             transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
         .wide-card {
@@ -54,6 +62,10 @@
             max-height: none;
             overflow: visible;
             text-align: left;
+            background-color: rgba(26, 54, 93, 0.6);
+            /* Même style que .card */
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
         }
 
         .contributor-info {
@@ -92,10 +104,9 @@
         /* Mis à jour la structure du contributeur-item pour mieux gérer l'espace */
         .contributor-item {
             padding: 10px;
-            border-bottom: 1px solid #2d4a7d;
+            border-bottom: 1px solid rgba(45, 74, 125, 0.5);
             display: flex;
             flex-direction: column;
-            /* Changé de row à column */
         }
 
         .contributor-details {
@@ -162,7 +173,7 @@
         }
 
         .goal {
-            color: #a0aec0;
+            color: white;
             /* Texte gris clair pour la lisibilité */
             font-size: 14px;
         }
@@ -269,9 +280,13 @@
         .reward-item {
             padding: 15px;
             margin-bottom: 10px;
-            background-color: #233876;
+            background-color: rgba(35, 56, 118, 0.6);
+            /* Légèrement plus foncé mais toujours transparent */
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
             border-radius: 8px;
             position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.08);
         }
 
         .reward-title {
@@ -369,26 +384,23 @@
             <div id="supporters" class="value">--</div>
             <div id="days-left" class="goal">Jours restants: --</div>
             <div id="source-tag" class="source-tag">Source: --</div>
+            <div class="last-update">Dernière mise à jour: <span id="last-update">--</span></div>
         </div>
     </div>
 
-    <p class="last-update">Dernière mise à jour: <span id="last-update">--</span></p>
+    <div class="card contributors-list">
-
+        <h2>Derniers contributeurs</h2>
-    <div class="dashboard">
+        <div id="contributors-container">
-        <div class="card contributors-list">
+            <div class="loading"></div>
-            <h2>Derniers contributeurs</h2>
+            <p>Chargement des contributeurs...</p>
-            <div id="contributors-container">
-                <div class="loading"></div>
-                <p>Chargement des contributeurs...</p>
-            </div>
         </div>
+    </div>
 
-        <div class="card wide-card">
+    <div class="card wide-card">
-            <h2>Récompenses</h2>
+        <h2>Récompenses</h2>
-            <div id="rewards-container">
+        <div id="rewards-container">
-                <div class="loading"></div>
+            <div class="loading"></div>
-                <p>Chargement des récompenses...</p>
+            <p>Chargement des récompenses...</p>
-            </div>
         </div>
     </div>
 
@@ -559,15 +571,14 @@
             data.contributors.forEach(contributor => {
                 // Formater la date si elle existe
                 let dateStr = '';
-                if (contributor.date_joined) {
+                if (contributor.date_ordered) {
-                    const date = new Date(contributor.date_joined);
+                    const date = new Date(contributor.date_ordered);
-                    dateStr = date.toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' });
+                    dateStr = getRelativeDateStr(date);
                 }
 
                 let rewardName = '';
                 if (contributor.reward) {
                     rewardName = contributor.reward;
-                    console.log(rewardName);
                 }
 
                 const avatarUrl = contributor.avatar || 'https://s3-eu-west-1.amazonaws.com/com.ulule.assets/site/build/img/avatars/avatar-blue.png';
@@ -582,7 +593,7 @@
                             <div class="contributor-name">${contributor.name || 'Contributeur anonyme'}</div>
                             ${rewardName ? `<div class="contributor-reward">${rewardName}</div>` : ''}
                             ${contributor.location ? `<div class="contributor-location">${contributor.location}</div>` : ''}
-                            ${dateStr ? `<div class="contributor-date">Depuis le ${dateStr}</div>` : ''}
+                            ${dateStr ? `<div class="contributor-date">${dateStr}</div>` : ''}
                         </div>
                     </div>
                 </div>
@@ -595,6 +606,38 @@
             contributorsContainer.innerHTML = html;
         }
 
+        function getRelativeDateStr(dateToFormat) {
+            const now = new Date();
+            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            const yesterday = new Date(today);
+            yesterday.setDate(yesterday.getDate() - 1);
+            const sixDaysAgo = new Date(today);
+            sixDaysAgo.setDate(sixDaysAgo.getDate() - 6);
+
+            const dateOnly = new Date(dateToFormat.getFullYear(), dateToFormat.getMonth(), dateToFormat.getDate());
+
+            // Pour comparer seulement les dates sans l'heure
+            if (dateOnly.getTime() === today.getTime()) {
+                return "Aujourd'hui" + " à " + dateToFormat.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+            } else if (dateOnly.getTime() === yesterday.getTime()) {
+                return "Hier" + " à " + dateToFormat.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+            } else if (dateOnly >= sixDaysAgo) {
+                // Si la date est dans les 6 derniers jours, afficher le nom du jour
+                const options = { weekday: 'long' };
+                return dateToFormat.toLocaleDateString('fr-FR', options) + " à " +
+                    dateToFormat.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+            } else {
+                // Sinon, afficher la date complète
+                return dateToFormat.toLocaleString('fr-FR', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+            }
+        }
+
         // Fonction pour charger toutes les données
         async function loadAllData() {
             try {

server.js

@@ -47,6 +47,7 @@ app.get('/api/ulule/:slug', async (req, res) => {
         goal: projectData.goal || 0,
         currency: projectData.currency || "EUR",
         supporters_count: projectData.supporters_count || 0,
+        orders_count: projectData.orders_count || 0,
         days_left: 0,
         percent: projectData.percent || 0,
         success: true,
@@ -199,7 +200,7 @@ app.get('/api/ulule/:slug/supporters', async (req, res) => {
           reward: reward,
           amount: amount,
           avatar: supporter.avatar ? (supporter.avatar['90'] || '') : '',
-          date_joined: supporter.date_joined,
+          date_ordered: supporter.latest_project_order.created_at || '',
           comment: comment,
           location: supporter.location || ''
         };