Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…to main
  • Loading branch information
Goulven.Furet authored and Goulven.Furet committed Dec 14, 2023
2 parents 52c6886 + 7fc5ff0 commit b7ce847
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 129 deletions.
2 changes: 1 addition & 1 deletion ui/src/main/resources/static/assets/js/pixel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
73 changes: 73 additions & 0 deletions ui/src/main/resources/static/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
39 changes: 27 additions & 12 deletions ui/src/main/resources/templates/inc/navbar-home.html
Original file line number Diff line number Diff line change
@@ -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>
<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>
20 changes: 10 additions & 10 deletions ui/src/main/resources/templates/inc/navbar-logo.html
Original file line number Diff line number Diff line change
@@ -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>

20 changes: 10 additions & 10 deletions ui/src/main/resources/templates/inc/navbar-mantras.html
Original file line number Diff line number Diff line change
@@ -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>
35 changes: 14 additions & 21 deletions ui/src/main/resources/templates/inc/preloader.html
Original file line number Diff line number Diff line change
@@ -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>
<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>
Loading

0 comments on commit b7ce847

Please sign in to comment.