From 93d666de98c26e497b0fe7eb24dc5037b4e3708e Mon Sep 17 00:00:00 2001
From: SofianeLasri <alasri250@gmail.com>
Date: Thu, 13 Jan 2022 18:13:08 +0100
Subject: [PATCH] test vitrine
---
.../{noon.png => sildur-vibrant.png} | Bin
pages/assets/css/styles.css | 53 ++++++++++++-
pages/client/includes/navbar.php | 2 +-
pages/client/vitrine.php | 74 +++++++++++++++++-
4 files changed, 126 insertions(+), 3 deletions(-)
rename data/images/backgrounds/{noon.png => sildur-vibrant.png} (100%)
diff --git a/data/images/backgrounds/noon.png b/data/images/backgrounds/sildur-vibrant.png
similarity index 100%
rename from data/images/backgrounds/noon.png
rename to data/images/backgrounds/sildur-vibrant.png
diff --git a/pages/assets/css/styles.css b/pages/assets/css/styles.css
index 63ff5470..e07d804e 100644
--- a/pages/assets/css/styles.css
+++ b/pages/assets/css/styles.css
@@ -62,4 +62,55 @@ .barreDeNavigation .inferieure .menuList>li>a .nav-icon img{
width: 75%;
margin-left: -1px;
animation-play-state: paused;
-}
\ No newline at end of file
+}
+/* Fin navbar */
+
+/* Intro vitrine */
+#intro{
+ width: 100%;
+ height: 95vh;
+ top: 0;
+}
+#vitrine-background-image{
+ display: none;
+ z-index: -1;
+ width: 100%;
+ height: 100%;
+ background-position: center!important;
+ background-size: cover!important;
+ background-repeat: no-repeat!important;
+}
+.intro-vitrine{
+ position: absolute;
+ display: flex;
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ height: 60vh;
+}
+.intro-vitrine .presentation{
+ display: flex;
+ width: 75%;
+}
+.intro-vitrine .presentation > *{
+ display: none;
+}
+.intro-vitrine .presentation .illustration{
+ width: 100%;
+ height: 100%;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+.intro-vitrine .presentation .description{
+ width: 90%;
+ /* display: flex; */
+ flex-direction: column;
+ justify-content: center;
+}
+.intro-vitrine h1, h2{
+ font-family: "Proxima Nova Bold"!important;
+}
+
+/* Fin intro vitrine */
\ No newline at end of file
diff --git a/pages/client/includes/navbar.php b/pages/client/includes/navbar.php
index 2c2b38ff..35a1114e 100644
--- a/pages/client/includes/navbar.php
+++ b/pages/client/includes/navbar.php
@@ -1,5 +1,5 @@
<!-- Navbar -->
-<div class="barreDeNavigation">
+<div id="navbar" class="barreDeNavigation">
<div class="superieure">
<nav class="container d-flex justify-content-end">
<a class="nav-link" href="#">Associer son compte</a>
diff --git a/pages/client/vitrine.php b/pages/client/vitrine.php
index 2568de4c..3a0fa44e 100644
--- a/pages/client/vitrine.php
+++ b/pages/client/vitrine.php
@@ -20,12 +20,84 @@
<!-- Inclusion dynamique de la navbar -->
<?=Client::getNavbar()?>
- <!-- Contenu de la page -->
+ <!-- Intro -->
+ <div id="intro">
+ <div id="vitrine-background-image" style="background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('<?=getWebsiteSetting("websiteUrl")?>data/images/backgrounds/sildur-vibrant.png');" bgImageUrl="<?=getWebsiteSetting("websiteUrl")?>data/images/backgrounds/sildur-vibrant.png"></div>
+ <div class="container intro-vitrine">
+ <div id="intro-presentation" class="presentation">
+ <div class="description">
+ <h1>Starisland</h1>
+ <p>Un petit paradis sur terre où règnent les vieux retraités, venus finir leur jours paisiblements.
+ <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ </p>
+ </div>
+ </div>
+ <div class="illustration" style="background-image: url('<?=getWebsiteSetting("websiteUrl")?></div>data/images/vitrine/let's%20go.png');" bgImageUrl="<?=getWebsiteSetting("websiteUrl")?></div>data/images/vitrine/let's%20go.png"></div>
+ </div>
+ </div>
+
+ <!-- Fin de l'intro -->
<?=Client::getFooter()?>
<script src="<?=getWebsiteSetting("websiteUrl")?>pages/assets/vendors/flickity/js/flickity.pkgd.min.js"></script>
<script type="text/javascript">
+ // https://stackoverflow.com/a/56341485
+ async function loadImages(imageUrlArray) {
+ const promiseArray = []; // create an array for promises
+ const imageArray = []; // array for the images
+
+ for (let imageUrl of imageUrlArray) {
+
+ promiseArray.push(new Promise(resolve => {
+
+ const img = new Image();
+ // if you don't need to do anything when the image loads,
+ // then you can just write img.onload = resolve;
+
+ img.onload = function() {
+ // do stuff with the image if necessary
+
+ // resolve the promise, indicating that the image has been loaded
+ resolve();
+ };
+
+ img.src = imageUrl;
+ imageArray.push(img);
+ }));
+ }
+
+ await Promise.all(promiseArray); // wait for all the images to be loaded
+ console.log("Toutes les images ont été chargées.");
+ return imageArray;
+ }
+
+ $(window).on("load", async function() {
+ // On va regarder si dans ce que l'on va afficher, il n'y a pas des images à charger
+ var imagesToLoad = [];
+ $(".intro-vitrine .presentation > *").each(async function() {
+ let hasABgImageToLoad = $(this).attr('bgImageUrl');
+ if (typeof hasABgImageToLoad !== 'undefined' && hasABgImageToLoad !== false) {
+ imagesToLoad.push(hasABgImageToLoad);
+ }
+ });
+ console.log("Images à charger:"+imagesToLoad);
+ await loadImages(imagesToLoad);
+ $(".intro-vitrine .presentation > *").fadeIn(1000);
+ $(".intro-vitrine .presentation .description").css("display", "flex"); // On a retiré la propriété flex pour faire le fadeIn
+
+ imagesToLoad = [];
+ setTimeout(async function(){
+ let hasABgImageToLoad = $("#vitrine-background-image:hidden").attr('bgImageUrl');
+ if (typeof hasABgImageToLoad !== 'undefined' && hasABgImageToLoad !== false) {
+ imagesToLoad.push(hasABgImageToLoad);
+ }
+ console.log("Images à charger:"+imagesToLoad);
+ await loadImages(imagesToLoad);
+ $("#vitrine-background-image:hidden").fadeIn(4000);
+ }, 1000)
+
+ });
</script>
</body>
--
GitLab