고다경 / Open_Source_project

Go to a project
Toggle navigation Toggle navigation pinning
김용재
ce7fb93a 1 parent 2c50f599

메인 페이지 수정, 메인페이지랑 회원가입페이지 연동

Inline Side-by-side
Showing 3 changed files with 142 additions and 39 deletions
......@@ -39,22 +39,24 @@
<br><br><br>
<div id = "login-ing" style="width:100%; text-align: center; margin-top: 5ch">
<form action="/starting" method="post">
<div class="form-inline">
<label>ID</label>
<input type="text" name="name" class="form-control" placeholder="홍길동" style="width:200px;">
&nbsp &nbsp&nbsp&nbsp
<label>Password</label>
<input type="password" name="birth" class="form-control" placeholder="*******" style="width:200px;">
<br><br><br>
<input type="submit" value="Login" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
<br><br>
<input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
<div id = "login-ing" style="width:100%; text-align: center; margin-top: 5ch">
<div class="form-inline">
<form action="/login" method="post">
<label>ID</label>
<input type="text" name="name" class="form-control" placeholder="홍길동" style="width:200px;">
&nbsp &nbsp&nbsp&nbsp
<label>Password</label>
<input type="password" name="birth" class="form-control" placeholder="*******" style="width:200px;">
<br><br><br>
<input type="submit" value="Login" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
</form>
<br><br>
<form action="/signup" method="get">
<input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
</form>
</div>
</form>
</div>
</div>
......
module.exports = {
HTML:function(title, list, body){
HTML:function(title,ch,line, list, body,control){
return `
<!DOCTYPE html>
<html lang="en">
......@@ -14,6 +14,14 @@ module.exports = {
</script>
<style >
#banner {
position: absolute;
top: 0;
width: 100%;
margin-top: ${ch};
color: white;
}
#footer {
position: absolute;
......@@ -25,28 +33,25 @@ module.exports = {
}
</style>
${line}
</head>
<body>
<img src = >
${body}
<img src = "images/main_background.jpg" alt="" style="z-index:-1; min-width: 100%; height: 700px;"></img>
<div id="banner">
${body}
<br><br><br>
<div style="width:100%; text-align: center; ">
<form action="/starting" method="post">
<div class="form-inline">
<label>ID</label>
<input type="text" name="name" class="form-control" placeholder="홍길동" style="width:200px;">
&nbsp &nbsp&nbsp&nbsp
<label>Password</label>
<input type="text" name="birth" class="form-control" placeholder="*******" style="width:200px;">
<br><br><br>
<input type="submit" value="Login" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
</div>
</form>
</div>
${control}
</div>
<div id="footer">오픈소스SW Project 2019-1 고다경 김용재 김태희</div>
<div id="footer">오픈소스SW Project 2019-1 고다경 김용재 김태희</div>
</body>
</html>
`;
......
......@@ -6,18 +6,114 @@ var fs = require('fs');
// var sanitizeHtml = require('sanitize-html');
var template = require('./lib/template.js');
app.use(express.static('data'));
app.get('/', function(request, response) {
fs.readdir('./data', function(error, filelist){
var title = 'Health Care';
var description = '오늘은 얼마나 먹었어요?';
var list = template.list(filelist);
var html = template.HTML(title, list,
`<div id="banner" >
<h1 style="font-size: 50px; text-align: center; ">${description}</h1>
</div>`
var ch='15ch'
var html = template.HTML(title,ch,'', list,
`<h1 style="font-size: 50px; text-align: center; ">${description}</h1>`,
`<div id = "login-ing" style="width:100%; text-align: center; margin-top: 5ch">
<div class="form-inline">
<form action="/login" method="post">
<label>ID</label>
<input type="text" name="name" class="form-control" placeholder="홍길동" style="width:200px;">
&nbsp &nbsp&nbsp&nbsp
<label>Password</label>
<input type="password" name="birth" class="form-control" placeholder="*******" style="width:200px;">
<br><br><br>
<input type="submit" value="Login" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
</form>
<br><br>
<form action="/signup" method="get">
<input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
</form>
</div>
</div>`
);
response.send(html);
});
});
app.get('/signup', function(request, response) {
fs.readdir('./data', function(error, filelist){
var title = 'Sign Up Page';
var description = '오늘은 얼마나 먹었어요?';
var list = template.list(filelist);
var ch='5ch'
var html = template.HTML(title,ch,`<link rel="stylesheet" type="text/css" href="./a.css" />`, list,
`<h1 style="width: 100%; text-align: center; font-size: 40px;">${description}</h1>`,
`<div id = "signup-ing" style="width:100%; text-align: center;">
<form action="/starting" method="post">
<div class="form-inline">
<div class="input-area">
<span class="input-label">
<label name="ID">ID</label>
</span>
<span class="input-box">
<input type="text" name="ID" >
</span>
</div>
<div class="input-area">
<span class="input-label">
<label name="Password">Password</label>
</span>
<span class="input-box">
<input type="text" name="Password" >
</span>
</div>
<div class="input-area">
<span class="input-label">
<label name="age">나이(세)</label>
</span>
<span class="input-box">
<input type="text" name="age" >
</span>
</div>
<div class="input-area">
<span class="input-label">
<label name="male/female">성별</label>
</span>
<select id="male/female" style="width: 200px; ">
<option>성별 선택</option>
<option>남자</option>
<option>여자</option>
</select>
</div>
<div class="input-area">
<span class="input-label">
<label name="height">키(cm)</label>
</span>
<span class="input-box">
<input type="text" name="height" >
</span>
</div>
<div class="input-area">
<span class="input-label">
<label name="weight">체중(kg)</label>
</span>
<span class="input-box">
<input type="text" name="weight" >
</span>
</div>
<br><br><br>
<input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
</div>
</form>
</div>`
);
response.send(html);
});
......