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

✨Enhancements

Browse Source
This commit is contained in:
Victor Bodinaud
2025-03-03 10:41:07 +01:00
parent a2f80fce0c
commit 25b0a382c3
4 changed files with 81 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/backgound.png → public/background.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 2.7 MiB

101
public/index.html
View File

@@ -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;
/* Bleu plus foncé pour les cartes */
background-color: rgba(26, 54, 93, 0.6);
/* 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="dashboard">
<div class="card contributors-list">
<h2>Derniers contributeurs</h2>
<div id="contributors-container">
<div class="loading"></div>
<p>Chargement des contributeurs...</p>
</div>
<div class="card contributors-list">
<h2>Derniers contributeurs</h2>
<div id="contributors-container">
<div class="loading"></div>
<p>Chargement des contributeurs...</p>
</div>
</div>
<div class="card wide-card">
<h2>Récompenses</h2>
<div id="rewards-container">
<div class="loading"></div>
<p>Chargement des récompenses...</p>
</div>
<div class="card wide-card">
<h2>Récompenses</h2>
<div id="rewards-container">
<div class="loading"></div>
<p>Chargement des récompenses...</p>
</div>
</div>
@@ -559,15 +571,14 @@
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' });
if (contributor.date_ordered) {
const date = new Date(contributor.date_ordered);
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 {