68 lines
2.6 KiB
HTML
68 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>흐름을 향하여 걷는 | 소개</title>
|
|
<link rel="stylesheet" href="/default.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="bg"></div>
|
|
<section id="list_init_kr" style="display:none">
|
|
<h1>소리 목록</h1>
|
|
<p>제출해주신 소리는 아래 목록에 시간순으로 쌓입니다. 각각의 모양을 클릭하면, 모양에 해당하는 소리를 듣고 소리에 대한 정보를 확인할 수 있습니다.</p>
|
|
</section>
|
|
<section id="list_init_en" style="display:none">
|
|
<h1>sound list</h1>
|
|
<p>The sounds you submit are listed below in chronological order. If you click each shape, you can hear the sound corresponding to the shape and check information about the sound.</p>
|
|
</section>
|
|
<section id="list">
|
|
</section>
|
|
<script>
|
|
function setup() {
|
|
noCanvas();
|
|
noLoop();
|
|
list_reload();
|
|
}
|
|
|
|
function list_reload() {
|
|
loadJSON('/list', list => {
|
|
//if lang == kr
|
|
let list_init = select('#list_init_kr').html();
|
|
//if lang == en
|
|
// let list_init = select('#list_init_en').html();
|
|
|
|
//
|
|
var t = "";
|
|
list.forEach(item => {
|
|
t = t + `
|
|
<div class="items" foldername="${item.foldername}">
|
|
<details>
|
|
<summary><img class="drawing" src="/uploads/${item.foldername}/pixels.png" /></summary>
|
|
<audio class="sound" preload="none" controls>
|
|
<source src="/uploads/${item.foldername}/audio.mp3" type="audio/mpeg">
|
|
</audio>
|
|
<ul class="soundinfo"><hr>
|
|
<li>유형 | <div class="group">${item.group}</div></li><hr>
|
|
<li>제목 | <div class="title">${item.title}</div></li><hr>
|
|
<li>묘사 | <div class="comment">${item.comment}</div></li><hr>
|
|
</ul>
|
|
<button class="preview" type="button" onclick="javascript:window.open('/preview/${item.foldername}', '_blank');">미리보기</button>
|
|
<button class="delete" type="button" onclick="del(this)">삭제</button>
|
|
</details>
|
|
</div>'
|
|
`;
|
|
});
|
|
select('#list').html(list_init + t);
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html> |