<?php
session_start();
include("admin/conn.php");

// Check if the user is not logged in
if(!isset($_SESSION["id"])) {
    // Redirect to the login page
    header("Location: login.php");
    exit();
}

// Initialize variables
$username = '';
$dob = '';
$email = '';
$location = '';
$status = '';

// Retrieve the user's information from the database using their user_id
$user_id = $_SESSION["id"];
$query = "SELECT username, dob, email, location, status FROM tb_user WHERE id = $user_id";
$result = mysqli_query($conn, $query);

if ($result && mysqli_num_rows($result) > 0) {
    $user_data = mysqli_fetch_assoc($result);
    $username = $user_data["username"];
    $dob = $user_data["dob"];
    $email = $user_data["email"];
    $location = $user_data["location"];
    $status = $user_data["status"];
}
?>
<!DOCTYPE html>
<!-- 
   Template Name: fervor
   Version: 1.0.0
    Author: Webstrot
-->
<html>


<!-- Mirrored from webstrot.com/html/fervor/html/index4.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 18 Apr 2024 11:28:57 GMT -->
<head>
    <meta charset="utf-8">
    <title>lustyloops - Explore, Connect, and Chat with Amazing People Online</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta name="description" content="fervor" />
    <meta name="keywords" content="fervor" />
    <meta name="author" content="" />
    <meta name="MobileOptimized" content="320" />
    <link rel="icon" type="image/png" href="images/favicon.png">
    <link rel="stylesheet" type="text/css" href="css/fonts.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/settings.css">
    <link rel="stylesheet" type="text/css" href="css/layers.css">
    <link rel="stylesheet" type="text/css" href="css/navigation.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" href="new.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-Aeg+XtOY4EGO9z+JJKjt4s2jhNjzP1eKqW5IOOUpJNN7G07boWwRy2PkIBNpxMw7XoL2HsAtM6/dT27jWjvzwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
.logout-btn {
    color: black;
    font-size: 17px;
    position: absolute;
    text-align: center;
    justify-content: center;
    width: 109px;
    left: -60px;
    transition: transform 0.3s ease;
    background: #fff;
    border-radius: 8px;
    padding: 12px 24px;
}


.logout-btn:hover {
    background: #fff;
}


.top-main-wrapper .header-box {
    width: 100%;
    height: 70px;
    background-color: #1D1C29;
}
    </style>

</head>

<body>
    

    <!-- main header wrapper start-->
    <section>
        <div class="top-main-wrapper">
            <div class="header-box" id="header">
                <header class="w-100 float-start">
                    <div class=" main-header main-header-four w-100 float-start">
                        <div class="container">
                            <div class="row align-items-center">
                                <div class="col-lg-2 col-6 p-0">
                                    <div class="logo">
                                        <a href="members.php">
                                        <img src="images/logo.png" class="img-fluid" alt="logo" style="max-width: 126%;margin-left: -34px;">
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-10 col-6 p-0">
                                    <div class="main-menu w-100 float-end">
                                        <div class="overlay d-block d-lg-none"></div>
                                        <ul class="float-end sidebar-menu-css" id="cssmenu">
                                        </ul>
                                        <ul class="index2-inner-ul">
                                            <li class="d-none d-lg-block">
                                                <button class="js-toggle-dark-mode js-toggle-dark-mode-2" type="button">
                                                    <i class="fa fa-sun-o darkSunMode" aria-hidden="true"></i>
                                                    <i class="fa fa-moon-o darkMoonMode" aria-hidden="true"></i>
                                                </button>
                                            </li>


                                 

                                            <li class="d-none d-lg-block" style="margin-right: -155px; position: relative;">
                                                <a href="#" class="logout-btn" onclick="toggleDropdown()" style="color: black;"><i class="fa fa-user" style="color: black;"></i></a>
                                                <div id="dropdown-menu" style="display: none;position: absolute;top: 108%;left: -129px;background-color: rgb(20, 20, 20);border: 1px solid rgb(204, 204, 204);border-radius: 8px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;width: 180px;">
                                                    <a href="upgrade.php" style="display: block;padding: 10px 20px;color: #fff;text-decoration: none;text-align: left;">
                                                        <i class="fa fa-user" style="margin-right: 8px; color: #fff;"></i> My Profile
                                                    </a>
                                                    <a href="logout.php" style="display: block;padding: 10px 20px;color: #fff;text-decoration: none;text-align: left;">
                                                        <i class="fa fa-sign-out-alt" style="margin-right: 8px;color: #fff;"></i> Logout
                                                    </a>
                                                </div>
                                            </li>

<script>
    function toggleDropdown() {
        const dropdown = document.getElementById('dropdown-menu');
        dropdown.style.display = dropdown.style.display === 'none' || dropdown.style.display === '' ? 'block' : 'none';
    }

    // Close dropdown if clicked outside
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('dropdown-menu');
        const button = document.querySelector('.logout-btn');
        if (!button.contains(event.target) && !dropdown.contains(event.target)) {
            dropdown.style.display = 'none';
        }
    });
</script>
                                            <li class="d-none d-lg-block" style="margin-right: -148px;padding: 10px 20px;margin-left: -164px;margin-top: -1px;border-radius: 16px;">
                                                <a href="upgrade.php" style="background: linear-gradient(90deg, #ff5722 0%, #ff9800 100%);color: white;border-radius: 8px;padding: 7px;">Upgrade Now</a>
                                            </li>

                                        </ul>
                                        <div class="mobToggle d-flex d-lg-none">
                                            <button class="js-toggle-dark-mode" type="button">
                                                <i class="fa fa-sun-o darkSunMode" aria-hidden="true"></i>
                                                <i class="fa fa-moon-o darkMoonMode" aria-hidden="true"></i>
                                            </button>
                                            <div class="toggle-btn toggle-btn-2">
                                                <div class="icon-left"></div>
                                                <div class="icon-right"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>
            </div>



