<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/outlogin.lib.php');
?>
	    </div>
	</div>

<!-- 오른쪽에서 왼쪽으로 스와이프하면 본인 프로필 페이지로 이동{ -->
<?php if ($is_member) {  ?>
<style>
  /* 슬라이드 애니메이션 */
  .slide-in {
      position: fixed;
      top: 0;
      left: 100%; /* 시작 위치는 화면 오른쪽 */
      width: 100%;
      height: 100%;
      transition: transform 0.5s ease-in-out; /* 애니메이션 속도 */
      background-color: #fff; /* 백그라운드 색상 지정 */
      z-index: 99999999999; /* z-index 추가 */
  }

  .slide-out {
      transform: translateX(-100%); /* 왼쪽으로 슬라이드 */
  }

  .hidden {
      display: none; /* 숨김 처리 */
  }
</style>

<script async>
let isLoading = false;
let loadContentPromise;
let newContentElement;
let oldContentElement;
let startX; // 터치 시작 X 좌표
let startY; // 터치 시작 Y 좌표

function loadContent() {
    const url = '<?php echo G5_BBS_URL ?>/member_profile.php?mb_id=<?php echo $member['mb_id'];?>';
    
    loadContentPromise = fetch(url)
        .then(response => response.text())
        .then(data => {
            // 기존 콘텐츠 숨김 처리
            if (oldContentElement) {
                oldContentElement.classList.add('hidden'); // 이전 콘텐츠 숨김
            }

            // 새로운 콘텐츠 생성
            newContentElement = document.createElement('div');
            newContentElement.className = 'slide-in';
            newContentElement.innerHTML = data;
            document.body.appendChild(newContentElement);
            requestAnimationFrame(() => {
                newContentElement.style.transform = 'translateX(-100%)'; // 슬라이드 애니메이션 시작
            });

            // 새로운 콘텐츠를 스크롤 대상 설정
            document.body.style.overflow = 'hidden'; // 배경 스크롤 방지
            newContentElement.style.overflow = 'auto'; // 새로운 콘텐츠 스크롤 가능
            newContentElement.style.height = '100%'; // 전체 높이 설정

            // 이전 콘텐츠 참조 저장
            oldContentElement = newContentElement;

            // 0.3초 후 해당 URL로 이동
            setTimeout(() => {
                window.location.href = url;
            }, 550); // 550ms 후 이동
        })
        .catch(error => {
            console.error('Error loading content:', error);
            isLoading = false; // 오류 발생 시 로딩 상태 초기화
            loadContentPromise = null; // 로드 취소
        });
}

// 터치 이벤트 리스너
document.addEventListener('touchstart', (event) => {
    if (!isLoading) {
        startX = event.touches[0].clientX; // 터치 시작 X좌표 저장
        startY = event.touches[0].clientY; // 터치 시작 Y좌표 저장
    }
});

document.addEventListener('touchend', (event) => {
    if (!isLoading) {
        const endX = event.changedTouches[0].clientX; // 터치 끝 X좌표
        const endY = event.changedTouches[0].clientY; // 터치 끝 Y좌표
        const distanceX = endX - startX; // 수평 스와이프 거리 계산
        const distanceY = endY - startY; // 수직 스와이프 거리 계산

        // 수직 이동이 50픽셀 이상인 경우 URL 이동하지 않음
        if (Math.abs(distanceY) > 50) {
            return; // 수직 이동이 50픽셀 이상일 경우 아무 작업도 하지 않음
        }

        // 왼쪽으로 스와이프한 경우에만 콘텐츠 로드
        if (distanceX < -120) { // 왼쪽으로 120px 이상 스와이프
            isLoading = true;
            loadContent();
        }
    }
});
</script>
<?php } ?>

<style>
#menu_sch {
    margin-top: 20px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu_sch form {
    display: flex; /* 추가 */
    flex-shrink: 0; /* 추가 */
}

#sch_stx {
    border: 1px solid #0000;
    border-radius: 10px 0 0 10px;
    padding: 10px;
    font-size: 14px;
    color: #262626;
    background-color: #0b81ff;
}

#sch_submit {
    background-color: #0b81ff;
    border: 1px solid #0000;
    border-radius: 0 10px 10px 0;
    color: #ff9e5a;
    font-size: 14px;
    cursor: pointer;
    padding: 10px;
    margin-left: -15px;
    white-space: nowrap; /* 추가 */
}

#sch_submit i {
    margin-right: 5px;
}

