이유제 / 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 372 additions and 878 deletions
......@@ -24,7 +24,6 @@ app.get('/logout', function (req, res) {
res.send("Logout success");
});
app.listen(app.get('port'), () => {
console.log(`Server is running at ${app.get('port')}`);
});
......
const searchBox = document.querySelector(".search-box");
const searchBtn = document.querySelector(".search-icon");
const cancelBtn = document.querySelector(".cancel-icon");
const searchInput = document.querySelector("input");
const searchData = document.querySelector(".search-data");
searchBtn.onclick = () => {
searchBox.classList.add("active");
searchBtn.classList.add("active");
searchInput.classList.add("active");
cancelBtn.classList.add("active");
searchInput.focus();
if (searchInput.value != "") {
var values = searchInput.value;
searchData.classList.remove("active");
searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
} else {
searchData.textContent = "";
}
}
cancelBtn.onclick = () => {
searchBox.classList.remove("active");
searchBtn.classList.remove("active");
searchInput.classList.remove("active");
cancelBtn.classList.remove("active");
searchData.classList.toggle("active");
searchInput.value = "";
}
\ No newline at end of file
This diff is collapsed. Click to expand it.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000000;
}
.search-box{
position: relative;
height: 60px;
width: 60px;
border-radius: 50%;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* //박스 길이 조절 */
.search-box.active{
width: 700px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
border-radius: 50px;
background: #fff;
outline: none;
padding: 0 60px 0 20px;
font-size: 18px;
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* 불투명도 */
.search-box input.active{
opacity: 1;
}
.search-box input::placeholder{
color: #a6a6a6;
}
.search-box .search-icon{
position: absolute;
/* 버튼위치 */
right: -380px;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 22px;
color: #CB25FF;
cursor: pointer;
z-index: 1;
/* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
/* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
transition-timing-function: linear;
}
.search-box .search-icon.active{
right: 5px;
height: 50px;
line-height: 50px;
width: 50px;
font-size: 20px;
background: #CB25FF;
color: #fff;
transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
position: absolute;
right: -380px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
color: #fff;
cursor: pointer;
/* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
/* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
transition-timing-function: linear;
}
.search-box .cancel-icon.active{
right: -40px;
}
.search-box .search-data{
text-align: center;
padding-top: 7px;
color: #fff;
font-size: 18px;
word-wrap: break-word;
}
.search-box .search-data.active{
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>검색창 애니메이션</title>
</head>
<body>
<div class="searchBtn">
<link rel="stylesheet" href="btnstyle.css">
<script src="btnsource.js"></script>
<div class="search-box">
<input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
<!-- encoded function for activating search-bar in lisensed resouce -->
<div class="search-icon">
<i class="fas fa-search"></i>
</div>
<div class="cancel-icon">
<i class="fas fa-times"></i>
</div>
<div class="search-data"></div>
</div>
<script src="btnClickEvent.js"></script>
</div>
</body>
</html>
\ No newline at end of file
<div class="searchBtn">
<link rel="stylesheet" href="btnstyle.css">
<script src="btnsource.js"></script>
<div class="search-box">
<input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
<!-- encoded function for activating search-bar in lisensed resouce -->
<div class="search-icon">
<i class="fas fa-search"></i>
</div>
<div class="cancel-icon">
<i class="fas fa-times"></i>
</div>
<div class="search-data"></div>
</div>
<script src="btnClickEvent.js"></script>
</div>
\ No newline at end of file
const express = require('express');
const app = express();
app.get('/', (req, res) => {
//res.send('API SERVER IS WORKING');
console.log("api.js 실행");
});
\ No newline at end of file
const express = require('express');
const router = express.Router();
router.get('/', function (req, res) {
res.send("모든 공연 정보 리스트 반환")
});
module.exports = router;
\ No newline at end of file
<html>
<head>
<title>로그인 페이지</title>
<link rel="stylesheet" href="login_style.css" type="text/css">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<header>
<div class="nav-bar">
<img src="camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="welcome">
<h1>로그인</h1>
<a id="kakao-login-btn"></a>
</div>
</header>
</body>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
console.log(Kakao.isInitialized());
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function (authObj) {
console.log(JSON.stringify(authObj));
alert(JSON.stringify(authObj));//authObj -> 토큰임.
},
fail: function (err) {
alert(JSON.stringify(err));
}
})
</script>
</html>
\ No newline at end of file
*
{
margin: 0;
padding: 0;
}
.nav-bar
{
background: #000;
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
}
.menu{
float: right;
list-style: none;
margin:20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border: 1px solid #fff;
}
.menu li a:hover{
background: #fff;
transition: .4s;
color: #000;
}
.welcome{
position:relative;
text-align:center;
font-family: sans-serif;
color:#000;
top: 300px;
}
.welcome h1{
font-size: 42px;
margin: 25px;
}
<html>
<head>
<title>Webpage Design In HTML and CSS</title>
<link rel="stylesheet" href="main_style.css" type="text/css">
</head>
<body>
<header>
<div class="nav-bar">
<img src="camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="welcome">
<h1>어떤 공연을 찾으시나요?</h1>
<a href="#" class="btn btn1">나의 근처 공연</a>
<a href="#" class="btn btn2">검색하기</a>
<a href="login.html" class="btn btn3">로그인</a>
</div>
</header>
</body>
</html>
\ No newline at end of file
*
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 5s;
animation-name: animate;
animation-direction: alternate-reverse;
animation-duration: 30s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function:ease-in-out;
}
@keyframes animate{
0%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
}
33%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back2.jpg);
}
66%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back3.jpg);
}
}
.nav-bar
{
background: rgb(0,0,0,0.5);
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
}
.menu{
float: right;
list-style: none;
margin:20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border: 1px solid #fff;
}
.menu li a:hover{
background: #fff;
transition: .4s;
color: #000;
}
.welcome{
position:relative;
text-align:center;
font-family: sans-serif;
color:#fff;
top: 300px;
}
.welcome h1{
font-size: 42px;
margin: 25px;
}
.btn{
font-size:18px;
letter-spacing: 2px;
margin:5px;
padding:7px 10px;
text-decoration: none;
border: 1px solid #fff;
}
.btn{
color:#fff;
}
.btn:hover{
background: #fff;
color: #000;
transition: .4s;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>geolocation으로 마커 표시하기</title>
</head>
<body>
<p style="margin-top:-12px">
<b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>
<div id="map" style="width:500px;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
console.log(lat);
console.log(lon);
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
var positions = [
{
title: '카카오',
latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
}
];
displayShows(positions);
function displayShows(positions){
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
});
}
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
</script>
</body>
</html>
\ No newline at end of file
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url=request.url;
if(url == '/'){
url = '/mapPage.html';
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname+url));
});
app.listen(8080);
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> map Page title </title>
</head>
<body>
<div id="map" style="width:500px;height:350px"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script src="./mypos.js"></script>
<script src="./show_pos.js"></script>
</body>
</html>
\ No newline at end of file
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">나의 위치!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
\ No newline at end of file
var positions = [
{
title: '카카오',
latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
}
];
displayShows(positions);
function displayShows(positions){
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
});
}
}
\ No newline at end of file
// git Ignore 할것!!!!!!!!!!!!!!!!!!!!!!
{
"host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
"user":"root",
"password": "dldbwp1207",
"port": "3306",
"database": "showdata"
}
\ No newline at end of file
//해당 아이디를 불러와서 lat lon 받아서 지도 출력
//지도 생성
//해당 위치 표시
const fs = require('fs');
const express = require('express');
const data = fs.readFileSync('./showData.json');
const conf = JSON.parse(data);
const mysql = require('mysql');
const connection = mysql.createConnection({
host: conf.host,
user: conf.user,
password: conf.password,
port: conf.port,
database: conf.database
});
connection.connect(); //연결
app.get('위치(에 접속한 경우 쿼리를 날려준다.)')
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>geolocation으로 마커 표시하기</title>
</head>
<body>
<p style="margin-top:-12px">
<b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>
<div id="map" style="width:500px;height:350px;"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script>
const near = require('study.js');
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
console.log(lat);
console.log(lon);
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
displayShows();
function displayShows() {
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var near_list = near(lat, lon);
var positions = [];
for (var i = 0; i < near_list.length; i++) {
positions.push({
title: id,
lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
})
}
for (var i = 0; i < positions.length; i++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage // 마커 이미지
});
}
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: iwContent,
removable: iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed. Click to expand it.
var mysql = require('mysql');
var near_show_list = [];
var connection = mysql.createConnection({
"host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
"user": "root",
"password": "dldbwp1207",
"port": "3306",
"database": "showdata"
});
connection.connect();
// 데이터 길이 파악 //
var dataNum=0;
connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
dataNum = results[0].cnt;
console.log(dataNum);
});
connection.query('SELECT start_day FROM SHOW_DATA WHERE start_day>=2021/01/01 ORDER BY start_day',function(error,results,field){
if(error){
console.log(error);
}
console.log(results);
})
connection.end();
\ No newline at end of file
var mysql = require('mysql');
module.exports = {
nearShow: function (lat, lon) {
var near_show_list = [];
var connection = mysql.createConnection({
"host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
"user": "root",
"password": "dldbwp1207",
"port": "3306",
"database": "showdata"
});
connection.connect();
var dataNum = 0;
connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log(results[0].cnt);
dataNum = results[0].cnt;
});
connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log([lat, lon]);
for (var i = 0; i < dataNum; i++) {
var latgap = (lat - results[i].latitude) * 110;
var longap = (lon - results[i].longitude) * 91;
var cal = latgap * latgap + longap * longap;
if (cal <= 1600) {
console.log(results[i].id);
near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
}
}
});
connection.end();
// return near_show_list;
}
}
This diff is collapsed. Click to expand it.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #664AFF;
}
::selection{
color: #fff;
background: #664AFF;
}
.search-box{
position: relative;
height: 60px;
width: 60px;
border-radius: 50%;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box.active{
width: 350px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
border-radius: 50px;
background: #fff;
outline: none;
padding: 0 60px 0 20px;
font-size: 18px;
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box input.active{
opacity: 1;
}
.search-box input::placeholder{
color: #a6a6a6;
}
.search-box .search-icon{
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 22px;
color: #664AFF;
cursor: pointer;
z-index: 1;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .search-icon.active{
right: 5px;
height: 50px;
line-height: 50px;
width: 50px;
font-size: 20px;
background: #664AFF;
color: #fff;
transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
color: #fff;
cursor: pointer;
transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .cancel-icon.active{
right: -40px;
transform: translateY(-50%) rotate(360deg);
}
.search-box .search-data{
text-align: center;
padding-top: 7px;
color: #fff;
font-size: 18px;
word-wrap: break-word;
}
.search-box .search-data.active{
display: none;
}
*
{
margin: 0;
padding: 0;
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.search-box{
position: relative;
height: 60px;
width: 60px;
border-radius: 50%;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* //박스 길이 조절 */
.search-box.active{
width: 700px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
border-radius: 50px;
background: #fff;
outline: none;
padding: 0 60px 0 20px;
font-size: 18px;
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* 불투명도 */
.search-box input.active{
opacity: 1;
}
.search-box input::placeholder{
color: #a6a6a6;
}
.search-box .search-icon{
position: absolute;
/* 버튼위치 */
right: -380px;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 22px;
color: #CB25FF;
cursor: pointer;
z-index: 1;
/* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
/* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
transition-timing-function: linear;
}
.search-box .search-icon.active{
right: 5px;
height: 50px;
line-height: 50px;
width: 50px;
font-size: 20px;
background: #CB25FF;
color: #fff;
transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
position: absolute;
right: -380px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
color: #fff;
cursor: pointer;
/* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
/* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
transition-timing-function: linear;
}
.search-box .cancel-icon.active{
right: -40px;
}
.search-box .search-data{
text-align: center;
padding-top: 7px;
color: #fff;
font-size: 18px;
word-wrap: break-word;
}
.search-box .search-data.active{
display: none;
}
header
{
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
}
.welcome{
position:relative;
position: absolute;
top:50%;
left: 50%;
width: 700px; height: 160px;
margin-top: -80px;
margin-left: -350px;
text-align:center;
font-family: sans-serif;
color:#fff;
top: 30%;
}
.welcome h1{
......@@ -102,4 +192,5 @@ header
background: #fff;
color: #000;
transition: .4s;
}
\ No newline at end of file
}
......
<html>
<head>
<title>로그인 페이지</title>
<title>Culture Gallery</title>
<link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
......
<!DOCTYPE html>
<html>
<head>
<title>login main page title</title>
</head>
</html>
\ No newline at end of file
......@@ -9,7 +9,6 @@
<header>
<div class="nav-bar">
<img src="../images/camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
......@@ -18,17 +17,14 @@
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="welcome">
<h1>어떤 공연을 찾으시나요?</h1>
<a href="#" class="btn btn1">나의 근처 공연</a>
<a href="#" class="btn btn2">검색하기</a>
<a href="login" class="btn btn3">로그인</a>
</div>
</header>
<div class="welcome">
<h1>어떤 공연을 찾으시나요?</h1>
<a href="mappage" class="btn btn1">나의 근처 공연</a>
<a href="#" class="btn btn2">검색하기</a>
<a href="login" class="btn btn3">로그인</a>
</div>
</body>
</html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>geolocation으로 마커 표시하기</title>
</head>
<body>
<p style="margin-top:-12px">
<b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>
<div id="map" style="width:500px;height:350px;"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script>
var mysql = require('mysql');
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
console.log(lat);
console.log(lon);
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
/////////// sql 데이터 불러옴 /////////////////
var near_show_list = [];
var connection = mysql.createConnection({
"host": "culturegallery.cm2bwcuyukrm.us-east-1.rds.amazonaws.com",
"user": "root",
"password": "dldbwp1207",
"port": "3306",
"database": "showdata"
});
connection.connect();
var dataNum = 0;
connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log(results[0].cnt);
dataNum = results[0].cnt;
});
connection.query('SELECT id,latitude,longitude FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log([lat, lon]);
for (var i = 0; i < dataNum; i++) {
var latgap = (lat - results[i].latitude) * 110;
var longap = (lon - results[i].longitude) * 91;
var cal = latgap * latgap + longap * longap;
//내 위치 반경 키로수 ^ 2만큼 cal 값 push -> content 위치
if (cal <= 1600) {
console.log(results[i].id);
near_show_list.push([results[i].id, results[i].latitude, results[i].longitude]);
}
}
});
connection.end();
////////////////////////////////////////////////
displayShows(near_show_list);
//// displayShows() 정의 ////
function displayShows(near_list) {
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var kakao_near_list = [];
for (var i = 0; i < near_list.length; i++) {
kakao_near_list.push({
title: id,
lating: new kakao.maps.Lating(near_list[i][1], near_list[i][2])
})
}
for (var i = 0; i < kakao_near_list.length; i++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: kakao_near_list[i].latlng, // 마커를 표시할 위치
title: kakao_near_list[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage // 마커 이미지
});
}
}
/// displayMarker 함수 정의 ///
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: iwContent,
removable: iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
</script>
</body>
</html>
\ No newline at end of file