88 lines
3.1 KiB
JavaScript
88 lines
3.1 KiB
JavaScript
const loadingDiv = document.getElementById('loading');
|
|
const contentDiv = document.getElementById('content');
|
|
|
|
console.log(contentDiv);
|
|
|
|
fetch('data.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
console.log(data);
|
|
|
|
// Masquer l'indicateur de chargement
|
|
if (loadingDiv) {
|
|
loadingDiv.style.display = 'none';
|
|
}
|
|
|
|
// Créez les pages
|
|
data.forEach(clock => {
|
|
const page = document.createElement('div');
|
|
page.className = 'page';
|
|
|
|
// Conteneur principal pour l'horloge
|
|
const container = document.createElement('div');
|
|
container.className = 'clock-container';
|
|
|
|
// titre
|
|
const title = document.createElement('h1');
|
|
title.className = 'clock-title';
|
|
title.textContent = clock.title || 'Horloge sans titre';
|
|
|
|
// DIV Image
|
|
const img = document.createElement('img');
|
|
img.className = 'clock-image';
|
|
img.src = clock.image_url_hd || clock.image_url || 'placeholder.jpg';
|
|
img.alt = clock.title || 'Image d\'horloge';
|
|
|
|
// Détails
|
|
const details = document.createElement('div');
|
|
details.className = 'clock-details';
|
|
|
|
// Date
|
|
const dateRow = document.createElement('div');
|
|
dateRow.className = 'detail-row';
|
|
dateRow.innerHTML = `
|
|
<span class="detail-label">Date:</span>
|
|
<span class="detail-value">${clock.date || 'Non spécifiée'}</span>
|
|
`;
|
|
|
|
// Culture
|
|
const cultureRow = document.createElement('div');
|
|
cultureRow.className = 'detail-row';
|
|
cultureRow.innerHTML = `
|
|
<span class="detail-label">Culture:</span>
|
|
<span class="detail-value">${clock.culture || 'Non spécifiée'}</span>
|
|
`;
|
|
|
|
// Description
|
|
const descRow = document.createElement('div');
|
|
descRow.className = 'detail-row';
|
|
descRow.innerHTML = `
|
|
<span class="detail-label">Description:</span>
|
|
<span class="detail-value">${clock.description || 'Aucune description disponible'}</span>
|
|
`;
|
|
|
|
// Ajoutez les détails au conteneur
|
|
details.appendChild(dateRow);
|
|
details.appendChild(cultureRow);
|
|
details.appendChild(descRow);
|
|
|
|
// Ajoutez le titre, l'image et les détails au conteneur principal
|
|
container.appendChild(title);
|
|
container.appendChild(img);
|
|
container.appendChild(details);
|
|
|
|
// Ajoutez le conteneur principal à la page
|
|
page.appendChild(container);
|
|
|
|
// Ajoutez la page au conteneur principal
|
|
contentDiv.appendChild(page);
|
|
});
|
|
|
|
// Appeler Paged.js pour générer les pages
|
|
PagedPolyfill.preview().catch(error => {
|
|
console.error('Erreur avec Paged.js :', error);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Erreur lors du chargement des données :', error);
|
|
}); |