WIP: Adding the 'on se devoile' page
This commit is contained in:
Noah Lancien
parent
a00facf25d
commit
b16eb6ceb7
32 changed files with 1650 additions and 218 deletions
|
|
@ -24,7 +24,7 @@ class HomeController extends Controller
|
|||
$sectionModels = Section::query()->where('page_id', $staticPageModel->id)->get();
|
||||
$stripModels = Strip::query()->where('published', true)
|
||||
->orderBy('publish_at', 'DESC')
|
||||
->limit(12)
|
||||
->limit(6)
|
||||
->with('news')
|
||||
->get();
|
||||
$newsModels = News::query()->where('published', true)
|
||||
|
|
|
|||
30
app/Http/Controllers/Fo/StaticPageController.php
Normal file
30
app/Http/Controllers/Fo/StaticPageController.php
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Fo;
|
||||
|
||||
use App\Enums\StaticPageType;
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Models\HistoricalMilestone;
|
||||
use App\Models\Section;
|
||||
use App\Models\Site;
|
||||
use App\Models\StaticPage;
|
||||
|
||||
class StaticPageController extends Controller
|
||||
{
|
||||
/**
|
||||
* Display the 'unveil' page.
|
||||
*
|
||||
* @return \Illuminate\Contracts\View\View
|
||||
*/
|
||||
public function unveil(): \Illuminate\Contracts\View\View
|
||||
{
|
||||
$staticPageModel = StaticPage::query()->where('type', StaticPageType::unveil)->first();
|
||||
$sectionModels = Section::query()->where('page_id', $staticPageModel->id)->get();
|
||||
$historicalMilestoneModels = HistoricalMilestone::query()
|
||||
->orderBy('year', 'ASC')
|
||||
->get();
|
||||
$siteModel = Site::query()->first();
|
||||
|
||||
return view('fo.pages.unveil', compact('staticPageModel', 'sectionModels', 'historicalMilestoneModels', 'siteModel'));
|
||||
}
|
||||
}
|
||||
14
package-lock.json
generated
14
package-lock.json
generated
|
|
@ -9,10 +9,12 @@
|
|||
"@babel/core": "^7.22.11",
|
||||
"@babel/types": "^7.21.2",
|
||||
"@erbelion/vite-plugin-laravel-purgecss": "^0.2.3",
|
||||
"@fancyapps/ui": "^5.0.33",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.5",
|
||||
"@ldc-web/cookie-notice": "^4.0.1",
|
||||
"@sipec/vue3-tags-input": "^3.0.4",
|
||||
"@types/bootstrap": "^5.2.7",
|
||||
"@types/node": "^20.8.2",
|
||||
|
|
@ -905,6 +907,12 @@
|
|||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fancyapps/ui": {
|
||||
"version": "5.0.33",
|
||||
"resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-5.0.33.tgz",
|
||||
"integrity": "sha512-nYW7ntjhrpqoLz/vA9KpJ2zJ5gXRB7rpFKXWjW4GC1f2st/IoI1Oy2TEEz0xABIlvPTCuoMXaT1X3UC7bP97rA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
|
||||
|
|
@ -1061,6 +1069,12 @@
|
|||
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ldc-web/cookie-notice": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-4.0.1.tgz",
|
||||
"integrity": "sha1-NvTFoKF7Ki/+3PDr9hmqjjTFuZE=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@
|
|||
"@babel/core": "^7.22.11",
|
||||
"@babel/types": "^7.21.2",
|
||||
"@erbelion/vite-plugin-laravel-purgecss": "^0.2.3",
|
||||
"@fancyapps/ui": "^5.0.33",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.5",
|
||||
"@ldc-web/cookie-notice": "^4.0.1",
|
||||
"@sipec/vue3-tags-input": "^3.0.4",
|
||||
"@types/bootstrap": "^5.2.7",
|
||||
"@types/node": "^20.8.2",
|
||||
|
|
|
|||
51
resources/lang/fr/cookie-notice.php
Normal file
51
resources/lang/fr/cookie-notice.php
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<?php
|
||||
|
||||
// * Version 4.0.1
|
||||
// phpcs:disable
|
||||
return [
|
||||
'button_customize_cookies' => 'Personnaliser les cookies',
|
||||
'button_close_cookies' => 'Fermer la fenêtre des cookies',
|
||||
'button_forbid' => 'Interdire',
|
||||
'button_allow' => 'Autoriser',
|
||||
'button_forbid_all' => 'Tout refuser',
|
||||
'button_allow_all' => 'Tout accepter',
|
||||
'button_forbid_all_title' => 'Refuser tous les cookies et fermer le panneau des cookies',
|
||||
'button_allow_all_title' => 'Accepter tous les cookies et fermer le panneau des cookies',
|
||||
'button_customize' => 'Personnaliser',
|
||||
'button_back' => 'Retour',
|
||||
'button_title_open_new_tab' => 'Ouvrir le lien dans un nouvel onglet',
|
||||
'banner_title' => 'Le site internet :site_name utilise des cookies !',
|
||||
'banner_text' => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques.
|
||||
Vous pouvez changer d’avis à tout moment en cliquant sur l’icône présente sur chaque page de notre site.
|
||||
En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l’utilisation de technologies de suivi nécessaires à leur bon fonctionnement.',
|
||||
'modal_title' => 'Fenêtre de gestion de cookies',
|
||||
'panel_title' => 'Panneau de gestion des cookies',
|
||||
'panel_content' => 'Contenu du panneau des cookies',
|
||||
'panel_subtitle' => 'Le respect de votre vie privée est notre priorité',
|
||||
'panel_details' => 'Les fonctionnalités de ce site s’appuient sur des services proposés par des tiers. Si vous acceptez, ces tiers déposeront des cookies qui vous permettront de visualiser sur le site du contenu hébergé par ces tiers. Via ces cookies, ces tiers collecteront et utiliseront vos données de navigation pour des finalités qui leur sont propres, conformément à leur politique de confidentialité (lien ci-dessous). Cette page vous permet de donner ou de retirer votre consentement, soit globalement soit service par service.',
|
||||
'picture_cookie_title' => 'Image d’un bon gros cookie',
|
||||
'navigation_title' => 'Navigation du panneau des cookies',
|
||||
'custom' => [
|
||||
'analytics' => [
|
||||
'title' => 'Google Analytics',
|
||||
'description' => 'Les services de mesure d’audience permettent de générer des statistiques de fréquentation utiles à l’amélioration du site.',
|
||||
],
|
||||
'youtube' => [
|
||||
'name' => 'Youtube',
|
||||
'description' => 'Les cookies placés via les services de partage de vidéos sont destinés à permettre à l’utilisateur de visionner des contenus multimédias directement sur le site.',
|
||||
'labelLink' => 'En apprendre plus',
|
||||
'warning' => 'Vous devez accepter les cookies pour visionner cette vidéo',
|
||||
],
|
||||
'matomo' => [
|
||||
'title' => 'Matomo',
|
||||
'description' => 'Les services de mesure d’audience permettent de générer des statistiques de fréquentation utiles à l’amélioration du site.',
|
||||
'labelLink' => 'En apprendre plus',
|
||||
],
|
||||
'recaptcha' => [
|
||||
'title' => 'reCAPTCHA',
|
||||
'description' => 'Les cookies qui sont déposés via le recaptcha sur les formulaires ont pour finalité d’empêcher que ceux-ci ne soient soumis par des robots.',
|
||||
'labelLink' => 'En apprendre plus',
|
||||
'warning' => 'Vous devez accepter les cookies pour envoyer le formulaire',
|
||||
]
|
||||
]
|
||||
];
|
||||
|
|
@ -1 +1,110 @@
|
|||
// Empty.
|
||||
.video-frame {
|
||||
.video-thumbnail {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-play-button {
|
||||
top: calc(50% - (15% / 2));
|
||||
left: calc(50% - (15% / 2));
|
||||
height: 15%;
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// * Top curve for primary sections
|
||||
.border-top-curved-primary {
|
||||
padding-top: 6rem;
|
||||
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 99' fill='none'%3E%3Cpath d='M0.5 98.5L0.499996 0.678555C124.136 38.9283 266.621 33.2224 389.5 0.650116L389.5 98.5L0.5 298.5Z' fill='#{urlencodecolor($color-primary)}' stroke='#{urlencodecolor($color-primary)}'/%3E%3C/svg%3E");
|
||||
border-image-outset: 1;
|
||||
border-image-repeat: inherit;
|
||||
border-image-slice: 85 0;
|
||||
border-image-width: 6rem 0 0 0;
|
||||
}
|
||||
|
||||
// * Top curve for white sections
|
||||
.border-top-curved-white {
|
||||
padding-top: 6rem;
|
||||
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 99' fill='#{urlencodecolor($color-primary)}'%3E%3Crect width='100%25' height='100%25'/%3E%3Cpath d='M0.5 98.5L0.499996 0.678555C124.136 38.9283 266.621 33.2224 389.5 0.650116L389.5 98.5L0.5 298.5Z' fill='#{urlencodecolor($color-white)}' stroke='#{urlencodecolor($color-white)}'/%3E%3C/svg%3E"); border-image-outset: 1;
|
||||
border-image-repeat: inherit;
|
||||
border-image-slice: 85 0;
|
||||
border-image-width: 6rem 0 0 0;
|
||||
}
|
||||
|
||||
// Map on all colors
|
||||
@each $idx, $color in $theme-colors {
|
||||
// Tilde svg
|
||||
.tilde-#{$idx} {
|
||||
@include tilde($color);
|
||||
|
||||
height: 2rem;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// Text bubbles with the spike at the bottom side
|
||||
.text-bubble-top-#{$idx} {
|
||||
&::before {
|
||||
@include text-bubble-top($color);
|
||||
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 12rem;
|
||||
background-size: 100% 100%;
|
||||
content: " ";
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.plus-corner-#{$idx} {
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
content: "+";
|
||||
}
|
||||
|
||||
right: -1.25rem;
|
||||
bottom: -1.5rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 5rem;
|
||||
background-color: $color;
|
||||
|
||||
/** stylelint-disable-next-line */
|
||||
clip-path: xywh(0 -5% 65% 75% round 15% 0);
|
||||
color: #fff;
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// LLLLLLLLLLL GGGGGGGGGGGGG
|
||||
// L:::::::::L GGG::::::::::::G
|
||||
// L:::::::::L GG:::::::::::::::G
|
||||
// LL:::::::LL G:::::GGGGGGGG::::G
|
||||
// L:::::L G:::::G GGGGGG
|
||||
// L:::::L G:::::G
|
||||
// L:::::L G:::::G
|
||||
// L:::::L G:::::G GGGGGGGGGG
|
||||
// L:::::L G:::::G G::::::::G
|
||||
// L:::::L G:::::G GGGGG::::G
|
||||
// L:::::L G:::::G G::::G
|
||||
// L:::::L LLLLLL G:::::G G::::G
|
||||
// LL:::::::LLLLLLLLL:::::L G:::::GGGGGGGG::::G
|
||||
// L::::::::::::::::::::::L GG:::::::::::::::G
|
||||
// L::::::::::::::::::::::L GGG::::::GGG:::G
|
||||
// LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG
|
||||
@include media-breakpoint-up(lg) {
|
||||
// * Top curve for blue sections
|
||||
.border-top-curved-primary {
|
||||
border-image-slice: 100% 0;
|
||||
}
|
||||
|
||||
// * Top curve for white sections
|
||||
.border-top-curved-white {
|
||||
border-image-slice: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -132,7 +132,35 @@ body {
|
|||
height: inherit;
|
||||
|
||||
.swiper-banner {
|
||||
height: 90vh;
|
||||
height: 100vh;
|
||||
|
||||
.swiper-banner-pagination {
|
||||
bottom: 2rem;
|
||||
left: 5%;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
position: absolute;
|
||||
bottom: 0.25rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 2px solid;
|
||||
border-color: $color-white;
|
||||
border-radius: 4rem;
|
||||
background-size: cover;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
bottom: 0;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-color: $color-quad;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-arrow {
|
||||
|
|
@ -141,63 +169,6 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
// * Top curve for blue sections
|
||||
.border-top-curved-primary {
|
||||
padding-top: 6rem;
|
||||
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 99' fill='none'%3E%3Cpath d='M0.5 98.5L0.499996 0.678555C124.136 38.9283 266.621 33.2224 389.5 0.650116L389.5 98.5L0.5 298.5Z' fill='#{urlencodecolor($color-primary)}' stroke='#{urlencodecolor($color-primary)}'/%3E%3C/svg%3E");
|
||||
border-image-outset: 1;
|
||||
border-image-repeat: inherit;
|
||||
border-image-slice: 85 0;
|
||||
border-image-width: 6rem 0 0 0;
|
||||
}
|
||||
|
||||
// * Top curve for white sections
|
||||
.border-top-curved-white {
|
||||
padding-top: 6rem;
|
||||
// border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 57' fill='none'%3E%3Cpath d='M0.499972 29.1318L0.500005 0.499966L389.5 0.5L389.5 29.1157C266.602 61.7376 124.072 67.4412 0.499972 29.1318Z' fill='#{urlencodecolor($color-primary)}' stroke='#{urlencodecolor($color-primary)}'/%3E%3C/svg%3E");
|
||||
// border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 57' fill='#{urlencodecolor($color-white)}'%3E%3Crect width='100%25' height='100%25'/%3E%3Cpath d='M0.499972 29.1318L0.500005 0.499966L389.5 0.5L389.5 29.1157C266.602 61.7376 124.072 67.4412 0.499972 29.1318Z' fill='#{urlencodecolor($color-primary)}' stroke='#{urlencodecolor($color-primary)}'/%3E%3C/svg%3E");
|
||||
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 99' fill='#{urlencodecolor($color-primary)}'%3E%3Crect width='100%25' height='100%25'/%3E%3Cpath d='M0.5 98.5L0.499996 0.678555C124.136 38.9283 266.621 33.2224 389.5 0.650116L389.5 98.5L0.5 298.5Z' fill='#{urlencodecolor($color-white)}' stroke='#{urlencodecolor($color-white)}'/%3E%3C/svg%3E");
|
||||
border-image-outset: 1;
|
||||
border-image-repeat: inherit;
|
||||
border-image-slice: 85 0;
|
||||
border-image-width: 6rem 0 0 0;
|
||||
}
|
||||
|
||||
.text-bubble-top-sixt {
|
||||
&::before {
|
||||
@include text-bubble-top($color-sixt);
|
||||
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
// top: -2rem;
|
||||
left: 50%;
|
||||
// display: inline-block;
|
||||
width: 100%;
|
||||
height: 12rem;
|
||||
// background-position-x: center;
|
||||
// background-position-y: 81%;
|
||||
// background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
content: " ";
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.text-bubble-top-quad {
|
||||
&::before {
|
||||
@include text-bubble-top($color-quad);
|
||||
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 12rem;
|
||||
background-size: 100% 100%;
|
||||
content: " ";
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
> header {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
|
|
@ -367,16 +338,6 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * Top curve for blue sections
|
||||
.border-top-curved-primary {
|
||||
border-image-slice: 100% 0;
|
||||
}
|
||||
|
||||
// * Top curve for white sections
|
||||
.border-top-curved-white {
|
||||
border-image-slice: 100% 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -402,48 +363,7 @@ body {
|
|||
> .banner-section {
|
||||
.banner.banner-slider {
|
||||
@include rfs(35.625rem, height);
|
||||
|
||||
// .swiper-banner {
|
||||
// height: inherit;
|
||||
|
||||
// .swiper-banner-pagination {
|
||||
// bottom: 2rem;
|
||||
// left: 5%;
|
||||
// height: 5rem;
|
||||
// }
|
||||
|
||||
// .swiper-pagination-bullet {
|
||||
// position: absolute;
|
||||
// width: 5rem;
|
||||
// height: 5rem;
|
||||
// border: 2px solid;
|
||||
// border-color: $color-white;
|
||||
// border-radius: 4rem;
|
||||
// background-size: cover;
|
||||
|
||||
// &:hover {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .swiper-pagination-bullet-active {
|
||||
// bottom: -0.5rem;
|
||||
// width: 6rem;
|
||||
// height: 6rem;
|
||||
// border-color: $color-quad;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
// // * Top curve for blue sections
|
||||
// .border-top-curved-primary {
|
||||
// border-image-slice: 100% 0;
|
||||
// }
|
||||
|
||||
// // * Top curve for white sections
|
||||
// .border-top-curved-white {
|
||||
// border-image-slice: 100% 0;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
@import "./vendor/ckEditorContent";
|
||||
@import "./vendor/bootstrap";
|
||||
@import "./vendor/swiper";
|
||||
@import "./vendor/cookie-notice";
|
||||
@import "./vendor/fancybox";
|
||||
|
||||
// * BASE
|
||||
@import "./base/bootstrap-overload";
|
||||
|
|
@ -16,3 +18,5 @@
|
|||
|
||||
// * PAGES
|
||||
@import "./pages/homepage";
|
||||
@import "./pages/unveil";
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.team {
|
||||
#joinus-carousel {
|
||||
.carousel-indicators {
|
||||
button {
|
||||
background-color: $color-light;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $color-quad;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.strip {
|
||||
.strip-item {
|
||||
width: 100vw;
|
||||
|
|
@ -117,6 +131,36 @@
|
|||
// LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG
|
||||
@include media-breakpoint-up(lg) {
|
||||
.homepage {
|
||||
.missions {
|
||||
.key-number {
|
||||
position: absolute !important;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.text-bubble-top-sixt {
|
||||
top: -2rem;
|
||||
left: 1rem;
|
||||
|
||||
&::before {
|
||||
transform: translate(-50%) rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.text-bubble-top-quad {
|
||||
right: 0;
|
||||
bottom: -4rem;
|
||||
|
||||
&::before {
|
||||
transform: translate(-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ambition {
|
||||
> div {
|
||||
border-radius: 2rem;
|
||||
|
|
@ -178,3 +222,77 @@
|
|||
}
|
||||
}
|
||||
|
||||
// XXXXXXX XXXXXXXLLLLLLLLLLL
|
||||
// X:::::X X:::::XL:::::::::L
|
||||
// X:::::X X:::::XL:::::::::L
|
||||
// X::::::X X::::::XLL:::::::LL
|
||||
// XXX:::::X X:::::XXX L:::::L
|
||||
// X:::::X X:::::X L:::::L
|
||||
// X:::::X:::::X L:::::L
|
||||
// X:::::::::X L:::::L
|
||||
// X:::::::::X L:::::L
|
||||
// X:::::X:::::X L:::::L
|
||||
// X:::::X X:::::X L:::::L
|
||||
// XXX:::::X X:::::XXX L:::::L LLLLLL
|
||||
// X::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
||||
// X:::::X X:::::XL::::::::::::::::::::::L
|
||||
// X:::::X X:::::XL::::::::::::::::::::::L
|
||||
// XXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
||||
@include media-breakpoint-up(xl) {
|
||||
.homepage {
|
||||
.missions {
|
||||
.text-bubble-top-sixt {
|
||||
top: -2rem;
|
||||
left: 3rem;
|
||||
}
|
||||
|
||||
.text-bubble-top-quad {
|
||||
right: 2rem;
|
||||
bottom: -4rem;
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLL
|
||||
// X:::::X X:::::XX:::::X X:::::XL:::::::::L
|
||||
// X:::::X X:::::XX:::::X X:::::XL:::::::::L
|
||||
// X::::::X X::::::XX::::::X X::::::XLL:::::::LL
|
||||
// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L
|
||||
// X:::::X X:::::X X:::::X X:::::X L:::::L
|
||||
// X:::::X:::::X X:::::X:::::X L:::::L
|
||||
// X:::::::::X X:::::::::X L:::::L
|
||||
// X:::::::::X X:::::::::X L:::::L
|
||||
// X:::::X:::::X X:::::X:::::X L:::::L
|
||||
// X:::::X X:::::X X:::::X X:::::X L:::::L
|
||||
// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L LLLLLL
|
||||
// X::::::X X::::::XX::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
||||
// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L
|
||||
// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L
|
||||
// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
||||
@include media-breakpoint-up(xxl) {
|
||||
.homepage {
|
||||
.missions {
|
||||
.text-bubble-top-sixt {
|
||||
top: -2rem;
|
||||
left: 4rem;
|
||||
}
|
||||
|
||||
.text-bubble-top-quad {
|
||||
right: 3rem;
|
||||
bottom: -4rem;
|
||||
}
|
||||
|
||||
.video-thumbnail {
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
141
resources/sass/fo/pages/_unveil.scss
Normal file
141
resources/sass/fo/pages/_unveil.scss
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
@use "sass:color";
|
||||
@use "../utilities/mixins";
|
||||
|
||||
.unveil {
|
||||
.ck-content {
|
||||
h3 {
|
||||
color: $color-sixt;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.key-numbers {
|
||||
.key-number {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sites {
|
||||
.embed-map {
|
||||
min-height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.history {
|
||||
#historical-milestone-carousel {
|
||||
.carousel-indicators {
|
||||
bottom: -2rem;
|
||||
|
||||
[data-bs-target] {
|
||||
height: 2rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
text-indent: 0;
|
||||
|
||||
/* stylelint-disable-next-line selector-max-compound-selectors */
|
||||
.year-selector {
|
||||
bottom: -2rem;
|
||||
color: color.adjust($color-primary, $alpha: -0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-max-compound-selectors */
|
||||
.swiper-year .swiper-wrapper::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 35%;
|
||||
// Unlimited width, the border should always be visible in the swiper.
|
||||
width: 99999%;
|
||||
border-top: 1px solid #000;
|
||||
background: #000;
|
||||
content: '';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.picture {
|
||||
z-index: 0;
|
||||
top: 3rem;
|
||||
left: -3rem;
|
||||
max-height: 70%;
|
||||
transform: rotate(-15deg);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.year {
|
||||
font-size: 6rem;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
font-size: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.commitments {
|
||||
.ck-content {
|
||||
h3 {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// LLLLLLLLLLL GGGGGGGGGGGGG
|
||||
// L:::::::::L GGG::::::::::::G
|
||||
// L:::::::::L GG:::::::::::::::G
|
||||
// LL:::::::LL G:::::GGGGGGGG::::G
|
||||
// L:::::L G:::::G GGGGGG
|
||||
// L:::::L G:::::G
|
||||
// L:::::L G:::::G
|
||||
// L:::::L G:::::G GGGGGGGGGG
|
||||
// L:::::L G:::::G G::::::::G
|
||||
// L:::::L G:::::G GGGGG::::G
|
||||
// L:::::L G:::::G G::::G
|
||||
// L:::::L LLLLLL G:::::G G::::G
|
||||
// LL:::::::LLLLLLLLL:::::L G:::::GGGGGGGG::::G
|
||||
// L::::::::::::::::::::::L GG:::::::::::::::G
|
||||
// L::::::::::::::::::::::L GGG::::::GGG:::G
|
||||
// LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG
|
||||
@include media-breakpoint-up(lg) {
|
||||
.unveil {
|
||||
.history {
|
||||
#historical-milestone-carousel {
|
||||
.carousel-indicators {
|
||||
bottom: -2rem;
|
||||
|
||||
[data-bs-target] {
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1rem;
|
||||
width: 100vw;
|
||||
border-top: 1px solid #000;
|
||||
background: #000;
|
||||
content: '';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.picture {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.year {
|
||||
font-size: 18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,12 +86,13 @@
|
|||
}
|
||||
|
||||
@mixin text-bubble-top($color) {
|
||||
// background-color: color.adjust($color, $lightness: 80%);
|
||||
|
||||
// background-image: url("data:image/svg+xml,%3Csvg width='195' height='206' viewBox='0 0 195 206' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_946_3707)'%3E%3Cpath d='M4 14C4 8.47715 8.47715 4 14 4H180.813C186.336 4 190.813 8.47715 190.813 14V176.418C190.813 181.94 186.336 186.418 180.813 186.418H142.816C139.203 186.418 135.871 188.366 134.1 191.515L128.82 200.901C128.055 202.26 126.098 202.26 125.334 200.901L120.054 191.515C118.283 188.366 114.951 186.418 111.338 186.418H14C8.47715 186.418 4 181.94 4 176.418V14Z' fill='#{urlencodecolor(rgba-to-rgb(color.change($color, $lightness: 95%)))}'/%3E%3Cpath d='M4.25 14C4.25 8.61523 8.61522 4.25 14 4.25H180.813C186.198 4.25 190.563 8.61522 190.563 14V176.418C190.563 181.802 186.198 186.168 180.813 186.168H142.816C139.112 186.168 135.697 188.165 133.882 191.392L128.602 200.779C127.933 201.968 126.221 201.968 125.552 200.779L120.272 191.392C118.457 188.165 115.041 186.168 111.338 186.168H14C8.61522 186.168 4.25 181.802 4.25 176.418V14Z' stroke='#{urlencodecolor($color)}' stroke-width='0.5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_946_3707' x='0' y='0' width='194.813' height='205.92' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.827451 0 0 0 0 0.403922 0 0 0 0 0.219608 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_946_3707'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_946_3707' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='178' height='188' viewBox='0 0 178 188' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Rectangle 74' filter='url(%23filter0_d_774_5989)'%3E%3Cpath d='M4 14C4 8.47716 8.47715 4 14 4L164 4C169.523 4 174 8.47715 174 14L174 160C174 165.523 169.523 170 164 170L63.8485 170C60.2357 170 56.9039 171.949 55.1327 175.097L50.7432 182.901C49.9785 184.26 48.0215 184.26 47.2568 182.901L42.8673 175.097C41.0961 171.949 37.7643 170 34.1515 170H14C8.47715 170 4 165.523 4 160L4 14Z' fill='#{urlencodecolor(rgba-to-rgb(color.change($color, $lightness: 95%)))}'/%3E%3Cpath d='M4.25 14C4.25 8.61523 8.61522 4.25 14 4.25L164 4.25C169.385 4.25 173.75 8.61522 173.75 14L173.75 160C173.75 165.385 169.385 169.75 164 169.75L63.8485 169.75C60.1454 169.75 56.7303 171.747 54.9148 174.975L50.5253 182.779C49.8562 183.968 48.1438 183.968 47.4747 182.779L43.0852 174.975C41.2697 171.747 37.8546 169.75 34.1515 169.75H14C8.61522 169.75 4.25 165.385 4.25 160L4.25 14Z' stroke='#{urlencodecolor($color)}' stroke-width='0.5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_774_5989' x='0' y='0' width='178' height='187.921' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.827451 0 0 0 0 0.403922 0 0 0 0 0.219608 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_774_5989'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_774_5989' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
@mixin tilde($color) {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='30' viewBox='0 0 36 30' fill='none'%3E%3Cpath d='M0 30C4.63384 13.1506 27.6847 14.5774 35.6141 0C34.4579 23.502 8.83069 19.4941 0 30Z' fill='#{urlencodecolor($color)}'/%3E%3Cpath d='M8.94144 23.7212C6.01962 24.8931 3.30272 26.2421 1.16092 28.1123C3.89455 21.2987 10.078 17.8667 16.7901 14.5975C17.3568 14.3215 17.9273 14.0467 18.4997 13.771C24.6548 10.8064 31.0201 7.74043 34.9405 2.05038C34.3745 6.74062 32.7223 10.1692 30.4269 12.796C27.7961 15.8067 24.2883 17.801 20.4896 19.4133C18.5914 20.2189 16.6306 20.9252 14.6775 21.6164C14.4629 21.6924 14.2482 21.7682 14.0338 21.8439C12.3019 22.4557 10.5816 23.0634 8.94144 23.7212Z' stroke='%23103251' stroke-opacity='0.5'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@mixin with-count($n) {
|
||||
@if $n == 1 {
|
||||
&:first-child:nth-last-child(1) {
|
||||
|
|
|
|||
1
resources/sass/fo/vendor/_bootstrap.scss
vendored
1
resources/sass/fo/vendor/_bootstrap.scss
vendored
|
|
@ -18,6 +18,7 @@
|
|||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/forms";
|
||||
|
|
|
|||
1
resources/sass/fo/vendor/_cookie-notice.scss
vendored
Normal file
1
resources/sass/fo/vendor/_cookie-notice.scss
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "@ldc-web/cookie-notice";
|
||||
1
resources/sass/fo/vendor/_fancybox.scss
vendored
Normal file
1
resources/sass/fo/vendor/_fancybox.scss
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "@fancyapps/ui/dist/fancybox/fancybox.css";
|
||||
|
|
@ -1,78 +1,27 @@
|
|||
import { Fancybox } from "@fancyapps/ui";
|
||||
import Swiper from "swiper";
|
||||
import { Keyboard, Navigation, Pagination } from "swiper/modules";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// * Video frames.
|
||||
const videoFrameList = document.querySelectorAll(
|
||||
".video-frame"
|
||||
) as NodeListOf<HTMLLinkElement>;
|
||||
for (const videoLink of videoFrameList) {
|
||||
if (!videoLink.dataset.type) {
|
||||
throw new Error("Missing dataset type");
|
||||
}
|
||||
if (!videoLink.dataset.frame) {
|
||||
throw new Error("Missing dataset frame");
|
||||
}
|
||||
// @ts-ignore
|
||||
window.__CN_VIDEO = window.__CN_VIDEO ?? {};
|
||||
Fancybox.bind("[data-fancybox]");
|
||||
|
||||
const newIframe = document.createElement("iframe");
|
||||
newIframe.frameBorder = "0";
|
||||
newIframe.allow = "fullscreen";
|
||||
newIframe.width = "1920px";
|
||||
newIframe.height = "1080px";
|
||||
newIframe.setAttribute("allowfullscreen", "allowfullscreen");
|
||||
// Define a multiplier according to the window size.
|
||||
let windowWidth = window.innerWidth;
|
||||
let multiplier = 1;
|
||||
|
||||
// @ts-ignore
|
||||
const instance = new FsLightbox();
|
||||
instance.props.sources = [newIframe];
|
||||
|
||||
setTimeout(() => {
|
||||
videoLink.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// * This comes fslightbox lib
|
||||
// @ts-ignore
|
||||
instance.open();
|
||||
setTimeout(function () {
|
||||
// @ts-ignore
|
||||
newIframe.src = window.__CN_VIDEO[videoLink.dataset.type]
|
||||
? String(videoLink.href)
|
||||
: String(videoLink.dataset.frame);
|
||||
}, 50);
|
||||
return false;
|
||||
});
|
||||
}, 300);
|
||||
function getWindowWidth() {
|
||||
windowWidth = window.innerWidth;
|
||||
}
|
||||
window.onresize = getWindowWidth;
|
||||
if (windowWidth < 992) {
|
||||
multiplier = 2;
|
||||
} else {
|
||||
multiplier = 3;
|
||||
}
|
||||
|
||||
// SWIPER
|
||||
const swiperConfig = {
|
||||
"swiper-news": {
|
||||
modules: [Navigation, Keyboard],
|
||||
grabCursor: true,
|
||||
slidesPerView: 1.1,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next-custom",
|
||||
prevEl: ".swiper-button-prev-custom",
|
||||
},
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
breakpoints: {
|
||||
576: {
|
||||
slidesPerView: 1.1,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 1.5,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 1.3,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
"swiper-banner": {
|
||||
modules: [Pagination, Keyboard],
|
||||
grabCursor: true,
|
||||
|
|
@ -100,7 +49,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
element.style.backgroundImage = "url('" + slidePicture.src + "')";
|
||||
// Bullet superposition
|
||||
element.style.zIndex = String(100 - index);
|
||||
element.style.left = String(3 * index) + "rem";
|
||||
element.style.left = String(multiplier * index) + "rem";
|
||||
// Keyboard navigation
|
||||
element.tabIndex = 0;
|
||||
element.role = "button";
|
||||
|
|
@ -115,6 +64,52 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
}
|
||||
}
|
||||
},
|
||||
"swiper-news": {
|
||||
modules: [Navigation, Keyboard],
|
||||
grabCursor: true,
|
||||
slidesPerView: 1.1,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next-custom",
|
||||
prevEl: ".swiper-button-prev-custom",
|
||||
},
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
breakpoints: {
|
||||
576: {
|
||||
slidesPerView: 1.1,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 1.5,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 1.3,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
"swiper-year": {
|
||||
modules: [Keyboard],
|
||||
grabCursor: true,
|
||||
slidesPerView: 1.5,
|
||||
centeredSlides: true,
|
||||
slideToClickedSlide: true,
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 1.5,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 1.3,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
type SwiperSlider = {
|
||||
|
|
@ -125,8 +120,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf<HTMLElement>,
|
||||
sliders: SwiperSlider[] = [];
|
||||
|
||||
console.log(swiperVol);
|
||||
|
||||
for (const htmlElt of swiperVol) {
|
||||
if (!swiperConfig[htmlElt.id as keyof typeof swiperConfig]) {
|
||||
throw new Error(`Undefined swiper id ${htmlElt.id}`);
|
||||
|
|
@ -180,3 +173,36 @@ function paginationKeyboardNavigation(swiper: Swiper) {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Bootstrap Carousel
|
||||
// Set all carousel items to the same height
|
||||
export function carouselNormalization(carouselId: string) {
|
||||
const heights = [] as number[]; //create empty array to store height values
|
||||
let tallest = 0; //create variable to make note of the tallest slide
|
||||
|
||||
const carouselItems = document.getElementById(carouselId)?.getElementsByClassName("carousel-item") as HTMLCollectionOf<HTMLElement>;
|
||||
if (carouselItems === undefined) {
|
||||
return;
|
||||
}
|
||||
for (const carouselItem of carouselItems) {
|
||||
let was_show = 0;
|
||||
// We need to display all elements to get their height, but we also need to remember which one was displayed first.
|
||||
if (carouselItem.classList.contains("active")) {
|
||||
was_show = 1;
|
||||
} else {
|
||||
carouselItem.classList.add("active");
|
||||
was_show = 0;
|
||||
}
|
||||
|
||||
heights.push(carouselItem.offsetHeight);
|
||||
|
||||
if (was_show == 0) {
|
||||
carouselItem.classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
tallest = Math.max.apply(null, heights); //cache largest value
|
||||
for (const carouselItem of carouselItems) {
|
||||
carouselItem.style.minHeight = tallest + "px";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<div
|
||||
class="historical-milestones-slider-part position-relative"
|
||||
ref="historicalMilestoneSlider"
|
||||
>
|
||||
<!-- Historical Milestone Details -->
|
||||
<div class="historical-milestone-details">
|
||||
<!-- Text part of the milestone -->
|
||||
<img
|
||||
v-if="currentHistoricalMilestone.picture"
|
||||
class="position-absolute picture"
|
||||
:src="String(currentHistoricalMilestone.picture)"
|
||||
:title="String(currentHistoricalMilestone.picture_title)"
|
||||
:alt="String(currentHistoricalMilestone.picture_alt)"
|
||||
>
|
||||
<div class="z-3 position-relative text-primary text-center historical-milestone-content">
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-12 col-lg-7">
|
||||
<p class="year fw-bold text-quad mb-5">
|
||||
{{ currentHistoricalMilestone.year }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4 text-lg-start d-flex flex-column justify-content-end">
|
||||
<div class="slide-content mx-auto mx-lg-0 p-lg-0 w-fit rounded p-3">
|
||||
<p class="fw-bold fs-5">
|
||||
{{ currentHistoricalMilestone.title }}
|
||||
</p>
|
||||
<p v-if="currentHistoricalMilestone.text">
|
||||
{{ currentHistoricalMilestone.text }}
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
v-if="currentHistoricalMilestone.button_status"
|
||||
class="btn btn-quad rounded-5 mt-3 text-white"
|
||||
:href="String(currentHistoricalMilestone.button_url)"
|
||||
:target="currentHistoricalMilestone.button_new_tab ? `_blank` : ``"
|
||||
>{{ currentHistoricalMilestone.button_label }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Historical Milestone Years Slider -->
|
||||
<div
|
||||
class="swiper swiper-historical-milestone w-75"
|
||||
id="historical-milestone-slider"
|
||||
>
|
||||
<div
|
||||
class="swiper-wrapper py-3"
|
||||
ref="historicalMilestoneSliderWrapper"
|
||||
>
|
||||
<div
|
||||
class="swiper-slide w-fit"
|
||||
v-for="(historicalMilestone, eventIndex) in historicalMilestoneModels"
|
||||
:key="eventIndex"
|
||||
:id="`historical-milestone-${eventIndex}`"
|
||||
tabindex="0"
|
||||
>
|
||||
<div :class="historicalMilestone === currentHistoricalMilestone ? `tilde-quad` : `tilde-white`" />
|
||||
<p :class="`position-relative ${historicalMilestone === currentHistoricalMilestone ? 'text-quad fw-bold' : 'text-secondary'}`">
|
||||
{{ historicalMilestone.year }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Swiper from "swiper";
|
||||
import { Keyboard } from "swiper/modules";
|
||||
import { defineComponent } from "vue";
|
||||
import route from "../../modules/route";
|
||||
|
||||
export default defineComponent({
|
||||
name: "HistoricalMilestonesSliderComponent",
|
||||
mixins: [route],
|
||||
data(): {
|
||||
historicalMilestoneModels: LaravelModelList;
|
||||
staticHistoricalMilestoneModels: LaravelModelList;
|
||||
currentHistoricalMilestone: LaravelModel;
|
||||
slider: HTMLElement;
|
||||
swiper: Swiper|null;
|
||||
swiperPics: Swiper|null;
|
||||
swiperAutoplay: boolean;
|
||||
} {
|
||||
return {
|
||||
historicalMilestoneModels: [],
|
||||
staticHistoricalMilestoneModels: [],
|
||||
currentHistoricalMilestone: {
|
||||
id: 0
|
||||
},
|
||||
slider: document.createElement("div"),
|
||||
swiper: null,
|
||||
swiperPics: null,
|
||||
swiperAutoplay: true,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
const json = String(this.$attrs.json ?? "{}"),
|
||||
data = JSON.parse(json);
|
||||
|
||||
this.historicalMilestoneModels = data.historicalMilestoneModels;
|
||||
this.staticHistoricalMilestoneModels = [...this.historicalMilestoneModels.values()];
|
||||
this.currentHistoricalMilestone = this.historicalMilestoneModels[0];
|
||||
this.slider = this.$refs.historicalMilestoneSlider as HTMLElement;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initSwiper();
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
// FIXME: Faire correspondre la créa en desktop ...
|
||||
/** Init ranges slider */
|
||||
initSwiper() {
|
||||
this.swiper = new Swiper(".swiper-historical-milestone", {
|
||||
modules: [Keyboard],
|
||||
grabCursor: true,
|
||||
slidesPerView: "auto",
|
||||
spaceBetween: 60,
|
||||
centeredSlides: true,
|
||||
slideToClickedSlide: true,
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
on: {
|
||||
slideChangeTransitionEnd: () => {
|
||||
this.getCurrentMilestone();
|
||||
}
|
||||
},
|
||||
breakpoints: {
|
||||
992: {
|
||||
centeredSlides: false,
|
||||
watchOverflow: false,
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** Get the current milestone */
|
||||
getCurrentMilestone() {
|
||||
let currentSlide = this.slider.querySelector(".swiper-slide-active") as HTMLElement;
|
||||
if (!currentSlide) {
|
||||
return;
|
||||
}
|
||||
let milestoneId = parseInt(String(currentSlide.id).replace("historical-milestone-", ""));
|
||||
this.currentHistoricalMilestone = this.historicalMilestoneModels[milestoneId];
|
||||
this.$nextTick(() => {
|
||||
this.swiperPics?.updateSlides();
|
||||
this.swiperPics?.slideTo(0);
|
||||
this.swiperPics?.autoplay.start();
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// Bootstrap reimport to use breakpoints
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "../../../sass/fo/utilities/variables";
|
||||
|
||||
.historical-milestones-slider-part {
|
||||
|
||||
.swiper-wrapper:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 1rem;
|
||||
border-top: 1px solid black;
|
||||
background: black;
|
||||
width: 99999%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.picture {
|
||||
transform: rotate(-15deg);
|
||||
max-height: 70%;
|
||||
z-index: 0;
|
||||
top: 3rem;
|
||||
left: -3rem;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
left: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.year {
|
||||
font-size: 6rem;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
font-size: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
background-color: #ffffff80;
|
||||
}
|
||||
// Year slider
|
||||
.swiper-historical-milestone {
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: calc(100% - 12rem) !important;
|
||||
margin-left: 12rem;
|
||||
clip-path: polygon(0% 0%,90% 0%,90% 100%,0% 100%);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
// width: calc(100% - 4rem) !important;
|
||||
// margin-left: 4rem;
|
||||
// clip-path: polygon(44% 0%,99% 0%,99% 99%,44% 100%);
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
// width: 100% !important;
|
||||
// margin-left: 0rem;
|
||||
// clip-path: polygon(44.5% 0%, 99% 0%, 99% 99%, 44.5% 100.00%);
|
||||
}
|
||||
|
||||
.swiper-slide-active {
|
||||
p {
|
||||
color: #{$color-quad} !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: .1rem;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 60%;
|
||||
// height: 1rem;
|
||||
// background-image: url('@/images/global/underline-yellow.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
content: "";
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Historical milestone details
|
||||
.historical-milestone-details {
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.historical-milestone-details-text {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: 8rem;
|
||||
padding-right: 8rem;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,13 @@
|
|||
/// <reference types="vite/client" />
|
||||
import.meta.glob(["./../../assets/images/**"]);
|
||||
|
||||
// COOKIE NOTICE
|
||||
import CookieNotice from "@ldc-web/cookie-notice";
|
||||
window.CookieNotice = CookieNotice;
|
||||
|
||||
import { Fancybox } from "@fancyapps/ui";
|
||||
window.Fancybox = Fancybox;
|
||||
|
||||
// UTILITIES
|
||||
import "./utilities/bootstrap";
|
||||
import "./utilities/fontawesome";
|
||||
|
|
@ -11,3 +18,7 @@ import "./utilities/vue-fo";
|
|||
import "./base/common";
|
||||
import "./base/layout";
|
||||
|
||||
// PAGES
|
||||
import "./pages/home";
|
||||
import "./pages/unveil";
|
||||
|
||||
|
|
|
|||
11
resources/ts/fo/pages/home.ts
Normal file
11
resources/ts/fo/pages/home.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { carouselNormalization } from "../base/common";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const homePage = document.querySelector("section.homepage");
|
||||
if (homePage === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set bootstrap carousel items to the same height
|
||||
carouselNormalization("joinus-carousel");
|
||||
});
|
||||
53
resources/ts/fo/pages/unveil.ts
Normal file
53
resources/ts/fo/pages/unveil.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { carouselNormalization } from "../base/common";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const unveilPage = document.querySelector("section.unveil");
|
||||
if (unveilPage === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update historical milestone carousel indicators color
|
||||
const historicalMilestoneCarousel = document.getElementById("historical-milestone-carousel");
|
||||
if (historicalMilestoneCarousel === null) {
|
||||
return;
|
||||
}
|
||||
historicalMilestoneCarousel.addEventListener("slid.bs.carousel", (event) => {
|
||||
updateCarouselIndicators(event, historicalMilestoneCarousel);
|
||||
});
|
||||
|
||||
// Set bootstrap carousel items to the same height
|
||||
carouselNormalization("historical-milestone-carousel");
|
||||
});
|
||||
|
||||
// Update carousel indicators colors.
|
||||
function updateCarouselIndicators(event: Event, carousel: HTMLElement) {
|
||||
const indicators = carousel.getElementsByClassName("carousel-indicators");
|
||||
if (indicators === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The colors to use in the carousel, in this order.
|
||||
const colors = [
|
||||
"quint", "secondary", "sixt", "quad"
|
||||
];
|
||||
|
||||
for (const indicator of indicators) {
|
||||
Array.from(indicator.getElementsByTagName("button")).forEach(function (element, index) {
|
||||
const text = element.firstElementChild as HTMLElement;
|
||||
if (element.classList.contains("active")) {
|
||||
// Change tilde color
|
||||
element.classList.add("tilde-" + colors[index % 4]);
|
||||
element.classList.remove("tilde-white");
|
||||
// Change text color
|
||||
text.classList.add("text-" + colors[index % 4]);
|
||||
} else {
|
||||
// Change tilde color
|
||||
element.classList.remove("tilde-" + colors[index % 4]);
|
||||
element.classList.add("tilde-white");
|
||||
// Change text color
|
||||
text.classList.remove("text-" + colors[index % 4]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { config, dom, library } from "@fortawesome/fontawesome-svg-core";
|
||||
import {
|
||||
faArrowRightLong,
|
||||
faCircleCheck,
|
||||
faCircleExclamation,
|
||||
faCircleInfo,
|
||||
|
|
@ -17,5 +18,6 @@ library.add(faCircleInfo);
|
|||
library.add(faCirclePlay);
|
||||
library.add(faQuestionCircle);
|
||||
library.add(faMagnifyingGlass);
|
||||
library.add(faArrowRightLong);
|
||||
|
||||
dom.watch();
|
||||
|
|
|
|||
6
resources/ts/index.d.ts
vendored
6
resources/ts/index.d.ts
vendored
|
|
@ -1,6 +1,8 @@
|
|||
export { };
|
||||
import type { Fancybox } from "@fancyapps/ui";
|
||||
import CookieNotice from "@ldc-web/cookie-notice";
|
||||
import type VueTagsInput from "@sipec/vue3-tags-input";
|
||||
import { AxiosStatic } from "axios";
|
||||
export { };
|
||||
|
||||
// * Enum
|
||||
interface EnumInterface {
|
||||
|
|
@ -71,6 +73,8 @@ declare global {
|
|||
type Enum = EnumInterface;
|
||||
|
||||
interface Window {
|
||||
CookieNotice: typeof CookieNotice;
|
||||
Fancybox: typeof Fancybox;
|
||||
axios: AxiosStatic;
|
||||
Swal: Function;
|
||||
vueDebug: boolean | undefined;
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
<footer>
|
||||
@include('fo.layouts.footer')
|
||||
</footer>
|
||||
@include('vendor.cn-cookies')
|
||||
@stack('scripts-constants')
|
||||
@include('modules.script-constants')
|
||||
@vite(['resources/ts/fo/fo.ts'])
|
||||
|
|
|
|||
17
resources/views/fo/layouts/key-number.blade.php
Normal file
17
resources/views/fo/layouts/key-number.blade.php
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
@if (!empty($link))
|
||||
<a class="key-number text-bubble-top-{{ $color }} position-relative d-flex justify-content-center align-items-center position-relative text-decoration-none mx-2"
|
||||
href="{{ $link }}">
|
||||
@else
|
||||
<div
|
||||
class="key-number text-bubble-top-{{ $color }} position-relative d-flex justify-content-center align-items-center position-relative mx-2">
|
||||
@endif
|
||||
<p class="text-{{ $color }}">
|
||||
<span class="fw-semibold fs-1">{{ $keySection->data[$minicrud_selector]['value'] }}</span><br>
|
||||
{{ str(__($text))->upper() }}
|
||||
</p>
|
||||
@if (!empty($link))
|
||||
<p class="position-absolute plus-corner-{{ $color }}"></p>
|
||||
</a>
|
||||
@else
|
||||
</div>
|
||||
@endif
|
||||
|
|
@ -29,8 +29,9 @@
|
|||
</li>
|
||||
<li class="nav-item mb-1">
|
||||
@php $activePage = false; @endphp
|
||||
<a class="nav-link @if ($activePage) active @endif" data-bs-toggle="tooltip" href="#FIXME:route"
|
||||
title="{{ __('Aller sur la page On se dévoile') }}" @if ($activePage) aria-current="page" @endif>
|
||||
<a class="nav-link @if ($activePage) active @endif" data-bs-toggle="tooltip"
|
||||
href="{{ route('fo.unveil') }}" title="{{ __('Aller sur la page On se dévoile') }}"
|
||||
@if ($activePage) aria-current="page" @endif>
|
||||
{{ __('On se dévoile') }}
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
20
resources/views/fo/modules/frame.blade.php
Normal file
20
resources/views/fo/modules/frame.blade.php
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ __('Autorisation nécessaire') }}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1
|
||||
style="padding: 1rem; background-color: rgb(153, 153, 153); color: #FFF; position: absolute; top:50%; left: 50%; transform:translateX(-50%) translateY(-50%);">
|
||||
{{ __('cookie-notice.custom.frame', [
|
||||
'type' => $frame,
|
||||
]) }}
|
||||
</h1>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,14 +1,7 @@
|
|||
@php $uniqueID = uniqid(); @endphp
|
||||
<a
|
||||
class="video-frame relative w-full"
|
||||
href="{{ $link }}"
|
||||
data-type="{{ $type }}"
|
||||
data-frame="{{ route('front.frame', ['frame' => $type]) }}"
|
||||
target="_blank">
|
||||
<img
|
||||
class="relative w-full"
|
||||
src="{{ $picture }}"
|
||||
alt="{{ $alt }}"
|
||||
title="{{ $title }}">
|
||||
<i class="youtube-play-button absolute top-50 left-50 fa-regular fa-circle-play"></i>
|
||||
{{-- FIXME: cookie-notice ici devrait laisser l'image affichée... Remettre la classe cn-vimeo avec le fix. --}}
|
||||
<a class="position-relative video-frame" data-fancybox data-type="{{ $type }}" data-frame="{{ route('fo.frame', ['frame' => $type]) }}"
|
||||
href="{{ $link }}">
|
||||
<img class="ratio ratio-16x9 rounded-4 video-thumbnail" src="{{ $picture }}" title="{{ $title }}" alt="{{ $alt }}">
|
||||
<i class="video-play-button fa-solid fa-circle-play position-absolute fa-2xl text-tertiary bg-white"></i>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@
|
|||
@php
|
||||
$missionSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::home_missions)->first();
|
||||
@endphp
|
||||
<section class="missions my-4">
|
||||
<section class="missions pb-lg-5 my-4">
|
||||
<div class="text-lg-start container text-center">
|
||||
<div class="row">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12 col-lg-4">
|
||||
<h2 class="h2 fw-bold text-primary">{{ $missionSection->h2_title }}</h2>
|
||||
@if ($missionSection->text)
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
href="#CHANGEME" title="{{ __('Accéder à la page \'On se dévoile\'') }}">{{ __('On se dévoile') }}</a>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="d-flex justify-content-center my-3">
|
||||
<div class="d-flex justify-content-center position-relative my-3">
|
||||
<div
|
||||
class="key-number text-bubble-top-sixt position-relative d-flex justify-content-center align-items-center mx-2">
|
||||
<p class="text-sixt">
|
||||
|
|
@ -55,7 +55,17 @@
|
|||
{{ str(__('métiers'))->upper() }}
|
||||
</p>
|
||||
</div>
|
||||
{{-- FIXME: DESKTOP:: La même vidéo qu'en mobile semble utilisée ici --}}
|
||||
<div class="ratio ratio-16x9 d-none d-lg-block mt-lg-0 mt-5">
|
||||
<div class="d-lg-flex justify-content-center" type="vimeo">
|
||||
@include('fo.modules.video-frame', [
|
||||
'type' => 'vimeo',
|
||||
'title' => __('Visionner la vidéo'),
|
||||
'link' => 'https://vimeo.com/#CHANGEME',
|
||||
'picture' => $missionSection->data['bloc_image']['value'],
|
||||
'alt' => trans('Video_about_who_we_are'),
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 d-lg-none">
|
||||
|
|
@ -64,9 +74,19 @@
|
|||
<a class="btn btn-outline-primary rounded-5 fw-bold border-primary border border-2" href="#CHANGEME"
|
||||
title="{{ __('Accéder à la page \'On se dévoile\'') }}">{{ __('On se dévoile') }}</a>
|
||||
</div>
|
||||
{{-- FIXME: MOBILE: Une vidéo est visible sur la créa mais pas dans le bo, c'est administrable ou non ? Si non, besoin de plus d'infos --}}
|
||||
|
||||
{{-- FIXME: Une image est dans le document synthèse BO et dans le minicrud, on en fait quoi ? --}}
|
||||
</div>
|
||||
<div class="col-12 d-lg-none">
|
||||
<div class="ratio ratio-16x9 mt-5">
|
||||
<div class="d-lg-flex justify-content-center" type="vimeo">
|
||||
@include('fo.modules.video-frame', [
|
||||
'type' => 'vimeo',
|
||||
'title' => __('Visionner la vidéo'),
|
||||
'link' => 'https://vimeo.com/#CHANGEME',
|
||||
'picture' => $missionSection->data['bloc_image']['value'],
|
||||
'alt' => trans('Video_about_who_we_are'),
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,10 +120,10 @@
|
|||
$teamSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::home_team)->first();
|
||||
@endphp
|
||||
<section class="team border-top-curved-primary">
|
||||
<div class="text-bg-primary text-lg-start pb-5 text-center">
|
||||
<div class="text-bg-primary pb-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="col-12 col-lg-6 text-lg-start text-center">
|
||||
<h2 class="h2 fw-bold">{{ $teamSection->h2_title }}</h2>
|
||||
@if ($teamSection->text)
|
||||
<div class="ck-content">
|
||||
|
|
@ -117,9 +137,8 @@
|
|||
</div>
|
||||
{{-- @endif --}}
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-lg-first p-5">
|
||||
{{-- FIXME: Un slider de 3 éléments est visible sur la créa mais n'est pas dans le BO. Administrable ou non ? --}}
|
||||
<div class="card p-5" style="height: 25rem">
|
||||
<div class="col-12 col-lg-6 order-lg-first p-lg-5 p-3">
|
||||
<div class="card p-lg-5 p-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-3 d-flex justify-content-center align-items-center">
|
||||
<div class="bg-primary rounded-circle ratio ratio-1x1 w-100 d-flex align-items-center">
|
||||
|
|
@ -135,12 +154,48 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<p class="text-primary fw-bold fs-4">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, perferendis odit laborum voluptate
|
||||
ipsum cumque quaerat porro qui quo facilis vero ullam rem eveniet recusandae corporis a. Voluptates,
|
||||
facere exercitationem?
|
||||
</p>
|
||||
<div class="carousel slide" id="joinus-carousel" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button class="active" data-bs-target="#joinus-carousel" data-bs-slide-to="0" type="button"
|
||||
aria-current="true" aria-label="Slide 1"></button>
|
||||
<button data-bs-target="#joinus-carousel" data-bs-slide-to="1" type="button"
|
||||
aria-label="Slide 2"></button>
|
||||
<button data-bs-target="#joinus-carousel" data-bs-slide-to="2" type="button"
|
||||
aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner h-fit pb-5">
|
||||
<div class="carousel-item active h-auto" data-bs-interval="4000">
|
||||
<p class="text-primary fw-bold fs-4">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, perferendis odit laborum
|
||||
voluptate
|
||||
ipsum cumque quaerat po?
|
||||
</p>
|
||||
</div>
|
||||
<div class="carousel-item h-auto">
|
||||
<p class="text-primary fw-bold fs-4" data-bs-interval="3000">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, perferendis odit laborum
|
||||
voluptate
|
||||
ipsum cumque quaerat porro qui quo facilis vero ullam rem eveniet recusandae corporis a.
|
||||
Voluptates,
|
||||
facere exercitationem?
|
||||
</p>
|
||||
</div>
|
||||
<div class="carousel-item h-auto">
|
||||
<p class="text-primary fw-bold fs-4" data-bs-interval="3000">
|
||||
Lorem ipsum dolor sit amet ?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" data-bs-target="#joinus-carousel" data-bs-slide="prev"
|
||||
type="button">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" data-bs-target="#joinus-carousel" data-bs-slide="next"
|
||||
type="button">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -209,8 +264,8 @@
|
|||
</div>
|
||||
<div class="swiper-button swiper-button-prev-custom d-none d-lg-block mx-3">
|
||||
<img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
|
||||
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}" role="button"
|
||||
tabindex="0">
|
||||
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}"
|
||||
role="button" tabindex="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 d-lg-none">
|
||||
|
|
|
|||
256
resources/views/fo/pages/unveil.blade.php
Normal file
256
resources/views/fo/pages/unveil.blade.php
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
@extends('fo.layout')
|
||||
|
||||
@section('title', $staticPageModel->seo_title)
|
||||
@section('description', $staticPageModel->seo_description)
|
||||
@section('breadcrumb', request()->route()->getName())
|
||||
|
||||
@section('banner')
|
||||
@include('fo.layouts.banner', [
|
||||
'h1' => __($staticPageModel->title),
|
||||
'asset' => Vite::asset('resources/assets/images/banners/home_reworked.jpg'),
|
||||
'title' => __('Paysage d\'un champs de blé au soleil couchant avec une lisière en fond de tableau'),
|
||||
'alt' => __('Image de fond'),
|
||||
'displayArrow' => true,
|
||||
])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<section class="unveil">
|
||||
{{-- KEY NUMBERS --}}
|
||||
@php
|
||||
$keySection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_pole)->first();
|
||||
@endphp
|
||||
<section class="key-numbers my-4">
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="h2 fw-bold text-primary">{{ $keySection->h2_title }}</h2>
|
||||
@if ($keySection->text)
|
||||
<div class="ck-content text-primary">
|
||||
{!! clean($keySection->text) !!}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-6 pe-lg-0">
|
||||
<div class="d-flex justify-content-center justify-content-lg-end my-3">
|
||||
@include('fo.layouts.key-number', [
|
||||
'color' => 'sixt',
|
||||
'minicrud_selector' => 'bloc_key_sites',
|
||||
'text' => 'sites',
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
@include('fo.layouts.key-number', [
|
||||
'color' => 'quad',
|
||||
'minicrud_selector' => 'bloc_key_especes',
|
||||
'text' => 'espèces',
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 ps-lg-0">
|
||||
<div class="d-flex justify-content-center justify-content-lg-start my-3">
|
||||
@include('fo.layouts.key-number', [
|
||||
'color' => 'tertiary',
|
||||
'minicrud_selector' => 'bloc_key_ca',
|
||||
'text' => 'millions de ca',
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
@include('fo.layouts.key-number', [
|
||||
'color' => 'quint',
|
||||
'minicrud_selector' => 'bloc_key_collaborateurs',
|
||||
'text' => 'collaborateurs',
|
||||
'link' => '#CHANGEME',
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{-- LOCAL --}}
|
||||
@php
|
||||
$localSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_local)->first();
|
||||
@endphp
|
||||
<section class="local border-top-curved-primary">
|
||||
<div class="text-bg-primary">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
{{-- FIXME: Ajouter une image éditable dans ce minicrud --}}
|
||||
<div class="col-12 col-lg-6 d-flex justify-content-center mb-3">
|
||||
<img class="h-fit" src="{{ Vite::asset('resources/assets/images/logo.png') }}">
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 mb-2 text-center">
|
||||
<h2 class="h2 fw-bold">{{ $localSection->h2_title }}</h2>
|
||||
@if ($localSection->text)
|
||||
<div class="ck-content">
|
||||
{!! clean($localSection->text) !!}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{-- FIXME: Entre la partie en bleu et la partie 'nos sites' est visible une autre partie sur la créa, or toutes les sections sont déjà utilisées. Qu'est-ce que c'est ? REDECOUPAGE A FAIRE DES SECTIONS --}}
|
||||
{{-- FIXME: Dans cette même partie, il y a 3 images accompagnées d'une légende et d'un texte qui sont en colonne pour le mobile et en slider pour le desktop. Actuellement, ces images sont dans un WYSIWYG. On rend administrables les images ? OUI --}}
|
||||
{{-- SITES --}}
|
||||
@php
|
||||
$siteSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_sites)->first();
|
||||
@endphp
|
||||
<section class="sites border-top-curved-white mb-5">
|
||||
<div class="container">
|
||||
<div class="row text-bg-primary rounded-3 p-4 text-center">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="">
|
||||
<h2 class="h2 fw-bold">{{ $siteSection->h2_title }}</h2>
|
||||
@if ($siteSection->text)
|
||||
<div class="ck-content">
|
||||
{!! clean($siteSection->text) !!}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center">
|
||||
{{-- FIXME: Quelles coordonnées pour la map ? --}}
|
||||
<div class="embed-map w-100 my-3">
|
||||
<iframe class="rounded-3"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10661.469000249905!2d-0.7577479264599797!3d48.083855231712434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4809013bc7a7e43f%3A0xe01d7907f663610d!2sSNV%20Laval!5e0!3m2!1sfr!2sfr!4v1709025460315!5m2!1sfr!2sfr"
|
||||
style="border:0;" width="100%" height="100%" allowfullscreen="" loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{-- OUR HISTORY --}}
|
||||
@php
|
||||
$historySection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_history)->first();
|
||||
@endphp
|
||||
<section class="history mb-5 overflow-hidden pb-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h2 class="h2 fw-bold text-primary">{{ $historySection->h2_title }}</h2>
|
||||
@if ($historySection->text)
|
||||
<div class="ck-content text-primary">
|
||||
{!! clean($historySection->text) !!}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
{{-- HISTORICAL MILESTONES SWIPER --}}
|
||||
<div class="col-12 position-relative">
|
||||
{{-- FIXME: en desktop, le carousel-indicators n'est pas mis à jour au clic. La slide change mais pas l'indicateur... --}}
|
||||
@php
|
||||
$colors = ['quint', 'secondary', 'sixt', 'quad'];
|
||||
@endphp
|
||||
<div class="carousel slide carousel-fade pb-5" id="historical-milestone-carousel">
|
||||
<div class="d-lg-none">
|
||||
<div class="carousel-indicators justify-content-between">
|
||||
<div class="swiper swiper-year mt-lg-0 w-100 mt-5 h-fit overflow-visible" id="swiper-year">
|
||||
<div class="swiper-wrapper">
|
||||
@foreach ($historicalMilestoneModels as $historicalMilestoneModel)
|
||||
<div class="swiper-slide d-flex justify-content-center">
|
||||
<button data-bs-target="#historical-milestone-carousel"
|
||||
data-bs-slide-to="{{ $loop->index }}" type="button" aria-current="true"
|
||||
aria-label="Slide {{ $loop->index + 1 }}" @class([
|
||||
'position-relative',
|
||||
"tilde-{$colors[$loop->index % 4]} active" => $loop->first,
|
||||
'tilde-white' => !$loop->first,
|
||||
])>
|
||||
<p @class(['year-selector position-absolute fw-bold'])>{{ $historicalMilestoneModel->year }}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none d-lg-block">
|
||||
<div class="carousel-indicators justify-content-between">
|
||||
@foreach ($historicalMilestoneModels as $historicalMilestoneModel)
|
||||
<button data-bs-target="#historical-milestone-carousel" data-bs-slide-to="{{ $loop->index }}"
|
||||
type="button" aria-current="true" aria-label="Slide {{ $loop->index + 1 }}"
|
||||
@class([
|
||||
'position-relative',
|
||||
"tilde-{$colors[$loop->index % 4]} active" => $loop->first,
|
||||
'tilde-white' => !$loop->first,
|
||||
])>
|
||||
<p @class(['year-selector position-absolute fw-bold'])>{{ $historicalMilestoneModel->year }}
|
||||
</p>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-inner overflow-visible">
|
||||
@foreach ($historicalMilestoneModels as $historicalMilestoneModel)
|
||||
<div @class(['carousel-item bg-body', 'active' => $loop->first])>
|
||||
@if ($historicalMilestoneModel->picture)
|
||||
<img class="position-absolute picture" src="{{ $historicalMilestoneModel->picture }}"
|
||||
title="{{ $historicalMilestoneModel->picture_title }}"
|
||||
alt="{{ $historicalMilestoneModel->picture_alt }}">
|
||||
@endif
|
||||
<div class="z-3 position-relative text-primary historical-milestone-content text-center">
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-12 col-lg-6">
|
||||
<p class="year fw-bold text-{{ $colors[$loop->index % 4] }} mb-5">
|
||||
{{ $historicalMilestoneModel->year }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-lg-3 text-lg-start d-flex flex-column justify-content-end">
|
||||
<div class="slide-content mx-lg-0 p-lg-0 mx-auto w-fit rounded p-3">
|
||||
<p class="fw-bold fs-5">
|
||||
{{ $historicalMilestoneModel->title }}
|
||||
</p>
|
||||
@if ($historicalMilestoneModel->text)
|
||||
<p>
|
||||
{{ $historicalMilestoneModel->text }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
@if ($historicalMilestoneModel->button_status)
|
||||
<a class="btn btn-{{ $colors[$loop->index % 4] }} rounded-5 mt-3 text-white"
|
||||
href="{{ $historicalMilestoneModel->button_url }}"
|
||||
@if ($historicalMilestoneModel->button_new_tab) target="_blank" @endif>
|
||||
{{ $historicalMilestoneModel->button_label }}
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{-- COMMITMENTS --}}
|
||||
@php
|
||||
$commitmentSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_commitments)->first();
|
||||
@endphp
|
||||
<section class="commitments pb-lg-5 mb-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="text-bg-quint rounded-3 text-lg-center p-4">
|
||||
<h2>{{ $commitmentSection->h2_title }}</h2>
|
||||
@if ($commitmentSection->text)
|
||||
<div class="ck-content">
|
||||
{!! clean($commitmentSection->text) !!}
|
||||
</div>
|
||||
@endif
|
||||
<div class="d-flex justify-content-center my-4">
|
||||
<a class="btn btn-white text-quint rounded-5 fw-bold" href="#CHANGEME"
|
||||
title="{{ __('Accéder à la page \'On s\'engage\'') }}">{{ __('On s\'engage') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="strip-item d-flex align-items-center px-3 py-2">
|
||||
<div class="strip-item d-flex align-items-center px-3 py-2 text-white">
|
||||
@if ($stripModel->picto !== \App\Enums\Strips\PictoEnum::none)
|
||||
<img class="mx-4" src="{{ Vite::asset($stripModel->picto->picture()) }}" title="{{ $stripModel->picto->title() }}"
|
||||
alt="{{ $stripModel->picto->alt() }}" width="50px">
|
||||
|
|
@ -6,7 +6,9 @@
|
|||
<div class="strip-item-content">
|
||||
<p>{!! clean($stripModel->text) !!}</p>
|
||||
@if ($stripModel->news)
|
||||
<a href="#CHANGEME" title="{{ __('Accéder à l\'article') }} {{ $stripModel->news->title }}">{{ $stripModel->news->title }}</a>
|
||||
<a class="text-white" href="#CHANGEME"
|
||||
title="{{ __('Accéder à l\'article') }} {{ $stripModel->news->title }}">{{ $stripModel->news->title }}</a> <i
|
||||
class="fa-solid fa-arrow-right-long fa-rotate-by" style="color: #ffffff; --fa-rotate-angle: -45deg;"></i>
|
||||
@endif
|
||||
</div>
|
||||
<div class="strip-divider position-relative"></div>
|
||||
|
|
|
|||
238
resources/views/vendor/cn-cookies.blade.php
vendored
Normal file
238
resources/views/vendor/cn-cookies.blade.php
vendored
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
{{-- blade-formatter-disable --}}
|
||||
@php
|
||||
|
||||
$site_name = Str::ucfirst(config('app.name'));
|
||||
$logo_picture_url = Vite::asset('resources/assets/images/logo.png');
|
||||
$logo_title_text = __('Logo du site :name', ['name' => $site_name]);
|
||||
$logo_alt_text = __('Logo :name', ['name' => $site_name]);
|
||||
|
||||
$strings = (object)[
|
||||
'modal_title' => __('cookie-notice.modal_title'),
|
||||
'button_customize_cookies' => __('cookie-notice.button_customize_cookies'),
|
||||
'button_close_cookies' => __('cookie-notice.button_close_cookies'),
|
||||
'button_title_open_new_tab' => __('cookie-notice.button_title_open_new_tab'),
|
||||
'button_forbid' => __('cookie-notice.button_forbid'),
|
||||
'button_allow' => __('cookie-notice.button_allow'),
|
||||
'button_forbid_all' => Str::upper(__('cookie-notice.button_forbid_all')),
|
||||
'button_allow_all' => Str::upper(__('cookie-notice.button_allow_all')),
|
||||
'button_customize' => Str::upper(__('cookie-notice.button_customize')),
|
||||
'button_forbid_all_title' => __('cookie-notice.button_forbid_all_title'),
|
||||
'button_allow_all_title' => __('cookie-notice.button_allow_all_title'),
|
||||
'button_back' => Str::upper(__('cookie-notice.button_back')),
|
||||
'banner_title' => __('cookie-notice.banner_title', ['site_name' => $site_name]),
|
||||
'banner_text' => __('cookie-notice.banner_text'),
|
||||
'panel_title' => __('cookie-notice.panel_title'),
|
||||
'panel_content' => __('cookie-notice.panel_content'),
|
||||
'panel_subtitle' => __('cookie-notice.panel_subtitle'),
|
||||
'panel_details' => __('cookie-notice.panel_details'),
|
||||
'picture_cookie_title' => __('cookie-notice.picture_cookie_title'),
|
||||
'navigation_title' => __('cookie-notice.navigation_title'),
|
||||
];
|
||||
|
||||
$cookies = [];
|
||||
|
||||
// YOUTUBE
|
||||
$cookies['youtube'] = [
|
||||
'name' => 'VIDEOS - Youtube',
|
||||
'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'),
|
||||
'link' => 'https://policies.google.com/technologies/cookies?hl=fr&utm_source=ucb',
|
||||
'labelLink' => __('En savoir +'),
|
||||
'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC']
|
||||
];
|
||||
|
||||
$cookies['youtube']['script'] = <<<SCRIPT
|
||||
function () {
|
||||
let youtubeVids = document.getElementsByClassName('cn-youtube');
|
||||
for (let item of youtubeVids) {
|
||||
let id = item.dataset.id;
|
||||
let e = document.createElement('iframe');
|
||||
e.src = "https://www.youtube.com/embed/" + id;
|
||||
e.width = "640";
|
||||
e.height = "360";
|
||||
e.frameBorder = "0";
|
||||
e.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
|
||||
e.allowFullscreen = true;
|
||||
item.innerHTML = "";
|
||||
item.appendChild(e);
|
||||
}
|
||||
}
|
||||
SCRIPT;
|
||||
$cookies['youtube']['fallback'] = <<<FALLBACK
|
||||
function () {
|
||||
let youtubeVids = document.getElementsByClassName('cn-youtube');
|
||||
for (let item of youtubeVids) {
|
||||
let a = document.createElement('a');
|
||||
a.innerText = 'Autoriser';
|
||||
a.classList.add('cn-cookie-link');
|
||||
a.setAttribute('role', 'button');
|
||||
a.onclick = function () {
|
||||
WebCookieNotice.openCookieModalToCookiePage();
|
||||
};
|
||||
let e = document.createElement('p');
|
||||
e.innerHTML = 'Youtube est désactivé. ';
|
||||
item.innerHTML = "";
|
||||
e.appendChild(a);
|
||||
item.appendChild(e);
|
||||
}
|
||||
}
|
||||
FALLBACK;
|
||||
|
||||
// VIMEO
|
||||
$cookies['vimeo'] = [
|
||||
'name' => 'VIDEOS - Vimeo',
|
||||
'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'),
|
||||
'link' => 'https://vimeo.com/cookie_policy',
|
||||
'labelLink' => __('En savoir +'),
|
||||
'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC']
|
||||
];
|
||||
|
||||
$cookies['vimeo']['script'] = <<<SCRIPT
|
||||
function () {
|
||||
let vimeoVids = document.getElementsByClassName('cn-vimeo');
|
||||
for (let item of vimeoVids) {
|
||||
let id = item.dataset.id;
|
||||
let e = document.createElement('iframe');
|
||||
e.src = "https://player.vimeo.com/video/" + id;
|
||||
e.width = "100%";
|
||||
e.height = "100%";
|
||||
e.frameBorder = "0";
|
||||
e.allow = "autoplay; fullscreen; picture-in-picture";
|
||||
e.allowFullscreen = true;
|
||||
item.innerHTML = "";
|
||||
item.appendChild(e);
|
||||
}
|
||||
}
|
||||
SCRIPT;
|
||||
$cookies['vimeo']['fallback'] = <<<FALLBACK
|
||||
function () {
|
||||
let vimeoVids = document.getElementsByClassName('cn-vimeo');
|
||||
for (let item of vimeoVids) {
|
||||
let a = document.createElement('a');
|
||||
a.innerText = 'Autoriser';
|
||||
a.classList.add('cn-cookie-link');
|
||||
a.setAttribute('role', 'button');
|
||||
a.onclick = function () {
|
||||
WebCookieNotice.openCookieModalToCookiePage();
|
||||
};
|
||||
let e = document.createElement('p');
|
||||
e.innerHTML = 'Vimeo est désactivé. ';
|
||||
item.innerHTML = "";
|
||||
e.appendChild(a);
|
||||
item.appendChild(e);
|
||||
}
|
||||
}
|
||||
FALLBACK;
|
||||
|
||||
// RECAPTCHA
|
||||
$cookies['recaptcha'] = [
|
||||
'name' => __('cookie-notice.custom.recaptcha.title'),
|
||||
'description' => __('cookie-notice.custom.recaptcha.description'),
|
||||
'link' => 'https://policies.google.com/privacy',
|
||||
'labelLink' => __('En savoir +'),
|
||||
'cookies' => ['NID', '__Secure-3PAPISID', '__Secure-3PSID', '__Secure-3PSIDCC']
|
||||
];
|
||||
|
||||
$cookies['recaptcha']['script'] = <<<SCRIPT
|
||||
function () {
|
||||
if (window.__CN_Recaptcha) {
|
||||
window.__CN_Recaptcha();
|
||||
}
|
||||
}
|
||||
SCRIPT;
|
||||
|
||||
// ANALYCTICS
|
||||
$analyticKey = config('services.google.analytics.id');
|
||||
$cookies['analytics'] = [
|
||||
'name' => __('cookie-notice.custom.analytics.title'),
|
||||
'description' => __('cookie-notice.custom.analytics.description'),
|
||||
'link' => 'https://policies.google.com/privacy',
|
||||
'labelLink' => __('En savoir +'),
|
||||
'cookies' => [
|
||||
'_ga',
|
||||
'_gat_gtag_' . str_replace("-", "_", $analyticKey),
|
||||
'_gid'
|
||||
]
|
||||
];
|
||||
|
||||
$cookies['analytics']['script'] = <<<SCRIPT
|
||||
function () {
|
||||
(function (d, t) {
|
||||
var g = d.createElement(t),
|
||||
s = d.getElementsByTagName(t)[0];
|
||||
g.src = 'https://www.googletagmanager.com/gtag/js?id={$analyticKey}';
|
||||
g.id = 'analytics';
|
||||
s.parentNode.insertBefore(g, s)
|
||||
}(document, 'script'));
|
||||
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', '{$analyticKey}');
|
||||
}
|
||||
SCRIPT;
|
||||
|
||||
// MATOMO
|
||||
$cookies['matomo'] = [
|
||||
'name' => __('cookie-notice.custom.matomo.title'),
|
||||
'description' => __('cookie-notice.custom.matomo.description'),
|
||||
'link' => 'https://fr.matomo.org/gdpr-analytics/',
|
||||
'labelLink' => __('En savoir +'),
|
||||
'cookies' => ['_pk']
|
||||
];
|
||||
|
||||
$cookies['matomo']['script'] = <<<SCRIPT
|
||||
function () {
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//yl.s-web.fr/";
|
||||
_paq.push(['setTrackerUrl', u+'rainbow']);
|
||||
_paq.push(['setSiteId', '
|
||||
SCRIPT;
|
||||
$cookies['matomo']['script'] .= config("services.matomo.site_id");
|
||||
$cookies['matomo']['script'] .= <<<SCRIPT
|
||||
']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'unicorn'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
}
|
||||
SCRIPT;
|
||||
|
||||
@endphp
|
||||
|
||||
{{-- INCLUDE TEMPLATE --}}
|
||||
@include('vendor.cookie-notice-templates.standard', compact(
|
||||
'site_name', 'logo_picture_url', 'logo_alt_text',
|
||||
'logo_title_text', 'strings'
|
||||
))
|
||||
|
||||
@push('scripts')
|
||||
<script nonce="{{ $nonce ?? '' }}">
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
window.WebCookieNotice = {};
|
||||
@foreach($cookies as $index_name => $cookie)
|
||||
window.WebCookieNotice['{{ $index_name }}'] = {};
|
||||
window.WebCookieNotice['{{ $index_name }}'].tmp = {};
|
||||
// SCRIPT
|
||||
window.WebCookieNotice['{{ $index_name }}'].tmp.script = {!! strip_tags($cookie['script']) !!};
|
||||
@php unset($cookie['script']); @endphp
|
||||
// FALLBACK
|
||||
@if(isset($cookie['fallback']))
|
||||
window.WebCookieNotice['{{ $index_name }}'].tmp.fallback = {!! strip_tags($cookie['fallback']) !!};
|
||||
@php unset($cookie['fallback']); @endphp
|
||||
@endif
|
||||
window.WebCookieNotice['{{ $index_name }}'].conf = @json($cookie);
|
||||
window.WebCookieNotice['{{ $index_name }}'].conf.script = window.WebCookieNotice['{{ $index_name }}'].tmp.script;
|
||||
window.WebCookieNotice['{{ $index_name }}'].conf.fallback = window.WebCookieNotice['{{ $index_name }}'].tmp.fallback;
|
||||
window.WebCookieNotice['{{ $index_name }}'] = window.WebCookieNotice['{{ $index_name }}'].conf;
|
||||
@endforeach
|
||||
window.WebCookieNotice = new window.CookieNotice(window.WebCookieNotice);
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
82
resources/views/vendor/cookie-notice-templates/standard.blade.php
vendored
Normal file
82
resources/views/vendor/cookie-notice-templates/standard.blade.php
vendored
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<div id="cn-wrapper" title="{{ $strings->modal_title }}" role="alertdialog" tabindex="-1">
|
||||
<button id="cn-cookie-btn" title="{{ $strings->button_customize_cookies }}">
|
||||
{{-- COOKIE SVG --}}
|
||||
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>{{ $strings->picture_cookie_title }}</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M14.0001 2.93383C14.0001 4.16622 14.6159 5.25477 15.5567 5.90849C15.3526 6.46423 15.2412 7.06473 15.2412 7.69126C15.2412 10.5472 17.5564 12.8624 20.4123 12.8624C21.0807 12.8624 21.7195 12.7356 22.3059 12.5047C22.9456 13.527 24.0817 14.2069 25.3766 14.2069C26.1872 14.2069 26.9357 13.9404 27.539 13.4903C27.5453 13.6594 27.5484 13.8294 27.5484 14C27.5484 21.4826 21.4826 27.5484 14 27.5484C6.51748 27.5484 0.45166 21.4826 0.45166 14C0.45166 6.51748 6.51748 0.45166 14 0.45166C14.3209 0.45166 14.6391 0.462811 14.9543 0.484747C14.3618 1.12929 14.0001 1.98931 14.0001 2.93383ZM21.2176 2.53212C21.2195 2.54914 21.2213 2.56619 21.2229 2.58328C21.2569 2.58864 21.2909 2.59433 21.3247 2.60035C21.2891 2.57745 21.2534 2.5547 21.2176 2.53212ZM25.5171 6.86104C25.523 6.89745 25.5285 6.93399 25.5336 6.97066C25.5512 6.97141 25.5687 6.97228 25.5861 6.97328C25.5633 6.93574 25.5403 6.89833 25.5171 6.86104ZM12.5247 2.09283C12.4748 2.38291 12.4487 2.68118 12.4487 2.98553C12.4487 4.33316 12.9591 5.56158 13.7972 6.48802C13.7266 6.87842 13.6898 7.28054 13.6898 7.69126C13.6898 11.404 16.6996 14.4137 20.4123 14.4137C20.8725 14.4137 21.3219 14.3675 21.7562 14.2794C22.689 15.1941 23.9669 15.7582 25.3766 15.7582C25.5439 15.7582 25.7094 15.7503 25.8726 15.7347C25.0321 21.5385 20.0368 25.9971 14.0001 25.9971C7.37431 25.9971 2.00305 20.6258 2.00305 14.0001C2.00305 7.87378 6.59498 2.82 12.5247 2.09283Z"
|
||||
fill="#FF4E4E" />
|
||||
<circle cx="7.58784" cy="12.8624" r="1.96503" fill="#FF4E4E" />
|
||||
<circle cx="8.82887" cy="19.2745" r="1.3445" fill="#FF4E4E" />
|
||||
<circle cx="13.6897" cy="14.5171" r="1.03423" fill="#FF4E4E" />
|
||||
<circle cx="11.4144" cy="7.48439" r="0.930805" fill="#FF4E4E" />
|
||||
<circle cx="17.5164" cy="20.3089" r="1.86161" fill="#FF4E4E" />
|
||||
<circle cx="21.3432" cy="6.7604" r="0.930805" fill="#FF4E4E" />
|
||||
<circle cx="22.1706" cy="1.89958" r="1.44792" fill="#FF4E4E" />
|
||||
<circle cx="26.8245" cy="8.31185" r="0.72396" fill="#FF4E4E" />
|
||||
</svg>
|
||||
</button>
|
||||
{{-- BANNER --}}
|
||||
<div id="cn-banner" tabindex="-1">
|
||||
<div class="cn-modal-top-line">
|
||||
<button id="cn-close-modal" title="{{ $strings->button_close_cookies }}">X</button>
|
||||
</div>
|
||||
{{-- CONTENT VIEW --}}
|
||||
<div class="cn-content" title="{{ $strings->panel_content }}" tabindex="0">
|
||||
{{-- 1ST PAGE BANNER --}}
|
||||
<div class="cn-banner-content">
|
||||
<div class="cn-banner-img">
|
||||
<img src="{{ $logo_picture_url }}" title="{{ $logo_title_text }}" alt="{{ $logo_alt_text }}">
|
||||
</div>
|
||||
<div class="cn-banner-text">
|
||||
<div class="cn-banner-title">
|
||||
<span>{!! nl2br(e($strings->banner_title)) !!}</span>
|
||||
</div>
|
||||
<div class="cn-banner-para-p">
|
||||
<p>{!! nl2br(e($strings->banner_text)) !!}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- 2ND PAGE CUSTOMIZE PANEL --}}
|
||||
<div class="cn-modal-container d-none">
|
||||
<p class="cn-modal-title" aria-level="h2">{{ $strings->panel_title }}</p>
|
||||
<p class="cn-modal-subtitle">{!! nl2br(e($strings->panel_subtitle)) !!}</p>
|
||||
<p class="cn-modal-description">{!! nl2br(e($strings->panel_details)) !!}</p>
|
||||
<div class="cn-modal-wrapper">
|
||||
{{-- COOKIES LIST --}}
|
||||
<ul id="cn-modal-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- NAV BAR --}}
|
||||
<div class="cn-nav" title="{{ $strings->navigation_title }}" role="navigation">
|
||||
<button class="cn-banner-btn cn-deny" id="cn-deny-banner"
|
||||
title="{{ $strings->button_forbid_all_title }}">{{ $strings->button_forbid_all }}</button>
|
||||
<button class="cn-banner-btn cn-accept" id="cn-accept-banner"
|
||||
title="{{ $strings->button_allow_all_title }}">{{ $strings->button_allow_all }}</button>
|
||||
<button class="cn-banner-btn cn-custom" id="cn-settings-banner" data-open-modal="{{ $strings->button_back }}"
|
||||
data-close-modal="{{ $strings->button_customize }}">{{ $strings->button_customize }}</button>
|
||||
</div>
|
||||
|
||||
{{-- COOKIE LIST LI TEMPLATE --}}
|
||||
<div id="cn-li-template">
|
||||
<div class="cn-cookie-wrapper">
|
||||
<div class="cn-cookie-infos">
|
||||
<span class="cn-cookie-name">#name</span>
|
||||
<span class="cn-cookie-description">#description</span>
|
||||
<a class="cn-cookie-link" title="{{ $strings->button_title_open_new_tab }}" target="blank">#link</a>
|
||||
</div>
|
||||
<div class="cn-cookie-buttons">
|
||||
<div class="deny">
|
||||
<input id="" name="" data-name="" data-status="false" type="radio">
|
||||
<label for="" role="button" tabindex="0">{{ $strings->button_forbid }}</label>
|
||||
</div>
|
||||
<div class="accept">
|
||||
<input id="" name="" data-name="" data-status="true" type="radio">
|
||||
<label for="" role="button" tabindex="0">{{ $strings->button_allow }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<?php
|
||||
|
||||
use App\Http\Controllers\Fo\HomeController;
|
||||
use App\Http\Controllers\Fo\StaticPageController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::middleware(['throttle:credentials'])->name('fo.')->group(function () {
|
||||
|
|
@ -10,4 +11,11 @@ Route::middleware(['throttle:credentials'])->name('fo.')->group(function () {
|
|||
}
|
||||
|
||||
Route::get('/', [HomeController::class, 'index'])->name('homepage');
|
||||
Route::get('/on-se-devoile', [StaticPageController::class, 'unveil'])->name('unveil');
|
||||
|
||||
// * Iframe cookies
|
||||
Route::get('/frame/{frame}', function (string $frame) {
|
||||
return view('fo.modules.frame', ['frame' => $frame]);
|
||||
})
|
||||
->where('frame', '[a-z]+')->name('frame');
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue