From 4b46cb07de6a219b4930a0d8f59957da65a4c2db Mon Sep 17 00:00:00 2001
From: byj9402 <byj9402@naver.com>
Date: Sun, 29 Jan 2023 15:09:12 +0000
Subject: [PATCH] design: loading and error page

#12
---
 app/static/css/error.css   |  82 ++++++++++++++++
 app/static/css/loading.css | 185 +++++++++++++++++++++++++++++++++++++
 app/static/css/play.css    |  43 +++++++++
 app/templates/error.html   |  41 +-------
 app/templates/index.html   |   2 +-
 app/templates/loading.html |  57 +++++-------
 app/templates/play.html    |  55 +----------
 7 files changed, 344 insertions(+), 121 deletions(-)
 create mode 100644 app/static/css/error.css
 create mode 100644 app/static/css/loading.css

diff --git a/app/static/css/error.css b/app/static/css/error.css
new file mode 100644
index 0000000..4bec546
--- /dev/null
+++ b/app/static/css/error.css
@@ -0,0 +1,82 @@
+.Maestro-logo {
+    color: black;
+    display: flex;
+    justify-content: center;
+    padding: 15px;
+    text-decoration : none;
+  }
+
+  .Maestro-logo:hover{
+    color: black;
+  }
+
+.error_btn {
+  animation: fadein 2s;
+  -moz-animation: fadein 2s;
+  -webkit-animation: fadein 2s;
+  -o-animation: fadein 2s;
+  width:100px;
+  margin: auto;
+  display: block;
+  color: darkolivegreen;
+  background-color: #f5f5f5;
+  text-align: center;
+  border:none;
+  margin-top:10px;
+}
+
+.display1 {
+  animation: fadein 2s;
+  -moz-animation: fadein 2s;
+  -webkit-animation: fadein 2s;
+  -o-animation: fadein 2s;
+}
+
+.display2 {
+  margin: 10px;
+  animation: fadein 2s;
+  -moz-animation: fadein 2s;
+  -webkit-animation: fadein 2s;
+  -o-animation: fadein 2s;
+}
+
+.display2 .text{
+  font-size: medium;
+}
+
+.error {
+    margin: 40px;
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@-moz-keyframes fadein { /* Firefox */
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@-webkit-keyframes fadein { /* Safari and Chrome */
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@-o-keyframes fadein { /* Opera */
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
\ No newline at end of file
diff --git a/app/static/css/loading.css b/app/static/css/loading.css
new file mode 100644
index 0000000..f938e3f
--- /dev/null
+++ b/app/static/css/loading.css
@@ -0,0 +1,185 @@
+  .Maestro-logo {
+    color: black;
+    display: flex;
+    justify-content: center;
+    padding: 15px;
+    text-decoration : none;
+  }
+
+  .Maestro-logo:hover{
+    color: black;
+  }
+
+  .play_page_btn {
+    width:100px;
+    margin: auto;
+    display: block;
+    color: darkolivegreen;
+    background-color: #f5f5f5;
+    text-align: center;
+    border:none;
+    margin-top:5px;
+  }
+
+  .loading-container,
+  .loading {
+        height: 100px;
+        position: relative;
+        width: 100px;
+        border-radius: 100%;
+    }
+
+  .loading-container { margin: 40px auto }
+
+  .loading {
+        border: 2px solid transparent;
+        border-color: transparent #fff transparent #FFF;
+        -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
+        -moz-transform-origin: 50% 50%;
+        -o-animation: rotate-loading 1.5s linear 0s infinite normal;
+        -o-transform-origin: 50% 50%;
+        -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
+        -webkit-transform-origin: 50% 50%;
+        animation: rotate-loading 1.5s linear 0s infinite normal;
+        transform-origin: 50% 50%;
+    }
+
+  .loading-container:hover .loading {
+        border-color: transparent darkolivegreen transparent darkolivegreen;
+    }
+
+  .loading-container:hover .loading,
+  .loading-container .loading {
+        -webkit-transition: all 0.5s ease-in-out;
+        -moz-transition: all 0.5s ease-in-out;
+        -ms-transition: all 0.5s ease-in-out;
+        -o-transition: all 0.5s ease-in-out;
+        transition: all 0.5s ease-in-out;
+    }
+
+  #loading-text {
+      -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
+      -o-animation: loading-text-opacity 2s linear 0s infinite normal;
+      -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
+      animation: loading-text-opacity 2s linear 0s infinite normal;
+        color: black;
+        font-size: 12px;
+        font-weight: bold;
+        margin-top: 42px;
+        opacity: 0;
+        position: absolute;
+        text-align: center;
+        text-transform: uppercase;
+        top: 0;
+        width: 100px;
+    }
+
+    .loading-script {
+      -moz-animation: loading-script-opacity 5s linear 0s infinite normal;
+      -o-animation: loading-script-opacity 5s linear 0s infinite normal;
+      -webkit-animation: loading-script-opacity 5s linear 0s infinite normal;
+      animation: loading-script-opacity 5s linear 0s infinite normal;
+      color: black;
+      font-size: 10px;
+      margin-top: 35px;
+      opacity: 0;
+      text-align: center;
+      top: 0;
+      width: 100%;
+    }
+
+  @keyframes rotate-loading {
+        0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
+        100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
+    }
+
+  @-moz-keyframes rotate-loading {
+        0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
+        100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
+    }
+
+  @-webkit-keyframes rotate-loading {
+        0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
+        100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
+    }
+
+  @-o-keyframes rotate-loading {
+        0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
+        100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
+    }
+
+  @keyframes rotate-loading {
+        0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
+        100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
+    }
+
+  @-moz-keyframes rotate-loading {
+        0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
+        100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
+    }
+
+  @-webkit-keyframes rotate-loading {
+        0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
+        100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
+    }
+
+  @-o-keyframes rotate-loading {
+        0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
+        100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
+    }
+
+  @keyframes loading-script-opacity {
+        0%  {opacity: 0}
+        33% {opacity: 1}
+        66% {opacity: 1}
+        100%{opacity: 0}
+    }
+
+  @-moz-keyframes loading-script-opacity {
+        0%  {opacity: 0}
+        33% {opacity: 1}
+        66% {opacity: 1}
+        100%{opacity: 0}
+    }
+
+  @-webkit-keyframes loading-script-opacity {
+        0%  {opacity: 0}
+        33% {opacity: 1}
+        66% {opacity: 1}
+        100%{opacity: 0}
+    }
+
+  @-o-keyframes loading-script-opacity {
+        0%  {opacity: 0}
+        33% {opacity: 1}
+        66% {opacity: 1}
+        100%{opacity: 0}
+    }
+
+    @keyframes loading-text-opacity {
+      0%  {opacity: 1}
+      33% {opacity: 1}
+      66% {opacity: 1}
+      100%{opacity: 1}
+  }
+
+@-moz-keyframes loading-text-opacity {
+      0%  {opacity: 1}
+      33% {opacity: 1}
+      66% {opacity: 1}
+      100%{opacity: 1}
+  }
+
+@-webkit-keyframes loading-text-opacity {
+      0%  {opacity: 1}
+      33% {opacity: 1}
+      66% {opacity: 1}
+      100%{opacity: 1}
+  }
+
+@-o-keyframes loading-text-opacity {
+      0%  {opacity: 1}
+      33% {opacity: 1}
+      66% {opacity: 1}
+      100%{opacity: 1}
+  }
\ No newline at end of file
diff --git a/app/static/css/play.css b/app/static/css/play.css
index e69de29..b3131fe 100644
--- a/app/static/css/play.css
+++ b/app/static/css/play.css
@@ -0,0 +1,43 @@
+.sheets {
+    margin-top: 15px;
+    text-align: center;
+  }
+
+  .sheets .top-button{
+    background-color: #fff;
+    border: none;
+  }
+
+  .sheets-box {
+    width: 50%;
+    box-sizing: border-box;
+    /* margin-right: 30px; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+  }
+  .sheets-box .sheets-file {
+    width: 100%;
+    height: 750px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 3px dashed #dbdbdb;
+  }
+  .sheets-box .sheets-file .image {
+    width: 40px;
+  }
+
+  .music-player {
+    display: flex;
+    justify-content: right;
+  }
+
+  .download-button{
+    text-align: right;
+      background-color: #fff;
+      border: none;
+  }
\ No newline at end of file
diff --git a/app/templates/error.html b/app/templates/error.html
index 4429d1c..e09f67b 100644
--- a/app/templates/error.html
+++ b/app/templates/error.html
@@ -9,21 +9,10 @@
 
     <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/navbars/">
     <link href="{{url_for('static', path='/css/custom.css')}}" rel="stylesheet">
+    <link href="{{url_for('static', path='/css/error.css')}}" rel="stylesheet">
     <link href="{{url_for('static', path='/css/bootstrap.min.css')}}" rel="stylesheet">
 
     <style>
-      .Maestro-logo {
-          color: black;
-          display: flex;
-          justify-content: center;
-          padding: 15px;
-          text-decoration : none;
-        }
-
-        .Maestro-logo:hover{
-          color: black;
-        }
-
       body {
         display: flex;
         align-items: center;
@@ -32,25 +21,9 @@
         background-color: #f5f5f5;
       }
 
-      .error_btn {
-        width:100px;
-        margin: auto;
-        display: block;
-        color: darkolivegreen;
-        background-color: #f5f5f5;
-        text-align: center;
-        border:none;
-        margin-top:5px;
-      }
-
-      .display2 {
-        margin: 10px;
+      .error_btn:hover{
+          color:darkgray;
       }
-
-      .display2 .text{
-        font-size: medium;
-      }
-
     </style>
 
   </head>
@@ -61,7 +34,7 @@
     </header>
 
 <main class="standard-form w-100 m-auto">
-  <a class="Maestro-logo">
+  <a href="/" class="Maestro-logo">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-music" viewBox="0 0 16 16"><path d="M10.304 3.13a1 1 0 0 1 1.196.98v1.8l-2.5.5v5.09c0 .495-.301.883-.662 1.123C7.974 12.866 7.499 13 7 13c-.5 0-.974-.134-1.338-.377-.36-.24-.662-.628-.662-1.123s.301-.883.662-1.123C6.026 10.134 6.501 10 7 10c.356 0 .7.068 1 .196V4.41a1 1 0 0 1 .804-.98l1.5-.3z"></path><path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"></path></svg>
     <strong>Maestro</strong>
   </a>
@@ -74,11 +47,7 @@ <h4 class="text">처음부터 다시 시작해주세요.</h4>
     </div>
         <form action="/" enctype="multipart/form-data" method="get">
         <!-- <input name="files" type="file" multiple> -->
-        <button type="main_btn" class="error_btn" id="main_page_btn" hidden>go to main</button>
-      </form>
-
-      <form id = "predict_model" action="/predict_model" enctype="multipart/form-data" method="get" onsubmit="return false;">
-        <button type="submit" id="predict_model_btn" hidden></button>
+        <button type="error_btn" class="error_btn" id="main_page_btn" hidden>go to main</button>
       </form>
 
     </header>
diff --git a/app/templates/index.html b/app/templates/index.html
index 8896b4a..4b6eb14 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -107,7 +107,7 @@
     <header>
       <div class="navbar navbar-dark bg-dark shadow-sm">
         <div class="container">
-          <a href="#" class="navbar-brand d-flex align-items-center">
+          <a href="/" class="navbar-brand d-flex align-items-center">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-music" viewBox="0 0 16 16"><path d="M10.304 3.13a1 1 0 0 1 1.196.98v1.8l-2.5.5v5.09c0 .495-.301.883-.662 1.123C7.974 12.866 7.499 13 7 13c-.5 0-.974-.134-1.338-.377-.36-.24-.662-.628-.662-1.123s.301-.883.662-1.123C6.026 10.134 6.501 10 7 10c.356 0 .7.068 1 .196V4.41a1 1 0 0 1 .804-.98l1.5-.3z"/><path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/></svg>
               <strong>Maestro</strong>
           </a>
diff --git a/app/templates/loading.html b/app/templates/loading.html
index fc7b484..8ef422f 100644
--- a/app/templates/loading.html
+++ b/app/templates/loading.html
@@ -9,21 +9,10 @@
 
     <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/navbars/">
     <link href="{{url_for('static', path='/css/custom.css')}}" rel="stylesheet">
+    <link href="{{url_for('static', path='/css/loading.css')}}" rel="stylesheet">
     <link href="{{url_for('static', path='/css/bootstrap.min.css')}}" rel="stylesheet">
 
     <style>
-      .Maestro-logo {
-          color: black;
-          display: flex;
-          justify-content: center;
-          padding: 15px;
-          text-decoration : none;
-        }
-
-        .Maestro-logo:hover{
-          color: black;
-        }
-
       body {
         display: flex;
         align-items: center;
@@ -31,24 +20,11 @@
         padding-bottom: 40px;
         background-color: #f5f5f5;
       }
-
-      .play_page_btn {
-        width:100px;
-        margin: auto;
-        display: block;
-        color: darkolivegreen;
-        background-color: #f5f5f5;
-        text-align: center;
-        border:none;
-        margin-top:5px;
-      }
-
     </style>
 
   </head>
 
 <body class="text-center">
-    
     <header>
     </header>
 
@@ -58,9 +34,14 @@
     <strong>Maestro</strong>
   </a>
 
-  <div class= "loading">
-    <h4 class="display2">loading...</h4>
-        <form action="/play" enctype="multipart/form-data" method="post">
+  <div class= "contents1">
+    <div class="loading-container">
+      <div class="loading"></div>
+      <div id="loading-text">loading</div>
+      <h6 class="loading-script" id="loadingScript">print loading script...</h6>
+    </div>
+
+      <form action="/play" enctype="multipart/form-data" method="post">
           <!-- <input name="files" type="file" multiple> -->
           <button type="play_btn" class="play_page_btn" id="play_page_btn" hidden>play!</button>
       </form>
@@ -73,7 +54,7 @@ <h4 class="display2">loading...</h4>
     </header>
 
 <main>
-  <div class= "loading">
+  <div class= "contents3">
   </div>
 </main>
 
@@ -81,13 +62,23 @@ <h4 class="display2">loading...</h4>
     <script src="{{url_for('static', path='/js/custom.js')}}"></script>
 
     <script>
+
+      var loadingScript = document.getElementById('loadingScript');
+      var arr = [
+        { loadingScript: "test0" } ,
+        { loadingScript: "test1" } ,
+        { loadingScript: "test2" }
+      ];
+      var tmp = 0;
+      
       window.onload = function(){
-        debugger
+        setInterval(function(){
+          var random = Math.floor(Math.random()*arr.length);
+          loadingScript.textContent = arr[random].loadingScript;
+        }, 5000);
         document.getElementById("predict_model").submit();
-        setTimeout(function(){
-          document.getElementById('play_page_btn').hidden=false;
-        }, 3000);
       }
+      
     </script>
 
   </body>
diff --git a/app/templates/play.html b/app/templates/play.html
index 6d51f3b..795f934 100644
--- a/app/templates/play.html
+++ b/app/templates/play.html
@@ -10,51 +10,10 @@
 
     <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/navbars/">
     <link href="{{url_for('static', path='/css/custom.css')}}" rel="stylesheet">
-
-  <link href="{{url_for('static', path='/css/bootstrap.min.css')}}" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>
-
+    <link href="{{url_for('static', path='/css/play.css')}}" rel="stylesheet">
+    <link href="{{url_for('static', path='/css/bootstrap.min.css')}}" rel="stylesheet">
 
     <style>
-
-      .sheets {
-        margin-top: 15px;
-        text-align: center;
-      }
-
-      .sheets .top-button{
-        background-color: #fff;
-        border: none;
-      }
-
-      .sheets-box {
-        width: 50%;
-        box-sizing: border-box;
-        /* margin-right: 30px; */
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        margin: auto;
-      }
-      .sheets-box .sheets-file {
-        width: 100%;
-        height: 750px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        border: 3px dashed #dbdbdb;
-      }
-      .sheets-box .sheets-file .image {
-        width: 40px;
-      }
-
-      .music-player {
-        display: flex;
-        justify-content: right;
-      }
-
       footer {
         position: fixed;
         left: 0;
@@ -66,16 +25,10 @@
       main {
         margin-bottom: 90px;
       }
-
-      .download-button{
-        text-align: right;
-          background-color: #fff;
-          border: none;
-      }
-      
-
     </style>
 
+  <script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>
+
   </head>
   <body>