design: loading and error page

#12
boostcampaitech4lv23cv1 · Jan 29, 2023 · 4b46cb0 · 4b46cb0
1 parent 19bbf8d
commit 4b46cb0
Show file tree

Hide file tree

Showing 7 changed files with 344 additions and 121 deletions.
diff --git a/app/static/css/error.css 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;
+    }
+}
diff --git a/app/static/css/loading.css 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}
+  }
diff --git 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;
+  }
diff --git 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
@@ -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>