-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (131 loc) · 5.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width"/>
<title>test</title>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=uDg8DaCVRq5KnivRwm3z"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:799px)" href="./css/mobile.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" href="./css/desktop.css">
</head>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<body>
hello hello world im pdsss
<div class="pg">
<header class="head">
<h1>media art design</h1>
</header>
<a id="kakao-login-btn"></a>
<a href="http://developers.kakao.com/logout">데브로그아웃</a>
<p onclick="logout();">바로로그아웃</p>
<p onclick="getToken();">토큰확인</p>
<script type='text/javascript'>
function logout(){
alert("fff");
Kakao.Auth.logout();
}
function getToken(){
var accessToken=Kakao.Auth.getAccessToken()
var refreshToken=Kakao.Auth.getRefreshToken()
alert(accessToken+",,"+refreshToken);
}
//<![CDATA[
// 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('61b64f0d22f150715ff1e73b874515d3');
// 카카오 로그인 버튼을 생성합니다.
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function(authObj) {
Kakao.API.request({
url: '/v1/user/me',
success: function(res) {
var email=res.kaccount_email
var nickname=res.properties.nickname;
var photo=res.properties.profile_image;
$("#profile").attr("src",photo);
},
fail: function(error) {
alert(JSON.stringify(error));
}
});
},
fail: function(err) {
alert(JSON.stringify(err));
}
});
//]]>
</script>
<article class="pg-main">
<section class="entries">
<img id="profile" src=""/>
<h2>브라우저의 너비를 800px 미만으로 줄여보세요</h2>
<p class="pcview_only"> 이 문장은 pc화면에서만 보입니다...이 문장은 pc화면에서만 보입니다... 이 문장은 pc화면에서만 보입니다...
</p>
<p>이 문장은 모든 디바이스에서 보입니다...이 문장은 모든 디바이스에서 보입니다...이 문장은 모든 디바이스에서 보입니다...
</p>
<hr/>
<h2>반대로 브라우저의 너비를 800px 이상으로 늘려보세요</h2>
<p class="pcview_only">이 문장은 모든 디바이스 화면에서...</p>
<p class="pcview_only"> 이 문장은 모든 디바이스 화면에서...</p>
</section>
<nav class="sidebar">
<h3>SNS registration</h3>
<ul>
<li><a href="#">facebook</a></li>
<li><a href="#">twitter</a></li>
</ul>
<h3>카테고리</h3>
<ul>
<li><a href="#">digital art</a></li>
<li><a href="#">sound art</a></li>
<li><a href="#">information visualize art</a></li>
<li><a href="#">new media art</a></li>
</ul>
</nav>
</article>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 5,
mapTypeId: naver.maps.MapTypeId.NORMAL
};
var map = new naver.maps.Map('map', mapOptions);
var infowindow = new naver.maps.InfoWindow();
function onSuccessGeolocation(position) {
var location = new naver.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(location); // 얻은 좌표를 지도의 중심으로 설정합니다.
map.setZoom(10); // 지도의 줌 레벨을 변경합니다.
infowindow.setContent('<div style="padding:20px;"><p style="margin-bottom:5px;color:#f00;"> '+position.coords.latitude+' long'+position.coords.longitude+'</p></div>');
infowindow.open(map, location);
}
function onErrorGeolocation() {
var center = map.getCenter();
infowindow.setContent('<div style="padding:20px;">' +
'<h5 style="margin-bottom:5px;color:#f00;">Geolocation failed!</h5>'+ "latitude: "+ center.lat() +"<br /><h5>longitude: "+ center.lng() +'</h5></div>');
infowindow.open(map, center);
infowindow.setContent('<p>issssssssssssssng...</p>');
infowindow.open(map, location);
}
$(window).on("load", function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onSuccessGeolocation, onErrorGeolocation);
} else {
var center = map.getCenter();
infowindow.setContent('<div style="padding:20px;"><h5 style="margin-bottom:5px;color:#f00;">Geolocation not supported</h5>'+ "latitude: "+ center.lat() +"<br />longitude: "+ center.lng() +'</div>');
infowindow.open(map, center);
}
});
</script>
<footer class="foot">
<p>Copyright</p>
</footer>
</div>
</body>
</html>