update

2022-01-18 13:20:58 +09:00 · 2022-01-18 13:20:58 +09:00 · 686848b62a
commit 686848b62a
parent 6bd1805521
8 changed files with 227 additions and 175 deletions
--- a/public/default.css
+++ b/public/default.css
@ -6,34 +6,39 @@
 }

 body {
-   color: white;
-   font-size: 15px;
-   line-height: 1.4;
-   font-family: 'Noto Sans KR', sans-serif;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: white;
+    font-size: 15px;
+    line-height: 1.4;
+    font-family: 'Noto Sans KR', sans-serif;
 }

 .bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: linear-gradient(#000000, #222958 65%, #e7e7d6 95%);
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 100vh;
-  width: 100vw;
-  /* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
-  z-index: -1; // this is optional
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: linear-gradient(#000000, #222958 65%, #e7e7d6 95%);
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 100vh;
+    width: 100vw;
+    /* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
+    z-index: -1; // this is optional
 }

 .popup {
-  display: none;
-  position: absolute;
-  max-width: 800px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(255, 255, 255, 0.3);
-  z-index: 100;
+    display: none;
+    position: absolute;
+    max-width: 800px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.3);
+    z-index: 100;
 }

 .content {
@ -49,15 +54,15 @@ body {
    writing-mode: vertical-lr;
 }

-.list {
+.first {
    position: fixed;
    top: 20px;
-    right: 37.5px;
+    right: 18px;
    z-index: 2;
    writing-mode: vertical-lr;
 }

-.prd {
+.second {
    position: fixed;
    top: 20px;
    right: 40px;
@ -65,6 +70,18 @@ body {
    writing-mode: vertical-lr;
 }

+.third {
+    position: fixed;
+    top: 20px;
+    right: 60px;
+    z-index: 2;
+    writing-mode: vertical-lr;
+}
+
+audio {
+    cursor: pointer;
+}
+
 .sub {
    position: fixed;
    bottom: 15px;
@ -98,7 +115,7 @@ body {
 a,
 a:visited,
 a:hover,
-a:focus
+a:focus,
 a:active {
    color: white;
    text-decoration: none;
@ -170,7 +187,7 @@ ol, ul {
 }

 .submit li {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 }

 .submit li li {
@ -185,73 +202,89 @@ ol, ul {
    overflow: hidden;
 }

-.noscroll * { touch-action: none;
+.noscroll * {
+    touch-action: none;
 }

-button {
-    background-color: transparent;
-    border: 1px white solid;
-    color: white;
+small {
+    margin-top: 5px;
+    display: block;
+}
+
+canvas {
+    margin: 5px 0 5px 0;
 }

 .items {
-   border-top: 1.5px solid white;
-   padding: 10px 0 10px 0;
+    padding: 50px 0 50px 0;
 }

-.drawing {
-   position: relative;
-   display: inline-block;
-   width: 300px;
-   left: 50%;
-   transform: translate(-50%);
-   vertical-align: top;
-   text-align: center;
-}
-
-.name {
-   display: inline-block;
+.items li {
+    position: relative;
+    vertical-align: top;
+    padding: 2px 0 2px 0;
 }

 .sound {
-   display: inline-block;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%);
+    margin-top: 40px;
+}
+
+.delete {
+    margin-top: 15px;
+}
+
+.drawing {
+    position: relative;
+    display: inline-block;
+    width: 300px;
+    left: 50%;
+    transform: translate(-50%);
+    vertical-align: top;
+    text-align: center;
+}
+
+.name {
+    display: inline-block;
+}
+
+.sound {
+    display: inline-block;
 }

 .soundinfo {
-  position: fixed;
-  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;
+    padding-top: 30px;
 }

-.soundinfo:target {
-  visibility: visible;
-  opacity: 1;
-  z-index: 99;
+.soundinfo li {
+    vertical-align: top;
+}
+
+.group,
+.title,
+.comment,
+.sound,
+.smallclose {
+    display: inline-block;
+    vertical-algin: top;
+}
+
+details summary::-webkit-details-marker {
+    display:none;
 }

 .roomsel {
-position: absolute;
-top: 50%;
-left: 50%;
-transform: translate(-50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%);
 }

 .intro {
-position: relative;
-    display: block;
+    display: none;
+    position: relative;
    left: 50%;
    transform: translate(-50%);
    font-size: 15px;
@ -260,16 +293,31 @@ position: relative;
    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) {

-.notice {
-    position: absolute;
-    display: inline-block;
-    width: 90%;
-    top: 50px;
-    left: 50%;
-    transform: translate(-50%);
-    padding-bottom: 20px;
-}
+    .notice {
+        position: absolute;
+        display: inline-block;
+        width: 90%;
+        top: 50px;
+        left: 50%;
+        transform: translate(-50%);
+        padding-bottom: 20px;
+    }

 }
--- a/public/parade.css
+++ b/public/parade.css
@ -1,4 +1,4 @@
 html,
 body {
-  overflow: hidden;
+    overflow: hidden;
 }
--- a/server.js
+++ b/server.js
@ -201,22 +201,22 @@ fastify.post("/entry", async function (request, reply) {
    console.log("convert to mp3...");
    converted = true;
    function converter() {
-     return new Promise((resolve, reject) => {
-       //
-       let outputFile = tmpdir + "/converted.mp3";
-       // --> https://stackoverflow.com/a/36109219 (a quick tip on fluent-ffmpeg)
-       ffmpeg()
-       .addInput(audiofile.filepath)
-       .on("error", function(err) {
-         reject(err);
-       })
-       .on("end", function() {
-         resolve(outputFile);
-       })
-       .outputOptions('-b:a 192000')
-       .output(outputFile)
-       .run();
-     });
+      return new Promise((resolve, reject) => {
+        //
+        let outputFile = tmpdir + "/converted.mp3";
+        // --> https://stackoverflow.com/a/36109219 (a quick tip on fluent-ffmpeg)
+        ffmpeg()
+          .addInput(audiofile.filepath)
+          .on("error", function(err) {
+            reject(err);
+          })
+          .on("end", function() {
+            resolve(outputFile);
+          })
+          .outputOptions('-b:a 192000')
+          .output(outputFile)
+          .run();
+      });
    }
    await converter();
    // console.log(await fs.readdir(tmpdir));
@ -287,7 +287,7 @@ var looper;
        // io.to("room" + indexed).emit("post", score[pointed]);
        io.to("room" + indexed).emit("post", pointed);

-      // }, score[pointer].object.showtime * index, pointer, index);
+        // }, score[pointer].object.showtime * index, pointer, index);
      }, 30000 * index, pointer, index);
    }

--- a/src/pages/entry.en.html
+++ b/src/pages/entry.en.html
@ -14,8 +14,8 @@
  <body>
    <div class="bg"></div>
    <div class="content">
-      <div class="lang"><a href="/entry">KR</a></div>
-      <div class="list"><a href="/en/list">list</a></div>
+      <div class="first"><a href="/entry">KR</a></div>
+      <div class="second"><a href="/">Home</a></div>
      <div class="notice">
        <section>
          <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
--- a/src/pages/entry.html
+++ b/src/pages/entry.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8" />
    <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="/entry.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
@ -14,8 +14,8 @@
  <body>
    <div class="bg"></div>
    <div class="content">
-      <div class="lang"><a href="/en/entry">EN</a></div>
-      <div class="prd"><a href="/" target="_blank">퍼레이드</a></div>
+      <div class="first"><a href="/en/entry">EN</a></div>
+      <div class="second"><a href="/" target="_blank">홈</a></div>
      <div class="notice">
        <section>
          <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
@ -29,7 +29,7 @@
            «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다.
          </p>
          <p>
-            1월 27일(목) 밤, ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. '사유의 밤'은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다. 
+            1월 27일(목) 밤, «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 ‘사유의 밤’ 행사에서 송출될 예정입니다. ‘사유의 밤’은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다.
            많은 참여 및 관심 부탁드립니다.
          </p>
          <div class="info">
@ -75,21 +75,23 @@
          <h2>소리 제출</h2>
          <form id="form" method="POST" enctype="multipart/form-data">
            <ul class="submit">
-              <h3>1. 소리 유형</h3>
-              <ul>
-                <li>
-                  <input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
-                </li>
-                <li>
-                  <input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들
-                </li>
-                <li>
-                  <input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들
-                </li>
-                <li>
-                  <input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
-                </li>
-              </ul>
+              <li>
+                <h3>1. 소리 유형</h3>
+                <ul>
+                  <li>
+                    <input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
+                  </li>
+                  <li>
+                    <input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들
+                  </li>
+                  <li>
+                    <input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들
+                  </li>
+                  <li>
+                    <input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
+                  </li>
+                </ul>
+              </li>
              <li>
                <h3>2. 소리 파일</h3>
                <input type="file" name="audiofile" autocomplete="off" required />
@ -110,15 +112,18 @@
              </li>
              <li>
                <h3>6. 비밀 번호</h3>
- 		<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
-		<small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</sma              </li>
+                <input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
+                <small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</small>
+              </li>
              <li>
                <input id="submit" type="submit" value="제출하기" />
              </li>
            </ul>
          </form>
        </section>
-
+        <section>
+          <h2><a href="/list">소리 목록</a></h2>
+        </section>
      </div><!-- div class="notice" -->
    </div><!-- div class="content" -->
    <script>
--- a/src/pages/list.en.html
+++ b/src/pages/list.en.html
@ -15,12 +15,12 @@
    <div class="bg"></div>
    <div class="popup"></div>
    <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="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="list-parade"><a href="/" target="_blank">Parade<i class='fas fa-bell' style='font-size:24px'></i></a></div>      <div class="notice">
-            <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
+        <div class="notice">
+            <h1>Sound &nbsp;List</h1>
            {{#each list}}
            <div class="items" foldername="{{this.foldername}}">
              <img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" />
--- a/src/pages/list.html
+++ b/src/pages/list.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>흐름을 향하여 걷는 | 목록</title>
+    <title>흐름을 향하여 걷는 | 소리 목록</title>
    <link rel="stylesheet" href="/default.css" />
    <link rel="stylesheet" href="/list.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
@ -15,55 +15,57 @@
    <div class="bg"></div>
    <div class="popup"></div>
    <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="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">
-            <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
-            {{#each list}}
-            <div class="items" foldername="{{this.foldername}}">
-              <img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" />
-              <div class="group">{{this.group}}</div>
-              <div class="title">{{this.title}}</div>
-              <div class="comment">{{this.comment}}</div>
+        <div class="notice">
+          <h1>소리 &nbsp;목록</h1>
+          {{#each list}}
+          <div class="items" foldername="{{this.foldername}}">
+            <details>
+              <summary><img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" /></summary>
              <audio class="sound" preload="none" controls>
                <source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg">
              </audio>
-              <button class="delete" type="button" onclick="del(this)">삭제x</button>
-            </div>
-            {{/each}}
+              <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>
+          {{/each}}
        </div>
-        <script>
-         function del(that) {
-           console.log();
-           let text;
-           let pass = prompt("Please enter password!", "숫자2개");
-           if (/^\d{2}$/.test(pass)) {
-             var target = that.parentElement.getAttribute('foldername');
-             const trydelete = async () => {
-               const response = await fetch('/delete/' + target + '/' + pass);
-               if (response.ok) {
-                 const json = await response.json();
-                 return Promise.resolve(json);
-               } else {
-                 return Promise.reject('no response.');
-               }
+      </div>
+      <script>
+       function del(that) {
+         console.log();
+         let text;
+         let pass = prompt("Please enter password!", "숫자2개");
+         if (/^\d{2}$/.test(pass)) {
+           var target = that.parentElement.getAttribute('foldername');
+           const trydelete = async () => {
+             const response = await fetch('/delete/' + target + '/' + pass);
+             if (response.ok) {
+               const json = await response.json();
+               return Promise.resolve(json);
+             } else {
+               return Promise.reject('no response.');
             }
-             trydelete().then((resp) => {
-               if (resp.result) {
-                 alert("지우기 성공!");
-                 location.reload();
-               } else {
-                 alert("지우기 실패-");
-               }
-             }).catch(console.log);
-           } else {
-             alert("암호는 숫자2개...");
           }
+           trydelete().then((resp) => {
+             if (resp.result) {
+               alert("지우기 성공!");
+               location.reload();
+             } else {
+               alert("지우기 실패-");
+             }
+           }).catch(console.log);
+         } else {
+           alert("암호는 숫자2개...");
         }
-        </script>
+       }
+      </script>
  </body>
 </html>
--- a/src/pages/parade.html
+++ b/src/pages/parade.html
@ -17,9 +17,6 @@
  <body>
    <div class="bg"></div>
    <div class="content">
-      <div class="notice">
-	<h1> 흐름을 향하여 걷는</h1>
-      </div>
    </div>
  </body>
 </html>