[Upload] UIUX 기능정의서

Former-commit-id: f744c6270521b6e92dc5c8f06a1580730152a164
soncy0311 · Nov 26, 2021 · 6ad8dae · 6ad8dae
1 parent 043d975
commit 6ad8dae
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 107 deletions.
diff --git a/diet_with_covid(wire frame).pdf → UIUX 기능정의서.pdf b/diet_with_covid(wire frame).pdf → UIUX 기능정의서.pdf
diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -150,25 +150,14 @@ a:active{color: white;}
     align-items: center;
     justify-content: center;
 }
-/*--------scroll animation--------*/
-.scroll{
-    opacity: 0;
-    transition: all 3s ease;
-    transform: translate(0, 100px);
-}
-.scroll.show{
-    opacity: 1;
-    transform: none;
-}
 /*--------index--------*/
 .index{
     width: 100%;
     height: 100%;
     text-align: center;
 }
 .intro{
-    padding-bottom: 150px;
-    border: 1px solid;
+    padding-bottom: 200px;
 }
 #intro_detail{
     font-size: 25px;
@@ -220,21 +209,34 @@ a:active{color: white;}
     to {opacity: 0;}
 }
 /*--------index diet--------*/
-.index_diet{
+.index_inner{
+    height: 500px;
+    border: 1px solid;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    border: 1px solid;
+    justify-content: space-between;
 }
-.index_diet_image{
-    margin-top: 50px;
+figure{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+figure img{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 0;
+    height: 500px;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
 }
-.index_diet_description{
+.index_description{
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 400px;
     margin-top: 50px;
 }
-.index_diet_description_detail{
+.index_description_detail{
     margin-top: 30px;
     margin-bottom: 80px;
     text-align: center;
@@ -248,28 +250,6 @@ a:active{color: white;}
     border-radius: 15px;
 }
 /*--------index visual--------*/
-.index_visual{
-    padding-top: 150px;
-    display: flex;
-    justify-content: center;
-    border: 1px solid;
-}
-.index_visual_image{
-    float: left;
-    margin: 8px;
-    margin-right: 50px;
-}
-.index_visual_description{
-    float: right;
-    height: 400px;
-    margin-top: 100px;
-    text-align: left;
-}
-.index_visual_description_detail{
-    width: 200px;
-    margin-top: 30px;
-    margin-bottom: 80px;
-}
 /*--------img & bubble--------*/
 .doctor{
     padding-top: 10px;
@@ -468,6 +448,7 @@ a:active{color: white;}
 .symptom_1{
     margin: 10px 0px 20px 0px;
     display: flex;
+    align-items: center;
 }
 .symptom_1 label{
     font-weight: 400;

diff --git a/app/static/image/diet-url-image.jpg → app/static/image/diet_url_image.jpg b/app/static/image/diet-url-image.jpg → app/static/image/diet_url_image.jpg
diff --git a/app/static/image/diet_url_image_back.png b/app/static/image/diet_url_image_back.png
diff --git a/app/static/image/visualization-url-image.jpg → app/static/image/visualization_url_image.jpg b/app/static/image/visualization-url-image.jpg → app/static/image/visualization_url_image.jpg
diff --git a/app/static/image/visualization_url_image_back.png b/app/static/image/visualization_url_image_back.png
diff --git a/app/static/js/index.js b/app/static/js/index.js
@@ -1,20 +1,3 @@
-// 스크롤 시점에 따라 올라오는 애니메이션 //
-const saTriggerMargin = 100;
-const saElementList = document.querySelectorAll(".scroll");
-
-const saFunc = function() {
-    for (const element of saElementList) {
-        if (!element.classList.contains('show')) {
-            if (window.innerHeight > element.getBoundingClientRect()
-                .top + saTriggerMargin) {
-                    element.classList.add('show');
-            }
-        }
-    }
-}
-window.addEventListener('load', saFunc);
-window.addEventListener('scroll', saFunc);
-
 // question detail 타이핑 모션//
 const content = "의학적 전문성이 아닌, 데이터 기반의 해석을 통해 식단을 제공 받을 수 있을까?";
 const text = document.querySelector(".question_detail");
@@ -37,22 +20,4 @@ window.onload=function() {
     setInterval(typing, 140)
 }
 
-// 스크롤 이벤트
-// $(".intro_detail").on("mousewheel", function(e){
-//     var wheel = e.originalEvent.wheelDelta;
-//     var intro_detail = $("#intro_detail").offset().top;
-
-//     if(wheel>0){
-//         if(intro_detail<)
-//     }
-// });
-
-// $(function() {
-//     $(window).scroll(function() {
-//         if ($(this).scrollTop() >= Math.ceil($('.intro_detail').offset().top)) {
-//             $()
-//         } else {
-
-//         }
-//     });
-// });
+// 스크롤 속도 조절
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -6,11 +6,14 @@
     <title>Way to Beat Covid-19</title>
 
     <link rel="stylesheet" href="../static/css/style.css?ver=0.3">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css">
     <link rel="stylesheet" href="../static/css/diet_chart.css">
     <link rel="stylesheet" href="../static/css/foodSearch.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
     <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> 
+    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
     <script src="https://code.jquery.com/jquery-latest.min.js"></script>
 
     {% block css %}
@@ -19,6 +22,7 @@
 </head>
 
 <body class="base_body">
+    <script>AOS.init();</script>
     <div class="top_bar"> 
         <h1>
             <a href="/" style="background: white;">Way to Beat Covid-19</a>

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -18,56 +18,55 @@
 <div class="index" class="index">
     <div class="intro">
         <h2 id="with_corona">with Corona</h2>
-        <div id="intro_detail" class="scroll">
+        <div id="intro_detail" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">
             <p>위드 코로나 시대에</p>
             <p>예방과 회복을 위한 식단을 추천드립니다</p>
         </div>
-        <div id="question" class="scroll"><p>Question</p></div>
+        <div id="question" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1500">
+            <p>Question</p>
+        </div>
         <div>
             <span class="question_detail">
                 <!-- 의학적 전문성이 아닌, 데이터 기반의 해석을 통해 식단을 제공 받을 수 있을까? -->
             </span><span class="blink">|</span>
         </div>
     </div>
 
-    <div class="index_diet" name="index_diet">
-        <div class="index_diet_image">
-            <a href="/diet">
-                <img src="../static/image/diet-url-image.jpg" alt="diet 이동 링크">
-            </a><br>
+    <div class="index_inner" name="index_diet">
+        <div class="index_image" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="900">
+            <figure name="diet_img">
+                <img src="../static/image/diet_url_image.jpg" alt="diet_img">
+            </figure>
         </div>
-    
-        <div class="index_diet_description">
-            <div>
-                <div class="index_diet_description_detail">
+
+        <div class="index_description">
+            <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1400">
+                <div class="index_description_detail">
                     <p>코로나 감염 예방 및 회복을 위한 식단을 추천드립니다</p>
                     <p>배달 음식 주문 증가로 인한 불균형한 식단을 관리</p>
                     <p>식단과 영양소에 따른 데이터로 코로나에 대항하기 좋은 영양소를 제안</p>
                     <p>모델을 선정해 섭취한 음식의 영양소 데이터와</p>
                     <p>코로나에 대항할 수 있는 식단 및 음식을 추천</p>
                 </div>
-            </div>
-            <div>
-                <a href="/diet" class="index_diet_button" style="border: 1px solid;">
-                    TEST START!
-                </a>
+                <div>
+                    <a href="/diet" class="index_diet_button" style="border: 1px solid;">
+                        TEST START!
+                    </a>
+                </div>
             </div>
         </div>
     </div>
 
-    <div class="index_visual">
-        <div class="index_visual_image">
-            <a href="/visual">
-                <img src="../static/image/visualization-url-image.jpg" alt="visualization 이동 링크">
-            </a><br>
+    <div class="index_inner" name="index_visual">
+        <div class="index_image" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="900">
+            <figure name="visual_img">
+                <img src="../static/image/visualization_url_image.jpg" alt="visual_img">
+            </figure>
         </div>
 
-        <div class="index_visual_description">
-            <div>
-                <li style="font-size: 20pt; font-weight: bold;">
-                    <a href="/visual">Data Visualization</a>
-                </li>
-                <div class="index_visual_description_detail">
+        <div class="index_description">
+            <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1400">
+                <div class="index_description_detail">
                     <p>사용된 데이터 셋</p>
                 </div>
             </div>

diff --git a/app/templates/kit.html b/app/templates/kit.html
@@ -9,7 +9,6 @@
             </div>
         </div>
         <div name="diet_chart" class="diet_chart">
-            분석 차트
             {% block diet_chart %}
             {% endblock %}
         </div>

diff --git a/app/templates/loading.html b/app/templates/loading.html
@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% block content %}
-<!-- <meta http-equiv="refresh" content="5; url=http://localhost:5000/diet_result"> -->
+<meta http-equiv="refresh" content="5; url=http://localhost:5000/diet_result">
 
 <div class="loading_background">
     <div class="container">