정지윤

결제 모듈 추가

...@@ -9,21 +9,16 @@ var bodyParser = require('body-parser'); ...@@ -9,21 +9,16 @@ var bodyParser = require('body-parser');
9 var router = express.Router(); 9 var router = express.Router();
10 10
11 // configuration =============================================================== 11 // configuration ===============================================================
12 -
13 -
14 -router.get('/reservation',function(req,res){
15 - res.render('reservation',{title : "첫번째 화면~"});
16 -})
17 router.get('/first',function(req,res){ 12 router.get('/first',function(req,res){
18 - res.render('first',{title : "첫번째 화면~"}); 13 + res.render('first',{title : "첫번째 화면"});
19 }) 14 })
20 15
21 router.get('/', function(req, res){ 16 router.get('/', function(req, res){
22 res.render('index',{title: "첫화면"}); 17 res.render('index',{title: "첫화면"});
23 }); 18 });
24 19
25 -router.get('/list', function(req, res){ 20 +router.get('/reservation',function(req,res){
26 - res.render('list',{title :"게시판"}); 21 + res.render('reservation',{title : "예약"});
27 }); 22 });
28 23
29 24
...@@ -54,49 +49,33 @@ router.post('/reservation',function(req, res){ ...@@ -54,49 +49,33 @@ router.post('/reservation',function(req, res){
54 49
55 router.get('/resconfirm', function(req, res){ 50 router.get('/resconfirm', function(req, res){
56 res.render('resconfirm',{title : "예약확인"}); 51 res.render('resconfirm',{title : "예약확인"});
57 -}) 52 +});
58 53
59 54
55 +router.get('/menu',function(req,res){
56 + res.render('menu',{title : "메뉴판"});
57 +});
60 58
61 -router.get('/write2',function(req,res){ 59 +router.get('/db', function(req, res){
62 - res.render('write',{title : "게시판"});
63 - res.redirect('/');
64 - connection.release();
65 -})
66 -router.post('/write2',function(req, res){
67 - var creater_id = req.body.creater_id;
68 - var title = req.body.title;
69 - var content = req.body.content;
70 pool.getConnection(function (err, connection) 60 pool.getConnection(function (err, connection)
71 { 61 {
72 // Use the connection 62 // Use the connection
73 - var sqlForInsertBoard = "insert into db2(creater_id, title, content) values('"+creater_id+"', '"+title+"', '"+content+"')"; 63 + //var sqlForInsertBoard = "insert into menu(creater_id, phone, email, num, restime, resmin,date,food,content) values('"+creater_id+"', '"+phone+"', '"+email+"','"+num+"','"+restime+"','"+resmin+"','"+date+"','"+food+"','"+content+"')";
74 - connection.query(sqlForInsertBoard, function (err, rows) { 64 + var sqlForSelect = 'SELECT * from menu'
65 + connection.query(sqlForSelect, function (err, rows) {
75 if (err) console.error("err : " + err); 66 if (err) console.error("err : " + err);
76 console.log("rows : " + JSON.stringify(rows)); 67 console.log("rows : " + JSON.stringify(rows));
77 - res.redirect('/'); 68 + res.render('first');
78 connection.release(); 69 connection.release();
79 // Don't use the connection here, it has been returned to the pool. 70 // Don't use the connection here, it has been returned to the pool.
80 }); 71 });
81 }); 72 });
82 -})
83 -
84 -router.get('/persons', function(req, res){
85 - connection.query('SELECT * from Persons', function(err, rows) {
86 - if(err) throw err;
87 -
88 - console.log('The solution is: ', rows);
89 - res.send(rows);
90 - });
91 }); 73 });
92 74
93 -router.get('/page',function(req, res){
94 - connection.query('SELECT * from db2', function(err, rows) {
95 - if(err) throw err;
96 75
97 - console.log('The solution is: ', rows); 76 +/* GET home page. */
98 - res.send(rows); 77 +router.get('/pay', function(req, res, next) {
99 - }); 78 + res.render('pay', { title: '결제' });
100 }); 79 });
101 80
102 module.exports = router; 81 module.exports = router;
......
...@@ -13,7 +13,7 @@ var smtpTransport = nodemailer.createTransport({ ...@@ -13,7 +13,7 @@ var smtpTransport = nodemailer.createTransport({
13 13
14 var mailOptions = { 14 var mailOptions = {
15 from: '정지윤 <violet3073@gmail.com>', 15 from: '정지윤 <violet3073@gmail.com>',
16 - to: 'djkaiden@naver.com', 16 + to: 'jju0807@naver.com',
17 subject: '예약 게시판 확인해주세요!', 17 subject: '예약 게시판 확인해주세요!',
18 text: '예약이 도착했습니다' 18 text: '예약이 도착했습니다'
19 }; 19 };
......
...@@ -38,6 +38,11 @@ ...@@ -38,6 +38,11 @@
38 <li class="nav-item"> 38 <li class="nav-item">
39 <a class="nav-link js-scroll-trigger" href="#about">About</a> 39 <a class="nav-link js-scroll-trigger" href="#about">About</a>
40 </li> 40 </li>
41 +
42 + <li class="nav-item">
43 + <a class="nav-link js-scroll-trigger" href="#menu">Menu</a>
44 + </li>
45 +
41 <li class="nav-item"> 46 <li class="nav-item">
42 <a class="nav-link js-scroll-trigger" href="#download">Reservation</a> 47 <a class="nav-link js-scroll-trigger" href="#download">Reservation</a>
43 </li> 48 </li>
...@@ -75,23 +80,40 @@ ...@@ -75,23 +80,40 @@
75 <div class="container"> 80 <div class="container">
76 <div class="row"> 81 <div class="row">
77 <div class="col-lg-8 mx-auto"> 82 <div class="col-lg-8 mx-auto">
78 - <h2>About GROTTO</h2> 83 + <h2>About 별빛바다 달빛초원</h2>
79 <p> 84 <p>
80 - <a href="http://startbootstrap.com/template-overviews/grayscale/">Grotto - Let your senses fly</a>. 85 + <a href="http://startbootstrap.com/template-overviews/grayscale/">01</a>.
81 - <br>당신의 오감을 날려드립니다.</p> 86 + <br>건강한 식재료와 제철 음식을 지향합니다.</p>
82 87
83 <p> 88 <p>
84 - <a href="http://gratisography.com/">Coffee - Kona coffee</a> 89 + <a href="http://gratisography.com/">02</a>
85 - <br>세계 3대 커피 하와이안 코나 원두를 사용합니다.</p> 90 + <br>활어회/신선한 초밥/해산물 잔뜩 요리전문점</p>
86 <p> 91 <p>
87 - <a href="http://snazzymaps.com/">Wine - Wine expert</a>. 92 + <a href="http://snazzymaps.com/">03</a>.
88 - <br>150가지 종류의 와인을 와인을 닮은 공간에서 편하게 즐기세요.</p> 93 + <br>수원에서 가장 깔끔하고 싱싱한 횟집</p>
89 </div> 94 </div>
90 </div> 95 </div>
91 </div> 96 </div>
92 </section> 97 </section>
93 98
94 99
100 +
101 +
102 + <!-- Menu Section -->
103 + <section id="menu" class=" content-section text-center">
104 + <div class="container">
105 + <div class="row">
106 + <div class="col-lg-8 mx-auto">
107 + <h2>Menu</h2>
108 + <p>별빛바다 달빛초원은 항상 싱싱한 생선만 손질합니다.</p>
109 + <a href="/menu" class="btn btn-default btn-lg">메뉴 보러가기</a>
110 + </div>
111 + </div>
112 + </div>
113 + </section>
114 +
115 +
116 +
95 <!-- Download Section --> 117 <!-- Download Section -->
96 <section id="download" class="download-section content-section text-center"> 118 <section id="download" class="download-section content-section text-center">
97 <div class="container"> 119 <div class="container">
...@@ -108,7 +130,7 @@ ...@@ -108,7 +130,7 @@
108 <div class="container"> 130 <div class="container">
109 <div class="row"> 131 <div class="row">
110 <div class="col-lg-8 mx-auto"> 132 <div class="col-lg-8 mx-auto">
111 - <h2>Contact GROTTO</h2> 133 + <h2>Contact 별빛바다 달빛초원</h2>
112 <p>전화번호 : 031-205-7220</p> 134 <p>전화번호 : 031-205-7220</p>
113 <p>영업시간 : 매일 10:00 - 23:30 (Last Order 22:00)</p> 135 <p>영업시간 : 매일 10:00 - 23:30 (Last Order 22:00)</p>
114 <ul class="list-inline banner-social-buttons"> 136 <ul class="list-inline banner-social-buttons">
...@@ -118,12 +140,13 @@ ...@@ -118,12 +140,13 @@
118 <span class="network-name">facebook</span> 140 <span class="network-name">facebook</span>
119 </a> 141 </a>
120 </li> 142 </li>
121 - <li class="list-inline-item"> 143 + <!--<li class="list-inline-item">
122 <a href="https://www.instagram.com/grotto_since2011/" class="btn btn-default btn-lg"> 144 <a href="https://www.instagram.com/grotto_since2011/" class="btn btn-default btn-lg">
123 <i class="fa fa-instagram fa-fw"></i> 145 <i class="fa fa-instagram fa-fw"></i>
124 <span class="network-name">Instagram</span> 146 <span class="network-name">Instagram</span>
125 </a> 147 </a>
126 </li> 148 </li>
149 + -->
127 </ul> 150 </ul>
128 </div> 151 </div>
129 </div> 152 </div>
...@@ -153,7 +176,7 @@ ...@@ -153,7 +176,7 @@
153 } 176 }
154 </style> 177 </style>
155 <body> 178 <body>
156 - <p>경기도 수원시 영통구 영통동 1030-2</p> 179 + <p>경기도 수원시 영통구 영통동 1025-1(경기도 수원시 영통구 청명로 28) 1층 별빛바다 달빛초원</p>
157 <section id="contact" class="content-section text-center"> 180 <section id="contact" class="content-section text-center">
158 <div class="container"> 181 <div class="container">
159 <div class="row"> 182 <div class="row">
...@@ -185,7 +208,7 @@ ...@@ -185,7 +208,7 @@
185 <script> 208 <script>
186 function initMap() { 209 function initMap() {
187 var cnt = 1; //마커 카운트 해서 우선 2개만 제한 210 var cnt = 1; //마커 카운트 해서 우선 2개만 제한
188 - var initLatLng = {lat: 37.251797, lng: 127.076747}; 211 + var initLatLng = {lat: 37.2497462, lng: 127.0785575};
189 var geocoder = new google.maps.Geocoder; 212 var geocoder = new google.maps.Geocoder;
190 var map = new google.maps.Map(document.getElementById('map'), { 213 var map = new google.maps.Map(document.getElementById('map'), {
191 center: initLatLng, 214 center: initLatLng,
......
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +
4 + <head>
5 + <meta charset="utf-8">
6 +
7 + <!-- Bootstrap core CSS -->
8 + <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
9 +
10 + <!-- Custom fonts for this template -->
11 + <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
12 + <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
13 + <link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
14 +
15 + <!-- Custom styles for this template -->
16 + <link href="css/grayscale.min.css" rel="stylesheet">
17 +
18 + <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
19 + <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
20 +
21 + <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
22 + <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
23 + <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
24 + <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
25 +
26 + <title>식당 예약</title>
27 +
28 + <style type="text/css">
29 + .reservationTheme{
30 + background:url('/img/res2.jpg') no-repeat;
31 + }
32 + </style>
33 +
34 + <section id="about" class="reservationTheme content-section ">
35 + <div class="container">
36 + <br><br>
37 + <h2>Reservation</h2>
38 + <br><br>
39 + <form class="well form-horizontal" action=" " method="post" id="contact_form">
40 + <fieldset>
41 +
42 + <form method="POST" action="/reservation">
43 + <!-- Form Name -->
44 +
45 + <!-- Text input-->
46 +
47 + <div class="form-group">
48 + <div class="col-md-4 inputGroupContainer ">
49 + <div class="input-group">
50 + <label class="col-md-4 control-label ">이름</label>
51 + <i class="glyphicon glyphicon-envelope"></i>
52 + <input name="creater_id" placeholder="홍길동" class="form-control" type="text">
53 + </div>
54 + </div>
55 + </div>
56 +
57 +
58 + <!-- 휴대전화-->
59 + <div class="form-group">
60 + <div class="col-md-4 inputGroupContainer">
61 + <div class="input-group">
62 + <label class="col-md-4 control-label">휴대전화</label>
63 + <i class="glyphicon glyphicon-earphone"></i>
64 + <input name="phone" placeholder="0101234567" class="form-control" type="text">
65 + </div>
66 + </div>
67 + </div>
68 +
69 +
70 +
71 + <!-- Text input-->
72 + <div class="form-group">
73 + <div class="col-md-4 inputGroupContainer">
74 + <div class="input-group">
75 + <label class="col-md-4 control-label">이메일주소</label>
76 +
77 + <i class="glyphicon glyphicon-envelope"></i>
78 + <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
79 + </div>
80 + </div>
81 + </div>
82 +
83 + <!--인원수-->
84 + <div class="form-group">
85 + <div class="col-md-4 selectContainer">
86 + <div class="input-group">
87 + <label class="col-md-4 control-label">인원 수</label>
88 + <i class="glyphicon glyphicon-list"></i>
89 + <select name="num" class="form-control selectpicker" >
90 + <option>1~4명</option>
91 + <option>5~10명</option>
92 + <option >10명~15명</option>
93 + <option >15명~20명</option>
94 + <option >20명 이상</option>
95 + </select>
96 + </div>
97 + </div>
98 + </div>
99 +
100 +
101 +
102 + <!--예약시간-->
103 + <div class="form-group">
104 + <div class="col-md-4 selectContainer">
105 + <div class="input-group">
106 + <label class="col-md-4 control-label">예약 시간</label>
107 +
108 + <i class="glyphicon glyphicon-list"></i>
109 + <select name="restime" class="form-control selectpicker" >
110 + <option value=" " >시간</option>
111 + <option>10시</option>
112 + <option>11시</option>
113 + <option>12시</option>
114 + <option>13시</option>
115 + <option>14시</option>
116 + <option>15시</option>
117 + <option>16시</option>
118 + <option>17시</option>
119 + <option>18시</option>
120 + <option>19시</option>
121 + <option>20시</option>
122 + </select>
123 + &nbsp;
124 + <select name="resmin" class="form-control selectpicker" >
125 + <option value=" " ></option>
126 + <option>00분</option>
127 + <option>15분</option>
128 + <option>30분</option>
129 + <option>45분</option>
130 + </select>
131 + </div>
132 + </div>
133 + </div>
134 +
135 + <div class="form-group">
136 + <div class="col-md-4 selectContainer">
137 + <div class="input-group">
138 +
139 + <label class="col-md-4 control-label">예약 날짜</label>
140 + <div class="input-group input-append date" id="dateRangePicker"> </div>
141 + <script>
142 + $('#dateRangePicker').datepicker({
143 + format: "yyyy-mm-dd",
144 + language: "kr"
145 + });
146 + </script>
147 + </div>
148 + </div>
149 + </div>
150 +
151 +
152 + <div class="form-group">
153 + <div class="col-md-4 selectContainer">
154 + <div class="input-group">
155 + <label class="col-md-4 control-label"></label>
156 +
157 + <i class="glyphicon glyphicon-list"></i>
158 + <select name="date" class="form-control selectpicker" >
159 +
160 + <option><script language="JavaScript">
161 + var today = new Date( )
162 + document.write(today.getMonth( )+1 , "월 " , today.getDate( ) , "일")
163 + </script> </option>
164 +
165 + <option><script language="JavaScript">
166 + var today = new Date( )
167 + document.write(today.getMonth( )+1 , "월 " , today.getDate( )+1 , "일")
168 + </script> </option>
169 +
170 + <option><script language="JavaScript">
171 + var today = new Date( )
172 + document.write(today.getMonth( )+1 , "월 " , today.getDate( )+2 , "일")
173 + </script> </option>
174 +
175 + <option><script language="JavaScript">
176 + var today = new Date( )
177 + document.write(today.getMonth( )+1 , "월 " , today.getDate( )+3 , "일")
178 + </script> </option>
179 +
180 + <option><script language="JavaScript">
181 + var today = new Date( )
182 + document.write(today.getMonth( )+1 , "월 " , today.getDate( )+4 , "일")
183 + </script> </option>
184 +
185 + <option><script language="JavaScript">
186 + var today = new Date( )
187 + document.write(today.getMonth( )+1 , "월 " , today.getDate( )+5 , "일")
188 + </script> </option>
189 +
190 + <option><script language="JavaScript">
191 + var today = new Date( )
192 + document.write(today.getMonth( )+1 , "월 " , today.getDate( )+6 , "일")
193 + </script> </option>
194 +
195 + <option><script language="JavaScript">
196 + var today = new Date( )
197 + document.write(today.getMonth( )+1 , "월 " , today.getDate( )+7 , "일 (예약은 1주일까지만 가능합니다)")
198 + </script> </option>
199 +
200 + </select>
201 + </div>
202 + </div>
203 + </div>
204 +
205 + <!-- radio checks-->
206 + <div class="form-group">
207 + <div class="col-md-4 selectContainer">
208 + <div class="input-group">
209 + <label class="col-md-4 control-label">메뉴</label>
210 +
211 + <div class="checkbox">
212 + <label>
213 + <image src = "/img/pizza.jpg" width=100 height=100>
214 + <br><input type="checkbox" name="food" value="pizza" /> 피자
215 + </label>
216 + </div>
217 + &nbsp;
218 + &nbsp;
219 + &nbsp;
220 + <div class="checkbox">
221 + <label>
222 + <image src = "/img/파스타.jpg" width=100 height=100>
223 + <br><input type="checkbox" name="food" value="pasta" /> 파스타
224 + </label>
225 + </div>
226 +
227 + &nbsp;
228 + &nbsp;
229 + &nbsp;
230 + <div class="checkbox">
231 + <label>
232 + <image src = "/img/와인.jpg" width=100 height=100>
233 + <br><input type="checkbox" name="food" value="wine" /> 와인
234 + </label>
235 + </div>
236 + </div>
237 + </div>
238 + </div>
239 +
240 +
241 + <br>
242 + <div class="form-group">
243 + <div class="col-md-4 selectContainer">
244 + <div class="input-group">
245 + <label class="col-md-4 control-label">요청 사항</label>
246 + <i class="glyphicon glyphicon-pencil"></i>
247 + <textarea class="form-control" name="content" placeholder="요청 사항을 적어주세요." style="width:310px; height:100px;"></textarea>
248 + </div>
249 + </div>
250 +
251 +
252 +
253 + <!-- Button -->
254 + <div class="form-group">
255 + <label class="col-md-4 control-label"></label>
256 + <div class="col-md-4">
257 + <button type="submit" class="btn btn-default btn-lg" >예약하기 <span class="glyphicon glyphicon-send "></span></button>
258 + </div>
259 +
260 + </div>
261 + </form>
262 + </fieldset>
263 + </form>
264 + </div>
265 + </div>
266 +</script>
267 +
268 +<script type="text/javascript" src="/mail"></script>
269 +
270 + <script>
271 + function onWriteSubmit()
272 + {
273 + if ( $("#creater_id").val().trim() == "" )
274 + {
275 + var message = "아이디를 입력해주세요";
276 + $("#creater_id").val("");
277 + $("#creater_id").focus();
278 + alert(message);
279 + return false;
280 + }
281 +
282 + if ( $("#phone").val().trim() == "" )
283 + {
284 + var message = "폰번호를 입력해주세요";
285 + $("#phone").val("");
286 + $("#phone").focus();
287 + alert(message);
288 + return false;
289 + }
290 + if ( $("#email").val().trim() == "" )
291 + {
292 + var message = "이메일 주소를 입력해주세요";
293 + $("#email").val("");
294 + $("#email").focus();
295 + alert(message);
296 + return false;
297 + }if ( $("#num").val().trim() == "" )
298 + {
299 + var message = "인원수를 입력해주세요";
300 + $("#num").val("");
301 + $("#num").focus();
302 + alert(message);
303 + return false;
304 + }if ( $("#restime").val().trim() == "" )
305 + {
306 + var message = "예약시간을 입력해주세요";
307 + $("#restime").val("");
308 + $("#restime").focus();
309 + alert(message);
310 + return false;
311 + }
312 + if ( $("#resmin").val().trim() == "" )
313 + {
314 + var message = "예약 분을 입력해주세요";
315 + $("#resmin").val("");
316 + $("#resmin").focus();
317 + alert(message);
318 + return false;
319 + }
320 + if ( $("#date").val().trim() == "" )
321 + {
322 + var message = "예약 날짜를 입력해주세요";
323 + $("#date").val("");
324 + $("#date").focus();
325 + alert(message);
326 + return false;
327 + }
328 + if ( $("#food").val().trim() == "" )
329 + {
330 + var message = "예약 메뉴를 입력해주세요";
331 + $("#food").val("");
332 + $("#food").focus();
333 + alert(message);
334 + return false;
335 + }
336 + if ( $("#content").val().trim() == "" )
337 + {
338 + var message = "비고사항을 입력해주세요";
339 + $("#content").val("");
340 + $("#content").focus();
341 + alert(message);
342 + return false;
343 + }
344 +
345 +
346 + }
347 + </script>
348 +
349 +
350 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
351 + <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
352 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
353 + </head>
354 +</html>
1 +<!DOCTYPE html>
2 +
3 +<html>
4 + <head>
5 + <title><%= title %></title>
6 + <link rel='stylesheet' href='/stylesheets/style.css' />
7 + <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
8 + <script type="text/javascript" src="https://service.iamport.kr/js/iamport.payment-1.1.5.js"></script>
9 + </head>
10 + <body>
11 + <h1>결제창</h1>
12 + </body>
13 + <script>
14 + var IMP = window.IMP;
15 + IMP.init('imp90003971');
16 + IMP.request_pay({
17 + pg : 'kakao', // version 1.1.0부터 지원.
18 + pay_method : 'card',
19 + merchant_uid : 'merchant_' + new Date().getTime(),
20 + name : '주문명:결제테스트',
21 + amount : 100,
22 + buyer_email : 'jju0807@naver.com',
23 + buyer_name : '정지윤',
24 + buyer_tel : '010-8762-3073',
25 + buyer_addr : '서울특별시 강남구 삼성동',
26 + buyer_postcode : '123-456',
27 + m_redirect_url : 'https://localhost:3000'
28 + }, function(rsp) {
29 + if ( rsp.success ) {
30 + var msg = '결제가 완료되었습니다.';
31 + msg += '고유ID : ' + rsp.imp_uid;
32 + msg += '상점 거래ID : ' + rsp.merchant_uid;
33 + msg += '결제 금액 : ' + rsp.paid_amount;
34 + msg += '카드 승인번호 : ' + rsp.apply_num;
35 + } else {
36 + var msg = '결제에 실패하였습니다.';
37 + msg += '에러내용 : ' + rsp.error_msg;
38 + }
39 + alert(msg);
40 + });
41 + </script>
42 +</html>
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
61 <div class="input-group"> 61 <div class="input-group">
62 <label class="col-md-4 control-label">휴대전화</label> 62 <label class="col-md-4 control-label">휴대전화</label>
63 <i class="glyphicon glyphicon-earphone"></i> 63 <i class="glyphicon glyphicon-earphone"></i>
64 - <input name="phone" placeholder="010-123-4567" class="form-control" type="text"> 64 + <input name="phone" placeholder="0101234567" class="form-control" type="text">
65 </div> 65 </div>
66 </div> 66 </div>
67 </div> 67 </div>
......