김태민 / OpenSource_Project

Go to a project
Toggle navigation Toggle navigation pinning
김민석
8bbdd881 1 parent 999f57a4

지도부분 추가

Inline Side-by-side
Showing 9 changed files with 911 additions and 538 deletions
......@@ -18,9 +18,9 @@ app.get(['/food', '/food/:id'], function(req, res) {
var id = req.params.id;
if (id) {
if (id == 'search') {
res.render('search.ejs', {
res.render('map.ejs', {
title: 'Searching',
description: 'You can search for food here.'
searching: '경희대학교 국제캠퍼스'
});
} else if (id == 'recommendation') {
res.render('recommendation.ejs', {
......@@ -38,8 +38,12 @@ app.get(['/food', '/food/:id'], function(req, res) {
//사용자가 호출한 search page
app.post('/food/search', function(req, res) {
var title=req.body.title;
res.redirect("https://www.google.com/search?q="+title+"&oq="+title+"&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8")
var title = req.body.title;
res.render('map.ejs', {
title: 'Search',
searching: title
});
// res.redirect("https://www.google.com/search?q=" + title + "&oq=" + title + "&aqs=chrome..69i57j0l3j69i60j69i61.3149j0j9&sourceid=chrome&ie=UTF-8")
})
//사용자가 호출한 recommendation page
......@@ -54,25 +58,66 @@ app.post('/food/recommendation', function(req, res) {
var shape = req.body.shape;
var kinds = req.body.kinds;
var rand = Math.floor(Math.random() * 3); //(Math.random() * (max - min)) + min
var i = 0;
for (var foods in users) {
if (rand == i) {
var food_value=foods;
// $('<li>').text(foods).appendTo('#users');
if (!Array.isArray(shape) && shape) {
var shape = [];
shape.push(req.body.shape);
}
if (!Array.isArray(kinds) && kinds) {
var kinds = [];
kinds.push(req.body.kinds);
}
var set1 = new Set();
var set2 = new Set();
var set3 = new Set();
function add(users, price, shape, kinds, callback) {
for (var foods in users) {
if (shape) {
for (var i = 0; i < shape.length; i++) {
if (users[foods]['shape'] == shape[i]) {
set1.add(foods);
}
}
} else {
set1.add(foods);
}
if (kinds) {
for (var j = 0; j < kinds.length; j++) {
if (users[foods]['kinds'] == kinds[j]) {
set2.add(foods);
}
}
} else {
set2.add(foods);
}
if (!price || (price && users[foods]['price'] <= Number(price) + 5000 && users[foods]['price'] >= Number(price) - 5000)) {
set3.add(foods);
}
}
i++;
callback(set1, set2, set3);
}
res.render('print.ejs', {
title: 'Recommendation',
description: 'We recommend this...',
// name: users,
randvalue: food_value
});
add(users, price, shape, kinds, function(set1, set2, set3) {
let difference1 = new Set([...set1].filter(i => set2.has(i)));
let difference2 = new Set([...difference1].filter(i => set3.has(i)));
var food = [...difference2];
var length = food.length;
console.log('food 목록: '+food);
console.log('food 갯수: '+length);
var rand = Math.floor(Math.random() * length); //(Math.random() * (max - min)) + min
var food_value = food[rand];
console.log('랜덤 food 번호: '+rand);
res.render('print.ejs', {
title: 'Recommendation',
description: 'We recommend this...',
randvalue: food_value
}); //rander closed
}); //add closed
}
});
})
}); //readFile closed
}); //post closed
app.listen(3000, function() {
console.log('Connected, 3000');
......
{
"바게뜨":{
"짜장면": {
"price": 5000,
"shape": "면",
"kinds": "중식"
},
"짬뽕": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"우동": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"울면": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"간짜장": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"냉면": {
"price": 6000,
"shape": "면",
"kinds": "중식"
},
"중국냉면": {
"price": 9000,
"shape": "면",
"kinds": "중식"
},
"만두": {
"price": 5000,
"shape": "기타",
"kinds": "중식"
},
"볶음밥": {
"price": 5000,
"shape": "밥",
"kinds": "중식"
},
"짬뽕밥": {
"price": 6000,
"shape": "밥",
"kinds": "중식"
},
"짜장밥": {
"price": 6000,
"shape": "밥",
"kinds": "중식"
},
"잡채밥": {
"price": 7000,
"shape": "밥",
"kinds": "중식"
},
"제육덮밥": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"오징어덮밥": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"오므라이스": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"새우볶음밥": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"김치볶음밥": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"소고기덮밥": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"탕수육": {
"price": 15000,
"shape": "고기",
"kinds": "중식"
},
"깐풍기": {
"price": 20000,
"shape": "빵",
"kinds": "양식"
"shape": "고기",
"kinds": "중식"
},
"난자완스": {
"price": 20000,
"shape": "고기",
"kinds": "중식"
},
"깐쇼새우": {
"price": 20000,
"shape": "고기",
"kinds": "중식"
},
"도시락":{
"초밥": {
"price": 10000,
"shape": "밥",
"kinds": "한식"
"kinds": "일식"
},
"회덮밥": {
"price": 10000,
"shape": "밥",
"kinds": "일식"
},
"스파게티":{
"회": {
"price": 20000,
"shape": "고기",
"kinds": "일식"
},
"라멘": {
"price": 10000,
"shape": "면",
"kinds": "양식"
"kinds": "일식"
},
"돈까스": {
"price": 8000,
"shape": "고기",
"kinds": "일식"
},
"햄버거":{
"순대국밥": {
"price": 6000,
"shape": "밥",
"kinds": "한식"
},
"뼈다귀해장국": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"돼지국밥": {
"price": 6000,
"shape": "밥",
"kinds": "한식"
},
"콩나물국밥": {
"price": 5000,
"shape": "밥",
"kinds": "한식"
},
"굴국밥": {
"price": 6000,
"shape": "밥",
"kinds": "한식"
},
"육개장": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"라면": {
"price": 1000,
"shape": "면",
"kinds": "한식"
},
"순두부찌개": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"김치찌개": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"생선구이": {
"price": 10000,
"shape": "빵",
"shape": "고기",
"kinds": "한식"
},
"된장찌개": {
"price": 7000,
"shape": "밥",
"kinds": "한식"
},
"청국장": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"갈비탕": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"내장탕": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"곰탕": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"부대찌개": {
"price": 8000,
"shape": "밥",
"kinds": "한식"
},
"삼계탕": {
"price": 15000,
"shape": "밥",
"kinds": "한식"
},
"오뎅탕": {
"price": 5000,
"shape": "밥",
"kinds": "한식"
},
"참치마요": {
"price": 4000,
"shape": "밥",
"kinds": "한식"
},
"치킨마요": {
"price": 4000,
"shape": "밥",
"kinds": "한식"
},
"스팸마요": {
"price": 4000,
"shape": "밥",
"kinds": "한식"
},
"떡볶이": {
"price": 5000,
"shape": "밥",
"kinds": "한식"
},
"순대": {
"price": 5000,
"shape": "고기",
"kinds": "한식"
},
"치킨": {
"price": 20000,
"shape": "고기",
"kinds": "양식"
}
}
......
......@@ -88,7 +88,8 @@
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
......
......@@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/favicon.png" type="image/png">
<title>Occupy Business</title>
<title>음식 추천 웹사이트 이름</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
......@@ -20,114 +20,53 @@
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container box_1620">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="service.html">Services</a>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a>
<li class="nav-item"><a class="nav-link" href="portfolio-details.html">Portfolio Details</a>
<li class="nav-item"><a class="nav-link" href="elements.html">Elements</a></li>
</ul>
</li>
<li class="nav-item submenu dropdown active">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="single-blog.html">Blog Details</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="nav-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="nav-item"><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li class="nav-item"><a href="#"><i class="fa fa-behance"></i></a></li>
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
<!--================Home Banner Area =================-->
<section class="home_banner_area">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/slider/slider-2.jpg" alt="">
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>We Combine <br />Business with Finance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="banner_btn" href="#">Explore Us</a>
<a class="banner_btn2" href="#">Get Free Quote</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt="">
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>We Combine <br />Business with Finance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="banner_btn" href="#">Explore Us</a>
<a class="banner_btn2" href="#">Get Free Quote</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide"><img src="img/slider/slider-2.jpg" alt="">
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>We Combine <br />Business with Finance</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="banner_btn" href="#">Explore Us</a>
<a class="banner_btn2" href="#">Get Free Quote</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container box_1620">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> <!-- 나중에 연결 html이름 수정-->
<li class="nav-item"><a class="nav-link" href="service.html">추천</a>
<li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
<!--================Home Banner Area =================-->
<section class="banner_area">
<div class="banner_inner d-flex align-items-center">
<div class="container">
<div class="banner_content">
<h2>지도</h2>
<div class="page_link">
<a href="index.html">Home</a>
<a href="about-us.html">지도</a>
</div>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
<!--================Blog Categorie Area =================-->
<section class="blog_categorie_area">
<div class="container">
......@@ -172,7 +111,7 @@
</div>
</section>
<!--================Blog Categorie Area =================-->
<!--================Blog Area =================-->
<section class="blog_area">
<div class="container">
......@@ -448,7 +387,7 @@
<p>Adventure</p>
<p>44</p>
</a>
</li>
</li>
</ul>
<div class="br"></div>
</aside>
......@@ -466,9 +405,9 @@
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Enter email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email'">
</div>
<a href="#" class="bbtns">Subcribe</a>
</div>
<p class="text-bottom">You can unsubscribe at any time</p>
<div class="br"></div>
</div>
<p class="text-bottom">You can unsubscribe at any time</p>
<div class="br"></div>
</aside>
<aside class="single-sidebar-widget tag_cloud_widget">
<h4 class="widget_title">Tag Clouds</h4>
......@@ -493,94 +432,48 @@
</div>
</section>
<!--================Blog Area =================-->
<!--================ start footer Area =================-->
<!--================ start footer Area =================-->
<footer class="footer-area">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">About Biznance</h6>
<p>The world has become so fast paced that people don’t want to stand by reading a page of information, they would much rather look at a presentation and understand the message. It has come to a point where images and videos are</p>
<h6 class="footer_title">여기는 설명쓰자</h6>
<p>아하하하핳ㅎ</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">Navigation Links</h6>
<h6 class="footer_title">여기는 바로 메뉴로 이동 쌉가능</h6>
<div class="row">
<div class="col-4">
<ul class="list">
<li><a href="#">Home</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
<div class="col-4">
<ul class="list">
<li><a href="#">Team</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">Newsletter</h6>
<p>For business professionals caught between high OEM price and mediocre print and graphic output, </p>
<div id="mc_embed_signup">
<form target="_blank" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01" method="get" class="subscribe_form relative">
<div class="input-group d-flex flex-row">
<input name="EMAIL" placeholder="Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address '" required="" type="email">
<button class="btn sub-btn"><span class="lnr lnr-location"></span></button>
</div>
<div class="mt-10 info"></div>
</form>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h6 class="footer_title">InstaFeed</h6>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/instagram/Image-01.jpg" alt=""></li>
<li><img src="img/instagram/Image-02.jpg" alt=""></li>
<li><img src="img/instagram/Image-03.jpg" alt=""></li>
<li><img src="img/instagram/Image-04.jpg" alt=""></li>
<li><img src="img/instagram/Image-05.jpg" alt=""></li>
<li><img src="img/instagram/Image-06.jpg" alt=""></li>
<li><img src="img/instagram/Image-07.jpg" alt=""></li>
<li><img src="img/instagram/Image-08.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
<div class="border_line"></div>
<div class="container">
<div class="row footer-bottom d-flex justify-content-between align-items-center">
<p class="col-lg-8 col-md-8 footer-text m-0"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
<div class="col-lg-4 col-md-4 footer-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-behance"></i></a>
</div>
<p class="col-lg-8 col-md-8 footer-text m-0">
밑에 하고싶은 말 적는곳
</p>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
......@@ -600,4 +493,4 @@ Copyright &copy;<script>document.write(new Date().getFullYear());</script> All r
<script src="vendors/swiper/js/swiper.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
\ No newline at end of file
</html>
......
......@@ -38,7 +38,8 @@
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li> <!-- 나중에 연결 html이름 수정-->
<li class="nav-item"><a class="nav-link" href="service.html">추천</a>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">지도</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
......
.map_wrap, .map_wrap * {
margin: 0;
padding: 0;
font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
font-size: 12px;
}
.map_wrap a, .map_wrap a:hover, .map_wrap a:active {
color: #000;
text-decoration: none;
}
.map_wrap {
position: relative;
width: 100%;
height: 500px;
}
#map {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#menu_wrap {
position: absolute;
top: 0;
left:0;
bottom: 0;
width: 250px;
margin: 10px 0 30px 10px;
padding: 5px;
overflow-y: auto;
background: rgba(255, 255, 255, 0.7);
z-index: 1;
font-size: 12px;
border-radius: 10px;
}
.bg_white {
background: #fff;
}
#menu_wrap hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #5F5F5F;
margin: 3px 0;
}
#menu_wrap .option {
text-align: center;
}
#menu_wrap .option p {
margin: 10px 0;
}
#menu_wrap .option button {
margin-left: 5px;
}
#placesList li {
list-style: none;
}
#placesList .item {
position: relative;
border-bottom: 1px solid #888;
overflow: hidden;
cursor: pointer;
min-height: 65px;
}
#placesList .item span {
display: block;
margin-top: 4px;
}
#placesList .item h5, #placesList .item .info {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#placesList .item .info {
padding: 10px 0 10px 55px;
}
#placesList .info .gray {
color: #8a8a8a;
}
#placesList .info .jibun {
padding-left: 26px;
background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;
}
#placesList .info .tel {
color: #009900;
}
#placesList .item .markerbg {
float: left;
position: absolute;
width: 36px;
height: 37px;
margin: 10px 0 0 10px;
background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png) no-repeat;
}
#placesList .item .marker_1 {
background-position: 0 -10px;
}
#placesList .item .marker_2 {
background-position: 0 -56px;
}
#placesList .item .marker_3 {
background-position: 0 -102px
}
#placesList .item .marker_4 {
background-position: 0 -148px;
}
#placesList .item .marker_5 {
background-position: 0 -194px;
}
#placesList .item .marker_6 {
background-position: 0 -240px;
}
#placesList .item .marker_7 {
background-position: 0 -286px;
}
#placesList .item .marker_8 {
background-position: 0 -332px;
}
#placesList .item .marker_9 {
background-position: 0 -378px;
}
#placesList .item .marker_10 {
background-position: 0 -423px;
}
#placesList .item .marker_11 {
background-position: 0 -470px;
}
#placesList .item .marker_12 {
background-position: 0 -516px;
}
#placesList .item .marker_13 {
background-position: 0 -562px;
}
#placesList .item .marker_14 {
background-position: 0 -608px;
}
#placesList .item .marker_15 {
background-position: 0 -654px;
}
#pagination {
margin: 10px auto;
text-align: center;
}
#pagination a {
display: inline-block;
margin-right: 10px;
}
#pagination .on {
font-weight: bold;
cursor: default;
color: #777;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/favicon.png" type="image/png">
<title>음식 추천 웹사이트 이름</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
<link rel="stylesheet" href="vendors/animate-css/animate.css">
<link rel="stylesheet" href="vendors/swiper/css/swiper.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container box_1620">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/../style.css">
</head>
<!--================Home Banner Area =================-->
<section class="home_banner_area">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>음식 추천 설명 <br />사진은 나중에 바꾸자</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>음식 추천 설명<br />사진은 나중에 바꾸자</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide"><img src="img/slider/slider-1.jpg" alt=""> <!-- 여기다가 음식 슬라이더 이미지를 넣자-->
<div class="slider_text_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="slider_text">
<h2>음식 추천 설명<br />사진은 나중에 바꾸자</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
<body>
<h1><a href="/food">점심 메뉴 정하기</a></h1>
<!--================ start footer Area =================-->
<footer class="footer-area">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">여기는 설명쓰자</h6>
<p>아하하하핳ㅎ</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">여기는 바로 메뉴로 이동 쌉가능</h6>
<div class="row">
<div class="col-4">
<ul class="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<ul>
<il><a href="/food/search">검색</a></il><br>
<il><a href="/food/recommendation">추천</a></il>
</ul>
</div>
<div class="border_line"></div>
<div class="container">
<div class="row footer-bottom d-flex justify-content-between align-items-center">
<p class="col-lg-8 col-md-8 footer-text m-0">
밑에 하고싶은 말 적는곳
</p>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<article class="">
<h2>
<%= title %>
</h2>
<p><%= description %></p>
</article>
</div class="grid">
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="vendors/lightbox/simpleLightbox.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope-min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="vendors/counter-up/jquery.waypoints.min.js"></script>
<script src="vendors/counter-up/jquery.counterup.js"></script>
<script src="js/mail-script.js"></script>
<script src="vendors/popup/jquery.magnific-popup.min.js"></script>
<script src="vendors/swiper/js/swiper.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/../map.css">
<!-- <link rel="stylesheet" href="/../style.css"> -->
<title>키워드로 장소검색하고 목록으로 표출하기</title>
</head>
<body>
<h1><a href="/food">점심 메뉴 정하기</a></h1>
<div class="grid">
<ul>
<il><a href="/food/search">검색</a></il><br>
<il><a href="/food/recommendation">추천</a></il>
</ul>
<article>
<h2>
<%= title %>
</h2>
<form action='/food/search' method='post'>
<p>
검색 :
<input type="text" name="title" placeholder="검색">
<input type="submit">
</p>
</form>
</article>
</div class="grid">
<div class="map_wrap">
<div id="map" ></div>
<div id="menu_wrap" class="bg_white">
<div class="option">
<div>
<form onsubmit="searchPlaces(); return false;">
키워드 : <input type="text" value='<%=searching%>' id="keyword" size="15">
<button type="submit">검색하기</button>
</form>
</div>
</div>
<hr>
<ul id="placesList"></ul>
<div id="pagination"></div>
</div>
</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a8a43eda451b054ac46a281a3db5d536&libraries=services"></script>
<script>
// 마커를 담을 배열입니다
var markers = [];
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places();
// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
zIndex: 1
});
// 키워드로 장소를 검색합니다
searchPlaces();
// 키워드 검색을 요청하는 함수입니다
function searchPlaces() {
var keyword = document.getElementById('keyword').value;
if (!keyword.replace(/^\s+|\s+$/g, '')) {
alert('키워드를 입력해주세요!');
return false;
}
// 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
ps.keywordSearch(keyword, placesSearchCB);
}
// 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
// 정상적으로 검색이 완료됐으면
// 검색 목록과 마커를 표출합니다
displayPlaces(data);
// 페이지 번호를 표출합니다
displayPagination(pagination);
} else if (status === kakao.maps.services.Status.ZERO_RESULT) {
alert('검색 결과가 존재하지 않습니다.');
return;
} else if (status === kakao.maps.services.Status.ERROR) {
alert('검색 결과 중 오류가 발생했습니다.');
return;
}
}
// 검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {
var listEl = document.getElementById('placesList'),
menuEl = document.getElementById('menu_wrap'),
fragment = document.createDocumentFragment(),
bounds = new kakao.maps.LatLngBounds(),
listStr = '';
// 검색 결과 목록에 추가된 항목들을 제거합니다
removeAllChildNods(listEl);
// 지도에 표시되고 있는 마커를 제거합니다
removeMarker();
for (var i = 0; i < places.length; i++) {
// 마커를 생성하고 지도에 표시합니다
var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
marker = addMarker(placePosition, i),
itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
bounds.extend(placePosition);
// 마커와 검색결과 항목에 mouseover 했을때
// 해당 장소에 인포윈도우에 장소명을 표시합니다
// mouseout 했을 때는 인포윈도우를 닫습니다
(function(marker, title) {
kakao.maps.event.addListener(marker, 'mouseover', function() {
displayInfowindow(marker, title);
});
kakao.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
itemEl.onmouseover = function() {
displayInfowindow(marker, title);
};
itemEl.onmouseout = function() {
infowindow.close();
};
})(marker, places[i].place_name);
fragment.appendChild(itemEl);
}
// 검색결과 항목들을 검색결과 목록 Elemnet에 추가합니다
listEl.appendChild(fragment);
menuEl.scrollTop = 0;
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
// 검색결과 항목을 Element로 반환하는 함수입니다
function getListItem(index, places) {
var el = document.createElement('li'),
itemStr = '<span class="markerbg marker_' + (index + 1) + '"></span>' +
'<div class="info">' +
' <h5>' + places.place_name + '</h5>';
if (places.road_address_name) {
itemStr += ' <span>' + places.road_address_name + '</span>' +
' <span class="jibun gray">' + places.address_name + '</span>';
} else {
itemStr += ' <span>' + places.address_name + '</span>';
}
itemStr += ' <span class="tel">' + places.phone + '</span>' +
'</div>';
el.innerHTML = itemStr;
el.className = 'item';
return el;
}
// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position, idx, title) {
var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
imgOptions = {
spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
},
markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
marker = new kakao.maps.Marker({
position: position, // 마커의 위치
image: markerImage
});
marker.setMap(map); // 지도 위에 마커를 표출합니다
markers.push(marker); // 배열에 생성된 마커를 추가합니다
return marker;
}
// 지도 위에 표시되고 있는 마커를 모두 제거합니다
function removeMarker() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
// 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
function displayPagination(pagination) {
var paginationEl = document.getElementById('pagination'),
fragment = document.createDocumentFragment(),
i;
// 기존에 추가된 페이지번호를 삭제합니다
while (paginationEl.hasChildNodes()) {
paginationEl.removeChild(paginationEl.lastChild);
}
for (i = 1; i <= pagination.last; i++) {
var el = document.createElement('a');
el.href = "#";
el.innerHTML = i;
if (i === pagination.current) {
el.className = 'on';
} else {
el.onclick = (function(i) {
return function() {
pagination.gotoPage(i);
}
})(i);
}
fragment.appendChild(el);
}
paginationEl.appendChild(fragment);
}
// 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
// 인포윈도우에 장소명을 표시합니다
function displayInfowindow(marker, title) {
var content = '<div style="padding:5px;z-index:1;">' + title + '</div>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
// 검색결과 목록의 자식 Element를 제거하는 함수입니다
function removeAllChildNods(el) {
while (el.hasChildNodes()) {
el.removeChild(el.lastChild);
}
}
</script>
</body>
</html>
<!--
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/../style.css">
<title>Test</title>
<title>Test</title>
</head>
<body>
......@@ -23,198 +24,58 @@
<%= title %>
</h2>
<p><%= description %></p>
<form action='/food/recommendation' method='post'>
<button id='check_all'>모두 선택</button>
<button id='uncheck_all'>모두 해제</button>
<button id='count_check'>체크 수 확인</button>
<form action='/food/recommendation' method='post'>
<p>
가격 :
<input type="text" name="price" placeholder="price">
<input type="number" name="price" placeholder="price">
</p>
<p>
형태 :
<input type="text" name="shape" placeholder="밥, 빵, 면">
<input type="checkbox" name="shape" value="밥">밥</input>
<input type="checkbox" name="shape" value="면">면</input>
<input type="checkbox" name="shape" value="고기">고기</input>
<input type="checkbox" name="shape" value="기타">기타</input>
</p>
<p>
종류 :
<input type="text" name="kinds" placeholder="한식, 중식, 일식, 양식">
<input type="checkbox" name="kinds" value="한식">한식</input>
<input type="checkbox" name="kinds" value="중식">중식</input>
<input type="checkbox" name="kinds" value="양식">양식</input>
<input type="checkbox" name="kinds" value="일식">일식</input>
</p>
<p>
<input type="submit">
</p>
</form>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#check_all").click(function() {
$("input[name=kinds]:checkbox").prop("checked", "checked");
});
$("#uncheck_all").click(function() {
$("input[name=kinds]:checkbox").removeProp("checked");
});
$("#count_check").click(function() {
alert($("input[name=kinds]:checkbox:checked").length);
});
$("#check_all").click(function() {
$("input[name=shape]:checkbox").prop("checked", "checked");
});
$("#uncheck_all").click(function() {
$("input[name=shape]:checkbox").removeProp("checked");
});
$("#count_check").click(function() {
alert($("input[name=shape]:checkbox:checked").length);
});
</script>
</article>
</div class="grid">
</body>
</html> -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/favicon.png" type="image/png">
<title>음식 추천 웹사이트 이름</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
<link rel="stylesheet" href="vendors/animate-css/animate.css">
<link rel="stylesheet" href="vendors/swiper/css/swiper.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container box_1620">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav justify-content-center">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">검색</a></li>
<li class="nav-item"><a class="nav-link" href="service.html">추천</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a href="#" class="search"><i class="lnr lnr-magnifier"></i></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
<!--================Mission Area =================-->
<section class="mission_area">
<div class="row m0">
<div class="col-lg-6 p0">
<div class="left_img"><img src="img/mission-1.jpg" alt=""></div>
</div>
<div class="col-lg-6 p0">
<div class="mission_slider owl-carousel">
<div class="item">
<div class="mission_text">
<h4>Road to Success</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
</div>
<div class="mission_text">
<h4>About Our Mission</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
</div>
</div>
<div class="item">
<div class="mission_text">
<h4>Road to Success</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
</div>
<div class="mission_text">
<h4>About Our Mission</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
</div>
</div>
<div class="item">
<div class="mission_text">
<h4>About Our Mission</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
</div>
<div class="mission_text">
<h4>Road to Success</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt labore dolore magna aliqua enim minim veniam quis nostrud.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Mission Area =================-->
<!--================Project Details Area =================-->
<section class="project_know_area p_120">
<div class="container">
<div class="project_know_inner text-center">
<h3>Get to Know Project Estimate?</h3>
<p>There is a moment in the life of any aspiring astronomer that it is time to buy that first telescope. It’s exciting to think about setting up your own viewing station whether that is on the deck</p>
<a class="white_btn" href="#">Get Free Estimate</a>
</div>
</div>
</section>
<!--================End Project Details Area =================-->
<!--================ start footer Area =================-->
<footer class="footer-area">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">여기는 설명쓰자</h6>
<p>아하하하핳ㅎ</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6 class="footer_title">여기는 바로 메뉴로 이동 쌉가능</h6>
<div class="row">
<div class="col-4">
<ul class="list">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border_line"></div>
<div class="container">
<div class="row footer-bottom d-flex justify-content-between align-items-center">
<p class="col-lg-8 col-md-8 footer-text m-0">
밑에 하고싶은 말 적는곳
</p>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="vendors/lightbox/simpleLightbox.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope-min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="vendors/counter-up/jquery.waypoints.min.js"></script>
<script src="vendors/counter-up/jquery.counterup.js"></script>
<script src="js/mail-script.js"></script>
<script src="vendors/popup/jquery.magnific-popup.min.js"></script>
<script src="vendors/swiper/js/swiper.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>
......