Spaces:
Sleeping
Sleeping
| <!-- | |
| Copyright 2024 The Google Research Authors. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | |
| <title>Démo visite virtuelle</title> | |
| <link rel="stylesheet" href="style/style.css"> | |
| <link rel="stylesheet" href="style/property_info.css"> | |
| <link rel="stylesheet" href="style/controls.css"> | |
| <link rel="stylesheet" href="style/chatbot.css"> | |
| <link rel="stylesheet" href="style/viewer.css"> | |
| <!-- Lien vers Font Awesome pour les icônes --> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="logo-container"> | |
| <span>Votre Logo</span> | |
| </div> | |
| <section | |
| id="viewer-container" | |
| > | |
| <div id="Loading"> | |
| <h4> | |
| <span id="image-progress">Loading images: 0/?</span> | |
| </h4> | |
| </div> | |
| <div id=error></div> | |
| <div | |
| id="viewspacecontainer" | |
| > | |
| <div | |
| id="view" class="viewspace" | |
| ></div> | |
| <textarea readonly id="benchmark-stats" rows="40" cols="40"> | |
| Click me to start benchmarking when the frame-rate is behaving reasonably. | |
| </textarea> | |
| <div id="loading-container"> | |
| <div id="topleft" class="loading-bgbox"></div> | |
| <div id="bottomleft" class="loading-bgbox"></div> | |
| <div id="topright" class="loading-bgbox"></div> | |
| <div id="bottomright" class="loading-bgbox"></div> | |
| <div id="loading-indicator"></div> | |
| </div> | |
| </div> | |
| <textarea id="shader-editor" rows="50" cols="200"></textarea> | |
| </section> | |
| <div class="info-tab"> | |
| <button id="controls-button" class="controls-button" aria-label="Voir les contrôles"> | |
| <i class="fa-solid fa-keyboard"></i> | |
| </button> | |
| <!-- Bouton avec icône d'information --> | |
| <button id="info-toggle" class="info-toggle" aria-label="Afficher les informations"> | |
| <span class="icon-container"> | |
| <i class="fas fa-info-circle"></i> | |
| </span> | |
| </button> | |
| <div class="info-card"> | |
| <h2>Informations sur la visite</h2> | |
| <p><strong>Nom :</strong> <span id="visitName">Loading...</span></p> | |
| <p><strong>Adresse :</strong> <span id="address">Loading...</span></p> | |
| <p><strong>Propriétaire :</strong> <span id="owner">Loading...</span></p> | |
| <p><strong>Prix :</strong> <span id="price">Loading...</span></p> | |
| <p><strong>Description :</strong> <span id="description-content">Loading...</span></p> | |
| </div> | |
| <div class="info-card hidden" id="controls-card"> | |
| <h2>Des contrôles simples !</h2> | |
| <div class="control-instruction"> | |
| <i class="fa-solid fa-walking"></i> | |
| <span>Maintenez <strong>clic gauche</strong> pour avancer</span> | |
| </div> | |
| <div class="control-instruction"> | |
| <i class="fa-solid fa-compass"></i> | |
| <span>Déplacez la souris pour tourner la caméra</span> | |
| </div> | |
| <div class="control-instruction"> | |
| <i class="fa-solid fa-hand-paper"></i> | |
| <span>Relâchez le clic pour arrêter le mouvement</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="assistant-tab"> | |
| <button id="assistant-button" class="assistant-button" aria-label="Chatbot/Majordome"> | |
| <i class="fa-solid fa-user-tie"></i> | |
| </button> | |
| <div class="assistant-card hidden" id="assistant-card"> | |
| <div class="assistant-message assistant-chatbot"> | |
| <strong>Majordome:</strong> Bonjour, comment puis-je vous aider ? | |
| </div> | |
| <div class="assistant-message assistant-visitor"> | |
| <strong>Visiteur:</strong> Où est la cuisine ? | |
| </div> | |
| <div class="assistant-message assistant-chatbot"> | |
| <strong>Majordome:</strong> Je vais vous montrer. | |
| <span class="action-link" onclick="goToKitchen()">Venez avec moi</span>. | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const infoTab = document.querySelector('.info-tab'); | |
| const toggleButton = document.getElementById('info-toggle'); | |
| const controlsButton = document.getElementById('controls-button'); | |
| const infoCard = document.querySelector('.info-card'); | |
| const controlsCard = document.getElementById('controls-card'); | |
| if (!infoTab || !toggleButton || !controlsButton || !infoCard || !controlsCard) { | |
| console.error('Un ou plusieurs éléments nécessaires sont introuvables.'); | |
| return; | |
| } | |
| // Basculer entre afficher/cacher la carte d'informations | |
| toggleButton.addEventListener('click', () => { | |
| console.log('bouton cliqué'); | |
| const isInfoVisible = !infoCard.classList.contains('hidden'); | |
| infoCard.classList.toggle('hidden', isInfoVisible); | |
| controlsCard.classList.add('hidden'); | |
| // Gestion des boutons actifs | |
| toggleButton.classList.toggle('active', !isInfoVisible); | |
| controlsButton.classList.remove('active'); | |
| infoTab.classList.toggle('open', !isInfoVisible); | |
| }); | |
| controlsButton.addEventListener('click', () => { | |
| console.log('bouton cliqué'); | |
| const isControlsVisible = !controlsCard.classList.contains('hidden'); | |
| controlsCard.classList.toggle('hidden', isControlsVisible); | |
| infoCard.classList.add('hidden'); | |
| // Gestion des boutons actifs | |
| controlsButton.classList.toggle('active', !isControlsVisible); | |
| toggleButton.classList.remove('active'); | |
| infoTab.classList.toggle('open', !isControlsVisible); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const assistantTab = document.querySelector('.assistant-tab'); | |
| const assistantButton = document.getElementById('assistant-button'); | |
| const assistantCard = document.getElementById('assistant-card'); | |
| if (!assistantTab || !assistantButton || !assistantCard) { | |
| console.error('Un ou plusieurs éléments nécessaires sont introuvables.'); | |
| return; | |
| } | |
| // Basculer entre afficher/cacher la carte | |
| assistantButton.addEventListener('click', () => { | |
| console.error('bouton cliqué'); | |
| assistantTab.classList.toggle('open'); | |
| assistantCard.classList.toggle('hidden'); | |
| }); | |
| }); | |
| // Fonction pour aller à la cuisine (exemple) | |
| function goToKitchen() { | |
| console.log("Déplacement vers la cuisine..."); | |
| // Implémentez ici la logique pour déplacer la caméra vers la position de la cuisine | |
| } | |
| </script> | |
| <!-- third party --> | |
| <script src="https://unpkg.com/three@0.113.1/build/three.js"></script> | |
| <script src="https://unpkg.com/three@0.113.1/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://unpkg.com/three@0.113.1/examples/js/controls/PointerLockControls.js"></script> | |
| <script src="https://unpkg.com/three@0.113.1/examples/js/controls/TransformControls.js"></script> | |
| <!-- <script src="https://unpkg.com/png-js@1.0.0/zlib.js"></script> --> | |
| <!-- <script src="https://unpkg.com/png-js@1.0.0/png.js"></script> --> | |
| <script src="https://unpkg.com/stats-js@1.0.1/build/stats.min.js"></script> | |
| <script src="https://unpkg.com/file-saver@2.0.0-rc.2/dist/FileSaver.min.js"></script> | |
| <script scr="deps/zlib.js"></script> | |
| <script scr="deps/png.js"></script> | |
| <!-- type="module" <script type="module" src="deps/stats.min.js"></script> type="module" --> | |
| <!-- type="module" own type="module" code--> | |
| <script src="js/scene_spec.js"></script> | |
| <script src="js/fetch_asset.js"></script> | |
| <script src="js/create_texture.js"></script> | |
| <script src="js/prepare_payload.js"></script> | |
| <script src="js/populate_texture.js"></script> | |
| <script src="js/texture_manager.js"></script> | |
| <script src="js/worker_pool.js"></script> | |
| <script src="js/globals.js"></script> | |
| <script src="js/utils.js"></script> | |
| <script src="js/progressive.js"></script> | |
| <script src="js/viewdependency.js"></script> | |
| <script src="js/defaultposes.js"></script> | |
| <script src="js/input.js"></script> | |
| <script src="js/benchmark.js"></script> | |
| <script src="js/property_info.js"></script> | |
| <script src="js/index.js"></script> | |
| </body> | |
| </html> | |