<%- include("websitepartials/header") %>

<style>
  .icon-box {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .fingerprint-section h5,
  .card-section h5,
  .warning-section h5 {
    font-weight: bold;
  }

  .instruction-list {
    padding-left: 1.25rem;
  }

  .instruction-list li {
    margin-bottom: 10px;
  }
</style>

<main class="main">
  <div
    class="page-title dark-background"
    style="
      background-image: url('website-assets/img/gallery/Dr-Basilia-Igbokwe3.jpg');
      background-size: cover;
      background-position: center;
    "
  >
    <div class="container position-relative text-white py-5">
      <h1 class="display-4 fw-bold">How to Use Time Attendance Device</h1>
      <p class="lead">
        Follow the guidelines below for proper use of the Time Attendance
        System.
      </p>
      <nav class="breadcrumbs mt-3">
        <ol class="breadcrumb bg-transparent p-0 m-0">
          <li class="breadcrumb-item">
            <a href="/" class="text-white text-decoration-underline">Home</a>
          </li>
          <li class="breadcrumb-item active text-white" aria-current="page">
            Time Attendance Device
          </li>
        </ol>
      </nav>
    </div>
  </div>

  <section class="section mx-3 mx-lg-4 py-5">
    <div class="container">
      <div class="text-center mb-5">
        <h2 class="fw-bold">UISTO Time Attendance Device</h2>
      </div>

      <div class="row g-4">
        <!-- Fingerprint Section -->
        <div class="col-lg-6">
          <div class="fingerprint-section">
            <h5>Using Fingerprint:</h5>
            <ol class="instruction-list">
              <li>
                Ensure your captured approved finger is clean. This is the
                finger used during the General Biometric and Capturing Exercise
                in February 2025. If unsure, contact ICT Department.
              </li>
              <li>
                Place the approved finger on the red area of the device as seen
                in the image.
              </li>
              <li>
                Hold firmly until you hear a beep and a voice says “Thank You”.
              </li>
              <li>
                A green tick and initials of your name will be displayed on
                screen
                <i class="bi bi-check-circle-fill text-success ms-1 fs-2"></i>
              </li>
              <li>
                If authentication fails, you will hear "Authentication Failed"
                and a red tick will appear.
                <i class="bi bi-x-circle-fill text-danger ms-1 fs-2"></i>
              </li>
              <li>
                Only clock-in once in the morning and once in the evening.
                Resumption and closing times will be communicated by Management.
              </li>
              <li>
                If a red
                <i class="bi bi-x-circle-fill text-danger ms-1 fs-2"></i>
                appears, try again with the correct finger until "Thank You" and
                green tick appear
                <i class="bi bi-check-circle-fill text-success ms-1 fs-2"></i>
              </li>
            </ol>

            <div class="text-center mt-3">
              <h6 class="fw-bold">Fingerprint Usage</h6>
              <img
                src="website-assets/img/school-images/fingerpring-usage.png"
                class="img-fluid rounded shadow"
                alt="Fingerprint Usage Image"
                width="150px"
              />
            </div>
          </div>
        </div>

        <!-- Card Section -->
        <div class="col-lg-6">
          <div class="card-section">
            <h5>Using Card:</h5>
            <ol class="instruction-list">
              <li>
                Collect an approved card from the ICT Department registered with
                your staff ID.
              </li>
              <li>
                Place the card at the bottom of the fingerprint area as shown in
                the image.
              </li>
              <li>
                A green tick and initials of your name will appear for a
                successful clock-in.
                <i class="bi bi-check-circle-fill text-success ms-1 fs-2"></i>
              </li>
              <li>
                If authentication fails, you'll hear "Authentication Failed" and
                a red tick will appear.
                <i class="bi bi-x-circle-fill text-danger ms-1 fs-2"></i>
              </li>
              <li>
                Only clock-in once in the morning and once in the evening.
                Resumption and closing times will be communicated by Management.
              </li>
              <li>
                If a red
                <i class="bi bi-x-circle-fill text-danger ms-1 fs-2"></i>
                appears, try again with the approved card until you see the
                green tick and hear "Thank You"
                <i class="bi bi-check-circle-fill text-success ms-1 fs-2"></i>
              </li>
            </ol>

            <div class="text-center mt-3">
              <h6 class="fw-bold">Card Usage</h6>
              <img
                src="website-assets/img/school-images/card-usage.png"
                class="img-fluid rounded shadow"
                alt="Card Usage Image"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="warning-section mt-5">
        <h5 class="text-danger">Important Warning:</h5>
        <ul class="instruction-list">
          <li>
            Do not give your personalized card to anyone to clock in/out for
            you. Card activity is logged differently from fingerprint usage and
            is monitored closely.
          </li>
          <li>
            Staff caught violating this rule will face disciplinary actions as
            decided by Management.
          </li>
        </ul>

        <h5 class="mt-4 text-danger">Usage Guidelines:</h5>
        <ul class="instruction-list">
          <li>
            Only clock-in at the school/directorate where you registered during
            the biometric exercise.
          </li>
          <li>Never open or tamper with the attendance box for any reason.</li>
          <li>Do not use any sharp object or apply liquid to the device.</li>
          <li>Report any device issues immediately.</li>
          <li>
            Contact the ICT Department for any inquiries, suggestions, or
            complaints regarding the time attendance device.
          </li>
        </ul>
      </div>

      <!-- Help Video -->
      <div class="text-center mt-5">
        <h5 class="fw-bold mb-3">
          Watch Help Video on Using the Time Attendance Device
        </h5>
        <div
          class="ratio ratio-16x9 rounded shadow"
          style="max-width: 900px; margin: 0 auto"
        >
          <iframe
            src="https://www.youtube.com/embed/KLQIxKgXkoo"
            title="How to Use the UISTO Clock-In Biometric Attendance Machine"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>
  </section>
</main>

<%- include("websitepartials/footer") %>
