database Not Connected database Not Connected 
<!-- Data Tabled Css  -->
<link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.14/dist/sweetalert2.all.min.js"></script>
    <!-- Fav  -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.0/jquery.fancybox.min.css" rel="stylesheet" />
    <!-- Style for Dialog Box -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.0/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.0/jquery.fancybox.min.css">
  
<!-- font awesome icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  
  


<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM1MiwgMjAyMC8wMS8zMC0xNTo1MDozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIyRkFBNzE1MzEyNTExRUQ4NkFBRjE2MTI3NjdFNDRCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIyRkFBNzE2MzEyNTExRUQ4NkFBRjE2MTI3NjdFNDRCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjJGQUE3MTMzMTI1MTFFRDg2QUFGMTYxMjc2N0U0NEIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjJGQUE3MTQzMTI1MTFFRDg2QUFGMTYxMjc2N0U0NEIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4c0FRlAAAIMklEQVR42pRXC2yV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">


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

<head>

<meta charset="UTF-8">

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

<title>UCL | Create Account</title>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<style>

/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =====================================================
   BODY
===================================================== */

body {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 25px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 255, 170, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(0, 140, 255, .20),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #020617,
            #071426,
            #020617
        );

    color: #fff;

    overflow-x: hidden;

    position: relative;
}


/* =====================================================
   ANIMATED BACKGROUND
===================================================== */

body::before {

    content: "";

    position: fixed;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #00ffa3,
            #0077ff
        );

    filter: blur(100px);

    opacity: .15;

    top: -150px;

    left: -150px;

    animation: moveOne 9s infinite alternate ease-in-out;

    pointer-events: none;
}


body::after {

    content: "";

    position: fixed;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #00d4ff
        );

    filter: blur(110px);

    opacity: .13;

    right: -150px;

    bottom: -150px;

    animation: moveTwo 11s infinite alternate ease-in-out;

    pointer-events: none;
}


@keyframes moveOne {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(180px, 120px);
    }
}


@keyframes moveTwo {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-150px, -120px);
    }
}


/* =====================================================
   MAIN WRAPPER
===================================================== */

.register-wrapper {

    width: 100%;

    max-width: 1050px;

    min-height: 650px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background:
        rgba(255, 255, 255, .055);

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius: 30px;

    overflow: hidden;

    backdrop-filter: blur(25px);

    -webkit-backdrop-filter: blur(25px);

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .55);

    position: relative;

    z-index: 2;

    animation: cardIn .8s ease;
}


