양효빈 / HealthProtector

Go to a project
Toggle navigation Toggle navigation pinning
양효빈
c352e880 1 parent 1876945c

hyob css1

Inline Side-by-side
Showing 9 changed files with 132 additions and 43 deletions
<!DOCTYPE html>
<html>
<head>
<title>HealthProtectorHome</title>
<meta charset="utf-8" />
</head>
<body>
<h1><a href="home.html">HealthProtector</a></h1>
<ol>
<li><a href="1.html">칼로리 계산</a></li>
<li><a href="2.html">음식별 영양정보</a></li>
</ol>
<h2>칼로리 계산</h2>
<form action="./3.html">
성별 :<br />
<select name="sex">
<option value="man">남자</option>
<option value="woman">여자</option></select
><br />
키(cm) : <br />
<input type="text" name="height" /><br />
몸무게(kg) : <br /><input type="text" name="weight" /><br />
활동량 :<br />
<select name="activity">
<option value="low">가벼운 활동(주로 앉아서 생활)</option>
<option value="mid">중등 활동(주로 서서 일하거나 생활)</option>
<option value="high">많은 활동(건설, 농업 등 노동이 많은 일)</option>
<option value="veryHigh">매우 많은 활동(운동선수)</option></select
><br />
<input type="submit" value="계산하기" />
</form>
</body>
</html>
dddd
\ No newline at end of file
No preview for this file type
module.exports = {
html:function(title, body){
return `
<!DOCTYPE html>
<html>
<head>
<title>HelP - ${title}</title>
<meta charset="utf-8" />
</head>
<body>
<h1><a href="/">HealthProtector</a></h1>
<ol>
<li><a href="/countKcal">칼로리 계산</a></li>
<li><a href="2.html">음식별 영양정보</a></li>
</ol>
<style>
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR&display=swap');
</style>
<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:40px 0px 0px 0px;
padding:20px;
}
a { text-decoration:none }
}
</style>
<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:47%;"font-family:'Jua',sans-serif";float:left;font-size:20px;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>
<div style= width:47%;float:right;font-size:20px;padding:0px;>
<h2 style="font-family: 'Jua', sans-serif;"><a href="2.html"><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="2.html"><font color="white">Copyright HealThProtector 2020</a></h4>
</div>
</body>
</html>
......
var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
var template = require('./lib/template.js');
/*
const style={
backgrondColor = 'blue',
border:'1px solid border'
}*/
const { count } = require('console');
var app = http.createServer(function(request,response){
var _url = request.url;
var queryData = url.parse(_url, true).query;
......@@ -12,8 +22,13 @@ var app = http.createServer(function(request,response){
var title = '소개';
var description = '개개인의 신체 정보에 따라 일일 권장 섭취량을 알려주고, 좋아하는 음식을 검색하면 영양정보를 알려주는 사이트 입니다.';
var html = template.html(title,`
<h2>${title}</h2>
<p>${description}</p>` );
<br><br><br><br>
<style>
@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>` );
response.writeHead(200);
response.end(html);
}
......
{
"name": "healthprotector",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
},
"react": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
"integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
},
"react-dom": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
"integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"scheduler": "^0.20.1"
}
},
"scheduler": {
"version": "0.20.1",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz",
"integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
}
}
}
{
"name": "healthprotector",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
"license": "ISC",
"directories": {
"lib": "lib"
},
"repository": {
"type": "git",
"url": "http://khuhub.khu.ac.kr/2019102154/HealthProtector.git"
},
"description": "",
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
......
@font-face{
src:url("fonts/BMJUA_ttf.ttf");
font-family: "jua";
}
h2{
font-family: "jua";
}
\ No newline at end of file