diff --git a/app/public/css/style.css b/app/public/css/style.css index a974fe17be7a96ef01123dc5a81a0a124d6893f2..9c9fae1b64833e379aab72411a8368baf81e284d 100644 --- a/app/public/css/style.css +++ b/app/public/css/style.css @@ -1,3 +1,7 @@ +body { + font-family: "DejaVu Math TeX Gyre", serif; +} + .mb-3-container { border: 1px solid #b41d1d; padding: 10px; @@ -16,4 +20,47 @@ .bg-custom { background-color: #42a4b2; } +.custom-select { + width: 200px; + margin: 2%; +} +.card-body-desc{ + max-height: 20rem; +} + +.list-group { + list-style: none; + padding: 0; + margin: 0; +} + +.list-group-item { + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: 5px; + padding: 10px 15px; + margin-bottom: 10px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +.list-group-item:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0,0,0,0.15); +} + +.list-group-item p { + margin: 0 0 5px; + color: #333; +} + +.title-centered { + padding-bottom: 3%; +} + +.date-item { + font-weight: bold; + color: #555 +} + diff --git a/app/public/images/logo3.webp b/app/public/images/logo3.webp new file mode 100644 index 0000000000000000000000000000000000000000..c4bb3ef1e021f7c079b2abf972e8b1080c965927 Binary files /dev/null and b/app/public/images/logo3.webp differ diff --git a/app/views/chart.pug b/app/views/chart.pug index de2077549253648eb9e67d74bf9ede21ded3f2a9..079fd816fc4aed25dba08754fe87bdc036cbd44e 100644 --- a/app/views/chart.pug +++ b/app/views/chart.pug @@ -2,7 +2,7 @@ extends layout block content .container - h1.text-center Graphique des Consommations + h1.text-center Tableau de bord .form-group label(for="startDate") Sélectionnez la date de début: diff --git a/app/views/consumptionsByPeriod.pug b/app/views/consumptionsByPeriod.pug index aad0be7159f0836e2d2a6db72a5606575183663c..0bdddf6e1052e726a9de068e434215af9ea65d7e 100644 --- a/app/views/consumptionsByPeriod.pug +++ b/app/views/consumptionsByPeriod.pug @@ -2,7 +2,7 @@ extends layout block content .container - h1.text-center Consommations par Période + h1.text-center.title-centered Consommations par Période // Consommations par jour #consommations-jour diff --git a/app/views/dashboard.pug b/app/views/dashboard.pug index fc0a7d23d9f1ef840390c721175bd449e2cd3191..8c9c7fda3f9948ecf84092e1e9bfee994946faee 100644 --- a/app/views/dashboard.pug +++ b/app/views/dashboard.pug @@ -2,8 +2,8 @@ extends layout block content div#app-container.container - div.bg-custom.text-white.py-2.mb-4(style='border: 1px solid #ccc; padding: 10px; border-radius: 5px;') - h2.mb-3.text-center Paramètres du Seau + div.bg-light.py-2.mb-4.text-center(style='border: 3px solid #ccc; border-radius: 5px;') + span.h2.mb-3.text-center.text-dark(style='padding: 10px 0; display: inline-block;') Paramètres du Seau div#seau-parameters.row //div.mb-3 @@ -16,7 +16,7 @@ block content div.mb-3 label(for='notificationMethod', class='form-label') Méthode de notification: - select(id='notificationMethod', class='form-select', onchange='updateNotificationMethod()') + select(id='notificationMethod', class='form-select custom-select', onchange='updateNotificationMethod()') option(value='sound') Son option(value='leds') LEDs @@ -30,10 +30,10 @@ block content let seauParametersHTML = ''; seauParametersHTML += ` -

Rayon du seau ${seauParameters.rayonSeau} cm

-

Hauteur initiale de l'eau ${seauParameters.hauteurInitialeEau} cm

-

Distance supplémentaire ${seauParameters.distanceSupplementaire} cm

-

Volume initial d'eau ${seauParameters.volumeEauInitial.toFixed(2)} cm³

+

Rayon du seau: ${seauParameters.rayonSeau} cm

+

Hauteur initiale de l'eau: ${seauParameters.hauteurInitialeEau} cm

+

Distance supplémentaire: ${seauParameters.distanceSupplementaire} cm

+

Volume initial d'eau: ${(seauParameters.volumeEauInitial/1000).toFixed(2)} L

`; seauParametersDiv.innerHTML = seauParametersHTML; diff --git a/app/views/index.pug b/app/views/index.pug index ca333addba8c73a8f40bc8ffda9f31565a37155e..c5c3c9863dd3ef806638abe566aed949c0bcfc6b 100644 --- a/app/views/index.pug +++ b/app/views/index.pug @@ -4,8 +4,8 @@ block content .container-md .card.mt-4 .card-body.bg-custom.text-white - img(src="/images/logo2.webp", width="120", height="120", alt="Image", class="img-fluid mx-auto d-block mt-4 rounded-circle") - h1.card-title.text-center Abreuvoir Intelligent + img(src="/images/logo3.webp", width="120", height="120", alt="Image", class="img-fluid mx-auto d-block mt-4 rounded-circle") + h1.card-title.text-center.font-text Abreuvoir Intelligent p.card-text.text-center | 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. @@ -13,16 +13,16 @@ block content .row.mt-4 .col-md-4 .card - .card-body + .card-body.card-body-desc 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. .col-md-4 .card - .card-body + .card-body.card-body-desc 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. .col-md-4 .card - .card-body + .card-body.card-body-desc h2.card-title.text-center Consommations par Période p Découvrez les statistiques de consommation d'eau de vos vaches regroupées par période de temps spécifique. diff --git a/app/views/lastConsumptions.pug b/app/views/lastConsumptions.pug index 12cbc6a87beee83b9eb34918917989df4b4837c5..0e9392a17b13548d259dde937a33c56c6520b269 100644 --- a/app/views/lastConsumptions.pug +++ b/app/views/lastConsumptions.pug @@ -25,10 +25,12 @@ block content listItem.className = 'list-group-item'; const dateItem = document.createElement('p'); + dateItem.className = 'date-item'; dateItem.textContent = `Date: ${new Date(cons.timestamp).toLocaleString()}`; listItem.appendChild(dateItem); const consommationItem = document.createElement('p'); + consommationItem.className = 'consommation-item'; const litres = cm3ToLitres(cons.consommation); consommationItem.textContent = `Consommation: ${litres.toFixed(2)} L`; listItem.appendChild(consommationItem); diff --git a/app/views/layout.pug b/app/views/layout.pug index c895b68ba981df292f64c0d07654e52b268ff5c4..1fe5c9a6ba766948f53ef089a48c241d00f17cee 100644 --- a/app/views/layout.pug +++ b/app/views/layout.pug @@ -13,20 +13,20 @@ html(lang="en") .container-fluid.d-flex.align-items-center div.d-flex.align-items-center a.navbar-brand(href="/") - img(src="/images/logo2.webp", alt="Logo", width="60", height="60", class="d-inline-block align-top me-2 rounded-circle") - h3.mb-2 Abreuvoir Intelligent + img(src="/images/logo3.webp", alt="Logo", width="60", height="60", class="d-inline-block align-top me-2 rounded-circle") + h2.mb-2.font-text Abreuvoir Intelligent button.navbar-toggler(type="button", data-bs-toggle="collapse", data-bs-target="#navbarNav", aria-controls="navbarNav", aria-expanded="false", aria-label="Toggle navigation") span.navbar-toggler-icon #navbarNav.collapse.navbar-collapse ul.navbar-nav li.nav-item.mx-3 - a.nav-link(href="/information-generale", class="fw-bold") Information Générale - li.nav-item.mx-3 - a.nav-link(href="/graphique-consommations", class="fw-bold") Graphique des Consommations + a.nav-link(href="/information-generale", class="fw-bold") Informations Générales li.nav-item.mx-3 a.nav-link(href="/liste-consommations", class="fw-bold") Liste des Consommations li.nav-item.mx-3 - a.nav-link(href="/consommations-par-periode", class="fw-bold") Consommations par Période + a.nav-link(href="/consommations-par-periode", class="fw-bold") Consommations par Période + li.nav-item.mx-3 + a.nav-link(href="/graphique-consommations", class="fw-bold") Tableau de bord .container.mt-5 block content