구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
조국현
33214f27 1 parent dfa5d0da

Update front-end design of sign-up

Inline Side-by-side
Showing 1 changed file with 81 additions and 13 deletions
...@@ -88,19 +88,87 @@ passport.authenticate('local', { ...@@ -88,19 +88,87 @@ passport.authenticate('local', {
88 88
89 //회원가입 페이지 Get 89 //회원가입 페이지 Get
90 app.get('/join',(req,res)=>{ 90 app.get('/join',(req,res)=>{
91 - let page = getPage('회원가입',` 91 + let page = getPage('회원가입',`
92 - <script> function congratulation() 92 + <html>
93 - { 93 + <head>
94 - alert("새로운 회원이 되신걸 축하합니다!:D \n 레시피 찾을 준비 되셨나요?"); 94 + <style>
95 - } </script> 95 + body {
96 - <form action="/join" method="post"> 96 + padding-top: 15px;
97 - <input type="email" name="email" placeholder="email"><br> 97 + font-size: 12px
98 - <input type="password" name="password" placeholder="****"><br> 98 + }
99 - <input type="name" name="name" placeholder="이름"><br> 99 + .main {
100 - <input type="submit" value="회원가입" onClick="javascript:congratulation()"><br> 100 + max-width: 320px;
101 - </form> 101 + margin-top:300px auto;
102 - `,'<a href="/login">뒤로가기</a>'); 102 + margin: 0 auto;
103 - res.send(page); 103 + }
104 + .login-or {
105 + position: relative;
106 + font-size: 18px;
107 + color: rgb(7, 7, 7);
108 + margin-top: 10px;
109 + margin-bottom: 10px;
110 + padding-top: 10px;
111 + padding-bottom: 10px;
112 + }
113 + .span-or {
114 + display: block;
115 + position: absolute;
116 + left: 50%;
117 + top: -2px;
118 + margin-left: -25px;
119 + background-color: #fff;
120 + width: 50px;
121 + text-align: center;
122 + }
123 + .hr-or {
124 + background-color: #cdcdcd;
125 + height: 1px;
126 + margin-top: 0px !important;
127 + margin-bottom: 0px !important;
128 + }
129 + h3 {
130 + text-align: center;
131 + line-height: 300%;
132 + margin-top:10px auto;
133 + }
134 + img{
135 + width:320px;
136 + height:150px;
137 + object-fit:cover;
138 + margin-bottom:30px;
139 + }
140 + </style><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
141 +<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
142 +<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
143 + <script> function congratulation()
144 + {
145 + alert("새로운 회원이 되신걸 축하합니다!:D \n 레시피 찾을 준비 되셨나요?");
146 + } </script>
147 +</head>
148 +
149 + <body>
150 + <div class="container">
151 + <div class="row">
152 + <div class="main">
153 + <img src="https://images.unsplash.com/photo-1600577916048-804c9191e36c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80" alt=""/>
154 + <h3>Sign-Up</h3>
155 + <form action="/join" method="post">
156 + <div class="form-group">
157 + <input type="email" class="form-control" name="email" placeholder="email"><br>
158 + </div>
159 + <div class="form-group">
160 + <input type="password" name="password" class="form-control" placeholder="****"><br>
161 + </div>
162 + <div class="form-group">
163 + <input type="name" name="name" class="form-control" placeholder="이름"><br>
164 + </div>
165 + <button type="submit" value="회원가입" class="btn btn btn-primary" onClick="javascript:congratulation()">
166 + 회원가입
167 + </button>
168 + </form>
169 + </html>
170 + `,'<a href="/login">뒤로가기</a>');
171 + res.send(page);
104 }); 172 });
105 173
106 //회원가입 처리 Post : 예제를 위해 간단 저장 방식으로 구현 174 //회원가입 처리 Post : 예제를 위해 간단 저장 방식으로 구현
......