doohoyi/sound-parade
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update

Browse source
This commit is contained in:
Dooho Yi 2022-01-18 13:20:58 +09:00
parent 6bd1805521
commit 686848b62a
8 changed files with 227 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
public/default.css
View file

@ -6,6 +6,11 @@
} }
body { body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white; color: white;
font-size: 15px; font-size: 15px;
line-height: 1.4; line-height: 1.4;
@ -49,15 +54,15 @@ body {
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
.list { .first {
position: fixed; position: fixed;
top: 20px; top: 20px;
right: 37.5px; right: 18px;
z-index: 2; z-index: 2;
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
.prd { .second {
position: fixed; position: fixed;
top: 20px; top: 20px;
right: 40px; right: 40px;
@ -65,6 +70,18 @@ body {
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
.third {
position: fixed;
top: 20px;
right: 60px;
z-index: 2;
writing-mode: vertical-lr;
}
audio {
cursor: pointer;
}
.sub { .sub {
position: fixed; position: fixed;
bottom: 15px; bottom: 15px;
@ -98,7 +115,7 @@ body {
a, a,
a:visited, a:visited,
a:hover, a:hover,
a:focus a:focus,
a:active { a:active {
color: white; color: white;
text-decoration: none; text-decoration: none;
@ -170,7 +187,7 @@ ol, ul {
} }
.submit li { .submit li {
margin-bottom: 20px; margin-bottom: 30px;
} }
.submit li li { .submit li li {
@ -185,18 +202,38 @@ ol, ul {
overflow: hidden; overflow: hidden;
} }
.noscroll * { touch-action: none; .noscroll * {
touch-action: none;
} }
button { small {
background-color: transparent; margin-top: 5px;
border: 1px white solid; display: block;
color: white; }
canvas {
margin: 5px 0 5px 0;
} }
.items { .items {
border-top: 1.5px solid white; padding: 50px 0 50px 0;
padding: 10px 0 10px 0; }
.items li {
position: relative;
vertical-align: top;
padding: 2px 0 2px 0;
}
.sound {
position: relative;
left: 50%;
transform: translate(-50%);
margin-top: 40px;
}
.delete {
margin-top: 15px;
} }
.drawing { .drawing {
@ -218,40 +255,36 @@ button {
} }
.soundinfo { .soundinfo {
position: fixed; padding-top: 30px;
width: 500px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 900;
background-color: white;
opacity: 0.5;
color: white;
padding: 15px 15px 5px 15px;
word-break: break-all;
} }
.soundinfo:target { .soundinfo li {
visibility: visible; vertical-align: top;
opacity: 1; }
z-index: 99;
.group,
.title,
.comment,
.sound,
.smallclose {
display: inline-block;
vertical-algin: top;
}
details summary::-webkit-details-marker {
display:none;
} }
.roomsel { .roomsel {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
} }
.intro { .intro {
position: relative; display: none;
display: block; position: relative;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
font-size: 15px; font-size: 15px;
@ -260,9 +293,24 @@ position: relative;
text-align: center; text-align: center;
} }
tr {
color: red;
}
tr,
td {
display: inline-block;
}
summary {
list-style: none;
outline: none;
cursor: pointer;
}
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.notice { .notice {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 90%; width: 90%;
@ -270,6 +318,6 @@ position: relative;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
padding-bottom: 20px; padding-bottom: 20px;
} }
} }

4
src/pages/entry.en.html
View file

@ -14,8 +14,8 @@
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="/entry">KR</a></div> <div class="first"><a href="/entry">KR</a></div>
<div class="list"><a href="/en/list">list</a></div> <div class="second"><a href="/">Home</a></div>
<div class="notice"> <div class="notice">
<section> <section>
<h1>Walking &nbsp;Towards &nbsp;the Flow</h1> <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>

17
src/pages/entry.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>흐름을 향하여 걷는 | 입장</title> <title>흐름을 향하여 걷는 | 소개</title>
<link rel="stylesheet" href="/default.css" /> <link rel="stylesheet" href="/default.css" />
<link rel="stylesheet" href="/entry.css" /> <link rel="stylesheet" href="/entry.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
@ -14,8 +14,8 @@
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="/en/entry">EN</a></div> <div class="first"><a href="/en/entry">EN</a></div>
<div class="prd"><a href="/" target="_blank">퍼레이드</a></div> <div class="second"><a href="/" target="_blank">홈</a></div>
<div class="notice"> <div class="notice">
<section> <section>
<h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1> <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
@ -29,7 +29,7 @@
«흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다. «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다.
</p> </p>
<p> <p>
1월 27일(목) 밤, ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. '사유의 밤'은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다. 1월 27일(목) 밤, «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 ‘사유의 밤’ 행사에서 송출될 예정입니다. ‘사유의 밤’은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다.
많은 참여 및 관심 부탁드립니다. 많은 참여 및 관심 부탁드립니다.
</p> </p>
<div class="info"> <div class="info">
@ -75,6 +75,7 @@
<h2>소리 제출</h2> <h2>소리 제출</h2>
<form id="form" method="POST" enctype="multipart/form-data"> <form id="form" method="POST" enctype="multipart/form-data">
<ul class="submit"> <ul class="submit">
<li>
<h3>1. 소리 유형</h3> <h3>1. 소리 유형</h3>
<ul> <ul>
<li> <li>
@ -90,6 +91,7 @@
<input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들 <input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
</li> </li>
</ul> </ul>
</li>
<li> <li>
<h3>2. 소리 파일</h3> <h3>2. 소리 파일</h3>
<input type="file" name="audiofile" autocomplete="off" required /> <input type="file" name="audiofile" autocomplete="off" required />
@ -111,14 +113,17 @@
<li> <li>
<h3>6. 비밀 번호</h3> <h3>6. 비밀 번호</h3>
<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required /> <input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
<small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</sma </li> <small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</small>
</li>
<li> <li>
<input id="submit" type="submit" value="제출하기" /> <input id="submit" type="submit" value="제출하기" />
</li> </li>
</ul> </ul>
</form> </form>
</section> </section>
<section>
<h2><a href="/list">소리 목록</a></h2>
</section>
</div><!-- div class="notice" --> </div><!-- div class="notice" -->
</div><!-- div class="content" --> </div><!-- div class="content" -->
<script> <script>

8
src/pages/list.en.html
View file

@ -15,12 +15,12 @@
<div class="bg"></div> <div class="bg"></div>
<div class="popup"></div> <div class="popup"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="/list">KR</a></div> <div class="first"><a href="/list">KR</a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-sub"><a href="/en/entry">Entry<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="second"><a href="/">Home</a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-parade"><a href="/" target="_blank">Parade<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="notice"> <div class="notice">
<h1>Walking &nbsp;Towards &nbsp;the Flow</h1> <h1>Sound &nbsp;List</h1>
{{#each list}} {{#each list}}
<div class="items" foldername="{{this.foldername}}"> <div class="items" foldername="{{this.foldername}}">
<img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" /> <img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" />

24
src/pages/list.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>흐름을 향하여 걷는 | 목록</title> <title>흐름을 향하여 걷는 | 소리 목록</title>
<link rel="stylesheet" href="/default.css" /> <link rel="stylesheet" href="/default.css" />
<link rel="stylesheet" href="/list.css" /> <link rel="stylesheet" href="/list.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
@ -15,23 +15,25 @@
<div class="bg"></div> <div class="bg"></div>
<div class="popup"></div> <div class="popup"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="/en/list">EN</a></div> <div class="first"><a href="/en/list">EN</a></div>
<div class="second"><a href="/">홈</a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-sub"><a href="/entry">모집<i class='fas fa-bell' style='font-size:24px'></i></a></div>
<div class="content" id="list">
<div class="list-parade"><a href="/" target="_blank">퍼레이드<i class='fas fa-bell' style='font-size:24px'></i></a></div>
<div class="notice"> <div class="notice">
<h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1> <h1>소리 &nbsp;목록</h1>
{{#each list}} {{#each list}}
<div class="items" foldername="{{this.foldername}}"> <div class="items" foldername="{{this.foldername}}">
<img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" /> <details>
<div class="group">{{this.group}}</div> <summary><img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" /></summary>
<div class="title">{{this.title}}</div>
<div class="comment">{{this.comment}}</div>
<audio class="sound" preload="none" controls> <audio class="sound" preload="none" controls>
<source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg"> <source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg">
</audio> </audio>
<button class="delete" type="button" onclick="del(this)">삭제x</button> <ul class="soundinfo"><hr>
<li>유형 | <div class="group">{{this.group}}</div></li><hr>
<li>제목 | <div class="title">{{this.title}}</div></li><hr>
<li>묘사 | <div class="comment">{{this.comment}}</div></li><hr>
</ul>
<button class="delete" type="button" onclick="del(this)">삭제</button>
</details>
</div> </div>
{{/each}} {{/each}}
</div> </div>

3
src/pages/parade.html
View file

@ -17,9 +17,6 @@
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content"> <div class="content">
<div class="notice">
<h1> 흐름을 향하여 걷는</h1>
</div>
</div> </div>
</body> </body>
</html> </html>