| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>拡大表示 - 授業支援</title> |
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| background: #000; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| overflow: hidden; |
| } |
| #videoContainer { |
| width: 100%; |
| height: 100%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| video, img { |
| max-width: 100%; |
| max-height: 100%; |
| object-fit: contain; |
| } |
| .toolbar { |
| position: fixed; |
| bottom: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| background: rgba(0,0,0,0.7); |
| color: white; |
| padding: 8px 16px; |
| border-radius: 32px; |
| display: flex; |
| gap: 16px; |
| z-index: 100; |
| } |
| button { |
| background: #01579B; |
| border: none; |
| color: white; |
| padding: 6px 12px; |
| border-radius: 20px; |
| cursor: pointer; |
| } |
| .hidden { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="app"> |
| <div id="videoContainer"> |
| <video id="remoteVideo" autoplay muted style="width:100%; height:100%;"></video> |
| <img id="remoteImage" style="display:none; max-width:100%; max-height:100%;"> |
| </div> |
| <div class="toolbar" v-show="showToolbar" @mouseleave="hideToolbarDelayed"> |
| <span>{{ targetName }}</span> |
| <button @click="closeWindow">閉じる</button> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> |
| <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script> |
| <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script> |
| <script src="firebase-config.js"></script> |
| <script src="oneClient.js"></script> |
| </body> |
| </html> |
