<?php session_start(); include('includes/conn.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>ECIMS</title>
    <?php include('includes/head1.php'); ?>

    <style>
        .portal-bg{
            background: linear-gradient(135deg,#0b3d66,#1769aa,#44a3e8);
            min-height: 650px;
            position: relative;
            overflow: hidden;
        }

        .portal-bg:before{
            content:'';
            position:absolute;
            width:500px;
            height:500px;
            background:rgba(255,255,255,0.08);
            border-radius:50%;
            top:-150px;
            right:-150px;
        }

        .portal-bg:after{
            content:'';
            position:absolute;
            width:400px;
            height:400px;
            background:rgba(255,255,255,0.06);
            border-radius:50%;
            bottom:-120px;
            left:-120px;
        }

        .portal-content{
            position:relative;
            z-index:2;
        }

        .portal-title{
            font-size:48px;
            font-weight:800;
            text-transform:uppercase;
            color:#fff;
            text-shadow:2px 2px 12px rgba(0,0,0,.45);
        }

        .portal-subtitle{
            color:#f8f9fa;
            font-size:20px;
            margin-top:10px;
            letter-spacing:1px;
        }

        .login-box{
            background:rgba(255,255,255,0.18);
            backdrop-filter:blur(14px);
            -webkit-backdrop-filter:blur(14px);
            border-radius:24px;
            padding:40px;
            box-shadow:0 15px 40px rgba(0,0,0,.28);
            border:1px solid rgba(255,255,255,0.25);
        }

        .login-card{
            background:#ffffff;
            border-radius:22px;
            padding:35px 25px;
            text-align:center;
            transition:.4s ease;
            box-shadow:0 8px 25px rgba(0,0,0,.16);
            height:100%;
            position:relative;
            overflow:hidden;
        }

        .login-card:before{
            content:'';
            position:absolute;
            width:100%;
            height:6px;
            top:0;
            left:0;
            background:linear-gradient(90deg,#0d6efd,#00c6ff);
        }

        .login-card.admin-card:before{
            background:linear-gradient(90deg,#dc3545,#ff8a00);
        }

        .login-card:hover{
            transform:translateY(-12px) scale(1.03);
            box-shadow:0 20px 45px rgba(0,0,0,.30);
        }

        .login-icon{
            width:90px;
            height:90px;
            object-fit:contain;
            margin-bottom:18px;
        }

        .login-card h3{
            font-weight:800;
            text-transform:uppercase;
            margin-bottom:12px;
        }

        .login-card p{
            color:#555;
            font-size:15px;
            min-height:48px;
        }

        .btn-login{
            border:none;
            border-radius:50px;
            padding:13px 32px;
            font-size:17px;
            font-weight:800;
            transition:.3s ease;
            color:#fff;
            text-decoration:none;
            display:inline-block;
            margin-top:12px;
            letter-spacing:.5px;
        }

        .btn-user{
            background:linear-gradient(45deg,#0d6efd,#00c6ff);
        }

        .btn-admin{
            background:linear-gradient(45deg,#dc3545,#ff8a00);
        }

        .btn-login:hover{
            color:#fff;
            text-decoration:none;
            transform:scale(1.09);
            box-shadow:0 10px 22px rgba(0,0,0,.25);
        }

        .date-box{
            background:#ffffff;
            color:#1D1E26;
            font-weight:800;
            display:inline-block;
            padding:8px 22px;
            border-radius:50px;
            box-shadow:0 5px 15px rgba(0,0,0,.15);
        }

        @media(max-width:768px){
            .portal-title{
                font-size:30px;
            }

            .portal-subtitle{
                font-size:16px;
            }

            .login-box{
                padding:22px;
            }

            .portal-bg{
                min-height:auto;
                padding:40px 0;
            }
        }
    </style>
</head>

<body class="sidebar-toggle-display sidebar-hidden">

<div class="container-scroller">

    <?php include('includes/topbar.php'); ?>

    <div class="container-fluid page-body-wrapper">

        <?php include('includes/sidebar.php'); ?>

        <div class="main-panel">

            <div class="content-wrapper" style="padding:0">

                <div class="row">
                    <div class="col-md-12 stretch-card">

                        <div class="card" style="border-top:5px solid #1D1E26;border-radius:0;">

                            <div class="card-body portal-bg d-flex align-items-center">

                                <div class="container portal-content">

                                    <div class="text-center mb-4">
                                        <div class="date-box">
                                            Today Date : <?php echo date('d/m/Y'); ?>
                                        </div>
                                    </div>

                                    <div class="text-center mb-5">
                                        <h1 class="portal-title">
                                            Online Complaints Management System
                                        </h1>

                                        <p class="portal-subtitle">
                                            Fast • Transparent • Citizen Friendly
                                        </p>
                                    </div>

                                    <div class="row justify-content-center">

                                        <div class="col-lg-8 col-md-10">

                                            <div class="login-box">

                                                <div class="row">

                                                    <div class="col-md-6 mb-4 mb-md-0">

                                                        <div class="login-card">

                                                            <img src="assets/images/1.png" class="login-icon" alt="User Login">

                                                            <h3 class="text-primary">
                                                                User Login
                                                            </h3>

                                                            <p>
                                                                Register complaints and track complaint status online.
                                                            </p>

                                                            <a href="userLogin.php?st=new" class="btn-login btn-user">
                                                                USER LOGIN
                                                            </a>

                                                        </div>

                                                    </div>

                                                    <div class="col-md-6">

                                                        <div class="login-card admin-card">

                                                            <img src="assets/images/2.png" class="login-icon" alt="Admin Login">

                                                            <h3 class="text-danger">
                                                                Admin Login
                                                            </h3>

                                                            <p>
                                                                Authorized officers can access the administration panel.
                                                            </p>

                                                            <a href="login.php" class="btn-login btn-admin">
                                                                ADMIN LOGIN
                                                            </a>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <?php include('includes/footer1.php'); ?>

        </div>

    </div>

</div>

<?php include('includes/foot1.php'); ?>

</body>
</html>