first commit
This commit is contained in:
Victor Bodinaud
385
public/index.html
Normal file
385
public/index.html
Normal file
@@ -0,0 +1,385 @@
|
||||
<!-- 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>Suivi de Campagne Ulule</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; /* Fond bleu */
|
||||
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);
|
||||
}
|
||||
.contributors-list {
|
||||
width: calc(100% - 60px);
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
text-align: left;
|
||||
}
|
||||
.contributor-item {
|
||||
padding: A10px;
|
||||
border-bottom: 1px solid #2d4a7d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.contributor-name {
|
||||
font-weight: bold;
|
||||
color: #e3b505;
|
||||
}
|
||||
.contributor-reward {
|
||||
color: #a0aec0;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.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: left;
|
||||
}
|
||||
input {
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
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 */
|
||||
}
|
||||
.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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Suivi de Campagne Ulule</h1>
|
||||
|
||||
<div class="config-panel">
|
||||
<h2>Suivi de la campagne</h2>
|
||||
<div>
|
||||
<p id="campaign-info">Chargement des données de la campagne...</p>
|
||||
</div>
|
||||
<p id="error-message" class="error"></p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="card contributors-list">
|
||||
<h2>Derniers contributeurs</h2>
|
||||
<div id="contributors-container">Chargement des contributeurs...</div>
|
||||
</div>
|
||||
|
||||
<p class="last-update">Dernière mise à jour: <span id="last-update">--</span></p>
|
||||
|
||||
<script>
|
||||
let intervalId = null;
|
||||
// Configuration en dur
|
||||
const PROJECT_URL = 'https://fr.ulule.com/suppdonn-knights-of-water/'; // Remplacez par l'URL de votre campagne
|
||||
const REFRESH_INTERVAL = 20; // Intervalle de rafraîchissement en secondes
|
||||
|
||||
// Éléments DOM
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
const campaignInfo = document.getElementById('campaign-info');
|
||||
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');
|
||||
|
||||
function extractProjectSlug(url) {
|
||||
try {
|
||||
const urlObj = new URL(url);
|
||||
const pathParts = urlObj.pathname.split('/').filter(part => part);
|
||||
if (pathParts.length > 0) {
|
||||
return pathParts[pathParts.length - 1];
|
||||
}
|
||||
throw new Error('URL de projet invalide');
|
||||
} catch (error) {
|
||||
throw new Error('URL de projet invalide');
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchProjectData(projectSlug) {
|
||||
try {
|
||||
// Appeler notre API locale
|
||||
const response = await fetch(`/api/ulule/${projectSlug}`);
|
||||
|
||||
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 fetchContributors(projectSlug) {
|
||||
try {
|
||||
// Essayez de récupérer la page des contributeurs
|
||||
const response = await fetch(`/api/ulule/${projectSlug}/contributors`);
|
||||
|
||||
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) {
|
||||
// Mettre à jour le titre de la campagne
|
||||
document.title = `Suivi de ${data.name}`;
|
||||
campaignInfo.textContent = `Campagne: ${data.name}`;
|
||||
|
||||
// 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 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 => {
|
||||
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>
|
||||
<div class="contributor-amount">${contributor.amount ? formatter.format(contributor.amount) : ''}</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
contributorsContainer.innerHTML = html;
|
||||
}
|
||||
|
||||
// Fonction pour démarrer le suivi automatiquement
|
||||
async function startTracking() {
|
||||
try {
|
||||
// Extraire le slug du projet depuis l'URL
|
||||
const projectSlug = extractProjectSlug(PROJECT_URL);
|
||||
campaignInfo.textContent = `Chargement des données pour ${projectSlug}...`;
|
||||
|
||||
// Récupérer les données initiales
|
||||
const projectData = await fetchProjectData(projectSlug);
|
||||
updateDashboard(projectData);
|
||||
|
||||
// Essayer de récupérer les contributeurs
|
||||
try {
|
||||
const contributorsData = await fetchContributors(projectSlug);
|
||||
updateContributors(contributorsData);
|
||||
} catch (contribError) {
|
||||
console.error("Erreur contributeurs:", contribError);
|
||||
contributorsContainer.innerHTML = '<p>Impossible de récupérer la liste des contributeurs.</p>';
|
||||
}
|
||||
|
||||
// Arrêter l'intervalle précédent s'il existe
|
||||
if (intervalId) {
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
|
||||
// Configurer le rafraîchissement automatique
|
||||
intervalId = setInterval(async () => {
|
||||
try {
|
||||
// Mettre à jour les données du projet
|
||||
const updatedData = await fetchProjectData(projectSlug);
|
||||
updateDashboard(updatedData);
|
||||
|
||||
// Mettre à jour les contributeurs
|
||||
const contributorsData = await fetchContributors(projectSlug);
|
||||
updateContributors(contributorsData);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la mise à jour:', error);
|
||||
}
|
||||
}, REFRESH_INTERVAL * 1000);
|
||||
|
||||
} catch (error) {
|
||||
errorMessage.textContent = error.message;
|
||||
campaignInfo.textContent = "Erreur lors du chargement des données";
|
||||
}
|
||||
}
|
||||
|
||||
// Démarrer le suivi dès le chargement de la page
|
||||
document.addEventListener('DOMContentLoaded', startTracking);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user