diff --git a/docker-compose.yml b/docker-compose.yml index e69cc5c..d21ee93 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -3,9 +3,14 @@ version: '3' services: ulule-tracker: build: . + container_name: ulule-tracker ports: - "2106:2106" restart: unless-stopped volumes: - ./server.js:/app/server.js - - ./public:/app/public \ No newline at end of file + - ./public:/app/public + environment: + - PROJECT_SLUG=199996 # Remplacez par le slug de votre campagne + - REFRESH_INTERVAL=10 # En secondes + - PORT=2106 \ No newline at end of file diff --git a/public/index.html b/public/index.html index fdaa7e4..04ff436 100644 --- a/public/index.html +++ b/public/index.html @@ -37,14 +37,20 @@ .card:hover { transform: translateY(-5px); } + .wide-card { + width: calc(100% - 60px); + max-height: none; + overflow: visible; + text-align: left; + } .contributors-list { width: calc(100% - 60px); - max-height: 500px; + max-height: 400px; overflow-y: auto; text-align: left; } .contributor-item { - padding: A10px; + padding: 10px; border-bottom: 1px solid #2d4a7d; display: flex; align-items: center; @@ -89,27 +95,17 @@ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); padding: 20px; margin: 20px 0; - text-align: left; + text-align: center; } - input { - padding: 8px; - width: 100%; - margin: 8px 0; - border: 1px solid #ddd; - border-radius: 4px; + .campaign-title { + font-size: 24px; + margin-bottom: 5px; + color: #e3b505; } - button { - background-color: #e3b505; /* Bouton jaune */ - color: #333; - font-weight: bold; - border: none; - padding: 10px 15px; - border-radius: 4px; - cursor: pointer; - margin-top: 10px; - } - button:hover { - background-color: #ffc107; /* Jaune plus clair au survol */ + .campaign-subtitle { + font-size: 16px; + color: #a0aec0; + margin-bottom: 20px; } .loading { display: inline-block; @@ -161,15 +157,92 @@ .html-tag { background-color: #ed8936; } .demo-tag { background-color: #a0aec0; } .error-tag { background-color: #f56565; } + + .reward-list { + margin-top: 20px; + } + .reward-item { + padding: 15px; + margin-bottom: 10px; + background-color: #233876; + border-radius: 8px; + position: relative; + } + .reward-title { + font-size: 18px; + font-weight: bold; + color: #e3b505; + margin-bottom: 10px; + } + .reward-price { + position: absolute; + top: 15px; + right: 15px; + background-color: #e3b505; + color: #1a365d; + font-weight: bold; + padding: 5px 10px; + border-radius: 20px; + } + .reward-description { + margin-bottom: 10px; + } + .reward-stats { + font-size: 14px; + color: #a0aec0; + display: flex; + justify-content: space-between; + margin-top: 10px; + } + .reward-stat { + background-color: #1a365d; + padding: 5px 10px; + border-radius: 4px; + } + .reward-progress { + height: 8px; + background-color: #1a365d; + border-radius: 4px; + margin-top: 10px; + overflow: hidden; + } + .reward-progress-fill { + height: 100%; + background-color: #e3b505; + transition: width 0.5s ease-in-out; + } + + /* Affichage sur mobile */ + @media (max-width: 600px) { + .card { + width: 100%; + margin: 10px 0; + } + .wide-card { + width: 100%; + } + .contributors-list { + width: 100%; + } + .reward-price { + position: static; + display: inline-block; + margin-bottom: 10px; + } + .reward-stats { + flex-direction: column; + gap: 5px; + } + }
Chargement des données de la campagne...
+Chargement des données de la campagne...
Chargement des récompenses...
+Chargement des contributeurs...
+Dernière mise à jour: --