코드 최적화, 폰트 수정, 전체적인 디자인 수정

양효빈
Commit 0196fbe7a99c57f93e52b272093947fee95d2ef8 0196fbe7 1 parent 94febc8f
Showing 6 changed files with 76 additions and 106 deletions
lib/countKcal.js
lib/foodInfo.js
lib/home.js
lib/info.js
lib/searchGym.js
lib/template.js
--- a/lib/countKcal.js
View file @0196fbe
+++ b/lib/countKcal.js
View file @0196fbe
@@ -4,7 +4,7 @@ var db = require('./db.js');
 const { type } = require('jquery');
 exports.countKcal = function(request, response){
     var title = '칼로리 계산';
-    var description = '맞춤 권장 칼로리와 섭취 음식 칼로리 중 하나를 선택해 주세요.';
+    var description = '맞춤 권장 칼로리 계산과 섭취 음식 칼로리 계산 중 하나를 선택해 주세요.';
     var url = "./"
     var html = template.html(title,`
     <head>
@@ -65,33 +65,36 @@ exports.countKcal = function(request, response){
 }
 exports.countKcal_body = function(request, response){
     var title = '맞춤 권장 칼로리 계산';
-    var description = '개인의 신체 정보에 맞는 일일 권장 섭취량(kcal)를 알려드립니다!';
+    var description = '개인의 신체 정보와 목표에 맞는 일일 권장 섭취량(kcal)를 알려드립니다!';
     var html = template.html(title,`
+    
     <div style= "font-size:20px;">
         <h2><font color="black">${title}<br><div style= "font-size:20px;"><br>${description}</font></div></h2>
         <form action="/countKcal_body_process" method="post" >
-            성별 :<br />
+            <h3 id="info">
-            <select name="gender">
+                성별 :<br />
-                <option value="man">남자</option>
+                <select name="gender">
-                <option value="woman">여자</option></select
+                    <option value="man">남자</option>
-            ><br />
+                    <option value="woman">여자</option></select
-            나이(세) : <br />
+                ><br />
-            <input type="text" name="age"placeholder="현재 나이를 입력하세요." /><br />
+                나이(세) : <br />
-            키(cm) : <br />
+                <input type="text" name="age"placeholder="현재 나이를 입력하세요." /><br />
-            <input type="text" name="height" placeholder="현재 키(cm)를 입력하세요."/><br />
+                키(cm) : <br />
-            몸무게(kg) : <br /><input type="text" name="weight" placeholder="현재 몸무게를 입력하세요." /><br />
+                <input type="text" name="height" placeholder="현재 키(cm)를 입력하세요."/><br />
-            목표체중(kg) : <br /><input type="text" name="targetWeight" placeholder="목표 체중(kg)을 입력하세요." /><br />
+                몸무게(kg) : <br /><input type="text" name="weight" placeholder="현재 몸무게를 입력하세요." /><br />
-            목표기간(일) : <br /><input type="text" name="targetDay" placeholder="목표 기간을 입력하세요."/><br />
+                목표체중(kg) : <br /><input type="text" name="targetWeight" placeholder="목표 체중(kg)을 입력하세요." /><br />
-            활동량 :<br />
+                목표기간(일) : <br /><input type="text" name="targetDay" placeholder="목표 기간을 입력하세요."/><br />
-            <select name="activity">
+                활동량 :<br />
-                <option value="low">앉아 있거나 가벼운 활동(운동을 거의 또는 전혀하지 않음)</option>
+                <select name="activity">
-                <option value="mid">활동적 또는 보통 활동(건설노동자 또는 매일 1시간씩 달림)</option>
+                    <option value="low">앉아 있거나 가벼운 활동(운동을 거의 또는 전혀하지 않음)</option>
-                <option value="high">많은 활동(농업노동자 또는 매일 2시간동안 수영을 함)</option>
+                    <option value="mid">활동적 또는 보통 활동(건설노동자 또는 매일 1시간씩 달림)</option>
-                </select
+                    <option value="high">많은 활동(농업노동자 또는 매일 2시간동안 수영을 함)</option>
-            ><br /><br>
+                    </select
-            <input type="submit" value="계산하기" style="font-size:20px;" />
+                ><br /><br>
-            </div>
+                <input type="submit" value="계산하기" style="font-size:20px;" />
+                </div>
+            </h3>
             <br><br><br><br>
         </form>` );
     response.writeHead(200);
@@ -104,8 +107,8 @@ exports.countKcal_body_process = function(request, response){
     });
     request.on('end', function(){
         var post = qs.parse(body);
-        var title = '바디 칼로리 계산';
+        var title = '맞춤 권장 칼로리 계산 결과';
-        var description = '성별, 키, 몸무게, 활동량을 입력하시면 표준체중, 현재 체중을 유지하는데 필요한 열량, 다이어트 열량을 알려드립니다!';
+        var description = '개인의 신체 정보와 목표를 바탕으로 계산한 표준체중, 현재 체중을 유지하는데 필요한 열량, 다이어트 열량 입니다.';
         var gender = post.gender; //성별
         var age = post.age; //나이
         var height = post.height; //키
@@ -262,11 +265,13 @@ exports.countKcal_body_process = function(request, response){
 }
 exports.countKcal_food = function(request,response){
     var title = '음식 칼로리 계산';
-    var description = '오늘 먹은 음식의 총 칼로리를 계산해드립니다!';
+    var description = ' - 오늘 먹은 음식의 총 칼로리를 계산해드립니다!';
     var html = template.html(title,`
-    <h2>${title}</h2>
+    <br>
-    <p>${description}</p>
+    <h2>&nbsp;&nbsp;${title}</h2>
+    <p>&nbsp;&nbsp;${description}</p>
     <form action="/countKcal_food_process" method="post">
+        &nbsp;&nbsp;
         <input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "" autocomplete = "off">
         <button type = "submit" name = "click">검색</button>
     </form>
--- a/lib/foodInfo.js
View file @0196fbe
+++ b/lib/foodInfo.js
View file @0196fbe
@@ -2,12 +2,14 @@ var template = require('./template.js');
 var qs = require('querystring');
 var db = require('./db.js');
 exports.foodInfo = function(request, response){
-    var title = '음식 영양정보';
+    var title = '식품 영양정보';
-    var description = '음식을 검색하면 음식의 칼로리, 탄수화물, 단백질, 지방, 나트륨의 정보를 알려드립니다!';
+    var description = '- 입력한 음식의 영양 정보(칼로리, 단백질, 지방, 탄수화물, 나트륨)를 알려드립니다!';
     var html = template.html(title,`
-        <h2>${title}</h2>
+        <br><br>
-        <p>${description}</p>
+        <h2>&nbsp;&nbsp;${title}</h2>
+        <p>&nbsp;&nbsp;&nbsp;&nbsp;${description}</p>
         <form action="/foodInfo_search" method="post">
+            &nbsp;&nbsp;
             <input type = 'text' name = 'search' placeholder = '검색어 입력' maxlength = 255 value = "" autocomplete = "off">
             <button type = "submit" name = "click">검색</button>
         </form>
@@ -66,8 +68,8 @@ exports.foodInfo_search = function(request, response){
     request.on('end', function(){
         var post = qs.parse(body);
         db.query(`SELECT * FROM fooddb`, function (error, foodInfo) {
-            var title = '음식 영양정보';
+            var title = '식품 영양정보';
-            var description = '음식을 검색하면 음식의 칼로리, 탄수화물, 단백질, 지방, 나트륨의 정보를 알려드립니다!';
+            var description = '- 입력한 음식의 영양 정보(칼로리, 단백질, 지방, 탄수화물, 나트륨)를 알려드립니다!';
             var search = post.search; // 검색어
             var num = 0; // 검색된 개수
             var foodName = '';
@@ -81,6 +83,7 @@ exports.foodInfo_search = function(request, response){
                 }
             }
             var html = template.html(title,`
+            <br><br>
                 <h2>${title}</h2>
                 <p>${description}</p>
                 <form action="/foodInfo_search" method="post">
--- a/lib/home.js
View file @0196fbe
+++ b/lib/home.js
View file @0196fbe
 var template = require('./template.js');
 exports.home = function(request, response){
-    var title = 'HealthProtector란?';
+    var title = 'home';
     var description = '개개인의 신체 정보에 따라 일일 권장 섭취량을 알려주고, 좋아하는 음식을 검색하면 영양정보를 알려주는 사이트 입니다.';
     var html = template.html(title,`
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
-      
-    </style>
-    <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
-  
-    <style type="text/css">
-            div{
-                text-align:center;
-                border:0px solid none;
-                margin:0px 0px 0px 0px;
-                
-            }
-            a { text-decoration:none; }
-            a:visited { text-decoration: none; }
-            a:hover { text-decoration: none; }
-            a:focus { text-decoration: none; }
-            a:hover, a:active { text-decoration: none; }
-            }
-            </div>
-    </style>
     <div style= font-size:40px;background-image:url("https://source.unsplash.com/jFCViYFYcus");padding:50px;>
-        <h1 style=font-family: 'Do Hyeon', sans-serif;><a href="/"><font color="white">HealthProtector</font></a></h1>
+        <h1 style="font-family: 'Trade Winds', cursive;"><a href="/"><font color="white">Health Protector</font></a></h1>
     </div>
     <div style= font-size:20px;text-align:left;width: 100%;float:left:>
@@ -37,24 +16,24 @@ exports.home = function(request, response){
         <div style="color : gray";>
         <i class="fas fa-calculator fa-3x"></i>
         </div>
-        <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/countKcal"><font color="black">칼로리 계산</font></a></h2>
+        <h2><a href="/countKcal"><font color="black">칼로리 계산</font></a></h2>
-        <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">나에게 맞는 일일 권장 섭취량(kcal)을 계산해보세요!</font></h4>
+        <h4><font color="gray">나에게 맞는 일일 권장 섭취량(kcal)을 계산해보세요!</font></h4>
-            
     </div>
     <div style= width:33%;float:right;padding:5px;>
         <div style="color : gray";>
           <i class="fas fa-book fa-3x"></i>
         </div>
-        <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/foodInfo"><font color="black">음식별 영양정보</font></a></h2>
+        <h2><a href="/foodInfo"><font color="black">음식별 영양정보</font></a></h2>
-        <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">음식별 식품 영양정보에 대해 알려드립니다!</font></h4>
+        <h4><font color="gray">음식별 식품 영양정보에 대해 알려드립니다!</font></h4>
     </div>
+    
     <div style= width:33%;float:right;padding:5px;>
         <div style="color : gray";>
           <i class="fas fa-location-arrow fa-3x"></i>
         </div>
-        <h2 style=font-family: 'Do Hyeon', sans-serif;><a href="/searchGym"><font color="black">헬스장 찾기</font></a></h2>
+        <h2><a href="/searchGym"><font color="black">헬스장 찾기</font></a></h2>
-        <h4 style=font-family: 'Do Hyeon', sans-serif;><font color="gray">위치를 입력하면 그 주위의 헬스장을 찾아드립니다!</font></h4>
+        <h4><font color="gray">위치를 입력하면 그 주위의 헬스장을 찾아드립니다!</font></h4>
     </div>
     <br><br><br><br><br><br><br><br>
     ` );  
--- a/lib/info.js
View file @0196fbe
+++ b/lib/info.js
View file @0196fbe
 var template = require('./template.js');
 exports.info = function(request, response){
-    var title = 'HealthProtector';
+    var title = 'Health Protector';
     var description = '개개인의 신체 정보에 따라 일일 권장 섭취량을 알려주고,<br> 좋아하는 음식을 검색하면 영양정보를 알려주는 등 <br> 사용자의 건강을 지켜주는 사이트 입니다.';
     var html = template.html(title,`
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
-    </style>
-    <style type="text/css">
-        div{
-            text-align:center;
-            border:0px solid none;
-            margin:0px 0px 0px 0px;
-
-        }
-        #info{
-           font-family: 'Do Hyeon', sans-serif;
-        }
-    </style>
     <br><br><br>
-    <div style= font-size:20px; "font-family: 'Do Hyeon', sans-serif;">
+    <div style= "font-family: 'Trade Winds', cursive;">
         <h1>${title}</h1>
+    </div>
+
+    <div id="info" style= font-size:20px;>
         <hr style= "width : 200px;height:2px;background-color:black">
         <h3>${description}</h3>
     </div>
     <br>
-
     <div id= "info"  >
         <h1>Contact</h1>   
         <hr style= "width : 145px;height:2px;background-color:black">
@@ -34,15 +22,6 @@ exports.info = function(request, response){
         <h2 style="marin:0px;margin-top: 0px;margin-bottom: 0px;">김동진  &emsp;&emsp;&emsp; &emsp;&emsp;&emsp; &nbsp;   양효빈</h2>
         <h3 style= "margin-top: 0px;margin-bottom: 0px;">&nbsp;rlaehdwls310@khu.ac.kr&emsp;&emsp;&emsp;&emsp;qls0786@khu.ac.kr&emsp;</h3>
     </div>
-
-
-
-
-
-
-
-
-
     ` );  
     response.writeHead(200);
--- a/lib/searchGym.js
View file @0196fbe
+++ b/lib/searchGym.js
View file @0196fbe
@@ -2,13 +2,11 @@ var template = require('./template.js');
 var key = require('./appkey.js');
 exports.searchGym = function(request, response){
     var title = '헬스장 찾기';
-    var description = '위치를 입력하면 그 주위의 헬스장을 찾아드립니다!';
+    var description = '원하는 장소를 입력하면 그 주변의 헬스장 위치 정보를 알려드립니다!';
     var html = template.html(title,`
-    <style>
+
-        @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
-    </style>
     <div style= "font-size:25px; background-color:#ffffff">
-        <h2><font color="black">${title}<br><div style= "font-size:20px;font-family: 'Do Hyeon', sans-serif;">${description}</font></div></h2>
+        <h2><font color="black">${title}<br><div style= "font-size:20px;">${description}</font></div></h2>
         </div>
         <style>
         .map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic',dotum,'돋움',sans-serif;font-size:12px;}
--- a/lib/template.js
View file @0196fbe
+++ b/lib/template.js
View file @0196fbe
@@ -4,20 +4,20 @@ module.exports = {
         <!DOCTYPE html>
         <html>
             <head>
-                <title>HelP - ${title}</title>
+                <title>HealthProtector - ${title}</title>
                 <meta charset="utf-8" />
                 <style>
                     @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+                    @import url('https://fonts.googleapis.com/css2?family=Trade+Winds&display=swap');
+                </head>
                 </style>
                 <script
                     src="https://code.jquery.com/jquery-3.5.1.js"
                     integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
                     crossorigin="anonymous"></script>
                 <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
-
             </head>
             <body>
-            
             <style type="text/css">
             div{
                 text-align:center;
@@ -27,26 +27,32 @@ module.exports = {
             }
             a { text-decoration:none } 
             }
-            </div>
+            #help{
+                font-family: 'Trade Winds', cursive;
+            }
+            #info{
+                font-family: 'Do Hyeon', sans-serif;
+            }
+
             </style>
-            <div style="font-family: 'Do Hyeon', sans-serif;">
+            <div style="font-family: 'Trade Winds', cursive;">
-                
+                <h3 id ="helP" style=width:180px;float:left;><a href="/"><font color="#213b19">Health Protector</font></a></h3>
-                <h3 style=width:180px;float:left;><a href="/"><font color="#213b19">HealthProtector</font></a></h3>
+            </div>
-                <h3 style=width:120px;float:left;><a href="/countKcal"><font color="#213b19">칼로리 계산</font></a></h3>
+
+            <div id="info">
+                <h3 style=width:130px;float:left;><a href="/countKcal"><font color="#213b19">칼로리 계산</font></a></h3>
                 <h3 style=width:120px;float:left;><a href="/searchGym"><font color="#213b19">헬스장 찾기</font></a></h3> 
                 <h3 style=width:120px;float:left;><a href="/foodInfo"><font color="#213b19">식품 영양정보</font></a></h3>
-                
                 <div style="color :#213b19";>
                 <h3 style=width:160px;float:right;>
                 <i class="fas fa-info-circle fa-3x"style="font-size: 20px;"></i><a href="/info"><font color="#213b19">&nbsp;Info</font></a></h3>
                 </div>
             </div>
-            
             <hr width = "100%" color ="#213b19" style=margin:0px;>
                 ${body}
             <div style= width:100%;font-size:9px;position:fixed;bottom:0;float:left;padding:0px;background-color:#213b19;>
-                <h5><font color="white" font size = 2px;>Copyright(C) HealThProtector 2020</font></h5>
+                <h5><font color="white" font size = 2px;>Copyright(C) HealthProtector 2020</font></h5>
             </div>
             </body>
         </html>