1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta content="width=device-width, initial-scale=1.0" name="viewport"> 7 8 <title>Tropicana Alam</title> 9 <meta content="Thriving by the Lakeside in the woods. Located in a serene heartland, Tropicana Alam embodies a balanced and sustainable lifestyle." name="description"> 10 <meta content="Tropicana, Tropicana Puncak Alam, Tropicana Avisa" name="keywords"> 11 12 <!-- Favicons --> 13 <link rel="apple-touch-icon" sizes="180x180" href="https://tropicanaalam.com.my/img/favicon/apple-touch-icon.png"> 14 <link rel="icon" type="image/png" sizes="32x32" href="https://tropicanaalam.com.my/img/favicon/favicon-32x32.png"> 15 <link rel="icon" type="image/png" sizes="16x16" href="https://tropicanaalam.com.my/img/favicon/favicon-16x16.png"> 16 <link rel="manifest" href="https://tropicanaalam.com.my/img/favicon/site.webmanifest"> 17 <link rel="mask-icon" href="https://tropicanaalam.com.my/img/favicon/safari-pinned-tab.svg" color="#5bbad5"> 18 <meta name="msapplication-TileColor" content="#da532c"> 19 <meta name="theme-color" content="#ffffff"> 20 21 <!-- Google Fonts --> 22 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet"> 23 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> 24 25 <!-- Vendor CSS Files --> 26 <link href="https://tropicanaalam.com.my/assets/vendor/aos/aos.css" rel="stylesheet"> 27
27<script src="https://tropicanaalam.com.my/assets/vendor/aos/aos.js"></script>
27 28 29 <link href="https://tropicanaalam.com.my/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> 30 <link href="https://tropicanaalam.com.my/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet"> 31 <link href="https://tropicanaalam.com.my/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet"> 32 <link href="https://tropicanaalam.com.my/assets/vendor/remixicon/remixicon.css" rel="stylesheet"> 33 <link href="https://tropicanaalam.com.my/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet"> 34 35 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> 36 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- Template Main CSS File --> 37 <link href="https://tropicanaalam.com.my/assets/css/style.css?v=1.28" rel="stylesheet"> 38 <link href="https://tropicanaalam.com.my/assets-1/css/_svg.css?v=1.0" rel="stylesheet"> 39 <link href="https://tropicanaalam.com.my/assets-new/css/hero.css?v=6.6" rel="stylesheet"> 40
40<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
40 41 42 43<!-- Facebook Pixel Code -->
44<script>
vendor: 434 bytes, lines 44-53
44 45 !function(f,b,e,v,n,t,s) 46 {if(f.fbq)return;n=f.fbq=function(){n.callMethod? 47 n.callMethod.apply(n,arguments):n.queue.push(arguments)}; 48 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; 49 n.queue=[];t=b.createElement(e);t.async=!0; 50 t.src=v;s=b.getElementsByTagName(e)[0]; 51 s.parentNode.insertBefore(t,s)}(window,document,'script', 52 'https://connect.facebook.net/en_US/fbevents.js'); 53 fbq('init', '
531097017407065773
vendor: 35 bytes, lines 53-54
53'); 54 fbq('track', 'PageView');
55</script>
55 56<noscript> 57 <img height="1" width="1" 58 src="https://www.facebook.com/tr?id=1097017407065773&ev=PageView 59 &noscript=1"/> 60</noscript> 61<!-- End Facebook Pixel Code --> 62
63<script> 64 document.addEventListener("DOMContentLoaded", function () { 65 const popupBanner = document.getElementById("popupBanner"); 66 const closePopupBtn = document.getElementById("closePopupBtn"); 67 68 // Close popup when clicking the close button 69 closePopupBtn.addEventListener("click", () => { 70 popupBanner.style.display = "none"; 71 }); 72 73 // Close popup when clicking outside the content 74 popupBanner.addEventListener("click", (event) => { 75 if (event.target === popupBanner) { 76 popupBanner.style.display = "none"; 77 } 78 }); 79 }); 80 81 document.addEventListener('DOMContentLoaded', function() { 82 // Get elements 83 //const closePopupBtn = document.getElementById('closePopupBtn'); 84 //const popupBanner = document.getElementById('popupBanner'); 85 86 // Get the current URL 87 //const currentURL = window.location.pathname; 88 89 // Only show the popup if on the home page 90 //if (currentURL === '/') { // Adjust for index.php if needed 91 // document.body.style.overflow = 'hidden'; // Disable scrolling 92 93 // Close the popup when the user clicks the 'X' button 94 // closePopupBtn.onclick = function() { 95 // popupBanner.style.display = 'none'; 96 // document.body.style.overflow = 'auto'; // Re-enable scrolling 97 // } 98 //} else { 99 // Hide the popup on all other pages 100 // popupBanner.style.display = 'none'; 101 //} 102 103 const phoneInput = document.getElementById('phonetxt'); 104 const submitButton = document.getElementById('formSubmitButton'); 105 106 phoneInput.addEventListener('blur', function () { 107 const phoneNumber = phoneInput.value; 108 109 if (validatePhoneNumber(phoneNumber)) { 110 phoneInput.classList.remove('error'); // Optionally remove an error class if applied 111 submitButton.disabled = false; 112 } else { 113 phoneInput.classList.add('error'); // Optionally add an error class for styling 114 submitButton.disabled = true; 115 } 116 }); 117 118 function validatePhoneNumber(phone) { 119 const phoneRegex = /^(\d{8}|\d{9}|\d{10})$/; 120 return phoneRegex.test(phone); 121 } 122 }); 123</script>
123 124 125<!-- Loading Screen Styles - Must be in head to prevent flash --> 126<style> 127/* Loading Screen Styles */ 128.page-loading { 129 position: fixed; 130 top: 0; 131 left: 0; 132 width: 100%; 133 height: 100%; 134 background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); 135 z-index: 99999; 136 display: flex; 137 justify-content: center; 138 align-items: center; 139 transition: opacity 0.5s ease-out; 140} 141 142.loading-content { 143 text-align: center; 144 animation: fadeInUp 1s ease-out; 145} 146 147.loading-logo { 148 margin-bottom: 30px; 149 animation: pulse 2s infinite ease-in-out; 150} 151 152.loading-logo-img { 153 width: 120px; 154 height: auto; 155 filter: drop-shadow(0 4px 8px rgba(88, 41, 108, 0.2)); 156} 157 158.loading-spinner { 159 margin: 20px 0; 160} 161 162.spinner { 163 width: 50px; 164 height: 50px; 165 border: 4px solid #f3f3f3; 166 border-top: 4px solid #0A4A40; 167 border-radius: 50%; 168 animation: spin 1s linear infinite; 169 margin: 0 auto; 170} 171 172.loading-text { 173 font-size: 18px; 174 font-weight: 500; 175 margin-top: 20px; 176 animation: pulse 1.5s infinite ease-in-out; 177} 178 179/* Animations */ 180@keyframes spin { 181 0% { transform: rotate(0deg); } 182 100% { transform: rotate(360deg); } 183} 184 185@keyframes pulse { 186 0%, 100% { opacity: 1; transform: scale(1); } 187 50% { opacity: 0.7; transform: scale(0.95); } 188} 189 190@keyframes fadeInUp { 191 from { 192 opacity: 0; 193 transform: translateY(30px); 194 } 195 to { 196 opacity: 1; 197 transform: translateY(0); 198 } 199} 200 201/* Hide page content while loading */ 202body.loading #header, 203body.loading #main, 204body.loading footer { 205 visibility: hidden; 206} 207 208body.loading .page-loading { 209 opacity: 1; 210} 211 212body.loaded .page-loading { 213 opacity: 0; 214 pointer-events: none; 215} 216</style> 217</head> 218 219<body class="loading"> 220 221<!-- Loading Screen --> 222<div id="page-loading" class="page-loading"> 223 <div class="loading-content"> 224 <div class="loading-spinner"> 225 <div class="spinner"></div> 226 </div> 227 <div class="loading-text" style="color: #0A4A40;"> 228 Loading... 229 </div> 230 </div> 231</div> 232 233<!-- ======= Header ======= --> 234<header id="header" class="fixed-top p-0"> 235 <div class="corner-menu-wrap"> 236 <button class="corner-menu-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#cornerMenu" aria-expanded="false" aria-label="Toggle navigation"> 237 <img src="https://tropicanaalam.com.my/assets-new/section-1/right-corner-menu-collapse-icon.png" alt="Menu"> 238 </button> 239 240 <div class="collapse corner-menu-collapse" id="cornerMenu"> 241 <div class="corner-menu-panel"> 242 <ul class="corner-menu-list"> 243 <li class="corner-menu-item"> 244 <a class="corner-menu-link" href="https://tropicanaalam.com.my#concept"> 245 <img src="https://tropicanaalam.com.my/assets-new/section-1/concept-icon.png" alt="" class="corner-menu-concept-icon"> 246 CONCEPT 247 </a> 248 </li> 249 <li class="corner-menu-item"> 250 <a class="corner-menu-link" href="https://tropicanaalam.com.my#master-development">MASTER PLAN</a> 251 </li> 252 <li class="corner-menu-item"> 253 <a class="corner-menu-link" href="https://tropicanaalam.com.my#master-development">DEVELOPMENT</a> 254 </li> 255 <li class="corner-menu-label"><span>RESIDENTIAL</span></li> 256 <li class="corner-menu-sub"> 257 <a class="corner-menu-link" href="https://tropicanaalam.com.my/avisa-residences">AVISA RESIDENCES (PHASE 1)</a> 258 </li> 259 <li class="corner-menu-sub"> 260 <a class="corner-menu-link" href="https://tropicanaalam.com.my/avisa-residences2">AVISA RESIDENCES (PHASE 2)</a> 261 </li> 262 <li class="corner-menu-label"><span>COMMERCIAL</span></li> 263 <li class="corner-menu-sub"> 264 <a class="corner-menu-link" href="https://tropicanaalam.com.my#master-development">2-STOREY SHOP OFFICES</a> 265 </li> 266 <li class="corner-menu-sub"> 267 <a class="corner-menu-link" href="#">(COMING SOON)</a> 268 </li> 269 <li class="corner-menu-item"> 270 <a class="corner-menu-link" href="https://vr.properly.com.my/tropicanaalam/">VIRTUAL TOUR</a> 271 </li> 272 <li class="corner-menu-item"> 273 <a class="corner-menu-link" href="https://tropicanaalam.com.my#location">LOCATION</a> 274 </li> 275 <li class="corner-menu-item"> 276 <a class="corner-menu-link" href="https://tropicanaalam.com.my#team-behind">TEAM</a> 277 </li> 278 <li class="corner-menu-label"><span>ARCHITECT & LANDSCAPE</span></li> 279 <li class="corner-menu-item"> 280 <a class="corner-menu-link" href="https://tropicanaalam.com.my#footer">DEVELOPER</a> 281 </li> 282 <li class="corner-menu-label"><span>ABOUT US</span></li> 283 <li class="corner-menu-sub"> 284 <a class="corner-menu-link" href="https://tropicanaalam.com.my#awards">AWARDS</a> 285 </li> 286 <li class="corner-menu-item"> 287 <a class="corner-menu-link" href="https://tropicanaalam.com.my/avisa-residences2#register">REGISTRATION</a> 288 </li> 289 </ul> 290 </div> 291 </div> 292 293 <!-- Floating Icon Bar --> 294 <div class="floating-menu-bar" id="floatingMenuBar"> 295 <button class="floating-menu-bar-toggle" id="floatingMenuToggle" aria-label="Toggle menu">
296 <span class="toggle-icon">â</span> 297 </button> 298 <a href="https://tropicanaalam.com.my/avisa-residences2#register" class="floating-menu-bar-item"> 299 <img src="https://tropicanaalam.com.my/assets-new/section-1/menu-bar-1.png" alt="Register Now"> 300 </a> 301 <a href="https://wa.me/60123677468" class="floating-menu-bar-item" target="_blank" rel="noopener noreferrer"> 302 <img src="https://tropicanaalam.com.my/assets-new/section-1/menu-bar-2.png" alt="WhatsApp"> 303 </a> 304 <a href="tel:1700817878" class="floating-menu-bar-item"> 305 <img src="https://tropicanaalam.com.my/assets-new/section-1/menu-bar-3.png" alt="Call 1700 81 7878"> 306 </a> 307 <a href="https://ul.waze.com/ul?venue_id=66453536.664731972.36572822&overview=yes&utm_campaign=default&utm_source=waze_website&utm_medium=lm_share_location" class="floating-menu-bar-item" target="_blank" rel="noopener noreferrer"> 308 <img src="https://tropicanaalam.com.my/assets-new/section-1/menu-bar-4.png" alt="Waze"> 309 </a> 310 <a href="https://www.google.com/maps/place/Tropicana+Alam+Property+Gallery/@3.24092,101.4346727,792m/data=!3m2!1e3!4b1!4m6!3m5!1s0x31cc59ba7d5cb997:0xe249f05afd891d80!8m2!3d3.24092!4d101.4346727!16s%2Fg%2F11scs8zp95?hl=en-zA0QgJNWQ%3D%3D&entry=ttu&g_ep=EgoyMDI2MDYyOS4wIKXMDSoASAFQAw%3D%3D" class="floating-menu-bar-item" target="_blank" rel="noopener noreferrer"> 311 <img src="https://tropicanaalam.com.my/assets-new/section-1/menu-bar-5.png" alt="Google Maps"> 312 </a> 313 </div> 314 </div> 315</header> 316 317<!-- Scroll Indicator --> 318<div class="scroll-indicator"> 319 <img src="https://tropicanaalam.com.my/assets-new/section-1/mouse-scroll-icon.png" alt="Scroll down"> 320</div> 321 322<!-- Dynamic Popup Banner System --> 323<!-- Debug: Banner count = 2 --> 324 <!-- Custom Popup Slider --> 325 <div id="popupBannerModal" class="popup-banner"> 326 <div class="popup-content"> 327 <!-- Close Button --> 328 <span class="close" onclick="closePopupBanner()">×</span> 329 330 <!-- Custom Slider Container --> 331 <div id="popupSlider" class="popup-slider"> 332 <div class="slide active" data-slide="0"> 333 <a href="https://bit.ly/Axirawebsitepubanner" 334 target="_blank" 335 onclick="trackBannerClick(11)"> 336 <img src="https://tropicanaalam.com.my/banner/pop up/popup-banner-T0UEmpVW4T.jpeg" alt="Axira Open For Registration" class="w-100"> 337 </a> 338 </div> 339 <div class="slide " data-slide="1"> 340 <a href="https://signature.my/tropicanavisa" 341 target="_blank" 342 onclick="trackBannerClick(7)"> 343 <img src="https://tropicanaalam.com.my/banner/pop up/popup-banner-mDffnWn71h.jpg" alt="SIGNATURE X AVISA RESIDENCES" class="w-100"> 344 </a> 345 </div> 346 347 <!-- Navigation (only show if more than 1 banner) --> 348 <div class="slider-nav"> 349 <button class="nav-btn prev" onclick="prevSlide()"><</button> 350 <button class="nav-btn next" onclick="nextSlide()">></button> 351 </div> 352 353 <!-- Dots indicator --> 354 <div class="slider-dots"> 355 <span class="dot active" onclick="currentSlide(1)"></span> 356 <span class="dot " onclick="currentSlide(2)"></span> 357 </div> 358 </div> 359 </div> 360 </div> 361 362 <style> 363 .popup-banner { 364 display: none; 365 position: fixed; 366 z-index: 9999; 367 left: 0; 368 top: 0; 369 width: 100%; 370 height: 100%; 371 background-color: rgb(0,0,0); 372 background-color: rgba(0,0,0,0.4); 373 } 374 375 /* Prevent background scrolling when popup is active */ 376 body.popup-active { 377 overflow: hidden; 378 position: fixed; 379 width: 100%; 380 } 381 382 .popup-content { 383 margin: 15% auto; 384 padding: 0; 385 border: none; 386 width: 98%; 387 position: relative; 388 } 389 390 .close { 391 color: #aaa; 392 float: right; 393 font-size: 28px; 394 font-weight: bold; 395 position: absolute; 396 left: 98%; 397 top: 0%; 398 z-index: 10000; 399 background: rgba(0,0,0,0.5); 400 border-radius: 50%; 401 width: 35px; 402 height: 35px; 403 display: flex; 404 align-items: center; 405 justify-content: center; 406 color: white; 407 } 408 409 .close:hover, 410 .close:focus { 411 color: #fff; 412 text-decoration: none; 413 cursor: pointer; 414 background: rgba(0,0,0,0.8); 415 } 416 417 /* Custom Slider Styles */ 418 .popup-slider { 419 position: relative; 420 overflow: hidden; 421 } 422 423 .slide { 424 display: none; 425 animation-duration: 0.5s; 426 } 427 428 .slide.active { 429 display: block; 430 } 431 432 .slide.fade-in { 433 animation-name: fadeIn; 434 } 435 436 .slide.fade-out { 437 animation-name: fadeOut; 438 } 439 440 @keyframes fadeIn { 441 from { opacity: 0; } 442 to { opacity: 1; } 443 } 444 445 @keyframes fadeOut { 446 from { opacity: 1; } 447 to { opacity: 0; } 448 } 449 450 /* Navigation Buttons */ 451 .slider-nav { 452 position: absolute; 453 top: 50%; 454 transform: translateY(-50%); 455 width: 100%; 456 display: flex; 457 justify-content: space-between; 458 pointer-events: none; 459 } 460 461 .nav-btn { 462 background: rgba(0,0,0,0.5); 463 color: white; 464 border: none; 465 padding: 10px 15px; 466 cursor: pointer; 467 font-size: 18px; 468 border-radius: 5px; 469 pointer-events: all; 470 z-index: 1000; 471 } 472 473 .nav-btn:hover { 474 background: rgba(0,0,0,0.8); 475 } 476 477 /* Dots Indicator */ 478 .slider-dots { 479 text-align: center; 480 padding: 15px 0; 481 position: absolute; 482 bottom: -40px; 483 width: 100%; 484 } 485 486 .dot { 487 height: 15px; 488 width: 15px; 489 margin: 0 5px; 490 background-color: #bbb; 491 border-radius: 50%; 492 display: inline-block; 493 cursor: pointer; 494 transition: background-color 0.3s; 495 } 496 497 .dot.active, 498 .dot:hover { 499 background-color: #717171; 500 } 501 502 @media (max-width: 768px) { 503 .popup-content { 504 width: 95%; 505 margin: 10% auto; 506 } 507 508 .nav-btn { 509 padding: 8px 12px; 510 font-size: 16px; 511 } 512 513 .slider-dots { 514 bottom: -30px; 515 } 516 517 .dot { 518 height: 12px; 519 width: 12px; 520 } 521 } 522 </style> 523 524
524<script> 525 // Initialize popup banners - multiple approaches for reliability 526 let bannersInitialized = false; 527 528 // Method 1: After loading screen completes 529 window.addEventListener('pageContentLoaded', function() { 530 if (!bannersInitialized) { 531 console.log('Page content loaded event fired - initializing banners'); 532 initializeBanners(); 533 } 534 }); 535 536 // Method 2: Direct DOM ready with delay 537 document.addEventListener('DOMContentLoaded', function() { 538 setTimeout(function() { 539 if (!bannersInitialized) { 540 console.log('DOM ready fallback - initializing banners'); 541 initializeBanners(); 542 } 543 }, 3000); 544 }); 545 546 // Method 3: Window load fallback 547 window.addEventListener('load', function() { 548 setTimeout(function() { 549 if (!bannersInitialized) { 550 console.log('Window load fallback - initializing banners'); 551 initializeBanners(); 552 } 553 }, 1000); 554 }); 555 556 // Custom Slider Variables 557 let currentSlideIndex = 0; 558 let totalSlides = 2; 559 let autoSlideInterval; 560 561 function initializeBanners() { 562 if (bannersInitialized) return; 563 bannersInitialized = true; 564 565 console.log('Starting popup banner slider initialization...'); 566 567 // Only show banner on main/home page 568 const currentPath = window.location.pathname; 569 const isHomePage = currentPath === '/' || currentPath === '' || currentPath === '/index' || currentPath === '/home'; 570 571 if (isHomePage) { 572 console.log('Showing popup banner slider - on home page'); 573 showPopupBanner(); 574 } else { 575 console.log('Popup banner slider skipped - not on home page, current path:', currentPath); 576 } 577 } 578 579 function showPopupBanner() { 580 const popupModal = document.getElementById('popupBannerModal'); 581 if (popupModal) { 582 // Disable background scrolling 583 const scrollY = window.scrollY; 584 document.body.style.position = 'fixed'; 585 document.body.style.top = `-${scrollY}px`; 586 document.body.classList.add('popup-active'); 587 588 // Show the popup modal 589 popupModal.style.display = 'flex'; 590 591 console.log('Popup banner slider displayed'); 592 } 593 } 594 595 function closePopupBanner() { 596 const popupModal = document.getElementById('popupBannerModal'); 597 if (popupModal) { 598 // Hide the popup modal 599 popupModal.style.display = 'none'; 600 601 // Re-enable background scrolling 602 const scrollY = document.body.style.top; 603 document.body.style.position = ''; 604 document.body.style.top = ''; 605 document.body.classList.remove('popup-active'); 606 window.scrollTo(0, parseInt(scrollY || '0') * -1); 607 608 console.log('Popup banner slider closed'); 609 } 610 } 611 612 function nextSlide() { 613 showSlide(currentSlideIndex + 1); 614 } 615 616 function prevSlide() { 617 showSlide(currentSlideIndex - 1); 618 } 619 620 function currentSlide(slideNum) { 621 showSlide(slideNum - 1); 622 } 623 624 function showSlide(slideIndex) { 625 const slides = document.querySelectorAll('.slide'); 626 const dots = document.querySelectorAll('.dot'); 627 628 if (slideIndex >= totalSlides) { 629 currentSlideIndex = 0; 630 } else if (slideIndex < 0) { 631 currentSlideIndex = totalSlides - 1; 632 } else { 633 currentSlideIndex = slideIndex; 634 } 635 636 // Hide all slides
637 slides.forEach(slide => { 638 slide.classList.remove('active', 'fade-in'); 639 slide.classList.add('fade-out'); 640 }); 641 642 // Remove active class from all dots 643 dots.forEach(dot => dot.classList.remove('active')); 644 645 // Show current slide with animation 646 setTimeout(() => { 647 slides.forEach(slide => { 648 slide.style.display = 'none'; 649 slide.classList.remove('fade-out'); 650 }); 651 652 if (slides[currentSlideIndex]) { 653 slides[currentSlideIndex].style.display = 'block'; 654 slides[currentSlideIndex].classList.add('active', 'fade-in'); 655 } 656 657 if (dots[currentSlideIndex]) { 658 dots[currentSlideIndex].classList.add('active'); 659 } 660 }, 250); 661 662 console.log('Switched to slide:', currentSlideIndex); 663 } 664 665 666 667 function trackBannerClick(bannerId) { 668 // Track banner clicks for analytics 669 console.log('Banner clicked:', bannerId); 670 } 671 672 // Setup click event listeners when DOM is ready 673 document.addEventListener('DOMContentLoaded', function() { 674 const popupModal = document.getElementById('popupBannerModal'); 675 if (popupModal) { 676 // Close popup when clicking outside the carousel content 677 popupModal.addEventListener('click', function(e) { 678 if (e.target === this) { 679 closePopupBanner(); 680 } 681 }); 682 console.log('Popup banner modal click handler set up'); 683 } else { 684 console.log('Popup banner modal element not found for click handler'); 685 } 686 }); 687 </script>
687 688 689 690 691 692 693<main id="main"> 694 695 <!-- ======= page avisa ======= --> 696<!-- ======= Hero Section ======= --> 697<section id="hero2" class="d-flex align-items-center justify-content-center" style="position: relative;"> 698 <video autoplay muted loop id="bg-video-2" style="width:100%; height:auto;"> 699 <source src="https://tropicanaalam.com.my/assets-3/video/250606_Tropicana Alam Phase2_revised_low1.mp4" type="video/mp4"> 700 </video> 701 702 <!-- Mute/Unmute Button --> 703 <button onclick="toggleMute()" id="mute-btn" style=" 704 position: absolute; 705 bottom: 20px; 706 right: 20px; 707 z-index: 10; 708 background: rgba(0,0,0,0.5); 709 color: white; 710 border: none; 711 padding: 10px 15px; 712 border-radius: 5px; 713 cursor: pointer; 714 ">ð</button> 715</section> 716 717<!-- ======= Cta Section ======= --> 718<section id="cta" class="cta position-relative" > 719 <div class="position-absolute cta-background"> 720 <img src="assets-3/background/Green_Leave_Backgroun
720d.webp" class="position-absolute cta-img" alt="background-3.webp"> 721 </div> 722 <div class="container position-relative d-flex" style="z-index: 1; height:60vh"> 723 <div class="row p-5 px-0" style="margin-top: auto;margin-bottom:auto"> 724 <div class="col-12 col-md-5 d-flex justify-content-md-end justify-content-center"> 725 <div class="flex-column text-md-end text-center"> 726 <h1 style="font-family: roboto"> 727 <span class="g-color-2">WHERE LIFE AND</span><br> 728 <span class="o-color">NATURE INTERTWINE</span> 729 </h1> 730 </div> 731 </div> 732 <div class="col-12 col-md-7"> 733 <p> 734 Meticulously planned for seamless living. Tropicana Alam balances lush residential 735 enclaves with lifestyle conveniences, fostering a thriving and harmonious community 736 connected to nature. 737 Marking the start of a new journey, the gentle rustling of leaves and the soothing 738 melody of birdsong fill the air as you step into Avisa Residences. 739 </p> 740 </div> 741 </div> 742 </div> 743</section><!-- End Cta Section --> 744 745<!-- ======= Cta-two Section ======= --> 746<section id="cta-two" class="cta position-relative" style="background-color: #ABD27B;overflow:visible"> 747 <div class="container" style="z-index:2; margin-top:-18%" data-aos="zoom-in"> 748 <div class="row g-5 py-5"> 749 <div class="col-md-6 d-flex flex-column justify-content-md-end justify-content-center"> 750 <div class="d-flex justify-content-center justify-content-md-start"> 751 <div class="py-5" style="width: 70%"> 752 <img src="https://tropicanaalam.com.my/assets-3/logo/avisa_logo.webp" alt="logo.webp" style="width: 100%"> 753 </div> 754 </div> 755 <div class="d-flex justify-content-center justify-content-md-start"> 756 <div style="font-size:20px;width:70%"> 757 <p class="text-md-start text-center"> 758 <span class="g-color bold">A SANCTUARY WHERE</span> <br> 759 <span class="g-color bold">GENERATIONS FLOURISH IN</span><br> 760 <span class="o-color bold">HARMONY WITH NATURE</span><br> 761 <span class="o-color bold">AND CONVENIENCE</span><br> 762 </p> 763 </div> 764 </div> 765 </div> 766 <div class="col-md-6 d-md-flex d-none"> 767 <div class="d-flex justify-content-center"> 768 <img src="https://tropicanaalam.com.my/assets-3/logo/Avisa.webp" alt="logo.webp" style="width: 100%;"> 769 </div> 770 </div> 771 <div class="col-12 d-flex justify-content-center"> 772 <img src="https://tropicanaalam.com.my/assets-3/icon/5 Icon.webp" alt="logo.webp" style="width: 80%" class="d-md-flex d-none"> 773 <img src="https://tropicanaalam.com.my/assets-3/icon/5 Icon mobile.png" alt="logo.webp" style="width: 80%" class="d-flex d-md-none"> 774 </div> 775 </div> 776 </div> 777</section> 778 779<section id="cta-two" class="cta position-relative" style="background-color: #DEF7B9"> 780 <div class="container position-relative" style="z-index:2" data-aos="zoom-in"> 781 <div class="row py-5 "> 782 <div class="col-12 d-flex justify-content-center position-relative"> 783 <img src="https://tropicanaalam.com.my/assets-3/icon/6 Icon.webp" alt="logo.webp" style="width: 100%"> 784 </div> 785 </div> 786 </div> 787</section> 788<section id="cta-two" class="cta position-relative" style="background-color: #ABD27B"> 789 <div class="container position-relative" style="z-index:2" data-aos="zoom-in"> 790 <div class="row py-5 justify-content-center"> 791 <div class="col-12 d-flex justify-content-center"> 792 <img src="https://tropicanaalam.com.my/assets-3/impression/entrance statement_11zon (1).png" alt="logo.webp" style="width: 100%"> 793 </div> 794 <div class="row pt-5"> 795 <div class="col-md-5 col-12 position-relative"> 796 <img src="https://tropicanaalam.com.my/assets-3/impression/entrance.png" alt="logo.webp" style="width: 100%"> 797 </div>
798 <div class="col-md-7 col-12 d-flex justify-content-center flex-column position-relative text-center text-md-start pt-md-0 pt-5"> 799 <h3> 800 <span class="g-color bold">STEP INTO A GATEWAY OF</span> <br> 801 <span class="o-color bold">TRANQUILITY AND MODERN LIVING</span> 802 </h3> 803 <p style="text-align: justify; color:black"> 804 A grand entrance welcomes you into a sustainable residential 805 development, where verdant landscapes and contemporary 806 architecture set the tone for a modern lifestyle that exudes a 807 connection with nature. 808 </p> 809 </div> 810 </div> 811 <div class="row py-5 pe-md-0"> 812 <div class="col-md-4 col-12 d-flex justify-content-center flex-column position-relative order-md-1 order-2"> 813 <div class="py-4 d-flex justify-content-center justify-content-md-start" style="width:100%"> 814 <img src="https://tropicanaalam.com.my/assets-3/logo/GreenRE Logo.png" alt="GreenRE Logo.png" style="width: 20%"> 815 </div> 816 <h3 class="text-md-start text-center"> 817 <span class="g-color bold">EMBRACING GREEN LIVING, </span> <br> 818 <span class="o-color bold">REDEFINING SERENITY</span> 819 </h3> 820 <p style="text-align: justify; color:black"> 821 Our homes are thoughtfully crafted to enhance your 822 family's connection to nature. With eco-friendly features 823 and 824 <b>GreenRE certified</b> 825 , these versatile family homes are 826 designed for 827 <b>multi-generational living</b> 828 . Each home is a sanctuary, offering practical layouts that blend modern 829 convenience with the beauty of nature, ensuring that 830 every member of the family feels at home. 831 </p> 832 </div> 833 <div class="col-md-8 col-12 position-relative pe-0 order-1 order-md-2"> 834 <img src="https://tropicanaalam.com.my/assets-3/impression/lakeview.png" alt="logo.webp" class="p-0" style="width: 100%"> 835 </div> 836 </div> 837 <div class="row py-5 pe-md-0"> 838 <div class="col-12 d-flex justify-content-center flex-column position-relative"> 839 <h2 class="text-start py-5 bold" style="color:black">ADHERING TO NEW GREEN STANDARDS</h2> 840 <img src="https://tropicanaalam.com.my/assets-3/icon/7 icon.webp" alt="logo.webp" class="p-0 d-md-flex d-none" style="width: 100%"> 841 <img src="https://tropicanaalam.com.my/assets-3/icon/7 icon mobile.png" alt="logo.webp" class="p-0 d-flex d-md-none" style="width: 100%"> 842 </div> 843 </div> 844 </div> 845 846 </div> 847</section> 848 849<style> 850 .o-color{ 851 color: #E5722B !important; 852 } 853 .g-color-2{ 854 color: #ABD27B !important; 855 } 856 .cta-background { 857 top: 0; 858 left: 0; 859 width: 100%; 860 min-height: 154%; 861 z-index: 0; 862 position: absolute; 863 overflow: hidden; /* ensures image doesn't spill outside */ 864 } 865 866 .cta-img { 867 width: 100%; 868 height: 100%; 869 top: -35%; /* adjust this value as needed */ 870 left: 0; 871 position: absolute; 872 object-fit: cover; 873 max-width: none; 874 } 875 876 /* Optional: Responsive adjustment */ 877 @media (max-width: 768px) { 878 .cta-img { 879 height: 100%; 880 top: 0%; /* adjust this value as needed */ 881 left: 0; 882 } 883 } 884 #bg-video { 885 position: static; 886 top: 50%; 887 left: 50%; 888 width: 100%; 889 height: 100%; 890 object-fit: cover; 891 /* transform: translate(-50%, -50%); */ 892 z-index: -1; 893 } 894</style>
895<script> 896 function toggleMute() { 897 const video = document.getElementById("bg-video-2"); 898 const btn = document.getElementById("mute-btn"); 899 900 if (video.muted) { 901 video.muted = false; 902 video.volume = 1.0; // Set volume up 903 btn.textContent = "ð"; 904 } else { 905 video.muted = true; 906 btn.textContent = "ð"; 907 } 908 } 909</script>
909 <!-- =======avisa page ======= --> 910 911<div id="siteplan" class="siteplan" style="background-color: #08664E"> 912 <div class="container"> 913 <div class="row py-5"> 914 <div class="col-md-12"> 915 <h2><span class="g-color-2 bold">SITE</span> <span class="o-color bold">PLAN</span></h2> 916 </div> 917 <div class="col-md-12 d-flex justify-content-center py-5"> 918 <img class="w-75" src="https://tropicanaalam.com.my/assets-3/site plan/general/SitePlan.webp" alt=""> 919 </div> 920 <div class="col-md-12 d-flex"> 921 <div class="row d-flex"> 922 <div class="col-sm-12 col-md-5 d-flex"> 923 <div class="row"> 924 <div class="col-md-8 py-3"> 925 <h4 class="color-white bold"> 926 LEGEND 927 </h4> 928 </div> 929 <div class="col-md-12 "> 930 <div class="legend-wrapper" style="display: flex; flex-wrap: wrap; gap: 20px; color: white; font-family: Arial, sans-serif;"> 931 932 <div class="row row-cols-md-3 row-cols-1 ps-0"> 933 <div class="col pe-0 py-2 d-flex"> 934 <div style="width: 20px; height: 20px; background-color: #FFE7B2; margin-right: 10px; border: 1px solid #fff;"></div> 935 <div class="d-flex flex-column justify-content-center"> 936 <div style="font-size: 12px">Type A (20' x 70')</div> 937 </div> 938 </div> 939 <div class="col pe-0 py-2 d-flex"> 940 <div style="width: 20px; height: 20px; background-color: #FFC896; margin-right: 10px; border: 1px solid #fff;"></div> 941 <div class="d-flex flex-column justify-content-center"> 942 <div style="font-size: 12px">Type A1 (22' x 70')</div> 943 </div> 944 </div> 945 <div class="col pe-0 py-2 d-flex"> 946 <div style="width: 20px; height: 20px; background-color: #FF9685; margin-right: 10px; border: 1px solid #fff;"></div> 947 <div class="d-flex flex-column justify-content-center"> 948 <div style="font-size: 12px">Type A2 (20' x 70')</div> 949 </div> 950 </div> 951 <div class="col pe-0 py-2 d-flex"> 952 <div style="width: 20px; height: 20px; background-color: #D3C0F9; margin-right: 10px; border: 1px solid #fff;"></div> 953 <div class="d-flex flex-column justify-content-center"> 954 <div style="font-size: 12px">Type B (20' x 70')</div> 955 </div> 956 </div> 957 <div class="col pe-0 py-2 d-flex"> 958 <div style="width: 20px; height: 20px; background-color: #BEE7F9; margin-right: 10px; border: 1px solid #fff;"></div> 959 <div class="d-flex flex-column justify-content-center"> 960 <div style="font-size: 12px">Type Ba (20' x 70')</div> 961 </div> 962 </div> 963 <div class="col pe-0 py-2 d-flex"> 964 <div style="width: 20p
964x; height: 20px; background-color: #868CEB; margin-right: 10px; border: 1px solid #fff;"></div> 965 <div class="d-flex flex-column justify-content-center"> 966 <div style="font-size: 12px">Type B1 (22' x 70')</div> 967 </div> 968 </div> 969 <div class="col pe-0 py-2 d-flex"> 970 <div style="width: 20px; height: 20px; background-color: #DBDFD9; margin-right: 10px; border: 1px solid #fff;"></div> 971 <div class="d-flex flex-column justify-content-center"> 972 <div style="font-size: 12px">Type B1a (22' x 70')</div> 973 </div> 974 </div> 975 <div class="col pe-0 py-2 d-flex"> 976 <div style="width: 20px; height: 20px; background-color: #D1465C; margin-right: 10px; border: 1px solid #fff;"></div> 977 <div class="d-flex flex-column justify-content-center"> 978 <div style="font-size: 12px">Type B2 (20' x 70')</div> 979 </div> 980 </div> 981 <div class="col pe-0 py-2 d-flex"> 982 <div style="width: 20px; height: 20px; background-color: #D589E4; margin-right: 10px; border: 1px solid #fff;"></div> 983 <div class="d-flex flex-column justify-content-center"> 984 <div style="font-size: 12px">Type B2a (20' x 70')</div> 985 </div> 986 </div> 987 </div> 988 989 </div> 990 </div> 991 </div> 992 </div> 993 <div class="col-sm-12 col-md-7 d-flex justify-content-center"> 994 <div class="row"> 995 <div class="col-md-12 py-3"> 996 <h4 class="color-white bold">FACILITIES</h4> 997 </div> 998 999 <div class="row row-cols-md-2 row-cols-1"> 1000 <!-- First Column --> 1001 <div class="col"> 1002 <ul class="list-unstyled facilities-list mb-0"> 1003 <li><span class="circle">1</span> Grand Entrance</li> 1004 <li><span class="circle">2</span> 9.5-acre Recreational Park</li> 1005 <li><span class="circle">3</span> 1.3km Tranquil Lakeside Jogging Trail</li> 1006 <li><span class="circle">4</span> Playground</li> 1007 <li><span class="circle">5</span> Takraw Court</li> 1008 </ul> 1009 </div> 1010 1011 <!-- Second Column --> 1012 <div class="col"> 1013 <ul class="list-unstyled facilities-list mb-0"> 1014 <li><span class="circle">6</span> Badminton Court</li> 1015 <li><span class="circle">7</span> Basketball Court</li> 1016 <li><span class="circle">8</span> Pavilion</li> 1017 <li><span class="circle">9</span> Outdoor Gym</li> 1018 </ul> 1019 </div> 1020 </div> 1021 </div> 1022 </div> 1023 </div> 1024 </div> 1025 </div> 1026 </div> 1027</div> 1028 1029<!-- =======avisa page ======= --> 1030 1031<div id="siteplan" class="siteplan" style="background-color: #E8F2DA"> 1032 <div class="container"> 1033 <div class="row"> 1034 <div class="col-md-3 selection-border" style="padding-top: 10% !important;padding-bottom: 10% !important;"> 1035 <div class="list-group" id="list-tab" role="tablist"> 1036 <div class="row row-cols-md-1 row-cols-sm-3 row-cols-3"> 1037 <div class="col-4 col-sm-4 col-md-12 d-flex justify-content-center"> 1038 <a class="botton-box active" id="list-home-list" data-bs-toggle="list" href="#type-a" role="tab" aria-controls="list-home" aria-selected="true" >TYPE A</a> 1039 </div> 1040 <div class="col-4 col-sm-4 col-md-12 d-flex justify-content-center"> 1041 <a class="botton-box" id="list-profile-list" data-bs-toggle="list" href="#type-a1" role="tab" aria-controls="list-profile" aria-selected="false" tabindex="-1">TYPE A1</a> 1042 </div> 1043 <div class="col-4 col-sm-4 col-md-12 d-flex justify-content-center"> 1044 <a class="botton-box" id="list-messages-list" data-bs-toggle="list" href="#type-a2" role="tab" aria-controls="list-messages" aria-selected="false" tabindex="-1">TYPE A2</a> 1045 </div> 1046 <div class="col-4 col-sm-4 col-md-12 d-flex justify-content-center"> 1047 <a class="botton-box" id="list-settings-list" data-bs-toggle="list" href="#type-b" role="tab" aria-controls="list-settings" aria-selected="false" tabindex="-1">TYPE B</a> 1048 </div> 1049 <div class="col-4 col-sm-4 col-md-12 d-flex justify-content-center"> 1050 <a class="botton-box" id="list-settings-list" data-bs-toggle="list" href="#type-b1" role="tab" aria-controls="list-settings" aria-selected="false" tabindex="-1">TYPE B1</a> 1051 </div> 1052 <div class="col-4 col-sm-4 col-md-12 d-flex justify-content-center"> 1053 <a class="botton-box" id="list-settings-list" data-bs-toggle="list" href="#type-b2" role="tab" aria-controls="list-settings" aria-selected="false" tabindex="-1">TYPE B2</a> 1054 </div> 1055 </div> 1056 </div> 1057 </div> 1058 <div class="col-md-9" style="padding-top: 10% !important;padding-bottom: 10% !important; padding-left: 10%; padding-right: 10%;"> 1059 <div class="tab-content" id="nav-tabContent"> 1060 <div class="tab-pane fade show active" id="type-a" role="tabpanel" aria-labelledby="list-home-list"> 1061 <div class="row row-col-md-2"> 1062 <div class="col-md-6 pt-5"> 1063 <div class="type-title text-center"> 1064 <div class="type-small">TYPE</div> 1065 <div class="type-large">A</div> 1066 </div> 1067 <div class="px-2 py-2"> 1068 <p class="mb-0 intermediate"> 1069 INTERMEDIATE <br>
1070 <span class="size">20â X 70â</span> 1071 </p> 1072 <div class="mb-4"> 1073 --------------------- <br> 1074 <div class="sqft"> 1075 1,917 SQ.FT. <br> 1076 </div> 1077 --------------------- <br> 1078 <div class="room"> 1079 4 BEDROOMS <br> 1080 3 BATHROOMS <br> 1081 </div> 1082 </div> 1083 </div> 1084 1085 <a class="download-botton" href="https://tropicanaalam.com.my/pdf/TAlam_Avisa_Simplified_FAOL_Ebro2.pdf"> 1086 Download E-Brochure 1087 </a> 1088 </div> 1089 <div class="col-md-6 py-md-0 py-5"> 1090 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type A/Avisa Simplified brochure_200824_Floor Plan_FAOL (New)-A.png" alt="Type-A-L.png"> 1091 </div> 1092 <div class="col-md-12 pt-4 position-relative d-flex justify-content-center align-items-center" style="max-height: 285px; overflow: hidden;"> 1093 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type A/TA Front 06_7_11zon.jpg" alt="Type-A-L.png" style="object-fit: cover; height: 100%;"> 1094 1095 <div class="position-absolute bottom-left-corner"> 1096 <span class="text-white" style="font-size: 20px; font-weight: 700">TYPE A</span> <br> 1097 <span class="text-white" style="font-size: 13px;">Artistâs Impression Only</span> 1098 </div> 1099 </div> 1100 </div> 1101 </div> 1102 <div class="tab-pane fade" id="type-a1" role="tabpanel" aria-labelledby="list-profile-list"> 1103 <div class="row row-col-md-2"> 1104 <div class="col-md-6 pt-5"> 1105 <div class="type-title text-center"> 1106 <div class="type-small">TYPE</div> 1107 <div class="type-large">A1</div> 1108 </div> 1109 <div class="px-2 py-2"> 1110 <p class="mb-0 intermediate"> 1111 INTERMEDIATE <br> 1112 <span class="size">22â X 70â</span> 1113 </p> 1114 <div class="mb-4"> 1115 --------------------- <br> 1116 <div class="sqft"> 1117 2,266 SQ.FT. <br> 1118 </div> 1119 --------------------- <br> 1120 <div class="room"> 1121 4 BEDROOMS <br> 1122 4 BATHROOMS <br> 1123 </div> 1124 </div> 1125 </div> 1126 1127 <a class="download-botton" href="https://tropicanaalam.com.my/pdf/TAlam_Avisa_Simplified_FAOL_Ebro2.pdf"> 1128 Download E-Brochure 1129 </a> 1130 </div> 1131 <div class="col-md-6 py-md-0 py-5"> 1132 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type A1/Avisa Simplified brochure_200824_Floor Plan_FAOL (New)-A1.png" alt="Type-A1-L.png"> 1133 </div> 1134 <div class="col-md-12 pt-4 position-relative d-flex justify-content-center align-items-center" style="max-height: 285px; overflow: hidden;"> 1135 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type A1/TA Corner 06_5_11zon.jpg" alt="Type-A-L.png" style="object-fit: cover; height: 100%;"> 1136 1137 <div class="position-absolute bottom-left-corner">
1138 <span class="text-white" style="font-size: 20px; font-weight: 700">TYPE A</span> <br> 1139 <span class="text-white" style="font-size: 13px;">Artistâs Impression Only</span> 1140 </div> 1141 </div> 1142 </div> 1143 </div> 1144 <div class="tab-pane fade" id="type-a2" role="tabpanel" aria-labelledby="list-messages-list"> 1145 <div class="row row-cols-md-2"> 1146 <div class="col-md-6 pt-5"> 1147 <div class="type-title text-center"> 1148 <div class="type-small">TYPE</div> 1149 <div class="type-large">A2</div> 1150 </div> 1151 <div class="px-2 py-2"> 1152 <p class="mb-0 intermediate"> 1153 INTERMEDIATE <br> 1154 <span class="size">20â X 70â</span> 1155 </p> 1156 <div class="mb-4"> 1157 --------------------- <br> 1158 <div class="sqft"> 1159 1,969 SQ.FT. <br> 1160 </div> 1161 --------------------- <br> 1162 <div class="room"> 1163 4 BEDROOMS <br> 1164 3 BATHROOMS <br> 1165 </div> 1166 </div> 1167 </div> 1168 1169 <a class="download-botton" href="https://tropicanaalam.com.my/pdf/TAlam_Avisa_Simplified_FAOL_Ebro2.pdf"> 1170 Download E-Brochure 1171 </a> 1172 </div> 1173 <div class="col-md-6 py-md-0 py-5"> 1174 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type A2/Avisa Simplified brochure_200824_Floor Plan_FAOL (New)-A2.png" alt="Type-A2-L.png"> 1175 </div> 1176 <div class="col-md-12 pt-4 position-relative d-flex justify-content-center align-items-center" style="max-height: 285px; overflow: hidden;"> 1177 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type A2/TA Front 06_7_11zon.jpg" alt="Type-A-L.png" style="object-fit: cover; height: 100%;"> 1178 1179 <div class="position-absolute bottom-left-corner"> 1180 <span class="text-white" style="font-size: 20px; font-weight: 700">TYPE A</span> <br> 1181 <span class="text-white" style="font-size: 13px;">Artistâs Impression Only</span> 1182 </div> 1183 </div> 1184 </div> 1185 </div> 1186 <div class="tab-pane fade" id="type-b" role="tabpanel" aria-labelledby="list-settings-list"> 1187 <div class="row row-cols-md-2"> 1188 <div class="col-md-6 pt-5"> 1189 <div class="type-title text-center"> 1190 <div class="type-small">TYPE</div> 1191 <div class="type-large">B</div> 1192 </div> 1193 <div class="px-2 py-2"> 1194 <p class="mb-0 intermediate"> 1195 INTERMEDIATE <br>
1196 <span class="size">20â X 70â</span> 1197 </p> 1198 <div class="mb-4"> 1199 --------------------- <br> 1200 <div class="sqft"> 1201 1,991 SQ.FT. <br> 1202 </div> 1203 --------------------- <br> 1204 <div class="room"> 1205 4 BEDROOMS <br> 1206 3 BATHROOMS <br> 1207 </div> 1208 </div> 1209 </div> 1210 1211 <a class="download-botton" href="https://tropicanaalam.com.my/pdf/TAlam_Avisa_Simplified_FAOL_Ebro2.pdf"> 1212 Download E-Brochure 1213 </a> 1214 </div> 1215 <div class="col-md-6 py-md-0 py-5"> 1216 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type B/Avisa Simplified brochure_200824_Floor Plan_FAOL (New)-B.png" alt="Type-B-L.png"> 1217 </div> 1218 <div class="col-md-12 pt-4 position-relative d-flex justify-content-center align-items-center" style="max-height: 285px; overflow: hidden;"> 1219 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type B/TB Front 07_6_11zon.jpg" alt="Type-A-L.png" style="object-fit: cover; height: 100%;"> 1220 1221 <div class="position-absolute bottom-left-corner"> 1222 <span class="text-white" style="font-size: 20px; font-weight: 700">TYPE B</span> <br> 1223 <span class="text-white" style="font-size: 13px;">Artistâs Impression Only</span> 1224 </div> 1225 </div> 1226 </div> 1227 </div> 1228 <div class="tab-pane fade" id="type-b1" role="tabpanel" aria-labelledby="list-settings-list"> 1229 <div class="row row-cols-md-2"> 1230 <div class="col-md-6 pt-5"> 1231 <div class="type-title text-center"> 1232 <div class="type-small">TYPE</div> 1233 <div class="type-large">B1</div> 1234 </div> 1235 <div class="px-2 py-2"> 1236 <p class="mb-0 intermediate"> 1237 INTERMEDIATE <br> 1238 <span class="size">22â X 70â</span> 1239 </p> 1240 <div class="mb-4"> 1241 --------------------- <br> 1242 <div class="sqft"> 1243 2,351 SQ.FT. <br> 1244 </div> 1245 --------------------- <br> 1246 <div class="room"> 1247 4 BEDROOMS <br> 1248 4 BATHROOMS <br> 1249 </div> 1250 </div> 1251 </div> 1252 1253 <a class="download-botton" href="https://tropicanaalam.com.my/pdf/TAlam_Avisa_Simplified_FAOL_Ebro2.pdf"> 1254 Download E-Brochure 1255 </a> 1256 </div> 1257 <div class="col-md-6 py-md-0 py-5"> 1258 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type B1/Avisa Simplified brochure_200824_Floor Plan_FAOL (New)-B1.png" alt="Type-B1-L.png"> 1259 </div> 1260 <div class="col-md-12 pt-4 position-relative d-flex justify-content-center align-items-center" style="max-height: 285px; overflow: hidden;"> 1261 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type B1/TB Corner 08_8_11zon.jpg" alt="Type-A-L.png" style="object-fit: cover; height: 100%;"> 1262 1263 <div class="position-absolute bottom-left-corner">
1264 <span class="text-white" style="font-size: 20px; font-weight: 700">TYPE B</span> <br> 1265 <span class="text-white" style="font-size: 13px;">Artistâs Impression Only</span> 1266 </div> 1267 </div> 1268 </div> 1269 </div> 1270 <div class="tab-pane fade" id="type-b2" role="tabpanel" aria-labelledby="list-settings-list"> 1271 <div class="row row-cols-md-2 "> 1272 <div class="col-md-6 pt-5"> 1273 <div class="type-title text-center"> 1274 <div class="type-small">TYPE</div> 1275 <div class="type-large">B1</div> 1276 </div> 1277 <div class="px-2 py-2"> 1278 <p class="mb-0 intermediate"> 1279 INTERMEDIATE <br> 1280 <span class="size">20â X 70â</span> 1281 </p> 1282 <div class="mb-4"> 1283 --------------------- <br> 1284 <div class="sqft"> 1285 2,044 SQ.FT. <br> 1286 </div> 1287 --------------------- <br> 1288 <div class="room"> 1289 4 BEDROOMS <br> 1290 3 BATHROOMS <br> 1291 </div> 1292 </div> 1293 </div> 1294 1295 <a class="download-botton" href="https://tropicanaalam.com.my/pdf/TAlam_Avisa_Simplified_FAOL_Ebro2.pdf"> 1296 Download E-Brochure 1297 </a> 1298 </div> 1299 <div class="col-md-6 py-md-0 py-5"> 1300 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type B2/Avisa Simplified brochure_200824_Floor Plan_FAOL (New)-B2.png" alt="Type-B2-L.png"> 1301 </div> 1302 <div class="col-md-12 pt-4 position-relative d-flex justify-content-center align-items-center" style="max-height: 285px; overflow: hidden;"> 1303 <img class="w-100" src="https://tropicanaalam.com.my/assets-3/site plan/type B2/TB Front 07_6_11zon.jpg" alt="Type-A-L.png" style="object-fit: cover; height: 100%;"> 1304 1305 <div class="position-absolute bottom-left-corner"> 1306 <span class="text-white" style="font-size: 20px; font-weight: 700">TYPE B</span> <br> 1307 <span class="text-white" style="font-size: 13px;">Artistâs Impression Only</span> 1308 </div> 1309 </div> 1310 </div> 1311 </div> 1312 </div> 1313 </div> 1314 </div> 1315 </div> 1316</div> 1317 1318<style> 1319 .siteplan{ 1320 color: #000; 1321 } 1322 .botton-box.active { 1323 border: 2px solid #E5722B; 1324 background-color: #E5722B; 1325 border-radius: 50px; 1326 color: white; 1327 } 1328 .botton-box { 1329 color: #E5722B; 1330 padding: 3%; 1331 width: 70%; 1332 } 1333 1334 .botton-box:hover { 1335 color: #b5612c; 1336 } 1337 a:hover { 1338 color: #ffd584; 1339 text-decoration: none; 1340 } 1341 a:hover { 1342 --bs-link-color-rgb: var(--bs-link-hover-color-rgb); 1343 } 1344 a:hover { 1345 --bs-link-color-rgb: var(--bs-link-hover-color-rgb); 1346 } 1347 .download-botton { 1348 padding: 3% 5%; 1349 border: 2px solid white; 1350 border-radius: 50px; 1351 color: black; 1352 background-color: #ABD27B; 1353 } 1354 .download-botton:hover { 1355 color: rgb(31, 30, 30); 1356 background-color: #96be65; 1357 } 1358 1359 .type-title{ 1360 background-color: #E5722B; 1361 width: 130px; 1362 height: 100px; 1363 display: flex; 1364 flex-direction: column; 1365 justify-content: center; 1366 align-items: center; 1367 color: white; 1368 } 1369 .type-small {
1370 font-size: 18px; 1371 font-weight: 600; 1372 width: 100%; 1373 margin-top: 0%; 1374 line-height: 1; 1375 } 1376 .type-large{ 1377 font-size: 50px; 1378 font-weight: 600; 1379 margin-top: 0%; 1380 line-height: 0.8; 1381 } 1382 .size { 1383 font-size: 30px; 1384 font-weight: 600; 1385 } 1386 .sqft { 1387 font-size: 18px; 1388 font-weight: 600; 1389 } 1390 .room { 1391 font-size: 14px; 1392 font-weight: 600; 1393 } 1394 .INTERMEDIATE { 1395 font-size: 18px; 1396 font-weight: 600; 1397 } 1398 .intermediate{ 1399 color: #08664E; 1400 } 1401 .facilities-list .circle { 1402 background-color: #E5722B; 1403 } 1404 .color-white { 1405 color: white; 1406 } 1407 .bottom-left-corner{ 1408 bottom: 10px; left: 10px; padding-left: 20px; border-radius: 5px; line-height: 0.9; 1409 } 1410 1411 /* Mobile Responsive Styles */ 1412 @media (max-width: 768px) { 1413 .siteplan .container { 1414 padding-left: 15px; 1415 padding-right: 15px; 1416 } 1417 1418 .siteplan h2 { 1419 font-size: 24px; 1420 } 1421 1422 .siteplan h4 { 1423 font-size: 18px; 1424 } 1425 1426 .col-md-12.d-flex.justify-content-center.py-5 img { 1427 width: 100% !important; 1428 } 1429 1430 .legend-wrapper { 1431 font-size: 12px; 1432 } 1433 1434 .legend-wrapper .row { 1435 gap: 10px; 1436 } 1437 1438 .facilities-list li { 1439 font-size: 13px; 1440 margin-bottom: 8px; 1441 } 1442 1443 .selection-border { 1444 padding-top: 5% !important; 1445 padding-bottom: 5% !important; 1446 } 1447 1448 .botton-box { 1449 width: 90%; 1450 font-size: 14px; 1451 padding: 8px !important; 1452 } 1453 1454 .tab-content { 1455 padding-left: 15px !important; 1456 padding-right: 15px !important; 1457 padding-top: 5% !important; 1458 padding-bottom: 5% !important; 1459 } 1460 1461 .type-title { 1462 width: 100px; 1463 height: 80px; 1464 } 1465 1466 .type-small { 1467 font-size: 14px; 1468 } 1469 1470 .type-large { 1471 font-size: 40px; 1472 } 1473 1474 .size { 1475 font-size: 24px; 1476 } 1477 1478 .sqft { 1479 font-size: 16px; 1480 } 1481 1482 .room { 1483 font-size: 13px; 1484 } 1485 1486 .download-botton { 1487 font-size: 14px; 1488 padding: 10px 15px !important; 1489 } 1490 1491 .col-md-12.pt-4.position-relative { 1492 max-height: 200px !important; 1493 } 1494 1495 .col-md-12.pt-4.position-relative img { 1496 width: 100% !important; 1497 height: 200px !important; 1498 object-fit: cover !important; 1499 object-position: center center !important; 1500 } 1501 1502 .bottom-left-corner { 1503 padding-left: 10px; 1504 } 1505 1506 .bottom-left-corner span:first-child { 1507 font-size: 16px !important; 1508 } 1509 1510 .bottom-left-corner span:last-child { 1511 font-size: 11px !important; 1512 } 1513 } 1514</style> <section id="gallery" class="gallery position-relative" style="background-color: #ABD27B !important; min-height: 60vh; padding: 0; margin: 0; margin-top: -50px; border-top: none;"> 1515 <div class="container d-flex justify-content-center position-relative" style="z-index: 2; padding-top: 50px;"> 1516 <div class="row" style="margin: 0;"> 1517 <div class="col-12" style="padding: 0; margin: 0;"> 1518 <h2><span class="g-color bold">PHOTO</span> <span class="o-color bold">GALLERY</span></h2> 1519 </div> 1520 <div class="col-12" style="padding: 0; margin: 0;"> 1521 <div id="carouselGallery" class="carousel slide mobile-box" data-bs-ride="false" data-bs-touch="true" data-bs-interval="false" style="margin:auto; max-width: 90%; padding-top: 5%; padding-bottom: 50px; position: relative; touch-action: pan-y pinch-zoom;"> 1522 <div class="carousel-indicators d-none d-sm-flex justify-content-center"> 1523 <button type="button" data-bs-target="#carouselGallery" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" data-title="ENTRANCE BOULEVARD"></button> 1524 <button type="button" data-bs-target="#carouselGallery" data-bs-slide-to="1" class="" aria-current="false" aria-label="Slide 2" data-title="STREET VIEW"></button> 1525 <button type="button" data-bs-target="#carouselGallery" data-bs-slide-to="2" class="" aria-current="false" aria-label="Slide 3" data-title="TYPE A CORNER"></button> 1526 <button type="button" data-bs-target="#carouselGallery" data-bs-slide-to="3" class="" aria-current="false" aria-label="Slide 4" data-title="TYPE A END UNIT"></button> 1527 <button type="button" data-bs-target="#carouselGallery" data-bs-slide-to="4" class="" aria-current="false" aria-label="Slide 5" data-title="TYPE B CORNER"></button> 1528 <button type="button" data-bs-target="#carouselGallery" data-bs-slide-to="5" class="" aria-current="false" aria-label="Slide 6" data-title="TYPE A INTERMEDIATE"></button> 1529 </div> 1530 <div class="carousel-inner" style="overflow: hidden; position: relative;"> 1531 <div class="generalCaption position-absolute"> 1532 <p>Artist's impression only</p> 1533 </div> 1534 <!-- ONE TITLE FIXED TO CAROUSEL VIEW --> 1535 <div id="carouselTitle" style="position: absolute; bottom: 7%; right: 0%; color: white; background: transparent; padding: 8px 12px; border-radius: 5px; z-index: 1500; font-size: 14px; font-weight: bold; pointer-events: none;"> 1536 ENTRANCE BOULEVARD 1537 </div> 1538 <div class="carousel-item active" data-title="ENTRANCE BOULEVARD"> 1539 <img src="https://tropicanaalam.com.my/assets-3/slide/gallery/Entrance 05 B_11zon.jpg" class="d-block w-100 h-100" alt="ENTRANCE BOULEVARD"> 1540 <a href="https://tropicanaalam.com.my/assets-3/slide/gallery/Entrance 05 B_11zon.jpg" target="_blank" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1541 </div> 1542 <div class="carousel-item " data-title="STREET VIEW"> 1543 <img src="https://tropicanaalam.com.my/assets-3/slide/gallery/Street 04 B_11zon.jpg" class="d-block w-100 h-100" alt="STREET VIEW"> 1544 <a href="https://tropicanaalam.com.my/assets-3/slide/gallery/Street 04 B_11zon.jpg" target="_blank" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1545 </div> 1546 <div class="carousel-item " data-title="TYPE A CORNER"> 1547 <img src="https://tropicanaalam.com.my/assets-3/slide/gallery/TA Corner 06_11zon.jpg" class="d-block w-100 h-100" alt="TYPE A CORNER"> 1548 <a href="https://tropicanaalam.com.my/assets-3/slide/gallery/TA Corner 06_11zon.jpg" target="_blank" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1549 </div> 1550 <div class="carousel-item " data-title="TYPE A END UNIT"> 1551 <img src="https://tropicanaalam.com.my/assets-3/slide/gallery/TA Front 06_11zon.jpg" class="d-block w-100 h-100" alt="TYPE A END UNIT"> 1552 <a href="https://tropicanaalam.com.my/assets-3/slide/gallery/TA Front 06_11zon.jpg" target="_blank" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1553 </div> 1554 <div class="carousel-item " data-title="TYPE B CORNER"> 1555 <img src="https://tropicanaalam.com.my/assets-3/slide/gallery/TB Corner 08_11zon.jpg" class="d-block w-100 h-100" alt="TYPE B CORNER"> 1556 <a href="https://tropicanaalam.com.my/assets-3/slide/gallery/TB Corner 08_11zon.jpg" target="_blank" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1557 </div> 1558 <div class="carousel-item " data-title="TYPE A INTERMEDIATE"> 1559 <img src="https://tropicanaalam.com.my/assets-3/slide/gallery/TB Front 07_11zon.jpg" class="d-block w-100 h-100" alt="TYPE A INTERMEDIATE"> 1560 <a href="https://tropicanaalam.com.my/assets-3/slide/gallery/TB Front 07_11zon.jpg" target="_blank" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1561 </div> 1562 </div> 1563 <div class="position-absolute d-flex align-items-center" style="top:0;left: 0;bottom: 0;right: 0;"> 1564 <button class="carousel-control-prev d-none d-md-flex" type="button" data-bs-target="#carouselGallery" data-bs-slide="prev">
1565 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 1566 <span class="visually-hidden">Previous</span> 1567 </button> 1568 <button class="carousel-control-next d-none d-md-flex" type="button" data-bs-target="#carouselGallery" data-bs-slide="next"> 1569 <span class="carousel-control-next-icon" aria-hidden="true"></span> 1570 <span class="visually-hidden">Next</span> 1571 </button> 1572 </div> 1573 </div> 1574 </div> 1575 </div> 1576 </div> 1577</section> 1578
1579<script> 1580document.addEventListener('DOMContentLoaded', function() { 1581 const carousel = document.getElementById('carouselGallery'); 1582 const titleElement = document.getElementById('carouselTitle'); 1583 1584 if (carousel && titleElement) { 1585 let isAnimating = false; 1586 1587 // When slide starts - animate title out 1588 carousel.addEventListener('slide.bs.carousel', function(event) { 1589 if (isAnimating) return; 1590 isAnimating = true; 1591 1592 const direction = event.direction; // 'left' or 'right' 1593 const nextSlide = event.relatedTarget; 1594 const newTitle = nextSlide.getAttribute('data-title'); 1595 1596 if (newTitle) { 1597 // Animate title sliding out 1598 if (direction === 'left') { 1599 // Next slide (slide left) - title slides out to left 1600 titleElement.style.transition = 'transform 0.3s ease-out, opacity 0.15s ease-out'; 1601 titleElement.style.transform = 'translateX(-100px)'; 1602 titleElement.style.opacity = '0'; 1603 } else { 1604 // Previous slide (slide right) - title slides out to right 1605 titleElement.style.transition = 'transform 0.3s ease-out, opacity 0.15s ease-out'; 1606 titleElement.style.transform = 'translateX(100px)'; 1607 titleElement.style.opacity = '0'; 1608 } 1609 1610 // After sliding out, change text and slide in from opposite side 1611 setTimeout(function() { 1612 titleElement.textContent = newTitle; 1613 1614 // Position for slide in from opposite side 1615 if (direction === 'left') { 1616 // Slide in from right 1617 titleElement.style.transition = 'none'; 1618 titleElement.style.transform = 'translateX(100px)'; 1619 titleElement.style.opacity = '0'; 1620 1621 // Animate in 1622 setTimeout(function() { 1623 titleElement.style.transition = 'transform 0.3s ease-out, opacity 0.15s ease-out'; 1624 titleElement.style.transform = 'translateX(0)'; 1625 titleElement.style.opacity = '1'; 1626 }, 50); 1627 } else { 1628 // Slide in from left 1629 titleElement.style.transition = 'none'; 1630 titleElement.style.transform = 'translateX(-100px)'; 1631 titleElement.style.opacity = '0'; 1632 1633 // Animate in 1634 setTimeout(function() { 1635 titleElement.style.transition = 'transform 0.3s ease-out, opacity 0.15s ease-out'; 1636 titleElement.style.transform = 'translateX(0)'; 1637 titleElement.style.opacity = '1'; 1638 }, 50); 1639 } 1640 }, 150); 1641 } 1642 }); 1643 1644 // When slide ends - reset animation flag 1645 carousel.addEventListener('slid.bs.carousel', function(event) { 1646 setTimeout(function() { 1647 isAnimating = false; 1648 // Ensure title is in final position 1649 titleElement.style.transform = 'translateX(0)'; 1650 titleElement.style.opacity = '1'; 1651 }, 100); 1652 }); 1653 1654 // Enhanced touch gestures for mobile 1655 if (window.innerWidth <= 768) { 1656 let startX = 0; 1657 let currentX = 0; 1658 let isDragging = false; 1659 let threshold = 50; // Minimum swipe distance 1660 1661 carousel.addEventListener('touchstart', function(e) { 1662 startX = e.touches[0].clientX; 1663 isDragging = true; 1664 carousel.style.transition = 'none'; 1665 }, { passive: true }); 1666 1667 carousel.addEventListener('touchmove', function(e) { 1668 if (!isDragging) return; 1669 currentX = e.touches[0].clientX; 1670 // Optional: Add visual feedback during swipe 1671 }, { passive: true }); 1672 1673 carousel.addEventListener('touchend', function(e) { 1674 if (!isDragging) return; 1675 isDragging = false;
1676 carousel.style.transition = ''; 1677 1678 const diffX = startX - currentX; 1679 1680 if (Math.abs(diffX) > threshold) { 1681 if (diffX > 0) { 1682 // Swipe left - next slide 1683 const nextButton = carousel.querySelector('.carousel-control-next'); 1684 if (nextButton) nextButton.click(); 1685 } else { 1686 // Swipe right - previous slide 1687 const prevButton = carousel.querySelector('.carousel-control-prev'); 1688 if (prevButton) prevButton.click(); 1689 } 1690 } 1691 }, { passive: true }); 1692 } 1693 } 1694}); 1695</script>
1695 1696 1697 1698 1699 1700 1701 1702<style> 1703 .gallery .carousel-indicators [data-bs-target] { 1704 background-color: #08664E !important; 1705 } 1706 1707 /* Custom arrows for Phase 2 Gallery */ 1708 .gallery .carousel-control-next-icon { 1709 background-image: url('https://tropicanaalam.com.my/img/G-Arrow Right.webp') !important; 1710 width: 40px !important; 1711 height: 40px !important; 1712 background-size: contain !important; 1713 background-repeat: no-repeat !important; 1714 background-color: transparent !important; 1715 border: none !important; 1716 filter: none !important; 1717 } 1718 1719 .gallery .carousel-control-prev-icon { 1720 background-image: url('https://tropicanaalam.com.my/img/G-Arrow Right.webp') !important; 1721 width: 40px !important; 1722 height: 40px !important; 1723 background-size: contain !important; 1724 background-repeat: no-repeat !important; 1725 transform: rotate(180deg) !important; 1726 background-color: transparent !important; 1727 border: none !important; 1728 filter: none !important; 1729 } 1730 1731 .gallery .carousel-control-next, 1732 .gallery .carousel-control-prev { 1733 background: none !important; 1734 background-color: transparent !important; 1735 border: none !important; 1736 box-shadow: none !important; 1737 color: transparent !important; 1738 opacity: 1 !important; 1739 } 1740 1741 .gallery .carousel-control-next:hover .carousel-control-next-icon, 1742 .gallery .carousel-control-prev:hover .carousel-control-prev-icon { 1743 opacity: 0.8 !important; 1744 } 1745 1746 /* DEBUG: Force carousels to be visible */ 1747 .carousel, .carousel-inner, .mobile-box { 1748 display: block !important; 1749 visibility: visible !important; 1750 height: auto !important; 1751 min-height: 50vh !important; 1752 } 1753 1754 .carousel-control-prev, .carousel-control-next { 1755 display: flex !important; 1756 } 1757 1758 /* Mobile Responsive Styles */ 1759 @media (max-width: 768px) { 1760 .gallery { 1761 padding-bottom: 40px !important; 1762 } 1763 1764 .gallery .carousel-control-next, 1765 .gallery .carousel-control-prev { 1766 display: none !important; 1767 } 1768 1769 .gallery .carousel-indicators { 1770 margin-bottom: 0.5rem; 1771 } 1772 1773 .gallery .carousel-indicators [data-bs-target] { 1774 width: 8px; 1775 height: 8px; 1776 } 1777 1778 .gallery .carousel-item img { 1779 height: 100% !important; 1780 width: 100% !important; 1781 object-fit: cover !important; 1782 object-position: center center !important; 1783 } 1784 1785 .gallery .mobile-box { 1786 width: 80vw !important; 1787 height: 80vw !important; 1788 max-width: 350px !important; 1789 max-height: 350px !important; 1790 } 1791 1792 .gallery .carousel-inner { 1793 height: 100% !important; 1794 width: 100% !important; 1795 } 1796 1797 .gallery .carousel-item { 1798 height: 100% !important; 1799 width: 100% !important; 1800 } 1801 } 1802</style> 1803 <section id="siteplan-2" class="siteplan" style="background-color: #E8F2DA !important; min-height: 60vh; padding: 0; margin: 0;"> 1804 <div class="container d-flex justify-content-center"> 1805 <div class="row"> 1806 <div class="col-12 pt-5 "> 1807 <h2><span class="g-color bold">SITE</span> <span class="o-color bold">PROGRESS</span></h2> 1808 </div> 1809 <div class="col-12"> 1810 <div id="gallery-slide-2" class="carousel slide mobile-box align-self-center position-relative" 1811 data-bs-ride="false" 1812 data-bs-touch="true" 1813 data-bs-interval="false" 1814 style="margin:auto; max-width: 90%; max-height: 144vh; padding-top: 5%; padding-bottom: 5%; touch-action: pan-y pinch-zoom;"> 1815 1816 <!-- Carousel Indicators --> 1817 <div class="carousel-indicators d-none d-sm-flex justify-content-center"> 1818 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="0" 1819 class="active" 1820 aria-label="Slide 1" 1821 aria-current="true"></button> 1822 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="1" 1823 class="" 1824 aria-label="Slide 2" 1825 ></button> 1826 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="2" 1827 class="" 1828 aria-label="Slide 3" 1829 ></button> 1830 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="3" 1831 class="" 1832 aria-label="Slide 4" 1833 ></button> 1834 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="4" 1835 class="" 1836 aria-label="Slide 5" 1837 ></button> 1838 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="5" 1839 class="" 1840 aria-label="Slide 6" 1841 ></button> 1842 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="6" 1843 class="" 1844 aria-label="Slide 7" 1845 ></button> 1846 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="7" 1847 class="" 1848 aria-label="Slide 8" 1849 ></button> 1850 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="8" 1851 class="" 1852 aria-label="Slide 9" 1853 ></button> 1854 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="9" 1855 class="" 1856 aria-label="Slide 10" 1857 ></button> 1858 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="10" 1859 class="" 1860 aria-label="Slide 11" 1861 ></button> 1862 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="11" 1863 class="" 1864 aria-label="Slide 12" 1865 ></button> 1866 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="12" 1867 class="" 1868 aria-label="Slide 13" 1869 ></button> 1870 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="13" 1871 class="" 1872 aria-label="Slide 14" 1873 ></button> 1874 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="14" 1875 class="" 1876 aria-label="Slide 15" 1877 ></button> 1878 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="15" 1879 class="" 1880 aria-label="Slide 16" 1881 ></button> 1882 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="16" 1883 class="" 1884 aria-label="Slide 17" 1885 ></button> 1886 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="17" 1887 class="" 1888 aria-label="Slide 18" 1889 ></button> 1890 <button type="button" data-bs-target="#gallery-slide-2" data-bs-slide-to="18" 1891 class="" 1892 aria-label="Slide 19" 1893 ></button> 1894 </div> 1895 1896 <!-- Carousel Items --> 1897 <div class="carousel-inner position-relative" style="overflow: hidden; position: relative;"> 1898 <!-- ONE TITLE FIXED TO CAROUSEL VIEW --> 1899 <div id="siteProgressTitle" style="position: absolute; bottom: 20px; right: 20px; color: white; background: transparent; padding: 8px 12px; border-radius: 5px; z-index: 1500; font-size: 14px; font-weight: bold; pointer-events: none;"> 1900 SEPTEMBER 2026 1901 </div> 1902 <div class="carousel-item active" data-title="SEPTEMBER 2026"> 1903 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1790073316_C2 - Q3 (1).jpeg" 1904 class="d-block w-100 h-100" 1905 alt="SEPTEMBER 2026" 1906 style="height:100%"> 1907 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1790073316_C2 - Q3 (1).jpeg" 1908 target="_blank" 1909 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1910 </div> 1911 <div class="carousel-item " data-title="SEPTEMBER 2026"> 1912 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1790073338_C2 - Q3 (3).jpeg" 1913 class="d-block w-100 h-100" 1914 alt="SEPTEMBER 2026" 1915 style="height:100%"> 1916 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1790073338_C2 - Q3 (3).jpeg" 1917 target="_blank" 1918 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1919 </div> 1920 <div class="carousel-item " data-title="SEPTEMBER 2026"> 1921 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1790073396_C2 - Q3 (2).jpeg" 1922 class="d-block w-100 h-100" 1923 alt="SEPTEMBER 2026" 1924 style="height:100%"> 1925 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1790073396_C2 - Q3 (2).jpeg" 1926 target="_blank" 1927 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1928 </div> 1929 <div class="carousel-item " data-title="SEPTEMBER 2026"> 1930 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1790073409_C2 - Q3 (4).jpeg" 1931 class="d-block w-100 h-100" 1932 alt="SEPTEMBER 2026" 1933 style="height:100%"> 1934 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1790073409_C2 - Q3 (4).jpeg" 1935 target="_blank" 1936 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1937 </div> 1938 <div class="carousel-item " data-title="JUNE 2025"> 1939 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820251_June 2025.jpg" 1940 class="d-block w-100 h-100" 1941 alt="JUNE 2025" 1942 style="height:100%"> 1943 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820251_June 2025.jpg" 1944 target="_blank" 1945 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1946 </div> 1947 <div class="carousel-item " data-title="JUNE 2025"> 1948 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820273_June 2025(2).jpg" 1949 class="d-block w-100 h-100" 1950 alt="JUNE 2025" 1951 style="height:100%"> 1952 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820273_June 2025(2).jpg" 1953 target="_blank" 1954 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1955 </div> 1956 <div class="carousel-item " data-title="MARCH 2026"> 1957 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1773109399_C2 4.jpeg" 1958 class="d-block w-100 h-100" 1959 alt="MARCH 2026" 1960 style="height:100%"> 1961 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1773109399_C2 4.jpeg" 1962 target="_blank" 1963 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1964 </div> 1965 <div class="carousel-item " data-title="JUNE 2025"> 1966 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820309_June 2025(3).jpg" 1967 class="d-block w-100 h-100" 1968 alt="JUNE 2025" 1969 style="height:100%"> 1970 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820309_June 2025(3).jpg" 1971 target="_blank" 1972 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1973 </div> 1974 <div class="carousel-item " data-title="DECEMBER 2025"> 1975 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1765532794_WhatsApp Image 2025-12-12 at 2.14.11 PM (2).jpeg" 1976
1976 class="d-block w-100 h-100" 1977 alt="DECEMBER 2025" 1978 style="height:100%"> 1979 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1765532794_WhatsApp Image 2025-12-12 at 2.14.11 PM (2).jpeg" 1980 target="_blank" 1981 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1982 </div> 1983 <div class="carousel-item " data-title="DECEMBER 2025"> 1984 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1765532866_WhatsApp Image 2025-12-12 at 2.14.11 PM (1).jpeg" 1985 class="d-block w-100 h-100" 1986 alt="DECEMBER 2025" 1987 style="height:100%"> 1988 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1765532866_WhatsApp Image 2025-12-12 at 2.14.11 PM (1).jpeg" 1989 target="_blank" 1990 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 1991 </div> 1992 <div class="carousel-item " data-title="MARCH 2026"> 1993 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1773109351_C2 1.jpeg" 1994 class="d-block w-100 h-100" 1995 alt="MARCH 2026" 1996 style="height:100%"> 1997 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1773109351_C2 1.jpeg" 1998 target="_blank" 1999 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2000 </div> 2001 <div class="carousel-item " data-title="JUNE 2026"> 2002 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1781751884_c2 2 new.jpg" 2003 class="d-block w-100 h-100" 2004 alt="JUNE 2026" 2005 style="height:100%"> 2006 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1781751884_c2 2 new.jpg" 2007 target="_blank" 2008 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2009 </div> 2010 <div class="carousel-item " data-title="SEPTEMBER 2025"> 2011 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820194_september 2025.jpg" 2012 class="d-block w-100 h-100" 2013 alt="SEPTEMBER 2025" 2014 style="height:100%"> 2015 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820194_september 2025.jpg" 2016 target="_blank" 2017 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2018 </div> 2019 <div class="carousel-item " data-title="JUNE 2026"> 2020 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1781751932_c2 3 new.jpg" 2021 class="d-block w-100 h-100" 2022 alt="JUNE 2026" 2023 style="height:100%"> 2024 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1781751932_c2 3 new.jpg" 2025 target="_blank" 2026 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2027 </div> 2028 <div class="carousel-item " data-title="SEPTEMBER 2025"> 2029 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820218_september 2025(2).jpg" 2030 class="d-block w-100 h-100" 2031 alt="SEPTEMBER 2025" 2032 style="height:100%"> 2033 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820218_september 2025(2).jpg" 2034 target="_blank" 2035 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2036 </div> 2037 <div class="carousel-item " data-title="JUNE 2025"> 2038 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820322_June 2025(4).jpg" 2039 class="d-block w-100 h-100" 2040 alt="JUNE 2025" 2041 style="height:100%"> 2042 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1761820322_June 2025(4).jpg" 2043 target="_blank" 2044 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2045 </div> 2046 <div class="carousel-item " data-title="JUNE 2026"> 2047 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1781751972_c2 4 new.jpg" 2048 class="d-block w-100 h-100" 2049 alt="JUNE 2026" 2050 style="height:100%"> 2051 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1781751972_c2 4 new.jpg" 2052 target="_blank" 2053 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2054 </div> 2055 <div class="carousel-item " data-title="MARCH 2026"> 2056 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1773109378_C2 3.jpeg" 2057 class="d-block w-100 h-100" 2058 alt="MARCH 2026" 2059 style="height:100%"> 2060 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1773109378_C2 3.jpeg" 2061 target="_blank" 2062 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2063 </div> 2064 <div class="carousel-item " data-title="JUNE 2026"> 2065 <img src="https://tropicanaalam.com.my/assets-3/slide/site progress/1781751813_c2 1 new.jpg" 2066 class="d-block w-100 h-100" 2067 alt="JUNE 2026" 2068 style="height:100%"> 2069 <a href="https://tropicanaalam.com.my/assets-3/slide/site progress/1781751813_c2 1 new.jpg" 2070 target="_blank" 2071 style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;"></a> 2072 </div> 2073 </div> 2074 2075 <!-- Carousel Controls --> 2076 <button class="carousel-control-prev d-none d-md-flex" type="button" data-bs-target="#gallery-slide-2" data-bs-slide="prev">
2077 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 2078 <span class="visually-hidden">Previous</span> 2079 </button> 2080 <button class="carousel-control-next d-none d-md-flex" type="button" data-bs-target="#gallery-slide-2" data-bs-slide="next"> 2081 <span class="carousel-control-next-icon" aria-hidden="true"></span> 2082 <span class="visually-hidden">Next</span> 2083 </button> 2084 </div> 2085 </div> 2086 </div> 2087 </div> 2088</section> 2089 2090<style> 2091.slide-caption { 2092 transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; 2093} 2094.caption-content { 2095 transition: opacity 0.3s ease-in-out; 2096} 2097</style> 2098
2099<script> 2100document.addEventListener('DOMContentLoaded', function() { 2101 const carousel = document.getElementById('gallery-slide-2'); 2102 const titleElement = document.getElementById('siteProgressTitle'); 2103 2104 if (carousel && titleElement) { 2105 let isAnimating = false; 2106 2107 // When slide starts - animate title out 2108 carousel.addEventListener('slide.bs.carousel', function(event) { 2109 if (isAnimating) return; 2110 isAnimating = true; 2111 2112 const direction = event.direction; // 'left' or 'right' 2113 const nextSlide = event.relatedTarget; 2114 const newTitle = nextSlide.getAttribute('data-title'); 2115 2116 if (newTitle) { 2117 // Animate title sliding out 2118 if (direction === 'left') { 2119 // Next slide (slide left) - title slides out to left 2120 titleElement.style.transition = 'transform 0.3s ease-out, opacity 0.15s ease-out'; 2121 titleElement.style.transform = 'translateX(-100px)'; 2122 titleElement.style.opacity = '0'; 2123 } else { 2124 // Previous slide (slide right) - title slides out to right 2125 titleElement.style.transition = 'transform 0.3s ease-out, opacity 0.15s ease-out'; 2126 titleElement.style.transform = 'translateX(100px)'; 2127 titleElement.style.opacity = '0'; 2128 } 2129 2130 // After sliding out, change text and slide in from opposite side 2131 setTimeout(function() { 2132 titleElement.textContent = newTitle; 2133 2134 // Position for slide in from opposite side 2135 if (direction === 'left') { 2136 // Slide in from right 2137 titleElement.style.transition = 'none'; 2138 titleElement.style.transform = 'translateX(100px)'; 2139 titleElement.style.opacity = '0'; 2140 2141 // Animate in 2142 setTimeout(function() { 2143 titleElement.style.transition = 'transform 0.3s ease-out, opacity 0.15s ease-out'; 2144 titleElement.style.transform = 'translateX(0)'; 2145 titleElement.style.opacity = '1'; 2146 }, 50); 2147 } else { 2148 // Slide in from left 2149 titleElement.style.transition = 'none'; 2150 titleElement.style.transform = 'translateX(-100px)'; 2151 titleElement.style.opacity = '0'; 2152 2153 // Animate in 2154 setTimeout(function() { 2155 titleElement.style.transition = 'transform 0.3s ease-out, opacity 0.15s ease-out'; 2156 titleElement.style.transform = 'translateX(0)'; 2157 titleElement.style.opacity = '1'; 2158 }, 50); 2159 } 2160 }, 150); 2161 } 2162 }); 2163 2164 // When slide ends - reset animation flag 2165 carousel.addEventListener('slid.bs.carousel', function(event) { 2166 setTimeout(function() { 2167 isAnimating = false; 2168 // Ensure title is in final position 2169 titleElement.style.transform = 'translateX(0)'; 2170 titleElement.style.opacity = '1'; 2171 }, 100); 2172 }); 2173 2174 // Enhanced touch gestures for mobile 2175 if (window.innerWidth <= 768) { 2176 let startX = 0; 2177 let currentX = 0; 2178 let isDragging = false; 2179 let threshold = 50; // Minimum swipe distance 2180 2181 carousel.addEventListener('touchstart', function(e) { 2182 startX = e.touches[0].clientX; 2183 isDragging = true; 2184 carousel.style.transition = 'none'; 2185 }, { passive: true }); 2186 2187 carousel.addEventListener('touchmove', function(e) { 2188 if (!isDragging) return; 2189 currentX = e.touches[0].clientX; 2190 // Optional: Add visual feedback during swipe 2191 }, { passive: true }); 2192 2193 carousel.addEventListener('touchend', function(e) { 2194 if (!isDragging) return; 2195 isDragging = false;
2196 carousel.style.transition = ''; 2197 2198 const diffX = startX - currentX; 2199 2200 if (Math.abs(diffX) > threshold) { 2201 if (diffX > 0) { 2202 // Swipe left - next slide 2203 const nextButton = carousel.querySelector('.carousel-control-next'); 2204 if (nextButton) nextButton.click(); 2205 } else { 2206 // Swipe right - previous slide 2207 const prevButton = carousel.querySelector('.carousel-control-prev'); 2208 if (prevButton) prevButton.click(); 2209 } 2210 } 2211 }, { passive: true }); 2212 } 2213 } 2214}); 2215</script>
2215 2216 2217 2218<style> 2219 /* DEBUG: Force site progress carousel to be visible */ 2220 .siteplan .carousel, 2221 .siteplan .carousel-inner, 2222 .siteplan .mobile-box { 2223 display: block !important; 2224 visibility: visible !important; 2225 } 2226 2227 .siteplan .carousel-control-prev, 2228 .siteplan .carousel-control-next { 2229 display: flex !important; 2230 } 2231 2232 @media (max-width: 768px) { 2233 .siteplan { 2234 padding-bottom: 40px !important; 2235 } 2236 2237 .siteplan .mobile-box { 2238 width: 80vw !important; 2239 height: 80vw !important; 2240 max-width: 350px !important; 2241 max-height: 350px !important; 2242 } 2243 2244 .siteplan .carousel-inner { 2245 height: 100% !important; 2246 width: 100% !important; 2247 } 2248 2249 .siteplan .carousel-item { 2250 height: 100% !important; 2251 width: 100% !important; 2252 } 2253 2254 .siteplan .carousel-item img { 2255 width: 100% !important; 2256 height: 100% !important; 2257 object-fit: cover !important; 2258 object-position: center center !important; 2259 } 2260 2261 .siteplan .carousel-control-prev, 2262 .siteplan .carousel-control-next { 2263 display: none !important; 2264 } 2265 } 2266</style> 2267 <!-- ======= Contact Section ======= --> 2268<section id="contact" class="contact position-relative py-5"> 2269 <div class="row row-cols-3 justify-content-center"> 2270 <div class="col-xxl-2 col-md-3 d-none "> 2271 <img class="d-none d-md-block" style="width: 100%; height:100%; z-index:1" src="https://tropicanaalam.com.my/assets-3/image/LEFT BIRDH.png" alt=""> 2272 </div> 2273 <div class="col-xxl-8 col-md-6 col-8 d-flex "> 2274 <form action="https://tropicanaalam.com.my/AvisaPhase2Registration" method="post" role="form" class="registration-form d-flex"> 2275 <input type="hidden" name="_token" value="vTPRRQNivvEjYAN1FiztqspvnKWHVnwht118cYO9"> <div style="position: absolute; left: -5000px;" aria-hidden="true"> 2276 <label for="website_url">Leave this field blank</label> 2277 <input type="text" 2278 name="website_url" 2279 id="website_url" 2280 value="" 2281 tabindex="-1" 2282 autocomplete="off"> 2283</div> 2284 2285 2286<input type="hidden" name="form_token" value="MTc5MDQxNTc4MA=="> 2287 <div class="row row-cols-md-1 d-flex align-items-center justify-content-center py-0"> 2288 <div class="row d-flex align-items-center justify-content-center"> 2289 <div class="col col-md-12 col-xxl-4"> 2290 <div class="row"> 2291 <div class="info pb-2"> 2292 <h2> 2293 <span class="o-color bold">Register<br> 2294 Now</span> 2295 </h2> 2296 </div> 2297 <div class="col-6 col-md-12 info"> 2298 <p class="mb-0 text-start text-md-left g-color bold">CONTACT US</p> 2299 <p class="desc2 pt-0 text-start text-md-left mb-0 g-color bold">PHONE:1700 81 7878</p> 2300 </div> 2301 <div class="col-6 col-md-12 info"> 2302 <p class="mb-0 text-start text-md-left g-color bold">OPERATING HOUR</p> 2303 <p class="desc2 pt-0 text-start text-md-left mb-0 g-color bold">OPEN DAILY: 10 AM - 6 PM</p> 2304 </div> 2305 <div class="col-12 d-flex mb-2 justify-content-start justify-content-md-start"> 2306 <div class="mr-2 icon-size"> 2307 <a class="icon-display" href="https://www.facebook.com/tropicanacorp"> 2308 <i class="icon-facebook"></i> 2309 </a> 2310 </div> 2311 <div class="mx-2 icon-size"> 2312 <a class="icon-display" href="https://www.instagram.com/tropicanacorpbhd/"> 2313 <i class="icon-instagram"></i> 2314 </a> 2315 </div> 2316 <div class="ml-2 icon-size"> 2317 <a class="icon-display" href="https://www.tiktok.com/@tropicanacorpbhd "> 2318 <i class="icon-tiktok"></i> 2319 </a> 2320 </div> 2321 </div> 2322 <div class="col-12 info"> 2323 <p class="mb-0 text-start text-md-left g-color bold">TROPICANA ALAM PROPERTY GALLERY</p> 2324 <p class="desc2 pt-0 text-start text-md-left mb-0 g-color"> 27-1(Ground Floor), Pusat Perdagangan 2325 Puncak Alam Jaya,<br> 2326 Jalan Puncak Alam Jaya 10,<br> 2327 42300 Bandar Puncak Alam Jaya,<br> 2328 Selangor. 2329 </p> 2330 </div> 2331 <div class="col-12 d-flex justify-content-start justify-content-md-start"> 2332 <div class="row g-0"> 2333 <div class="col-2 pe-1 py-3" style="width: 11.5%;"> 2334 <a href="https://www.google.com/maps?q=Tropicana+Alam+Property+Gallery,+Puncak+Alam, 2335 +42300+Kuala+Selangor,+Selangor&ftid=0x31cc59ba7d5cb997:0xe249f05afd891d80&hl=en- 2336 zA0QgJNWQ%3D%3D&g_st=iw"> 2337 <img src="https://tropicanaalam.com.my/icon/png/GoogleMap.webp"class="w-100" alt="gm"> 2338 </a> 2339 </div> 2340 <div class="col-2 ps-1 py-3" style="width: 11.5%;"> 2341 <a href="https://www.waze.com/live-map/directions?to=ll.3.240988%2C101.434729" > 2342 <img src="https://tropicanaalam.com.my/icon/png/Waze.webp" class="w-100" alt="wz"> 2343 </a> 2344 </div> 2345 </div> 2346 </div> 2347 </div> 2348 </div> 2349 <div class="col-md-12 col-xxl-5 py-5"> 2350 <div class="row"> 2351 <div class="col-md-12 form-group mt-3 mt-md-0"> 2352 <input type="text" class="form-control" placeholder="NAME" name="name" value="" required> 2353 </div> 2354 <div class="col-md-4 form-group"> 2355 <select class="form-control" name="code"> 2356 <option value="60">Malaysia (+60)</option> 2357 <option value="93">Afghanistan (+93)</option> 2358 <option value="355">Albania (+355)</option> 2359 <option value="213">Algeria (+213)</option> 2360 <option value="1">
2360Guam (+1)</option> 2361 <option value="376">Andorra (+376)</option> 2362 <option value="244">Angola (+244)</option> 2363 <option value="54">Argentina (+54)</option> 2364 <option value="374">Armenia (+374)</option> 2365 <option value="297">Aruba (+297)</option> 2366 <option value="61">Australia (+61)</option> 2367 <option value="43">Austria (+43)</option> 2368 <option value="994">Azerbaijan (+994)</option> 2369 <option value="973">Bahrain (+973)</option> 2370 <option value="880">Bangladesh (+880)</option> 2371 <option value="375">Belarus (+375)</option> 2372 <option value="32">Belgium (+32)</option> 2373 <option value="501">Belize (+501)</option> 2374 <option value="229">Benin (+229)</option> 2375 <option value="975">Bhutan (+975)</option> 2376 <option value="591">Bolivia (+591)</option> 2377 <option value="387">Bosnia and Herzegovina (+387)</option> 2378 <option value="267">Botswana (+267)</option> 2379 <option value="55">Brazil (+55)</option> 2380 <option value="673">Brunei Darussalam (+673)</option> 2381 <option value="359">Bulgaria (+359)</option> 2382 <option value="226">Burkina Faso (+226)</option> 2383 <option value="257">Burundi (+257)</option> 2384 <option value="855">Cambodia (+855)</option> 2385 <option value="237">Cameroon (+237)</option> 2386 <option value="238">Cape Verde (+238)</option> 2387 <option value="345">Cayman Islands (+345)</option> 2388 <option value="236">Central African Republic (+236)</option> 2389 <option value="235">Chad (+235)</option> 2390 <option value="56">Chile (+56)</option> 2391 <option value="86">China (+86)</option> 2392 <option value="5
23927">Colombia (+57)</option> 2393 <option value="269">Comoros (+269)</option> 2394 <option value="242">Congo (Brazzaville) (+242)</option> 2395 <option value="243">Congo (Kinshasa) (+243)</option> 2396 <option value="682">Cook Islands (+682)</option> 2397 <option value="506">Costa Rica (+506)</option> 2398 <option value="225">Ivory Coast (+225)</option> 2399 <option value="385">Croatia (+385)</option> 2400 <option value="53">Cuba (+53)</option> 2401 <option value="357">Cyprus (+357)</option> 2402 <option value="420">Czech Republic (+420)</option> 2403 <option value="45">Denmark (+45)</option> 2404 <option value="253">Djibouti (+253)</option> 2405 <option value="593">Ecuador (+593)</option> 2406 <option value="20">Egypt (+20)</option> 2407 <option value="503">El Salvador (+503)</option> 2408 <option value="240">Equatorial Guinea (+240)</option> 2409 <option value="291">Eritrea (+291)</option> 2410 <option value="372">Estonia (+372)</option> 2411 <option value="251">Ethiopia (+251)</option> 2412 <option value="500">Falkland Islands (+500)</option> 2413 <option value="298">Faroe Islands (+298)</option> 2414 <option value="697">Fiji (+697)</option> 2415 <option value="358">Finland (+358)</option> 2416 <option value="241">Gabon (+241)</option> 2417 <option value="220">Gambia (+220)</option> 2418 <option value="995">Georgia (+995)</option> 2419 <option value="49">Germany (+49)</option> 2420 <option value="233">Ghana (+233)</option> 2421 <option value="350">Gibraltar (+350)</option> 2422 <option value="30">Greece (+30)</option> 2423 <option value="299">Greenland (+299)</option> 2424 <option value="590">Guadeloupe (+590)</option> 2425 <option value="502">Guatemala (+502)</option> 2426 <option value="224">Guinea (+224)</option> 2427 <option value="245">Guinea-Bissau (+245)</option> 2428 <option value="592">Guyana (+592)</option> 2429 <option value="509">Haiti (+509)</option> 2430 <option value="504">Honduras (+504)</option> 2431 <option value="852">Hong Kong (+852)</option> 2432 <option value="36">Hungary (+36)</option> 2433 <option value="354">Iceland (+354)</option> 2434 <option value="91">India (+91)</option> 2435 <option value="62">Indonesia (+62)</option> 2436 <option value="98">Iran (+98)</option> 2437 <option value="964">Iraq (+964)</option> 2438 <option value="353">Ireland (+353)</option> 2439 <option value="39">Italy (+39)</option> 2440 <option value="876">Jamaica (+876)</option> 2441 <option value="81">Japan (+81)</option> 2442 <option value="962">Jordan (+962)</option> 2443 <option value="7">Kazakhstan (+7)</option> 2444 <option value="254">Kenya (+254)</option> 2445 <option value="686">Kiribati (+686)</option> 2446 <option value="82">South Korea (+82)</option> 2447 <option value="965">Kuwait (+965)</option> 2448 <option value="996">Kyrgyzstan (+996)</option> 2449 <option value="856">Laos (+856)</option> 2450 <option value="371">Latvia (+371)</option> 2451 <option value="961">Lebanon (+961)</option> 2452 <option value="266">Lesotho (+266)</option> 2453 <option value="231">Liberia (+231)</option> 2454 <option value="218">Libya (+218)</option> 2455 <option value="423">Liechtenstein (+423)</option> 2456 <option value="370">Lithuania (+370)</option> 2457 <option value="352">Luxembourg (+352)</option> 2458 <option value="853">Macau (+853)</option> 2459 <option value="389">Macedonia (+389)</option> 2460 <option value="261">Madagascar (+261)</option> 2461 <option value="265">Malawi (+265)</option> 2462 <option value="960">Maldives (+960)</option> 2463 <option value="223">Mali (+223)</option> 2464 <option value="356">Malta (+356)</option> 2465 <option value="692">Marshall Islands (+692)</option> 2466 <option value="596">Martinique (+596)</option> 2467 <option value="222">Mauritania (+222)</option> 2468 <option value="230">Mauritius (+230)</option> 2469 <option value="52">Mexico (+52)</option> 2470 <option value="691">Micronesia (+691)</option> 2471 <option value="373">Moldova (+373)</option> 2472 <option value="377">Monaco (+377)</option> 2473 <option value="976">Mongolia (+976)</option> 2474 <option value="382">Montenegro (+382)</option> 2475 <option value="212">Morocco (+212)</option> 2476 <option value="258">Mozambique (+258)</option> 2477 <option value="95">Myanmar (+95)</option> 2478 </select> 2479 </div> 2480 <div class="col-md-8 form-group"> 2481 <input type="text" class="form-control" placeholder="CONTACT NUMBER (Eg:123456789)" id="phonetxt" name="contact_number" value="" required> 2482 </div> 2483 <div class="col-md-12 form-group input-info mt-3 mt-md-0"> 2484 <input type="email" class="form-control" placeholder="EMAIL" name="email" value="" required> 2485 </div> 2486 2487 <div class="row row-cols-2 p-0 my-4"> 2488 <label class="ps-4 d-flex align-items-center">I am interested in*</label> 2489 <div class="col-md-6 form-group p-0"> 2490 2491 <select id="interestedSelect" class="form-select" name="interested" required> 2492 <option value="" disabled selected>Please Select</option> 2493 <option value="TYPE A (20' X 70')" >TYPE A(20'x70')</option> 2494 <option value="TYPE A1 (22' X 70')" >TYPE A1(20'x70')</option> 2495 <option value="TYPE A2 (20' X 70')" >TYPE A2(22'x70')</option> 2496 <option value="TYPE B (20' X 70') (EXTENDED)" >TYPE B(20'x70')(EXTENDED)</option> 2497 <option value="TYPE B1 (22' X 70') (EXTENDED)" >TYPE B1(22'x70')(EXTENDED)</option> 2498 <option value="TYPE B2 (20' X 70') (EXTENDED)" >TYPE B2(20'x70')(EXTENDED)</option> 2499 </select> 2500 2501 </div> 2502 <label class="ps-4 d-flex align-items-center">My Preferred Built-up Area*</label> 2503 <div class="col-md-6 form-group p-0"> 2504 <div class="form-group mb-0"> 2505 2506 <select id="areaSelect" class="form-select" name="prefered" required> 2507 <option value="">Please Select</option> 2508 <option value="1,917 SQFT" >1,917 SQFT</option> 2509 <option value="2,266 SQFT" >2,266 SQFT</option> 2510 <option value="1,969 SQFT" >1,969 SQFT</option> 2511 <option value="1,991 SQFT" >1,991 SQFT</option> 2512 <option value="2,351 SQFT" >2,351 SQFT</option> 2513 <option value="2,044 SQFT" >2,044 SQFT</option> 2514 </select> 2515 </div> 2516 </div> 2517 <label class="ps-4 d-flex align-items-center">My Gross Monthly Household Income Range*</label> 2518 <div class="col-md-6 form-group mt-3 mt-md-0 p-0"> 2519 2520 <select id="incomeSelect" class="form-select" name="income" required> 2521 <option value="">Please Select</option> 2522 <option value="RM6,000 - RM7,999" >RM6,000 - RM7,999</option> 2523 <option value="RM8,000 - RM9,999" >RM8,000 - RM9,999</option> 2524 <option value="RM10,000 and above" >RM10,000 and and above</option> 2525 </select> 2526 </div> 2527 </div> 2528 </div
2528> 2529 <div class="col-md-12 form-check checkbox-style mt-4 ps-4"> 2530 <input class="form-check-input" type="checkbox" name="pdpa" value="Accept" required> 2531 <label class="form-check-label" for="flexCheckChecked"> 2532 I have read, understood and accepted the personal data protection notification 2533 </label> 2534 </div> 2535 <div class="col-md-12 my-4"> 2536 <button id="formSubmitButton" class="submit-registration" type="submit">SUBMIT</button> 2537 </div> 2538 </div> 2539 </div> 2540 <input type="hidden" name="utm_source" id="utm_source" value=""> 2541 <input type="hidden" name="utm_medium" id="utm_medium" value=""> 2542 <input type="hidden" name="utm_campaign" id="utm_campaign" value=""> 2543 <input type="hidden" name="utm_term" id="utm_term" value=""> 2544 <input type="hidden" name="utm_content" id="utm_content" value=""> 2545 </div> 2546 </form> 2547 </div> 2548 <div class="col-xxl-2 col-md-3 d-none"> 2549 <img class="d-none d-md-block" style="width: 100%; height:100%; z-index:1" src="https://tropicanaalam.com.my/assets-3/image/RIGHT BIRD.png" alt=""> 2550 </div> 2551 </div> 2552</section><!-- End Contact Section --> 2553<style> 2554 .contact{ 2555 background-color: #ACD279; 2556 } 2557 .contact .registration-form input, .contact .registration-form select { 2558 background-color: transparent !important; 2559 color: rgb(0, 0, 0) !important; 2560 border-bottom: 1px solid rgb(0, 0, 0); 2561 } 2562 .form-control::placeholder, 2563 .form-select::placeholder { 2564 color: #000000 !important; /* Change to any color you want */ 2565 font-size: 14px !important; /* Adjust size as needed */ 2566 /* font-style: italic; Optional */ 2567 opacity: 1; /* Ensure visibility across browsers */ 2568 } 2569 2570 /* Optional: focus style */ 2571 .form-control:focus::placeholder { 2572 color: #000000; 2573 font-size: 13px; 2574 2575 } 2576 .contact .registration-form label { 2577 font-size: 13px; 2578 color: #000000; 2579 } 2580 .contact .registration-form .submit-registration { 2581 background: #E5722B; 2582 border: 0; 2583 padding: 10px 24px; 2584 color: #ffffff; 2585 transition: 0.4s; 2586 width: 100%; 2587 } 2588 2589 .icon-display:hover { 2590 background-color: #be662f; 2591 } 2592 .icon-display { 2593 background-color: #E5722B; 2594 } 2595 .g-color{ 2596 color: #08664E !important; 2597 } 2598 2599 .bold{ 2600 font-weight: 700 !important; 2601 } 2602 2603</style> 2604
2605<script> 2606 // Helper to get URL parameters 2607 function getUTMParam(param) { 2608 const urlParams = new URLSearchParams(window.location.search); 2609 return urlParams.get(param) || ''; 2610 } 2611 2612 // Populate hidden inputs 2613 document.addEventListener("DOMContentLoaded", function () { 2614 const utmFields = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']; 2615 utmFields.forEach(function (field) { 2616 const value = getUTMParam(field); 2617 if (value) { 2618 const input = document.getElementById(field); 2619 if (input) { 2620 input.value = value; 2621 } 2622 } 2623 }); 2624 }); 2625</script>
2625 2626 2627</main><!-- End #main --> 2628 2629<!-- ======= Footer ======= --> 2630<footer id="footer"> 2631 <div class="footer-top"> 2632 <div class="container"> 2633 <div class="row py-2"> 2634 <div class="col-md-7 d-flex justify-content-start "> 2635 <div class="footer-info"> 2636 <p> 2637 © 2024 - Tropicana Alam Sdn Bhd (201101012889 (941029-T)). 2638 All Rights Reserved | <a href="https://www.tropicanacorp.com.my/terms-and-conditions">Disclaimer</a> | <a href="https://www.tropicanacorp.com.my/privacy-policy">Privacy Policy</a> | <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">APDL</a> 2639 </p> 2640 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 2641 <div class="modal-dialog"> 2642 <div class="modal-content"> 2643 <div class="modal-header"> 2644 <h5 class="modal-title" id="exampleModalLabel" style="color: black">APDL</h5> 2645 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 2646 </div> 2647 <div class="modal-body"> 2648 Developer: Tropicana Alam Sdn Bhd (201101012889 (941029-T)) ⢠Developerâs 2649 Address: Unit 1301, Level 13, Tropicana Gardens Office Tower, No. 2A, Persiaran Surian, 2650 Tropicana Indah, 47810 Petaling Jaya, Selangor. ⢠Developerâs Licence No.: 30595/10-2028/0270( N ) ⢠2651 Validity: 25/10/2023 â 24/10/2028 ⢠Advertising & Sale Permit No.: 30595-1/02-2026/0202(N)-(L) ⢠2652 Validity: 29/02/2024 â 28/02/2026 ⢠Approving Authority: Majlis Perbandaran Kuala Selangor ⢠2653 Building Plan Ref No.: Bil. (14) dlm MPKS 200.11/280/4/12/2023-09 ⢠Expected Completion Date: 2654 February 2027 ⢠Land Tenure: 99 Years (Expiry: 27/05/2103) ⢠Land Encumbrances: Malayan Banking 2655 Berhad ⢠Type of House: 2-Storey Terrace Homes ⢠Total Units: 431 Units (2-Storey Terrace Homes 2656 (20âx70â) â 399 Units ; 2-Storey Terrace Homes (22âx70â) â 32 Units) ⢠Selling Price: 2-Storey Terrace 2657 Homes (20âx70â): RM814,800 (Min.) â RM1,138,800 (Max.); 2-Storey Terrace Homes (22âx70â): RM1,186,800 2658 (Min.) â RM1,480,800 (Max.) ⢠Built-up Area: 2-Storey Terrace Homes (20âx70â): 1,917sq.ft (Min.) â 2,037sq.ft 2659 (Max.); 2-Storey Terrace Homes (22âx70â): 2,239sq.ft (Min.) â 2,324sq.ft (Max.) ⢠7% Bumiputera Discount ⢠2660 Restriction in Interest: Nil ⢠Express Condition: The Land cannot be transferred, leased, or charged except 2661 with the consent of the State Authority. 2662 </div> 2663 </div> 2664 </div> 2665 </div> 2666 </div> 2667 </div> 2668 <div class="col-md-5 d-flex justify-content-end"> 2669 <div class="footer-info"> 2670 <img width="200px" src="https://tropicanaalam.com.my/assets-1/logo/Tropicana-Corp_Logo-2048x357.png" alt=""> 2671 </div> 2672 </div> 2673 </div> 2674 </div> 2675 </div> 2676 2677 2678</footer><!-- End Footer --> 2679 2680<!-- <div id="preloader"></div> --> 2681<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="fa-solid fa-arrow-up"></i></a> 2682 2683<!-- Vendor JS Files -->
2684<script src="https://tropicanaalam.com.my/assets/vendor/purecounter/purecounter_vanilla.js"></script>
vendor: 1 bytes, line 2684
2684
2685<script src="https://tropicanaalam.com.my/assets/vendor/aos/aos.js"></script>
2685 2686
2687<script src="https://tropicanaalam.com.my/assets/vendor/glightbox/js/glightbox.min.js"></script>
vendor: 1 bytes, line 2687
2687
2688<script src="https://tropicanaalam.com.my/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
vendor: 1 bytes, line 2688
2688
2689<script src="https://tropicanaalam.com.my/assets/vendor/swiper/swiper-bundle.min.js"></script>
vendor: 1 bytes, line 2689
2689
2690<script src="https://tropicanaalam.com.my/assets/vendor/php-email-form/validate.js"></script>
2690 2691 2692<!-- Template Main JS File -->
2693<script src="https://tropicanaalam.com.my/assets/js/main.js"></script>
2693 2694
2695<script> 2696document.addEventListener('DOMContentLoaded', function() { 2697 // Floating menu toggle functionality 2698 const floatingMenuToggle = document.getElementById('floatingMenuToggle'); 2699 const floatingMenuBar = document.getElementById('floatingMenuBar'); 2700 2701 if (floatingMenuToggle && floatingMenuBar) { 2702 function toggleMenu(e) { 2703 e.preventDefault(); 2704 e.stopPropagation(); 2705 floatingMenuBar.classList.toggle('collapsed'); 2706 const icon = floatingMenuToggle.querySelector('.toggle-icon'); 2707 if (floatingMenuBar.classList.contains('collapsed')) { 2708 icon.textContent = 'â°'; 2709 } else { 2710 icon.textContent = 'â'; 2711 } 2712 } 2713 2714 // Add both click and touchend for mobile support 2715 floatingMenuToggle.addEventListener('click', toggleMenu); 2716 floatingMenuToggle.addEventListener('touchend', function(e) { 2717 e.preventDefault(); 2718 e.stopPropagation(); 2719 toggleMenu(e); 2720 }, { passive: false }); 2721 2722 // Make menu items work on mobile 2723 const menuItems = floatingMenuBar.querySelectorAll('.floating-menu-bar-item'); 2724 menuItems.forEach(item => { 2725 item.addEventListener('touchend', function(e) { 2726 e.preventDefault(); 2727 const href = this.getAttribute('href'); 2728 const target = this.getAttribute('target'); 2729 if (href) { 2730 if (target === '_blank') { 2731 window.open(href, '_blank'); 2732 } else { 2733 window.location.href = href; 2734 } 2735 } 2736 }, { passive: false }); 2737 }); 2738 } 2739 2740 // Add CSS to disable scrolling during loading 2741 const style = document.createElement('style'); 2742 style.textContent = ` 2743 body.loading { 2744 overflow: hidden; 2745 height: 100vh; 2746 } 2747 `; 2748 document.head.appendChild(style); 2749 2750 // Initialize AOS animations 2751 if (typeof AOS !== 'undefined') { 2752 AOS.init({ 2753 once: true, 2754 offset: 100, 2755 duration: 800, 2756 easing: 'ease-out' 2757 }); 2758 } 2759 2760 // Create custom scrollbar 2761 const customScrollbar = document.createElement('div'); 2762 customScrollbar.className = 'custom-scrollbar'; 2763 const scrollbarTrack = document.createElement('div'); 2764 scrollbarTrack.className = 'custom-scrollbar-track'; 2765 const scrollbarThumb = document.createElement('div'); 2766 scrollbarThumb.className = 'custom-scrollbar-thumb'; 2767 customScrollbar.appendChild(scrollbarTrack); 2768 customScrollbar.appendChild(scrollbarThumb); 2769 document.body.appendChild(customScrollbar); 2770 2771 function updateCustomScrollbar() { 2772 const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; 2773 const scrollTop = window.scrollY || document.documentElement.scrollTop; 2774 const scrollPercent = scrollHeight > 0 ? scrollTop / scrollHeight : 0; 2775 const thumbHeight = Math.max(40, window.innerHeight * (window.innerHeight / document.documentElement.scrollHeight)); 2776 const thumbTop = scrollPercent * (window.innerHeight - thumbHeight); 2777 2778 scrollbarThumb.style.height = thumbHeight + 'px'; 2779 scrollbarThumb.style.transform = 'translateY(' + thumbTop + 'px)'; 2780 } 2781 2782 window.addEventListener('scroll', updateCustomScrollbar, { passive: true }); 2783 window.addEventListener('resize', updateCustomScrollbar); 2784 updateCustomScrollbar(); 2785 2786 // Show custom scrollbar on hover near right edge 2787 document.addEventListener('mousemove', function(e) { 2788 const isNearRightEdge = window.innerWidth - e.clientX <= 40; 2789 if (isNearRightEdge) { 2790 customScrollbar.classList.add('visible'); 2791 } else { 2792 customScrollbar.classList.remove('visible'); 2793 } 2794 }); 2795 2796 // Make custom scrollbar draggable 2797 let isDragging = false; 2798 let startY = 0; 2799 let startScrollTop = 0; 2800 2801 scrollbarThumb.addEventListener('mousedown', function(e) { 2802 isDragging = true; 2803 startY = e.clientY; 2804 startScrollTop = window.scrollY || document.documentElement.scrollTop; 2805 document.body.style.userSelect = 'none'; 2806 }); 2807 2808 document.addEventListener('mousemove', function(e) { 2809 if (!isDragging) return; 2810 const deltaY = e.clientY - startY; 2811 const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
2812 const thumbHeight = Math.max(40, window.innerHeight * (window.innerHeight / document.documentElement.scrollHeight)); 2813 const scrollRatio = deltaY / (window.innerHeight - thumbHeight); 2814 window.scrollTo(0, Math.max(0, Math.min(scrollHeight, startScrollTop + scrollRatio * scrollHeight))); 2815 }); 2816 2817 document.addEventListener('mouseup', function() { 2818 isDragging = false; 2819 document.body.style.userSelect = ''; 2820 }); 2821 2822 // Function to hide loading screen 2823 function hideLoadingScreen() { 2824 document.body.classList.remove('loading'); 2825 document.body.classList.add('loaded'); 2826 2827 // Remove loading screen after animation 2828 setTimeout(function() { 2829 const loadingScreen = document.getElementById('page-loading'); 2830 if (loadingScreen) { 2831 loadingScreen.remove(); 2832 } 2833 }, 500); 2834 2835 // Trigger popup banners after loading is complete 2836 window.dispatchEvent(new Event('pageContentLoaded')); 2837 } 2838 2839 // Fine load - wait for all images to load before hiding loading screen 2840 const images = document.querySelectorAll('img'); 2841 let loadedImages = 0; 2842 const totalImages = images.length; 2843 2844 function checkAllImagesLoaded() { 2845 loadedImages++; 2846 if (loadedImages === totalImages) { 2847 // All images loaded, hide loading screen 2848 hideLoadingScreen(); 2849 } 2850 } 2851 2852 if (totalImages > 0) { 2853 images.forEach(function(img) { 2854 if (img.complete) { 2855 checkAllImagesLoaded(); 2856 } else { 2857 img.addEventListener('load', checkAllImagesLoaded); 2858 img.addEventListener('error', checkAllImagesLoaded); // Count errors as loaded to prevent infinite wait 2859 } 2860 }); 2861 } else { 2862 // No images on page, hide loading screen immediately 2863 hideLoadingScreen(); 2864 } 2865 2866 // Fallback: hide loading screen after 5 seconds max (in case of slow/broken images) 2867 setTimeout(function() { 2868 if (document.body.classList.contains('loading')) { 2869 hideLoadingScreen(); 2870 } 2871 }, 5000); 2872 2873 // Floating icon bar: move below the opened corner menu 2874 const cornerMenu = document.getElementById('cornerMenu'); 2875 const floatingBar = document.getElementById('floatingMenuBar'); 2876 2877 if (cornerMenu && floatingBar) { 2878 cornerMenu.addEventListener('shown.bs.collapse', function () { 2879 const panel = cornerMenu.querySelector('.corner-menu-panel'); 2880 const menuHeight = panel ? panel.offsetHeight : 0; 2881 const toggleOffset = 76; 2882 floatingBar.style.top = (toggleOffset + menuHeight + 12) + 'px'; 2883 floatingBar.classList.add('menu-open'); 2884 }); 2885 2886 cornerMenu.addEventListener('hide.bs.collapse', function () { 2887 floatingBar.style.top = ''; 2888 floatingBar.classList.remove('menu-open'); 2889 }); 2890 } 2891 2892 // Make floating menu bar draggable (vertical only) 2893 if (floatingBar) { 2894 let isDragging = false; 2895 let startY = 0; 2896 let startTop = 0; 2897 2898 floatingBar.addEventListener('mousedown', function(e) { 2899 isDragging = true; 2900 startY = e.clientY; 2901 const rect = floatingBar.getBoundingClientRect(); 2902 startTop = rect.top; 2903 floatingBar.style.cursor = 'grabbing'; 2904 e.preventDefault(); 2905 }); 2906 2907 document.addEventListener('mousemove', function(e) { 2908 if (!isDragging) return; 2909 2910 const deltaY = e.clientY - startY; 2911 let newTop = startTop + deltaY; 2912 2913 // Constrain within viewport 2914 const maxTop = window.innerHeight - floatingBar.offsetHeight - 20; 2915 const minTop = 20; 2916 2917 if (newTop < minTop) newTop = minTop; 2918 if (newTop > maxTop) newTop = maxTop; 2919 2920 floatingBar.style.top = newTop + 'px'; 2921 }); 2922 2923 document.addEventListener('mouseup', function() { 2924 if (isDragging) { 2925 isDragging = false; 2926 floatingBar.style.cursor = 'grab'; 2927 } 2928 }); 2929 2930 // Touch support for mobile 2931 floatingBar.addEventListener('touchstart', function(e) { 2932 isDragging = true; 2933 startY = e.touches[0].clientY; 2934 const rect = floatingBar.getBoundingClientRect(); 2935 startTop = rect.top; 2936 e.preventDefault(); 2937 }); 2938 2939 document.addEventListener('touchmove', function(e) { 2940 if (!isDragging) return; 2941 2942 const deltaY = e.touches[0].clientY - startY; 2943 let newTop = startTop + deltaY; 2944 2945 const maxTop = window.innerHeight - floatingBar.offsetHeight - 20; 2946 const minTop = 20; 2947 2948 if (newTop < minTop) newTop = minTop; 2949 if (newTop > maxTop) newTop = maxTop; 2950 2951 floatingBar.style.top = newTop + 'px'; 2952 }); 2953 2954 document.addEventListener('touchend', function() { 2955 isDragging = false;
2956 }); 2957 } 2958}); 2959</script>
2959 2960
2961<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"2516ab58592b49609b55b4088fc3c6ed","r":1,"spa":2}' crossorigin="anonymous"></script>
2961 2962</body> 2963 2964</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.