.

public/default.css

@@ -20,11 +20,22 @@ body {
   background-repeat: no-repeat;
   background-position: center;
   height: 100vh;
-  width: 100vw; 
+  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;
+}
+
 .content {
     width: 100%;
     height: 100%;
@@ -35,12 +46,43 @@ body {
     top: 15px;
     right: 20px;
 }
+.list {
+    position: fixed;
+    top: 15px;
+    left: 20px;
+}
+.sub {
+    position: fixed;
+    bottom: 15px;
+    left: 20px;
+}
+.list2 {
+    position: fixed;
+    bottom: 15px;
+    left: 50%;
+    text-align: center;
+}
+.parade {
+    position: fixed;
+    bottom: 15px;
+    right: 20px;
+}
+.list-sub {
+    position: fixed;
+    top: 36px;
+    right: 20px;
+}
+.list-parade {
+    position: fixed;
+    top: 68px;
+    right: 20px;
+}
 
 a,
 a:visited,
-a:hover, 
+a:hover,
-a:focus 
+a:focus
-a:active { 
+a:active {
     color: white;
     text-decoration: none;
 }
@@ -123,10 +165,10 @@ ol, ul {
 }
 
 .noscroll {
-    overflow: hidden; 
+    overflow: hidden;
 }
 
-.noscroll * { touch-action: none; 
+.noscroll * { touch-action: none;
 }
 
 button {
@@ -149,7 +191,7 @@ button {
    vertical-align: top;
    text-align: center;
 }
- 
+
 .name {
    display: inline-block;
 }
@@ -158,7 +200,7 @@ button {
    display: inline-block;
 }
 
-@media screen and (max-width: 700px) { 
+@media screen and (max-width: 700px) {
 
 .notice {
     position: absolute;
@@ -170,4 +212,4 @@ button {
     padding-bottom: 20px;
 }
 
-}
+}

public/entry.js

@@ -0,0 +1,115 @@
+// -- https://stackoverflow.com/a/46722645
+// history.scrollRestoration = "manual";
+
+// -- https://stackoverflow.com/a/39577640
+function dataURLtoBlob(dataURL) {
+  let array, binary, i, len;
+  binary = atob(dataURL.split(",")[1]);
+  array = [];
+  i = 0;
+  len = binary.length;
+  while (i < len) {
+    array.push(binary.charCodeAt(i));
+    i++;
+  }
+  return new Blob([new Uint8Array(array)], {
+    type: "image/png",
+  });
+}
+
+var p = [];
+var cols = 17;
+var rows = 17;
+var unit = 15; //px
+var sw = 0.4; //px (strokewidth)
+var img;
+
+function setup() {
+  var cnv = createCanvas(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
+  cnv.parent("p5");
+  img = createGraphics(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
+  var but = createButton("clear!");
+  // var sav = createButton("save!");
+  but.class('but').parent("p5");
+  // sav.class('sav').parent("p5");
+  for (var i = 0; i < cols*rows; i++) {
+    p.push(0);
+  }
+  but.mousePressed(function () {
+    for (var i = 0; i < cols*rows; i++) {
+      p.push(0);
+    }
+    img.clear();
+  });
+}
+
+function draw() {
+  //
+  clear();
+
+  //draw the grid
+  stroke(255);
+  strokeWeight(sw);
+  for (var c = 0; c < cols; c++) {
+    for (var r = 0; r < rows; r++) {
+      noFill();
+      rect(c*(unit+sw)+sw, r*(unit+sw)+sw, unit, unit);
+    }
+  }
+
+  //
+  image(img, 0, 0);
+
+  //pointer
+  fill(0, 255, 0);
+  strokeWeight(0);
+  circle(mouseX, mouseY, 10);
+
+  //
+  if (mouseIsPressed && mouseButton === LEFT) {
+    //find slot under the pointer
+    var mouseC = int(mouseX/(unit+sw));
+    var mouseR = int(mouseY/(unit+sw));
+    if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
+    img.strokeWeight(0);
+    img.fill(255);
+    img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
+  }
+}
+
+function submitForm(event) {
+
+  //TODO : first check if there is a drawing or not. (pixels)
+
+  //
+  var submit = document.getElementById("submit");
+  submit.setAttribute('disabled', 'disabled');
+
+  //
+  var form = document.getElementById("form");
+  var fd = new FormData(form);
+
+  //
+  var dataurl = img.elt.toDataURL();
+  var pixels = dataURLtoBlob(dataurl);
+  fd.append("pixels", pixels, "pixels.png");
+
+  for(var pair of fd.entries()) {
+    console.log(pair[0]+ ', '+ pair[1]);
+  }
+
+  //
+  var request = new XMLHttpRequest();
+  request.open("POST", "/entry");
+  request.send(fd);
+
+  //
+  event.preventDefault();
+
+  //
+  alert('감사합니다!');
+  location.reload();
+}
+
+const form = document.getElementById('form');
+form.addEventListener('submit', submitForm);

public/entry/script.js

@@ -1,113 +0,0 @@
-// -- https://stackoverflow.com/a/39577640
-function dataURLtoBlob(dataURL) {
-  let array, binary, i, len;
-  binary = atob(dataURL.split(",")[1]);
-  array = [];
-  i = 0;
-  len = binary.length;
-  while (i < len) {
-    array.push(binary.charCodeAt(i));
-    i++;
-  }
-  return new Blob([new Uint8Array(array)], {
-    type: "image/png",
-  });
-}
-
-var p = [];
-var cols = 17;
-var rows = 17;
-var unit = 15; //px
-var sw = 0.4; //px (strokewidth)
-var img;
-
-function setup() {
-  var cnv = createCanvas(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
-  cnv.parent("p5");
-  img = createGraphics(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
-  var but = createButton("clear!");
-  // var sav = createButton("save!");
-  but.class('but').parent("p5");
-  // sav.class('sav').parent("p5");
-  for (var i = 0; i < cols*rows; i++) {
-    p.push(0);
-  }
-  but.mousePressed(function () {
-    for (var i = 0; i < cols*rows; i++) {
-      p.push(0);
-    }
-    img.clear();
-  });
-}
-
-function draw() {
-  //
-  clear();
-
-  //draw the grid
-  stroke(255);
-  strokeWeight(sw);
-  for (var c = 0; c < cols; c++) {
-    for (var r = 0; r < rows; r++) {
-      noFill();
-      rect(c*(unit+sw)+sw, r*(unit+sw)+sw, unit, unit);
-    }
-  }
-
-  //
-  image(img, 0, 0);
-
-  //pointer
-  fill(0, 255, 0);
-  strokeWeight(0);
-  circle(mouseX, mouseY, 10);
-
-  //
-  if (mouseIsPressed && mouseButton === LEFT) {
-    //find slot under the pointer
-    var mouseC = int(mouseX/(unit+sw));
-    var mouseR = int(mouseY/(unit+sw));
-    if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
-    img.strokeWeight(0);
-    img.fill(255);
-    img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
-  }
-}
-
-function submitForm(event) {
-  //
-  var that = event.target.elements;
-
-  //
-  var fd = new FormData();
-
-  //
-  fd.append("audiofile", that.audiofile.files[0]);
-
-  //
-  var dataurl = img.elt.toDataURL();
-  var pixels = dataURLtoBlob(dataurl);
-  fd.append("pixels", pixels, "pixels.png");
-
-  //
-  fd.append("message", that.message.value);
-
-  //
-  var request = new XMLHttpRequest();
-  request.open("POST", "/entry");
-  request.send(fd);
-
-  //
-  event.preventDefault();
-}
-
-const form = document.getElementById('form');
-form.addEventListener('submit', submitForm);
-
-/* global  describe describeElement textOutput gridOutput print frameCount deltaTime focused cursor frameRate noCursor displayWidth displayHeight windowWidth windowHeight windowResized width height fullscreen pixelDensity displayDensity getURL getURLPath getURLParams alpha blue brightness color green hue lerpColor lightness red saturation Color background clear colorMode fill noFill noStroke stroke erase noErase arc ellipse circle line point quad rect square triangle ellipseMode noSmooth rectMode smooth strokeCap strokeJoin strokeWeight bezier bezierDetail bezierPoint bezierTangent curve curveDetail curveTightness curvePoint curveTangent beginContour beginShape bezierVertex curveVertex endContour endShape quadraticVertex vertex normal plane box sphere cylinder cone ellipsoid torus Geometry loadModel model HALF_PI PI QUARTER_PI TAU TWO_PI DEGREES RADIANS preload setup draw remove disableFriendlyErrors noLoop loop isLooping push pop redraw p5 Element select selectAll removeElements changed input createDiv createP createSpan createImg createA createSlider createButton createCheckbox createSelect createRadio createColorPicker createInput createFileInput createVideo createAudio VIDEO AUDIO createCapture createElement MediaElement File Graphics createCanvas resizeCanvas noCanvas createGraphics blendMode drawingContext setAttributes applyMatrix resetMatrix rotate rotateX rotateY rotateZ scale shearX shearY translate storeItem getItem clearStorage removeItem createStringDict createNumberDict TypedDict NumberDict append arrayCopy concat reverse shorten shuffle sort splice subset float int str boolean byte char unchar hex unhex join match matchAll nf nfc nfp nfs split splitTokens trim deviceOrientation accelerationX accelerationY accelerationZ pAccelerationX pAccelerationY pAccelerationZ rotationX rotationY rotationZ pRotationX pRotationY pRotationZ turnAxis setMoveThreshold setShakeThreshold deviceMoved deviceTurned deviceShaken keyIsPressed key keyCode keyPressed keyReleased keyTyped keyIsDown movedX movedY mouseX mouseY pmouseX pmouseY winMouseX winMouseY pwinMouseX pwinMouseY mouseButton mouseIsPressed mouseMoved mouseDragged mousePressed mouseReleased mouseClicked doubleClicked mouseWheel requestPointerLock exitPointerLock touches touchStarted touchMoved touchEnded createImage saveCanvas saveFrames Image loadImage image tint noTint imageMode pixels blend copy filter get loadPixels set updatePixels loadJSON loadStrings loadTable loadXML loadBytes httpGet httpPost httpDo XML createWriter PrintWriter save saveJSON saveStrings saveTable Table TableRow day hour minute millis month second year abs ceil constrain dist exp floor lerp log mag map max min norm pow round sq sqrt fract createVector Vector noise noiseDetail noiseSeed randomSeed random randomGaussian acos asin atan atan2 cos sin tan degrees radians angleMode textAlign textLeading textSize textStyle textWidth textAscent textDescent textWrap loadFont text textFont Font orbitControl debugMode noDebugMode ambientLight specularColor directionalLight pointLight lights lightFalloff spotLight noLights loadShader createShader shader resetShader texture textureMode textureWrap normalMaterial ambientMaterial emissiveMaterial specularMaterial shininess Shader camera perspective ortho frustum createCamera Camera setCamera
-
-LEFT RIGHT CENTER
-
-<<<_p5_keywords
-
-*/

public/list.js

@@ -1,8 +0,0 @@
-// function setup() {
-//   noCanvas();
-//   selectAll('.name').forEach(item => {
-//     httpGet(item.attribute('src'), text => {
-//       item.html(text);
-//     })
-//   })
-// }

public/style.css.archive

@@ -48,4 +48,4 @@ p {
   font-family: "Do Hyeon", sans-serif;
   color: rgb(255, 64, 180);
 
-}
+}

server.js

@@ -66,21 +66,49 @@ fastify.get("/", function (request, reply) {
 // --> https://stackoverflow.com/a/40899275
 // all the regex didn't work for me -- a 'last resort' method
 
+//get '/submit', '/submit/'
+["/submit", "/submit/"].forEach(function(item) {
+  fastify.get(item, function (request, reply) {
+    reply.view("/src/pages/submit.html", {});
+  });
+});
+
+//get '/en/entry', '/en/entry/'
+["/en/entry", "/en/entry/"].forEach(function(item) {
+  fastify.get(item, function (request, reply) {
+    reply.view("/src/pages/entry.en.html", {});
+  });
+});
+
+//get '/en/submit', '/en/submit/'
+["/en/submit", "/en/submit/"].forEach(function(item) {
+  fastify.get(item, function (request, reply) {
+    reply.view("/src/pages/submit.en.html", {});
+  });
+});
+
 //get '/list', '/list/'
 ["/list", "/list/"].forEach(function(item) {
   fastify.get(item, async function (request, reply) {
 
     //get list
     let list = await fs.readdir('/media/storage/public/sound-parade/');
-    console.log(list);
+
+    // console.log(list);
+
     let folders = [];
     for (const item of list) {
+      var fields = JSON.parse((await fs.readFile('/media/storage/public/sound-parade/' + item + '/fields.json')).toString('utf8'));
       folders.push({
         foldername: item,
-        message: (await fs.readFile('/media/storage/public/sound-parade/' + item + '/message.txt')).toString('utf8')
+        group: fields.group,
-      })
+        title: fields.title,
+        comment: fields.comment,
+      });
     }
 
+    // console.log(folders);
+
     reply.view("/src/pages/list.html", {
       list: folders,
     });
@@ -96,7 +124,33 @@ fastify.get("/entries", async function (request, reply) {
   reply.send({ list: list });
 });
 
-// //get '/folder:{foldername}'
+//get '/delete'
+fastify.get("/delete/:foldername/:pass", async function (request, reply) {
+
+  //get pw
+  var fields = JSON.parse((await fs.readFile('/media/storage/public/sound-parade/' + request.params.foldername + '/fields.json')).toString('utf8'));
+
+  var res = false;
+  if (fields.pass == request.params.pass) {
+    // console.log('good pass');
+
+    //ok. let's move it to trashbin. (mv ../sound-parade.trash)
+    // await fs.rename('/media/storage/public/sound-parade/' + request.params.foldername, '/media/storage/public/sound-parade.trash/' + request.params.foldername);
+
+    const client = new Client(server);
+    const folder = await client.getFolder("/Storage/public/sound-parade/" + request.params.foldername);
+    await folder.move("/Storage/public/sound-parade.trash/" + request.params.foldername);
+
+    //
+    res = true;
+  } else {
+    // console.log('wrong pass');
+  }
+
+  reply.send({ result: res });
+});
+
+// //get '/folder:foldername'
 // fastify.get("/folder/:foldername", async function (request, reply) {
 //   reply.send({ foldername: foldername });
 // });
@@ -112,8 +166,10 @@ fastify.post("/entry", async function (request, reply) {
   // console.log(audiofile.fields.message.value);
 
   //convert to mp3 ?
+  var converted = false;
   if (path.extname(audiofile.filename) !== ".mp3") {
     console.log("convert to mp3...");
+    converted = true;
     function converter() {
      return new Promise((resolve, reject) => {
        //
@@ -141,16 +197,24 @@ fastify.post("/entry", async function (request, reply) {
 
   //create unique folder ==> timestamp + uuid
   const folder = await client.createFolder("Storage/public/sound-parade/" + moment().tz('Asia/Seoul').format('YYYYMMDD-HHmmss - ') + uuidv1());
-
+  if (converted) {
-  const file = await folder.createFile("audio.mp3", await fs.readFile(tmpdir + '/converted.mp3'));
+    const file = await folder.createFile("audio.mp3", await fs.readFile(tmpdir + '/converted.mp3'));
-  const text = await folder.createFile("message.txt", Buffer.from(audiofile.fields.message.value));
+  } else {
+    const file = await folder.createFile("audio.mp3", await fs.readFile(audiofile.filepath));
+  }
   const image = await folder.createFile("pixels.png", await fs.readFile(pixelfile.filepath));
+  const json = await folder.createFile("fields.json", Buffer.from(JSON.stringify({
+    group: audiofile.fields.group.value,
+    title: audiofile.fields.title.value,
+    comment: audiofile.fields.comment.value,
+    pass: audiofile.fields.pass.value
+  })));
 
-  reply.view("/src/pages/entry.html", {}); //???
+  // reply.view("/src/pages/entry.html", {}); //???
 });
 
 //socket.io
-var score = require("./public/score.json");
+//var score = require("./public/score.json");
 
 //
 //there will be 16 rooms called: "room0", "room1", ... , "room15"

src/pages/entry.en.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Walking Towards the Flow | entry</title>
+    <!-- <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> -->
+    <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>
+    <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>
+    <div class="content ph5 center">
+      <div class="lang"><a href="https://stream.dianaband.info/entry">KR</a></div>
+    <div class="content">
+      <div class="list"><a href="https://stream.dianaband.info/en/list">list</a></div>
+      <div class="notice">
+        <section>
+          <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
+          <p class="white f3 pv3">
+            Have you ever seen a parade outside the procession? Drums and shouts are heard in the distance, many beings shouting, flowing by, groups appearing and moving away...
+          </p>
+          <p class="white f3 pv3">
+            «Walking Toward the Flow» is a sound parade that creates a procession of sounds in the online space. Anyone can participate in this parade, which is made by collecting the sounds you send.
+          </p>
+          <p class="white f3 pv3">
+            «Walking Toward the Flow» consists of a total of five 'flock' of sounds: the sounds of promises, the sounds of speaking, the sounds of the body, the sounds of objects around, and the sounds of someone. They will flow in groups for about 3 minutes each and a total of 15 minutes.
+          </p>
+          <p class="white f3 pv3">
+            On the night of January 27 (Thursday), the «Walking to the Flow» parade will be broadcasted along with a live performance at the 'the Night of Ideas' hosted by the Embassy of France (Ambassade de France en Corée du Sud). Thank you for your participation and interest.
+          </p>
+          <p class="white f3 pv3">
+            Recruiting sounds<br/>
+            January 17, 2022 (Mon) – January 26, 2022 (Wed)
+          </p>
+          <p class="white f3 pv3">
+            Live performance<br/>
+            January 27th, 2022 (Thursday)<br>
+            20:45-21:00 (KST), 12:45-13:00 (CET)<br/>
+          </p>
+          <p class="white f3 pv3">
+            Place<br/>
+            YouTube streaming, links
+          </p>
+          <p class="white f3 pv3">
+            Parade Composition<br/>
+            Flock0  promises — Flock1 flags — Flock2 bodies — Flock3 objects — Flock4  Whoness
+          </p>
+        </section>
+        <section class="participation">
+          <p class="white f3 pv3 sec">
+            <h2>How to participate</h2>
+            <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">
+                  <li>• Flock1 flags — Speak out five times about what you like or value.</li>
+                  <li>• Flock2 bodies —Record the sound of your body. Applause and whistling.</li>
+                  <li>• Flock3 objects — find the sound of things around you. Bubble wrap sound, Beads sound.</li>
+                  <li>• Whoness —Collect the sound of others. animal, sound of water, place to take a walk.</li>
+                </ol>
+              </li>
+              <li>2. Upload the recorded sound file.</li>
+              <li>3. After filling out the title and description of the sound, draw the shape of the sound and submit it.</li>
+            </ol>
+          </p>
+        </section>
+        <section>
+          <h2>Sound Submission</h2>
+          <form id="form" class="pv3 white f3" method="POST" enctype="multipart/form-data">
+            <ul class="submit">
+              <li>
+                <h3>1. Sound Type</h3>
+                <div class="pv3">
+                  <ul>
+                    <li>
+                      <input type="radio" name="chk_info" value="flag"> Flock1 flags
+                    </li>
+                    <li>
+                      <input type="radio" name="chk_info" value="body"> Flock2 bodies
+                    </li>
+                    <li>
+                      <input type="radio" name="chk_info" value="object"> Flock3 objects
+                    </li>
+                    <li>
+                      <input type="radio" name="chk_info" value="any"> Flock4  Whoness
+                    </li>
+                  </ul>
+                </div>
+                <li>
+                  <h3>2. Sound File</h3>
+                  <div class="pv3">
+                    <input type="file" name="audiofile" required="required" />
+                  </div>
+                </li>
+                <li>
+                  <h3>3. title</h3>
+                  <div class="pv3">
+                    <input id="message" name="message" required="required" type="text" />
+                  </div>
+                </li>
+                <li>
+                  <h3>4. Descript the sound</h3>
+                  <div class="pv3">
+                    <input id="message" name="message" required="required" type="text" />
+                  </div>
+                </li>
+                <!-- pixels.png ~ made with p5.js -->
+                <li class="noscroll">
+                  <h3>5. Draw an image of the sound</h3>
+                  <div class="pv3" id="p5">
+                  </div>
+                </li>
+                <li>
+                <h3>6. passward 2 numbers. It's required if you delete it.</h3>
+                  <div>
+                    <input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
+                  </div>
+                </li>
+                <li>
+                  <div class="pv3">
+                    <input type="submit" value="Upload" />
+                  </div>
+                </li>
+              </li>
+            </ul>
+          </form>
+        </section>
+      </div>
+    </div>
+    <script src="/entry.js"></script>
+
+  </body>
+</html>

src/pages/entry.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>흐름을 향하여 걷는 | 입장</title>
-    <!-- <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> -->
     <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,125 +13,125 @@
   </head>
   <body>
     <div class="bg"></div>
-    <div class="content ph5 center">
+    <div class="content">
-      <div class="lang"><a href="">EN</a></div>
+      <div class="lang"><a href="https://stream.dianaband.info/en/entry">EN</a></div>
+    <div class="content">
+      <div class="list"><a href="https://stream.dianaband.info/list">목록</a></div>
       <div class="notice">
         <section>
           <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
-          <p class="white f3 pv3">
+          <p>
-            퍼레이드를 행렬 밖에서 바라본 적이 있나요? 북소리와 함성소리가 멀리서 들리고, 많은 존재들이 외치고, 흐르듯 지나가고, 무리가 등장하고, 잦아지는......
+            퍼레이드를 행렬 밖에서 바라본 적이 있나요? 북소리와 함성소리가 멀리서 들리고, 많은 존재들이 외치고, 흐르듯 지나가고, 무리가 등장하고, 멀어지는......
           </p>
-          <p class="white f3 pv3">
+          <p>
-            «흐름을 향하여 걷는»은 온라인으로 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리를 모아 만듭니다. 말하는 소리, 몸이 내는 소리, 주변의 사물 또는 누군가의 소리를 보내주세요.
+            «흐름을 향하여 걷는»은 온라인 공간에 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리가 모여 만들어집니다.
           </p>
-          <p class="white f3 pv3">
+          <p>
-            보내주신 소리는 무리를 지어 모양과 함께 흘러갑니다. «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어지고 무리별로 각 3분씩 총 15분동안 진행합니다.
+            «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다.
           </p>
-          <p class="white f3 pv3">
+          <p>
-            1월 27일(목) 밤, 프랑스 대사관이 주최하는 ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 연주와 함께 송출될 예정입니다. 많은 참여 및 관심 부탁드립니다.
+            1월 27일(목) 밤, 프랑스 대사관이 주최하는 ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. 많은 참여 및 관심 부탁드립니다.
           </p>
-        <div class="info">
+          <div class="info">
-          <p class="white f3 pv3">
+            <p>
-            소리 모집<br/>
+              소리 모집<br/>
-            2022년 1월 17일(월)–2022년 1월 26일(수)
+              2022년 1월 17일(월)–2022년 1월 26일(수)
-          </p>
+            </p>
-          </p>
+            <p>
-          <p class="white f3 pv3">
+              라이브 공연<br/>
-            라이브 공연<br/>
+              2022년 1월 27일(목)<br>
-            2022년 1월 27일(목)<br>
+              20:45-21:00 (KST), 12:45-13:00 (CET)<br/>
-            20:45-21:00 (KST), 12:45-13:00 (CET)<br/>
+            </p>
-          </p>
+            <p>
-          <p class="white f3 pv3">
+              장소<br/>
-            장소<br/>
+              <a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">프랑스 문화원 유튜브 채널</a>
-            유튜브 스트리밍(추후공지), 링크들
+            </p>
-          </p>
+            <p>
-          <p class="white f3 pv3">
+              퍼레이드 구성<br/>
-            퍼레이드 구성<br/>
+              무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들
-            무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들
+            </p>
-          </p>
+          </div>
-        </div>
         </section>
         <section class="participation">
-          <p class="white f3 pv3 sec">
+          <p>
             <h2>참여 방법</h2>
-              <ol>
+            <ol>
-                <li>1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요.
+              <li>1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요.
-                  <ol class="category">
+                <ol class="category">
-                    <li>• 무리1 깃발들 — 좋아하는 것, 가치에 대해 다섯 번 외쳐주세요.</li>
+                  <li>• 무리1 깃발들 — 좋아하는 것, 가치에 대해 다섯 번 외쳐주세요.</li>
-                    <li>• 무리2 신체들 — 몸에서 나는 소리를 녹음해 보아요. 박수, 휘파람도 좋아요.</li>
+                  <li>• 무리2 신체들 — 몸에서 나는 소리를 녹음해 보아요. 박수, 휘파람도 좋아요.</li>
-                    <li>• 무리3 사물들 — 주변 사물들의 소리를 찾아 주세요. 뽁뽁이 소리, 구슬 소리</li>
+                  <li>• 무리3 사물들 — 주변 사물들의 소리를 찾아 주세요. 뽁뽁이 소리, 구슬 소리</li>
-                    <li>• 무리4 누구들 — 누구의 소리를 모아주세요. 반려동물, 물 소리, 산책의 장소</li>
+                  <li>• 무리4 누구들 — 누구의 소리를 모아주세요. 반려동물, 물 소리, 산책의 장소</li>
-                  </ol>
+                </ol>
-                </li>
+              </li>
-                <li>2. 녹음한 소리 파일을 업로드해주세요.</li>
+              <li>2. 녹음한 소리 파일을 업로드해주세요.</li>
-                <li>3. 소리의 제목과 묘사을 입력한 뒤, 소리의 모양을 그려 제출해주세요.</li>
+              <li>3. 소리의 제목과 묘사을 입력한 뒤, 소리의 모양을 그려 제출해주세요.</li>
-              </ol>
+            </ol>
           </p>
         </section>
         <section>
-          <p class="white f3 pv3">
+          <h2>소리 제출</h2>
-            <h2>소리 제출</h2>
+          <form id="form" method="POST" enctype="multipart/form-data">
-            <form
+            <ul class="submit">
-              id="form"
+              <li>
-              class="pv3 white f3"
-              method="POST"
-              enctype="multipart/form-data"
-            >
-          <ul class="submit">
-            <li>
                 <h3>1. 소리 유형</h3>
                 <div class="pv3">
                   <ul>
                     <li>
-                      <input type="radio" name="chk_info" value="flag"> 무리1 깃발들
+                      <input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
                     </li>
                     <li>
-                      <input type="radio" name="chk_info" value="body"> 무리2 신체들
+                      <input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들
                     </li>
                     <li>
-                      <input type="radio" name="chk_info" value="object"> 무리3 사물들
+                      <input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들
                     </li>
                     <li>
-                      <input type="radio" name="chk_info" value="any"> 무리4 누구들
+                      <input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
-                    <li>
+                    </li>
-                  </ol>
+                  </ul>
                 </div>
-            </li>
+                <li>
-            <li>
+                  <h3>2. 소리 파일</h3>
-                <h3>2. 소리 파일</h3>
+                  <div>
-                <div class="pv3">
+                    <input type="file" name="audiofile" autocomplete="off" required />
-                <input type="file" name="audiofile" required="required" />
+                  </div>
-                </div>
+                </li>
-            </li>
+                <li>
-            <li>
+                  <h3>3. 소리 제목</h3>
-                <h3>3. 소리 제목</h3>
+                  <div>
-                <div class="pv3">
+                    <input id="title" name="title" type="text" autocomplete="off" required />
-                <input id="message" name="message" required="required" type="text" />
+                  </div>
-                </div>
+                </li>
-            </li>
+                <li>
-            <li>
+                  <h3>4. 소리 묘사</h3>
-                <h3>4. 소리 묘사</h3>
+                  <div>
-                <div class="pv3">
+                    <input id="comment" name="comment" type="text" autocomplete="off" />
-                <input id="message" name="message" required="required" type="text" />
+                  </div>
-                </div>
+                </li>
-            </li>
+                <!-- pixels.png ~ made with p5.js -->
-          <!-- pixels.png ~ made with p5.js -->
+                <li class="noscroll">
-            <li class="noscroll">
+                  <h3>5. 소리 모양</h3>
-                <h3>5. 소리 모양</h3>
+                  <div id="p5">
-                <div class="pv3" id="p5">
+                  </div>
-                </div>
+                </li>
-            </li>
+                <li>
-            <li>
+                  <h3>6. 비밀번호 숫자 2개_삭제시 필요</h3>
-                <div class="pv3">
+                  <div>
-                <input type="submit" value="Upload" />
+                    <input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
-            </li>
+                  </div>
-            </div>
+                </li>
+                <li>
+                  <div>
+                    <input id="submit" type="submit" value="제출하기" />
+                  </div>
+                </li>
+              </li>
+            </ul>
           </form>
-          </p>
         </section>
       </div>
     </div>
-    <script src="/entry/script.js"></script>
+    <script src="/entry.js"></script>
-
   </body>
 </html>

src/pages/list.en.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Walking Towards the Flow | list</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>
+    <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>
+    <div class="popup"></div>
+<div class="content">
+      <div class="lang"><a href="https://stream.dianaband.info/list">KR</a></div>
+    <div class="content" id="list">
+      <div class="list-sub"><a href="https://stream.dianaband.info/en/entry">Submission<i class='fas fa-bell' style='font-size:24px'></i></a></div>
+    <div class="content" id="list">
+      <div class="list-parade"><a href="https://stream.dianaband.info/">Parade<i class='fas fa-bell' style='font-size:24px'></i></a></div>      <div class="notice">
+        <h1>Walking &nbsp;Towards &nbsp;the Flow</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>
+          <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}}
+      </div>
+    </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개...");
+       }
+     }
+    </script>
+  </body>
+</html>

src/pages/list.html

@@ -13,20 +13,57 @@
   </head>
   <body>
     <div class="bg"></div>
-    <div class="content ph5 center" id="list">
+    <div class="popup"></div>
+    <div class="content">
+      <div class="lang"><a href="https://stream.dianaband.info/en/list">EN</a></div>
+    <div class="content" id="list">
+      <div class="list-sub"><a href="https://stream.dianaband.info/entry">모집<i class='fas fa-bell' style='font-size:24px'></i></a></div>
+    <div class="content" id="list">
+      <div class="list-parade"><a href="https://stream.dianaband.info/">퍼레이드<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" />
-          <p class="name">{{this.message}}</p>
+          <div class="group">{{this.group}}</div>
-          <!-- <audio controls class="sound">
+          <div class="title">{{this.title}}</div>
-               <source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg">
+          <div class="comment">{{this.comment}}</div>
-               </audio> -->
+          <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}}
       </div>
     </div>
-    <script src="/list.js"></script>
+    <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개...");
+       }
+     }
+    </script>
   </body>
 </html>

src/pages/parade.html

@@ -5,14 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>흐름을 향하여 걷는</title>
     <link rel="stylesheet" href="/default.css" />
-    <link rel="stylesheet" href="/main.css" />
+    <link rel="stylesheet" href="/parade.css" />
     <script src="/js/p5-v1.1.9.min.js"></script>
     <script src="/js/socket-v2.3.0.io.slim.js"></script>
     <script src="/js/p5-v0.3.11.sound.min.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" />
-    <script src="/sketch.js"></script>
+    <script src="/parade.js"></script>
   </head>
   <body>
     <div class="bg"></div>

src/pages/submit.en.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Walking Towards the Flow | entry</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>
+    <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>
+    
+      <div class="notice">
+        <section>
+          <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
+          <p>
+            Submission complete!
+          </p>
+   <div class="content">
+       <div class="sub"><a href="https://stream.dianaband.info/entry">≪ SUBMISSTION</a></div>
+      <div class="content">
+      <div class="list2"><a href="https://stream.dianaband.info/list">▤ LIST</a></div>
+      <div class="content">
+      <div class="parade"><a href="https://stream.dianaband.info/">PARADE ≫</a></div>
+        </section>
+      </div>
+    </div>
+  </body>
+</html>

src/pages/submit.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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>
+    <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>
+      <div class="notice">
+        <section>
+          <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
+          <p>
+            제출되었습니다
+          </p>
+      <div class="content">
+       <div class="sub"><a href="https://stream.dianaband.info/entry">≪ 소리 모집</a></div>
+      <div class="content">
+      <div class="list2"><a href="https://stream.dianaband.info/list">▤ 소리 목록</a></div>
+      <div class="content">
+      <div class="parade"><a href="https://stream.dianaband.info/">퍼레이드 ≫</a></div>
+        </section>
+      </div>
+    </div>
+  </body>
+</html>