Spaces:
Running
Running
File size: 2,006 Bytes
80fd73c 3a049d1 80fd73c 80e6f81 80fd73c 80e6f81 a8ddd77 80fd73c b24610e 3a049d1 b24610e 80e6f81 3a049d1 b24610e 80fd73c 3a049d1 80fd73c 3a049d1 80fd73c b24610e 80fd73c 51802c2 80fd73c 51802c2 80fd73c 51802c2 80fd73c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<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 !important;
border-radius: 20px !important;
}
.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>
"use strict";
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> |