Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ASR.lab - Interactive reports</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body, html { | |
| height: 100%; | |
| margin: 0; | |
| overflow: hidden; | |
| background-color: #f8f9fa; | |
| } | |
| .navbar { | |
| box-shadow: 0 2px 4px rgba(0,0,0,.1); | |
| z-index: 1000; | |
| } | |
| .iframe-container { | |
| position: absolute; | |
| top: 56px; /* height of navbar */ | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .nav-link { | |
| cursor: pointer; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem ; | |
| border-bottom: 3px solid transparent; | |
| } | |
| .nav-link.active { | |
| color: #0d6efd ; | |
| border-bottom: 3px solid #0d6efd; | |
| background: transparent ; | |
| } | |
| .loading-overlay { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: white; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 999; | |
| transition: opacity 0.3s; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand navbar-light bg-white"> | |
| <div class="container-fluid"> | |
| <span class="navbar-brand mb-0 h1 text-primary">ASR.lab</span> | |
| <div class="navbar-nav mx-auto"> | |
| <a class="nav-link active" onclick="loadPage('demo_en.html', this)">demo_en</a> | |
| <a class="nav-link" onclick="loadPage('demo_fr.html', this)">demo_fr</a> | |
| <a class="nav-link" onclick="loadPage('report_resilience_en.html', this)">resilience_en</a> | |
| <a class="nav-link" onclick="loadPage('report_resilience_fr.html', this)">resilience_fr</a> | |
| <a class="nav-link" onclick="loadPage('nemo.html', this)">nemo</a> | |
| </div> | |
| <div class="d-flex"> | |
| <a href="https://github.com/berangerthomas/ASR.lab" target="_blank" class="btn btn-outline-secondary btn-sm">GitHub</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="iframe-container"> | |
| <div id="loader" class="loading-overlay hidden"> | |
| <div class="spinner-border text-primary" role="status"> | |
| <span class="visually-hidden">Chargement...</span> | |
| </div> | |
| </div> | |
| <iframe id="main-frame" src="demo_en.html" onload="hideLoader()"></iframe> | |
| </div> | |
| <script> | |
| function loadPage(url, element) { | |
| const frame = document.getElementById('main-frame'); | |
| const loader = document.getElementById('loader'); | |
| if (frame.src.endsWith(url)) return; | |
| // Update active tab | |
| document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active')); | |
| element.classList.add('active'); | |
| // Show loader and change src | |
| loader.classList.remove('hidden'); | |
| frame.src = url; | |
| } | |
| function hideLoader() { | |
| document.getElementById('loader').classList.add('hidden'); | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> | |