1<#assign Project_related_to =""/> 

2<#assign Project_related_to ="Project related to"/> 

3				<#if locale?contains("hi")> 

4				<#assign Project_related_to ="प्रोजेक्ट से सम्बंधित"/> 

5			</#if> 

6 

7<#assign Technology =""/> 

8<#assign Technology ="Technology"/> 

9				<#if locale?contains("hi")> 

10				<#assign Technology ="तकनीकी"/> 

11			</#if> 

12 

13<section class="w-100 clearfix cpwdOurUnitsSec" id="cpwdOurUnitsSec"> 

14         <div class="cpwdOurUnitsInner"> 

15            <div class="container-fluid container-space custom-container-xxl"> 

16               <div class="cpwdOurUnitsCarousel"> 

17								 <#assign param1 = request.getParameter("param")/>  

18                 	 <div class="cpwdHeadingCommon"> 

19                     <h2> ${Project_related_to} ${param1} ${Technology}</h2> 

20                  </div> 

21                  <div class="owl-carousel owl-theme ourUnitsOwlCarousel"> 

22										 

23 

24 

25     <#if entries?has_content> 

26   <#list entries as entry> 

27	 <#assign assetRenderer = entry.getAssetRenderer()/> 

28	 <#assign className = assetRenderer.getClassName()/> 

29	 <#assign entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale))/> 

30	 <#assign viewURL= assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry,true)/>		  								 

31	 <#assign viewURL = assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewURL)/> 

32	 <#assign fields = entry.getAssetRenderer().getDDMFormValuesReader().getDDMFormValues().getDDMFormFieldValues()/> 

33   <#if fields[1].getValue().getString(locale)== param1>		 

34			 

35			 

36<#assign docValJSON = fields[2].getValue().getString(locale) /> 

37<#assign imageUrl = jsonFactoryUtil.createJSONObject(docValJSON).getString("url") /> 

38<#if imageUrl?has_content> 

39 

40<#else> 

41<#assign imageUrl = "/documents/676924/679930/Tech080820181709230.jpg/abb94334-77e9-4623-a36f-f6abf59e52f8?t=1669112725720"/> 

42</#if> 

43 

44					 

45                <div class="item"> 

46									<#if entry.getAssetRenderer().hasEditPermission(themeDisplay.getPermissionChecker())> 

47        <#assign redirectURL = renderResponse.createRenderURL() /> 

48 

49        ${redirectURL.setParameter("struts_action", "/asset_publisher/add_asset_redirect")} 

50        ${redirectURL.setWindowState("pop_up")} 

51 

52        <#assign editPortletURL = entry.getAssetRenderer().getURLEdit(renderRequest, renderResponse)!"" /> 

53 

54        <#if validator.isNotNull(editPortletURL)> 

55            <#assign title = languageUtil.format(locale, "edit-x", entry.getTitle(locale)) /> 

56				    <a class="content-edit-icon-profile" href="${editPortletURL}"><i class="fas fa-edit"></i></a> 

57        </#if> 

58    </#if> 

59									 

60									 <div class="projectBox"> 

61                           <a href="${viewURL}"> 

62                              <div class="projectBoxInner"> 

63                                 <div class="projectImg"> 

64                                    <img style= "border-radius:10px; height:300px;" src="${imageUrl}" alt="img" > 

65                                 </div> 

66                                 <div class="projectTxt"> 

67                                    <h4>${fields[0].getValue().getString(locale)}</h4> 

68                                    <span><@liferay.language key="read_more" /></span> 

69                                 </div> 

70                              </div> 

71													</a> 

72                        </div> 

73                     </div> 

74	</#if> 

75											 

76											</#list> 

77										</#if> 

78										 

79											</div> 

80											</div> 

81							<div class="owlControlGroup w-100 d-flex align-items-center justify-content-center"> 

82                     <div class="owlNavBtn"> 

83                        <div class="btn-wrap owl-nav"> 

84                           <button class="prev-btn owl-prev"><span>‹</span></button> 

