이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
05d4aa1d 1 parent 7c73955e

불필요 파일 정리

Expand all
Inline Side-by-side
Showing 35 changed files with 365 additions and 871 deletions
...@@ -24,7 +24,6 @@ app.get('/logout', function (req, res) { ...@@ -24,7 +24,6 @@ app.get('/logout', function (req, res) {
24 res.send("Logout success"); 24 res.send("Logout success");
25 }); 25 });
26 26
27 -
28 app.listen(app.get('port'), () => { 27 app.listen(app.get('port'), () => {
29 console.log(`Server is running at ${app.get('port')}`); 28 console.log(`Server is running at ${app.get('port')}`);
30 }); 29 });
......
1 +const searchBox = document.querySelector(".search-box");
2 +const searchBtn = document.querySelector(".search-icon");
3 +const cancelBtn = document.querySelector(".cancel-icon");
4 +const searchInput = document.querySelector("input");
5 +const searchData = document.querySelector(".search-data");
6 +searchBtn.onclick = () => {
7 + searchBox.classList.add("active");
8 + searchBtn.classList.add("active");
9 + searchInput.classList.add("active");
10 + cancelBtn.classList.add("active");
11 + searchInput.focus();
12 + if (searchInput.value != "") {
13 + var values = searchInput.value;
14 + searchData.classList.remove("active");
15 + searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
16 + } else {
17 + searchData.textContent = "";
18 + }
19 +}
20 +cancelBtn.onclick = () => {
21 + searchBox.classList.remove("active");
22 + searchBtn.classList.remove("active");
23 + searchInput.classList.remove("active");
24 + cancelBtn.classList.remove("active");
25 + searchData.classList.toggle("active");
26 + searchInput.value = "";
27 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 +*{
3 + margin: 0;
4 + padding: 0;
5 + box-sizing: border-box;
6 + font-family: 'Poppins', sans-serif;
7 +}
8 +html,body{
9 + display: grid;
10 + height: 100%;
11 + place-items: center;
12 + background: #000000;
13 +}
14 +.search-box{
15 + position: relative;
16 + height: 60px;
17 + width: 60px;
18 + border-radius: 50%;
19 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
20 +}
21 +/* //박스 길이 조절 */
22 +.search-box.active{
23 + width: 700px;
24 +}
25 +.search-box input{
26 + width: 100%;
27 + height: 100%;
28 + border: none;
29 + border-radius: 50px;
30 + background: #fff;
31 + outline: none;
32 + padding: 0 60px 0 20px;
33 + font-size: 18px;
34 + opacity: 0;
35 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
36 +}
37 +/* 불투명도 */
38 +.search-box input.active{
39 + opacity: 1;
40 +}
41 +.search-box input::placeholder{
42 + color: #a6a6a6;
43 +}
44 +.search-box .search-icon{
45 + position: absolute;
46 + /* 버튼위치 */
47 + right: -380px;
48 + top: 50%;
49 + transform: translateY(-50%);
50 + height: 60px;
51 + width: 60px;
52 + background: #fff;
53 + border-radius: 50%;
54 + text-align: center;
55 + line-height: 60px;
56 + font-size: 22px;
57 + color: #CB25FF;
58 + cursor: pointer;
59 + z-index: 1;
60 + /* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
61 + /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
62 + transition-timing-function: linear;
63 +}
64 +.search-box .search-icon.active{
65 + right: 5px;
66 + height: 50px;
67 + line-height: 50px;
68 + width: 50px;
69 + font-size: 20px;
70 + background: #CB25FF;
71 + color: #fff;
72 + transform: translateY(-50%) rotate(360deg);
73 +}
74 +.search-box .cancel-icon{
75 + position: absolute;
76 + right: -380px;
77 + top: 50%;
78 + transform: translateY(-50%);
79 + font-size: 25px;
80 + color: #fff;
81 + cursor: pointer;
82 + /* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
83 + /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
84 + transition-timing-function: linear;
85 +}
86 +.search-box .cancel-icon.active{
87 + right: -40px;
88 +}
89 +.search-box .search-data{
90 + text-align: center;
91 + padding-top: 7px;
92 + color: #fff;
93 + font-size: 18px;
94 + word-wrap: break-word;
95 +}
96 +.search-box .search-data.active{
97 + display: none;
98 +}
1 +<!DOCTYPE html>
2 +<html lang="en" dir="ltr">
3 +
4 +<head>
5 + <meta charset="utf-8">
6 + <title>검색창 애니메이션</title>
7 +</head>
8 +
9 +<body>
10 + <div class="searchBtn">
11 + <link rel="stylesheet" href="btnstyle.css">
12 + <script src="btnsource.js"></script>
13 + <div class="search-box">
14 + <input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
15 + <!-- encoded function for activating search-bar in lisensed resouce -->
16 + <div class="search-icon">
17 + <i class="fas fa-search"></i>
18 + </div>
19 + <div class="cancel-icon">
20 + <i class="fas fa-times"></i>
21 + </div>
22 + <div class="search-data"></div>
23 + </div>
24 + <script src="btnClickEvent.js"></script>
25 + </div>
26 +</body>
27 +
28 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<div class="searchBtn">
2 + <link rel="stylesheet" href="btnstyle.css">
3 + <script src="btnsource.js"></script>
4 + <div class="search-box">
5 + <input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
6 + <!-- encoded function for activating search-bar in lisensed resouce -->
7 + <div class="search-icon">
8 + <i class="fas fa-search"></i>
9 + </div>
10 + <div class="cancel-icon">
11 + <i class="fas fa-times"></i>
12 + </div>
13 + <div class="search-data"></div>
14 + </div>
15 + <script src="btnClickEvent.js"></script>
16 +</div>
...\ No newline at end of file ...\ No newline at end of file
1 -const express = require('express');
2 -const app = express();
3 -
4 -app.get('/', (req, res) => {
5 - //res.send('API SERVER IS WORKING');
6 - console.log("api.js 실행");
7 -});
...\ No newline at end of file ...\ No newline at end of file
1 -const express = require('express');
2 -const router = express.Router();
3 -
4 -router.get('/', function (req, res) {
5 -
6 - res.send("모든 공연 정보 리스트 반환")
7 -});
8 -module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
1 -<html>
2 -
3 -<head>
4 - <title>로그인 페이지</title>
5 - <link rel="stylesheet" href="login_style.css" type="text/css">
6 - <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 -
8 -</head>
9 -
10 -<body>
11 - <header>
12 - <div class="nav-bar">
13 - <img src="camera.png" alt="" class="logo">
14 -
15 - <ul class="menu">
16 - <li><a href="">Home</a></li>
17 - <li><a href="">Services</a></li>
18 - <li><a href="">Portfolio</a></li>
19 - <li><a href="">Testimonimal</a></li>
20 - <li><a href="">Career</a></li>
21 - <li><a href="">Contact</a></li>
22 - </ul>
23 -
24 - </div>
25 - <div class="welcome">
26 -
27 - <h1>로그인</h1>
28 - <a id="kakao-login-btn"></a>
29 -
30 - </div>
31 -
32 - </header>
33 -</body>
34 -<script>
35 - Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
36 -
37 - console.log(Kakao.isInitialized());
38 -
39 - Kakao.Auth.createLoginButton({
40 - container: '#kakao-login-btn',
41 - success: function (authObj) {
42 - console.log(JSON.stringify(authObj));
43 - alert(JSON.stringify(authObj));//authObj -> 토큰임.
44 - },
45 - fail: function (err) {
46 - alert(JSON.stringify(err));
47 - }
48 - })
49 -</script>
50 -
51 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -*
2 -{
3 - margin: 0;
4 - padding: 0;
5 -}
6 -
7 -
8 -.nav-bar
9 -{
10 - background: #000;
11 - height: 80px;
12 -}
13 -
14 -.logo{
15 - background-color: #fff;
16 - margin: 10px 50px;
17 - height: 60px;
18 -}
19 -
20 -.menu{
21 - float: right;
22 - list-style: none;
23 - margin:20px;
24 -}
25 -
26 -.menu li{
27 - display: inline-block;
28 - margin: 10px 5px;
29 -}
30 -
31 -.menu li a{
32 - text-decoration: none;
33 - color: #fff;
34 - padding: 5px 10px;
35 - font-family: sans-serif;
36 - letter-spacing: 2px;
37 - border: 1px solid #fff;
38 -}
39 -
40 -.menu li a:hover{
41 - background: #fff;
42 - transition: .4s;
43 - color: #000;
44 -}
45 -
46 -.welcome{
47 - position:relative;
48 - text-align:center;
49 - font-family: sans-serif;
50 - color:#000;
51 - top: 300px;
52 -}
53 -
54 -.welcome h1{
55 - font-size: 42px;
56 - margin: 25px;
57 -}
58 -
1 -<html>
2 -
3 -<head>
4 - <title>Webpage Design In HTML and CSS</title>
5 - <link rel="stylesheet" href="main_style.css" type="text/css">
6 -</head>
7 -
8 -<body>
9 - <header>
10 - <div class="nav-bar">
11 - <img src="camera.png" alt="" class="logo">
12 -
13 - <ul class="menu">
14 - <li><a href="">Home</a></li>
15 - <li><a href="">Services</a></li>
16 - <li><a href="">Portfolio</a></li>
17 - <li><a href="">Testimonimal</a></li>
18 - <li><a href="">Career</a></li>
19 - <li><a href="">Contact</a></li>
20 - </ul>
21 -
22 - </div>
23 - <div class="welcome">
24 -
25 - <h1>어떤 공연을 찾으시나요?</h1>
26 - <a href="#" class="btn btn1">나의 근처 공연</a>
27 - <a href="#" class="btn btn2">검색하기</a>
28 - <a href="login.html" class="btn btn3">로그인</a>
29 - </div>
30 -
31 - </header>
32 -</body>
33 -
34 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -*
2 -{
3 - margin: 0;
4 - padding: 0;
5 -}
6 -
7 -header
8 -{
9 - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
10 - height: 100vh;
11 - background-size: cover;
12 - background-position: center;
13 - background-repeat: no-repeat;
14 - transition: 5s;
15 -
16 - animation-name: animate;
17 - animation-direction: alternate-reverse;
18 - animation-duration: 30s;
19 - animation-fill-mode:forwards;
20 - animation-iteration-count: infinite;
21 - animation-play-state: running;
22 - animation-timing-function:ease-in-out;
23 -}
24 -@keyframes animate{
25 - 0%{
26 - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
27 - }
28 - 33%{
29 - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back2.jpg);
30 -
31 - }
32 - 66%{
33 - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back3.jpg);
34 -
35 - }
36 -}
37 -.nav-bar
38 -{
39 - background: rgb(0,0,0,0.5);
40 - height: 80px;
41 -}
42 -
43 -.logo{
44 - background-color: #fff;
45 - margin: 10px 50px;
46 - height: 60px;
47 -}
48 -
49 -.menu{
50 - float: right;
51 - list-style: none;
52 - margin:20px;
53 -}
54 -
55 -.menu li{
56 - display: inline-block;
57 - margin: 10px 5px;
58 -}
59 -
60 -.menu li a{
61 - text-decoration: none;
62 - color: #fff;
63 - padding: 5px 10px;
64 - font-family: sans-serif;
65 - letter-spacing: 2px;
66 - border: 1px solid #fff;
67 -}
68 -
69 -.menu li a:hover{
70 - background: #fff;
71 - transition: .4s;
72 - color: #000;
73 -}
74 -
75 -.welcome{
76 - position:relative;
77 - text-align:center;
78 - font-family: sans-serif;
79 - color:#fff;
80 - top: 300px;
81 -}
82 -
83 -.welcome h1{
84 - font-size: 42px;
85 - margin: 25px;
86 -}
87 -
88 -.btn{
89 - font-size:18px;
90 - letter-spacing: 2px;
91 - margin:5px;
92 - padding:7px 10px;
93 - text-decoration: none;
94 - border: 1px solid #fff;
95 -}
96 -
97 -.btn{
98 - color:#fff;
99 -
100 -}
101 -.btn:hover{
102 - background: #fff;
103 - color: #000;
104 - transition: .4s;
105 -}
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <meta charset="utf-8">
5 - <title>geolocation으로 마커 표시하기</title>
6 -
7 -</head>
8 -<body>
9 -<p style="margin-top:-12px">
10 - <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
11 -</p>
12 -<div id="map" style="width:500px;height:350px;"></div>
13 -
14 -<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
15 -<script>
16 -var mapContainer = document.getElementById('map'), // 지도를 표시할 div
17 - mapOption = {
18 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
19 - level: 10 // 지도의 확대 레벨
20 - };
21 -
22 -var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
23 -
24 -// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
25 -if (navigator.geolocation) {
26 -
27 - // GeoLocation을 이용해서 접속 위치를 얻어옵니다
28 - navigator.geolocation.getCurrentPosition(function(position) {
29 -
30 - var lat = position.coords.latitude, // 위도
31 - lon = position.coords.longitude; // 경도
32 - console.log(lat);
33 - console.log(lon);
34 - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
35 - message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
36 -
37 - // 마커와 인포윈도우를 표시합니다
38 - displayMarker(locPosition, message);
39 -
40 - });
41 -
42 -} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
43 -
44 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
45 - message = 'geolocation을 사용할수 없어요..'
46 -
47 - displayMarker(locPosition, message);
48 -}
49 -
50 -
51 -var positions = [
52 - {
53 - title: '카카오',
54 - latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
55 - }
56 -];
57 -
58 -
59 -displayShows(positions);
60 -function displayShows(positions){
61 - var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
62 -
63 -for (var i = 0; i < positions.length; i ++) {
64 -
65 - // 마커 이미지의 이미지 크기 입니다
66 - var imageSize = new kakao.maps.Size(24, 35);
67 -
68 - // 마커 이미지를 생성합니다
69 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
70 -
71 - // 마커를 생성합니다
72 - var marker = new kakao.maps.Marker({
73 - map: map, // 마커를 표시할 지도
74 - position: positions[i].latlng, // 마커를 표시할 위치
75 - title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
76 - image : markerImage // 마커 이미지
77 - });
78 - }
79 -}
80 -// 지도에 마커와 인포윈도우를 표시하는 함수입니다
81 -function displayMarker(locPosition, message) {
82 -
83 - // 마커를 생성합니다
84 - var marker = new kakao.maps.Marker({
85 - map: map,
86 - position: locPosition
87 - });
88 -
89 - var iwContent = message, // 인포윈도우에 표시할 내용
90 - iwRemoveable = true;
91 -
92 - // 인포윈도우를 생성합니다
93 - var infowindow = new kakao.maps.InfoWindow({
94 - content : iwContent,
95 - removable : iwRemoveable
96 - });
97 -
98 - // 인포윈도우를 마커위에 표시합니다
99 - infowindow.open(map, marker);
100 -
101 - // 지도 중심좌표를 접속위치로 변경합니다
102 - map.setCenter(locPosition);
103 -}
104 -</script>
105 -</body>
106 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -var http = require('http');
2 -var fs = require('fs');
3 -var app = http.createServer(function(request,response){
4 - var url=request.url;
5 - if(url == '/'){
6 - url = '/mapPage.html';
7 - }
8 - response.writeHead(200);
9 - response.end(fs.readFileSync(__dirname+url));
10 -});
11 -
12 -app.listen(8080);
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8">
5 - <title> map Page title </title>
6 - </head>
7 -<body>
8 - <div id="map" style="width:500px;height:350px"></div>
9 - <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
10 -
11 - <script src="./mypos.js"></script>
12 - <script src="./show_pos.js"></script>
13 -</body>
14 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -var mapContainer = document.getElementById('map'), // 지도를 표시할 div
2 -
3 -// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
4 -mapOption = {
5 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
6 - level: 5 // 지도의 확대 레벨
7 - };
8 -
9 -var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
10 -
11 -// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
12 -if (navigator.geolocation) {
13 -
14 - // GeoLocation을 이용해서 접속 위치를 얻어옵니다
15 - navigator.geolocation.getCurrentPosition(function(position) {
16 -
17 - var lat = position.coords.latitude, // 위도
18 - lon = position.coords.longitude; // 경도
19 -
20 - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
21 - message = '<div style="padding:5px;">나의 위치!</div>'; // 인포윈도우에 표시될 내용입니다
22 -
23 - // 마커와 인포윈도우를 표시합니다
24 - displayMarker(locPosition, message);
25 -
26 - });
27 -
28 -} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
29 -
30 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
31 - message = 'geolocation을 사용할수 없어요..'
32 -
33 - displayMarker(locPosition, message);
34 -}
35 -
36 -// 지도에 마커와 인포윈도우를 표시하는 함수입니다
37 -function displayMarker(locPosition, message) {
38 -
39 - // 마커를 생성합니다
40 - var marker = new kakao.maps.Marker({
41 - map: map,
42 - position: locPosition
43 - });
44 -
45 - var iwContent = message, // 인포윈도우에 표시할 내용
46 - iwRemoveable = true;
47 -
48 - // 인포윈도우를 생성합니다
49 - var infowindow = new kakao.maps.InfoWindow({
50 - content : iwContent,
51 - removable : iwRemoveable
52 - });
53 -
54 - // 인포윈도우를 마커위에 표시합니다
55 - infowindow.open(map, marker);
56 -
57 - // 지도 중심좌표를 접속위치로 변경합니다
58 - map.setCenter(locPosition);
59 -}
...\ No newline at end of file ...\ No newline at end of file
1 -var positions = [
2 - {
3 - title: '카카오',
4 - latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
5 - }
6 -];
7 -
8 -displayShows(positions);
9 -
10 -function displayShows(positions){
11 - var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
12 -
13 -for (var i = 0; i < positions.length; i ++) {
14 -
15 - // 마커 이미지의 이미지 크기 입니다
16 - var imageSize = new kakao.maps.Size(24, 35);
17 -
18 - // 마커 이미지를 생성합니다
19 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
20 -
21 - // 마커를 생성합니다
22 - var marker = new kakao.maps.Marker({
23 - map: map, // 마커를 표시할 지도
24 - position: positions[i].latlng, // 마커를 표시할 위치
25 - title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
26 - image : markerImage // 마커 이미지
27 - });
28 - }
29 -}
...\ No newline at end of file ...\ No newline at end of file
1 -// git Ignore 할것!!!!!!!!!!!!!!!!!!!!!!
2 -{
3 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
4 - "user":"root",
5 - "password": "dldbwp1207",
6 - "port": "3306",
7 - "database": "showdata"
8 -}
...\ No newline at end of file ...\ No newline at end of file
1 -//해당 아이디를 불러와서 lat lon 받아서 지도 출력
2 -//지도 생성
3 -//해당 위치 표시
4 -
5 -const fs = require('fs');
6 -const express = require('express');
7 -
8 -const data = fs.readFileSync('./showData.json');
9 -const conf = JSON.parse(data);
10 -const mysql = require('mysql');
11 -
12 -const connection = mysql.createConnection({
13 - host: conf.host,
14 - user: conf.user,
15 - password: conf.password,
16 - port: conf.port,
17 - database: conf.database
18 -});
19 -connection.connect(); //연결
20 -
21 -app.get('위치(에 접속한 경우 쿼리를 날려준다.)')
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 -
4 -<head>
5 - <meta charset="utf-8">
6 - <title>geolocation으로 마커 표시하기</title>
7 -
8 -</head>
9 -
10 -<body>
11 - <p style="margin-top:-12px">
12 - <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
13 - </p>
14 - <div id="map" style="width:500px;height:350px;"></div>
15 -
16 - <script type="text/javascript"
17 - src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
18 - <script>
19 -
20 - const near = require('study.js');
21 -
22 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
23 - mapOption = {
24 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
25 - level: 10 // 지도의 확대 레벨
26 - };
27 -
28 - var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
29 -
30 - // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
31 - if (navigator.geolocation) {
32 -
33 - // GeoLocation을 이용해서 접속 위치를 얻어옵니다
34 - navigator.geolocation.getCurrentPosition(function (position) {
35 -
36 - var lat = position.coords.latitude, // 위도
37 - lon = position.coords.longitude; // 경도
38 - console.log(lat);
39 - console.log(lon);
40 - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
41 - message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
42 -
43 - // 마커와 인포윈도우를 표시합니다
44 - displayMarker(locPosition, message);
45 -
46 - });
47 -
48 - } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
49 -
50 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
51 - message = 'geolocation을 사용할수 없어요..'
52 -
53 - displayMarker(locPosition, message);
54 - }
55 -
56 -
57 -
58 -
59 - displayShows();
60 - function displayShows() {
61 - var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
62 - var near_list = near(lat, lon);
63 - var positions = [];
64 - for (var i = 0; i < near_list.length; i++) {
65 - positions.push({
66 - title: id,
67 - lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
68 - })
69 - }
70 - for (var i = 0; i < positions.length; i++) {
71 -
72 - // 마커 이미지의 이미지 크기 입니다
73 - var imageSize = new kakao.maps.Size(24, 35);
74 -
75 - // 마커 이미지를 생성합니다
76 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
77 -
78 - // 마커를 생성합니다
79 - var marker = new kakao.maps.Marker({
80 - map: map, // 마커를 표시할 지도
81 - position: positions[i].latlng, // 마커를 표시할 위치
82 - title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
83 - image: markerImage // 마커 이미지
84 - });
85 - }
86 - }
87 - // 지도에 마커와 인포윈도우를 표시하는 함수입니다
88 - function displayMarker(locPosition, message) {
89 -
90 - // 마커를 생성합니다
91 - var marker = new kakao.maps.Marker({
92 - map: map,
93 - position: locPosition
94 - });
95 -
96 - var iwContent = message, // 인포윈도우에 표시할 내용
97 - iwRemoveable = true;
98 -
99 - // 인포윈도우를 생성합니다
100 - var infowindow = new kakao.maps.InfoWindow({
101 - content: iwContent,
102 - removable: iwRemoveable
103 - });
104 -
105 - // 인포윈도우를 마커위에 표시합니다
106 - infowindow.open(map, marker);
107 -
108 - // 지도 중심좌표를 접속위치로 변경합니다
109 - map.setCenter(locPosition);
110 - }
111 - </script>
112 -</body>
113 -
114 -</html>
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 -var mysql = require('mysql');
2 -var near_show_list = [];
3 -var connection = mysql.createConnection({
4 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
5 - "user": "root",
6 - "password": "dldbwp1207",
7 - "port": "3306",
8 - "database": "showdata"
9 -});
10 -
11 -connection.connect();
12 -
13 -// 데이터 길이 파악 //
14 -var dataNum=0;
15 -connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
16 - if (error) {
17 - console.log(error);
18 - }
19 - dataNum = results[0].cnt;
20 - console.log(dataNum);
21 -});
22 -
23 -connection.query('SELECT start_day FROM SHOW_DATA WHERE start_day>=2021/01/01 ORDER BY start_day',function(error,results,field){
24 - if(error){
25 - console.log(error);
26 - }
27 - console.log(results);
28 -})
29 -
30 -connection.end();
...\ No newline at end of file ...\ No newline at end of file
1 -var mysql = require('mysql');
2 -
3 -module.exports = {
4 - nearShow: function (lat, lon) {
5 - var near_show_list = [];
6 - var connection = mysql.createConnection({
7 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
8 - "user": "root",
9 - "password": "dldbwp1207",
10 - "port": "3306",
11 - "database": "showdata"
12 - });
13 -
14 - connection.connect();
15 - var dataNum = 0;
16 - connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
17 - if (error) {
18 - console.log(error);
19 - }
20 - console.log(results[0].cnt);
21 - dataNum = results[0].cnt;
22 - });
23 -
24 - connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
25 - if (error) {
26 - console.log(error);
27 - }
28 - console.log([lat, lon]);
29 - for (var i = 0; i < dataNum; i++) {
30 - var latgap = (lat - results[i].latitude) * 110;
31 - var longap = (lon - results[i].longitude) * 91;
32 - var cal = latgap * latgap + longap * longap;
33 - if (cal <= 1600) {
34 - console.log(results[i].id);
35 - near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
36 - }
37 - }
38 - });
39 -
40 - connection.end();
41 - // return near_show_list;
42 - }
43 -}
This diff is collapsed. Click to expand it.
1 +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 +*{
3 + margin: 0;
4 + padding: 0;
5 + box-sizing: border-box;
6 + font-family: 'Poppins', sans-serif;
7 +}
8 +html,body{
9 + display: grid;
10 + height: 100%;
11 + place-items: center;
12 + background: #664AFF;
13 +}
14 +::selection{
15 + color: #fff;
16 + background: #664AFF;
17 +}
18 +.search-box{
19 + position: relative;
20 + height: 60px;
21 + width: 60px;
22 + border-radius: 50%;
23 + box-shadow: 5px 5px 30px rgba(0,0,0,.2);
24 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
25 +}
26 +.search-box.active{
27 + width: 350px;
28 +}
29 +.search-box input{
30 + width: 100%;
31 + height: 100%;
32 + border: none;
33 + border-radius: 50px;
34 + background: #fff;
35 + outline: none;
36 + padding: 0 60px 0 20px;
37 + font-size: 18px;
38 + opacity: 0;
39 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
40 +}
41 +.search-box input.active{
42 + opacity: 1;
43 +}
44 +.search-box input::placeholder{
45 + color: #a6a6a6;
46 +}
47 +.search-box .search-icon{
48 + position: absolute;
49 + right: 0px;
50 + top: 50%;
51 + transform: translateY(-50%);
52 + height: 60px;
53 + width: 60px;
54 + background: #fff;
55 + border-radius: 50%;
56 + text-align: center;
57 + line-height: 60px;
58 + font-size: 22px;
59 + color: #664AFF;
60 + cursor: pointer;
61 + z-index: 1;
62 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
63 +}
64 +.search-box .search-icon.active{
65 + right: 5px;
66 + height: 50px;
67 + line-height: 50px;
68 + width: 50px;
69 + font-size: 20px;
70 + background: #664AFF;
71 + color: #fff;
72 + transform: translateY(-50%) rotate(360deg);
73 +}
74 +.search-box .cancel-icon{
75 + position: absolute;
76 + right: 20px;
77 + top: 50%;
78 + transform: translateY(-50%);
79 + font-size: 25px;
80 + color: #fff;
81 + cursor: pointer;
82 + transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
83 +}
84 +.search-box .cancel-icon.active{
85 + right: -40px;
86 + transform: translateY(-50%) rotate(360deg);
87 +}
88 +.search-box .search-data{
89 + text-align: center;
90 + padding-top: 7px;
91 + color: #fff;
92 + font-size: 18px;
93 + word-wrap: break-word;
94 +}
95 +.search-box .search-data.active{
96 + display: none;
97 +}
1 -* 1 +@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 -{ 2 +*{
3 margin: 0; 3 margin: 0;
4 padding: 0; 4 padding: 0;
5 + box-sizing: border-box;
6 + font-family: 'Poppins', sans-serif;
5 } 7 }
6 - 8 +.search-box{
9 + position: relative;
10 + height: 60px;
11 + width: 60px;
12 + border-radius: 50%;
13 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
14 + }
15 + /* //박스 길이 조절 */
16 + .search-box.active{
17 + width: 700px;
18 + }
19 + .search-box input{
20 + width: 100%;
21 + height: 100%;
22 + border: none;
23 + border-radius: 50px;
24 + background: #fff;
25 + outline: none;
26 + padding: 0 60px 0 20px;
27 + font-size: 18px;
28 + opacity: 0;
29 + transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
30 + }
31 + /* 불투명도 */
32 + .search-box input.active{
33 + opacity: 1;
34 + }
35 + .search-box input::placeholder{
36 + color: #a6a6a6;
37 + }
38 + .search-box .search-icon{
39 + position: absolute;
40 + /* 버튼위치 */
41 + right: -380px;
42 + top: 50%;
43 + transform: translateY(-50%);
44 + height: 60px;
45 + width: 60px;
46 + background: #fff;
47 + border-radius: 50%;
48 + text-align: center;
49 + line-height: 60px;
50 + font-size: 22px;
51 + color: #CB25FF;
52 + cursor: pointer;
53 + z-index: 1;
54 + /* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
55 + /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
56 + transition-timing-function: linear;
57 + }
58 + .search-box .search-icon.active{
59 + right: 5px;
60 + height: 50px;
61 + line-height: 50px;
62 + width: 50px;
63 + font-size: 20px;
64 + background: #CB25FF;
65 + color: #fff;
66 + transform: translateY(-50%) rotate(360deg);
67 + }
68 + .search-box .cancel-icon{
69 + position: absolute;
70 + right: -380px;
71 + top: 50%;
72 + transform: translateY(-50%);
73 + font-size: 25px;
74 + color: #fff;
75 + cursor: pointer;
76 + /* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
77 + /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
78 + transition-timing-function: linear;
79 + }
80 + .search-box .cancel-icon.active{
81 + right: -40px;
82 + }
83 + .search-box .search-data{
84 + text-align: center;
85 + padding-top: 7px;
86 + color: #fff;
87 + font-size: 18px;
88 + word-wrap: break-word;
89 + }
90 + .search-box .search-data.active{
91 + display: none;
92 + }
7 header 93 header
8 { 94 {
9 background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg); 95 background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
...@@ -73,11 +159,15 @@ header ...@@ -73,11 +159,15 @@ header
73 } 159 }
74 160
75 .welcome{ 161 .welcome{
76 - position:relative; 162 + position: absolute;
163 + top:50%;
164 + left: 50%;
165 + width: 700px; height: 160px;
166 + margin-top: -80px;
167 + margin-left: -350px;
77 text-align:center; 168 text-align:center;
78 font-family: sans-serif; 169 font-family: sans-serif;
79 color:#fff; 170 color:#fff;
80 - top: 30%;
81 } 171 }
82 172
83 .welcome h1{ 173 .welcome h1{
...@@ -103,3 +193,4 @@ header ...@@ -103,3 +193,4 @@ header
103 color: #000; 193 color: #000;
104 transition: .4s; 194 transition: .4s;
105 } 195 }
196 +
......
1 <html> 1 <html>
2 2
3 <head> 3 <head>
4 - <title>로그인 페이지</title> 4 + <title>Culture Gallery</title>
5 <link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css"> 5 <link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
6 <script src="https://developers.kakao.com/sdk/js/kakao.js"></script> 6 <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 7
......
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <title>login main page title</title>
5 - </head>
6 -</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
9 <header> 9 <header>
10 <div class="nav-bar"> 10 <div class="nav-bar">
11 <img src="../images/camera.png" alt="" class="logo"> 11 <img src="../images/camera.png" alt="" class="logo">
12 -
13 <ul class="menu"> 12 <ul class="menu">
14 <li><a href="">Home</a></li> 13 <li><a href="">Home</a></li>
15 <li><a href="">Services</a></li> 14 <li><a href="">Services</a></li>
...@@ -18,17 +17,14 @@ ...@@ -18,17 +17,14 @@
18 <li><a href="">Career</a></li> 17 <li><a href="">Career</a></li>
19 <li><a href="">Contact</a></li> 18 <li><a href="">Contact</a></li>
20 </ul> 19 </ul>
21 -
22 </div> 20 </div>
21 + </header>
23 <div class="welcome"> 22 <div class="welcome">
24 -
25 <h1>어떤 공연을 찾으시나요?</h1> 23 <h1>어떤 공연을 찾으시나요?</h1>
26 - <a href="#" class="btn btn1">나의 근처 공연</a> 24 + <a href="mappage" class="btn btn1">나의 근처 공연</a>
27 <a href="#" class="btn btn2">검색하기</a> 25 <a href="#" class="btn btn2">검색하기</a>
28 <a href="login" class="btn btn3">로그인</a> 26 <a href="login" class="btn btn3">로그인</a>
29 </div> 27 </div>
30 -
31 - </header>
32 </body> 28 </body>
33 29
34 </html> 30 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -<!DOCTYPE html>
2 -<html>
3 -
4 -<head>
5 - <meta charset="utf-8">
6 - <title>geolocation으로 마커 표시하기</title>
7 -
8 -</head>
9 -
10 -<body>
11 - <p style="margin-top:-12px">
12 - <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
13 - </p>
14 - <div id="map" style="width:500px;height:350px;"></div>
15 -
16 - <script type="text/javascript"
17 - src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
18 - <script>
19 - var mysql = require('mysql');
20 -
21 - var mapContainer = document.getElementById('map'), // 지도를 표시할 div
22 - mapOption = {
23 - center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
24 - level: 10 // 지도의 확대 레벨
25 - };
26 -
27 - var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
28 -
29 - // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
30 - if (navigator.geolocation) {
31 -
32 - // GeoLocation을 이용해서 접속 위치를 얻어옵니다
33 - navigator.geolocation.getCurrentPosition(function (position) {
34 -
35 - var lat = position.coords.latitude, // 위도
36 - lon = position.coords.longitude; // 경도
37 - console.log(lat);
38 - console.log(lon);
39 - var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
40 - message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
41 -
42 - // 마커와 인포윈도우를 표시합니다
43 - displayMarker(locPosition, message);
44 - });
45 -
46 - } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
47 -
48 - var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
49 - message = 'geolocation을 사용할수 없어요..'
50 -
51 - displayMarker(locPosition, message);
52 - }
53 -
54 - /////////// sql 데이터 불러옴 /////////////////
55 - var near_show_list = [];
56 - var connection = mysql.createConnection({
57 - "host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
58 - "user": "root",
59 - "password": "dldbwp1207",
60 - "port": "3306",
61 - "database": "showdata"
62 - });
63 -
64 - connection.connect();
65 - var dataNum = 0;
66 - connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
67 - if (error) {
68 - console.log(error);
69 - }
70 - console.log(results[0].cnt);
71 - dataNum = results[0].cnt;
72 - });
73 -
74 - connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
75 - if (error) {
76 - console.log(error);
77 - }
78 - console.log([lat, lon]);
79 - for (var i = 0; i < dataNum; i++) {
80 - var latgap = (lat - results[i].latitude) * 110;
81 - var longap = (lon - results[i].longitude) * 91;
82 - var cal = latgap * latgap + longap * longap;
83 -
84 - //내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
85 - if (cal <= 1600) {
86 - console.log(results[i].id);
87 - near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
88 - }
89 - }
90 - });
91 -
92 - connection.end();
93 - ////////////////////////////////////////////////
94 -
95 -
96 - displayShows(near_show_list);
97 - //// displayShows() 정의 ////
98 - function displayShows(near_list) {
99 - var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
100 - var kakao_near_list = [];
101 - for (var i = 0; i < near_list.length; i++) {
102 - kakao_near_list.push({
103 - title: id,
104 - lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
105 - })
106 - }
107 - for (var i = 0; i < kakao_near_list.length; i++) {
108 -
109 - // 마커 이미지의 이미지 크기 입니다
110 - var imageSize = new kakao.maps.Size(24, 35);
111 -
112 - // 마커 이미지를 생성합니다
113 - var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
114 -
115 - // 마커를 생성합니다
116 - var marker = new kakao.maps.Marker({
117 - map: map, // 마커를 표시할 지도
118 - position: kakao_near_list[i].latlng, // 마커를 표시할 위치
119 - title: kakao_near_list[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
120 - image: markerImage // 마커 이미지
121 - });
122 - }
123 - }
124 -
125 - /// displayMarker 함수 정의 ///
126 - // 지도에 마커와 인포윈도우를 표시하는 함수입니다
127 - function displayMarker(locPosition, message) {
128 -
129 - // 마커를 생성합니다
130 - var marker = new kakao.maps.Marker({
131 - map: map,
132 - position: locPosition
133 - });
134 -
135 - var iwContent = message, // 인포윈도우에 표시할 내용
136 - iwRemoveable = true;
137 -
138 - // 인포윈도우를 생성합니다
139 - var infowindow = new kakao.maps.InfoWindow({
140 - content: iwContent,
141 - removable: iwRemoveable
142 - });
143 -
144 - // 인포윈도우를 마커위에 표시합니다
145 - infowindow.open(map, marker);
146 -
147 - // 지도 중심좌표를 접속위치로 변경합니다
148 - map.setCenter(locPosition);
149 - }
150 - </script>
151 -</body>
152 -
153 -</html>
...\ No newline at end of file ...\ No newline at end of file