diff --git a/src/App.js b/src/App.js index 825e0a8..8fc6ed7 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,8 @@ import Recherche from "./pages/recherche_new"; import Recherche_new_v2 from "./pages/recherche_new_v2"; import TestUrl from "./pages/testurl"; import Account from "./pages/account"; -import DisplayDetailClass from "./pages/displaydetailclass"; +import DisplayDetailClass from "./pages/displaydetailclass"; +import DisplayDetailClass_new_v2 from "./pages/displaydetailclass_new_v2"; import DisplayDetailClassAction from "./pages/displaydetailclassaction"; import DisplayDetailArticle from "./pages/displaydetailarticle"; import Acceuil from "./pages/acceuil"; @@ -66,6 +67,7 @@ function App() { + diff --git a/src/components/DisplayDetailClass_new.js b/src/components/DisplayDetailClass_new.js index c3338b8..71a9b67 100644 --- a/src/components/DisplayDetailClass_new.js +++ b/src/components/DisplayDetailClass_new.js @@ -513,7 +513,8 @@ const DisplayDetailClass = (props) => { {associatedtraining_message && String(associatedtraining_api) === "True" && associatedtraining_message.map((formation) => ( -
{ +
{ e.preventDefault(); //test(props.formation.external_code); window.open( @@ -561,7 +562,7 @@ const DisplayDetailClass = (props) => {
-
+ ))} diff --git a/src/components/DisplayDetailClass_new_v2.js b/src/components/DisplayDetailClass_new_v2.js new file mode 100644 index 0000000..46e5ccd --- /dev/null +++ b/src/components/DisplayDetailClass_new_v2.js @@ -0,0 +1,1504 @@ +import React, { useRef, useState, useEffect } from "react"; +import { useParams } from 'react-router-dom' +import axios from "axios"; +import Popup from 'reactjs-popup'; +import 'reactjs-popup/dist/index.css'; +import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png"; +import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; +import { Helmet } from "react-helmet"; +import 'react-slideshow-image/dist/styles.css' +import { Fade } from 'react-slideshow-image'; +import slideimg1 from "../mysy_img/education.jpg"; +import slideimg4 from "../mysy_img/mysy_img.png"; +import Footer from "./Fotter"; +import Header from "./Header"; +import bannerimg from "../mysy_img/MYSY_banner_compte.png"; +import img_met_program from "../mysy_img/met_programmation.jpg"; +import img_met_hotel from "../mysy_img/met_hotel.jpg"; +import img_met_graphisme from "../mysy_img/metier_graphisme.jpg"; + +import img_met_autre from "../mysy_img/met_autre.jpg"; +import img_met_digital from "../mysy_img/met_digital.jpg"; +import img_met_management from "../mysy_img/met_management.jpg"; +import img_met_projet from "../mysy_img/met_projet.jpg"; + +import img_met_market from "../mysy_img/met_market.jpg"; +import img_met_autre2 from "../mysy_img/met_autre2.jpg"; +import img_met_dev_perso from "../mysy_img/metier_dev_perso.jpg"; +import img_met_rh from "../mysy_img/met_rh.jpg"; + +import img_met_bureautic from "../mysy_img/met_burautic.jpg"; +import img_met_vente from "../mysy_img/met_vente.jpg"; +/* +/!\ important: les images du slides doivent avoir une dimension de : 250 X 450 +*/ +import { Button, } from "reactstrap"; +import { useHistory } from "react-router-dom"; +import { useCookies } from "react-cookie"; +import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share"; +import { SocialIcon } from 'react-social-icons'; +import { confirmAlert } from 'react-confirm-alert'; +//import { Rating } from 'react-simple-star-rating'; +import Rating from '@mui/material/Rating'; +import parse from 'html-react-parser'; +import Inscription from "./Inscription_Information"; +import mysy_logo2 from "../mysy_img2/Logo_MySy.png" +import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa'; + +const DisplayDetailClass_new_v2 = (props) => { + + const { classId } = useParams(); + const [result, setResult] = useState(""); + const [myApiResponse, setmyApiResponse] = useState(); + const [DetailTraining, setDetailTraining] = useState([]); + const [closepopup, setclosepopup] = useState(0); + const [country_code, setcountry_code] = useState(""); + const [country_name, setcountry_name] = useState(""); + const [city, setcity] = useState(""); + const [postal, setpostal] = useState(""); + const [latitude, setlatitude] = useState(""); + const [longitude, setlongitude] = useState(""); + const [IPv4, setIPv4] = useState(""); + const [state, setstate] = useState(""); + const [userIp, setuserIp] = useState(""); + const [mynote, setmynote] = useState(0); + const [userconnected, setuserconnected] = useState("0"); + const [someoneconnected, setsomeoneconnected] = useState("0"); + const [partnerconnected, setpartnerconnected] = useState("0"); + const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); + const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']); + + const [inscritpion, setinscritpion] = useState(""); + const [ratingvalue, setratingvalue] = useState(0); + + + // Gestion des Cookies + const stored_partner = cookie_part.tokenmysypart; + const stored_user = cookie.tokenmysych; + + + useEffect(() => { + var local_user_connect = 0; + var local_part_connect = 0; + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + setuserconnected("0"); + local_user_connect = 0; + } else { + setuserconnected("1"); + local_user_connect = 1; + } + + if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') { + setpartnerconnected("0"); + local_part_connect = 0; + } else { + setpartnerconnected("1"); + local_part_connect = 1; + } + + async function fetchData() { + const result = await axios('https://geolocation-db.com/json/',); + setuserIp(result.data.IPv4); + setcountry_code(result.data.country_code); + setcountry_name(result.data.country_name); + setcity(result.data.city); + setpostal(result.data.postal); + setlatitude(result.data.latitude); + setlongitude(result.data.longitude); + setIPv4(result.data.IPv4); + setstate(result.data.state); + setuserIp(result.data.IPv4); + submenu_datelieu(); + } + fetchData(); + + Display(); + GetAssociatedTraning(); + + GetCurrentClass_trainingsession(); + + + + }, []); + + + function contactUs(e) { + + var sender_mail = ""; + var sender_tel = ""; + var token = ""; + if (String(userconnected) === "0") { + sender_mail = document.getElementsByName("usermail")[0].value; + sender_tel = document.getElementsByName("usernumtel")[0].value; + if (sender_mail.length == 0 && sender_tel.length == 0) { + alert(" Les information fournies sont incorrectes "); + return; + } + } else { + token = String(stored_user) + + } + + + var useravis = document.getElementsByName("useravis")[0].value; + var usersupqual = document.getElementsByName("userqualsup")[0].value; + var usernote = document.getElementsByName("usernote")[0].value; + + if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) { + alert("Merci de saisir le nombre minimum de caractère requis pour les champs "); + return; + } + + + var re = /\S+@\S+\.\S+/; + if (re.test(sender_mail) == false) { + alert("l'email est incorrecte"); + return; + } + + + ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ") + + + //alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = " + //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude); + var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/"; + var form = new FormData(); + form.append("type", "email"); + form.append("recever_mail", ""); + form.append("recever_tel", ""); + form.append("sender_mail", sender_mail); + form.append("sender_tel", sender_tel); + form.append("object", DetailTraining["external_code"]); + form.append("token", ""); + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + axios.post(myurl, form).then(res => { + if (res.data.status != "False") { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + setclosepopup(1); + document.getElementsByName("usermail")[0].value = ""; + document.getElementsByName("usernumtel")[0].value = ""; + document.getElementsByName("usercomment")[0].value = ""; + } + else { + //console.log(" contact-nous statut = " + res.data.status); + //console.log(" contact-nous res.data.message = " + res.data.message); + } + }).catch((error) => { + console.warn('contact-nous Not good man :( mysearchtext = '); + + }) + + + } + + function Display(e) { + var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/"; + var form = new FormData(); + form.append("internal_url", classId); + form.append("token", ""); + // Ajout des info IP user + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + + //alert("myurl = "+myurl); + + axios.post(myurl, form).then(res => { + if (String(res.data.status) !== String("false")) { + //console.log(" In Display res.data.status = " + res.data.status); + //console.log(" In Display res.data.message = " + res.data.message); + if (res.data.message.length > 0) { + setmyApiResponse("True"); + + if (String(JSON.parse(res.data.message).coeur) !== String("1") && + String(JSON.parse(res.data.message).freeacces) !== String("1")) { + + //alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur) + // Verification si on est en e connecté ou non. + var local_user_connect = 0; + var local_part_connect = 0; + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + setuserconnected("0"); + local_user_connect = 0; + } else { + setuserconnected("1"); + local_user_connect = 1; + } + + if (typeof (stored_partner) === "undefined" || String(stored_partner) === '') { + setpartnerconnected("0"); + local_part_connect = 0; + } else { + setpartnerconnected("1"); + local_part_connect = 1; + } + + if (local_user_connect === 0 && local_part_connect === 0) { + confirmAlert({ + title: 'Connexion ?', + message: 'Connectez-vous pour acceder au detail de cette formation', + buttons: [ + { + label: 'Vous avez un compte', + onClick: () => { history.push("/mysy-training-login/training/" + classId) } + }, + { + label: "Vous n'avez pas de compte", + onClick: () => { history.push("/create_account") } + }, + + ], + closeOnEscape: false, + closeOnClickOutside: false, + keyCodeForClose: [8, 32], + willUnmount: () => { }, + afterClose: () => { }, + onClickOutside: () => { }, + onKeypress: () => { }, + onKeypressEscape: () => { }, + }); + + + } + } else { + //alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur) + } + } + else { + setmyApiResponse("False"); + } + //console.log(" In displaydetailclass res.data.status = " + res.data.status); + //console.log(" In displaydetailclass res.data.message = " + res.data.message); + setResult(res.data.message); + setDetailTraining(JSON.parse(res.data.message)); + + if (JSON.parse(res.data.message).note) { + setratingvalue(JSON.parse(res.data.message).note); + } + } + else { + //console.log(" In Erreur res.data.status = " + res.data.status); + //console.log(" In Erreur res.data.message = " + res.data.message); + setmyApiResponse("False"); + + + } + + + }).catch((error) => { + console.warn('Not good man :( Display = '); + console.log(error); + setmyApiResponse("False"); + + }) + + + } + + const [associatedtraining_api, setassociatedtraining_api] = useState(""); + const [associatedtraining_message, setassociatedtraining_message] = useState(""); + function GetAssociatedTraning(e) { + var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_associated_class_of_partnair/"; + var form = new FormData(); + form.append("internal_url", classId); + // Ajout des info IP user + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + + //alert("myurl = "+myurl); + + axios.post(myurl, form).then(res => { + if (String(res.data.status) !== String("false")) { + //console.log(" In GetAssociatedTraning res.data.status = " + res.data.status); + //console.log(" In GetAssociatedTraning res.data.message = " + res.data.message); + setassociatedtraining_api("True"); + setassociatedtraining_message(res.data.message); + + } + else { + //console.log(" In Erreur res.data.status = " + res.data.status); + //console.log(" In Erreur res.data.message = " + res.data.message); + setassociatedtraining_api("False"); + } + + + }).catch((error) => { + console.warn('Not good man :( GetAssociatedTraning = '); + setassociatedtraining_api("False"); + + }) + + + } + + const history = useHistory(); + + const fadeImages = [ + { + url: slideimg1, + }, + + { + url: slideimg4, + }, + ]; + + + function CheckAvis(e) { + + const val = document.getElementById("useravis").value + //alert(" evalu " + val); + if (val.length < 20) { + alert(" Le champ 'Avis' doit etre plus renseigné"); + } + //alert(val); + } + + function CheckNote(e) { + const val = e.target.value; + + if (isNaN(val)) { + //alert(val + " is not a number
mynote = "+mynote); + document.getElementById("usernote").value = mynote; + } else { + if (val > 5) { + alert(" Valeur Maxi doit etre 5"); + document.getElementById("usernote").value = mynote; + } else { + setmynote(val); + } + } + + } + + const [submenu, setsubmenu] = useState("datelieu"); + + function submenu_info() { + setsubmenu("formateur"); + //if (document.getElementsByName("menu_formateur")[0]) + // document.getElementsByName('menu_formateur')[0].focus(); + + if (document.getElementsByName("menu_datelieu")[0]) + document.getElementsByName('menu_datelieu')[0].blur(); + + if (document.getElementsByName("submenu_divers")[0]) + document.getElementsByName('submenu_divers')[0].blur(); + } + + function submenu_datelieu() { + setsubmenu("datelieu"); + //if (document.getElementsByName("menu_datelieu")[0]) + // document.getElementsByName('menu_datelieu')[0].focus(); + + if (document.getElementsByName("menu_formateur")[0]) + document.getElementsByName('menu_formateur')[0].blur(); + + if (document.getElementsByName("submenu_divers")[0]) + document.getElementsByName('submenu_divers')[0].blur(); + } + + + function submenu_divers() { + setsubmenu("divers"); + //if (document.getElementsByName("submenu_divers")[0]) + //document.getElementsByName('submenu_divers')[0].focus(); + + if (document.getElementsByName("menu_datelieu")[0]) + document.getElementsByName('menu_datelieu')[0].blur(); + + if (document.getElementsByName("submenu_divers")[0]) + document.getElementsByName('submenu_divers')[0].blur(); + } + + + function Inscription_bton(event) { + if (DetailTraining["internal_url"] && String(DetailTraining["class_inscription_url"]).length > 10) { + window.open( + String(DetailTraining["class_inscription_url"]), + '_blank' + ); + + } else { + setinscritpion("1"); + } + window.scrollTo(0, 0); + } + + function Contact_bton(event) { + setinscritpion("2"); + window.scrollTo(0, 0); + } + + + const [GetCurrentClass_api, setGetCurrentClass_api] = useState(); + const [GetCurrentClass_message, setGetCurrentClass_message] = useState(); + const [GetCurrentClass_result, setGetCurrentClass_result] = useState(); + function GetCurrentClass_trainingsession(event) { + + var form = new FormData(); + + form.append("class_internal_url", classId); + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/GetActiveSessionFormation_List/"; + + axios.post(myurl, form).then(res => { + //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status); + //console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message); + + if (String(res.data.status) !== "false") { + //console.log(" In GetCurrentClass_trainingsession res.data.status = " + res.data.status); + //console.log(" In GetCurrentClass_trainingsession res.data.message r_class = " + res.data.message); + setGetCurrentClass_api("true"); + setGetCurrentClass_result(res.data.message); + } + else { + setGetCurrentClass_api("false"); + setGetCurrentClass_message(res.data.message); + } + + }).catch((error) => { + console.warn('Not good man :( GetCurrentClass_trainingsession = ', error); + setGetCurrentClass_api("false"); + //setmyApimyApiMessage("") + }) + } + + + /// ---- + return ( + +
+
+ + + + + + + {`${DetailTraining["title"]}`} + + +
+ + +
+
+ +
+ MySy Training Technology + +
+ +
+ +
+ +
+ +
+ Les formations +
+ +
+ Le blog +
+ +
+ Nos Services +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ M’inscrire +
+ +
+ +
+ +
+ +
+ +
+ Me connecter +
+ +
+ +
+ +
+ + +
+ + + +
+ +
+ +
+ +
+ +
+ +
+ {DetailTraining["title"]} +
+ +
+ +
+ {DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" && + "Éligible au CPF"} + + {!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" && + "NON Éligible au CPF"} +
+ +
+ +
+ + +
+ + + +
+ {String(inscritpion) === "1" &&
+ + +
+ + } + + {String(inscritpion) === "2" &&
+ + +
+ + } + +
+
+ Description +
+
+ {parse(String(DetailTraining["description"]))} +
+ +
+ +
+
+ Description +
+
+ {parse(String(DetailTraining["description"]))} +
+ +
+ + +
+
+ Objectif +
+
+ {parse(String(DetailTraining["objectif"]))} +
+ +
+ + +
+
+ Programme +
+
+ {parse(String(DetailTraining["programme"]))} +
+ +
+ + +
+ + +
+ +
{String(DetailTraining["price"])} HT
+ +
+ + + {/*String(DetailTraining["img_url"]) && String(DetailTraining["img_url"]).toLocaleLowerCase() === String("it") && + informatique*/} + + {DetailTraining.img_url && String(DetailTraining.img_url).length > 0 && + } + + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + !DetailTraining.metier && autre} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") && + informatique} + + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") && + management} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") && + digital} + + {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") && + office} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") && + vente} + + {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && + DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + +
+ +
+ +
Caractéristiques :
+ + +
+
    +
  • +
    + +
    + Lieu : +
    + +
    + À distance + +
    + + +
    +
  • +
  • +
    + +
    + Durée : +
    + +
    + {DetailTraining["duration"]}   {DetailTraining["duration_unit"]} + +
    + + +
    +
  • + +
  • +
    + +
    + Certification : +
    + +
    + {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") &&
    + + Non  
    + } + {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") &&
    + + Oui  
    + } + +
    + + +
    +
  • + +
  • +
    + +
    + Distanciel : +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" &&
    Oui
    } + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" &&
    Non
    } + +
    + + +
    +
  • + +
  • +
    + +
    + Presentiel : +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
    Oui
    } + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
    Non
    } + +
    + + +
    +
  • + +
  • +
    + +
    + Support : +
    + +
    + {DetailTraining["support"] &&
    + + {DetailTraining["support"]}  
    + } + {!DetailTraining["certif"] &&
    + + Non précisé  
    + } + +
    + + +
    +
  • + + +
  • +
    + +
    + Presentiel : +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
    Oui
    } + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
    Non
    } + +
    + + +
    +
  • + +
