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 Material =""/> 

8<#assign Material ="Material"/> 

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

10				<#assign Material ="सामग्री"/> 

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("param3")/> 

18                 	 <div class="cpwdHeadingCommon"> 

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

20                  </div> 

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

22										 

23 

24     <#if entries?has_content> 

25   <#list entries as entry> 

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

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

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

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

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

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

32    

33		  

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

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

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

37  <#if imageUrl?has_content> 

38<#assign Post =""/> 

39<#assign Post ="Post on"/> 

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

41				<#assign Post ="भेजा गया दिनांक"/> 

42			</#if> 

43			 

44			 

45			<#assign Viewmore =""/> 

46      <#assign Viewmore ="View More"/> 

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

48				<#assign Viewmore ="अधिक देखें"/> 

49			</#if> 

50 

51 

52<#else> 

53<#assign imageUrl = "/documents/676924/681064/m+%2811%29.jpg/a0c0f980-bfa5-d8df-22f4-1467ba79e9e4?t=1669215621911"/> 

54</#if> 

55 

56					 

57                <div class="item"> 

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

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

60 

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

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

63 

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

65 

66        <#if validator.isNotNull(editPortletURL)> 

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

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

69        </#if> 

70    </#if> 

71			 

72													 

73									 <div class="projectBox"> 

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

75                              <div class="projectBoxInner"> 

76                                 <div class="projectImg"> 

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

78                                 </div> 

79                                 <div class="projectTxt"> 

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

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

82                                 </div> 

83                              </div> 

84													</a> 

85                        </div> 

86                     </div> 

87	</#if> 

88											 

89											</#list> 

90										</#if> 

91										 

92											</div> 

93											</div> 

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

95                     <div class="owlNavBtn"> 

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

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

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

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

100                        </div> 

101                     </div> 

102                  </div> 

103								  

104    </section> 

105									 

106									 

107						 

108 <script> 

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

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

111    function highlightActiveLink() { 

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

113 

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

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

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

117 

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

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

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

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

122        } 

123      }); 

124    } 

125 

126    // Function for smooth scrolling on link click 

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

128      e.preventDefault(); 

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

130      const $targetSection = $(targetId); 

131 

132      if ($targetSection.length) { 

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

134          scrollTop: $targetSection.offset().top 

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

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

137        }); 

138      } 

139    }); 

140 

141    // Highlight active link on initial page load 

142    highlightActiveLink(); 

143 

144    // Highlight active link on scroll 

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

146      highlightActiveLink(); 

147    }); 

148  }); 

149      </script> 

150      

151      <script> 

152          

153         // Get all video containers 

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

155          

156         // Iterate through each video container 

157         videoContainers.forEach(function (container) { 

158             // Get video and button inside each container 

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

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

161          

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

163             function myFunction() { 

164                 if (video.paused) { 

165                     video.play(); 

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

167                 } else { 

168                     video.pause(); 

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

170                 } 

171             } 

172          

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

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

175         }); 

176          

177          

178          

179          

180          

181          

182          

183          

184      </script> 

185 

186      <script> 

187         // Parallax background 

188         $('.jarallax').jarallax({ 

189             speed: 0.5, 

190         }) 

191          

192          

193          

194          

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

196             autoPlay: true, 

197             theme: "dark", 

198         }); 

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

200             loop: false, 

201             margin: 20, 

202             dots: true, 

203             // autoplay: true, 

204             autoplayTimeout: 5000, 

205             smartSpeed: 1000, 

206             nav: true, 

207             autoplayHoverPause: true, 

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

209             responsive: { 

210                 0: { 

211                     items: 1, 

212                     dots: false, 

213                 }, 

214                 600: { 

215                     items: 3, 

216                     dots: false, 

217                 }, 

218                 768: { 

219                     items: 3, 

220                 }, 

221                 1200: { 

222                     items: 5, 

223                 }, 

224             }, 

225         }); 

226          

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

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

229             owl.owlCarousel(); 

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

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

232             }); 

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

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

235             }); 

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

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

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

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

240                 } else { 

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

242                 } 

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

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

245                 } else { 

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

247                 } 

248             }); 

249         }); 

250      </script> 

251      <script> 

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

253         let isDragging = false; 

254         let previousX; 

255         let autoplayInterval; // Variable to store autoplay interval 

256          

257         function handleMove(event) { 

258             if (isDragging) { 

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

260                 const deltaX = clientX - previousX; 

261                 element.scrollLeft -= deltaX; 

262                 previousX = clientX; 

263             } 

264         } 

265          

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

267             isDragging = true; 

268             previousX = event.clientX; 

269         }); 

270          

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

272             isDragging = true; 

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

274         }); 

275          

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

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

278          

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

280             isDragging = false; 

281         }); 

282          

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

284             const selection = window.getSelection(); 

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

286                 element.scrollLeft = 0; 

287             } 

288         }); 

289          

290         function startAutoplay() { 

291             autoplayInterval = setInterval(() => { 

292                 // Change the scrollLeft value here for smooth autoplay 

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

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

295         } 

296          

297         function stopAutoplay() { 

298             clearInterval(autoplayInterval); 

299         } 

300          

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

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

303          

304         // Initial handling of window size on load 

305         function handleResize() { 

306             isDragging = false; 

307         } 

308          

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

310         handleResize(); 

311          

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

313             var $this = $(this), 

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

315          

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

317                 countNum: countTo 

318             }, { 

319                 duration: 3000, 

320                 easing: 'linear', 

321                 step: function () { 

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

323                 }, 

324                 complete: function () { 

325                     $this.text(this.countNum); 

326                 } 

327             }); 

328         }); 

329          

330         // Start autoplay initially 

331         startAutoplay(); 

332          

333          

334          

335      </script> 

336      <script> 

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

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

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

340          

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

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

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

344          

345        //      if (windowScrollTop >= sidebarTop) { 

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

347        //      } else { 

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

349        //      } 

350        //  }); 

351          

352          

353          

354      </script>