Spaces:
Running
Running
| <style> | |
| h1 { | |
| align: center; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| li { | |
| display: inline-block; | |
| margin-right: 10px; | |
| /* add spacing between items */ | |
| } | |
| a { | |
| text-align: center; | |
| display: block; | |
| } | |
| </style> | |
| <body> | |
| <h1 align="center">WebAI Demos (Gallery Mode)</h1> | |
| <script src="demos.js"></script> | |
| <script> | |
| ; | |
| const demosElem = document.createElement('div'); | |
| document.body.appendChild(demosElem); | |
| demosElem.style.width = screen.width; | |
| demosElem.style.height = screen.height; | |
| for (const { name, description, demos } of categoryDemos) { | |
| const ul = document.createElement('ul'); | |
| const h2 = document.createElement('h2'); | |
| h2.textContent = name; | |
| ul.appendChild(h2); | |
| for (const [key, demoInfo] of Object.entries(demos)) { | |
| const li = document.createElement('li'); | |
| const video = document.createElement('video'); | |
| video.width = 600; | |
| video.height = 600; | |
| if (demoInfo.video) { | |
| video.src = `demos/${key}/${demoInfo.video}`; | |
| } else { | |
| video.src = 'video-na.mp4'; | |
| } | |
| video.autoplay = true; | |
| video.muted = true; | |
| video.loop = true; | |
| video.controls = true; | |
| const a = document.createElement('a'); | |
| a.href = `demos/${demoInfo.filename}`; | |
| a.textContent = `${demoInfo.name || key}${demoInfo.openInNewTab ? '' : ''}`; | |
| a.style.fontSize = 28; | |
| if (demoInfo.openInNewTab) { | |
| a.target = '_blank'; | |
| } else { | |
| a.onclick = (e) => { | |
| setSampleIFrameURL(e, demoInfo); | |
| }; | |
| } | |
| li.appendChild(video); | |
| li.appendChild(a); | |
| ul.appendChild(li); | |
| } | |
| demosElem.appendChild(ul); | |
| } | |
| </script> | |
| </body> |