+
+
+ + +
+ + + +
+
+ Les sessions : +
+
+
    + + + + {GetCurrentClass_result && GetCurrentClass_result.slice(0, 3).map((formation) => ( +
  • + +
    +
    + {(JSON.parse(formation).date_debut).substring(0, 10)} au {(JSON.parse(formation).date_fin).substring(0, 10)} + + +
    +
    + {(JSON.parse(formation).distantiel) === "1" && " A Distance - "} + {(JSON.parse(formation).presentiel) === "1" && " En Présentiel - "} + {(JSON.parse(formation).adresse)}  {(JSON.parse(formation).code_postal)} + +
    +
    + +
  • + + ))} + +
+ +
+ +
+
+ +
+ +
+
M’inscrire
+
+ +
+
+
M’informer sur la formation
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+ +
+ +
+ Organisme de formation : +
+ +
+ MySyTraining.com +
+ +
+ +
+ + + +
+ +
+ +
Formations & tutoriels du même organisme
+ + + +
+ + + {associatedtraining_message && String(associatedtraining_api) === "True" && + associatedtraining_message.slice(0, 3).map((formation) => ( +
+ +
+ + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") && + informatique} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && + management} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && + digital} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && + office} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && + vente} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + {!JSON.parse(formation).metier && autre personnel} + + +
+ +
+
+ {JSON.parse(formation).cpf && (String(JSON.parse(formation).cpf)) === "1" && + "Éligible au CPF"} + + {!JSON.parse(formation).cpf || String(JSON.parse(formation).cpf) !== "1" && + "NON Éligible au CPF"} + + +
+
+ +
+ +
+ +
+ +
{parse(String(JSON.parse(formation).title))} +
+ +
+ {(String(JSON.parse(formation).price))} €HT +
+ + + + +
+ +
+
{ + e.preventDefault(); + //test(props.formation.external_code); + window.open( + "/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url, + '_blank' + ); + + + }}> + Voir les détails +
+ +
+ + +
+
+ + +
+ ))} + + + +
+ + + +
+ +
+ + {/*
+

{`${DetailTraining["title"]}`}

+ + +
+ +
A voir aussi
+ + + {associatedtraining_message && String(associatedtraining_api) === "True" && + associatedtraining_message.map((formation) => ( +
{ + e.preventDefault(); + //test(props.formation.external_code); + window.open( + "/Display-Detail-formation/" + JSON.parse(formation).internal_url, + '_blank' + ); + + + }}> +
+ {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") && + informatique} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && + management} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && + digital} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && + office} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && + vente} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + {!JSON.parse(formation).metier && autre personnel} + +
+ +
+
+ {parse(String(JSON.parse(formation).title))} +
+
+ {parse(String((JSON.parse(formation).description).substring(0, 50)))} + +
+ +
+
+ + ))} + +
+ +
+ {DetailTraining["img_banner_detail_class"] &&
+ +
+ + + + +
} + + {(!DetailTraining["img_banner_detail_class"] || String(DetailTraining["img_banner_detail_class"]).length < 5) && +
+
 
+
+ + +
+
} + + {/* +/!\ important : + +Certains partenaire ont leur propre système d'inscription. +Donc si le champs "myclass.class_inscription_url" existe et est valide, alors +on renvoi l'utilisateur vers ce lien. + +Si non, on utilise le formumaire de mysy,. + +* /} + + + + {String(inscritpion) === "1" &&
+ + +
+ + } + + {String(inscritpion) === "2" &&
+ + +
+ + } + +
+ {parse(String(DetailTraining["title"]))} +
+ +
+ Descriptions {DetailTraining["description"] && +

+ + {parse(String(DetailTraining["description"]))} +

} +
+ + + {DetailTraining["objectif"] &&
+ Objectif + +

+ {parse(String(DetailTraining["objectif"]))}   +

+ +
} + +
+ {DetailTraining["prerequis"] &&
+ Pré-requis {DetailTraining["prerequis"] && +

+ {parse(String(DetailTraining["prerequis"]))}   +

} + {!DetailTraining["prerequis"] &&

+ ---   +

} +
+
} + + {DetailTraining["pourqui"] &&
+ Pour Qui {DetailTraining["pourqui"] && +

+ {parse(String(DetailTraining["pourqui"]))}   +

} + {!DetailTraining["pourqui"] &&

+ ---   +

} +
+
} + + + {DetailTraining["programme"] &&
+ + Programme + {DetailTraining["programme"] &&

+ {parse(String(DetailTraining["programme"]))}   +

} + {!DetailTraining["programme"] &&

+ ---   +

} +
+
} + + {DetailTraining["plus_produit"] &&
+ Points forts + {DetailTraining["plus_produit"] && +

+ {parse(String(DetailTraining["plus_produit"]))}   +

} + +
+
} + +
+ Caracteristiques
+
+
+ +
+ +
+
Prix : +
+ +
+ {DetailTraining["price"]} € +
+
+ +
Durée : +
+ +
+ {DetailTraining["duration"]}   {DetailTraining["duration_unit"]} +
+
+ +
Certification : +
+ +
+ {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") &&
+ + Non  
+ } + {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") &&
+ + Oui  
+ } +
+ +
+
+
Distanciel : +
+ +
+ {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" &&
Oui
} + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" &&
Non
} +
+
+
Presentiel : +
+ +
+ {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" &&
Oui
} + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" &&
Non
} +
+
+
Support : +
+ +
+ {DetailTraining["support"] &&
+ + {DetailTraining["support"]}  
+ } + {!DetailTraining["certif"] &&
+ + Inconnu  
+ } +
+
+
+
+
+
+
Note +
+ +
+ + + + +
+
+ +
+ +
 
+
+ + + + + {/*
* /} + +
+ {String(submenu) === String("formateur") &&
+ {DetailTraining.trainer &&
+
+ {DetailTraining.trainer} +
} + + {!DetailTraining.trainer &&
+
+ +
} + +
} + + {String(submenu) === String("datelieu") &&
+ + + {GetCurrentClass_result && GetCurrentClass_result.map((formation) => ( + + +
+ + + + {String(JSON.parse(formation).code_postal) === "0" && + String(JSON.parse(formation).date_debut) === String(JSON.parse(formation).date_fin) && } + + {String(JSON.parse(formation).code_postal) !== "0" && String(JSON.parse(formation).date_debut) === String(JSON.parse(formation).date_fin) && + } + + + {String(JSON.parse(formation).code_postal) === "0" && } + + {String(JSON.parse(formation).code_postal) !== "0" && String(JSON.parse(formation).date_debut) !== String(JSON.parse(formation).date_fin) && } + +
+ ))} + +
} + + {String(submenu) === String("divers") &&
+ +
} +
+ +
+ +
+ +
+ +
A voir aussi
+ + + {associatedtraining_message && String(associatedtraining_api) === "True" && + associatedtraining_message.map((formation) => ( +
{ + e.preventDefault(); + //test(props.formation.external_code); + window.open( + "/Display-Detail-formation/" + JSON.parse(formation).internal_url, + '_blank' + ); + + + }}> +
+ + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") && + informatique} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && + graphisme} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && + management} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && + digital} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && + office} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && + ressources humaines} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && + vente} + + {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && + developpement personnel} + + {!JSON.parse(formation).metier && autre personnel} + +
+ +
+
+ {parse(String(JSON.parse(formation).title))} +
+
+ {parse(String((JSON.parse(formation).description).substring(0, 50)))} +
+ + + + +
+
+ + ))} + +
+ +
+
+
+ + +
*/} + + +
+ +
+
+
+
+
+
+ ) +} + + +export default DisplayDetailClass_new_v2; \ No newline at end of file diff --git a/src/components/Formation.js b/src/components/Formation.js index 00fbcec..12c1cc9 100644 --- a/src/components/Formation.js +++ b/src/components/Formation.js @@ -73,7 +73,7 @@ const Formation = (props) => { }); } else { window.open( - "/Display-Detail-formation/" + props.formation.internal_url, + "/Display-Detail-formation_v2/" + props.formation.internal_url, '_blank' ); } @@ -244,7 +244,7 @@ const Formation = (props) => { e.preventDefault(); window.open( - "/Display-Detail-formation/" + props.formation.internal_url, + "/Display-Detail-formation_v2/" + props.formation.internal_url, '_blank' ); @@ -394,7 +394,7 @@ const Formation = (props) => {
{   @@ -412,7 +412,7 @@ const Formation = (props) => {   { e.preventDefault(); window.open( - "/Display-Detail-formation/" + props.formation.internal_url + "/Information", + "/Display-Detail-formation_v2/" + props.formation.internal_url + "/Information", '_blank' ); @@ -606,7 +606,7 @@ const Formation = (props) => { e.preventDefault(); //test(props.formation.external_code); window.open( - "/Display-Detail-formation/" + props.formation.internal_url, + "/Display-Detail-formation_v2/" + props.formation.internal_url, '_blank' ); @@ -621,7 +621,7 @@ const Formation = (props) => { e.preventDefault(); window.open( - "/Display-Detail-formation/" + props.formation.internal_url + "/Inscription", + "/Display-Detail-formation_v2/" + props.formation.internal_url + "/Inscription", '_blank' ); diff --git a/src/pages/displaydetailclass_new_v2.js b/src/pages/displaydetailclass_new_v2.js new file mode 100644 index 0000000..ff40316 --- /dev/null +++ b/src/pages/displaydetailclass_new_v2.js @@ -0,0 +1,15 @@ +import DisplayDetailClass from "../components/DisplayDetailClass"; +import DisplayDetailClass_new_v2 from "../components/DisplayDetailClass_new_v2"; +import Navigation from "../components/Navigation"; + +export default function displaydetailclass() { + return ( +
+
+ +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/styles/components/_displaydetailclass_new_v2.scss b/src/styles/components/_displaydetailclass_new_v2.scss new file mode 100644 index 0000000..548f875 --- /dev/null +++ b/src/styles/components/_displaydetailclass_new_v2.scss @@ -0,0 +1,3075 @@ +.displaydetailclass_new_v2 { + * h6 { + font-size: small; + } + + .h1_transparent { + color: transparent; + //color: red; + font-size: 0.2rem; + margin-bottom: 0px; + } + + .default-nav { + display: none !important; + } + + .slide_img { + width: 100% !important; + height: 30rem !important; + max-height: 30rem !important; + display: block !important; + } + + .containerBox { + position: relative; + display: inline-block; + margin-top: 0.5rem; + } + + .popup-content2-content { + top: 30% !important; + left: 40% !important; + width: 30rem !important; + font-family: "Quicksand", "Signika", sans-serif !important; + font-size: medium !important; + background: black !important; + color: white !important; + } + + .popup-content_max_601-content { + top: 30% !important; + left: 15% !important; + width: 80% !important; + font-family: "Quicksand", "Signika", sans-serif !important; + font-size: small !important; + background: black !important; + color: white !important; + } + + @media only screen and (max-width: 600px) { + + .css-iljtu2-MuiRating-root { + font-size: 1rem !important; + } + + .left_box { + display: none; + } + + .left_box_for_mobile { + float: left; + border-width: 1px; + width: 80%; + height: 100%; + padding: 0.5rem; + padding-left: 0.5rem; + border-radius: 1rem; + margin-bottom: 0.1rem; + font-size: small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + margin-left: 5px; + padding-left: 5px; + margin-left: 2.5rem; + margin-top: 1rem; + } + + .right_box { + float: left; + border: 1px solid black; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + border-width: 2px; + width: 98%; + height: 100%; + margin: auto; + margin-top: auto; + margin-right: auto; + margin-left: auto; + padding: 0rem; + border-radius: 30px; + margin-right: 0%; + padding-left: 2px; + padding-right: 2px; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + margin-left: 3px; + padding-bottom: 2rem; + margin-top: 1rem; + padding-top: 1rem; + background: #F4F6F6; + } + + .hilightsoustitre { + color: #3b3e40; + display: block; + font-size: 1rem; + margin-bottom: 0.5rem; + background: #e9ecef; + border-radius: 5px; + background: #113459; + color: #fff; + letter-spacing: 2px; + height: 2rem; + padding-top: 5px; + } + + .autres_formations { + margin-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + } + + .img_banner { + margin-bottom: .5rem; + padding-bottom: .5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding-top: 10px; + width: 98%; + background: url("../../mysy_img/MYSY-banner-compte.png") no-repeat; + } + + .img_bannermg_WOimg { + margin-bottom: .5rem; + padding-bottom: .5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding-top: 10px; + width: 98%; + max-height: 5rem; + background-color: white; + } + + .titre_formation { + color: #619e31; + font-size: 1.5rem; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.2rem; + margin-bottom: 0.5rem; + } + + .description { + text-align: justify; + word-break: break-all; + line-height: 1.1rem; + color: #3b3e40; + font-size: 0.85rem; + word-break: break-word; + margin-left: 2%; + margin-right: 5%; + } + + .caracteristique { + word-break: break-all; + line-height: 1.1rem; + color: #3b3e40; + font-size: medium; + word-break: break-word; + font-weight: bold; + margin-left: 2%; + margin-right: 5%; + text-align: center; + } + + .calage { + width: 2%; + } + + .div_row_critere { + float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + font-size: small; + // border: 1px solid black; + } + + .div_row_critere_gauche { + width: 56%; + float: left; + text-align: right; + font-weight: bold; + padding-right: 5px; + } + + .div_row_critere_droite { + width: 38%; + float: left; + text-align: left; + padding-left: 5px; + } + + .div_row_critere_note { + //float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: small; + font-weight: bold; + // border: 1px solid black; + } + + .div_row { + width: 90%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + } + + .div_row_gauche { + float: left; + // border:1px solid black; + // border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .div_row_droite { + float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .ftion_tab_gauche { + width: 62%; + float: left; + text-align: left; + font-weight: bold; + } + + .ftion_tab_droite { + width: 38%; + float: left; + text-align: left; + } + + .forma_img_logo_class { + float: left; + border-width: 2px; + width: 100%; + padding: 0.3rem; + font-size: 11px; + + color: rgb(10, 42, 77); + margin-top: 1px; + cursor: pointer; + //border:1px solid black; + text-align: center; + display: table-cell; + // vertical-align: middle; + } + + .training_img { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + width: 99%; + } + + .vignet_title { + color: #619e31; + font-size: medium; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.1rem; + } + + .vignet_desc { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + line-height: 1.43; + font-size: small; + margin-bottom: 4px; + color: #3b3e40; + word-break: break-word; + padding: 5px; + } + + .text_surna { + z-index: 50; + font-size: xx-large; + color: white; + background: url("../../mysy_img/MYSY-LOGO-WHITE2.png") no-repeat; + height: 5rem; + width: 10rem; + margin-left: auto; + margin-right: auto; + } + + .detail_class_submenu { + width: 7rem; + background: #d8edfc; + border-radius: 10px; + margin-right: 0.3rem; + padding: 0.3rem; + margin-bottom: 0.2rem; + text-align: center; + border: 1px solid; + color: #3b3e40; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + + font-weight: normal; + } + + .detail_class_submenu:hover:active, + .detail_class_submenu:hover { + background-color: #104277; + color: white; + } + + .detail_class_submenu:focus { + //border: 3px dotted green; + background-color: #104277; + color: white; + } + + .detail_class_submenu_data { + width: 100%; + height: 7rem; + background-color: #d8edfc; + padding-left: 5px; + text-align: left; + padding: 0; + border: 0px; + color: #3b3e40; + padding-left: 5px; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + border-radius: 10px; + border: 1px solid; + } + + .detail_element { + border-radius: 3px; + display: inline-block; + width: 95%; + background-color: white; + height: auto; + padding: 5px; + outline: 1px solid #ccc; + + text-align: left; + background-color: white; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2); + border: 0px solid; + + margin-left: 0px; + margin-right: 0px; + } + + .detail_element:hover { + -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%); + box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 25%); + } + + .bton_inscription { + color: white; + text-align: right; + padding-right: 2rem; + border-radius: 20rem; + background-color: red; + border: 2px solid red; + width: 10rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + font-weight: bold; + letter-spacing: 1px; + position: fixed; + top: 6rem; + right: 15%; + height: 3rem; + } + + .row_inscription { + color: white; + text-align: right; + padding-right: 2rem; + } + + .sous_titre { + color: #619e31; + font-size: small; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.1rem; + } + } + + @media only screen and (min-width: 601px) and (max-width: 991px) { + .left_box { + float: left; + //border: 1px solid black; + border-width: 1px; + width: 25%; + height: 100%; + padding: 0.2rem; + border-radius: 1rem; + //margin-top: 1rem !important; + margin-bottom: 0.1rem; + font-size: small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + margin-left: 2px; + //-webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + //box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + padding-left: 5px; + } + + .right_box { + + float: left; + border: 1px solid black; + border-width: 2px; + width: 73%; + height: 100%; + margin: auto; + padding: 0rem; + border-radius: 30px; + margin-right: 0%; + padding-left: 1rem; + padding-right: 10px; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%); + margin-left: 5px; + padding-bottom: 2rem; + margin-top: 0.5rem; + padding-top: 1rem; + background: #F4F6F6; + //background-color: #f8f9f9; + //overflow-y:scroll; + } + + .hilightsoustitre { + color: #3b3e40; + display: block; + font-size: 0.9rem; + margin-bottom: 0.5rem; + background: #e9ecef; + border-radius: 5px; + background: #113459; + color: #fff; + letter-spacing: 2px; + padding-top: 5px; + } + + .autres_formations { + margin-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + } + + .img_banner { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding-top: 10px; + width: 100%; + background: url("../../mysy_img/MYSY-banner-compte.png") no-repeat; + } + + .img_bannermg_WOimg { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding-top: 10px; + width: 100%; + max-height: 8rem; + background-color: white; + } + + + .titre_formation { + color: #619e31; + font-size: 1.5rem; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.2rem; + } + + .description { + text-align: justify; + word-break: break-all; + line-height: 1.1rem; + color: #3b3e40; + font-size: 0.85rem; + word-break: break-word; + margin-left: 2%; + margin-right: 5%; + } + + .caracteristique { + word-break: break-all; + line-height: 1.1rem; + color: #3b3e40; + font-size: medium; + word-break: break-word; + font-weight: bold; + margin-left: 2%; + margin-right: 5%; + text-align: center; + } + + .calage { + width: 2%; + } + + .div_row_critere { + float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 30%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + font-size: small; + // border: 1px solid black; + } + + .div_row_critere_gauche { + width: 62%; + float: left; + text-align: right; + font-weight: bold; + padding-right: 5px; + } + + .div_row_critere_droite { + width: 38%; + float: left; + text-align: left; + padding-left: 5px; + } + + .div_row_critere_note { + //float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: small; + font-weight: bold; + // border: 1px solid black; + } + + .div_row { + width: 80%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + } + + .div_row_gauche { + float: left; + // border:1px solid black; + // border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .div_row_droite { + float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .ftion_tab_gauche { + width: 62%; + float: left; + text-align: left; + font-weight: bold; + } + + .ftion_tab_droite { + width: 38%; + float: left; + text-align: left; + } + + .forma_img_logo_class { + float: left; + border-width: 2px; + width: 100%; + padding: 0.3rem; + font-size: 11px; + + color: rgb(10, 42, 77); + margin-top: 1px; + cursor: pointer; + //border:1px solid black; + text-align: center; + display: table-cell; + // vertical-align: middle; + } + + .training_img { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + width: 100%; + } + + .vignet_title { + color: #619e31; + font-size: medium; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.1rem; + } + + .vignet_desc { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + line-height: 1.43; + font-size: small; + margin-bottom: 4px; + color: #3b3e40; + word-break: break-word; + padding: 5px; + } + + .text_surna { + z-index: 50; + font-size: xx-large; + color: white; + background: url("../../mysy_img/MYSY-LOGO-WHITE2.png") no-repeat; + height: 5rem; + width: 15rem; + margin-left: auto; + margin-right: auto; + top: 2rem; + margin-top: 1.5rem; + } + + .left_box_for_mobile { + display: none; + } + + .detail_class_submenu { + background: #d8edfc; + border-radius: 10px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 8rem; + text-align: center; + border: 1px solid; + color: #3b3e40; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + letter-spacing: 0.1rem; + font-weight: normal; + } + + .detail_class_submenu:hover:active, + .detail_class_submenu:hover { + background-color: #104277; + color: white; + } + + .detail_class_submenu:focus { + //border: 3px dotted green; + background-color: #104277; + color: white; + } + + .detail_class_submenu_data { + width: 100%; + height: 7rem; + background-color: #d8edfc; + padding-left: 5px; + text-align: left; + padding: 0; + border: 0px; + color: #3b3e40; + padding-left: 5px; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + border-radius: 10px; + border: 1px solid; + } + + .detail_element { + border-radius: 3px; + display: inline-block; + background-color: white; + height: auto; + padding: 10px; + outline: 1px solid #ccc; + margin: 10px; + text-align: left; + margin-bottom: 2rem; + background-color: white; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2); + border: 0px solid; + width: 99%; + margin-left: 0px; + } + + .detail_element:hover { + -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%); + box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 25%); + } + + .bton_inscription { + color: white; + text-align: right; + padding-right: 2rem; + border-radius: 20rem; + background-color: red; + border: 2px solid red; + width: 10rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + font-weight: bold; + letter-spacing: 1px; + position: fixed; + top: 15rem; + right: 5%; + height: 3rem; + } + + .row_inscription { + color: white; + text-align: right; + padding-right: 2rem; + } + + .sous_titre { + color: #619e31; + font-size: medium; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.1rem; + } + } + + @media only screen and (min-width: 992px) and (max-width: 1199px) { + .left_box { + float: left; + //border: 1px solid black; + border-width: 1px; + width: 20%; + height: 100%; + padding: 0.5rem; + border-radius: 1rem; + //margin-top: 1rem !important; + margin-bottom: 0.1rem; + font-size: small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + margin-left: 5px; + //-webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + //box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 15%); + padding-left: 5px; + } + + .right_box { + float: left; + border: 1px solid black; + border-width: 2px; + width: 78%; + height: 100%; + margin: auto; + padding: 0rem; + border-radius: 30px; + margin-right: 0%; + padding-left: 1rem; + padding-right: 10px; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%); + margin-left: 10px; + padding-bottom: 2rem; + margin-top: 0.5rem; + padding-top: 1rem; + background: #F4F6F6; + //background-color: #f8f9f9; + //overflow-y:scroll; + } + + .hilightsoustitre { + color: #3b3e40; + display: block; + font-size: 0.9rem; + margin-bottom: 0.5rem; + background: #e9ecef; + border-radius: 5px; + background: #113459; + color: #fff; + + } + + .autres_formations { + margin-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + } + + .img_banner { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding-top: 10px; + width: 100%; + background: url("../../mysy_img/MYSY-banner-compte.png") no-repeat; + } + + .img_bannermg_WOimg { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding-top: 10px; + width: 100%; + max-height: 11rem; + background-color: white; + } + + + .titre_formation { + color: #619e31; + font-size: 1.5rem; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.2rem; + } + + .description { + text-align: justify; + word-break: break-all; + line-height: 1.1rem; + color: #3b3e40; + font-size: 0.85rem; + word-break: break-word; + margin-left: 2%; + margin-right: 5%; + } + + .caracteristique { + word-break: break-all; + line-height: 1.1rem; + color: #3b3e40; + font-size: medium; + word-break: break-word; + font-weight: bold; + margin-left: 2%; + margin-right: 5%; + text-align: center; + } + + .calage { + width: 2%; + } + + .div_row_critere { + float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 30%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + font-size: small; + // border: 1px solid black; + } + + .div_row_critere_gauche { + width: 62%; + float: left; + text-align: right; + font-weight: bold; + padding-right: 5px; + } + + .div_row_critere_droite { + width: 38%; + float: left; + text-align: left; + padding-left: 5px; + } + + .div_row_critere_note { + //float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: small; + font-weight: bold; + // border: 1px solid black; + } + + .div_row { + width: 80%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + } + + .div_row_gauche { + float: left; + // border:1px solid black; + // border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .div_row_droite { + float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .ftion_tab_gauche { + width: 62%; + float: left; + text-align: left; + font-weight: bold; + } + + .ftion_tab_droite { + width: 38%; + float: left; + text-align: left; + } + + .forma_img_logo_class { + float: left; + border-width: 2px; + width: 100%; + padding: 0.3rem; + font-size: 11px; + + color: rgb(10, 42, 77); + margin-top: 1px; + cursor: pointer; + //border:1px solid black; + text-align: center; + display: table-cell; + // vertical-align: middle; + } + + .training_img { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + width: 100%; + } + + .vignet_title { + color: #619e31; + font-size: medium; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.1rem; + } + + .vignet_desc { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + line-height: 1.43; + font-size: small; + margin-bottom: 4px; + color: #3b3e40; + word-break: break-word; + padding: 5px; + } + + .text_surna { + z-index: 50; + font-size: xx-large; + color: white; + background: url("../../mysy_img/MYSY-LOGO-WHITE2.png") no-repeat; + height: 5rem; + width: 15rem; + margin-left: auto; + margin-right: auto; + top: 2rem; + margin-top: 1.5rem; + } + + .left_box_for_mobile { + display: none; + } + + .detail_class_submenu { + background: #d8edfc; + border-radius: 10px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 10rem; + text-align: center; + border: 1px solid; + color: #3b3e40; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + letter-spacing: 0.1rem; + font-weight: normal; + } + + .detail_class_submenu:hover:active, + .detail_class_submenu:hover { + background-color: #104277; + color: white; + } + + .detail_class_submenu:focus { + //border: 3px dotted green; + background-color: #104277; + color: white; + } + + .detail_class_submenu_data { + width: 100%; + height: 7rem; + background-color: #d8edfc; + padding-left: 5px; + text-align: left; + padding: 0; + border: 0px; + color: #3b3e40; + padding-left: 5px; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + border-radius: 10px; + border: 1px solid; + } + + .detail_element { + border-radius: 3px; + display: inline-block; + background-color: white; + height: auto; + padding: 10px; + outline: 1px solid #ccc; + + text-align: left; + margin-bottom: 2rem; + background-color: white; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2); + border: 0px solid; + width: 95%; + margin-left: 0px; + margin-left: 0px; + margin-right: 0px; + } + + .detail_element:hover { + -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%); + box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 25%); + } + + .bton_inscription { + color: white; + text-align: right; + padding-right: 2rem; + border-radius: 20rem; + background-color: red; + border: 2px solid red; + width: 10rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + font-weight: bold; + letter-spacing: 1px; + position: fixed; + top: 15rem; + right: 5%; + height: 3rem; + } + + .row_inscription { + color: white; + text-align: right; + padding-right: 2rem; + } + + .sous_titre { + color: #619e31; + font-size: medium; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.1rem; + } + } + + @media only screen and (min-width: 1200px) { + .left_box { + float: left; + border-width: 1px; + width: 20%; + height: 100%; + padding: 0.5rem; + padding-left: 0.5rem; + border-radius: 1rem; + margin-bottom: 0.1rem; + font-size: small !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif !important; + background: white; + margin-left: 5px; + padding-left: 5px; + } + + .right_box { + float: left; + border: 1px solid black; + border-width: 2px; + width: 78%; + height: 100%; + margin: auto; + padding: 0rem; + border-radius: 30px; + margin-right: 0%; + padding-left: 1rem; + padding-right: 10px; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 50%); + margin-left: 10px; + padding-bottom: 2rem; + margin-top: 0.5rem; + padding-top: 1rem; + background: #F4F6F6; + //overflow-y:scroll; + } + + .hilightsoustitre { + color: #3b3e40; + display: block; + font-size: 1rem; + margin-bottom: 0.5rem; + background: #e9ecef; + border-radius: 5px; + background: #113459; + color: #fff; + letter-spacing: 2px; + height: 2rem; + padding-top: 5px; + } + + .autres_formations { + margin-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + } + + .img_banner { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding-top: 10px; + width: 100%; + background: url("../../mysy_img/MYSY-banner-compte.png") no-repeat; + + } + + + .img_bannermg_WOimg { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding-top: 10px; + width: 100%; + max-height: 12rem; + background-color: white; + } + + .titre_formation { + color: #619e31; + font-size: 1.5rem; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.2rem; + } + + .description { + text-align: justify; + word-break: break-all; + line-height: 1.1rem; + color: #3b3e40; + font-size: 0.85rem; + word-break: break-word; + margin-left: 2%; + margin-right: 5%; + } + + .caracteristique { + word-break: break-all; + line-height: 1.1rem; + color: #3b3e40; + font-size: medium; + word-break: break-word; + font-weight: bold; + margin-left: 2%; + margin-right: 5%; + text-align: center; + } + + .calage { + width: 2%; + } + + .div_row_critere { + float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 30%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + font-size: small; + // border: 1px solid black; + } + + .div_row_critere_gauche { + width: 62%; + float: left; + text-align: right; + font-weight: bold; + padding-right: 5px; + } + + .div_row_critere_droite { + width: 38%; + float: left; + text-align: left; + padding-left: 5px; + } + + .div_row_critere_note { + //float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 50%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: small; + font-weight: bold; + // border: 1px solid black; + } + + .div_row { + width: 80%; + margin-bottom: 1rem; + border-radius: 1rem; + margin-left: auto; + margin-right: auto; + } + + .div_row_gauche { + float: left; + // border:1px solid black; + // border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .div_row_droite { + float: left; + //border:1px solid black; + //border-width:0.01rem; + width: 45%; + border-radius: 1rem; + } + + .ftion_tab_gauche { + width: 62%; + float: left; + text-align: left; + font-weight: bold; + } + + .ftion_tab_droite { + width: 38%; + float: left; + text-align: left; + } + + .forma_img_logo_class { + float: left; + border-width: 2px; + width: 100%; + padding: 0.3rem; + font-size: 11px; + color: rgb(10, 42, 77); + margin-top: 1px; + cursor: pointer; + //border:1px solid black; + text-align: center; + display: table-cell; + // vertical-align: middle; + } + + .training_img { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + width: 99%; + } + + .vignet_title { + color: #619e31; + font-size: medium; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.1rem; + } + + .vignet_desc { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + line-height: 1.43; + font-size: small; + margin-bottom: 4px; + color: #3b3e40; + word-break: break-word; + padding: 5px; + } + + .text_surna { + z-index: 50; + font-size: xx-large; + color: white; + background: url("../../mysy_img/MYSY-LOGO-WHITE2.png") no-repeat; + height: 5rem; + width: 15rem; + margin-left: auto; + margin-right: auto; + top: 2rem; + margin-top: 1.5rem; + } + + .left_box_for_mobile { + display: none; + } + + .detail_class_submenu { + background: #d8edfc; + border-radius: 15px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 10rem; + text-align: center; + border: 1px solid #9cf; + color: #3b3e40; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + letter-spacing: 0.1rem; + font-weight: normal; + } + + .detail_class_submenu:hover:active, + .detail_class_submenu:hover { + background-color: #104277; + color: white; + } + + .detail_class_submenu:focus { + //border: 3px dotted green; + background-color: #104277; + color: white; + } + + .detail_class_submenu_data { + width: 100%; + height: 7rem; + background-color: #d8edfc; + padding-left: 5px; + text-align: left; + padding: 0; + border: 0px; + color: #3b3e40; + padding-left: 5px; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + border-radius: 10px; + border: 1px solid; + } + + .detail_element { + border-radius: 3px; + display: inline-block; + background-color: white; + height: auto; + padding: 5px; + outline: 1px solid #ccc; + + text-align: left; + margin-bottom: 2rem; + background-color: white; + //box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2); + border: 0px solid; + width: 95%; + margin-left: 0px; + margin-right: 0px; + } + + .detail_element:hover { + -webkit-box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 25%); + box-shadow: 1px 1px 5px 1px rgb(0 0 0 / 25%); + } + + .bton_inscription { + color: white; + text-align: right; + padding-right: 2rem; + border-radius: 20rem; + background-color: red; + border: 2px solid red; + width: 12rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + font-weight: bold; + letter-spacing: 1px; + position: fixed; + top: 15rem; + right: 5%; + height: 3rem; + z-index: 10000; + } + + .bton_recontact { + color: white; + text-align: right; + padding-right: 2rem; + border-radius: 20rem; + background-color: #104277; + border: 2px solid #104277; + width: 12rem; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5); + font-weight: bold; + letter-spacing: 1px; + position: fixed; + top: 20rem; + right: 5%; + height: 3rem; + z-index: 10000; + } + + + .row_inscription { + color: white; + text-align: right; + padding-right: 2rem; + } + + .sous_titre { + color: #619e31; + font-size: medium; + font-family: "Quicksand", "Signika", sans-serif; + text-align: center; + letter-spacing: 0.1rem; + } + + .block_header_menu { + /* Header Menu */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + padding: 22px 72px; + gap: 10px; + + position: absolute; + width: 100%; + height: 100px; + //left: calc(50% - 1440px/2); + top: 0px; + + /* White */ + + background: #FFFFFF; + box-shadow: 0px 6px 8px rgba(30, 30, 30, 0.05); + } + + + .header_menu { + /* Menu Header */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0px; + gap: 345px; + + width: 1296px; + height: 56px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + } + + .hader_menu_logo_mysy { + /* Logo MySy */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 4px; + + width: 108px; + height: 52px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + } + + .logo_mysy { + /* Logo MySy */ + + + width: 108px; + height: 36px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .training { + /* TRAINING */ + + + width: 108px; + height: 12px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 900; + font-size: 10px; + line-height: 12px; + /* identical to box height */ + + letter-spacing: 0.83em; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + + .menu_header { + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 0px; + gap: 24px; + + width: 891px; + height: 56px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .menu_header_search { + width: 24px; + height: 24px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .menu_header_menu { + /* Les formations */ + + + width: 96px; + height: 17px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 17px; + /* identical to box height */ + + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .menu_header_rectangle { + width: 1px; + height: 24px; + + /* Deep Blue */ + + background: #0A043C; + border-radius: 10px; + + /* Inside auto layout */ + + flex: none; + order: 5; + flex-grow: 0; + } + + .menu_header_cat { + + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 8px; + + width: 288px; + height: 56px; + + + /* Inside auto layout */ + + flex: none; + order: 7; + flex-grow: 0; + } + + .menu_header_cat_buton_inscr { + /* Button */ + + + box-sizing: border-box; + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 13px 26px; + gap: 10px; + + width: 126px; + height: 56px; + + /* Deep Blue */ + + border: 1px solid #0A043C; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .menu_header_cat_buton_inscr_box { + display: none; + width: 24px; + height: 24px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .menu_header_cat_buton_inscr_txt { + + width: 74px; + height: 30px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 30px; + /* identical to box height, or 188% */ + + display: flex; + align-items: center; + text-align: center; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + + .menu_header_cat_buton_connex { + /* Button */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 13px 26px; + gap: 10px; + + width: 154px; + height: 56px; + + /* Deep Blue */ + + background: #0A043C; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .menu_header_cat_buton_connex_box { + display: none; + width: 24px; + height: 24px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .menu_header_cat_buton_connex_txt { + + width: 102px; + height: 30px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 30px; + /* identical to box height, or 188% */ + + display: flex; + align-items: center; + text-align: center; + + /* White */ + + color: #FFFFFF; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + + .block_sous_header { + position: absolute; + width: 100%; + height: 210px; + left: 0px; + top: 100px; + background: #0A043C; + } + + .block_sous_header_tag { + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding: 10px; + gap: 10px; + + position: absolute; + width: 200px; + height: 37px; + //left: 180px; + top: 110px; + + /* Beige */ + + background: #FFF5DA; + border-radius: 4px; + + } + + .block_sous_header_tag_cpf { + /* Éligible au CPF */ + + + //width: 118px; + height: 17px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 900; + font-size: 14px; + line-height: 17px; + /* identical to box height */ + + text-transform: uppercase; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + + .block_sous_header_rate_title { + /* Rates + Title */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + position: absolute; + width: 713px; + height: 114px; + left: 180px; + top: 30px; + } + + .rating { + /* Stars */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 7.76px; + + width: 147.53px; + height: 22px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sous_header_title { + width: 100%; + height: 76px; + text-align: left; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 26px; + line-height: 28px; + + /* Light Grey */ + + color: #F7F7F7; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .header_background { + /* Header Background */ + + + position: absolute; + width: 1440px; + height: 259px; + left: 0px; + top: 100px; + + /* Deep Blue */ + + background: #0A043C; + } + + .block_info_page { + /* List Infos Page */ + + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 14px; + + position: absolute; + width: 60%; + height: 1110px; + left: 182px; + top: 350px; + text-align: left; + } + + .block_info_page_pave_title_desc { + /* Title + Description */ + + text-align: justify; + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 5px; + gap: 5px; + + width: 95%; + //height: 165px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .block_info_page_pave_title_desc_title { + /* Description */ + + + width: 100%; + height: 29px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 29px; + /* identical to box height */ + + font-feature-settings: 'liga' off; + + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + } + + .block_info_page_pave_title_desc_desc { + width: 100%; + //height: 72px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + /* or 150% */ + + font-feature-settings: 'liga' off; + + /* Bold Grey */ + + color: #4B4B4B; + + + /* Inside auto layout */ + + flex: none; + order: 1; + align-self: stretch; + flex-grow: 0; + } + + + .block_sticky_info { + /* Sticky Infos */ + + + position: relative; + width: 309px; + height: 1000px; + left: 74%; + top: 160px; + //border: solid; + padding: 5px; + background: white; + border-radius: 15px; + } + + .block_sticky_info_price { + position: absolute; + width: 277px; + height: 38px; + //left: 965px; + top: 220px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + display: flex; + align-items: center; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + } + + .block_sticky_info_img { + position: absolute; + //width: 293px; + height: 164px; + //left: 957px; + //top: 168px; + + text-align: left; + + } + + .block_sticky_info_caracteristique { + /* Auto layout */ + text-align: left; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + position: absolute; + width: 90%; + left: 5%; + //height: 183px; + //left: 973px; + top: 390px; + } + + .block_sticky_info_caracteristique_title { + /* Caractéristiques : */ + + + width: 90%; + height: 24px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 800; + font-size: 18px; + line-height: 24px; + /* identical to box height */ + + display: flex; + align-items: center; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .block_sticky_info_caracteristique_list { + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 12px; + + width: 90%; + left: 5%; + height: 143px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .block_sticky_info_caracteristique_list_title_desc { + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 4px; + + width: 100%; + height: 25px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + } + + .block_sticky_info_caracteristique_list_title_desc_title { + width: 50%; + height: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .block_sticky_info_caracteristique_list_title_desc_desc { + width: 50%; + height: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .block_sticky_info_Sessions { + /* Auto layout */ + text-align: left; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + position: absolute; + width: 90%; + left: 5%; + //height: 183px; + //left: 973px; + top: 650px; + } + + .block_sticky_info_Sessions_title { + /* Caractéristiques : */ + + + width: 90%; + height: 24px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 800; + font-size: 18px; + line-height: 24px; + /* identical to box height */ + + display: flex; + align-items: center; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .block_sticky_info_Sessions_list_title_desc { + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 4px; + + width: 100%; + height: 55px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + } + + .block_sticky_info_Sessions_list_title_desc_title { + width: 50%; + height: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 19px; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .block_sticky_info_Sessions_list_title_desc_desc { + width: 50%; + height: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 19px; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + + .sticky_cats { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + position: absolute; + width: 90%; + height: 120px; + top: 280px; + left: 5%; + } + + .sticky_cats_buton_inscrire { + + /* Button */ + + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + + width: 100%; + height: 40px; + + /* Green */ + + background: #20BFA9; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + cursor: pointer; + + } + + .sticky_cats_buton_inscrire_box { + display: none; + width: 24px; + height: 24px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sticky_cats_buton_inscrire_txt { + width: 74px; + height: 30px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 30px; + /* identical to box height, or 188% */ + + display: flex; + align-items: center; + text-align: center; + + /* White */ + + color: #FFFFFF; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + + cursor: pointer; + + } + + + .sticky_cats_buton_info { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px; + gap: 10px; + + width: 100%; + height: 40px; + + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + border: solid 1px lightblue; + cursor: pointer; + } + + .sticky_cats_buton_info_box { + display: none; + width: 24px; + height: 24px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sticky_cats_buton_info_txt { + width: 202px; + height: 30px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 30px; + /* identical to box height, or 188% */ + + display: flex; + align-items: center; + text-align: center; + + /* Green */ + + color: #20BFA9; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + cursor: pointer; + } + + + .sticky_social_icone { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 0px; + gap: 16px; + + position: absolute; + //width: 80px; + height: 16px; + //left: 965px; + top: 900px; + left: 35%; + } + + .sticky_social_icone_SocialIcon { + height: 25px !important; + width: 25px !important; + } + + .sticky_social_icone_facebook { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + + } + + .sticky_social_icone_link { + + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 2; + flex-grow: 0; + } + + .sticky_social_icone_twitter { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + + + } + + .sticky_organisme_title_desc { + //display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 4px; + + position: absolute; + width: 100%; + text-align: center; + height: 42px; + // left: 965px; + top: 950px; + } + + .sticky_organisme_title_desc_title { + + //width: 190px; + height: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 19px; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sticky_organisme_title_desc_desc { + //width: 134px; + height: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + text-decoration-line: underline; + font-feature-settings: 'liga' off; + + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .block_crossell_meme_orga { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + padding: 0px; + gap: 40px; + + position: absolute; + width: 100%; + height: 629px; + left: 182px; + top: 2200px; + + } + + .sous_crossell { + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 16px; + + width: 100%; + height: 533px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sous_crossell_title { + width: 641px; + height: 38px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 32px; + line-height: 38px; + + /* Black */ + + color: #1E1E1E; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sous_crossell_list_card { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 25px; + + width: 1076px; + height: 479px; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .sous_crossell_list_card_card { + /* Card Vertical */ + + + box-sizing: border-box; + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: center; + padding: 8px; + gap: 16px; + isolation: isolate; + + width: 342px; + height: 460px; + + /* White */ + + background: #FFFFFF; + /* Medium Grey */ + + border: 1px solid #DFDFDF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + + .sous_crossell_list_card_card_img { + width: 326px; + height: 180px; + + border-radius: 4px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + z-index: 0; + } + + .sous_crossell_list_card_card_tag_cpf { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding: 10px; + gap: 10px; + + position: relative; + width: 188px; + height: 37px; + top: -200px; + left: -50px; + //top: 8px; + + /* Beige */ + + background: #FFF5DA; + border-radius: 0px 4px; + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + z-index: 1; + } + + .sous_crossell_list_card_card_tag_cpf_txt { + /* Éligible au CPF */ + + + //width: 118px; + height: 17px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 900; + font-size: 14px; + line-height: 17px; + /* identical to box height */ + + text-transform: uppercase; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sous_crossell_list_card_card_content { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + width: 310px; + height: 131px; + + + /* Inside auto layout */ + + flex: none; + order: 2; + flex-grow: 0; + z-index: 2; + position: relative; + top: -30px; + } + + .sous_crossell_list_card_card_content_rating { + /* Auto layout */ + + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 5.29px; + + width: 100.59px; + height: 15px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .sous_crossell_list_card_card_content_title { + width: 310px; + height: 70px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 26px; + font-feature-settings: 'liga' off; + text-align: left; + text-transform: uppercase; + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + + .sous_crossell_list_card_card_content_price { + //width: 65px; + height: 22px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 800; + font-size: 18px; + line-height: 22px; + /* identical to box height */ + + display: flex; + align-items: center; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 2; + flex-grow: 0; + } + + + + .sous_crossell_list_card_card_CAT { + + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 8px; + + width: 310px; + height: 120px; + + + /* Inside auto layout */ + + flex: none; + order: 3; + flex-grow: 0; + z-index: 3; + } + + .sous_crossell_list_card_card_CAT_bton { + + /* Auto layout */ + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 13px 26px; + gap: 10px; + + width: 310px; + height: 56px; + + /* Deep Blue */ + + background: #0A043C; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + cursor: pointer; + } + + .sous_crossell_list_card_card_CAT_bton_txt { + width: 109px; + height: 30px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 30px; + /* identical to box height, or 188% */ + + display: flex; + align-items: center; + text-align: center; + + /* White */ + + color: #FFFFFF; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .training_img_crossel { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + height: 99%; + } + + .css-dqr9h-MuiRating-label { + margin-left: 2px; + } + + .css-iljtu2-MuiRating-root { + font-size: 1.2rem; + } + } + + // end media +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index d6a2770..a0aff63 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -59,4 +59,5 @@ @import "./components/updateusergoals"; @import "./components/userprofil"; @import "./components/reherche_new_v2"; -@import "./components/footer_v2"; \ No newline at end of file +@import "./components/footer_v2"; +@import "./components/displaydetailclass_new_v2"; \ No newline at end of file