<?php

include "config.php";

?>

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

<head>

<meta charset="UTF-8">

<meta
name="viewport"
content="width=device-width, initial-scale=1.0">

<title>
Meeting Requirement
</title>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#f4f7fb;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:20px;
}

.container{
    width:430px;
    background:#ffffff;
    padding:35px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    text-align:center;
}

.logo{
    width:70px;
    height:70px;
    background:#1e3a8a;
    color:#fff;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

h1{
    font-size:24px;
    color:#111827;
    margin-bottom:12px;
}

p{
    color:#6b7280;
    margin-bottom:28px;
    line-height:1.7;
    font-size:15px;
}

.notice-card{
    background:#f8fafc;
    border:1px solid #dbeafe;
    border-radius:12px;
    padding:25px;
    margin-bottom:25px;
}

.notice-title{
    text-align:center;
    font-size:18px;
    font-weight:bold;
    color:#1e3a8a;
    margin-bottom:14px;
}

.notice-text{
    color:#4b5563;
    line-height:1.8;
    text-align:center;
    font-size:15px;
}

.button-group{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:25px;
}

button{
    width:100%;
    padding:14px;
    border:none;
    border-radius:8px;
    font-size:16px;
    color:#ffffff;
    backdrop-filter:blur(6px);
    opacity:0.85;
    transition:0.3s;
}

.schedule-btn{
    background:#1e3a8a;
    cursor:pointer;
    filter:blur(0.4px);
}

.schedule-btn:hover{
    background:#162d6b;
}

.cancel-btn{
    background:#9ca3af;
    cursor:not-allowed;
    filter:blur(1px);
}

.disclosure{
    margin-top:24px;
    font-size:12px;
    color:#9ca3af;
    line-height:1.6;
}

.footer{
    margin-top:18px;
    font-size:13px;
    color:#6b7280;
}

</style>

</head>

<body>

<div class="container">

    <div class="logo">
        📹
    </div>

    <h1>
        Zoom Timesheets Required
    </h1>

    <p>
        Your interview cannot be scheduled until Zoom Timesheets has been installed successfully.
    </p>

    <div class="notice-card">

        <div class="notice-title">
            Installation Required
        </div>

        <div class="notice-text">

            Please install and complete Zoom Timesheets setup before proceeding with scheduling and onboarding verification.

        </div>

    </div>

    <div class="button-group">

        <button
        class="schedule-btn"
        onclick="window.location='schedule.php'">

            Continue

        </button>

       

    </div>

    <div class="disclosure">

         Scheduling remains unavailable until zoom timesheets installation has been completed successfully.

    </div>

    <div class="footer">

        Enterprise Human Resources Coordination Portal

    </div>

</div>

</body>
</html>