diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index 2bd6dce..c33da02 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -1 +1,81 @@ -// Empty. +body { + > header { + .rest-in-game-banner { + &::before { + background-color: $color-primary; + content: ' '; + } + } + } + + > footer { + .share { + width: 1.6rem; + } + + .list-inline { + .list-inline-item { + &::after { + right: 0; + display: inline-block; + width: 0.2rem; + margin-left: 0.8rem; + background-color: $color-light; + content: '\00A0'; + } + + &:last-child::after { + display: none; + } + } + } + + svg { + fill: $color-light; + } + + .downlink { + > a { + display: inline-block; + } + } + + @include media-breakpoint-up(md) { + .downlink { + position: relative; + height: 6rem; + + > a { + position: absolute; + top: -6rem; + left: 50%; + width: 11rem; + max-height: 8rem; + transform: translateX(-50%); + + > span { + position: relative; + top: -3rem; + } + } + } + } + + #page-up { + position: fixed; + right: 0; + bottom: 0; + display: none; + padding: 0; + margin-right: 1rem; + + img { + width: 3rem; + } + + &.show { + display: block; + } + } + } +} diff --git a/sass/fo.scss b/sass/fo.scss index 087760c..7a221c0 100644 --- a/sass/fo.scss +++ b/sass/fo.scss @@ -4,6 +4,7 @@ @import "./utilities/variables"; // * VENDOR +@import "@ldc-web/cookie-notice"; @import "./vendor/bootstrap"; // * BASE @@ -11,3 +12,6 @@ @import "./base/fonts"; @import "./base/common"; @import "./base/layout"; + +// * PAGES +@import "./pages/home"; diff --git a/sass/pages/.gitkeep b/sass/pages/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/sass/pages/_home.scss b/sass/pages/_home.scss new file mode 100644 index 0000000..aec0ac2 --- /dev/null +++ b/sass/pages/_home.scss @@ -0,0 +1,87 @@ +.home-page { + .picture-100-win { + left: 40%; + transform: translateX(-60%); + } + + @include media-breakpoint-up(xl) { + .main-rotate { + transform: rotateZ(-5deg); + } + + .anti-rotate { + transform: rotateZ(5deg); + } + } + + .badge-vertical { + width: 4rem; + padding: 0.8rem; + + @include media-breakpoint-up(md) { + width: 7rem; + padding: 1.3rem; + } + + &::after { + display: block; + width: 0.4rem; + height: 200%; + margin: 0 auto; + background-color: $color-white; + content: ' '; + } + + &:last-child::after { + display: none; + } + } + + .picture-products { + max-width: 20rem; + } + + #carousel-lots { + .carousel-text-pannel { + max-width: 40rem; + } + + .carousel-item { + height: 55rem; + + @include media-breakpoint-up(sm) { + height: 48rem; + } + + @include media-breakpoint-up(md) { + height: 40rem; + } + } + + img { + max-height: 20rem; + + @include media-breakpoint-up(md) { + max-height: inherit; + } + } + + .main-rotate { + transform: rotateZ(-1deg); + } + + .anti-rotate { + transform: rotateZ(1deg); + } + + @include media-breakpoint-up(md) { + .main-rotate { + transform: rotateZ(-5deg); + } + + .anti-rotate { + transform: rotateZ(5deg); + } + } + } +} diff --git a/sass/vendor/_bootstrap.scss b/sass/vendor/_bootstrap.scss index 513133f..f2ded4e 100644 --- a/sass/vendor/_bootstrap.scss +++ b/sass/vendor/_bootstrap.scss @@ -36,6 +36,7 @@ @import "bootstrap/scss/utilities"; @import "bootstrap/scss/close"; @import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/carousel"; // 6. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "bootstrap/scss/utilities/api"; diff --git a/ts/base/common.ts b/ts/base/common.ts index 696ea68..7c31875 100644 --- a/ts/base/common.ts +++ b/ts/base/common.ts @@ -41,4 +41,27 @@ document.addEventListener("DOMContentLoaded", function () { }); }, 300); } + + const scrollTop = (target: string, offset: number = 0) => { + const targetElement = document.getElementById(target); + if (!targetElement) throw new Error(`scrollTop requires ${target} to exist`); + const top = targetElement.getBoundingClientRect().top, + t = window.scrollY + top - offset; + scrollTo({ + top: t, + behavior: "smooth" + }); + }; + + const pageUp = document.getElementById("page-up"); + if (pageUp) { + pageUp.addEventListener("click", () => scrollTop("content-container", 150)), + document.addEventListener("scroll", () => { + if (window.scrollY > 250) { + pageUp.classList.add("show"); + return; + } + pageUp.classList.remove("show"); + }); + } }); diff --git a/ts/fo.ts b/ts/fo.ts index ae13302..3aa8c24 100644 --- a/ts/fo.ts +++ b/ts/fo.ts @@ -10,6 +10,9 @@ import "./utilities/vue-fo"; // CUSTOM import "./base/common"; +// PAGES +import "./pages/home"; + // Cookies import CookieNotice from "@ldc-web/cookie-notice"; window.CookieNotice = CookieNotice; diff --git a/ts/index.d.ts b/ts/index.d.ts index e63fb02..48020d5 100644 --- a/ts/index.d.ts +++ b/ts/index.d.ts @@ -2,9 +2,6 @@ export { }; import type CookieNotice from "@ldc-web/cookie-notice"; import { AxiosStatic } from "axios"; -// import type { -// Axios -// } from "./../../../ts/front-definition.d.ts"; declare global { diff --git a/ts/pages/.gitkeep b/ts/pages/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/ts/pages/home.ts b/ts/pages/home.ts new file mode 100644 index 0000000..f684535 --- /dev/null +++ b/ts/pages/home.ts @@ -0,0 +1,46 @@ +import { Carousel } from "bootstrap"; + +document.addEventListener("DOMContentLoaded", function () { + + if (!document.querySelector("main.home-page")) { + return; + } + + + // * BR Carousel (With BS) + const lotsCarousel = document.getElementById("carousel-lots"); + if (lotsCarousel) { + const playPauseBtn = document.getElementById("coupons-carousel-play-btn"); + const carousel = Carousel.getOrCreateInstance(lotsCarousel, { + // * Start cycle on swipe (or play btn) + ride: true + }); + let isRunning = false; + + if (playPauseBtn) { + const updatePlayBtnStatus = () => { + // * Toggle once + if (!isRunning) { + playPauseBtn.children.item(0)?.classList.remove("d-none"); + playPauseBtn.children.item(1)?.classList.add("d-none"); + } else { + playPauseBtn.children.item(0)?.classList.add("d-none"); + playPauseBtn.children.item(1)?.classList.remove("d-none"); + } + }; + playPauseBtn.addEventListener("click", () => { + if (isRunning) { + carousel.pause(true); + } else { + carousel.cycle(); + } + isRunning = !isRunning; + updatePlayBtnStatus(); + }); + lotsCarousel.addEventListener("slide.bs.carousel", () => { + isRunning = true; + updatePlayBtnStatus(); + }); + } + } +}); diff --git a/ts/utilities/fontawesome.ts b/ts/utilities/fontawesome.ts index 5d12d53..489163f 100644 --- a/ts/utilities/fontawesome.ts +++ b/ts/utilities/fontawesome.ts @@ -27,7 +27,9 @@ import { faEyeSlash, faFolderOpen, faListUl, + faPause, faPencil, + faPlay, faPlus, faQuestionCircle, faRedoAlt, @@ -79,12 +81,12 @@ library.add(faListUl); library.add(faBan); library.add(faCircleExclamation); library.add(faCircleInfo); - -// Front library.add(faChevronLeft); library.add(faChevronRight); library.add(faCircleXmark); library.add(faCircleNotch); library.add(faSliders); +library.add(faPlay); +library.add(faPause); dom.watch(); diff --git a/views/fo/confirm-email.blade.php b/views/fo/confirm-email.blade.php index 29c4b1c..41e038c 100644 --- a/views/fo/confirm-email.blade.php +++ b/views/fo/confirm-email.blade.php @@ -11,7 +11,7 @@ @if ($result === true)
Compte activé avec succès, vous pouvez désormais vous connecter
@if (session('success'))Cliquez sur le bouton ci-dessous pour vous inscrire.
Votre profil
+ + + + --> @@ -57,7 +57,7 @@
diff --git a/views/fo/verifyemail.blade.php b/views/fo/verifyemail.blade.php index 1db1cc8..6d57519 100644 --- a/views/fo/verifyemail.blade.php +++ b/views/fo/verifyemail.blade.php @@ -192,7 +192,7 @@
Envoyer vos preuves de gain
-