85                           <div id="custom-owl-dots3" class="custom-owl-dots owl-dots"></div> 

86                           <button class="next-btn owl-next"><span>›</span></button> 

87                        </div> 

88                     </div> 

89                  </div> 

90								  

91    </section> 

92 

93 <script> 

94        $(document).ready(function() { 

95    // Function to highlight active link based on scroll position 

96    function highlightActiveLink() { 

97      const scrollPosition = $(window).scrollTop(); 

98 

99      $('section').each(function() { 

100        const sectionTop = $(this).offset().top - 50; // Adjust offset if needed 

101        const sectionBottom = sectionTop + $(this).outerHeight(); 

102 

103        if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) { 

104          const targetId = '#' + $(this).attr('id'); 

105          $('.scrollNav a').removeClass('active'); 

106          $('.scrollNav a[href="' + targetId + '"]').addClass('active'); 

107        } 

108      }); 

109    } 

110 

111    // Function for smooth scrolling on link click 

112    $('.scrollNav a').on('click', function(e) { 

113      e.preventDefault(); 

114      const targetId = $(this).attr('href'); 

115      const $targetSection = $(targetId); 

116 

117      if ($targetSection.length) { 

118        $('html, body').animate({ 

119          scrollTop: $targetSection.offset().top 

120        }, 100, 'swing', function() { 

121          highlightActiveLink(); // Highlight active link after scrolling 

122        }); 

123      } 

124    }); 

125 

126    // Highlight active link on initial page load 

127    highlightActiveLink(); 

128 

129    // Highlight active link on scroll 

130    $(window).on('scroll', function() { 

131      highlightActiveLink(); 

132    }); 

133  }); 

134      </script> 

135      

136      <script> 

137          

138         // Get all video containers 

139         var videoContainers = document.querySelectorAll('.video-container'); 

140          

141         // Iterate through each video container 

142         videoContainers.forEach(function (container) { 

143             // Get video and button inside each container 

144             var video = container.querySelector('.video-item'); 

145             var btn = container.querySelector('.video-btn'); 

146          

147             // Function to play/pause video and change button text 

148             function myFunction() { 

149                 if (video.paused) { 

150                     video.play(); 

151                     btn.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>'; 

152                 } else { 

153                     video.pause(); 

154                     btn.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>'; 

155                 } 

156             } 

157          

158             // Attach the myFunction to the button's click event 

159             btn.addEventListener('click', myFunction); 

160         }); 

161          

162          

163          

164          

165          

166          

167          

168          

169      </script> 

170 

171      <script> 

172         // Parallax background 

173         $('.jarallax').jarallax({ 

174             speed: 0.5, 

175         }) 

176          

177          

178          

179          

180         $(".youtube-link").grtyoutube({ 

181             autoPlay: true, 

182             theme: "dark", 

183         }); 

184         $(".ourUnitsOwlCarousel").owlCarousel({ 

185             loop: false, 

186             margin: 20, 

187             dots: true, 

188             // autoplay: true, 

189             autoplayTimeout: 5000, 

190             smartSpeed: 1000, 

191             nav: true, 

192             autoplayHoverPause: true, 

193             dotsContainer: '#custom-owl-dots3', 

194             responsive: { 

195                 0: { 

196                     items: 1, 

197                     dots: false, 

198                 }, 

199                 600: { 

200                     items: 3, 

201                     dots: false, 

202                 }, 

203                 768: { 

204                     items: 3, 

205                 }, 

206                 1200: { 

207                     items: 5, 

208                 }, 

209             }, 

210         }); 

211          

