From 7fc5ff0882638369121a1dbfdcb8bd34d809e476 Mon Sep 17 00:00:00 2001
From: LaurentBlondel <laurent@zantetusken.fr>
Date: Wed, 13 Dec 2023 14:20:49 +0100
Subject: [PATCH] modification index + R&D sur la navbar
---
.../main/resources/static/assets/js/pixel.js | 2 +-
ui/src/main/resources/static/css/custom.css | 73 +++++++++
.../resources/templates/inc/navbar-home.html | 39 +++--
.../resources/templates/inc/navbar-logo.html | 20 +--
.../templates/inc/navbar-mantras.html | 20 +--
.../resources/templates/inc/preloader.html | 35 ++---
ui/src/main/resources/templates/index.html | 146 +++++++++---------
7 files changed, 206 insertions(+), 129 deletions(-)
diff --git a/ui/src/main/resources/static/assets/js/pixel.js b/ui/src/main/resources/static/assets/js/pixel.js
index dfa2fe743..9e21bc2f1 100644
--- a/ui/src/main/resources/static/assets/js/pixel.js
+++ b/ui/src/main/resources/static/assets/js/pixel.js
@@ -36,7 +36,7 @@ d.addEventListener("DOMContentLoaded", function (event) {
setTimeout(function () {
preloader.classList.add('show');
- $("#preloader-img").fadeOut(200);
+ $(".wrapper__preloader-img").fadeOut(200);
$( "body").trigger( "tplLoaded");
//alert($(".preloader-img"));
}, 1500);
diff --git a/ui/src/main/resources/static/css/custom.css b/ui/src/main/resources/static/css/custom.css
index 773f7831e..78d28b7a7 100644
--- a/ui/src/main/resources/static/css/custom.css
+++ b/ui/src/main/resources/static/css/custom.css
@@ -206,4 +206,77 @@ h4[class^="h"],
h5[class^="h"],
h6[class^="h"] {
font-family: 'League Spartan', sans-serif!important;
+}
+
+/* preloader style */
+
+.wrapper__preloader-img {
+ width:550px;
+ height:550px;
+}
+#preloader-img {
+ position: absolute;
+ border-radius: 8px;
+ width:100%;
+ height:100%;
+}
+
+.wrapper__preloader-img svg {
+ position: absolute;
+ width:50px;
+ height:50px;
+ bottom: 10px;
+ right: 10px;
+ mix-blend-mode:difference;
+}
+
+/* flip card */
+
+.card-flip {
+ perspective: 1000px;
+}
+
+.card-flip-inner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ transition: transform 0.8s;
+ transform-style: preserve-3d;
+ border-radius: 1rem;
+}
+
+.card-flip:hover .card-flip-inner {
+ transform: rotateY(180deg);
+}
+
+.card-flip .wrapper-card-img {
+ position: relative;
+ background-color: #fff;
+ border-radius: 1rem;
+}
+
+.card-flip .card-body {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ -webkit-backface-visibility: hidden; /* Safari */
+ backface-visibility: hidden;
+ border-radius: 1rem;
+
+ color: white;
+ transform: rotateY(180deg);
+}
+
+
+
+/* PAGES */
+
+.home-page > main.bg-gray-200 {
+ background-color: #fff !important;
+}
+
+.home-page > main.bg-gray-200 > section.bg-white{
+ background-color: #f1efe7 !important;
}
\ No newline at end of file
diff --git a/ui/src/main/resources/templates/inc/navbar-home.html b/ui/src/main/resources/templates/inc/navbar-home.html
index dad53eb67..6a7e811ca 100644
--- a/ui/src/main/resources/templates/inc/navbar-home.html
+++ b/ui/src/main/resources/templates/inc/navbar-home.html
@@ -1,14 +1,29 @@
-<nav class="navbar navbar-expand-lg navbar-transparent navbar-light navbar-theme-soft">
- <div class="container-fluid position-relative">
- <a class="navbar-brand me-lg-5" href="/"><img height="35" src="/assets/img/nudger-logo-small.png"></a>
-
- <div class="navbar-collapse collapse me-auto" id="navbar_global">
- <!--/* Navbar mantras*/-->
- <th:block th:insert="~{inc/navbar-logo.html}"></th:block>
+<header class="navbar navbar-expand-lg navbar-light navbar-theme-soft">
+ <div class="container">
+ <div class="d-flex align-items-center">
+ <a class="navbar-brand me-lg-3" href="/">
+ <img height="35" src="/assets/img/nudger-logo-small.png">
+ </a>
+
+ <div class="navbar-collapse collapse me-auto" id="navbar_global">
+ <!--/* Navbar mantras*/-->
+ <th:block th:insert="~{inc/navbar-logo.html}"></th:block>
+ </div>
</div>
- <!--/* Navbar mantras*/-->
- <th:block th:insert="~{inc/navbar-mantras.html}"></th:block>
-
- </div>
-</nav>
\ No newline at end of file
+ <div class="d-flex align-items-center">
+ <!--/* Navbar mantras*/-->
+ <ul class="navbar-nav navbar-nav-hover align-items-lg-center">
+ <li class="nav-item dropdown">
+ <a href="#" class="nav-link dropdown-toggle" id="mantrasDropdown" aria-expanded="false" data-bs-toggle="dropdown">Nos mantras <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a>
+ <div class="dropdown-menu dropdown-megamenu-sm px-0 py-2 p-lg-4" aria-labelledby="mantrasDropdown">
+ <ul class="list-style-none">
+ <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/ecoscore">Evaluation écologique : eco-score</a></li>
+ <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/compensation-ecologique">Compensation environnementale</a></li>
+ <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/opendata">Numérique Responsable</a></li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+ </div>
+</header>
\ No newline at end of file
diff --git a/ui/src/main/resources/templates/inc/navbar-logo.html b/ui/src/main/resources/templates/inc/navbar-logo.html
index 73d92c955..517f31d33 100644
--- a/ui/src/main/resources/templates/inc/navbar-logo.html
+++ b/ui/src/main/resources/templates/inc/navbar-logo.html
@@ -1,11 +1,11 @@
- <div class="navbar-collapse-header">
- <div class="row">
- <div class="col-6 collapse-brand">
- <a href="/"><img height="35" src="/assets/img/nudger-logo-small.png"></a>
- </div>
- <div class="col-6 collapse-close">
- <a href="#navbar_global" class="fas fa-times" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a>
- </div>
- </div>
- </div>
+<div class="navbar-collapse-header">
+ <div class="row">
+ <div class="col-6 collapse-brand">
+ <a href="/"><img height="35" src="/assets/img/nudger-logo-small.png"></a>
+ </div>
+ <div class="col-6 collapse-close">
+ <a href="#navbar_global" class="fas fa-times" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a>
+ </div>
+ </div>
+</div>
diff --git a/ui/src/main/resources/templates/inc/navbar-mantras.html b/ui/src/main/resources/templates/inc/navbar-mantras.html
index 2d61cbf80..c4099356a 100644
--- a/ui/src/main/resources/templates/inc/navbar-mantras.html
+++ b/ui/src/main/resources/templates/inc/navbar-mantras.html
@@ -1,12 +1,12 @@
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
- <li class="nav-item dropdown ">
- <a href="#" class="nav-link dropdown-toggle" id="mantrasDropdown" aria-expanded="false" data-bs-toggle="dropdown">Nos mantras <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a>
- <div class="dropdown-menu dropdown-megamenu-sm px-0 py-2 p-lg-4" aria-labelledby="mantrasDropdown">
- <ul class="list-style-none">
- <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/ecoscore">Evaluation écologique : eco-score</a></li>
- <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/compensation-ecologique">Compensation environnementale</a></li>
- <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/opendata">Numérique Responsable</a></li>
- </ul>
- </div>
- </li>
+ <li class="nav-item dropdown">
+ <a href="#" class="nav-link dropdown-toggle" id="mantrasDropdown" aria-expanded="false" data-bs-toggle="dropdown">Nos mantras <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a>
+ <div class="dropdown-menu dropdown-megamenu-sm px-0 py-2 p-lg-4" aria-labelledby="mantrasDropdown">
+ <ul class="list-style-none">
+ <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/ecoscore">Evaluation écologique : eco-score</a></li>
+ <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/compensation-ecologique">Compensation environnementale</a></li>
+ <li class="mb-2 megamenu-item"><a class="megamenu-link" href="/opendata">Numérique Responsable</a></li>
+ </ul>
+ </div>
+ </li>
</ul>
\ No newline at end of file
diff --git a/ui/src/main/resources/templates/inc/preloader.html b/ui/src/main/resources/templates/inc/preloader.html
index e1462bc87..0e4a9dbf6 100644
--- a/ui/src/main/resources/templates/inc/preloader.html
+++ b/ui/src/main/resources/templates/inc/preloader.html
@@ -1,21 +1,14 @@
-<div class="preloader bg-gray-200 flex-column justify-content-center align-items-center">
- <img class="mb-4" id="preloader-img" style=" border-radius: 8px; width:550px; height:auto" th:src="${loaderImg}">
- <br/>
- <svg id="loader-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-
-
- <circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
- <line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
- <animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
- </line>
- <line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
- <animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
- </line>
-
-
-
- </svg>
-
-
-
-</div>
\ No newline at end of file
+<article class="preloader bg-gray-200 justify-content-center align-items-center">
+ <div class="position-relative wrapper__preloader-img">
+ <img id="preloader-img" th:src="${loaderImg}">
+ <svg id="loader-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+ <circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
+ <line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
+ <animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
+ </line>
+ <line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
+ <animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
+ </line>
+ </svg>
+ </div>
+</article>
\ No newline at end of file
diff --git a/ui/src/main/resources/templates/index.html b/ui/src/main/resources/templates/index.html
index 682a72d07..f2e298a9d 100644
--- a/ui/src/main/resources/templates/index.html
+++ b/ui/src/main/resources/templates/index.html
@@ -26,7 +26,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
-<body>
+<body class="home-page">
<!--/* Navbar */-->
<th:block th:insert="~{inc/navbar-home.html}"></th:block>
@@ -71,7 +71,31 @@
</div>
</section>
- <section class="bg-white mt-4 text-center py-4">
+ <section class="bg-white text-center py-4">
+ <h1 class="mb-3">Nos catégories évaluées</h1>
+ <p class="lead mb-0">L'assurance de bien choisir</p>
+ </section>
+
+ <section class="container py-5">
+ <div class="row">
+ <div class="col-12 col-md-6 col-lg-3 mb-3" th:each ="vertical : ${verticals}">
+ <div class="card card-flip shadow">
+ <div class="card-flip-inner">
+ <div class="wrapper-card-img">
+ <img th:src="${vertical.homeLogo.i18n(siteLanguage)}" class="card-img-top rounded-top" alt="img TV">
+ </div>
+ <div class="card-body bg-primary">
+ <h3 class="h5 card-title text-white mt-3" th:text="${vertical.homeTitle.i18n(siteLanguage)}"></h3>
+ <p class="card-text" th:text="${vertical.homeDescription.i18n(siteLanguage)}"></p>
+ <a th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}" class="btn btn-primary btn-sm">Découvrir</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="bg-white text-center py-4">
<h1 class="mb-3">Consommons peu, consommons bien</h1>
<p class="lead mb-0">Un coup de main éthique et ouvert pour amoindrir l'impact de votre shopping en ligne.</p>
</section>
@@ -85,67 +109,70 @@ <h1 class="mb-3">Consommons peu, consommons bien</h1>
<div class="row justify-content-center">
- <div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
+
+
+ <div class="col-12 col-md-6 mb-3">
<div class="card bg-white border-gray-300 text-gray p-4 h-100">
<div class="card-header bg-white border-0 pb-0">
- <h2 class="h4 m-0">Eco-score</h2>
+ <h2 class="h4 m-0">Modèle ouvert</h2>
</div>
<div class="card-body">
<p>
- <th:block th:with="path='WIDGETS/accueil-ecoscore/'">
+ <th:block th:with="path='WIDGETS/accueil-modele-ouvert/'">
<th:block th:insert="~{inc/wiki.html}"></th:block>
</th:block>
</p>
- <a href="#evaluation-ecologique" class="btn btn-sm btn-primary animate-up-2 mt-3">Score écologique</a>
+ <a href="#modele-ouvert" class="btn btn-sm btn-primary animate-up-2 mt-3">Modèle ouvert</a>
</div>
</div>
- </div>
-
- <div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
- <div class="card bg-white border-gray-300 text-gray p-4 h-100">
+ </div>
+
+
+ <div class="col-12 col-md-6 mb-3">
+ <div class="card bg-white border-gray-300 text-gray p-4 h-100x ">
<div class="card-header bg-white border-0 pb-0">
- <h2 class="h4 m-0">Compensation</h2>
+ <h2 class="h4 m-0">Data responsable</h2>
</div>
<div class="card-body">
<p>
- <th:block th:with="path='WIDGETS/accueil-compensation/'">
+ <th:block th:with="path='WIDGETS/accueil-data-responsable'">
<th:block th:insert="~{inc/wiki.html}"></th:block>
</th:block>
</p>
- <a href="#compensation-carbone" class="btn btn-sm btn-primary animate-up-2 mt-3">Compensation écologique</a>
+ <a href="#data-responsable" class=" level btn btn-sm btn-primary animate-up-2 mt-3">Data responsable</a>
</div>
</div>
</div>
+
<div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
<div class="card bg-white border-gray-300 text-gray p-4 h-100">
<div class="card-header bg-white border-0 pb-0">
- <h2 class="h4 m-0">Modèle ouvert</h2>
+ <h2 class="h4 m-0">Eco-score</h2>
</div>
<div class="card-body">
<p>
- <th:block th:with="path='WIDGETS/accueil-modele-ouvert/'">
+ <th:block th:with="path='WIDGETS/accueil-ecoscore/'">
<th:block th:insert="~{inc/wiki.html}"></th:block>
</th:block>
</p>
- <a href="#modele-ouvert" class="btn btn-sm btn-primary animate-up-2 mt-3">Modèle ouvert</a>
+ <a href="#evaluation-ecologique" class="btn btn-sm btn-primary animate-up-2 mt-3">Score écologique</a>
</div>
</div>
- </div>
-
-
+ </div>
+
<div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
- <div class="card bg-white border-gray-300 text-gray p-4 h-100x ">
+ <div class="card bg-white border-gray-300 text-gray p-4 h-100">
<div class="card-header bg-white border-0 pb-0">
- <h2 class="h4 m-0">Data responsable</h2>
+ <h2 class="h4 m-0">Compensation</h2>
</div>
<div class="card-body">
<p>
- <th:block th:with="path='WIDGETS/accueil-data-responsable'">
+ <th:block th:with="path='WIDGETS/accueil-compensation/'">
<th:block th:insert="~{inc/wiki.html}"></th:block>
</th:block>
</p>
- <a href="#data-responsable" class=" level btn btn-sm btn-primary animate-up-2 mt-3">Data responsable</a>
+ <a href="#compensation-carbone" class="btn btn-sm btn-primary animate-up-2 mt-3">Compensation écologique</a>
</div>
</div>
</div>
@@ -155,71 +182,40 @@ <h2 class="h4 m-0">Data responsable</h2>
</div>
- <section class=" bg-white mt-4 text-center py-4">
+ <section class=" bg-white text-center py-4">
<h1 class="mb-3">Les chiffres clés</h1>
<p class="lead mb-0">Avec animation, c'est plus funky</p>
</section>
- <section class=" container text-center py-4">
- <div class="row justify-content-center">
- <div class="col-12 col-md-6 col-lg-4 py-3">
- <div class="icon icon-shape icon-shape-secondary me-2 me-md-0 mb-2">
- <span class="fas fa-box-open"></span>
- </div>
- <span class="counter display-3 text-secondary d-block" data-value="150" ></span>
- <span class="lead">Montant du coup de pouce à date de Nudger pour la planète</span>
- </div>
-
- <div class="col-12 col-md-6 col-lg-4 py-3">
- <div class="icon icon-shape icon-shape-secondary me-2 me-md-0 mb-2">
- <span class="fas fa-box-open"></span>
+ <section class=" container text-center py-4">
+ <div class="row justify-content-center">
+ <div class="col-12 col-md-6 col-lg-4 py-3">
+ <div class="icon icon-shape icon-shape-secondary me-2 me-md-0 mb-2">
+ <span class="fas fa-box-open"></span>
+ </div>
+ <span class="counter display-3 text-secondary d-block" data-value="150" ></span>
+ <span class="lead">Montant du coup de pouce à date de Nudger pour la planète</span>
</div>
- <span class="counter display-3 text-secondary d-block" th:data-value="${totalItems}" >15M+ Offres commerciales</span>
- <span class="lead">Un des comparateurs français les plus fournis</span>
- </div>
- <div class="col-12 col-md-6 col-lg-4 py-3">
- <div class="icon icon-shape icon-shape-secondary me-2 me-md-0 mb-2">
- <span class="fas fa-box-open"></span>
+ <div class="col-12 col-md-6 col-lg-4 py-3">
+ <div class="icon icon-shape icon-shape-secondary me-2 me-md-0 mb-2">
+ <span class="fas fa-box-open"></span>
+ </div>
+ <span class="counter display-3 text-secondary d-block" th:data-value="${totalItems}" >15M+ Offres commerciales</span>
+ <span class="lead">Un des comparateurs français les plus fournis</span>
</div>
- <span class="counter display-3 text-secondary d-block" th:data-value="${partners}" th:text="${partners}"></span>
- <span class="lead">Nombre de <a href="/partenaires"> de notre démarche. Toutes les plus grandes enseignes !</a></span>
- </div>
- </div>
- </section>
-
- <section class="bg-white mt-4 text-center py-4">
- <h1 class="mb-3">Nos catégories évaluées</h1>
- <p class="lead mb-0">L'assurance de bien choisir</p>
- </section>
- <section class="container">
- <div class="row">
- <div class="col-12 col-md-6 col-lg-3" th:each ="vertical : ${verticals}">
- <div class="blog-card">
- <div class="card shadow">
- <a th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}"><img th:src="${vertical.homeLogo.i18n(siteLanguage)}" class="card-img-top rounded-top" alt="Themesberg office"></a>
- <div class="card-body">
- <h2 class="h5">
- <a th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}" th:text="${vertical.homeTitle.i18n(siteLanguage)}"></a>
- </h2>
- <p class="card-text my-2" th:text="${vertical.homeDescription.i18n(siteLanguage)}"></p>
- </div>
- <div class="card-footer bg-white border-0 px-0 py-0">
- <div class="d-grid">
- <a class="btn btn-sm btn-secondary rounded-0 rounded-bottom" th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}">
- <span class="fas fa-book-open me-1"></span> Découvrir
- </a>
- </div>
- </div>
+ <div class="col-12 col-md-6 col-lg-4 py-3">
+ <div class="icon icon-shape icon-shape-secondary me-2 me-md-0 mb-2">
+ <span class="fas fa-box-open"></span>
</div>
+ <span class="counter display-3 text-secondary d-block" th:data-value="${partners}" th:text="${partners}"></span>
+ <span class="lead">Nombre de <a href="/partenaires"> de notre démarche. Toutes les plus grandes enseignes !</a></span>
</div>
</div>
- </div>
</section>
-
- <section class="bg-white mt-4 text-center py-4">
+ <section class="bg-white text-center py-4">
<h1 class="mb-3">Notre philosophie : le bien commun</h1>
<p class="lead mb-0">Découvrez nos valeurs et nos atouts</p>
</section>