Base

nginx/static/scripts/main.js

@@ -0,0 +1,59 @@
+import { initRouter } from './router.js';
+import { initNavigation } from './navigation.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+    initRouter();
+    initNavigation();
+
+    document.getElementById('download-archive').addEventListener('click', (e) => {
+        e.preventDefault();
+        console.log('Téléchargement de l\'archive');
+    });
+});
+
+async function loadTemplate(templateName) {
+    const response = await fetch(`/templates/${templateName}.html`);
+    return await response.text();
+}
+
+export async function displayHome() {
+    const content = document.getElementById('content');
+    content.innerHTML = await loadTemplate('home');
+}
+
+export async function displaySources(sources) {
+    const content = document.getElementById('content');
+    content.innerHTML = await loadTemplate('sources');
+    
+    const sourcesList = document.getElementById('sourcesList');
+    sourcesList.innerHTML = sources.map(source => `
+        <li class="source-item">
+            <h3>${source.title}</h3>
+            <p>${source.description}</p>
+            <p class="category">Catégorie: ${source.category}</p>
+            <a href="${source.archiveUrl}" target="_blank">Lien archivé</a>
+        </li>
+    `).join('');
+}
+
+export async function displaySuggestionForm() {
+    const content = document.getElementById('content');
+    content.innerHTML = await loadTemplate('suggest');
+    
+    document.getElementById('suggestionForm').addEventListener('submit', (e) => {
+        e.preventDefault();
+        // Logique pour traiter la soumission du formulaire
+        console.log('Formulaire de suggestion soumis');
+    });
+}
+
+export async function displaySearchForm() {
+    const content = document.getElementById('content');
+    content.innerHTML = await loadTemplate('search');
+    
+    document.getElementById('searchForm').addEventListener('submit', (e) => {
+        e.preventDefault();
+        // Logique pour traiter la recherche
+        console.log('Recherche soumise');
+    });
+}

nginx/static/scripts/navigation.js

@@ -0,0 +1,17 @@
+export function initNavigation() {
+    document.getElementById('home-button').addEventListener('click', () => {
+        window.location.hash = '#/';
+    });
+
+    document.getElementById('sources-button').addEventListener('click', () => {
+        window.location.hash = '#/sources';
+    });
+
+    document.getElementById('suggest-button').addEventListener('click', () => {
+        window.location.hash = '#/suggest';
+    });
+
+    document.getElementById('search-button').addEventListener('click', () => {
+        window.location.hash = '#/search';
+    });
+}

nginx/static/scripts/router.js

@@ -0,0 +1,26 @@
+import { displayHome, displaySources, displaySuggestionForm, displaySearchForm } from './main.js';
+
+const routes = {
+    '/': displayHome,
+    '/sources': () => {
+        // Simulons des données pour l'exemple
+        const sources = [
+            { title: 'Source 1', description: 'Description 1', category: 'Médical', archiveUrl: '#' },
+            { title: 'Source 2', description: 'Description 2', category: 'Scientifique', archiveUrl: '#' },
+        ];
+        displaySources(sources);
+    },
+    '/suggest': displaySuggestionForm,
+    '/search': displaySearchForm
+};
+
+export function initRouter() {
+    async function router() {
+        const path = window.location.hash.slice(1) || '/';
+        const route = routes[path] || routes['/'];
+        await route();
+    }
+
+    window.addEventListener('hashchange', router);
+    window.addEventListener('load', router);
+}

nginx/static/styles/styles.css

@@ -0,0 +1,100 @@
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    padding: 1rem;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#tabs-list button {
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    margin-right: 1rem;
+}
+
+main {
+    padding: 2rem;
+}
+
+footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 1rem;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+.source-list {
+    list-style-type: none;
+    padding: 0;
+}
+
+.source-item {
+    background-color: #fff;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.source-item h3 {
+    margin-top: 0;
+}
+
+.source-item .category {
+    font-style: italic;
+    color: #666;
+}
+
+.suggestion-form {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.suggestion-form input,
+.suggestion-form textarea {
+    width: 100%;
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.suggestion-form button {
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+}
+
+.search-form {
+    margin-bottom: 2rem;
+}
+
+.search-form input {
+    width: 70%;
+    padding: 0.5rem;
+}
+
+.search-form button {
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+}