<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/css/login.css">', 0);
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/css/check.css">', 0);

include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_THEME_PATH.'/head.php');
?>

<div class="main_wrap" id="login_new">
    <div class="sub_div">
        <div class="login_div">

            <div class="login_wrap">
                <span class="font-b font-18">로그인</span>

                <form name="flogin" action="<?php echo $login_action_url ?>" onsubmit="return flogin_submit(this);" method="post">
                    <input type="hidden" name="url" value="<?php echo $login_url ?>">
                    
                    <ul>
                        <li class="login_input_id">
                            <input type="text" class="login_input letter-05 font-14" name="mb_id" id="login_id" placeholder="아이디" maxLength="20" required autocomplete="on">
                            <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                                <circle cx="12" cy="8" r="3.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.25 19.25H6.94953C5.77004 19.25 4.88989 18.2103 5.49085 17.1954C6.36247 15.7234 8.23935 14 12.25 14"/>
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.75 17.75L16 19.25L19.25 14.75"/>
                            </svg>
                        </li>
                        <li class="login_input_pw">
                            <input type="password" class="login_input letter-05 font-14" name="mb_password" id="login_pw" placeholder="비밀번호" maxLength="20" required autocomplete="on">
                            <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13.25C17.3472 13.25 19.25 11.3472 19.25 9C19.25 6.65279 17.3472 4.75 15 4.75C12.6528 4.75 10.75 6.65279 10.75 9C10.75 9.31012 10.7832 9.61248 10.8463 9.90372L4.75 16V19.25H8L8.75 18.5V16.75H10.5L11.75 15.5V13.75H13.5L14.0963 13.1537C14.3875 13.2168 14.6899 13.25 15 13.25Z"/>
                                <path stroke="currentColor" d="M16.5 8C16.5 8.27614 16.2761 8.5 16 8.5C15.7239 8.5 15.5 8.27614 15.5 8C15.5 7.72386 15.7239 7.5 16 7.5C16.2761 7.5 16.5 7.72386 16.5 8Z"/>
                            </svg>
                        </li>
                    </ul>
                    
                    <ul class="login_b">
                        <li class="login_b_li1"><a href="<?php echo G5_BBS_URL ?>/register.php" target="_blank" id="login_password_lost" class="color-999 letter-05 font-12 login_password_lost">회원가입</a></li>
                        <li class="login_b_li2">
                            <input class="magic-checkbox" type="checkbox" name="auto_login" id="login_auto_login">
                            <label class="font-b color-999 font-12" for="login_auto_login" >자동 로그인</label>
                            <div class="cb"></div>
                        </li>
                        <div class="cb"></div>
                    </ul>
                    
                    <ul class="login_btn_d">
                        <button type="submit" class="login_btns font-16" style="color:#f9f9f9;" name="">로그인</button>
                        <?php @include_once(get_social_skin_path().'/social_login.skin.php'); // 소셜로그인 사용시 소셜로그인 버튼 ?>
                    </ul>
                    
                </form>

                <ul class="login_join_t">
                    <a href="<?php echo G5_BBS_URL ?>/register.php" class="login_join_btn letter-05 color-999 fl">아직 회원이 아니신가요?　<span class="color-000 font-b">회원가입하기</span></a>
                    <a href="<?php echo G5_URL ?>" class="login_join_btn letter-05 font-b fr">커뮤니티 가기</a>
                    <div class="cb"></div>
                </ul>
            </div>
            
        </div>

    </div>
</div>


<script>
jQuery(function($){
    $("#login_auto_login").click(function(){
        if (this.checked) {
            this.checked = confirm("자동 로그인을 사용하시면 다음부터 회원아이디와 비밀번호 없이 로그인이 가능합니다.\n\n공공장소에서는 개인정보 유출과 사용자 식별 오류가 발생할 수 있으므로 사용을 자제하여  주십시오.\n\n자동 로그인을 사용하시겠습니까?");
        }
    });
});

function flogin_submit(f)
{
    if( $( document.body ).triggerHandler( 'login_sumit', [f, 'flogin'] ) !== false ){
        return true;
    }
    return false;
}
</script>
<!-- } 로그인 끝 -->

<!-- 부가 스타일-->
<script>
$(document).ready(function() {
    // 아이디와 비밀번호 입력 필드
    var $idInput = $('input[name="mb_id"]');
    var $pwInput = $('input[name="mb_password"]');
    // 로그인 버튼
    var $loginBtn = $('button[name=""]');

    // 입력 필드 변화 감지
    $idInput.add($pwInput).on('input', function() {
        // 아이디와 비밀번호가 모두 입력되었으면
        if ($idInput.val() && $pwInput.val()) {
            // 로그인 버튼의 배경색을 #0484fe로 변경하고 0.2초 동안 부드럽게 전환
            $loginBtn.css({
                'background-color': '#0484fe',
                'transition': 'background-color 0.2s ease'
            });
        } else {
            // 그렇지 않으면 기본 배경색으로 0.3초 동안 부드럽게 전환
            $loginBtn.css({
                'background-color': '',
                'transition': 'background-color 0.2s ease'
            });
        }
    });
});
</script>