forge-joniko/ldc-doux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

T890 893 newcookies

Browse source
This commit is contained in:
Olivier Legat 2022-05-19 14:45:40 +00:00 • committed by Vincent BRIDIER
parent c39569e9cc
commit 3f89036054
8 changed files with 652 additions and 626 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.env.example
View file

@ -32,4 +32,6 @@ MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"
MAIL_LIST_SERVICEWEB=
MAIL_LIST_CONTACTFORM=
MAIL_LIST_CONTACTFORM=
ANALYTICS_GOOGLE_ID=

5
config/google.php Normal file
View file

@ -0,0 +1,5 @@
<?php
return [
'analyticsKey' => env('ANALYTICS_GOOGLE_ID')
];

240
resources/js/frontend/ldcweb-cn.js vendored
View file

@ -3,71 +3,68 @@
* Version 1.3
*/
export class LdcwebCn {
export class LdcwebCn {
constructor(config) {
this.config = config;
this.cookieContainer = document.getElementById("ldcweb-cn");
this.bannerContainer = document.getElementById("ldcweb-banner");
this.bannerContainer = document.querySelector(".ldcweb-cn-banner");
this.bannerBtn = document.querySelector(".ldcweb-banner-btnDetails-p");
this.ldcwebBtn = document.querySelector(".ldcweb-btn");
this.ldcwebBannerParaP = document.querySelector(
".ldcweb-banner-para-p"
);
this.ldcwebBannerContent = document.querySelector(
".ldcweb-banner-content"
);
this.ldcwebBannerDetails = document.querySelector(
".ldcweb-banner-details"
);
this.ldcwebBannerBtnDetails = document.querySelector(
".ldcweb-banner-btnDetails"
);
this.modalContainer = document.getElementById("ldcweb-cn-modal");
this.modalCloseBtn = document.getElementById("close-link");
this.acceptAllBtnBanner = document.getElementById(
"ldcweb-cn-accept-banner"
);
this.denyAllBtnBanner = document.getElementById("ldcweb-cn-deny-banner");
this.acceptAllBtn = document.getElementById("ldcweb-cn-accept");
this.denyAllBtn = document.getElementById("ldcweb-cn-deny");
this.denyAllBtnBanner = document.getElementById(
"ldcweb-cn-deny-banner"
);
this.personalizeBtn = document.getElementsByClassName(
"ldcweb-cn-personalize"
);
this.personalizeBtnBanner = document.querySelector(
".ldcweb-cn-personalize"
);
this.changeBtn = document.getElementsByClassName("ldcweb-cn-change");
this.cookiesList = document.getElementById("ldcweb-cn-list");
this.cookieLink = document.getElementsByClassName("ldcweb-cn-cookie-link");
this.cookieLink = document.querySelector(".ldcweb-cn-cookie-link");
this.modalDetails = document.querySelector(".modal-details");
this.template = document.getElementById("template").cloneNode(true);
this.modalBtnBoolean = 0;
this.bannerBtnTextBoolean = 0;
document.getElementById("template").remove();
let cookies = this.getLDCWebCookie("ldcwebcn-init");
if (cookies === undefined) {
let newCookie = [];
for (const [key, value] of Object.entries(this.config)) {
for (const [key] of Object.entries(this.config)) {
newCookie.push(key + "=wait");
}
this.bannerContainer.classList.add("ldcweb-cn-banner-open");
this.saveLDCWebCookie(newCookie);
this.cookieContainer.classList.add("open-banner");
} else {
let test = cookies.split(",");
test.forEach((elm) => {
test.forEach(elm => {
let test = elm.split("=");
if (test[1] === "wait") {
this.cookieContainer.classList.add("open-banner");
this.bannerContainer.classList.add("ldcweb-cn-banner-open");
}
});
}
this.modalCloseBtn.addEventListener(
"click",
function (e) {
e.preventDefault();
let cookies = this.getLDCWebCookie("ldcwebcn-init");
let test = cookies.split(",");
let bIsCompleted = true;
for (let item of test) {
if (item.indexOf("=wait") !== -1) {
bIsCompleted = false;
break;
}
}
if (bIsCompleted) {
this.cookieContainer.classList.remove("open-modal");
this.cookieContainer.classList.remove("open-banner");
} else {
alert(
"Vous devez renseigner votre choix pour tous les cookies, svp."
);
}
}.bind(this)
);
let accept = function (e) {
let accept = function(e) {
e.preventDefault();
for (const [key, value] of Object.entries(this.config)) {
this.addCookie(key, value);
@ -83,13 +80,11 @@ export class LdcwebCn {
denyLabel.classList.remove("active");
}
this.updateAllCookiesButtonsActiveStatus();
this.cookieContainer.classList.remove("open-modal");
this.cookieContainer.classList.remove("open-banner");
this.bannerContainer.classList.remove("ldcweb-cn-banner-open");
}.bind(this);
this.acceptAllBtnBanner.addEventListener("click", accept);
this.acceptAllBtn.addEventListener("click", accept);
let deny = function (e) {
let deny = function(e) {
e.preventDefault();
for (const [key, value] of Object.entries(this.config)) {
this.removeCookie(key, value);
@ -105,65 +100,126 @@ export class LdcwebCn {
denyLabel.classList.add("active");
}
this.updateAllCookiesButtonsActiveStatus();
this.cookieContainer.classList.remove("open-modal");
this.cookieContainer.classList.remove("open-banner");
this.bannerContainer.classList.remove("ldcweb-cn-banner-open");
}.bind(this);
this.denyAllBtnBanner.addEventListener("click", deny);
this.denyAllBtn.addEventListener("click", deny);
for (let item of this.cookieLink) {
this.addEvent(
item,
"click",
function (e) {
e.preventDefault();
this.openModal();
}.bind(this)
let openLdcwebCookies = function(e) {
e.preventDefault();
this.bannerContainer.classList.add("ldcweb-cn-banner-open");
this.ldcwebBannerContent.classList.add("visibility");
this.ldcwebBannerDetails.classList.add("visibility");
this.ldcwebBannerBtnDetails.classList.add("visibility");
this.modalContainer.classList.remove("visibility");
this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute(
"data-open-modal"
);
}
this.modalBtnBoolean = 1;
this.modalDetails.scrollTop = 0;
this.openModal();
}.bind(this);
this.cookieLink.addEventListener("click", openLdcwebCookies);
for (let item of this.personalizeBtn) {
this.addEvent(
item,
"click",
function (e) {
e.preventDefault();
this.setCookieList();
}.bind(this)
);
}
let hideModal = function(e) {
e.preventDefault();
this.ldcwebBannerContent.classList.toggle("visibility");
this.ldcwebBannerDetails.classList.toggle("visibility");
this.ldcwebBannerBtnDetails.classList.toggle("visibility");
this.modalContainer.classList.toggle("visibility");
this.setCookieList();
}.bind(this);
this.personalizeBtnBanner.addEventListener("click", hideModal);
let changeBtnPersonalize = function(e) {
e.preventDefault();
this.modalDetails.scrollTop = 0;
if (this.modalBtnBoolean === 0) {
this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute(
"data-open-modal"
);
this.modalBtnBoolean = 1;
} else {
this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute(
"data-close-modal"
);
this.modalBtnBoolean = 0;
}
}.bind(this);
this.personalizeBtnBanner.addEventListener(
"click",
changeBtnPersonalize
);
this.setListenerOnChange();
let cookie = this.getLDCWebCookie("ldcwebcn-init");
let test = cookie.split(",");
test.forEach((elm) => {
test.forEach(elm => {
let test = elm.split("=");
if (test[1] === "true") {
this.config[test[0]].script();
} else {
if (this.config[test[0]].fallback !== undefined) {
this.config[test[0]].fallback();
}
}
});
this.updateAllCookiesButtonsActiveStatus();
let changePara = function(e) {
e.preventDefault();
this.ldcwebBannerDetails.classList.toggle(
"ldcweb-banner-details-open"
);
this.bannerBtn.classList.toggle("ldcweb-banner-btnDetails-p-open");
if (this.bannerBtnTextBoolean === 0) {
e.target.innerHTML = e.target.getAttribute("data-open");
this.ldcwebBannerParaP.innerHTML = this.ldcwebBannerParaP.getAttribute(
"data-open"
);
this.ldcwebBannerDetails.style.height =
this.ldcwebBannerDetails.children[0].clientHeight + "px";
this.bannerBtnTextBoolean = 1;
} else {
e.target.innerHTML = e.target.getAttribute("data-close");
this.ldcwebBannerParaP.innerHTML = this.ldcwebBannerParaP.getAttribute(
"data-close"
);
this.ldcwebBannerDetails.style.height = "0px";
this.bannerBtnTextBoolean = 0;
}
}.bind(this);
this.bannerBtn.addEventListener("click", changePara);
let resetVue = function(e) {
e.preventDefault();
this.bannerContainer.classList.toggle("ldcweb-cn-banner-open");
if (
this.bannerContainer.classList.contains("ldcweb-cn-banner-open")
) {
this.ldcwebBannerContent.classList.remove("visibility"),
this.ldcwebBannerDetails.classList.remove("visibility"),
this.ldcwebBannerBtnDetails.classList.remove("visibility"),
this.modalContainer.classList.add("visibility");
this.personalizeBtnBanner.innerHTML = this.personalizeBtnBanner.getAttribute(
"data-close-modal"
);
this.modalBtnBoolean = 0;
}
}.bind(this);
this.ldcwebBtn.addEventListener("click", resetVue);
}
setCookieList() {
this.cookiesList.innerHTML = "";
let cookiesSite = this.getLDCWebCookie("ldcwebcn-init");
let acceptInputEvent = function (acceptLabel, denyLabel, key, value) {
return function (e) {
let acceptInputEvent = function(acceptLabel, denyLabel, key, value) {
return function() {
acceptLabel.classList.add("active");
denyLabel.classList.remove("active");
this.updateAllCookiesButtonsActiveStatus();
this.addCookie(key, value);
}.bind(this, [acceptLabel, denyLabel, key, value]);
};
let denyInputEvent = function (acceptLabel, denyLabel, key, value) {
return function (e) {
let denyInputEvent = function(acceptLabel, denyLabel, key, value) {
return function() {
acceptLabel.classList.remove("active");
denyLabel.classList.add("active");
this.updateAllCookiesButtonsActiveStatus();
@ -175,7 +231,9 @@ export class LdcwebCn {
let cookie = document.createElement("li");
cookie.append(this.template.children.item(0).cloneNode(true));
let name = cookie.querySelector("span.ldcweb-cn-name");
let description = cookie.querySelector("span.ldcweb-cn-description");
let description = cookie.querySelector(
"span.ldcweb-cn-description"
);
let link = cookie.querySelector("a.ldcweb-cn-link");
let acceptInput = cookie.querySelector(".accept > input");
let denyInput = cookie.querySelector(".deny > input");
@ -197,7 +255,12 @@ export class LdcwebCn {
acceptInput.addEventListener(
"click",
acceptInputEvent.apply(this, [acceptLabel, denyLabel, key, value])
acceptInputEvent.apply(this, [
acceptLabel,
denyLabel,
key,
value
])
);
denyInput.addEventListener(
"click",
@ -222,41 +285,34 @@ export class LdcwebCn {
break;
}
}
if (status === "wait") {
this.cookieContainer.classList.add("open-banner");
}
}
}
this.cookieContainer.classList.add("open-modal");
this.setListenerOnChange();
}
updateAllCookiesButtonsActiveStatus() {
let acceptsButtons =
this.cookieContainer.querySelectorAll("div.accept > label");
let deniesButtons =
this.cookieContainer.querySelectorAll("div.deny > label");
let acceptsButtons = this.cookieContainer.querySelectorAll(
"div.accept > label"
);
let deniesButtons = this.cookieContainer.querySelectorAll(
"div.deny > label"
);
let activeAcceptsButtons = this.cookieContainer.querySelectorAll(
"div.accept > label.active"
"div.accept > label.active"
);
let activeDeniesButtons = this.cookieContainer.querySelectorAll(
"div.deny > label.active"
);
this.acceptAllBtn.classList.remove("active");
this.denyAllBtn.classList.remove("active");
if (
acceptsButtons.length &&
acceptsButtons.length === activeAcceptsButtons.length
) {
this.acceptAllBtn.classList.add("active");
}
if (
deniesButtons.length &&
deniesButtons.length === activeDeniesButtons.length
) {
this.denyAllBtn.classList.add("active");
}
}
@ -278,8 +334,8 @@ export class LdcwebCn {
}
setListenerOnChange() {
this.changeBtn = document.getElementsByClassName("ldcweb-cn-change");
let itemClick = function (item) {
return function () {
let itemClick = function(item) {
return function() {
this.changeStatus(
item.getAttribute("data-name"),
item.getAttribute("data-status")
@ -296,12 +352,12 @@ export class LdcwebCn {
let cookie = this.getLDCWebCookie("ldcwebcn-init");
let test = cookie.split(",");
test.forEach((elm) => {
test.forEach(elm => {
let test = elm.split("=");
if (test[0] === name) {
newCookie.push(name + "=" + status);
if (status === "false") {
this.config[test[0]].cookies.forEach((elm) => {
this.config[test[0]].cookies.forEach(elm => {
let cookies = this.getLDCWebCookie(elm);
if (cookies !== undefined) {
document.cookie =
@ -340,8 +396,8 @@ export class LdcwebCn {
let matches = document.cookie.match(
new RegExp(
"(?:^|; )" +
name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") +
"=([^;]*)"
name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") +
"=([^;]*)"
)
);
return matches ? decodeURIComponent(matches[1]) : undefined;

11
resources/lang/en/rgpd.php
View file

@ -8,7 +8,14 @@ return array (
),
'banner' =>
array (
'desc' => '',
'desc' =>
array (
'introclose' => '',
'introopen' => '',
'more' => '',
),
'lessdetails' => '',
'moredetails' => '',
'title' => '',
),
'contact' =>
@ -27,11 +34,13 @@ return array (
'allowall' => '',
'denyall' => '',
'personalize' => '',
'return' => '',
'settignsall' => '',
),
'manage' =>
array (
'explain' => '',
'subtitle' => '',
'title' => '',
),
);

13
resources/lang/es/rgpd.php
View file

@ -4,11 +4,18 @@ return array (
'analytics' =>
array (
'desc' => '',
'title' => '',
'title' => 'Google Analytics',
),
'banner' =>
array (
'desc' => '',
'desc' =>
array (
'introclose' => '',
'introopen' => '',
'more' => '',
),
'lessdetails' => '',
'moredetails' => '',
'title' => '',
),
'contact' =>
@ -27,11 +34,13 @@ return array (
'allowall' => '',
'denyall' => '',
'personalize' => '',
'return' => '',
'settignsall' => '',
),
'manage' =>
array (
'explain' => '',
'subtitle' => '',
'title' => '',
),
);

41
resources/lang/fr/rgpd.php
View file

@ -1,44 +1,53 @@
<?php
return array (
'analytics' =>
'analytics' =>
array (
'desc' => 'Les services de mesure d\'audience permettent de générer des statistiques de fréquentation utiles à l\'amélioration du site.',
'title' => 'MESURES D\'AUDIENCE - Google Analytics',
'title' => 'Google Analytics',
),
'banner' =>
'banner' =>
array (
'desc' => 'Ce site web stocke les cookies sur votre ordinateur. LDC utilise ces informations afin d’améliorer et de personnaliser votre expérience de navigation, ainsi que pour l\'analyse et les indicateurs concernant nos visiteurs à la fois sur ce site web et sur d\'autres supports.
<br>Vous pouvez cliquer sur « Accepter » si vous consentez à l\'utilisation de ces cookies.
<br>Si vous refusez l\'utilisation des cookies, vos informations ne seront pas suivies lors de votre visite sur ce site. Un cookie sera utilisé dans votre navigateur afin de se souvenir de ne pas suivre vos préférences. Certaines fonctionnalités ne seront pas accessibles.
<br>Vous pouvez changer d’avis et modifier votre consentement à tout moment en revenant sur ce site.
<br>Pour en savoir plus sur les cookies que nous utilisons, consultez notre <a href=":PRIVROUTE">politique de confidentialité</a>.',
'title' => 'Le respect de votre vie privée est notre priorité',
'desc' =>
array(
'introclose' => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques.
En poursuivant votre navigation sur ce site ou en fermant ce bandeau, vous consentez à l’utilisation de ces cookies.',
'introopen' => 'Ce site web stocke les cookies sur votre ordinateur. LDC utilise ces informations afin d’améliorer et de personnaliser votre expérience de navigation, ainsi que pour l\'analyse et les indicateurs concernant nos visiteurs à la fois sur ce site web et sur d\'autres supports.
<br>Vous pouvez cliquer sur « Accepter » si vous consentez à l\'utilisation de ces cookies.',
'more' => '<br>Si vous refusez l\'utilisation des cookies, vos informations ne seront pas suivies lors de votre visite sur ce site. Un cookie sera utilisé dans votre navigateur afin de se souvenir de ne pas suivre vos préférences. Certaines fonctionnalités ne seront pas accessibles.
<br>Vous pouvez changer d’avis et modifier votre consentement à tout moment en revenant sur ce site.
<br>Pour en savoir plus sur les cookies que nous utilisons, consultez notre <a href=":PRIVROUTE">politique de confidentialité</a>.',
),
'title' => 'Le site Doux utilise des cookies!',
'moredetails' => 'Plus de détails...',
'lessdetails' => 'Moins de détails...',
),
'contact' =>
'contact' =>
array (
'acceptcgu' => 'J’accepte les conditions générales d’utilisation du site et autorise la Société Bretonne de Volaille à traiter mes données personnelles conformément à la Charte de confidentialité.',
'disclaimer' => 'Les informations que vous nous communiquez sont collectées et traitées par la Société Bretonne de Volaille, responsable de traitement selon les finalités définies dans notre Charte de confidentialité. Ces informations sont destinées au personnel de la Société Bretonne de Volaille et peuvent être partagées avec ses sous-traitants.<br />
A tout moment, vous pouvez retirer votre consentement. Pour toute information complémentaire concernant vos données personnelles et vos droits, merci de consulter notre <a href=":PRIVROUTE">Charte de confidentialité.</a>',
),
'cookie' =>
'cookie' =>
array (
'allow' => 'Autoriser',
'deny' => 'Interdire',
),
'cookies' =>
'cookies' =>
array (
'acceptall' => 'OK, TOUT ACCEPTER',
'allowall' => 'Autoriser tous les cookies',
'denyall' => 'Interdire tous les cookies',
'personalize' => 'Personnaliser',
'allowall' => 'TOUT ACCEPTER',
'denyall' => 'TOUT REFUSER',
'personalize' => 'PERSONNALISER',
'return' => 'RETOUR',
'settignsall' => 'Préférence pour tous les services',
),
'manage' =>
'manage' =>
array (
'explain' => 'Les fonctionnalités de ce site s’appuient sur des services proposés par des tiers.
<br>Si vous acceptez, ces tiers déposeront des cookies qui vous permettront de visualiser sur le site du contenu hébergé par ces tiers.
<br>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.',
'title' => 'Panneau de gestion des cookies',
'subtitle' => 'Le respect de votre vie privée est notre priorité',
),
);

767
resources/sass/frontend/cookies-ldc.scss vendored
View file

@ -2,26 +2,36 @@
/* - Choix des FONTS */
/* - Changement des couleurs et des polices */
:root{
:root {
/* PARTIE A RENSEIGNER */
--primary-color: #d4021d;
--secondary-color: #707070;
--background-color: #ffffff;
--title-font: "Satisfy", sans-serif;
--title-size: 30px;
--primary-color: #0c1417;
--secondary-color: #ff0400;
--background-color: #fccf1d;
--shadow-color: 0 0.5rem 1rem rgb(0 0 0 / 35%);
--title-font: "barlow-bold", arial, sans-serif;
--title-size: 40px;
--text-font: "Barlow", sans-serif;
--text-size: 16px;
--text-size: 14px;
--accept-color: #33aa33;
--deny-color: #aa3333;
/* Position et animation des cookies */
--ldcweb-cn-position-left: 20px; /* Distance par rapport à la gauche de la fenêtre */
--ldcweb-cn-position-right: auto; /* Distance par rapport à la droite de la fenêtre */
--ldcweb-cn-animation-left: 0; /* Position gauche de base des cookies */
--ldcweb-cn-animation-right: auto; /* Position droite de base des cookies */
--ldcweb-cn-position-bottom: 20px; /* Distance par rapport au bas de la fenêtre */
--ldcweb-cn-z-index: 200;
/* PARTIE A RENSEIGNER FACULTATIF */
/* FENETRE D'ACCUEIL */
--ck-bg-color: var(--background-color);
/* Title settings */
--ck-w1-bgcolor-title: var(--background-color);
--ck-w1-font-family-title: var(--title-font);
--ck-w1-font-size-title: var(--title-size);
--ck-w1-color-title: #000000;
--ck-w1-color-title: var(--secondary-color);
/* Text settings */
--ck-w1-font-family-txt: var(--text-font);
@ -30,7 +40,7 @@
--ck-w1-color-href-hover: var(--secondary-color);
/* Button settings */
--ck-w1-color-btn: var(--primary-color);
--ck-w1-color-btn: var(--secondary-color);
--ck-w1-color-btn-hover: var(--secondary-color);
--ck-w1-font-family-btn-txt: var(--text-font);
--ck-w1-font-size-btn-txt: var(--text-size);
@ -42,15 +52,15 @@
/* FENETRE DE PERSONNALISATION */
--ck-bg-color-modal-wrapper: #ffffff;
/* Title settings */
--ck-w2-bgcolor-title: var(--primary-color);
--ck-w2-bgcolor-title: var(--background-color);
--ck-w2-font-family-title: var(--title-font);
--ck-w2-font-size-title: var(--title-size);
--ck-w2-color-title: #ffffff;
--ck-w2-color-title: var(--secondary-color);
/* Text settings */
--ck-w2-font-family-txt: var(--text-font);
--ck-w2-font-size-txt: var(--text-size);
--ck-w2-color-txt: #ffffff;
--ck-w2-color-txt: var(--primary-color);
--ck-w2-color-href-hover: #000000;
/* Accept/Deny btn settings */
@ -66,520 +76,427 @@
--ck-font-family-list: var(--text-font);
--ck-font-size-list: var(--text-size);
--ck-color-list: #000000;
--ck-color-title: var(--secondary-color);
/* Scroll bar */
--ck-scroll-bgcolor: var(--primary-color);
--ck-scroll-barcolor: var(--secondary-color);
}
/* FIN DU PARAMETRAGE */
/* MOBILE FIRST */
#ldcweb-cn *,#ldcweb-cn *::before, #ldcweb-cn *::after {
padding: 0;
margin: 0;
#template {
display: none;
}
* {
box-sizing: border-box;
}
#template{display: none;}
#ldcweb-cn.open-banner .ldcweb-cn-banner{display: flex;}
#ldcweb-cn.open-modal #ldcweb-cn-modal{display: flex;}
#ldcweb-cn.open-banner, #ldcweb-cn.open-modal{display: flex;}
#ldcweb-cn {
display: none;
flex-direction: column;
justify-content: flex-end;
position: fixed;
left: 0; right: 0;
top: 0; bottom: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99999999999;
opacity: 1;
line-height: initial;
#ldcweb-cn.open-banner .ldcweb-cn-banner {
display: flex;
}
#ldcweb-cn.open-banner,
#ldcweb-cn.open-modal {
display: flex;
}
#ldcweb-cn p,
#ldcweb-cn a{
#ldcweb-cn a {
font-family: var(--ck-w1-font-family-txt);
font-size: var(--ck-w1-font-size-txt);
color: var(--ck-w1-color-txt);
}
#ldcweb-cn a{
#ldcweb-cn a {
text-decoration: underline;
transition: color .5s;
transition: 0s;
}
#ldcweb-cn a:hover{color: var(--ck-w1-color-href-hover);}
#ldcweb-cn .ldcweb-cn-banner, #ldcweb-cn-modal .modal-wrapper{
#ldcweb-cn a::before {
content: none;
}
.ldcweb-cn-cookie-link {
cursor: pointer;
}
#ldcweb-cn .ldcweb-cn-banner,
#ldcweb-cn-modal .modal-wrapper {
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
}
#ldcweb-cn .ldcweb-cn-banner{
display: none;
padding: 6vw 10vw;
max-height: 50vh;
box-shadow: 0px 5px 10px -5px #000 inset;
#ldcweb-cn .ldcweb-cn-banner {
padding: 0;
margin: 0;
padding-top: 20px;
background-color: var(--ck-bg-color);
flex-direction: column;
justify-content: flex-end;
position: fixed;
left: var(--ldcweb-cn-animation-left);
right: var(--ldcweb-cn-animation-right);
bottom: calc(var(--ldcweb-cn-position-bottom) + 60px);
width: 475px;
height: auto;
max-height: 80vh;
border-radius: 10px;
z-index: var(--ldcweb-cn-z-index);
line-height: initial;
overflow: hidden;
box-shadow: var(--shadow-color);
user-select: none;
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
#ldcweb-cn .ldcweb-cn-banner div:not(:last-child){margin-bottom: 4vw;}
#ldcweb-cn .banner-img{
flex: 1;
max-width: 200px;
#ldcweb-cn .ldcweb-cn-banner-open {
left: var(--ldcweb-cn-position-left);
right: var(--ldcweb-cn-position-right);
opacity: 1;
visibility: visible;
}
#ldcweb-cn .banner-img img{width: 100%;}
#ldcweb-cn .col{flex: 2;}
#ldcweb-cn .banner-title p{
.ldcweb-banner-content,
.ldcweb-banner-details {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px 20px 0px 20px;
}
.ldcweb-banner-details {
height: 0;
transition: 0.3s;
text-align: justify;
overflow: hidden;
align-items: flex-start;
}
.ldcweb-banner-details-open {
margin-bottom: 6px;
}
#ldcweb-cn .ldcweb-banner-img {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
width: 150px;
padding-right: 20px;
}
#ldcweb-cn .ldcweb-banner-img img {
width: 100%;
}
#ldcweb-cn .ldcweb-banner-text {
flex: 2;
}
#ldcweb-cn .ldcweb-banner-title {
line-height: 0.9;
padding-bottom: 1rem;
}
#ldcweb-cn .ldcweb-banner-title p {
font-family: var(--ck-w1-font-family-title);
font-size: var(--ck-w1-font-size-title);
font-weight: bold;
color: var(--ck-w1-color-title);
text-align: left;
}
#ldcweb-cn .ldcweb-banner-para-p {
text-align: justify;
margin-bottom: 6px;
}
#ldcweb-cn .ldcweb-banner-btnDetails {
width: 100%;
margin: 0 0 20px 0;
}
#ldcweb-cn .ldcweb-banner-btnDetails-p {
cursor: pointer;
color: var(--secondary-color);
width: fit-content;
margin: 0 auto;
text-align: center;
}
#ldcweb-cn .banner-txt{text-align: center;}
#ldcweb-cn .btns {
#ldcweb-cn .ldcweb-banner-btns {
flex: 1;
display: flex;
flex-direction: column;
}
#ldcweb-cn .btns .btn {
display: block;
/* flex: 1; */
padding: 1em;
text-align: center;
min-width: 12em;
flex-direction: row;
width: 100%;
line-height: 0;
background-color: var(--ck-w1-color-btn);
cursor: pointer;
}
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex {
width: 66.5%;
border-top: 1px solid grey;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.ldcweb-banner-btn-personalize {
width: 33.5%;
border-top: 1px solid gray;
}
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex div {
width: 50%;
}
.ldcweb-banner-btn-accept {
border-left: 1px solid gray;
border-right: 1px solid gray;
}
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex .ldcweb-cn-accept {
font-weight: bolder;
color: var(--secondary-color);
}
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btns-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 50px;
background-color: var(--background-color);
text-decoration: none;
font-family: var(--ck-w1-font-family-btn-txt);
font-size: var(--ck-w1-font-size-btn-txt);
color: var(--ck-w1-color-btn-txt);
transition: all .5s;
color: var(--primary-color);
}
#ldcweb-cn .btns .btn:hover {
background-color: var(--ck-w1-color-btn-hover);
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btns-btn:hover {
color: var(--ck-w1-color-btn-txt-hover);
background-color: var(--ck-w1-color-btn-hover);
}
.ldcweb-btn {
position: fixed;
left: var(--ldcweb-cn-position-left);
right: var(--ldcweb-cn-position-right);
bottom: var(--ldcweb-cn-position-bottom);
z-index: var(--ldcweb-cn-z-index);
background-color: white;
padding: 8px;
border-radius: 100%;
cursor: pointer;
box-shadow: var(--shadow-color);
width: 50px;
height: 50px;
}
.ldcweb-btn-icon path {
fill: var(--secondary-color);
}
.ldcweb-btn-icon circle {
fill: var(--secondary-color);
}
.visibility {
display: none !important;
}
/* MODAL */
#ldcweb-cn-modal {
display: none;
align-items: center;
justify-content: center;
position: fixed;
left: 0; right: 0;
top: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 200;
background: rgba(0, 0, 0, 0.7);
opacity: 1;
}
#ldcweb-cn-modal .modal-wrapper{
position: relative;
background-color: var(--ck-bg-color-modal-wrapper);
max-height: 100vh;
}
#ldcweb-cn-modal .modal-wrapper > div:not(:first-of-type){width: 100%;}
#ldcweb-cn-modal .modal-btn-close{
position: absolute;
right: 0;
top: 0;
width: 5vw; height: 6vw;
display: flex;
justify-content: center;
align-items: center;
}
#ldcweb-cn-modal .modal-btn-close a{
justify-content: center;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
color: var(--ck-w2-color-title);
background-color: var(--ck-w2-bgcolor-title);
text-decoration: none;
border-radius: 0 0 0 50%;
transition: all .5s;
z-index: 200;
opacity: 1;
}
#ldcweb-cn-modal .modal-btn-close a:hover{
color: #000000;
background-color: #808080;
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
box-shadow: -1px 1px 10px -4px #000;
#ldcweb-cn-modal .modal-wrapper {
position: relative;
max-height: 100vh;
}
#ldcweb-cn-modal .modal-wrapper > div:not(:first-of-type) {
width: 100%;
align-items: flex-end;
}
#ldcweb-cn-modal .modal-title {
padding: 0px 20px 0px 20px;
}
#ldcweb-cn-modal .modal-title * {
text-align: justify;
margin: 0;
}
#ldcweb-cn-modal .modal-title, #ldcweb-cn-modal .modal-all
{background-color: var(--ck-w2-bgcolor-title);}
#ldcweb-cn-modal .modal-title .description,
#ldcweb-cn-modal .modal-title > div,
#ldcweb-cn-modal .modal-all{
#ldcweb-cn-modal .modal-btns {
display: flex;
flex-direction: column;
align-items: center;
font-weight: normal;
line-height: initial;
}
#ldcweb-cn-modal .modal-title .description,
#ldcweb-cn-modal .modal-title > div a,
#ldcweb-cn-modal .modal-all p,
#ldcweb-cn-modal .modal-all a{
#ldcweb-cn-modal .modal-btns p,
#ldcweb-cn-modal .modal-btns a,
#ldcweb-cn-modal .modal-title > .subTitle {
font-family: var(--ck-w2-font-family-txt);
font-size: var(--ck-w2-font-size-txt);
color: var(--ck-w2-color-txt);
text-align: center;
}
#ldcweb-cn-modal .modal-title > div a:hover,
#ldcweb-cn-modal .modal-all a:hover
{color: var(--ck-w2-color-href-hover);}
/* TITLE */
#ldcweb-cn-modal .modal-wrapper .modal-title{padding: 4vw;}
#ldcweb-cn-modal .modal-title .title{
#ldcweb-cn-modal .modal-title .title {
font-family: var(--ck-w2-font-family-title);
font-size: var(--ck-w2-font-size-title);
font-weight: bold;
color: var(--ck-w2-color-title);
}
#ldcweb-cn-modal .modal-title > .subTitle {
color: var(--ck-w2-color-title);
margin-bottom: 6px;
}
#ldcweb-cn-modal .modal-title .title,
#ldcweb-cn-modal .modal-title > .subTitle {
text-align: center;
}
#ldcweb-cn-modal .modal-title .title::after,
#ldcweb-cn-modal .modal-title > div::after{
content: "";
display: block;
width: 90%; height: 2px;
margin: 4vw auto;
#ldcweb-cn-modal .modal-title a {
width: fit-content;
}
background-color: rgba(255, 255, 255, .5);
}
#ldcweb-cn-modal .modal-title a{width: fit-content;}
/* ALL */
#ldcweb-cn-modal .modal-wrapper .modal-all{padding: 0 4vw 4vw;}
#ldcweb-cn-modal .modal-all .all-buttons{
display: flex;
flex-direction: column;
align-items: center;
}
#ldcweb-cn-modal .modal-all .all-buttons > div{
width: calc(100% + 15vw);
margin: 2vw 0 0;
}
#ldcweb-cn-modal .modal-all a{
display: block;
padding: 3vw 0;
color: var(--ck-color-txt);
/* font-weight: bold; */
text-decoration: none;
transition: all .5s;
}
#ldcweb-cn-modal .all-buttons > div.accept > a.active {
background-color: var(--ck-color-accept-hover);
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
}
#ldcweb-cn-modal .all-buttons > div.deny > a.active {
background-color: var(--ck-color-deny-hover);
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
}
#ldcweb-cn-modal .modal-all > div > div:first-of-type a{background-color: var(--ck-color-accept);}
#ldcweb-cn-modal .modal-all > div > div:last-of-type a{background-color: var(--ck-color-deny);}
#ldcweb-cn-modal .modal-all > div > div:first-of-type a:hover{
color: var(--ck-color-txt-hover);
background-color: var(--ck-color-accept-hover);
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
}
#ldcweb-cn-modal .modal-all > div > div:last-of-type a:hover{
color: var(--ck-color-txt-hover);
background-color: var(--ck-color-deny-hover);
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
}
/* DETAILS */
#ldcweb-cn-modal .modal-wrapper .modal-details{padding: 2vw 0;}
#ldcweb-cn-modal .modal-details ul{
#ldcweb-cn-modal .modal-details {
width: 100%;
height: 153px;
overflow-y: auto;
margin: 6px 0;
}
#ldcweb-cn-modal .modal-details ul {
display: flex;
flex-direction: column;
padding: 0 20px;
list-style: none;
}
#ldcweb-cn-modal .modal-details li > div{
#ldcweb-cn-modal .modal-details li > div {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 2vw 0;
padding: 2vw 4vw;
background-color: var(--ck-bgcolor-list);
align-items: center;
margin: 10px 0;
padding: 10px 20px;
border-radius: 20px;
border: 1px solid var(--ck-bgcolor-list);
}
#ldcweb-cn-modal .modal-details li span,
#ldcweb-cn-modal .modal-details li a,
#ldcweb-cn-modal .modal-details li label{
#ldcweb-cn-modal .modal-details li label {
font-family: var(--ck-font-family-list);
font-size: var(--ck-font-size-list);
color: var(--ck-color-list);
}
#ldcweb-cn-modal .modal-details li a:hover{color:var(--secondary-color);}
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos{
#ldcweb-cn-modal .modal-details .ldcweb-cn-name {
color: var(--ck-color-title);
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{
font-size: calc(var(--ck-font-size-list) * 1.25);
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type {
font-size: var(--ck-w1-font-size-title);
font-weight: bold;
font-family: var(--ck-w1-font-family-title);
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos .ldcweb-cn-description {
color: var(--ck-w2-color-txt);
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos a {
width: fit-content;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons {
display: flex;
justify-content: space-around;
width: 200px;
margin-top: 6px;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos a{width: fit-content;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{display: flex;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type,
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type
{transition: all .5s;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{
margin-right: 2vw;
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type {
transition: all 0.3s;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type {
background: var(--ck-color-accept);
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type{background: var(--ck-color-deny);}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{
width: 25vw;
margin: 2vw 0;
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type {
background: var(--ck-color-deny);
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div {
display: table;
/* font-weight: bold; */
text-align: center;
margin: 0.5em;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type:hover,
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type:hover{
cursor: pointer;
background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:hover > label{color: var(--ck-color-txt-hover);}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input:checked ~ label,
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input ~label.active{
background-color: var(--ck-color-accept-hover);
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type input:checked ~ label,
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:last-of-type input ~ label.active{
#ldcweb-cn-modal
.modal-details
.ldcweb-cn-buttons
div:first-of-type
input:checked
~ label,
#ldcweb-cn-modal
.modal-details
.ldcweb-cn-buttons
div:first-of-type
input
~ label.active {
background-color: var(--ck-color-deny-hover);
background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons input{display: none;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{
#ldcweb-cn-modal
.modal-details
.ldcweb-cn-buttons
div:last-of-type
input:checked
~ label,
#ldcweb-cn-modal
.modal-details
.ldcweb-cn-buttons
div:last-of-type
input
~ label.active {
background-color: var(--ck-color-accept-hover);
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons input {
display: none;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label {
width: 100px;
display: block;
padding: 1.5vw 0;
color: var(--ck-color-txt);
transition: color .5s;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label:hover{
transition: color 0.3s;
padding: 6px 20px;
cursor: pointer;
color: var(--ck-color-txt-hover);
}
/* ************************* */
/* ** ** */
/* ************************* */
/* ** ** */
/* ** ** */
/* ** ** */
/* ** ** */
/* ** ** */
/* ** ** */
/* ** ** */
/* ******* */
@media only screen and (min-width:768px) {
#ldcweb-cn .ldcweb-cn-banner{
padding-top: 4vw;
padding-bottom: 4vw;
}
#ldcweb-cn .btns {flex-direction: row;}
#ldcweb-cn .btns > div:first-child,
#ldcweb-cn .btns > div:last-child
{margin-top: 0;}
#ldcweb-cn .btns > div:not(:last-child) {margin: 0 2vw 0 0;}
/* MODAL */
#ldcweb-cn-modal .modal-wrapper{width: 90vw;}
/* ALL */
#ldcweb-cn-modal .modal-all{
flex-direction: row;
justify-content: space-between;
}
#ldcweb-cn-modal .modal-all a{padding: 2vw 0;}
#ldcweb-cn-modal .modal-all .all-buttons > div{margin: 0;}
#ldcweb-cn-modal .modal-all .all-buttons > div:last-of-type{margin: 1vw 0 0;}
#ldcweb-cn-modal .modal-all a{width: 30vw;}
/* DETAILS */
#ldcweb-cn-modal .modal-details li > div{flex-direction: row;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{flex-direction: column;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{
width: 20vw;
margin: 0;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{margin: 0 0 1vw;}
}
/* **** */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* **** */
@media only screen and (min-width:1024px) {
#ldcweb-cn .ldcweb-cn-banner{
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
padding: 2vw 3vw;
}
#ldcweb-cn .ldcweb-cn-banner div:not(:last-child){margin: 0 0 .5em 0;}
#ldcweb-cn .ldcweb-cn-banner > div:not(:last-child){margin: 0 4vw 0 0;}
#ldcweb-cn .ldcweb-cn-banner .banner-img{
height: 100%;
display: flex;
align-items: center;
}
#ldcweb-cn .banner-img img{height: fit-content;}
#ldcweb-cn .banner-txt{text-align: start;}
#ldcweb-cn .btns {
height: 100%;
/* MEDIA QUERIES */
@media (max-width: 535px) {
.ldcweb-banner-content,
#ldcweb-cn .ldcweb-banner-btns {
flex-direction: column;
justify-content: center;
}
#ldcweb-cn .btns > div:first-child .btn{margin: 0;}
/* MODAL */
#ldcweb-cn-modal .modal-wrapper{width: 80vw;}
#ldcweb-cn-modal .modal-btn-close{
width: 3vw;
height: 3vw;
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-flex,
#ldcweb-cn .ldcweb-banner-btns .ldcweb-banner-btn-personalize {
width: 100%;
}
/* TITLE */
#ldcweb-cn-modal .modal-wrapper .modal-title{padding: 2vw;}
#ldcweb-cn-modal .modal-title .title::after,
#ldcweb-cn-modal .modal-title > div::after{margin: 2vw auto;}
/* ALL */
#ldcweb-cn-modal .modal-wrapper .modal-all{padding: 0 2vw 2vw;}
#ldcweb-cn-modal .modal-all a{padding: 1.5vw 0;}
#ldcweb-cn-modal .modal-all .all-buttons{flex-direction: row;}
#ldcweb-cn-modal .modal-all .all-buttons > div:first-of-type{margin: 0 1vw 0 0;}
#ldcweb-cn-modal .modal-all .all-buttons > div:last-of-type{margin: 0;}
#ldcweb-cn-modal .modal-all a{width: 22vw;}
/* DETAILS */
#ldcweb-cn-modal .modal-wrapper .modal-details{padding: 1vw 0;}
#ldcweb-cn-modal .modal-details li > div{
margin: 1vw 0;
padding: 2vw;
#ldcweb-cn
.ldcweb-banner-btns
.ldcweb-banner-btn-flex
.ldcweb-banner-btn-deny,
#ldcweb-cn
.ldcweb-banner-btns
.ldcweb-banner-btn-flex
.ldcweb-banner-btn-accept {
width: 50%;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{
flex-direction: row;
align-items: center;
.ldcweb-banner-btn-accept {
border-left: 1px solid gray;
border-right: none;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{
width: 10vw;
margin: 0;
#ldcweb-cn .ldcweb-cn-banner {
left: 0;
bottom: 0;
}
#ldcweb-cn .ldcweb-cn-banner {
width: 100%;
max-height: 100vh;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.ldcweb-banner-details-open {
height: 0;
}
#ldcweb-cn .ldcweb-banner-title p {
text-align: center;
}
#ldcweb-cn .ldcweb-banner-img {
padding: 0 0 20px 0;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{margin: 0 1vw 0;}
}
/* ******** */
/* * ***** * */
/* * * * * */
/* *** * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * * */
/* * ************** */
/* * * */
/* ***************** */
@media only screen and (min-width: 1440px) {
#ldcweb-cn .col{flex: 4;}
/* MODAL */
#ldcweb-cn-modal .modal-wrapper{width: 60vw;}
#ldcweb-cn-modal .modal-btn-close{
width: 2vw;
height: 2vw;
}
/* ALL */
#ldcweb-cn-modal .modal-all .all-buttons > div:first-of-type{margin: 0 1vw 0 0;}
#ldcweb-cn-modal .modal-all a{
width: 15vw;
padding: 1vw 0;
}
/* DETAILS */
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{width: 8vw;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{padding: 1vw 0;}
}
/* ************ */
/* * **** */
/* ********* * */
/* ***** * */
/* ** * */
/* ** * */
/* ********** * */
/* * * */
/* ********* * */
/* ***** * */
/* ** * */
/* ** * */
/* ********** * */
/* * *** */
/* ************ */
@media only screen and (min-width: 1920px) {
#ldcweb-cn p{font-size: calc(var(--ck-w1-font-size-txt) * 1.25);}
#ldcweb-cn .banner-title p{font-size: calc(var(--ck-w1-font-size-title) * 1.25);}
#ldcweb-cn .btns .btn {font-size: calc(var(--ck-w1-font-size-btn-txt) * 1.25);}
/* MODAL */
#ldcweb-cn-modal .modal-wrapper{width: 50vw;}
#ldcweb-cn-modal .modal-btn-close{
width: 2rem;
height: 2rem;
}
#ldcweb-cn-modal .modal-title .description,
#ldcweb-cn-modal .modal-title > div a,
#ldcweb-cn-modal .modal-all p,
#ldcweb-cn-modal .modal-all a
{font-size: calc(var(--ck-w2-font-size-txt) * 1.25);}
/* TITLE */
#ldcweb-cn-modal .modal-wrapper .modal-title{padding: 1vw;}
#ldcweb-cn-modal .modal-title .title{font-size: calc(var(--ck-w2-font-size-title) * 1.25);}
#ldcweb-cn-modal .modal-title .title::after,
#ldcweb-cn-modal .modal-title > div::after{margin: 1vw auto;}
/* ALL */
#ldcweb-cn-modal .modal-wrapper .modal-all{padding: 0 1vw 1vw;}
#ldcweb-cn-modal .modal-all a{
width: 13vw;
padding: .5vw 0;
}
/* DETAILS */
#ldcweb-cn-modal .modal-wrapper .modal-details{padding: .5vw 0;}
#ldcweb-cn-modal .modal-details li > div{
margin: .5vw 0;
padding: 1vw;
}
#ldcweb-cn-modal .modal-details li span,
#ldcweb-cn-modal .modal-details li a,
#ldcweb-cn-modal .modal-details li label
{font-size: calc(var(--ck-font-size-list) * 1.25);}
#ldcweb-cn-modal .modal-details .ldcweb-cn-infos span:first-of-type{font-size: calc(var(--ck-font-size-list) * 1.5);}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons{
flex-direction: row;
align-items: center;
}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{width: 5vw;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type{margin: 0 1vw 0;}
#ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{padding: .5vw 0;}
}

197
resources/views/layouts/frontend/cookie.blade.php
View file

@ -1,99 +1,118 @@
<div id="ldcweb-cn">
<div id="ldcweb-banner" class="ldcweb-cn-banner">
<div class="banner-img">
<img src="{{ asset('assets/images/logo-doux.png') }}" alt="{{ __('Doux') }}">
</div>
<div class="col">
<div class="banner-title">
<p aria-level="h1">{{ __('rgpd.banner.title') }}</p>
</div>
<div class="banner-txt">
<p>{!! __('rgpd.banner.desc', ['PRIVROUTE' => route($routeprefixer . 'policy')]) !!}
<br>
</p>
</div>
</div>
<div class="btns">
<div>
<a href="#" id="ldcweb-cn-accept-banner" class="btn ldcweb-cn-accept">{{ __('rgpd.cookies.allowall') }}</a>
</div>
<div>
<a href="#" id="ldcweb-cn-deny-banner" class="btn ldcweb-cn-deny">{{ __('rgpd.cookies.denyall') }}</a>
</div>
<div>
<a href="#" class="btn ldcweb-cn-personalize">{{ __('rgpd.cookies.personalize') }}</a>
</div>
</div>
</div>
<div id="ldcweb-cn-modal">
<div class="modal-wrapper">
<div class="modal-btn-close"><a href="#" id="close-link">X</a></div>
<div class="modal-title">
<p class="title" aria-level="h2">{{ __('rgpd.manage.title') }}</p>
<p class="description">{!! __('rgpd.manage.explain') !!}
</p>
</div>
<div class="modal-all">
<p>{{ __('rgpd.cookies.settignsall') }}</p>
<div class="all-buttons">
<div class="accept"><a href="#" id="ldcweb-cn-accept">{{ __('rgpd.cookies.allowall') }}</a></div>
<div class="deny"><a href="#" id="ldcweb-cn-deny">{{ __('rgpd.cookies.denyall') }}</a></div>
<a class="ldcweb-btn" title="Personnaliser les cookies">
<svg class="ldcweb-btn-icon" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
<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>
</a>
<div id="ldcweb-banner" class="ldcweb-cn-banner">
<div class="ldcweb-banner-content">
<div class="ldcweb-banner-img">
<img src="{{ asset('assets/images/logo-doux.png') }}" alt="{{ __('Doux') }}" />
</div>
</div>
<div class="modal-details">
<ul id="ldcweb-cn-list">
</ul>
<div id="template">
<div>
<div class="ldcweb-cn-infos">
<span class="ldcweb-cn-name">Google Analytics (universal)</span>
<span class="ldcweb-cn-description">Ce service peut déposer 8 cookies.</span>
<a class="ldcweb-cn-link" href="#">En savoir plus</a>
</div>
<div class="ldcweb-cn-buttons">
<div class="accept" id="accept-btn">
<input type="radio" id="analytics1" name="analytics" data-name="analytics" data-status="true">
<label for="analytics1">{{ __('rgpd.cookie.allow') }}</label>
</div>
<div class="deny" id="deny-btn">
<input type="radio" id="analytics2" name="analytics" data-name="analytics" data-status="false">
<label for="analytics2">{{ __('rgpd.cookie.deny') }}</label>
</div>
</div>
</div>
<div class="ldcweb-banner-text">
<div class="ldcweb-banner-title">
<p aria-level="h1">{{ __('rgpd.banner.title') }}</p>
</div>
<p class="ldcweb-banner-para-p" data-open="{{ __('rgpd.banner.desc.introopen') }}" data-close="{{ __('rgpd.banner.desc.introclose') }}">
{!! __('rgpd.banner.desc.introclose') !!}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="ldcweb-banner-details">
<p>{!! __('rgpd.banner.desc.more', ['PRIVROUTE' => route($routeprefixer . 'policy')]) !!}</p>
</div>
<div class="ldcweb-banner-btnDetails">
<p class="ldcweb-banner-btnDetails-p" data-open="{{ __('rgpd.banner.lessdetails') }}" data-close="{{ __('rgpd.banner.moredetails') }}">{{ __('rgpd.banner.moredetails') }}</p>
</div>
<div id="ldcweb-cn-modal" class="visibility">
<div class="modal-wrapper">
<div class="modal-title">
<p class="title" aria-level="h2">{{ __('rgpd.manage.title') }}</p>
<p class="subTitle">{{ __('rgpd.manage.subtitle') }}</p>
<p class="description">{!! __('rgpd.manage.explain') !!}</p>
</div>
<div class="modal-details">
<ul id="ldcweb-cn-list">
</ul>
<div id="template">
<div>
<div class="ldcweb-cn-infos">
<span class="ldcweb-cn-name">Google Analytics (universal)</span>
<span class="ldcweb-cn-description">Ce service peut déposer 8 cookies.</span>
<a class="ldcweb-cn-link" href="#">En savoir plus</a>
</div>
<div class="ldcweb-cn-buttons">
<div class="deny" id="deny-btn">
<input type="radio" id="analytics2" name="analytics" data-name="analytics"
data-status="false">
<label for="analytics2">{{ __('rgpd.cookie.deny') }}</label>
</div>
<div class="accept" id="accept-btn">
<input type="radio" id="analytics1" name="analytics" data-name="analytics"
data-status="true">
<label for="analytics1">{{ __('rgpd.cookie.allow') }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ldcweb-banner-btns">
<div class="ldcweb-banner-btn-flex">
<div class="ldcweb-banner-btn-deny">
<a id="ldcweb-cn-deny-banner" class="ldcweb-banner-btns-btn ldcweb-cn-deny">{{ __('rgpd.cookies.denyall') }}</a>
</div>
<div class="ldcweb-banner-btn-accept">
<a id="ldcweb-cn-accept-banner" class="ldcweb-banner-btns-btn ldcweb-cn-accept">{{ __('rgpd.cookies.allowall') }}</a>
</div>
</div>
<div class="ldcweb-banner-btn-personalize">
<a class="ldcweb-banner-btns-btn ldcweb-cn-personalize" data-open-modal="{{ __('rgpd.cookies.return') }}"
data-close-modal="{{ __('rgpd.cookies.personalize') }}">{{ __('rgpd.cookies.personalize') }}</a>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
window.LDCWebCN = new LdcwebCn({
'analytics': {
'name': "{!! __("rgpd.analytics.title") !!}",
'description': "{!! __("rgpd.analytics.desc") !!}",
'link': 'https://support.google.com/analytics/answer/6004245',
'cookies': ['NID', '_ga', '_gat_gtag_G_EDZP7TTBQP', '_gid'],
'script': function() {
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = 'https://www.googletagmanager.com/gtag/js?id=G-EDZP7TTBQP';
g.id = 'analytics';
s.parentNode.insertBefore(g, s)
}(document, 'script'));
<script>
window.LDCWebCN = new LdcwebCn({
'analytics': {
'name': "{!! __('rgpd.analytics.title') !!}",
'description': "{!! __('rgpd.analytics.desc') !!}",
'link': 'https://support.google.com/analytics/answer/6004245',
'cookies': ['_ga', '_gat_gtag_{{ str_replace('-', '_', config('google.analyticsKey')) }}',
'_gid'
],
'script': function() {
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src =
'https://www.googletagmanager.com/gtag/js?id={{ config('google.analyticsKey') }}';
s.parentNode.insertBefore(g, s)
}(document, 'script'));
window.dataLayer = window.dataLayer || [];
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '{{ config('google.analyticsKey') }}');
}
}
gtag('js', new Date());
gtag('config', 'G-EDZP7TTBQP');
}
}
});
</script>
});
</script>
@endpush