File manager

File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/pearlparadise.in/test.html

Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>360-Degree Image Gallery</title> <!-- 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> body { background-color: #f8f9fa; padding-top: 20px; } .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: 400px; 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; } .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> <div class="container"> <!-- Header Section --> <div class="jumbotron text-center"> <h1 class="display-4">360-Degree Image Gallery</h1> <p class="lead">Explore stunning panoramic views in immersive 360-degree format</p> <hr class="my-4"> <p>Each image below is an interactive 360-degree viewer</p> </div> <!-- Gallery Section --> <div class="row" id="imageGallery"> <!-- Gallery items will be populated by JavaScript --> </div> <!-- Instructions Section --> <div class="instructions"> <h3>How to Use the 360-Degree Viewers</h3> <ul> <li><strong>Desktop:</strong> Click and drag on any image to look around</li> <li><strong>Mobile:</strong> Touch and drag to explore the panoramic view</li> <li>Use the <strong>Auto Rotate</strong> button for automatic panoramic viewing</li> <li>Click the <strong>Fullscreen</strong> button for an immersive experience</li> <li>Use the <strong>Reset View</strong> button to return to the initial position</li> </ul> </div> </div> <!-- 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: 'image1', url: 'https://pannellum.org/images/alma.jpg', title: 'Mountain Observatory', description: 'Stunning view of the ALMA Observatory in the Chilean Andes' }, { id: 'image2', url: 'https://pannellum.org/images/cerro-toco-0.jpg', title: 'Desert Landscape', description: 'Vast desert landscape with mountains in the distance' }, { id: 'image3', url: 'https://pannellum.org/images/grand-canyon.jpg', title: 'Grand Canyon', description: 'Breathtaking panoramic view of the Grand Canyon' }, { id: 'image4', url: 'https://pannellum.org/images/rijks.jpg', title: 'Museum Interior', description: 'Historic museum interior with beautiful architecture' }, { id: 'image5', url: 'https://pannellum.org/images/equirectangular.jpg', title: 'City Skyline', description: 'Panoramic view of a modern city skyline at dusk' }, { id: 'image6', url: 'https://pannellum.org/images/alma.jpg', title: 'Mountain Range', description: 'Spectacular 360-degree view of a mountain range' } ]; // 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-4'; col.id = `gallery-item-${index}`; col.innerHTML = ` <div class="gallery-item"> <div class="viewer-container"> <span class="badge-360">360°</span> <div id="panorama-${index}" class="panorama-viewer"></div> </div> <div class="card-body"> <h5 class="card-title">${image.title}</h5> <p class="card-text">${image.description}</p> <div class="controls"> <button class="btn btn-primary control-btn auto-rotate-btn" data-viewer="${index}"> <i class="fas fa-sync-alt"></i> Auto Rotate </button> <button class="btn btn-info control-btn fullscreen-btn" data-viewer="${index}"> <i class="fas fa-expand"></i> Fullscreen </button> <button class="btn btn-secondary control-btn reset-view-btn" data-viewer="${index}"> <i class="fas fa-redo"></i> Reset </button> </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": 100, "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(100); } }); }); } </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.02 | proxy | phpinfo | Settings