Untitled
unknown
plain_text
2 years ago
20 kB
2
Indexable
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style>
body {
margin: 0;
}
.font {
font-family: Montserrat, sans-serif !important;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 5px; /* this */
}
.justify-content-center {
justify-content: center;
}
.text-center {
text-align: center;
}
.col-4, .col-4-box {
width: 33.33%;
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.box {
max-width: 350px;
/*width: 200px;*/
width: 100%;
height: 120px;
border: 1px solid #091849;
border-radius: 20px;
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
margin: 5px; /* and that, will result in a 10px gap */
}
.box > span {
padding: 20px;
/* flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;*/
}
.box1 {
background: #091849;
color: #fff;
transition: transform 0.2s;
cursor: pointer;
}
.box2 {
background: #fff;
transition: transform 0.2s;
cursor: pointer;
}
.box1:hover {
background: #fff;
color: black;
/*font-weight: 600 !important;*/
transform: scale(1.05);
}
.box2:hover {
background: #091849;
color: #fff;
/*font-weight: 600 !important;*/
transform: scale(1.05);
}
.img-prg {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 1000px) {
#menu-desktop {
display: none;
}
#menu-mobile {
display: flex !important;
}
.col-4 {
width: 50%;
}
.box > span {
font-size: 12px!important;
}
.box {
height: auto!important;
}
}
.img-prg {
opacity: 0.3;
transition: 0.2s;
cursor: pointer;
max-height: 60px;
margin-top: 20px;
padding: 10px;
}
.img-prg:hover {
opacity: 1;
}
.active {
opacity: 1;
}
</style>
<div id="menu-desktop" class="row justify-content-center align-items-center justify-content-center">
<div class="col-4 text-center">
<a onclick="selectProduct(0)">
<img class="img-prg" style="max-height: 50px" id="1" src="https://www.enermedica.it/wp-content/uploads/2022/02/zoskin.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(1)">
<img class="img-prg" id="2" src="https://www.enermedica.it/wp-content/uploads/2022/02/Risorsa-1.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(2)">
<img class="img-prg" id="3" src="https://www.enermedica.it/wp-content/uploads/2022/02/endymed.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(3)">
<img class="img-prg" id="4" src="https://www.enermedica.it/wp-content/uploads/2022/02/observ.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(4)">
<img class="img-prg" id="5" src="https://www.enermedica.it/wp-content/uploads/2022/02/skinpen.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(5)">
<img class="img-prg" id="6" src="https://www.enermedica.it/wp-content/uploads/2022/02/Risorsa-7.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(6)">
<img class="img-prg" id="7" src="https://www.enermedica.it/wp-content/uploads/2022/09/Sofwave-logo_Digital-RGB_Black.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(7)">
<img class="img-prg" id="8" src="https://www.enermedica.it/wp-content/uploads/2023/04/reborn_logo_3.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(8)">
<img class="img-prg" id="9" src="https://www.enermedica.it/wp-content/uploads/2023/04/exocobio-colore.svg">
</a>
</div>
</div>
<div id="menu-mobile" class="row justify-content-center align-items-center justify-content-center" style="display: none">
<div class="col-4 text-center">
<a onclick="selectProduct(0)">
<img class="img-prg" id="m-1" src="https://www.enermedica.it/wp-content/uploads/2022/02/zoskin.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(1)">
<img class="img-prg" id="m-2" src="https://www.enermedica.it/wp-content/uploads/2022/02/Risorsa-1.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(2)">
<img class="img-prg" id="m-3" src="https://www.enermedica.it/wp-content/uploads/2022/02/endymed.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(3)">
<img class="img-prg" id="m-4" src="https://www.enermedica.it/wp-content/uploads/2022/02/observ.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(4)">
<img class="img-prg" id="m-5" src="https://www.enermedica.it/wp-content/uploads/2022/02/skinpen.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(5)">
<img class="img-prg" id="m-6" src="https://www.enermedica.it/wp-content/uploads/2022/02/Risorsa-7.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(6)">
<img class="img-prg" id="m-7" src="https://www.enermedica.it/wp-content/uploads/2022/09/Sofwave-logo_Digital-RGB_Black.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(7)">
<img class="img-prg" id="m-8" src="https://www.enermedica.it/wp-content/uploads/2023/04/reborn_logo_3.svg">
</a>
</div>
<div class="col-4 text-center">
<a onclick="selectProduct(8)">
<img class="img-prg" id="m-9" src="https://www.enermedica.it/wp-content/uploads/2023/04/exocobio-colore.svg">
</a>
</div>
</div>
<div class="row" style="margin-top: 40px" id="container">
</div>
<script>
const obj = [
{
"key": "prodotto1",
"items": [
{
"desc": "Growth Factor Eye Serum",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000007005"
},
{
"desc": "Diagnosi e prescrizione-Protocolli di preparazione della pelle e prevenzione <b>Dott.ssa Giorgini</b>",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000007021"
},
{
"desc": "Protocolli Anti-Age | <b>Dott. Fabrizio Melfa</b>",
"desktop": "box1",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000007039"
},
{
"desc": "Protocolli acne, rosacea, pelle sensibile e reattiva | <b>Dott.ssa Angela Capponi</b>",
"desktop": "box2",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000007057"
},
{
"desc": "Protocolli per l'iperpigmentazione | <b>Dott.ssa Ilaria Proietti</b>",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000007074"
},
{
"desc": "3 Step Peel | <b>Dott.ssa Angela Capponi</b>, <b>Dott. Fabrizio Melfa</b>, <b>Dott.ssa Ilaria Proietti</b>",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000007084"
},
{
"desc": "Modulo 1 |Gsr - Protocolli di preparazione della pelle ",
"desktop": "box1",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009019"
},
{ "desc": "Modulo 2 | Anti-Age", "desktop": "box2", "mobile": "box1", "link": "https://showtime.zoho.eu/join#/30004106463/24077000000009036" },
{
"desc": "Modulo 3 | Iperpigmentazione",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009053"
},
{
"desc": "Modulo 4 | Acne e Rosacea",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009070"
},
{
"desc": "Modulo 5 | Protezioni Solari",
"desktop": "box1",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009088"
},
{ "desc": "Modulo 6 | Peeling", "desktop": "box2", "mobile": "box1", "link": "https://showtime.zoho.eu/join#/30004106463/24077000000009105" },
{
"desc": "ZO Presentazione nuovo Daily Power Defense e Illuminating AOX Serum",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000087480"
},
{
"desc": "ZO | Filosofia, GSR e Anti-Aging",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000098150"
},
{
"desc": "ZO | Approfondimenti Anti-Aging",
"desktop": "box1",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000095499"
},
{
"desc": "ZO | Gestione delle reazioni previste",
"desktop": "box2",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000098213"
},
{
"desc": "ZO | Iperpigmentazione, prodotti e protocolli",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000100085"
},
{
"desc": "ZO | Approfondimento Iperpigmentazione",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000100100"
},
{
"desc": "ZO | Gestione della pelle iper reattiva e sensibilizzata",
"desktop": "box1",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000099275"
},
{
"desc": "ZO | Soluzioni per Acne e Rosacea",
"desktop": "box2",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000099290"
},
{
"desc": "ZO | Protezione Solare Intelligente",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000103035"
}
]
},
{
"key": "prodotto2",
"items": [
{
"desc": "Hydrafacial Basic - Come introdurlo nel vostro studio",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009123"
},
{
"desc": "Hydrafacial - Protocollo Signature + Perk + Pulizia del manipolo",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009140"
},
{
"desc": "Hydrafacial - Protocollo Deluxe personalizzato",
"desktop": "box1",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009161"
},
{
"desc": "Hydrafacial - Protocollo Platinum e linfodrenaggio viso",
"desktop": "box2",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009178"
},
{
"desc": "Hydrafacial - Protocollo corpo e linfodrenaggio corpo",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009189"
},
{
"desc": "Hydrafacial - Trattamento Keravive, <b>Dott. Salvatore Artiano</b> e <b>Prof. Christine Dierickx</b>",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009213"
},
{ "desc": "Hydrafacial Basic ", "desktop": "box1", "mobile": "box2", "link": "https://showtime.zoho.eu/join#/30004106463/24077000000009231" },
{ "desc": "Hydrafacial Advanced", "desktop": "box2", "mobile": "box1", "link": "https://showtime.zoho.eu/join#/30004106463/24077000000009248" }
]
},
{
"key": "prodotto3",
"items": [
{
"desc": "Endymed - Manipoli non ablativi per rassodamento, lassità e body contouring",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009265"
},
{
"desc": "Endymed - Manipoli microaghi e frazionale ablativo",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009282"
},
{
"desc": "Trattamento di terzo inferiore viso/collo e sottomento con RF microaghi e rimodellamento volumetrico Enerjet",
"desktop": "box1",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009299"
},
{
"desc": "Trattamento di cellulite, body contouring e lassità- <b>Dott. Salvatore Artiano</b> e <b>Dott. Marco Bartolucci</b>",
"desktop": "box2",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009316"
},
{
"desc": "Stimolazione meccanica e chimica del derma con jet volumetric remodeling e radiofrequenza 3 Deep (Alberico/Izzo)",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009333"
},
{
"desc": "Blefaroplastica non chirurgica con Rediofrequenza Frazionale e microaghi - <b>Dott.ssa Jasmine Fuhr</b> e <b>Dott. Stefano Toschi</b>",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009350"
},
{
"desc": "Endymed Contour: la nuova frontiera per apoptosi degli adipociti, vacuum pulsato per la cellulite e rassodamento delle lassità",
"desktop": "box1",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009402"
},
{
"desc": "In forma per l'estate: come combattere le adiposità localizzate (Reborn, Endymed)",
"desktop": "box2",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000173081"
}
]
},
{
"key": "prodotto4",
"items": [
{
"desc": "Valutazione fotografica della pelle con Observ520",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009368"
}
]
},
{
"key": "prodotto5",
"items": [
{
"desc": "Introduzione SkinPen Precision, il dispositivo di microneedling con caratteristiche, benefici e sistema di sicurezza ineguagliabilli ",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000009417"
}
]
},
{
"key": "prodotto6",
"items": [
{
"desc": "Le nuove tecnologie di Enermedica: Aerolase, Sofwave e ReBorn",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000088284"
},
{
"desc": " Aerolase, la nuova era dei laser - Potente, indolore, portatile ed efficace",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000172157"
}
]
},
{
"key": "prodotto7",
"items": [
{
"desc": "Le nuove tecnologie di Enermedica: Aerolase, Sofwave e ReBorn",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000088284"
},
{
"desc": "Workshop Sofwave 6-5-2023- Dr Carlo Borriello",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000173183"
}
]
},
{
"key": "prodotto8",
"items": [
{
"desc": "Le nuove tecnologie di Enermedica: Aerolase, Sofwave e ReBorn",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000088284"
},
{
"desc": "In forma per l'estate: come combattere le adiposità localizzate (Reborn, Endymed)",
"desktop": "box2",
"mobile": "box2",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000173081"
}
]
},
{
"key": "prodotto9",
"items": [
{
"desc": "Esosomi Asce Plus: cosa sono, cosa fanno e cos'hanno di diverso dagli altri",
"desktop": "box1",
"mobile": "box1",
"link": "https://showtime.zoho.eu/join#/30004106463/24077000000168053"
}
]
}
]
function isMobile() {
return (window.innerWidth <= 1000);
}
function clearAll() {
$('#1').removeClass("active")
$('#2').removeClass("active")
$('#3').removeClass("active")
$('#4').removeClass("active")
$('#5').removeClass("active")
$('#6').removeClass("active")
$('#7').removeClass("active")
$('#8').removeClass("active")
$('#9').removeClass("active")
$('#m-1').removeClass("active")
$('#m-2').removeClass("active")
$('#m-3').removeClass("active")
$('#m-4').removeClass("active")
$('#m-5').removeClass("active")
$('#m-6').removeClass("active")
$('#m-7').removeClass("active")
$('#m-8').removeClass("active")
$('#m-9').removeClass("active")
}
function selectProduct(key) {
productSelected = key
clearAll()
if (isMobile()) {
$("#m-" + Number(key + 1)).addClass("active")
} else {
$("#" + Number(key + 1)).addClass("active")
}
if (obj[key]) {
$('#container').empty()
const items = obj[key].items
for (let i = 0; i < items.length; i++) {
const d = document.createElement('div')
d.className = 'col-4 d-flex justify-content-center'
const d2 = document.createElement('div')
d2.className = `box ${isMobile() ? items[i].mobile : items[i].desktop}`
d2.addEventListener('click', function(){ goTo(items[i].link);}, false)
d2.innerHTML = `<span>${items[i].desc}</span>`
d.append(d2)
$('#container').append(d)
}
}
}
function goTo(link) {
window.open(link, '_blank')
}
</script>