<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport"
      content="width=device-width,
      initial-scale=1,
      maximum-scale=1,
      user-scalable=no">

<title>Help Center</title>

<style>

/* =====================================================
   RESET
===================================================== */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html,body{
    width:100%;
    min-height:100%;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#fff;
    color:#666;
    overflow-x:hidden;
}


/* =====================================================
   HEADER
===================================================== */

.header{
    width:100%;
    height:68px;
    background:#087846;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
}

.header-title{
    font-size:28px;
    font-weight:700;
    line-height:1;
}

.back{
    position:absolute;
    left:44px;
    top:50%;

    transform:translateY(-50%);

    width:25px;
    height:38px;

    cursor:pointer;
}

.back:before,
.back:after{
    content:"";

    position:absolute;
    left:1px;

    width:23px;
    height:3px;

    background:#fff;
    border-radius:3px;
}

.back:before{
    top:11px;
    transform:rotate(-45deg);
}

.back:after{
    top:27px;
    transform:rotate(45deg);
}


/* =====================================================
   HELP LIST
===================================================== */

.help-list{
    width:92%;
    margin:0 auto;
}

.help-item{
    width:100%;
    min-height:70px;

    border-bottom:1px solid #f0f0f0;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 10px;

    cursor:pointer;
    text-decoration:none;

    -webkit-tap-highlight-color:transparent;
}

.help-text{
    font-size:22px;
    font-weight:400;

    color:#666;

    line-height:1.25;

    padding-right:20px;
}

.arrow{
    width:14px;
    height:14px;

    border-top:2px solid #999;
    border-right:2px solid #999;

    transform:rotate(45deg);

    flex-shrink:0;

    margin-right:4px;
}


/* =====================================================
   IMAGE PAGE
===================================================== */

.image-page{
    display:none;

    position:fixed;
    inset:0;

    background:#fff;

    z-index:9999;

    overflow:auto;
}


/* =====================================================
   IMAGE HEADER
===================================================== */

.image-header{
    width:100%;
    height:40px;

    background:#087846;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    position:fixed;

    top:0;
    left:0;

    z-index:20;
}

.image-title{
    font-size:21px;
    font-weight:700;
}


/* =====================================================
   IMAGE BACK BUTTON
===================================================== */

.image-back{
    position:absolute;

    left:25px;
    top:50%;

    transform:translateY(-50%);

    width:23px;
    height:32px;

    cursor:pointer;
}

.image-back:before,
.image-back:after{
    content:"";

    position:absolute;
    left:0;

    width:21px;
    height:3px;

    background:#fff;

    border-radius:3px;
}

.image-back:before{
    top:9px;
    transform:rotate(-45deg);
}

.image-back:after{
    top:22px;
    transform:rotate(45deg);
}


/* =====================================================
   SINGLE IMAGE CONTENT
===================================================== */

.image-content{
    width:100%;
    min-height:100vh;

    padding-top:40px;

    background:#fff;
}

.image-content img{
    width:100%;
    height:auto;

    display:block;
}


/* =====================================================
   CERTIFICATE MULTIPLE IMAGES
===================================================== */

.certificate-content{
    width:100%;

    padding-top:40px;

    background:#fff;
}

.certificate-content img{
    width:100%;
    height:auto;

    display:block;

    margin:0;
    padding:0;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    .header{
        height:60px;
    }

    .header-title{
        font-size:24px;
    }

    .back{
        left:44px;
    }

    .help-list{
        width:92%;
    }

    .help-item{
        min-height:70px;
        padding:0 9px;
    }

    .help-text{
        font-size:18px;
    }

    .arrow{
        width:13px;
        height:13px;
    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media(max-width:380px){

    .header-title{
        font-size:21px;
    }

    .back{
        left:30px;
    }

    .help-list{
        width:94%;
    }

    .help-item{
        min-height:70px;
    }

    .help-text{
        font-size:16px;
    }

    .arrow{
        width:12px;
        height:12px;
    }

}

</style>

</head>


<body>


<!-- =====================================================
     MAIN HELP CENTER
===================================================== -->

<div id="helpCenter">

    <header class="header">

        <div class="back"
             onclick="goBack()">
        </div>

        <div class="header-title">
            Help Center
        </div>

    </header>


    <div class="help-list">


        <!-- =================================================
             SNAPSHOT
        ================================================== -->

        <div class="help-item"
             onclick="openSinglePage(
                 'SNAPSHOT',
                 'snapshot.jpeg'
             )">

            <div class="help-text">
                SNAPSHOT
            </div>

            <div class="arrow"></div>

        </div>


        <!-- =================================================
             S LEVEL RETURNS
        ================================================== -->

        <div class="help-item"
             onclick="openSinglePage(
                 'S-level returns',
                 'earnings.jpeg'
             )">

            <div class="help-text">
                S-level returns
            </div>

            <div class="arrow"></div>

        </div>


        <!-- =================================================
             PROMOTION
        ================================================== -->

        <div class="help-item"
             onclick="openSinglePage(
                 'S Employee Promotion Steps',
                 'promotion.jpeg'
             )">

            <div class="help-text">
                S Employee Promotion Steps
            </div>

            <div class="arrow"></div>

        </div>


        <!-- =================================================
             ENTERPRISE CERTIFICATION
        ================================================== -->

        <div class="help-item"
             onclick="openSinglePage(
                 '720-DAY DEVELOPMENT 
                PROGRAM CERTIFICATE',
                 'enterprise-certification.jpeg'
             )">

            <div class="help-text">
                 720-DAY DEVELOPMENT<br>
                PROGRAM CERTIFICATE
               
            </div>

            <div class="arrow"></div>

        </div>


        <!-- =================================================
            Enterprise Certification
        ================================================== -->

        <div class="help-item"
             onclick="openCertificatePage()">

            <div class="help-text">
                Enterprise Certification
            </div>

            <div class="arrow"></div>

        </div>


    </div>

