고다경 / 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 125 additions and 22 deletions
...@@ -40,8 +40,8 @@ ...@@ -40,8 +40,8 @@
40 <br><br><br> 40 <br><br><br>
41 41
42 <div id = "login-ing" style="width:100%; text-align: center; margin-top: 5ch"> 42 <div id = "login-ing" style="width:100%; text-align: center; margin-top: 5ch">
43 - <form action="/starting" method="post">
44 <div class="form-inline"> 43 <div class="form-inline">
44 + <form action="/login" method="post">
45 <label>ID</label> 45 <label>ID</label>
46 <input type="text" name="name" class="form-control" placeholder="홍길동" style="width:200px;"> 46 <input type="text" name="name" class="form-control" placeholder="홍길동" style="width:200px;">
47 &nbsp &nbsp&nbsp&nbsp 47 &nbsp &nbsp&nbsp&nbsp
...@@ -49,16 +49,18 @@ ...@@ -49,16 +49,18 @@
49 <label>Password</label> 49 <label>Password</label>
50 <input type="password" name="birth" class="form-control" placeholder="*******" style="width:200px;"> 50 <input type="password" name="birth" class="form-control" placeholder="*******" style="width:200px;">
51 <br><br><br> 51 <br><br><br>
52 -
53 <input type="submit" value="Login" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;"> 52 <input type="submit" value="Login" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
53 + </form>
54 <br><br> 54 <br><br>
55 + <form action="/signup" method="get">
55 <input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;"> 56 <input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
56 - </div>
57 </form> 57 </form>
58 </div> 58 </div>
59 59
60 </div> 60 </div>
61 61
62 + </div>
63 +
62 <div id="footer">오픈소스SW Project 2019-1 고다경 김용재 김태희</div> 64 <div id="footer">오픈소스SW Project 2019-1 고다경 김용재 김태희</div>
63 </body> 65 </body>
64 </html> 66 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 module.exports = { 1 module.exports = {
2 - HTML:function(title, list, body){ 2 + HTML:function(title,ch,line, list, body,control){
3 return ` 3 return `
4 <!DOCTYPE html> 4 <!DOCTYPE html>
5 <html lang="en"> 5 <html lang="en">
...@@ -15,6 +15,14 @@ module.exports = { ...@@ -15,6 +15,14 @@ module.exports = {
15 </script> 15 </script>
16 <style > 16 <style >
17 17
18 + #banner {
19 + position: absolute;
20 + top: 0;
21 + width: 100%;
22 + margin-top: ${ch};
23 + color: white;
24 + }
25 +
18 #footer { 26 #footer {
19 position: absolute; 27 position: absolute;
20 bottom: 0; 28 bottom: 0;
...@@ -25,27 +33,24 @@ module.exports = { ...@@ -25,27 +33,24 @@ module.exports = {
25 } 33 }
26 34
27 </style> 35 </style>
36 + ${line}
28 </head> 37 </head>
29 <body> 38 <body>
30 - <img src = > 39 + <img src = "images/main_background.jpg" alt="" style="z-index:-1; min-width: 100%; height: 700px;"></img>
40 + <div id="banner">
31 ${body} 41 ${body}
32 - <br><br><br>
33 42
34 - <div style="width:100%; text-align: center; "> 43 +
35 - <form action="/starting" method="post">
36 - <div class="form-inline">
37 - <label>ID</label>
38 - <input type="text" name="name" class="form-control" placeholder="홍길동" style="width:200px;">
39 - &nbsp &nbsp&nbsp&nbsp
40 - <label>Password</label>
41 - <input type="text" name="birth" class="form-control" placeholder="*******" style="width:200px;">
42 <br><br><br> 44 <br><br><br>
43 - <input type="submit" value="Login" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
44 - </div>
45 - </form>
46 - </div>
47 45
48 46
47 +
48 + ${control}
49 +
50 +
51 +
52 + </div>
53 +
49 <div id="footer">오픈소스SW Project 2019-1 고다경 김용재 김태희</div> 54 <div id="footer">오픈소스SW Project 2019-1 고다경 김용재 김태희</div>
50 </body> 55 </body>
51 </html> 56 </html>
......
...@@ -6,18 +6,114 @@ var fs = require('fs'); ...@@ -6,18 +6,114 @@ var fs = require('fs');
6 // var sanitizeHtml = require('sanitize-html'); 6 // var sanitizeHtml = require('sanitize-html');
7 var template = require('./lib/template.js'); 7 var template = require('./lib/template.js');
8 8
9 +app.use(express.static('data'));
9 app.get('/', function(request, response) { 10 app.get('/', function(request, response) {
10 fs.readdir('./data', function(error, filelist){ 11 fs.readdir('./data', function(error, filelist){
11 var title = 'Health Care'; 12 var title = 'Health Care';
12 var description = '오늘은 얼마나 먹었어요?'; 13 var description = '오늘은 얼마나 먹었어요?';
13 var list = template.list(filelist); 14 var list = template.list(filelist);
14 - var html = template.HTML(title, list, 15 + var ch='15ch'
15 - `<div id="banner" > 16 + var html = template.HTML(title,ch,'', list,
17 + `<h1 style="font-size: 50px; text-align: center; ">${description}</h1>`,
18 + `<div id = "login-ing" style="width:100%; text-align: center; margin-top: 5ch">
19 + <div class="form-inline">
20 + <form action="/login" method="post">
21 + <label>ID</label>
22 + <input type="text" name="name" class="form-control" placeholder="홍길동" style="width:200px;">
23 + &nbsp &nbsp&nbsp&nbsp
16 24
17 - <h1 style="font-size: 50px; text-align: center; ">${description}</h1> 25 + <label>Password</label>
26 + <input type="password" name="birth" class="form-control" placeholder="*******" style="width:200px;">
27 + <br><br><br>
28 + <input type="submit" value="Login" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
29 + </form>
30 + <br><br>
31 + <form action="/signup" method="get">
32 + <input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
33 + </form>
34 + </div>
18 35
36 +</div>`
37 + );
38 + response.send(html);
39 + });
40 + });
41 +
42 + app.get('/signup', function(request, response) {
43 + fs.readdir('./data', function(error, filelist){
44 + var title = 'Sign Up Page';
45 + var description = '오늘은 얼마나 먹었어요?';
46 + var list = template.list(filelist);
47 + var ch='5ch'
48 + var html = template.HTML(title,ch,`<link rel="stylesheet" type="text/css" href="./a.css" />`, list,
49 + `<h1 style="width: 100%; text-align: center; font-size: 40px;">${description}</h1>`,
50 +`<div id = "signup-ing" style="width:100%; text-align: center;">
51 +<form action="/starting" method="post">
52 + <div class="form-inline">
53 + <div class="input-area">
54 + <span class="input-label">
55 + <label name="ID">ID</label>
56 + </span>
57 + <span class="input-box">
58 + <input type="text" name="ID" >
59 + </span>
60 + </div>
61 +
62 + <div class="input-area">
63 + <span class="input-label">
64 + <label name="Password">Password</label>
65 + </span>
66 + <span class="input-box">
67 + <input type="text" name="Password" >
68 + </span>
69 + </div>
70 +
71 + <div class="input-area">
72 + <span class="input-label">
73 + <label name="age">나이(세)</label>
74 + </span>
75 + <span class="input-box">
76 + <input type="text" name="age" >
77 + </span>
78 + </div>
79 +
80 + <div class="input-area">
81 + <span class="input-label">
82 + <label name="male/female">성별</label>
83 + </span>
84 + <select id="male/female" style="width: 200px; ">
85 + <option>성별 선택</option>
86 + <option>남자</option>
87 + <option>여자</option>
88 +
89 + </select>
90 + </div>
91 +
92 + <div class="input-area">
93 + <span class="input-label">
94 + <label name="height">키(cm)</label>
95 + </span>
96 + <span class="input-box">
97 + <input type="text" name="height" >
98 + </span>
99 +
100 + </div>
101 +
102 + <div class="input-area">
103 + <span class="input-label">
104 + <label name="weight">체중(kg)</label>
105 + </span>
106 + <span class="input-box">
107 + <input type="text" name="weight" >
108 + </span>
109 + </div>
110 +
111 + <br><br><br>
19 112
20 - </div>` 113 + <input type="submit" value="Sign Up" class="btn btn-default" style=" width:100px;font-weight: bold; font-size: 18px; background-color: white;">
114 + </div>
115 +</form>
116 +</div>`
21 ); 117 );
22 response.send(html); 118 response.send(html);
23 }); 119 });
......