From 5fc0cd21c46e09c191779c3cab9ecf583c3d1054 Mon Sep 17 00:00:00 2001 From: Hajar RAHMOUNI Date: Tue, 13 Feb 2024 17:08:50 +0100 Subject: [PATCH] centrer les composants --- app/public/css/style.css | 11 +++++++++++ app/routes/index.js | 1 + app/views/dashboard.pug | 14 +++----------- app/views/index.pug | 9 +++++---- app/views/layout.pug | 1 + 5 files changed, 21 insertions(+), 15 deletions(-) create mode 100644 app/public/css/style.css diff --git a/app/public/css/style.css b/app/public/css/style.css new file mode 100644 index 0000000..ac1f0fe --- /dev/null +++ b/app/public/css/style.css @@ -0,0 +1,11 @@ +.mb-3-container { + border: 1px solid #b41d1d; + padding: 10px; + border-radius: 5px; +} + +.seau-parameter-text { + color: #333; + font-size: 16px; + margin-bottom: 5px; +} \ No newline at end of file diff --git a/app/routes/index.js b/app/routes/index.js index b312ded..db0a868 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -17,6 +17,7 @@ let volumeEauInitial = Math.PI * rayonSeau**2 * hauteurInitialeEau; // Calcul du const port = 3000; app.use(express.json()); +app.use(express.static('public')); const path = require('path'); const viewsPath = path.join(__dirname, '../views'); diff --git a/app/views/dashboard.pug b/app/views/dashboard.pug index aab5967..cf4af22 100644 --- a/app/views/dashboard.pug +++ b/app/views/dashboard.pug @@ -2,17 +2,10 @@ extends layout block content div#app-container.container - h1 Information Générale - hr - - // Ajouter une section pour afficher les paramètres du seau - div.mb-3 - h2 Paramètres du Seau + div.mb-4(style='border: 1px solid #ccc; padding: 10px; border-radius: 5px;') + h2.mb-3.text-center Paramètres du Seau div#seau-parameters - hr - - // Ajouter le formulaire pour calculer le volume et la consommation div.mb-3 label(for='distanceCapteur', class='form-label') Consommation d'eau: input(type='number', class='form-control', id='distanceCapteur', placeholder='Entrez la distance en cm') @@ -20,8 +13,7 @@ block content button.btn.btn-primary.mb-3(onclick='calculateVolume()') Calculer le volume et la consommation div#result - hr - + hr div.mb-3 label(for='notificationMethod', class='form-label') Méthode de notification: select(id='notificationMethod', class='form-select', onchange='updateNotificationMethod()') diff --git a/app/views/index.pug b/app/views/index.pug index de040e6..741f61d 100644 --- a/app/views/index.pug +++ b/app/views/index.pug @@ -1,13 +1,14 @@ extends layout + block content .container-md - .card + .card.mt-4 .card-body - h1.card-title Abreuvoir Intelligent + h1.card-title.text-center Abreuvoir Intelligent p.card-text | Bienvenue sur l'application d'abreuvoir intelligent. Notre application surveille la consommation d'eau des vaches | pour vous fournir des informations utiles sur leur comportement d'abreuvement. - h2 Consommation d'eau des vaches + h2.card-title.text-center Consommation d'eau des vaches p Découvrez en temps réel la consommation d'eau de vos vaches grâce à notre système intelligent. - h2 Graphique des Consommations + h2.card-title.text-center Graphique des Consommations p Consultez le graphique interactif pour visualiser la consommation d'eau au fil du temps et prendre des décisions éclairées. diff --git a/app/views/layout.pug b/app/views/layout.pug index eb887ee..58b19a4 100644 --- a/app/views/layout.pug +++ b/app/views/layout.pug @@ -6,6 +6,7 @@ html(lang="en") title Abreuvoir Intelligent link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css") script(src="https://cdn.jsdelivr.net/npm/chart.js") + link(rel='stylesheet', href='../public/css/style.css') body nav.navbar.navbar-expand-lg.navbar-light.bg-light .container-fluid -- GitLab