better upload

public/default.css

@@ -43,21 +43,34 @@ body {
 
 .lang {
     position: fixed;
-    top: 15px;
+    top: 20px;
-    right: 20px;
+    right: 15px;
     z-index: 2;
+    writing-mode: vertical-lr;	
 }
+
 .list {
     position: fixed;
-    top: 15px;
+    top: 20px;
-    left: 20px;
+    right: 37.5px;
     z-index: 2;
+    writing-mode: vertical-lr;
 }
+
+.prd {
+    position: fixed;
+    top: 20px;
+    right: 40px;
+    z-index: 2;
+    writing-mode: vertical-lr;
+}
+
 .sub {
     position: fixed;
     bottom: 15px;
     left: 20px;
 }
+
 .list2 {
     position: fixed;
     bottom: 15px;
@@ -204,6 +217,49 @@ button {
    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;
+}
+
+.soundinfo:target {
+  visibility: visible;
+  opacity: 1;
+  z-index: 99;
+}
+
+.roomsel {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%);
+}
+
+.intro {
+position: relative;
+    display: block;
+    left: 50%;
+    transform: translate(-50%);
+    font-size: 15px;
+    margin-bottom: 50px;
+    writing-mode: vertical-lr;
+    text-align: center;
+}
+
 @media screen and (max-width: 700px) {
 
 .notice {

public/parade.js

@@ -222,6 +222,7 @@ function draw() {
     if (x < exit_x) {
       img.remove();
       snd.stop();
+      delete snd;
       arr.splice(i, 1);
     }
   }

server.js

@@ -240,9 +240,8 @@ fastify.post("/entry", async function (request, reply) {
     pass: audiofile.fields.pass.value
   })));
 
-  // res.writeHead(301, {"Location": "/submit"});
+  //reply.send('done!');
-  // return res.end();
+  //reply.redirect('/submit');
-
 });
 
 //socket.io

src/pages/entry.en.html

@@ -236,15 +236,15 @@
        //
        var request = new XMLHttpRequest();
        request.open("POST", "/entry");
+       request.onload = () => {
+         alert('Thank you!');
+         //location.reload();
+         location.assign("/en/submit");
+       }
        request.send(fd);
 
        //
        event.preventDefault();
-
-       //
-       alert('Thank you!');
-       //location.reload();
-       location.assign("/en/submit");
      }
 
      const form = document.getElementById('form');

src/pages/entry.html

@@ -15,7 +15,7 @@
     <div class="bg"></div>
     <div class="content">
       <div class="lang"><a href="/en/entry">EN</a></div>
-      <div class="list"><a href="/list">목록</a></div>
+      <div class="prd"><a href="/" target="_blank">퍼레이드</a></div>
       <div class="notice">
         <section>
           <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
@@ -44,7 +44,7 @@
             </p>
             <p>
               장소<br/>
-              <a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">주한프랑스대사관 문화과 유튜브 채널</a>
+              <a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a><br><a href="https://www.youtube.com/c/franceencoree">주한프랑스대사관 문화과 유튜브 채널</a>
             </p>
             <p>
               퍼레이드 구성<br/>
@@ -109,15 +109,16 @@
                 </div>
               </li>
               <li>
-                <h3>6. 비밀번호 숫자 2개_삭제시 필요</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 />
-              </li>
+		<small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</sma              </li>
               <li>
                 <input id="submit" type="submit" value="제출하기" />
               </li>
             </ul>
           </form>
         </section>
+
       </div><!-- div class="notice" -->
     </div><!-- div class="content" -->
     <script>
@@ -237,15 +238,15 @@
        //
        var request = new XMLHttpRequest();
        request.open("POST", "/entry");
+       request.onload = () => {
+         alert('감사합니다!');
+         //location.reload();
+         location.assign("/submit");
+       }
        request.send(fd);
 
        //
        event.preventDefault();
-
-       //
-       alert('감사합니다!');
-       //location.reload();
-       location.assign("/submit");
      }
 
      const form = document.getElementById('form');

src/pages/parade.html

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