Mahtan/suppdonn-tracker
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄Better UI & add supporters

Browse Source
This commit is contained in:
Victor Bodinaud
2025-02-27 14:21:42 +01:00
parent 9008e944df
commit 72e1a9307b
3 changed files with 131 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
public/index.html
View File

@@ -12,7 +12,11 @@
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: #2c5282; /* Fond bleu */
background-color: #2c5282; /* Couleur de secours si l'image ne charge pas */
background-image: url('/background.png');
background-position: center;
background-size: cover;
background-attachment: fixed;
color: white;
}
h1 {
@@ -56,6 +60,18 @@
align-items: center;
justify-content: space-between;
}
.contributor-info {
display: flex;
align-items: center;
gap: 10px;
}
.contributor-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background-color: #3b557d;
}
.contributor-name {
font-weight: bold;
color: #e3b505;
@@ -65,6 +81,30 @@
font-size: 14px;
margin-top: 5px;
}
.contributor-date {
color: #a0aec0;
font-size: 12px;
}
.contributor-location {
color: #a0aec0;
font-size: 12px;
font-style: italic;
}
.contributor-comment {
color: #cbd5e0;
font-size: 13px;
margin-top: 5px;
font-style: italic;
line-height: 1.3;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contributor-comment:hover {
white-space: normal;
max-width: none;
}
.contributor-amount {
color: #ffd500;
font-weight: bold;
@@ -285,7 +325,7 @@
<script>
// Définir l'URL de la campagne en dur
const PROJECT_SLUG = 'suppdonn-knights-of-water'; // Remplacer par le slug de votre campagne
const PROJECT_SLUG = '199996'; // Utilisez votre numéro de projet
const REFRESH_INTERVAL = 60; // Intervalle de rafraîchissement en secondes
// Éléments DOM
@@ -333,7 +373,7 @@
async function fetchContributors(slug) {
try {
const response = await fetch(`/api/ulule/${slug}/contributors`);
const response = await fetch(`/api/ulule/${slug}/supporters`);
if (!response.ok) {
return { contributors: [] };
@@ -460,13 +500,28 @@
let html = '';
data.contributors.forEach(contributor => {
// Formater la date si elle existe
let dateStr = '';
if (contributor.date_joined) {
const date = new Date(contributor.date_joined);
dateStr = date.toLocaleDateString('fr-FR', { year: 'numeric', month: 'short', day: 'numeric' });
}
const avatarUrl = contributor.avatar || 'https://s3-eu-west-1.amazonaws.com/com.ulule.assets/site/build/img/avatars/avatar-blue.png';
html += `
<div class="contributor-item">
<div>
<div class="contributor-name">${contributor.name || 'Contributeur anonyme'}</div>
<div class="contributor-reward">${contributor.reward || 'Aucune contrepartie'}</div>
<div class="contributor-info">
<img class="contributor-avatar" src="${avatarUrl}" alt="${contributor.name}" />
<div>
<div class="contributor-name">${contributor.name || 'Contributeur anonyme'}</div>
${contributor.reward ? `<div class="contributor-reward">${contributor.reward}</div>` : ''}
${contributor.location ? `<div class="contributor-location">${contributor.location}</div>` : ''}
${dateStr ? `<div class="contributor-date">Depuis le ${dateStr}</div>` : ''}
${contributor.comment ? `<div class="contributor-comment">"${contributor.comment}"</div>` : ''}
</div>
</div>
<div class="contributor-amount">${contributor.amount ? formatter.format(contributor.amount) : ''}</div>
${contributor.amount ? `<div class="contributor-amount">${formatter.format(contributor.amount)}</div>` : ''}
</div>`;
});