212         $(document).ready(function ($) { 

213             var owl = $(".ourUnitsOwlCarousel"); 

214             owl.owlCarousel(); 

215             $(".next-btn").click(function () { 

216                 owl.trigger("next.owl.carousel"); 

217             }); 

218             $(".prev-btn").click(function () { 

219                 owl.trigger("prev.owl.carousel"); 

220             }); 

221             $(".prev-btn").addClass("disabled"); 

222             $(owl).on("translated.owl.carousel", function (event) { 

223                 if ($(".owl-prev").hasClass("disabled")) { 

224                     $(".prev-btn").addClass("disabled"); 

225                 } else { 

226                     $(".prev-btn").removeClass("disabled"); 

227                 } 

228                 if ($(".owl-next").hasClass("disabled")) { 

229                     $(".next-btn").addClass("disabled"); 

230                 } else { 

231                     $(".next-btn").removeClass("disabled"); 

232                 } 

233             }); 

234         }); 

235      </script> 

236      <script> 

237         const element = document.querySelector(".cpwdTimeline"); 

238         let isDragging = false; 

239         let previousX; 

240         let autoplayInterval; // Variable to store autoplay interval 

241          

242         function handleMove(event) { 

243             if (isDragging) { 

244                 const clientX = event.clientX || event.touches[0].clientX; 

245                 const deltaX = clientX - previousX; 

246                 element.scrollLeft -= deltaX; 

247                 previousX = clientX; 

248             } 

249         } 

250          

251         element.addEventListener('mousedown', (event) => { 

252             isDragging = true; 

253             previousX = event.clientX; 

254         }); 

255          

256         element.addEventListener('touchstart', (event) => { 

257             isDragging = true; 

258             previousX = event.touches[0].clientX; 

259         }); 

260          

261         element.addEventListener('mousemove', handleMove); 

262         element.addEventListener('touchmove', handleMove); 

263          

264         window.addEventListener('mouseup', () => { 

265             isDragging = false; 

266         }); 

267          

268         element.addEventListener('selectstart', () => { 

269             const selection = window.getSelection(); 

270             if (selection.toString().length > 0 && selection.focusNode.parentElement === element) { 

271                 element.scrollLeft = 0; 

272             } 

273         }); 

274          

275         function startAutoplay() { 

276             autoplayInterval = setInterval(() => { 

277                 // Change the scrollLeft value here for smooth autoplay 

278                 element.scrollLeft += 1; // Adjust this value for the desired scrolling speed 

279             }, 20); // Change the interval for smoother/faster scrolling 

280         } 

281          

282         function stopAutoplay() { 

283             clearInterval(autoplayInterval); 

284         } 

285          

286         element.addEventListener('mouseenter', stopAutoplay); // Pause autoplay on hover 

287         element.addEventListener('mouseleave', startAutoplay); // Resume autoplay on mouse leave 

288          

289         // Initial handling of window size on load 

290         function handleResize() { 

291             isDragging = false; 

292         } 

293          

294         window.addEventListener('resize', handleResize); 

295         handleResize(); 

296          

297         $('.counting').each(function () { 

298             var $this = $(this), 

299                 countTo = $this.attr('data-count'); 

300          

301             $({ countNum: $this.text() }).animate({ 

302                 countNum: countTo 

303             }, { 

304                 duration: 3000, 

305                 easing: 'linear', 

306                 step: function () { 

307                     $this.text(Math.floor(this.countNum)); 

308                 }, 

309                 complete: function () { 

310                     $this.text(this.countNum); 

311                 } 

312             }); 

313         }); 

314          

315         // Start autoplay initially 

316         startAutoplay(); 

317          

318          

319          

320      </script> 

321      <script> 

322        //  var $sidebar = $('#sidebar-nav'); 

323        //  var $content = $('#content'); 

324        //  var sidebarTop = $sidebar.position().top; 

325          

326        //  $(window).scroll(function () { 

327        //      var windowScrollTop = $(window).scrollTop(); 

328        //      var blogHeight = $content.outerHeight(); 

329          

330        //      if (windowScrollTop >= sidebarTop) { 

331        //          $sidebar.toggleClass('sticky', windowScrollTop < blogHeight); 

332        //      } else { 

333        //          $sidebar.removeClass('sticky'); 

334        //      } 

335        //  }); 

336          

337          

338          

339      </script>