1<#-- Web content templates are used to lay out the fields defined in a web
2content structure. Please use the left panel to quickly add commonly used
3variables. Autocomplete is also available and can be invoked by typing "${". -->
4
5<#assign LayoutService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutService") />
6<#assign UserService = serviceLocator.findService("com.liferay.portal.kernel.service.UserService")>
7<#assign void = permissionChecker.init(UserService.getCurrentUser()) />
8
9<style>
10@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
11 #video-intro-container {
12 height: 100%;
13 display: flex;
14 align-items: center;
15 overflow: hidden;
16 position: relative;
17 }
18
19 #video-intro-player {
20 width: 100%;
21 height: 100%;
22 object-fit: cover;
23 }
24 .video-header-container {
25 position: absolute;
26 top: 50%;
27 left: 50%;
28 font-family: "Poppins", sans-serif;
29 color: white;
30 opacity: 0;
31 transition: all 1.5s ease-out;
32 }
33
34 .video-header-big-header {
35 font-size: 5em;
36 font-weight: 700;
37 line-height: 0.8em;
38 }
39 .video-header-small-header {
40 font-size: 3em;
41 font-weight: 400;
42 letter-spacing: 0.03em;
43 }
44
45 @media only screen and (max-width: 768px){
46 .video-header-container {
47 display: none;
48 }
49
50 #mobile-intro-container {
51 left:0;
52 right:0;
53 margin-left: auto;
54 margin-right: auto;
55 position: absolute;
56 width: 90%;
57 top:30%;
58 }
59
60 #mobile-main-title {
61 font-style: normal;
62 font-weight: 600;
63 line-height: 38px;
64 margin: 0;
65 text-align:center;
66 color:#ffffff;
67 font-family: "Greycliff CF", sans-serif;
68 font-size: 40px !important;
69 padding-bottom: 20px;
70 }
71
72 #mobile-main-text {
73 font-family: "Greycliff CF", sans-serif;
74 font-style: normal;
75 font-weight: normal;
76 font-size: 18px!important;
77 line-height: 150%;
78 letter-spacing: -0.002em;
79 padding-left: 7px;
80 color: #ffffff;
81 letter-spacing: -0.02em;
82 text-align:center;
83 }
84
85 #mobile-register-btn,#mobile-signin-btn,#mobile-signout-btn {
86 max-width: 300px;
87 border-radius: 10em;
88 margin: 10px auto;
89 }
90
91 #layout-column_social {
92 margin-top:20%;
93 }
94 }
95
96${CSSoverride.getData()}
97
98<#if Step.getSiblings()?has_content>
99<#list Step.getSiblings() as cur_Step>
100<#if getterUtil.getBoolean(cur_Step.getData())>
101 #video-intro-container.step-${cur_Step?index} .step-${cur_Step?index} {
102 opacity: 1;
103 }
104 #video-intro-container .step-${cur_Step?index} {
105 margin-top: ${cur_Step.getChild("VerticalOffset").getData()}%;
106 }
107 #video-intro-container .step-${cur_Step?index} .video-header-big-header {
108 margin-left: ${cur_Step.getChild("BigHeaderOffset").getData()}%;
109 }
110 #video-intro-container .step-${cur_Step?index} .video-header-small-header {
111 margin-left: ${cur_Step.getChild("SmallHeaderOffset").getData()}%;
112 }
113
114</#if>
115</#list>
116</#if>
117</style>
118
119<div id="video-intro-container" class="step-0">
120 <video id="video-intro-player" defer muted autoplay muted playsinline></video>
121
122<#if Step.getSiblings()?has_content>
123<#list Step.getSiblings() as cur_Step>
124<#if getterUtil.getBoolean(cur_Step.getData())>
125 <div class="video-header-container step-${cur_Step?index}">
126 <div class="video-header-big-header">${cur_Step.getChild("BigHeaderText").getData()}</div>
127 <div class="video-header-small-header">${cur_Step.getChild("SmallHeaderText").getData()}</div>
128 </div>
129</#if>
130</#list>
131</#if>
132
133</div>
134
135<script>
136let video_region = "${Region.getData()}";
137let videos = {
138 APAC: [
139 {
140 webm_filename: "/documents/3189313/23244499/Influencers_APAC_480x640.webm/01a74721-7c5f-2983-90f8-7298d6f6b43a",
141 mp4_filename: "/documents/3189313/23244499/Influencers_APAC_480x640.mp4/f6ce27bb-86fd-93d6-8f43-82a7518032f6",
142 media: window.matchMedia("(max-width: 768px)"),
143 },
144 {
145 webm_filename: "/documents/3189313/23244499/Influencers_APAC_800x600.webm/5c17db50-5182-c03b-f50c-b75ae678f469",
146 mp4_filename: "/documents/3189313/23244499/Influencers_APAC_800x600.mp4/eaafd5ea-d16a-77c7-7614-03197d75d0d8",
147 media: window.matchMedia("(max-width: 960px)"),
148 },
149 {
150 webm_filename: "/documents/3189313/23244499/Influencers_APAC_960x720.webm/790112f7-9c33-9de3-5897-4a24a100ce45",
151 mp4_filename: "/documents/3189313/23244499/Influencers_APAC_960x720.mp4/ba10579f-78d7-8f40-2e6f-783633e4e123",
152 media: window.matchMedia("(min-width: 960px)"),
153 },
154 ],
155 EMEA: [
156 {
157 webm_filename: "/documents/3189313/23244499/Influencers_EMEA_480x640.webm/edc6e90e-d228-0fe3-6214-502284d967de",
158 mp4_filename: "/documents/3189313/23244499/Influencers_EMEA_480x640.mp4/155428b0-f035-5ffa-6cf7-0ed8c3cbd005",
159 media: window.matchMedia("(max-width: 768px)"),
160 },
161 {
162 webm_filename: "/documents/3189313/23244499/Influencers_EMEA_800x600.webm/ef2b6290-7703-2afe-063e-200642eb79b7",
163 mp4_filename: "/documents/3189313/23244499/Influencers_EMEA_800x600.mp4/cc3f7baa-2cd6-53c7-723c-d0594ac4c955",
164 media: window.matchMedia("(max-width: 960px)"),
165 },
166 {
167 webm_filename: "/documents/3189313/23244499/Influencers_EMEA_960x720.webm/6be8d1a3-7462-6274-e176-6440f7a2085d",
168 mp4_filename: "/documents/3189313/23244499/Influencers_EMEA_960x720.mp4/f48609f1-8f3e-c3b5-3544-5eda0bb7feb5",
169 media: window.matchMedia("(min-width: 960px)"),
170 },
171 ],
172 INDIA: [
173 {
174 webm_filename: "/documents/3189313/23244499/Influencers_INDIA_480x640.webm/65b0306e-80ac-71de-f7ff-723b285ed1ad",
175 mp4_filename: "/documents/3189313/23244499/Influencers_INDIA_480x640.mp4/8047ee9f-3c38-3e3a-ec27-03772bb0928a",
176 media: window.matchMedia("(max-width: 768px)"),
177 },
178 {
179 webm_filename: "/documents/3189313/23244499/Influencers_INDIA_800x600.webm/9a9d537f-ca76-89c5-b81a-46e875742f94",
180 mp4_filename: "/documents/3189313/23244499/Influencers_INDIA_800x600.mp4/eb389ec8-8d9d-9724-99ac-657511b2a0b4",
181 media: window.matchMedia("(max-width: 960px)"),
182 },
183 {
184 webm_filename: "/documents/3189313/23244499/Influencers_INDIA_960x720.webm/6f56d5be-0099-e0c2-dc05-184301ef20a0",
185 mp4_filename: "/documents/3189313/23244499/Influencers_INDIA_960x720.mp4/07aa243e-210f-5dd4-19e2-274747d9ba69",
186 media: window.matchMedia("(min-width: 960px)"),
187 },
188 ],
189 MENA: [
190 {
191 webm_filename: "/documents/3189313/23244499/Influencers_MENA_480x640.webm/450df341-f139-ff8c-45fe-1bc8b5d0dae7",
192 mp4_filename: "/documents/3189313/23244499/Influencers_MENA_480x640.mp4/d6f0136a-a637-17d6-fd38-9ea84d8e688b",
193 media: window.matchMedia("(max-width: 768px)"),
194 },
195 {
196 webm_filename: "/documents/3189313/23244499/Influencers_MENA_800x600.webm/e0a291e2-874f-32ec-b158-8a145bc04c54",
197 mp4_filename: "/documents/3189313/23244499/Influencers_MENA_800x600.mp4/ddfdf204-0dac-15e0-ee87-50fb9f061cb7",
198 media: window.matchMedia("(max-width: 960px)"),
199 },
200 {
201 webm_filename: "/documents/3189313/23244499/Influencers_MENA_960x720.webm/fc619e27-7a5c-1a65-03c3-b27c272acb5a",
202 mp4_filename: "/documents/3189313/23244499/Influencers_MENA_960x720.mp4/a2b267e8-30d7-c42e-fa3f-c5eb01aaa5db",
203 media: window.matchMedia("(min-width: 960px)"),
204 },
205 ],
206 };
207
208
209for (video of videos[video_region]) {
210 if (video.media.matches) {
211 let container = document.querySelector("#video-intro-container");
212 let player = document.querySelector("#video-intro-player");
213
214 let webm = document.createElement("source");
215 webm.setAttribute("type", "video/webm");
216 webm.setAttribute("src", video.webm_filename);
217
218 let mp4 = document.createElement("source");
219 mp4.setAttribute("type", "video/mp4");
220 mp4.setAttribute("src", video.mp4_filename);
221
222 player.append(webm);
223 player.append(mp4);
224
225 player.addEventListener("timeupdate", (event) => {
226 let step = Math.min(4, Math.floor(player.currentTime / 5)); // 5 secs per video segment
227
228 if (!container.classList.contains("step-"+step)) {
229 container.classList.forEach(function (value) {
230 if (value.match(/step/gi)) {
231 container.classList.remove(value);
232 }
233 });
234 container.classList.add("step-"+step);
235 }
236 });
237
238 player.addEventListener("ended", (event) => {
239 player.play();
240 });
241
242 player.play();
243
244 break;
245 }
246}
247
248</script>
249
250<div id="mobile-intro-container">
251<div class="btn-group-vertical shadow hidden-md hidden-lg hidden-xl">
252
253<p>${MobileText.getData()}</p>
254<p id="mobile-main-title">${MobileText.getChild("MobileTextBigHeader").getData()}</p>
255<p id="mobile-main-text">${MobileText.getChild("MobileTextSmallHeader").getData()}</p>
256
257
258<#attempt>
259
260<#if MobileRegistration?has_content>
261<#if (MobileRegistration.getData()?length > 0)>
262<a href="${MobileRegistration.getFriendlyUrl()}" class="btn btn-default" id="mobile-register-btn">
263${LayoutService.getLayoutName(groupId, false, MobileRegistration.getData()?number, MobileRegistration.getAttribute("language-id"))}</a>
264</#if>
265</#if>
266
267<#recover>
268</#attempt>
269
270<#attempt>
271<#if MobileLogin?has_content>
272<#if true >
273<a href="${MobileLogin.getFriendlyUrl()}" class="btn btn-info sign-in" rel="nofollow" data-redirect="false" id="mobile-signin-btn">${languageUtil.get(locale, "sign-in")}</a>
274</a>
275<#else>
276<a href="/c/portal/logout" class="btn btn-info sign-out" rel="nofollow" data-redirect="false" id="mobile-signout-btn">${languageUtil.get(locale, "sign-out")}</a>
277</#if>
278</#if>
279<#recover>
280</#attempt>
281</div>
282 </div> <!-- end of mobileintrocontainer -->
