Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Responsive Slide Viewer</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background-color: #f0f0f0; | |
| } | |
| .container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 1920px; | |
| aspect-ratio: 16 / 9; | |
| background: #000; | |
| overflow: hidden; | |
| border: 5px solid #444; | |
| } | |
| .top-bar { | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| background-color: #333; | |
| color: white; | |
| text-align: center; | |
| padding: 10px; | |
| z-index: 10; | |
| } | |
| .main { | |
| display: flex; | |
| height: 100%; | |
| } | |
| .side-bar { | |
| width: 100px; | |
| background-color: #444; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 20px; | |
| z-index: 10; | |
| } | |
| .side-bar button { | |
| background-color: #666; | |
| color: white; | |
| border: none; | |
| margin: 10px 0; | |
| padding: 10px; | |
| cursor: pointer; | |
| text-align: center; | |
| } | |
| .nav-buttons { | |
| margin-top: auto; | |
| } | |
| .content { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| background-color: #000; | |
| } | |
| .content img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="top-bar"> | |
| <h1 id="slide-title">Slide Viewer</h1> | |
| </div> | |
| <div class="main"> | |
| <div class="side-bar"> | |
| <button id="prev-btn">Previous</button> | |
| <button id="next-btn">Next</button> | |
| </div> | |
| <div class="content"> | |
| <img id="slide-image" src="images/01_mg.png" alt="Slide Image"> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const slideTitle = document.getElementById('slide-title'); | |
| const slideImage = document.getElementById('slide-image'); | |
| const prevBtn = document.getElementById('prev-btn'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| let data = []; | |
| let currentIndex = 0; | |
| // Fetch slide configuration | |
| async function fetchSlideConfig() { | |
| try { | |
| const response = await fetch('slide_config.json'); | |
| const jsonData = await response.json(); | |
| data = jsonData.slides; | |
| loadSlide(currentIndex); | |
| } catch (error) { | |
| console.error('Error loading slide configuration:', error); | |
| } | |
| } | |
| function loadSlide(index) { | |
| if (data.length === 0) return; | |
| const slide = data[index]; | |
| slideTitle.textContent = slide.id.replace('_', ' '); | |
| slideImage.src = slide.image; | |
| } | |
| prevBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex - 1 + data.length) % data.length; | |
| loadSlide(currentIndex); | |
| }); | |
| nextBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex + 1) % data.length; | |
| loadSlide(currentIndex); | |
| }); | |
| // Initialize | |
| fetchSlideConfig(); | |
| </script> | |
| </body> | |
| </html> | |