63 lines
2.1 KiB
HTML
Executable File
63 lines
2.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
#image_box_container{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: minmax(200px auto) 400px minmax(300px, auto);
|
|
grid-auto-rows: minmax(300px, auto);
|
|
grid-gap: 20px;
|
|
}
|
|
#image_box_container img{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
body{
|
|
background-color: #333333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="image_box_container"></div>
|
|
|
|
<div id="image_viewer"></div>
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
fetch('assets/fetch-content-list.php?type=full',{
|
|
cache:'no-cache'
|
|
})
|
|
.then(response=>response.json())
|
|
.then(res=>{
|
|
let set_str=""
|
|
let folder='assets/'
|
|
for(i in res){
|
|
let file=folder+res[i][0]+res[i][1]
|
|
let thumbnail=folder+"made_content/thumbnails/"+res[i][2]
|
|
|
|
if(file.match(/.png|.PNG|.jpg|.JPG|.jpeg|.JPEG|.gif|.GIF/g)){
|
|
set_str+=`<div><div><img onclick=open_img('${file}') src="${file}" /></div></div>`
|
|
} else if(file.match(/.mp4|.MP4/g)){
|
|
set_str+='<div>'+
|
|
'<video class="videos" width="100%" height="100%" '+
|
|
`controls><source src="${file}" `+
|
|
'type="video/mp4"></video></div>';
|
|
//set_str+=`<div><div><img onclick=open_vid('${file}') src="${thumbnail}" /></div></div>`
|
|
}
|
|
}
|
|
document.getElementById('image_box_container').innerHTML+=set_str
|
|
})
|
|
|
|
|
|
function open_img(file){
|
|
console.log(file)
|
|
}
|
|
|
|
function open_vid(file){
|
|
console.log(file)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|