Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>HTML Encoder/Decoder</title> | |
| <style> | |
| body { | |
| background: #E0F7FA; | |
| color: #00274D; | |
| font-family: 'Courier New', monospace; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| textarea { | |
| background: rgba(0, 0, 0, 0.7); | |
| border: 1px solid #00FFFF; | |
| color: #00FFFF; | |
| font-size: 16px; | |
| padding: 10px; | |
| width: 80%; | |
| max-width: 600px; | |
| border-radius: 5px; | |
| box-shadow: 0 0 10px #00FFFF; | |
| } | |
| button { | |
| background: #000; | |
| border: 2px solid #00FFFF; | |
| color: #00FFFF; | |
| font-size: 18px; | |
| padding: 10px 20px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| transition: 0.3s; | |
| box-shadow: 0 0 15px #00FFFF; | |
| } | |
| button:hover { | |
| background: #00FFFF; | |
| color: #000; | |
| box-shadow: 0 0 20px #00FFFF, 0 0 30px #00FFFF; | |
| } | |
| #tb { | |
| display: block; | |
| margin: 20px auto; | |
| } | |
| @keyframes glow { | |
| 0% { box-shadow: 0 0 5px #00FFFF; } | |
| 50% { box-shadow: 0 0 20px #00FFFF; } | |
| 100% { box-shadow: 0 0 5px #00FFFF; } | |
| } | |
| button { | |
| animation: glow 1.5s infinite alternate; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| htmlοΌ<br> | |
| <textarea id="tb" name="tb" rows="4" cols="50"><iframe | |
| src="https://henryz-streaming-chat-with-gpt-3-5-turbo-using-l-df92eb4.hf.space/" | |
| allowfullscreen | |
| style="border:none; width:100vw; height:100vh;"> | |
| </iframe> | |
| </textarea><br> | |
| <button id="pipButton">γγ―γγ£γΌγ»γ€γ³γ»γγ―γγ£γΌ γ¦γ£γ³γγ¦γιγ</button> | |
| <script> | |
| document.getElementById('pipButton').addEventListener('click', async () => { | |
| const player = document.getElementById('player'); | |
| const pipWindow = await documentPictureInPicture.requestWindow({ | |
| width: 400, | |
| height: 300 | |
| }); | |
| let tb = document.getElementById('tb'); | |
| pipWindow.document.body.innerHTML=tb.value; | |
| pipWindow.addEventListener('pagehide', () => { | |
| document.getElementById('playerContainer').appendChild(player); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |