<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ko">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
        
        <title>SNS 연동하기</title>
    </head>
    
    <style type="text/css">
        /* base */
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;}
        fieldset,img{border:0 none;}
        dl,ul,ol,menu,li{list-style:none;}
        blockquote,q{quotes:none;}
        blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
        input,select,textarea,button{font-size:100%;vertical-align:middle;}
        button{border:0 none;background-color:transparent;cursor:pointer;}
        table{border-collapse:collapse;border-spacing:0;}
        body{-webkit-text-size-adjust:none;}
        input[type=text],input[type=password],input[type=submit],input[type=search]{-webkit-appearance:none;border-radius:0;}
        input:checked[type=checkbox]{background-color:#666;-webkit-appearance:checkbox;}
        button,html input[type=button],input[type=submit],input[type=reset],input[type=file]{-webkit-appearance:button;border-radius:0;}
        body{background-color:#fff;}
        a{color:#444;text-decoration:none;}
        a:active,a:hover{text-decoration:none;}
        address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400;}
        body,th,td,input,select,textarea,button{font-size:14px;line-height:1.5;font-family:'Malgun Gothic',dotum,sans-serif;color:#444;}
        header,footer{display:block;}
        img {vertical-align:top;}
        
        /* layout */
        .logo {text-align:center;}
        .haeder {background:#fff;}
        .content {padding:0 0;}
        .body_st {background:#fff;}
        
        /* common */
        .dot {padding-left:8px;}
        .box_inp {overflow:hidden;padding-right:8px;padding-left:8px;height:35px;background:#fff;border:1px solid #7ca7a2;}
        .inp_txt {width:100%;height:20px;margin-top:7px;line-height:20px;color:#404040;border:0 none;vertical-align:top;}
        
        /* �대찓�쇱씤利� */
        .info {width:300px;margin:0 auto;padding:0 10px;}
        .info p {line-height:18px;vertical-align:middle;}
        .info .dot {padding-bottom:15px;color:#000000;}
        .info .caution {color:#7cbeb7;padding:13px 0 25px 0;}
        .btn_area {width:320px;margin:0 auto;padding-bottom:20px;text-align:center;}
        .btn_area .btn {margin:0 1px;}
        
        .wrap_popup {position:absolute;width:100%;left:0;top:0;z-index:5;}
        .wrap_popup .deamd {width:100%;height:100%;background:#1f1f1f;filter:alpha(opacity='30');opacity:0.3;}
        .popup {position:absolute;border:4px solid #3fd3c6;border-radius:8px;z-index:10;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);}
        .popup .inpop {overflow:hidden;width:268px;border-radius:4px;background:#fff;}
        .popup .msg {margin:20px;font-size:14px;line-height:18px;letter-spacing:-1px;}
        .popup .msg .point {color:#3fd3c6;}
        .popup .msg .txt {margin-bottom:10px;}
        .popup .msg .space {margin-bottom:15px;}
        .popup .msg .btn_pop_area {text-align:center;}
        .popup .msg .btn_pop_area .btn {margin:0 2px;}
        
        @media all and (max-width:400px) {
            .dot {padding-left:8px;}
            .inp_txt {width:100%;height:20px;margin-top:8px;line-height:20px;color:#404040;border:0 none;vertical-align:top;}
        }
    
    .image{
        position:relative;
        float:center;
        margin:3px;
        text-align:center;
    }
    .image .text{
        width:100%;
        position:absolute;
        bottom:10px;
        color:#ffffff;
        font-weight: bold;
    }
    </style>

    <body class="body_st">
        <div class="wrap">
            <div class="content">
                <div class="info">
                    <br/>
                    <table width="100%">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="image" onclick="naverLogin();">
                                        <img src="images/download_btn.png" width="140" height="40" />
                                        <div class="text">
                                            네이버 로그인
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="image" onclick="naverLogout();">
                                        <img src="images/download_btn.png" width="140" height="40" />
                                        <div class="text">
                                            네이버 로그아웃
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table width="100%">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="image" onclick="kakaoLogin()">
                                        <img src="images/download_btn.png" width="140" height="40" />
                                        <div class="text">
                                            카카오톡 로그인
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="image" onclick="kakaoLogout()">
                                        <img src="images/download_btn.png" width="140" height="40" />
                                        <div class="text">
                                            카카오톡 로그아웃
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table width="100%">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="image" onclick="facebookLogin()">
                                        <img src="images/download_btn.png" width="140" height="40" />
                                        <div class="text">
                                            페이스북 로그인
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="image" onclick="facebookLogout()">
                                        <img src="images/download_btn.png" width="140" height="40" />
                                        <div class="text">
                                            페이스북 로그아웃
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <br/>
                <div style="width: 200px; margin: auto; text-align: center;">
                    <p id="id"></p>
                    <p id="name"></p>
                    <p id="email"></p>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        function naverLogin() {
            location.href="echoss://naverlogin"
        }
        function naverLogout() {
            location.href="echoss://naverlogout"
        }
        function kakaoLogin() {
            location.href="echoss://kakaotalklogin"
        }
        function kakaoLogout() {
            location.href="echoss://kakaotalklogout"
        }
        function facebookLogin() {
            location.href="echoss://facebooklogin"
        }
        function facebookLogout() {
            location.href="echoss://facebooklogout"
        }
    
        function callbackLogin(result) {
            var resultData = result;
            if(typeof resultData != "object") {
                resultData = resultData.replace(/\n/gi, "<br/>");
                resultData = JSON.parse(resultData);
            }
            if( resultData != "" && resultData != null ){
                document.getElementById("id").innerHTML = "ID :"+resultData.id;
                document.getElementById("name").innerHTML = "Name :"+resultData.name;
                document.getElementById("email").innerHTML = "Email :"+resultData.email;
            }
        }
    
        function callbackLogout() {
            document.getElementById("id").innerHTML = "";
            document.getElementById("name").innerHTML = "";
            document.getElementById("email").innerHTML = "";
        }
    </script>
</html>