upd

public/default.css

@@ -30,6 +30,22 @@ body {
     z-index: -1; // this is optional
 }
 
+#krtitle {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%);
+    writing-mode: vertical-lr;
+}
+
+#entitle {
+    position: absolute;
+    bottom: 15%;
+    left: 50%;
+    transform: translate(-50%);
+    writing-mode: vertical-lr;
+}
+
 .popup {
     display: none;
     position: absolute;
@@ -277,7 +293,15 @@ details summary::-webkit-details-marker {
 
 .roomsel {
     position: absolute;
-    top: 50%;
+    width: 100%;
+    height: 100%;
+    top: 0%;
+    left: 0%;
+}
+
+.roomsel button {
+    position: absolute;
+    bottom: 50px;
     left: 50%;
     transform: translate(-50%);
 }
@@ -314,8 +338,51 @@ summary {
     cursor: pointer;
 }
 
+.delete {
+    position: absolute;
+    right: 0;
+    padding: 0;
+    cursor: pointer;
+    padding: 2px;
+}
+
+.intro {
+    top: 40%;
+    transform: translate(-50%);
+}
+
+button {
+    padding: 2px 6px 3px 6px;
+    font-size: 12px;
+}
+
+.roomsel .title {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -30%);
+    height: 600px;
+    writing-mode: vertical-lr;
+}
+
 @media screen and (max-width: 700px) {
 
+    #krtitle {
+        position: absolute;
+        top: 20%;
+        left: 50%;
+        transform: translate(-50%);
+        writing-mode: vertical-lr;
+    }
+
+    #entitle {
+        position: absolute;
+        bottom: 10%;
+        left: 50%;
+        transform: translate(-50%);
+        writing-mode: vertical-lr;
+    }
+
     .notice {
         position: absolute;
         display: inline-block;
@@ -326,4 +393,23 @@ summary {
         padding-bottom: 20px;
     }
 
+    .intro {
+        top: 30%;
+        transform: translate(-50%);
+    }
+
+    button {
+        padding: 8px 6px 5px 6px;
+        font-size: 12px;
+    }
+
+    .title {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -30%);
+        height: 600px;
+        writing-mode: vertical-lr;
+    }
+
 }

src/pages/entry.en.html

@@ -70,7 +70,7 @@
           </div>
         </section>
         <section class="participation">
-          <h2>How to participate</h2>
+          <h1>How to participate</h1>
           <ol>
             <li>1. Record the sound for about 30 seconds with a recording device or phone according to the characteristics of the flock.
               <ol class="category">
@@ -85,7 +85,7 @@
           </ol>
         </section>
         <section>
-          <h2>Sound Submission</h2>
+          <h1>Sound Submission</h1>
           <form id="form" method="POST" enctype="multipart/form-data">
             <ul class="submit">
               <li>
@@ -134,7 +134,8 @@
           </form>
         </section>
         <section>
-          <h2>Sound &nbsp;List</h2>
+          <h1>Sound &nbsp;List</h1>
+          <p>The sounds you submitted will be stacked in chronological order in the list below. By clicking on each shape, you can hear the sound corresponding to the shape and check the information about the sound.</p>
           {{#each list}}
           <div class="items" foldername="{{this.foldername}}">
             <details>

src/pages/entry.html

@@ -71,7 +71,7 @@
           </div>
         </section>
         <section class="participation">
-          <h2>참여 방법</h2>
+          <h1>참여 방법</h1>
           <ol>
             <li>1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요.
               <ol class="category">
@@ -86,7 +86,7 @@
           </ol>
         </section>
         <section>
-          <h2>소리 제출</h2>
+          <h1>소리 제출</h1>
           <form id="form" method="POST" enctype="multipart/form-data">
             <ul class="submit">
               <li>
@@ -136,7 +136,8 @@
           </form>
         </section>
         <section>
-          <h2>소리 목록</h2>
+          <h1>소리 목록</h1>
+          <p>제출해주신 소리는 아래 목록에 시간순으로 쌓입니다. 각각의 모양을 클릭하면, 모양에 해당하는 소리를 듣고 소리에 대한 정보를 확인할 수 있습니다.</p>
           {{#each list}}
           <div class="items" foldername="{{this.foldername}}">
             <details>

src/pages/parade.html

@@ -71,7 +71,9 @@
 
          var roomsel = createDiv();
          roomsel.class("roomsel");
-         var b = createButton("시작하기!", 1);
+         var b = createButton("시작하기 Start!", 1);
+         var d = createDiv("흐름을  향하여  걷는   Walking towards the Flow");
+         d.class("title");
          b.mouseClicked(function() {
            silence.play();
            clap.play();
@@ -102,6 +104,7 @@
              });
            }, 1000);
          });
+         roomsel.child(d);
          roomsel.child(b);
        } else {
          //re-connection -> just connect to remembered room!