<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ceylon Eco Spices | Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Montserrat Font -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">

    <style>
        body{
            margin:0;
            font-family:'Montserrat', sans-serif;
        }

        /* Top & Bottom bars */
        .top-bar,
        .bottom-bar{
            background:#004206;
            color:#fff;
            text-align:center;
            font-weight:700;
        }

        .top-bar{
            font-size:24px;
            padding:8px 0;
        }

        .bottom-bar{
            padding:8px 0;
        }

        .kmech-logo{
            height:24px;
        }



        /* Main background */
        .main-section{
            min-height: calc(100vh - 80px);
            background: url('assets/images/bg.jpeg') no-repeat center / cover;
        }


        /* Right blur overlay */
       .blur-side{
           backdrop-filter: blur(10px);
           background: rgba(180, 220, 190, 0.55);
           min-height: calc(100vh - 80px);
           padding: 50px 70px;
       }




        /* Home link */
        .home-link{
            display:flex;
            align-items:center;
            gap:10px;
            font-size:17px;
            font-weight:700;
            color:#000;
            text-decoration:none;
            margin-bottom:40px;
        }

        .home-link img{
            width:17px;
        }



        /* Headings */
        .title{
            font-size:45px;
            font-weight:700;
            color:#000;
        }

        .subtitle{
            font-size:45px;
            font-weight:300;
            color:#000;
            margin-bottom:40px;
        }


        /* Login box glass */
        .login-box{
            background: rgba(255,255,255,0.45);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 30px;
            max-width: 500px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
             margin-top: 30px;
        }

        /* Labels */
        .login-box label{
            font-size:13px;
            font-weight:700;
            color:#121212;
            margin-bottom:8px;
            display:block;
        }

        /* White input box */
        .input-wrap{
            background:#ffffff;
            padding: 12px 14px 8px;
            margin-bottom:26px;
        }

        /* Input field inside box */
        .input-wrap input{
            width:100%;
            border:none;
            border-bottom:2px solid rgba(0,0,0,0.25);
            background:transparent;
            border-radius:0;
            padding:4px 0;
            font-weight:500;
            box-shadow:none;
             font-size:15px;
        }

        /* Focus effect */
        .input-wrap input:focus{
            outline:none;
            box-shadow:none;
            border-bottom:2px solid #004206;
        }

        /* Login button */
        .login-btn{
            background:#004206;
            color:#ffffff;
            font-size:16px;
            font-weight:700;
            border:none;
            padding:10px 0;
            width:120px;
        }


        .copyright{
            margin-top:60px;
            font-size:16px;
            font-weight:500;
            color:#fff;
        }
    </style>
</head>
<body>

<!-- TOP BAR -->
<div class="top-bar">
    CEYLON ECO SPICES (PVT) LTD
</div>

<!-- MAIN SECTION -->
<div class="container-fluid main-section">
    <div class="row h-100">

        <!-- LEFT IMAGE SIDE -->
        <div class="col-md-6 d-none d-md-block"></div>

        <!-- RIGHT BLUR SIDE -->
        <div class="col-md-6 blur-side">

            <a href="#" class="home-link">
                <img src="assets/images/home.png" alt="Home">
                Home
            </a>

            <div class="title">FARMER MANAGEMENT</div>
            <div class="subtitle">WELCOME BACK!</div>

            <div class="login-box">
                <form>

                    <label>USER_ID</label>
                    <div class="input-wrap">
                        <input type="text" class="form-control" placeholder="">
                    </div>

                    <label>PASSCODE</label>
                    <div class="input-wrap">
                        <input type="password" class="form-control" placeholder="">
                    </div>

                    <button type="submit" class="login-btn">LOGIN</button>

                </form>
            </div>


            <div class="copyright">
                2026 © Ceylon Eco Spices (Pvt) Ltd
            </div>

        </div>
    </div>
</div>

<!-- BOTTOM BAR -->
<div class="bottom-bar">
    <img src="assets/images/kmech.png" alt="K-Mech" class="kmech-logo">
</div>


</body>
</html>




