1<#if themeDisplay.getLanguageId() == "en_US">
2 <#assign dict_marketLabel = "Markets">
3 <#assign dict_serviceLabel = "Services">
4 <#assign dict_ctaLabel = "Discover more">
5<#elseif themeDisplay.getLanguageId() == "it_IT">
6 <#assign dict_marketLabel = "Mercati">
7 <#assign dict_serviceLabel = "Servizi">
8 <#assign dict_ctaLabel = "Scopri di più">
9</#if>
10
11<#assign imagesFolder = "/o/coopservice-theme/images" >
12
13<div class="container-fluid" id="smart-city" animatron="show" animatron-preset="slideDown" animatron-gap="0">
14 <div class="clouds"></div>
15 <div class="city-container" id="city-container"></div>
16 <div class="tabs-container">
17 <div class="nav-tabs">
18 <div class="tab active" adc-value="0">${dict_marketLabel}</div>
19 <div class="tab" adc-value="1">${dict_serviceLabel}</div>
20 </div>
21 <div class="list-container">
22 <div class="list active" adc-value="0">
23 <#assign loopCounter = 0>
24 <#if Mercato?? && Mercato.getSiblings()?has_content>
25 <#list Mercato.getSiblings() as singoloMercato>
26 <#assign target = singoloMercato.ClasseCSS.getData()>
27 <div class="list-item" adc-value="${loopCounter}">${singoloMercato.getData()}</div>
28 <style>
29 .${target} {
30 width: ${singoloMercato.Dimensione.getData()}%;
31 height: auto;
32 top: ${singoloMercato.Top.getData()}%;
33 left: ${singoloMercato.Left.getData()}%;
34 }
35
36 #smart-city .city-container.active.market-${loopCounter} {
37 transform: scale(${singoloMercato.Zoom.getData()}) translateX(${singoloMercato.Zoom.ZoomLeft.getData()}%) translateY(${singoloMercato.Zoom.ZoomTop.getData()}%);
38 }
39 </style>
40 <#assign loopCounter = loopCounter + 1 >
41 </#list>
42 </#if>
43 </div>
44 <div class="list" adc-value="1">
45 <#if Servizio?? && Servizio.getSiblings()?has_content>
46 <#list Servizio.getSiblings() as singoloServizio>
47 <div class="list-item" adc-value="${loopCounter}">${singoloServizio.getData()}</div>
48 <#assign loopCounter = loopCounter + 1 >
49 </#list>
50 </#if>
51 </div>
52 </div>
53 <div class="detail-container">
54 <#assign loopCounter = 0>
55 <#if Mercato?? && Mercato.getSiblings()?has_content>
56 <#list Mercato.getSiblings() as singoloMercato>
57 <div class="detail" adc-value="${loopCounter}">
58 <div class="text">${singoloMercato.Descrizione.getData()}</div>
59 <a class="cta-button" href="${singoloMercato.CollegamentoAllaPagina.getFriendlyUrl()}">${dict_ctaLabel}</a>
60 </div>
61 <#assign loopCounter = loopCounter + 1 >
62 </#list>
63 </#if>
64 <#if Servizio?? && Servizio.getSiblings()?has_content>
65 <#list Servizio.getSiblings() as singoloServizio>
66 <div class="detail" adc-value="${loopCounter}">
67 <div class="text">${singoloServizio.DescrizioneServizio.getData()}</div>
68 <a class="cta-button" href="${singoloServizio.CollegamentoAllaPaginaServizio.getFriendlyUrl()}">${dict_ctaLabel}</a>
69 </div>
70 <#assign loopCounter = loopCounter + 1 >
71 </#list>
72 </#if>
73 </div>
74 </div>
75 <div class="loader"></div>
76</div>
77
78<script>
79 console.log($(window).width());
80 if($(window).width() > 540) {
81 document.getElementById("city-container").innerHTML = '<img class="city" src="${imagesFolder}/smart-city/city.png" ><div class="vehicles"><img class="truck-t" src="${imagesFolder}/smart-city/truck-t-white.png" ><img class="van-t" src="${imagesFolder}/smart-city/van-t-white.png" ><img class="car-t" src="${imagesFolder}/smart-city/car-t-red.png"><img class="train" src="${imagesFolder}/smart-city/train.png" ><img class="car-d-1" src="${imagesFolder}/smart-city/car-d-grey.png" ><img class="car-d-2" src="${imagesFolder}/smart-city/car-d-red.png" ><img class="car-d-3" src="${imagesFolder}/smart-city/car-d-white.png" ><img class="truck-d" src="${imagesFolder}/smart-city/truck-d-white.png" ><img class="van-d-1" src="${imagesFolder}/smart-city/van-d-white.png" ><img class="van-d-2" src="${imagesFolder}/smart-city/van2-d-white.png" ></div><img class="obstacles" src="${imagesFolder}/smart-city/obstacles.png" ><img class="propeller propeller-1" src="${imagesFolder}/smart-city/propeller.png" ><img class="propeller propeller-2" src="${imagesFolder}/smart-city/propeller.png" ><img class="propeller propeller-3" src="${imagesFolder}/smart-city/propeller.png" ><img class="propeller propeller-4" src="${imagesFolder}/smart-city/propeller.png"><img class="propeller propeller-5" src="${imagesFolder}/smart-city/propeller.png"><img class="propeller propeller-6" src="${imagesFolder}/smart-city/propeller.png" ><img class="market residential" adc-value="8" src="${imagesFolder}/smart-city/residential.png" ><img class="market business" adc-value="5" src="${imagesFolder}/smart-city/business.png" ><img class="market bank" adc-value="6" src="${imagesFolder}/smart-city/bank.png" ><img class="market hospital" adc-value="0" src="${imagesFolder}/smart-city/hospital.png" ><img class="market culture" adc-value="7" src="${imagesFolder}/smart-city/culture.png" ><img class="market public" adc-value="1" src="${imagesFolder}/smart-city/public.png" ><img class="market industrial" adc-value="2" src="${imagesFolder}/smart-city/industrial.png" ><img class="market gdo" adc-value="4" src="${imagesFolder}/smart-city/gdo.png" ><img class="market transport" adc-value="3" src="${imagesFolder}/smart-city/transport.png" ><div class="airplane"><img class="plane-arriving" src="${imagesFolder}/smart-city/airplane-arriving.png" ><img class="plane-arriving-s" src="${imagesFolder}/smart-city/airplane-arriving-s.png" ><img class="plane-departing" src="${imagesFolder}/smart-city/airplane-departing.png" ><img class="plane-departing-s" src="${imagesFolder}/smart-city/airplane-departing-s.png" ></div>';
82 }
83</script>