@keyframes cardIn {

    from {
        opacity: 0;
        transform: translateY(30px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =====================================================
   LEFT SIDE
===================================================== */

.info-section {

    padding: 60px 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(0, 255, 170, .08),
            rgba(0, 120, 255, .06)
        );

    border-right:
        1px solid rgba(255, 255, 255, .08);
}


.logo-box {

    width: 90px;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #00ffa3,
            #0077ff
        );

    box-shadow:
        0 15px 45px rgba(0, 180, 255, .3);

    margin-bottom: 30px;

    animation: logoFloat 3s ease-in-out infinite;
}


.logo-box img {

    width: 72px;

    height: 72px;

    object-fit: contain;

    border-radius: 18px;
}


@keyframes logoFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


.info-section h1 {

    font-size: 42px;

    line-height: 1.1;

    margin-bottom: 18px;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.gradient-text {

    background:
        linear-gradient(
            90deg,
            #00ffa3,
            #00d4ff,
            #8b5cf6
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.info-section p {

    color: #aebbd0;

    font-size: 15px;

    line-height: 1.7;

    max-width: 430px;

    margin-bottom: 35px;
}


/* FEATURES */

.features {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.feature {

    display: flex;

    align-items: center;

    gap: 13px;

    color: #dce7f5;

    font-size: 14px;
}


.feature-icon {

    width: 34px;

    height: 34px;

    border-radius: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        rgba(0, 255, 170, .10);

    border:
        1px solid rgba(0, 255, 170, .2);

    color: #00ffa3;

    font-size: 16px;
}


/* =====================================================
   FORM SIDE
===================================================== */

.form-section {

    padding: 50px;

    display: flex;

    justify-content: center;

    flex-direction: column;

    background:
        rgba(3, 10, 25, .48);
}


.form-title {

    margin-bottom: 30px;
}


.form-title h2 {

    font-size: 28px;

    margin-bottom: 7px;

    font-weight: 750;
}


.form-title span {

    color: #8c9ab1;

    font-size: 13px;
}


/* =====================================================
   INPUT
===================================================== */

.input-group {

    margin-bottom: 18px;

    position: relative;
}


.input-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    color: #c9d4e4;

    font-weight: 600;
}


.input-wrapper {

    position: relative;
}


.input-icon {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: #74849c;

    font-size: 17px;

    pointer-events: none;

    z-index: 2;
}


.input-wrapper input {

    width: 100%;

    height: 54px;

    padding:
        0 48px;

    border-radius: 14px;

    border:
        1px solid rgba(255, 255, 255, .11);

    outline: none;

    background:
        rgba(255, 255, 255, .055);

    color: #fff;

    font-size: 14px;

    transition: .3s;
}


.input-wrapper input::placeholder {

    color: #627087;
}


.input-wrapper input:focus {

    border-color: #00ffa3;

    background:
        rgba(0, 255, 163, .045);

    box-shadow:
        0 0 0 4px rgba(0, 255, 163, .08);
}


.password-toggle {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    border: none;

    background: none;

    color: #718096;

    cursor: pointer;

    font-size: 16px;

    z-index: 3;
}


.password-toggle:hover {

    color: #00ffa3;
}


/* =====================================================
   REGISTER BUTTON
===================================================== */

.register-btn {

    width: 100%;

    height: 56px;

    border: none;

    border-radius: 15px;

    cursor: pointer;

    margin-top: 8px;

    font-size: 15px;

    font-weight: 800;

    color: #001b14;

    background:
        linear-gradient(
            100deg,
            #00ffa3,
            #00d4ff
        );

    box-shadow:
        0 12px 35px rgba(0, 220, 190, .22);

    position: relative;

    overflow: hidden;

    transition: .3s;
}


.register-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 60%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform: skewX(-20deg);

    animation: shine 3s infinite;
}


@keyframes shine {

    0% {
        left: -100%;
    }

    40%,100% {
        left: 150%;
    }
}


.register-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(0, 220, 190, .35);
}


.register-btn:active {

    transform: scale(.98);
}


/* =====================================================
   LOGIN LINK
===================================================== */

.login-text {

    text-align: center;

    margin-top: 22px;

    font-size: 13px;

    color: #8390a5;
}


.login-text a {

    color: #00ffa3;

    text-decoration: none;

    font-weight: 700;

    margin-left: 4px;
}


.login-text a:hover {

    text-decoration: underline;
}


/* =====================================================
   SECURITY
===================================================== */

.security {

    margin-top: 22px;

    padding: 12px;

    border-radius: 12px;

    background:
        rgba(0, 255, 163, .045);

    border:
        1px solid rgba(0, 255, 163, .09);

    text-align: center;

    font-size: 11px;

    color: #75849a;
}


.security strong {

    color: #00ffa3;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 850px) {

    body {
        padding: 15px;
    }

    .register-wrapper {

        max-width: 520px;

        grid-template-columns: 1fr;

        min-height: auto;

        border-radius: 24px;
    }

    .info-section {

        padding: 38px 30px;

        border-right: none;

        border-bottom:
            1px solid rgba(255, 255, 255, .08);
    }

    .info-section h1 {

        font-size: 32px;
    }

    .info-section p {

        margin-bottom: 22px;
    }

    .form-section {

        padding: 35px 30px;
    }
}


@media (max-width: 480px) {

    body {

        padding: 10px;

        align-items: flex-start;

        padding-top: 20px;
    }

    .register-wrapper {

        border-radius: 20px;
    }

    .info-section {

        padding: 30px 22px;
    }

    .form-section {

        padding: 28px 22px;
    }

    .info-section h1 {

        font-size: 28px;
    }

    .logo-box {

        width: 72px;

        height: 72px;

        border-radius: 20px;
    }

    .logo-box img {

        width: 58px;

        height: 58px;
    }

    .form-title h2 {

        font-size: 24px;
    }

    .input-wrapper input {

        height: 52px;
    }
}

</style>

</head>


<body>


<div class="register-wrapper">


    <!-- =================================================
         LEFT INFORMATION
    ================================================== -->

    <div class="info-section">

        <div class="logo-box">

            <img
                src="/admin/img/LOGIN.gif"
                alt="UCL Logo"
            >

        </div>


        <h1>

            Join
            <span class="gradient-text">
                UCL Portal
            </span>

        </h1>


        <p>

            Create your secure account and get access
            to our fast, reliable and protected online
            services.

        </p>


        <div class="features">

            <div class="feature">

                <div class="feature-icon">
                    ✓
                </div>

                <span>
                    Secure & Protected Account
                </span>

            </div>


            <div class="feature">

                <div class="feature-icon">
                    ⚡
                </div>

                <span>
                    Fast & Reliable Portal
                </span>

            </div>


            <div class="feature">

                <div class="feature-icon">
                    🔒
                </div>

                <span>
                    Your information stays protected
                </span>

            </div>


            <div class="feature">

                <div class="feature-icon">
                    🚀
                </div>

                <span>
                    Easy & Quick Registration
                </span>

            </div>

        </div>

    </div>



    <!-- =================================================
         REGISTER FORM
    ================================================== -->

    <div class="form-section">


        <div class="form-title">

            <h2>
                Create Account
            </h2>

            <span>
                Enter your details to continue
            </span>

        </div>


        <form
            action=""
            method="POST"
            id="registerForm"
        >

            <input
                type="hidden"
                name="secret"
                value="ahkwebsolutions"
            >


            <!-- NAME -->

            <div class="input-group">

                <label>
                    Full Name
                </label>

                <div class="input-wrapper">

                    <span class="input-icon">
                        👤
                    </span>

                    <input
                        type="text"
                        name="name"
                        placeholder="Enter your full name"
                        autocomplete="name"
                        required
                    >

                </div>

            </div>



            <!-- USERNAME -->

            <div class="input-group">

                <label>
                    Username / Phone
                </label>

                <div class="input-wrapper">

                    <span class="input-icon">
                        📱
                    </span>

                    <input
                        type="text"
                        name="username"
                        placeholder="Enter username or phone"
                        autocomplete="username"
                        required
                    >

                </div>

            </div>



            <!-- EMAIL -->

            <div class="input-group">

                <label>
                    Email
                    <small style="color:#64748b;">
                        (Optional)
                    </small>
                </label>

                <div class="input-wrapper">

                    <span class="input-icon">
                        ✉
                    </span>

                    <input
                        type="email"
                        name="emailid"
                        placeholder="Enter your email"
                        autocomplete="email"
                    >

                </div>

            </div>



            <!-- PASSWORD -->

            <div class="input-group">

                <label>
                    Password
                </label>

                <div class="input-wrapper">

                    <span class="input-icon">
                        🔐
                    </span>

                    <input
                        type="password"
                        name="password"
                        id="password"
                        placeholder="Create a strong password"
                        autocomplete="new-password"
                        required
                    >

                    <button
                        type="button"
                        class="password-toggle"
                        onclick="togglePassword()"
                        id="toggleBtn"
                    >
                        👁
                    </button>

                </div>

            </div>



            <!-- BUTTON -->

            <button
                type="submit"
                class="register-btn"
                id="registerBtn"
            >

                <span id="btnText">
                    Create Account →
                </span>

            </button>


        </form>



        <div class="security">

            🔐
            <strong>100% Secure</strong>
            &nbsp; Your registration information is protected.

        </div>


        <div class="login-text">

            Already have an account?

            <a href="login.php">
                Login Now
            </a>

        </div>


    </div>

</div>



<script>

/* =====================================================
   PASSWORD SHOW / HIDE
===================================================== */

function togglePassword() {

    const password =
        document.getElementById("password");

    const toggle =
        document.getElementById("toggleBtn");


    if (password.type === "password") {

        password.type = "text";

        toggle.innerHTML = "🙈";

    } else {

        password.type = "password";

        toggle.innerHTML = "👁";
    }
}


/* =====================================================
   FORM LOADING EFFECT
===================================================== */

document
.getElementById("registerForm")
.addEventListener("submit", function () {

    const btn =
        document.getElementById("registerBtn");

    const text =
        document.getElementById("btnText");


    btn.style.pointerEvents = "none";

    btn.style.opacity = ".75";

    text.innerHTML =
        "Processing Payment... ⏳";

});


/* =====================================================
   INPUT ANIMATION
===================================================== */

document
.querySelectorAll("input")
.forEach(function(input) {

    input.addEventListener(
        "focus",
        function() {

            this.parentElement
                .parentElement
                .style.transform =
                "translateY(-1px)";

        }
    );

    input.addEventListener(
        "blur",
        function() {

            this.parentElement
                .parentElement
                .style.transform =
                "translateY(0)";

        }
    );

});

</script>


</body>
</html>