File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/costavista.in/360-degree-view/index.php
Back
<!DOCTYPE html> <html lang="zxx"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>360 View | Costa Vista Beach Resort</title> <link rel="shortcut icon" href="img/favicon.png" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed&family=Gilda+Display&display=swap"> <link rel="stylesheet" href="css/plugins.css" /> <link rel="stylesheet" href="css/style.css" /> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Font Awesome for icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <!-- Pannellum CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"> <style> .gallery-item { margin-bottom: 30px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); background: white; padding-top: 0px; } .jumbotron { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border-radius: 10px; margin-bottom: 30px; } .gallery-item { margin-bottom: 30px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background: white; } .viewer-container { position: relative; width: 100%; height: 500px; border-radius: 10px 10px 0 0; overflow: hidden; } .panorama-viewer { width: 100%; height: 100%; } .card-body { padding: 20px; } .card-title { font-weight: 600; margin-bottom: 10px; color: #343a40; } .card-text { color: #6c757d; margin-bottom: 15px; } .controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .control-btn { border-radius: 50px; padding: 8px 15px; font-size: 0.9rem; } .badge-360 { position: absolute; top: 15px; right: 15px; background: rgba(106, 17, 203, 0.9); color: white; padding: 5px 12px; border-radius: 50px; font-size: 0.8rem; z-index: 10; } .instructions { background-color: white; border-radius: 10px; padding: 25px; margin-top: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .instructions h3 { color: #343a40; margin-bottom: 15px; } .instructions ul { padding-left: 20px; } #imageGallery{ align-items: center; justify-content: center; } .instructions li { margin-bottom: 8px; } @media (max-width: 768px) { .viewer-container { height: 300px; } } @media (max-width: 576px) { .viewer-container { height: 250px; } .control-btn { padding: 6px 12px; font-size: 0.8rem; } } </style> </head> <body> <?php include 'include/header.php'?> <div class="banner-header section-padding valign bg-img bg-fixed" data-overlay-dark="4" data-background="img/bg/1.jpg"> <div class="container"> <div class="row"> <div class="col-md-12 caption mt-90"> <!--<h5>Costa Vista Beach Resort</h5>--> <h1>360 View</h1> </div> </div> </div> </div> <section class="about section-padding bg-cream"><br> <div class="container"> <div class="row"> <div class="col-md-12"> <!-- Gallery Section --> <div class="row" id="imageGallery"> <!-- Gallery items will be populated by JavaScript --> </div> </div> </div> </section> <!-- 360 Viewer Modal --> <!-- 360 Viewer Modal --> <div class="modal fade" id="viewerModal" tabindex="-1" role="dialog" aria-labelledby="viewerModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="viewerModalLabel">360-Degree Viewer</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" style="color: white;">×</span> </button> </div> <div class="modal-body"> <div id="panorama"></div> </div> <div class="controls text-center"> <button class="btn btn-primary control-btn" id="autoRotate"> <i class="fas fa-sync-alt"></i> Auto Rotate </button> <button class="btn btn-info control-btn" id="fullscreen"> <i class="fas fa-expand"></i> Fullscreen </button> <button class="btn btn-secondary control-btn" id="resetView"> <i class="fas fa-redo"></i> Reset View </button> </div> </div> </div> </div> <?php include 'include/footer.php'?> <!-- Bootstrap & jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> <!-- Pannellum Library --> <script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script> <script> // Sample 360-degree images (replace with your own image URLs) const images = [ /*{ id: 'image7', url: 'img/gallery/1.jpg', title: 'Exterior' }, { id: 'image8', url: 'img/gallery/2.jpg', title: 'Exterior' },*/ { id: 'image9', url: 'img/gallery/3.jpg', title: 'Exterior' }, { id: 'image10', url: 'img/gallery/4.jpg', title: 'Exterior' }, /*{ id: 'image1', url: 'img/gallery/14.jpg', title: 'Swimming Pool' }, { id: 'image1', url: 'img/gallery/15.jpg', title: 'Swimming Pool' },*/ { id: 'image1', url: 'img/gallery/16.jpg', title: 'Swimming Pool' }, { id: 'image1', url: 'img/gallery/17.jpg', title: 'Swimming Pool' }, /*{ id: 'image5', url: 'img/gallery/5.jpg', title: 'Lawn' }, { id: 'image6', url: 'img/gallery/6.jpg', title: 'Lawn' },*/ { id: 'image3', url: 'img/gallery/7.jpg', title: 'Lawn' }, { id: 'image4', url: 'img/gallery/8.jpg', title: 'Living Area' }, { id: 'image11', url: 'img/gallery/9.jpg', title: 'Living Area' }, /* { id: 'image12', url: 'img/gallery/10.jpg', title: 'Living Area' }, { id: 'image13', url: 'img/gallery/11.jpg', title: 'Living Area' },*/ { id: 'image1', url: 'img/gallery/12.jpg', title: 'Living Area' }, { id: 'image2', url: 'img/gallery/13.jpg', title: 'Living Area' }, { id: 'image1', url: 'img/gallery/24.jpg', title: 'Sea View Terrace' }, { id: 'image1', url: 'img/gallery/25.jpg', title: 'Sea View Terrace' }, /*{ id: 'image1', url: 'img/gallery/26.jpg', title: 'Sea View Terrace' },*/ { id: 'image1', url: 'img/gallery/18.jpg', title: 'Bedroom' }, { id: 'image1', url: 'img/gallery/19.jpg', title: 'Bedroom' }, { id: 'image1', url: 'img/gallery/20.jpg', title: 'Bathroom' }, { id: 'image1', url: 'img/gallery/21.jpg', title: 'Bathroom' } /*{ id: 'image1', url: 'img/gallery/22.jpg', title: 'Bathroom' }, { id: 'image1', url: 'img/gallery/23.jpg', title: 'Bathroom' }*/ ]; // Object to store all viewer instances const viewers = {}; // Initialize the gallery when the page loads document.addEventListener('DOMContentLoaded', function() { populateGallery(); }); // Populate the gallery with images function populateGallery() { const gallery = document.getElementById('imageGallery'); images.forEach((image, index) => { const col = document.createElement('div'); col.className = 'col-md-6 col-lg-10'; col.id = `gallery-item-${index}`; col.innerHTML = ` <div class="gallery-item"> <div class="viewer-container"> <span class="badge-360">${image.title}</span> <div id="panorama-${index}" class="panorama-viewer"></div> </div> </div> `; gallery.appendChild(col); // Initialize the viewer for this image initViewer(index, image.url, image.title); }); // Add event listeners to control buttons setupControlButtons(); } // Initialize a panorama viewer function initViewer(index, imageUrl, imageTitle) { viewers[index] = pannellum.viewer(`panorama-${index}`, { "type": "equirectangular", "panorama": imageUrl, "autoLoad": true, "autoRotate": false, "autoRotateInactivityDelay": 3000, "autoRotateStopDelay": 0, "showControls": false, "mouseZoom": true, "hfov": 190, "compass": false }); } // Set up control button event listeners function setupControlButtons() { // Auto rotate buttons document.querySelectorAll('.auto-rotate-btn').forEach(button => { button.addEventListener('click', function() { const viewerIndex = this.getAttribute('data-viewer'); if (viewers[viewerIndex]) { viewers[viewerIndex].toggleAutoRotate(); this.classList.toggle('btn-success'); } }); }); // Fullscreen buttons document.querySelectorAll('.fullscreen-btn').forEach(button => { button.addEventListener('click', function() { const viewerIndex = this.getAttribute('data-viewer'); if (viewers[viewerIndex]) { viewers[viewerIndex].toggleFullscreen(); } }); }); // Reset view buttons document.querySelectorAll('.reset-view-btn').forEach(button => { button.addEventListener('click', function() { const viewerIndex = this.getAttribute('data-viewer'); if (viewers[viewerIndex]) { viewers[viewerIndex].setPitch(0); viewers[viewerIndex].setYaw(0); viewers[viewerIndex].setHfov(190); } }); }); } </script> <!-- jQuery --> <script src="js/jquery-3.6.0.min.js"></script> <script src="js/jquery-migrate-3.0.0.min.js"></script> <script src="js/modernizr-2.6.2.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/jquery.isotope.v3.0.2.js"></script> <script src="js/pace.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/scrollIt.min.js"></script> <script src="js/jquery.waypoints.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/jquery.stellar.min.js"></script> <script src="js/jquery.magnific-popup.js"></script> <script src="js/YouTubePopUp.js"></script> <script src="js/select2.js"></script> <script src="js/datepicker.js"></script> <script src="js/smooth-scroll.min.js"></script> <script src="js/custom.js"></script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.03 |
proxy
|
phpinfo
|
Settings