1<style>
2.owl-carousel .owl-item img {
3 display: block;
4 width: 100%;
5 margin-top: 15px;
6}
7
8 .cpwdOurUnitsInner{
9 min-height:65vh;
10 }
11 .cpwdOurUnitsSec {
12
13 min-height:65vh;
14
15}
16 .owl-stage{
17 margin-top:3rem;
18 }
19</style>
20
21<section class="w-100 clearfix cpwdOurUnitsSec" id="cpwdOurUnitsSec">
22<div class="cpwdHeadingCommon" style="margin-left: 119px;margin-top:-51px;">
23
24</div>
25 <div class="cpwdOurUnitsInner">
26 <div class="container-fluid container-space custom-container-xxl">
27 <div class="cpwdOurUnitsCarousel">
28
29 <div class="owl-carousel owl-theme ourUnitsOwlCarousel">
30
31 <#list entries as entry>
32
33 <#assign entry = entry/>
34 <#assign assetRenderer = entry.getAssetRenderer()/>
35 <#assign className = assetRenderer.getClassName()/>
36 <#assign entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))/>
37 <#assign article= assetRenderer.getArticle().getContent()/>
38 <#assign article1= assetRenderer.getAssetObject().getContent()/>
39 <#assign viewURL= assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry)/>
40 <#assign fields = entry.getAssetRenderer().getDDMFormValuesReader().getDDMFormValues().getDDMFormFieldValues()/>
41 <#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent()) />
42 <#assign title = fields[0].getValue().getString(locale) />
43 <#if fields[1].getValue().getString(locale)?has_content>
44 <#assign imageJSON = fields[1].getValue().getString(locale) />
45 <#assign imageUrl = jsonFactoryUtil.createJSONObject(imageJSON).getString("url") />
46 </#if>
47
48 <#assign url='' />
49 <#if fields[3].getValue().getString(locale)?has_content>
50 <#assign url = fields[3].getValue().getString(locale) />
51
52 <#else />
53 <#assign docValJSON2 = fields[2].getValue().getString(locale) />
54 <#assign layoutId = jsonFactoryUtil.createJSONObject(docValJSON2).getString("layoutId")/>
55 <#assign layoutLocalService = staticUtil["com.liferay.portal.kernel.service.LayoutLocalServiceUtil"]/>
56 <#assign linkPrivate = false />
57 <#assign linkPageId = layoutId?number>
58 <#assign portletGroupId = themeDisplay.getScopeGroupId() />
59 <#assign pageLayout = layoutLocalService.getLayout(portletGroupId, linkPrivate, linkPageId)/>
60 <#assign portalUtil = staticUtil["com.liferay.portal.kernel.util.PortalUtil"]/>
61 <#assign url = portalUtil.getLayoutFriendlyURL(pageLayout, themeDisplay)/>
62
63 </#if>
64
65 <div class="item">
66
67 <#if entry.getAssetRenderer().hasEditPermission(themeDisplay.getPermissionChecker())>
68 <#assign redirectURL = renderResponse.createRenderURL() />
69
70 ${redirectURL.setParameter("struts_action", "/asset_publisher/add_asset_redirect")}
71 ${redirectURL.setWindowState("pop_up")}
72
73 <#assign editPortletURL = entry.getAssetRenderer().getURLEdit(renderRequest, renderResponse)!"" />
74
75 <#if validator.isNotNull(editPortletURL)>
76 <#assign title1 = languageUtil.format(locale, "edit-x", entry.getTitle(locale)) />
77 <a class="icon-right-tiles" href="${editPortletURL}"><i class="fas fa-edit"></i></a>
78 </#if>
79 </#if>
80 <div class="projectBox">
81 <a href="${url}">
82 <div class="projectBoxInner">
83 <div class="projectImg">
84 <img src="${imageUrl}" alt="img" height="200px" width="200px" style="border-radius:20px;" >
85 </div>
86 <div class="projectTxt">
87 <h4 style="color: blanchedalmond;">${title}</h4>
88 <!-- <span style="color:blanchedalmond;"><@liferay.language key="read_more" /></span> -->
89 </div>
90 </div>
91 </a>
92 </div>
93 </div>
94
95 </#list>
96
97
98 </div>
99 </div>
100 <div class="owlControlGroup w-100 d-flex align-items-center justify-content-center">
101 <div class="owlNavBtn">
102 <div class="btn-wrap owl-nav">
103 <button class="prev-btn owl-prev"><span>‹</span></button>
104 <div id="custom-owl-dots3" class="custom-owl-dots owl-dots"></div>
105 <button class="next-btn owl-next"><span>›</span></button>
106 </div>
107 </div>
108 </div>
109 </div>
110 </div>
111 </section>
112
113 <script>
114 $(document).ready(function() {
115 // Function to highlight active link based on scroll position
116 function highlightActiveLink() {
117 const scrollPosition = $(window).scrollTop();
118
119 $('section').each(function() {
120 const sectionTop = $(this).offset().top - 50; // Adjust offset if needed
121 const sectionBottom = sectionTop + $(this).outerHeight();
122
123 if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
124 const targetId = '#' + $(this).attr('id');
125 $('.scrollNav a').removeClass('active');
126 $('.scrollNav a[href="' + targetId + '"]').addClass('active');
127 }
128 });
129 }
130
131 // Function for smooth scrolling on link click
132 $('.scrollNav a').on('click', function(e) {
133 e.preventDefault();
134 const targetId = $(this).attr('href');
135 const $targetSection = $(targetId);
136
137 if ($targetSection.length) {
138 $('html, body').animate({
139 scrollTop: $targetSection.offset().top
140 }, 100, 'swing', function() {
141 highlightActiveLink(); // Highlight active link after scrolling
142 });
143 }
144 });
145
146 // Highlight active link on initial page load
147 highlightActiveLink();
148
149 // Highlight active link on scroll
150 $(window).on('scroll', function() {
151 highlightActiveLink();
152 });
153 });
154 </script>
155
156 <script>
157
158 // Get all video containers
159 var videoContainers = document.querySelectorAll('.video-container');
160
161 // Iterate through each video container
162 videoContainers.forEach(function (container) {
163 // Get video and button inside each container
164 var video = container.querySelector('.video-item');
165 var btn = container.querySelector('.video-btn');
166
167 // Function to play/pause video and change button text
168 function myFunction() {
169 if (video.paused) {
170 video.play();
171 btn.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
172 } else {
173 video.pause();
174 btn.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
175 }
176 }
177
178 // Attach the myFunction to the button's click event
179 btn.addEventListener('click', myFunction);
180 });
181
182
183
184
185
186
187
188
189 </script>
190
191 <script>
192 // Parallax background
193 $('.jarallax').jarallax({
194 speed: 0.5,
195 })
196
197
198
199
200 $(".youtube-link").grtyoutube({
201 autoPlay: true,
202 theme: "dark",
203 });
204 $(".ourUnitsOwlCarousel").owlCarousel({
205 loop: false,
206 margin: 20,
207 dots: true,
208 // autoplay: true,
209 autoplayTimeout: 5000,
210 smartSpeed: 1000,
211 nav: true,
212 autoplayHoverPause: true,
213 dotsContainer: '#custom-owl-dots3',
214 responsive: {
215 0: {
216 items: 1,
217 dots: false,
218 },
219 600: {
220 items: 3,
221 dots: false,
222 },
223 768: {
224 items: 3,
225 },
226 1200: {
227 items: 5,
228 },
229 },
230 });
231
232 $(document).ready(function ($) {
233 var owl = $(".ourUnitsOwlCarousel");
234 owl.owlCarousel();
235 $(".next-btn").click(function () {
236 owl.trigger("next.owl.carousel");
237 });
238 $(".prev-btn").click(function () {
239 owl.trigger("prev.owl.carousel");
240 });
241 $(".prev-btn").addClass("disabled");
242 $(owl).on("translated.owl.carousel", function (event) {
243 if ($(".owl-prev").hasClass("disabled")) {
244 $(".prev-btn").addClass("disabled");
245 } else {
246 $(".prev-btn").removeClass("disabled");
247 }
248 if ($(".owl-next").hasClass("disabled")) {
249 $(".next-btn").addClass("disabled");
250 } else {
251 $(".next-btn").removeClass("disabled");
252 }
253 });
254 });
255 </script>
256 <script>
257 const element = document.querySelector(".cpwdTimeline");
258 let isDragging = false;
259 let previousX;
260 let autoplayInterval; // Variable to store autoplay interval
261
262 function handleMove(event) {
263 if (isDragging) {
264 const clientX = event.clientX || event.touches[0].clientX;
265 const deltaX = clientX - previousX;
266 element.scrollLeft -= deltaX;
267 previousX = clientX;
268 }
269 }
270
271 element.addEventListener('mousedown', (event) => {
272 isDragging = true;
273 previousX = event.clientX;
274 });
275
276 element.addEventListener('touchstart', (event) => {
277 isDragging = true;
278 previousX = event.touches[0].clientX;
279 });
280
281 element.addEventListener('mousemove', handleMove);
282 element.addEventListener('touchmove', handleMove);
283
284 window.addEventListener('mouseup', () => {
285 isDragging = false;
286 });
287
288 element.addEventListener('selectstart', () => {
289 const selection = window.getSelection();
290 if (selection.toString().length > 0 && selection.focusNode.parentElement === element) {
291 element.scrollLeft = 0;
292 }
293 });
294
295 function startAutoplay() {
296 autoplayInterval = setInterval(() => {
297 // Change the scrollLeft value here for smooth autoplay
298 element.scrollLeft += 1; // Adjust this value for the desired scrolling speed
299 }, 20); // Change the interval for smoother/faster scrolling
300 }
301
302 function stopAutoplay() {
303 clearInterval(autoplayInterval);
304 }
305
306 element.addEventListener('mouseenter', stopAutoplay); // Pause autoplay on hover
307 element.addEventListener('mouseleave', startAutoplay); // Resume autoplay on mouse leave
308
309 // Initial handling of window size on load
310 function handleResize() {
311 isDragging = false;
312 }
313
314 window.addEventListener('resize', handleResize);
315 handleResize();
316
317 $('.counting').each(function () {
318 var $this = $(this),
319 countTo = $this.attr('data-count');
320
321 $({ countNum: $this.text() }).animate({
322 countNum: countTo
323 }, {
324 duration: 3000,
325 easing: 'linear',
326 step: function () {
327 $this.text(Math.floor(this.countNum));
328 },
329 complete: function () {
330 $this.text(this.countNum);
331 }
332 });
333 });
334
335 // Start autoplay initially
336 startAutoplay();
337
338
339
340 </script>
341 <script>
342 // var $sidebar = $('#sidebar-nav');
343 // var $content = $('#content');
344 // var sidebarTop = $sidebar.position().top;
345
346 // $(window).scroll(function () {
347 // var windowScrollTop = $(window).scrollTop();
348 // var blogHeight = $content.outerHeight();
349
350 // if (windowScrollTop >= sidebarTop) {
351 // $sidebar.toggleClass('sticky', windowScrollTop < blogHeight);
352 // } else {
353 // $sidebar.removeClass('sticky');
354 // }
355 // });
356
357
358
359 </script>
360
361
362
363
364
365
366
367
368
369
370<style>
371
372a:hover {
373 color:#fff;
374}
375
376.tiles{
377width: 100%;
378height:80px;
379display: flex;
380flex-direction: row;
381flex-wrap: wrap;
382justify-content: center;
383align-items: center;
384color:#000;
385transition: .3s ease-in-out;
386overflow:hidden;
387}
388.tiles:hover {
389 color: white;
390 transform: scale(1.08);
391}
392
393
394.tiles .tiles-icon{
395width: 50px;
396height:50px;
397
398}
399.imgrotate {
400 overflow: hidden;
401 transition-duration: 0.8s;
402 transition-property: transform;
403}
404.imgrotate:hover {
405 transform: rotate(360deg);
406 -webkit-transform: rotate(360deg);
407}
408.profile-card-1 {
409 font-family: 'Open Sans', Arial, sans-serif;
410 position: relative;
411 float: left;
412 overflow: hidden;
413 width: 100%;
414 color: #ffffff;
415 text-align: center;
416 height:368px;
417 border:none;
418}
419.profile-card-1 .background {
420 width:100%;
421 vertical-align: top;
422 opacity: .9;
423 -webkit-filter: blur(5px);
424 filter: blur(5px);
425 -webkit-transform: scale(1.8);
426 transform: scale(2.8);
427}
428.profile-card-1 .card-content {
429 width: 100%;
430 padding: 15px 25px;
431 position: absolute;
432 left: 0;
433 top: 50%;
434 text-shadow:1px 1px #000;
435 font-size:10px;
436
437}
438.profile-card-1 .profile {
439 border-radius: 50%;
440 position: absolute;
441 bottom: 50%;
442 left: 50%;
443 max-width: 100px;
444 opacity: 1;
445 box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
446 border: 2px solid rgba(255, 255, 255, 1);
447 -webkit-transform: translate(-50%, 0%);
448 transform: translate(-50%, 0%);
449 height:100px;
450 width:100px;
451}
452.profile-card-1 h3 {
453 margin: 0 0 5px;
454 font-weight: 600;
455 font-size:18px;
456 color:#fff;
457}
458.profile-card-1 h2 small {
459 display: block;
460 font-size: 15px;
461 margin-top:10px;
462}
463.profile-card-1 i {
464 display: inline-block;
465 font-size: 16px;
466 color: #ffffff;
467 text-align: center;
468 border: 1px solid #fff;
469 width: 30px;
470 height: 30px;
471 line-height: 30px;
472 border-radius: 50%;
473 margin:0 5px;
474}
475.profile-card-1 .icon-block{
476 float:left;
477 width:100%;
478 margin-top:15px;
479}
480.profile-card-1 .icon-block a{
481 text-decoration:none;
482}
483.profile-card-1 i:hover {
484 background-color:#fff;
485 color:#2E3434;
486 text-decoration:none;
487}
488 .icon-right-tiles{
489 position: absolute;
490 top:7px;
491 left:25px;
492 z-index:10;
493}
494
495</style>
496
497<div class= "container-space" style="margin-top:24px;display:none">
498<div class= "row">
499
500
501<#list entries as entry>
502 <#assign entry = entry />
503 <#assign assetRenderer = entry.getAssetRenderer()/>
504 <#assign className = assetRenderer.getClassName()/>
505
506
507 <#assign entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))/>
508 <#assign viewURL= assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry)/>
509 <#assign article= assetRenderer.getArticle().getContent() />
510 <#assign article1= assetRenderer.getAssetObject().getContent() />
511
512 <#assign fields = entry.getAssetRenderer().getDDMFormValuesReader().getDDMFormValues().getDDMFormFieldValues()/>
513
514 <#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent()) />
515 <#assign docValJSON = fields[1].getValue().getString(locale) />
516 <#assign docValJSON2 = fields[2].getValue().getString(locale) />
517 <#assign linkUrl = jsonFactoryUtil.createJSONObject(docValJSON2).getString("title") />
518 <#assign imageUrl = jsonFactoryUtil.createJSONObject(docValJSON).getString("url") />
519 <#if linkUrl == ''>
520 <#assign linkUrl = fields[3].getValue().getString(locale) />
521 </#if>
522
523 <div class="col-md-3">
524 <#if entry.getAssetRenderer().hasEditPermission(themeDisplay.getPermissionChecker())>
525 <#assign redirectURL = renderResponse.createRenderURL() />
526
527 ${redirectURL.setParameter("struts_action", "/asset_publisher/add_asset_redirect")}
528 ${redirectURL.setWindowState("pop_up")}
529
530 <#assign editPortletURL = entry.getAssetRenderer().getURLEdit(renderRequest, renderResponse)!"" />
531
532 <#if validator.isNotNull(editPortletURL)>
533 <#assign title = languageUtil.format(locale, "edit-x", entry.getTitle(locale)) />
534 <a class="icon-right-tiles" href="${editPortletURL}"><i class="fas fa-edit"></i></a>
535 </#if>
536 </#if>
537 <a data-senna-off="true" id="anchorURL" href="${linkUrl}">
538 <div class="card profile-card-1">
539 <img src="/documents/d/cpwd/tiles-bg" alt="profile-sample1" class="background"/>
540
541
542 <img src="${imageUrl}" alt="profile-image" class="profile"/>
543 <div class="card-content">
544 <h3>${fields[0].getValue().getString(locale)}</h3>
545 </div>
546 </div>
547 </a>
548 </div>
549
550 </#list>
551
552 </div>
553</div>