Spaces:
Running
Running
| <style> | |
| h1 { | |
| text-align: center; | |
| } | |
| ul { | |
| text-align:center; | |
| } | |
| li { | |
| padding-left: 30px; | |
| padding-bottom: 30px; | |
| display: inline-block; | |
| margin-right: 10px; | |
| /* add spacing between items */ | |
| } | |
| a { | |
| text-align: center; | |
| display: block; | |
| } | |
| video { | |
| width: 480px; | |
| height: 320px; | |
| border:2px solid lightgreen; | |
| box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36); | |
| object-fit: cover ; | |
| border-radius: 20px ; | |
| } | |
| .category { | |
| background-color:lightgreen; | |
| font-size: 36px; | |
| color: black; | |
| text-align: center; | |
| } | |
| </style> | |
| <body> | |
| <h1>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; | |
| h2.className = 'category'; | |
| ul.appendChild(h2); | |
| for (const [key, demoInfo] of Object.entries(demos)) { | |
| const li = document.createElement('li'); | |
| const video = document.createElement('video'); | |
| video.src = `demos/${key}/${key}.mp4`; | |
| video.autoplay = true; | |
| video.muted = true; | |
| video.loop = true; | |
| video.controls = true; | |
| const a = document.createElement('a'); | |
| if (demoInfo.filename.startsWith('https')) { | |
| a.href = demoInfo.filename; | |
| } else { | |
| a.href = `demos/${demoInfo.filename}`; | |
| } | |
| a.textContent = `${demoInfo.name || key}`; | |
| a.title = demoInfo.description; | |
| a.style.fontSize = 28; | |
| a.target = '_blank'; | |
| li.appendChild(video); | |
| li.appendChild(a); | |
| ul.appendChild(li); | |
| } | |
| demosElem.appendChild(ul); | |
| } | |
| </script> | |
| </body> |