#sch_stx:focus,
#sch_submit:focus {
    outline: none;
    box-shadow: none;
}</style><div class="search_content" style="display:none;z-index:999"><div id="menu_sch"><form name="fsearchbox" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);" method="get"><input type="hidden" name="sfl" value="wr_subject||wr_content||mb_id||wr_name||wr_datetime||wr_last||wr_ip"><input type="hidden" name="sop" value="and"><input type="text" name="stx" id="sch_stx" placeholder="검색" required maxlength="20" style="padding-left:10px;" ><button type="submit" value="검색" id="sch_submit"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">검색</span></button></form>
<script async>
                    function fsearchbox_submit(f) {
                        stx = stx.trim();
                        stx.value = stx.value.replace(/[^a-zA-Z0-9 ]/g, '');
                        stx.value = stx.value.replace(/\./g,'');
                        if (f.stx.value.length < 2) {
                            alert("검색어는 두글자 이상 입력하십시오.");
                            f.stx.select();
                            f.stx.focus();
                            return false;
                        }
                        // 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
                        var cnt = 0;
                        for (var i=0; i<f.stx.value.length; i++) {
                            if (f.stx.value.charAt(i) == ' ')
                                cnt++;
                        }
                        if (cnt > 1) {
                            alert("빠른 검색을 위하여 검색어의 공백은 최대 1개 까지 가능합니다.");
                            f.stx.select();
                            f.stx.focus();
                            return false;
                        }
                        return true;
                    }
                </script></div><div class="gal_tab tabs" id="gall_tab" style="width:100%"><?php echo popular('theme/basic', '7'); // 인기검색어 ?><div id="tab_bottom"><div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils" class="tab_list"><?php
		    // 이 함수가 바로 최신글을 추출하는 역할을 합니다.
		    // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
		    // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
		    echo latest('theme/pic_basic', 'gallery', 36, 23, "hit");
		    ?></div></div></div><!--}검색시 보이는 콘텐츠--></div><style> .fa fa-search::after{margin:100px}</style><div id="ft"><ul class="gram_fix_btn"><li><a href="<?php echo G5_URL ?>" class="gf_btn gf_home" ><i class="fa fa-home" style="font-size:19px;margin-top:20px;"></i><span class="sound_only">메인페이지로</span></a></li>
		    <a href="#" id="search_btn" class="hd_opener gf_btn gf_sch">
    <i class="fa fa-search" style="font-size:19px;margin-top:20px;">
        <span class="sound_only">검색</span>
    </i>
</a>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var menuVisible = true; // 초기 상태를 true로 설정하여 메뉴가 보이도록 합니다.
    var searchBtn = document.getElementById('search_btn');
    var menu = document.getElementById('gall_tab');

    // 클릭 이벤트를 search_btn에 추가
    searchBtn.addEventListener('click', function(event) {
        // 메뉴의 가시성을 토글하지 않고 항상 보이게 설정합니다.
        menu.style.display = 'block';
        
        // 스크롤을 제일 위로 이동
        window.scrollTo(0, 0);
        
        event.stopPropagation();
    });

    window.goToPage = function(url) {
        window.location.href = url;
    };

    document.addEventListener('click', function() {
        // 메뉴를 숨기지 않으므로 이 부분은 제거합니다.
    });

    menu.addEventListener('click', function(event) {
        event.stopPropagation();
    });
});
</script>
<li><div class="btn_write" id="w_menuButton"><a href="/bbs/write.php?bo_table=gallery"><i class="fa fa-plus-square" style="font-size:23px;margin-top:20px;"></i></a><span class="sound_only">글쓰기</span></div></li><li><a href="/bbs/qr.php" aria-label="프로필 qr코드 인식기"><i class="fa fa-qrcode" style="font-size:23px;margin-top:20px;"></i></a></li><?php if ($is_member) { ?><li><a href="<?php echo G5_BBS_URL ?>/member_profile.php?mb_id=<?php echo $member['mb_id'];?>" class="gf_btn gf_logout"><span class="fprofile_img"><?php echo get_member_profile_img($member['mb_id']); ?></span><span class="sound_only">프로필</span></a></li><?php } else { ?><li><span class="fprofile_img" onclick="openModal()"><?php echo get_member_profile_img($member['mb_id']); ?></span><span class="sound_only">로그인</span></li><?php } ?></ul></div><div id="modal" class="modal" style="padding:10px"><?php
// 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');
?><div class="main_wrap" id="login_new" style="margin:auto;"><div class="sub_div"><div class="login_div" style="height:100%;max-height:550px !important;min-width:300px;width:85%;max-width:450px;border-radius:15px !important;margin:auto !important"><span class="close-button" onclick="closeModal()" style="padding:10px">&times;</span><div class="login_wrap"><div id="login_logo" style="padding:10px 10px;height:55px;margin-left:10px;vertical-align:middle;"><a href="<?php echo G5_URL ?>"><img src="<?php echo G5_THEME_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>" style="max-height:100%;width:auto"></a></div><form name="flogin" action="<?php echo G5_BBS_URL ?>/login_check.php" onsubmit="return flogin_submit(this);" method="post"><input type="hidden" name="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_btn_d"><button type="submit" class="login_btns font-16" name="" style="color:#f9f9f9">로그인</button></ul></form><button type="submit" class="register_btns font-16" onclick="location.href='<?php echo G5_BBS_URL ?>/register.php' ">회원가입하기</button><style> #login_new .register_btns{width:100%;height:48px;background-color:#f3f3f3;border:1px solid #e9e9e9;color:#5a5a5a;margin-top:7px;border-radius:15px;text-align:center}</style><ul class="login_join_t"><a href="<?php echo G5_BBS_URL ?>/비밀번호찾기링크" class="login_join_btn letter-05 color-999 fl">비밀번호를 잊으셨나요?　<span class="color-000 font-b" style="margin-left:-3px;">비밀번호 찾기</span></a><?php @include_once(G5_THEME_MOBILE_PATH.'/skin/social/social_login.skin.php'); // 소셜로그인 사용시 소셜로그인 버튼 ?><!-- 기존 코드{
                    <a href="<?php echo G5_URL ?>" class="login_join_btn letter-05 font-b fr">커뮤니티 가기</a>
                    }기존 코드--><!-- 회원가입하기 기존 코드{
                    <ul class="login_b"><li class="login_b_li1" style="text-align:right;"><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></div></div></div></div><style> #login_new .login_join_t{margin-top:8px !important}#login_new .login_b_li1{float:right !important}</style><script async>
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 async>
$(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()){setTimeout(function(){$loginBtn.css({'background-color': '#0b81ff',
'transition': 'background-color 0.2s ease'});}, 700);}else{$loginBtn.css({'background-color': '',
'transition': 'background-color 0.2s ease'});}});});
</script><!--}로드인 모달 콘텐츠 끝--></div><script>
function openModal(){var modal=document.getElementById("modal");modal.style.display = "block";window.onclick=function(event) {if(event.target==modal){closeModal();}}}
function closeModal(){var modal=document.getElementById("modal");modal.style.display = "none";}
</script><style> .modal{display:none;position:fixed;z-index:9999999;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.15);-webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px)}.modal-content{background-color:#fefefe;margin:5% auto;padding:15px;border:1px solid #888;width:85%;min-width:200px;max-width:750px;height:80%;border-radius:10px;box-shadow:0px 5px 15px rgba(0,0,0,0.5)}.close-button{color:#aaa;float:right;font-size:28px;font-weight:bold}.close-button:hover,.close-button:focus{color:black;text-decoration:none;cursor:pointer}</style><!--}모달 끝--><script>
jQuery(function($) {$(document).ready(function(){font_resize("container", get_cookie("ck_font_resize_rmv_class"), get_cookie("ck_font_resize_add_class"));if( $(".top").length ){var jbOffset = $(".top").offset();$(window).scroll(function(){if( $(document).scrollTop() > jbOffset.top ){$( '.top' ).addClass( 'fixed' );}else{$( '.top' ).removeClass( 'fixed' );}});}});});</script><script>
const userBtn=document.getElementById('search_btn');const searchContent=document.querySelector('.search_content');userBtn.addEventListener('click', (event) => {event.preventDefault();if(searchContent.style.display === 'none'){searchContent.style.display = 'block';scrollToTop(searchContent,270);}else{scrollToTop(searchContent,270);}});document.addEventListener('click', (event) => {if(event.target !== userBtn && !searchContent.contains(event.target)){searchContent.style.display = 'none';}});function scrollToTop(element,duration){const startPosition=element.scrollTop;const distance=0 - startPosition;let startTime=null;function animation(currentTime){if(!startTime) startTime=currentTime;const timeElapsed=currentTime - startTime;const run=easeOutCubic(timeElapsed,startPosition,distance,duration);element.scrollTop=run;if(timeElapsed < duration){requestAnimationFrame(animation);}}
function easeOutCubic(t,b,c,d){t /= d;t--;return c * (t * t * t + 1) + b;}
requestAnimationFrame(animation);}
</script><script>
function positionFooter(){const ft=document.getElementById('ft');ft.style.position = 'fixed';ft.style.left = '50%';ft.style.bottom = '0';ft.style.transform = 'translateX(-50%)';ft.style.zIndex = '1000';}
positionFooter();window.addEventListener('resize', positionFooter);window.addEventListener('scroll', positionFooter);</script><script>
const footerDiv=document.getElementById('ft');footerDiv.style.height = '60px';</script><style> .search_content{display:none;position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-height:100vh;background-color:#fff;padding:20px;text-align:center;overflow-y:auto;overflow-x:hidden}.fprofile_img img{max-width:30px;max-height:auto;margin-top:15px;border-radius:50%}#ft .gram_fix_btn{display:flex;justify-content:center;align-items:stretch;gap:10px;list-style-type:none;padding:0;margin:0}#ft .gram_fix_btn li{display:flex;align-items:center;height:100%}.gram_fix_btn li{margin:0 5%}.profile_image img{width:40px;height:40px}</style>

<?php
include_once(G5_THEME_PATH."/tail.sub.php");
?>