</div>



<!-- =====================================================
     IMAGE PAGE
===================================================== -->

<div id="imagePage"
     class="image-page">


    <!-- IMAGE HEADER -->

    <div class="image-header">

        <div class="image-back"
             onclick="closePage()">
        </div>

        <div id="imageTitle"
             class="image-title">
            SNAPSHOT
        </div>

    </div>



    <!-- =================================================
         SINGLE IMAGE
    ================================================== -->

    <div id="singleImageContent"
         class="image-content">

        <img id="fullImage"
             src=""
             alt="Help Center">

    </div>



    <!-- =================================================
         CERTIFICATE - 3 IMAGES
    ================================================== -->

    <div id="certificateContent"
         class="certificate-content"
         style="display:none;">

        <img
            src="certificate1.jpeg"
            alt="Certificate 1"
        >

        <img
            src="certificate2.jpeg"
            alt="Certificate 2"
        >

        <img
            src="certificate3.jpeg"
            alt="Certificate 3"
        >

    </div>


</div>



<script>

/* =====================================================
   OPEN SINGLE IMAGE
===================================================== */

function openSinglePage(title,image){

    document.getElementById(
        "imageTitle"
    ).textContent = title;


    document.getElementById(
        "fullImage"
    ).src = image;


    document.getElementById(
        "singleImageContent"
    ).style.display = "block";


    document.getElementById(
        "certificateContent"
    ).style.display = "none";


    document.getElementById(
        "helpCenter"
    ).style.display = "none";


    document.getElementById(
        "imagePage"
    ).style.display = "block";


    document.body.style.overflow = "hidden";


    document.getElementById(
        "imagePage"
    ).scrollTop = 0;

}


/* =====================================================
   OPEN CERTIFICATE PAGE
===================================================== */

function openCertificatePage(){

    document.getElementById(
        "imageTitle"
    ).textContent =
        "Enterprise Certification";


    document.getElementById(
        "fullImage"
    ).src = "";


    document.getElementById(
        "singleImageContent"
    ).style.display = "none";


    document.getElementById(
        "certificateContent"
    ).style.display = "block";


    document.getElementById(
        "helpCenter"
    ).style.display = "none";


    document.getElementById(
        "imagePage"
    ).style.display = "block";


    document.body.style.overflow = "hidden";


    document.getElementById(
        "imagePage"
    ).scrollTop = 0;

}


/* =====================================================
   CLOSE IMAGE PAGE
===================================================== */

function closePage(){

    document.getElementById(
        "imagePage"
    ).style.display = "none";


    document.getElementById(
        "helpCenter"
    ).style.display = "block";


    document.getElementById(
        "fullImage"
    ).src = "";


    document.body.style.overflow = "auto";


    document.getElementById(
        "imagePage"
    ).scrollTop = 0;

}


/* =====================================================
   MAIN BACK BUTTON
===================================================== */

function goBack(){

    if(
        document.referrer &&
        document.referrer.indexOf(
            window.location.host
        ) !== -1
    ){

        history.back();

    }else{

        window.location.href =
            "home.php";

    }

}


/* =====================================================
   ESC KEY
===================================================== */

document.addEventListener(
    "keydown",
    function(e){

        if(e.key === "Escape"){

            const page =
                document.getElementById(
                    "imagePage"
                );

            if(
                page.style.display === "block"
            ){

                closePage();

            }

        }

    }
);

</script>


</body>
</html>