김동진 / HealthProtector

Go to a project
Toggle navigation Toggle navigation pinning
양효빈
f39a84c4 1 parent d25d6386

CSS 홈 화면 안정화 및 아이콘 추가

Inline Side-by-side
Showing 4 changed files with 117 additions and 40 deletions
var template = require('./template.js');
exports.home = function(request, response){
......@@ -5,11 +6,74 @@ exports.home = function(request, response){
var description = '개개인의 신체 정보에 따라 일일 권장 섭취량을 알려주고, 좋아하는 음식을 검색하면 영양정보를 알려주는 사이트 입니다.';
var html = template.html(title,`
<br><br><br><br>
<style>
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap');
</style>
<h2 style="font-family: 'Jua', sans-serif;"><font color="red"><text align:center>${title}</font></h2>
<p style="font-family: 'Jua', sans-serif;">${description}</p>` );
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<style type="text/css">
div{
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap');
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/random/1920x1080');padding:50px;>
<h1 style="font-family: 'Jua', sans-serif;"><a href="/"><font color="white ">HealthProtector</font></a></h1>
</div>
<br>
<div style= width:31%;float:left;padding:5px;>
<div style="color : gray";>
<i class="fas fa-calculator fa-3x"></i>
</div>
<h2 style="font-family: 'Jua', sans-serif;"><a href="/countKcal"><font color="black">칼로리 계산</a></h2>
<h4 style="font-family: 'Jua', sans-serif;"><font color="gray">나에게 맞는 일일 권장 섭취량(kcal)을 계산해보세요!</h4>
</div>
<div style= width:36%;float:right;padding:0px;>
<div style="color : gray";>
<i class="fas fa-book fa-3x"></i>
</div>
<h2 style="font-family: 'Jua', sans-serif;"><a href="/foodInfo"><font color="black">음식별 영양정보</a></h2>
<h4 style="font-family: 'Jua', sans-serif;"><font color="gray">음식별 식품 영양정보에 대해 알려드립니다!</h4>
</div>
<div style= width:31%;float:right;padding:0px;>
<div style="color : gray";>
<i class="fas fa-location-arrow fa-3x"></i>
</div>
<h2 style="font-family: 'Jua', sans-serif;"><a href="/searchGym"><font color="black">헬스장 찾기</a></h2>
<h4 style="font-family: 'Jua', sans-serif;"><font color="gray">위치를 입력하면 그 주위의 헬스장을 찾아드립니다!</h4>
</div>
<br><br><br><br><br><br><br><br>
<h2 style="font-family: 'Jua', sans-serif;"><font color="black"><text align:center>${title}</font></h2>
<p style="font-family: 'Jua', sans-serif;">${description}</p>
` );
response.writeHead(200);
response.end(html);
......
<!DOCTYPE html>
<html>
<head>
<title>HelP - ${title}</title>
<meta charset="utf-8" />
</head>
<body>
<style type="text/css">
div{
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap');
text-align:center;
border:1px solid none;
margin:0px 0px 0px 0px;
padding:0px;
;
}
a { text-decoration:none }
}
</div>
</style>
<div style="font-family:'Jua',sans-serif";>
<h3 style=width:180px;float:left;><a href="/"><font color="black">HealthProtector</font></a></h3>
<h3 style=width:120px;float:left;><a href="/countKcal"><font color="black">칼로리 계산</a></h3>
<h3 style=width:120px;float:left;><a href="/foodInfo"><font color="black">식품 영양정보</a></h3>
<h3 style=width:150px;float:right;><a href="/"><font color="black";text-align="right">만든 사람</a></h3>
</div>
<br><br><br><br>
${body}
<div style= width:100%;font-size:7px;position:fixed;bottom:0;float:left;padding:0px;background-color:#0B610B;>
<h6><font color="white">Copyright(C) HealThProtector 2020</h6>
</div>
</body>
</html>
\ No newline at end of file
......@@ -5,66 +5,42 @@ module.exports = {
<!DOCTYPE html>
<html>
<head>
<title>HelP - ${title}</title>
<meta charset="utf-8" />
</head>
<body>
<style type="text/css">
div{
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap');
text-align:center;
border:1px solid none;
margin:0px 0px 0px 0px;
padding:0px;
padding:0px;
}
a { text-decoration:none }
}
</div>
</style>
<div style="font-family:'Jua',sans-serif";>
<h3 style=width:180px;float:left;><a href="/"><font color="black">HealthProtector</font></a></h3>
<h3 style=width:120px;float:left;><a href="/countKcal"><font color="black">칼로리 계산</a></h3>
<h3 style=width:120px;float:left;><a href="/foodInfo"><font color="black">식품 영양정보</a></h3>
<h3 style=width:150px;float:right;><a href="/"><font color="black">만든 사람</a></h3>
</div>
<br><br><br><br>
<div style=font-size:30px;"font-family:'Jua',sans-serif";background-image:url('https://source.unsplash.com/random/1920x1080');>
<h1 style="font-family: 'Jua', sans-serif;"><a href="/"><font color="white">HealthProtector</font></a></h1>
</div>
<br>
<div style= width:31%;"font-family:'Jua',sans-serif";float:left;padding:5px;>
<h2 style="font-family: 'Jua', sans-serif;"><a href="/countKcal"><font color="black">칼로리 계산</a></h2>
<h4 style="font-family: 'Jua', sans-serif;"><font color="gray">나에게 맞는 일일 권장 섭취량(kcal)을 계산해보세요!</h4>
<div style="font-family:'Jua',sans-serif";>
<h3 style=width:180px;float:left;><a href="/"><font color="black">HealthProtector</font></a></h3>
<h3 style=width:120px;float:left;><a href="/countKcal"><font color="black">칼로리 계산</font></a></h3>
<h3 style=width:120px;float:left;><a href="/foodInfo"><font color="black">식품 영양정보</font></a></h3>
<h3 style=width:150px;float:right;><a href="/"><font color="black";text-align="right">만든 사람</font></a></h3>
</div>
<div style= width:36%;float:right;padding:0px;>
<h2 style="font-family: 'Jua', sans-serif;"><a href="/foodInfo"><font color="black">음식별 영양정보</a></h2>
<h4 style="font-family: 'Jua', sans-serif;"><font color="gray">음식별 식품 영양정보에 대해 알려드립니다!</h4>
</div>
<div style= width:31%;float:right;padding:0px;>
<h2 style="font-family: 'Jua', sans-serif;"><a href="/searchGym"><font color="black">헬스장 찾기</a></h2>
<h4 style="font-family: 'Jua', sans-serif;"><font color="gray">원하는 위치에 있는 헬스장을 알려드립니다.</h4>
</div>
<br><br><br><br><br>
${body}
<div style= width:100%;font-size:10px;position:fixed;bottom:0;float:left;padding:0px;background-color:#0B610B;>
<h4><a href="/foodInfo"><font color="white">Copyright HealThProtector 2020</a></h4>
<div style= width:100%;font-size:7px;position:fixed;bottom:0;float:left;padding:0px;background-color:#0B610B;>
<h6><font color="white">Copyright(C) HealThProtector 2020</h6>
</div>
</body>
</html>
`
},
foodTable : function(foodInfo, list, num){
var tag = '';
tag += `<table`;
......