696 lines
23 KiB
HTML
696 lines
23 KiB
HTML
<!-- public/index.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Suppdonn, Knights of Water</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
text-align: center;
|
|
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 {
|
|
color: white;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.dashboard {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 30px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card {
|
|
background-color: #1a365d;
|
|
/* Bleu plus foncé pour les cartes */
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
padding: 20px;
|
|
margin: 10px;
|
|
width: 280px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.wide-card {
|
|
width: calc(100% - 60px);
|
|
max-height: none;
|
|
overflow: visible;
|
|
text-align: left;
|
|
}
|
|
|
|
.contributor-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.contributors-list {
|
|
width: calc(100% - 60px);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.contributor-profile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.contributor-comment {
|
|
color: #cbd5e0;
|
|
font-size: 13px;
|
|
margin-top: 5px;
|
|
font-style: italic;
|
|
line-height: 1.3;
|
|
width: 100%;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
white-space: normal;
|
|
/* Permet le passage à la ligne */
|
|
}
|
|
|
|
/* Mis à jour la structure du contributeur-item pour mieux gérer l'espace */
|
|
.contributor-item {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #2d4a7d;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Changé de row à column */
|
|
}
|
|
|
|
.contributor-details {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.contributor-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
background-color: #3b557d;
|
|
}
|
|
|
|
.contributor-name {
|
|
font-weight: bold;
|
|
color: #e3b505;
|
|
}
|
|
|
|
.contributor-reward {
|
|
color: #a0aec0;
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.contributor-date {
|
|
color: #a0aec0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.contributor-location {
|
|
color: #a0aec0;
|
|
font-size: 12px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.contributor-amount {
|
|
color: #ffd500;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card h2 {
|
|
margin-top: 0;
|
|
color: white;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.value {
|
|
font-size: 48px;
|
|
font-weight: bold;
|
|
margin: 20px 0;
|
|
color: #e3b505;
|
|
/* Valeurs en jaune */
|
|
}
|
|
|
|
.percentage {
|
|
font-size: 24px;
|
|
color: #ffd500;
|
|
/* Pourcentage en jaune vif */
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.goal {
|
|
color: #a0aec0;
|
|
/* Texte gris clair pour la lisibilité */
|
|
font-size: 14px;
|
|
}
|
|
|
|
.config-panel {
|
|
background-color: #1a365d;
|
|
/* Bleu plus foncé pour le panneau de configuration */
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.campaign-title {
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
color: #e3b505;
|
|
}
|
|
|
|
.campaign-subtitle {
|
|
font-size: 16px;
|
|
color: #a0aec0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.loading {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: white;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.error {
|
|
color: #ff6b6b;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.last-update {
|
|
color: #a0aec0;
|
|
/* Texte gris clair pour la lisibilité */
|
|
font-size: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.progress-bar {
|
|
background-color: #233876;
|
|
border-radius: 8px;
|
|
height: 20px;
|
|
width: 100%;
|
|
margin: 15px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
background-color: #e3b505;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
transition: width 0.5s ease-in-out;
|
|
}
|
|
|
|
.source-tag {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-size: 10px;
|
|
margin-top: 10px;
|
|
background-color: #4299e1;
|
|
}
|
|
|
|
.api-tag {
|
|
background-color: #48bb78;
|
|
}
|
|
|
|
.script-tag {
|
|
background-color: #4299e1;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="dashboard">
|
|
<div class="card">
|
|
<h2>Montant Collecté</h2>
|
|
<div id="amount" class="value">--</div>
|
|
<div id="percentage" class="percentage">--%</div>
|
|
<div class="progress-bar">
|
|
<div id="progress-fill" class="progress-fill" style="width: 0%"></div>
|
|
</div>
|
|
<div id="goal" class="goal">Objectif: -- €</div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Contributeurs</h2>
|
|
<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>
|
|
</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>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<script>
|
|
// Définir l'URL de la campagne en dur
|
|
const PROJECT_SLUG = '199996'; // Utilisez votre numéro de projet
|
|
const REFRESH_INTERVAL = 60; // Intervalle de rafraîchissement en secondes
|
|
|
|
// Éléments DOM
|
|
const errorMessage = document.getElementById('error-message');
|
|
const amountElement = document.getElementById('amount');
|
|
const percentageElement = document.getElementById('percentage');
|
|
const progressFill = document.getElementById('progress-fill');
|
|
const goalElement = document.getElementById('goal');
|
|
const supportersElement = document.getElementById('supporters');
|
|
const daysLeftElement = document.getElementById('days-left');
|
|
const lastUpdateElement = document.getElementById('last-update');
|
|
const sourceTag = document.getElementById('source-tag');
|
|
const contributorsContainer = document.getElementById('contributors-container');
|
|
const rewardsContainer = document.getElementById('rewards-container');
|
|
|
|
async function fetchProjectData(slug) {
|
|
try {
|
|
const response = await fetch(`/api/ulule/${slug}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Erreur API: ${response.status}`);
|
|
}
|
|
|
|
return await response.json();
|
|
} catch (error) {
|
|
throw new Error(`Impossible de récupérer les données du projet: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
async function fetchRewards(slug) {
|
|
try {
|
|
const response = await fetch(`/api/ulule/${slug}/rewards`);
|
|
|
|
if (!response.ok) {
|
|
return { rewards: [] };
|
|
}
|
|
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error("Erreur lors de la récupération des récompenses:", error);
|
|
return { rewards: [] };
|
|
}
|
|
}
|
|
|
|
async function fetchContributors(slug) {
|
|
try {
|
|
const response = await fetch(`/api/ulule/${slug}/supporters`);
|
|
|
|
if (!response.ok) {
|
|
return { contributors: [] };
|
|
}
|
|
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error("Erreur lors de la récupération des contributeurs:", error);
|
|
return { contributors: [] };
|
|
}
|
|
}
|
|
|
|
function updateDashboard(data) {
|
|
// Formater le montant avec l'espace comme séparateur de milliers
|
|
const formatter = new Intl.NumberFormat('fr-FR', {
|
|
style: 'currency',
|
|
currency: data.currency,
|
|
maximumFractionDigits: 0
|
|
});
|
|
|
|
// Mettre à jour les valeurs
|
|
const amountRaised = formatter.format(data.amount_raised);
|
|
const goalAmount = formatter.format(data.goal);
|
|
const percentFunded = data.percent || (data.goal > 0 ? Math.round((data.amount_raised / data.goal) * 100) : 0);
|
|
|
|
// Mettre à jour l'interface
|
|
amountElement.textContent = amountRaised;
|
|
percentageElement.textContent = `${percentFunded}%`;
|
|
progressFill.style.width = `${Math.min(percentFunded, 100)}%`;
|
|
goalElement.textContent = `Objectif: ${goalAmount}`;
|
|
supportersElement.textContent = data.supporters_count;
|
|
|
|
if (data.days_left > 0) {
|
|
daysLeftElement.textContent = `Jours restants: ${data.days_left}`;
|
|
} else if (data.days_left === 0) {
|
|
daysLeftElement.textContent = `Dernier jour!`;
|
|
} else {
|
|
daysLeftElement.textContent = `Campagne terminée`;
|
|
}
|
|
|
|
// Afficher la source des données
|
|
sourceTag.textContent = `Source: ${data.source || 'inconnue'}`;
|
|
sourceTag.className = 'source-tag'; // Réinitialiser
|
|
if (data.source) {
|
|
sourceTag.classList.add(`${data.source}-tag`);
|
|
}
|
|
|
|
lastUpdateElement.textContent = new Date().toLocaleString('fr-FR');
|
|
}
|
|
|
|
function updateRewards(data) {
|
|
if (!data.rewards || data.rewards.length === 0) {
|
|
rewardsContainer.innerHTML = '<p>Aucune récompense trouvée ou impossible de récupérer la liste.</p>';
|
|
return;
|
|
}
|
|
|
|
const formatter = new Intl.NumberFormat('fr-FR', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
maximumFractionDigits: 0
|
|
});
|
|
|
|
let html = '<div class="reward-list">';
|
|
|
|
// Trier les récompenses par prix
|
|
const sortedRewards = [...data.rewards].sort((a, b) => a.price - b.price);
|
|
|
|
sortedRewards.forEach(reward => {
|
|
// Récupérer le titre localisé (français par défaut, sinon anglais, sinon première langue disponible)
|
|
let rewardTitle = '';
|
|
if (reward.title) {
|
|
rewardTitle = reward.title.fr || reward.title.en || Object.values(reward.title)[0] || '';
|
|
}
|
|
|
|
// Calculer le pourcentage pour les récompenses limitées
|
|
let percentTaken = 0;
|
|
let stockText = "";
|
|
|
|
if (reward.stock) {
|
|
percentTaken = Math.round((reward.orders_count / reward.stock) * 100);
|
|
const remaining = reward.stock_available || (reward.stock - reward.orders_count);
|
|
stockText = `<span class="reward-stat">${remaining} restants sur ${reward.stock}</span>`;
|
|
} else {
|
|
stockText = `<span class="reward-stat">Stock illimité</span>`;
|
|
}
|
|
|
|
html += `
|
|
<div class="reward-item">
|
|
<div class="reward-price">${formatter.format(reward.price)}</div>
|
|
<div class="reward-title">${rewardTitle}</div>
|
|
<div class="reward-description">${reward.description}</div>
|
|
<div class="reward-stats">
|
|
<span class="reward-stat">${reward.orders_count} contributeurs</span>
|
|
${stockText}
|
|
</div>
|
|
${reward.stock ? `
|
|
<div class="reward-progress">
|
|
<div class="reward-progress-fill" style="width: ${percentTaken}%"></div>
|
|
</div>` : ''}
|
|
</div>`;
|
|
});
|
|
|
|
html += '</div>';
|
|
rewardsContainer.innerHTML = html;
|
|
}
|
|
function updateContributors(data) {
|
|
if (!data.contributors || data.contributors.length === 0) {
|
|
contributorsContainer.innerHTML = '<p>Aucun contributeur trouvé ou impossible de récupérer la liste.</p>';
|
|
return;
|
|
}
|
|
|
|
const formatter = new Intl.NumberFormat('fr-FR', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
maximumFractionDigits: 0
|
|
});
|
|
|
|
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 ? (contributor.avatar['90'] || '') : 'https://s3-eu-west-1.amazonaws.com/com.ulule.assets/site/build/img/avatars/avatar-blue.png';
|
|
|
|
// Extraire le nom de la récompense avec le format title.fr si disponible
|
|
let rewardName = '';
|
|
if (contributor.latest_project_order &&
|
|
contributor.latest_project_order.items &&
|
|
contributor.latest_project_order.items.length > 0) {
|
|
|
|
const item = contributor.latest_project_order.items[0];
|
|
|
|
if (item.reward && item.reward.parent && item.reward.parent.title) {
|
|
rewardName = item.reward.parent.title.fr ||
|
|
item.reward.parent.title.en ||
|
|
Object.values(item.reward.parent.title)[0] || '';
|
|
|
|
// Ajouter la variante si elle existe
|
|
if (item.reward.description_fr) {
|
|
rewardName += ` (${item.reward.description_fr})`;
|
|
}
|
|
}
|
|
}
|
|
|
|
html += `
|
|
<div class="contributor-item">
|
|
<div class="contributor-details">
|
|
<div class="contributor-info">
|
|
<div class="contributor-profile">
|
|
<img class="contributor-avatar" src="${avatarUrl}" alt="${contributor.name || 'Contributeur'}" />
|
|
<div>
|
|
<div class="contributor-name">${contributor.name || contributor.screenname || '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>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
${contributor.latest_project_order && contributor.latest_project_order.items && contributor.latest_project_order.items[0].line_total ?
|
|
`<div class="contributor-amount">${formatter.format(contributor.latest_project_order.items[0].line_total)}</div>` : ''}
|
|
</div>
|
|
${contributor.latest_project_comment && contributor.latest_project_comment.comment ?
|
|
`<div class="contributor-comment">"${contributor.latest_project_comment.comment}"</div>` : ''}
|
|
</div>`;
|
|
});
|
|
|
|
contributorsContainer.innerHTML = html;
|
|
}
|
|
|
|
if (!data.contributors || data.contributors.length === 0) {
|
|
contributorsContainer.innerHTML = '<p>Aucun contributeur trouvé ou impossible de récupérer la liste.</p>';
|
|
return;
|
|
}
|
|
|
|
const formatter = new Intl.NumberFormat('fr-FR', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
maximumFractionDigits: 0
|
|
});
|
|
|
|
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 class="contributor-details">
|
|
<div class="contributor-info">
|
|
<div class="contributor-profile">
|
|
<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>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
${contributor.amount ? `<div class="contributor-amount">${formatter.format(contributor.amount)}</div>` : ''}
|
|
</div>
|
|
${contributor.comment ? `<div class="contributor-comment">"${contributor.comment}"</div>` : ''}
|
|
</div>`;
|
|
});
|
|
|
|
contributorsContainer.innerHTML = html;
|
|
}
|
|
|
|
// Fonction pour charger toutes les données
|
|
async function loadAllData() {
|
|
try {
|
|
// Récupérer les données du projet
|
|
const projectData = await fetchProjectData(PROJECT_SLUG);
|
|
updateDashboard(projectData);
|
|
|
|
// Récupérer les récompenses
|
|
const rewardsData = await fetchRewards(PROJECT_SLUG);
|
|
updateRewards(rewardsData);
|
|
|
|
// Récupérer les contributeurs
|
|
const contributorsData = await fetchContributors(PROJECT_SLUG);
|
|
updateContributors(contributorsData);
|
|
|
|
} catch (error) {
|
|
errorMessage.textContent = error.message;
|
|
}
|
|
}
|
|
|
|
// Charger les données et configurer le rafraîchissement automatique
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Chargement initial
|
|
loadAllData();
|
|
|
|
// Rafraîchissement automatique
|
|
setInterval(loadAllData, REFRESH_INTERVAL * 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |