<!doctype html>
<html lang="zxx">

<head>
    <!--========= Required meta tags =========-->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ESD - Attendance Policy & SOP </title>
    <link rel="shortcut icon" href="assets/img/favicon.png" type="images/x-icon" />
    <!-- css include -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/swiper.min.css">
    <link rel="stylesheet" href="assets/css/odometer.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/recoleta-font.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/main.css">
    

</head>

<body>
    <!-- backtotop - start -->
    <div class="xb-backtotop">
        <a href="#" class="scroll">
            <i class="far fa-arrow-up"></i>
        </a>
    </div>
    <!-- backtotop - end -->
    <!-- Preloader - Start -->
    <div id="preloader">
        <div id="loader" class="loader">
            <div class="loader-container">
                <div class="loader-icon"><img src="assets/img/logo/preloader.png" alt="preloader"></div>
            </div>
        </div>
    </div>
    <!-- Preloader - End -->
    <div class="body_wrap">
        <?php include_once("header.php") ?>
        <!-- main area start  -->
        <main>
            <!-- breadcrumb start -->
            <section class="breadcrumb bg_img ul_li" data-background="assets/img/internal-page.jpg">
                <div class="container">
                    <div class="breadcrumb__content text-center">
                        <h2 class="breadcrumb__title">Attendance Policy & SOP </h2>
                        <p class="breadcrumb__desc">ESE’s Flexible & Accountable Work Culture </p>
                    </div>
                </div>
            </section>
            <!-- breadcrumb end -->
            <!-- blog single start -->
            <section class="team pt-60 pb-120">
                <div class="container">
                    <div class="section-title text-center mb-60">
                        <span class="sub-title">Attendance Policy & SOP </span>
                        <h2 class="title">ESE’s Flexible & Accountable Work Culture</h2>
                    </div>
                    <div class="row mt-none-30">
                        <div class="ese">
                            <div class="ese-grid-bg"></div>
                            <div class="ese-inner">

                                <!-- HERO -->
                                <div class="ese-hero">
                                    <div class="ese-hero-desc">
                                        To strengthen safety, accountability, and operational efficiency within
                                        the department, a biometric-enabled RFID attendance system is being
                                        implemented across all ESE buildings.
                                    </div>
                                </div>

                                <!-- WHO MUST REGISTER -->
                                <div class="ese-block">
                                    <div class="ese-sec-title">Who Must Register?</div>
                                    <P class="mb-2 mt-2">All department members are required to comply, including:</P>
                                    <div class="ese-who-grid">
                                        <div class="ese-who-card">
                                            <div class="ese-who-icon">🎓</div>
                                            <div class="ese-who-info">
                                                <div class="ese-who-name">Students</div>
                                            </div>
                                        </div>
                                        <div class="ese-who-card">
                                            <div class="ese-who-icon">👔</div>
                                            <div class="ese-who-info">
                                                <div class="ese-who-name">Permanent Staff</div>
                                            </div>
                                        </div>
                                        <div class="ese-who-card">
                                            <div class="ese-who-icon">🗂️</div>
                                            <div class="ese-who-info">
                                                <div class="ese-who-name">Department Secretaries</div>
                                            </div>
                                        </div>
                                        <div class="ese-who-card">
                                            <div class="ese-who-icon">🔬</div>
                                            <div class="ese-who-info">
                                                <div class="ese-who-name">Project Staff</div>
                                            </div>
                                        </div>
                                        <div class="ese-who-card">
                                            <div class="ese-who-icon">🔑</div>
                                            <div class="ese-who-info">
                                                <div class="ese-who-name">Faculty-Hired Personnel</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- CHECK IN / OUT -->
                                <div class="ese-block">
                                    <div class="ese-sec-title">Check-In / Check-Out Procedure</div>
                                    <div class="ese-checkinout">
                                        <div class="ese-ci-card">
                                            <div class="ese-ci-label in">⬇ Tap-In · Entry</div>
                                            <div class="ese-ci-text">Every entry into the department requires a Tap-In</div>
                                        </div>
                                        <div class="ese-ci-card">
                                            <div class="ese-ci-label out">⬆ Tap-Out · Exit</div>
                                            <div class="ese-ci-text">Every exit from the department requires a Tap-Out</div>
                                        </div>
                                    </div>
                                    <div class="ese-sec-title">Applicable to</div>
                                    <div class="ese-buildings">
                                        <div class="ese-bldg">
                                            <div class="ese-bldg-name">Main ESE Building</div>
                                        </div>
                                        <div class="ese-bldg">
                                            <div class="ese-bldg-name">Annex Building</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- HOW THE SYSTEM WORKS -->
                                <div class="ese-block">
                                    <div class="ese-sec-title">How the System Works</div>
                                    <div class="ese-system-cards">
                                        <div class="ese-sys-card">
                                            <div class="ese-sys-icon">💳</div>
                                            <div>
                                                <div class="ese-sys-title">RFID Card Authentication</div>
                                            </div>
                                        </div>
                                        <div class="ese-sys-card">
                                            <div class="ese-sys-icon">🤖</div>
                                            <div>
                                                <div class="ese-sys-title">Face Recognition Verification</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- SOP STEPS -->
                                <div class="ese-block">
                                    <div class="ese-sec-title">Step-by-Step SOP</div>
                                    <div class="ese-steps">
                                        <div class="ese-step">
                                            <div class="ese-step-num">01</div>
                                            <div class="ese-step-body">
                                                <div class="ese-step-title">Carry Your RFID Card at All Times</div>
                                            </div>
                                        </div>
                                        <div class="ese-step">
                                            <div class="ese-step-num">02</div>
                                            <div class="ese-step-body">
                                                <div class="ese-step-title">Tap the RFID Card on the Biometric
                                                    Device</div>
                                            </div>
                                        </div>
                                        <div class="ese-step">
                                            <div class="ese-step-num">03</div>
                                            <div class="ese-step-body">
                                                <div class="ese-step-title">Allow the Device to Verify Your
                                                    Face</div>
                                            </div>
                                        </div>
                                        <div class="ese-step">
                                            <div class="ese-step-num">04</div>
                                            <div class="ese-step-body">
                                                <div class="ese-step-title">Repeat the Process While Exiting</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ese-duration">
                                        <div class="ese-duration-icon">⚡</div>
                                        <div class="ese-duration-text">The complete process takes approximately
                                            <strong>2 seconds</strong> — fast, seamless, and non-disruptive.
                                        </div>
                                    </div>
                                </div>

                                <!-- IMPORTANT GUIDELINES -->
                                <div class="ese-block">
                                    <div class="ese-sec-title">Important Guidelines</div>
                                    <div class="ese-guidelines">
                                        <div class="ese-guide">
                                            <div class="ese-guide-dot"></div>
                                            <div class="ese-guide-text"><strong>RFID cards are personal and
                                                    non-transferable.</strong> </div>
                                        </div>
                                        <div class="ese-guide">
                                            <div class="ese-guide-dot"></div>
                                            <div class="ese-guide-text"><strong>Loss of cards must be avoided and
                                                    immediately reported.</strong> </div>
                                        </div>
                                        <div class="ese-guide">
                                            <div class="ese-guide-dot"></div>
                                            <div class="ese-guide-text">
                                                <strong>Attendance records will support:</strong>
                                                <div class="ese-sub-guides">
                                                    <div class="ese-sub-guide">Department safety and emergency
                                                        tracking</div>
                                                    <div class="ese-sub-guide">Infrastructure security</div>
                                                    <div class="ese-sub-guide">Work commitment documentation</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- blog single end -->


            <!-- contact end -->
        </main>

        <?php include_once("footer.php") ?>