1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / earnlouq / tapnaire.live / user / includes /
Filename : header.php
back
<?php
//error_reporting(E_ALL);
//ini_set('display_errors', 1);

$uid= $_SESSION['id'];
$sql = "SELECT * FROM `users` WHERE `id`=$uid";
$res = mysqli_query($con, $sql);
$user = mysqli_fetch_assoc($res);
$fullname=$user['fullname'];
$username=$user['username'];
$profile_pic=$user['user_picture'];
$country_id=$user['country_id'];

$initials = substr($fullname, 0, 2);

$is_vendor=$user['is_vendor'];

$activity_balance=number_format($user['earnings']);
$referral_balance=number_format($user['ref_bonus']);

$sql2 = "SELECT * FROM `countries` WHERE `id`= '$country_id' ";
$res2 = mysqli_query($con, $sql2);
$currency = mysqli_fetch_assoc($res2);
$symbol=$currency['symbol'];

// Query to count unread notifications
$countUnreadQuery = "SELECT COUNT(*) AS unread_count FROM notifications WHERE receiver_id = ? AND is_read = 0";
$stmtCountUnread = mysqli_prepare($con, $countUnreadQuery);
mysqli_stmt_bind_param($stmtCountUnread, "s", $uid); // Assuming you have an active session with the user's ID
mysqli_stmt_execute($stmtCountUnread);
$resultCountUnread = mysqli_stmt_get_result($stmtCountUnread);
$countUnread = 0;

if ($rowCountUnread = mysqli_fetch_assoc($resultCountUnread)) {
$countUnread = $rowCountUnread['unread_count'];
}
?>
<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      href="assets/images/logo.png"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="assets/css/swiper.min.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link rel="manifest" href="manifest.json" />
    <title>Dashboard - Tapnaire</title>
  <link href="style.css" rel="stylesheet">
  <link href="assets/css/custom.css" rel="stylesheet"></head>

</head>
  <body class="-z-20">
    <div
      class="container min-h-dvh relative overflow-hidden py-5 dark:text-white dark:bg-black"
    >
      <!-- Absolute Items Start -->
      <img
        src="assets/images/header-bg-1.png"
        alt=""
        class="absolute top-0 left-0 right-0 -mt-6"
      />
      <div
        class="absolute top-0 left-0 bg-[#F46F20] blur-[145px] h-[174px] w-[149px]"
        ></div>
        <div
        class="absolute top-40 right-0 bg-[#012d30] blur-[150px] h-[174px] w-[91px]"
        ></div>
        <div
        class="absolute top-80 right-40 bg-[#FF8C42] blur-[235px] h-[205px] w-[176px]"
        ></div>
        <div
        class="absolute bottom-0 right-0 bg-[#F46F20] blur-[220px] h-[174px] w-[149px]"
        ></div>
      <!-- Absolute Items End -->

       <!-- Page Title Start -->
       <div class="relative z-10 pb-20">
        <div class="flex justify-between items-center gap-4 px-6 relative z-20">
          <div class="flex justify-start items-center gap-2">
            <button
              class="sidebarModalOpenButton text-2xl text-white !leading-none"
            >
              <i class="material-icons">menu</i>
            </button>
            <h2 class="text-2xl font-semibold text-white" style="font-size:18px;">Hi, <?php echo $username; ?></h2>
          </div>
          <div class="flex justify-start items-center gap-2">
          
            <a
              href="profile.php"
              class="text-white border border-color24 p-1 rounded-full flex justify-center items-center bg-color24"
            >
            <img src="../admin/profilepics/<?php echo $profile_pic ;?>" alt=""  
            style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;"
            />

            </a>
          </div>
        </div>
        <!-- Page Title End -->

        <!-- Sidebar Start -->
    <div class="hidden sidebarModal inset-0 z-50">
      <div class="container bg-black bg-opacity-80 h-full overflow-y-auto">
        <div class="w-[330px] bg-slate-50 relative">
          <button
            class="sidebarModalCloseButton absolute top-3 right-3 border rounded-full border-p1 flex justify-center items-center p-1 text-white"
          >
            <i class="ph ph-x"></i>
          </button>
          <div class="bg-p2 text-white pt-8 pb-4 px-5">
            <div
              class="flex justify-start items-center gap-3 pb-6 border-b border-color24 border-dashed"
            >
            <img src="../admin/profilepics/<?php echo $profile_pic; ?>" alt="Profile Picture"  
               style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;"/>

              <div class="">
                <p class="text-1xl font-semibold">
                <?php echo $fullname; ?> <i class="ph-fill ph-seal-check text-p1"></i>
                </p>
                <p class="text-xs">
                  <span class="font-semibold"></span><?php echo $username; ?>
                </p>
              </div>
            </div>
        
           
          </div>
          <div class="flex flex-col">
            <a
              href="profile.php"
              class="flex justify-between items-center py-3 px-4 border-b border-dashed border-color21 dark:bg-color1 dark:border-color24"
            >
              <div class="flex justify-start items-center gap-3">
                <div
                    class="flex justify-center items-center p-2 rounded-full border text-lg !leading-none bg-bgColor14 border-bgColor16 text-p1"

                >
                  <i class="ph ph-user"></i>
                </div>
                <p class="font-semibold dark:text-white">Profile</p>
              </div>
              <div
                class="flex justify-center items-center rounded-full text-p1"
              >
                <i class="ph ph-arrow-right"></i>
              </div>
            </a>
            <a
              href="withdrawal.php"
              class="flex justify-between items-center py-3 px-4 border-b border-dashed border-color21 dark:bg-color1 dark:border-color24"
            >
              <div class="flex justify-start items-center gap-3">
                <div
                                    class="flex justify-center items-center p-2 rounded-full border text-lg !leading-none bg-bgColor14 border-bgColor16 text-p1"

                >
                  <i class="ph ph-money"></i>
                </div>
                <p class="font-semibold dark:text-white">Withdrawal</p>
              </div>
              <div
                class="flex justify-center items-center rounded-full text-p1"
              >
                <i class="ph ph-arrow-right"></i>
              </div>
            </a>
            <a
              href="sponsored-ads.php"
              class="flex justify-between items-center py-3 px-4 border-b border-dashed border-color21 dark:bg-color1 dark:border-color24"
            >
              <div class="flex justify-start items-center gap-3">
                <div
                                    class="flex justify-center items-center p-2 rounded-full border text-lg !leading-none bg-bgColor14 border-bgColor16 text-p1"

                >
                  <i class="ph ph-info"></i>
                </div>
                <p class="font-semibold dark:text-white">Advert Post</p>
              </div>
              <div
                class="flex justify-center items-center rounded-full text-p1"
              >
                <i class="ph ph-arrow-right"></i>
              </div>
            </a>
            
            <a
              href="market-place.php"
              class="flex justify-between items-center py-3 px-4 border-b border-dashed border-color21 dark:bg-color1 dark:border-color24"
            >
              <div class="flex justify-start items-center gap-3">
                <div
                                    class="flex justify-center items-center p-2 rounded-full border text-lg !leading-none bg-bgColor14 border-bgColor16 text-p1"

                >
                  <i class="ph ph-storefront"></i>
                </div>
                <p class="font-semibold dark:text-white">Market Place</p>
              </div>
              <div
                class="flex justify-center items-center rounded-full text-p1"
              >
                <i class="ph ph-arrow-right"></i>
              </div>
            </a>
             <a
              href="referrals.php"
              class="flex justify-between items-center py-3 px-4 border-b border-dashed border-color21 dark:bg-color1 dark:border-color24"
            >
              <div class="flex justify-start items-center gap-3">
                <div
                                    class="flex justify-center items-center p-2 rounded-full border text-lg !leading-none bg-bgColor14 border-bgColor16 text-p1"

                >
                  <i class="ph ph-users-three"></i>
                </div>
                <p class="font-semibold dark:text-white">Team</p>
              </div>
              <div
                class="flex justify-center items-center rounded-full text-p1"
              >
                <i class="ph ph-arrow-right"></i>
              </div>
            </a>
            
           
         
            <?php if ($is_vendor == '1'){ ?>
            <a
              href="coupons.php"
              class="flex justify-between items-center py-3 px-4 border-b border-dashed border-color21 dark:bg-color1 dark:border-color24"
            >
              <div class="flex justify-start items-center gap-3">
                <div
                class="flex justify-center items-center p-2 rounded-full border text-lg !leading-none bg-bgColor14 border-bgColor16 text-p1"
                >
                  <i class="ph ph-diamonds-four"></i>
                </div>
                <p class="font-semibold dark:text-white">Coupon Dashboard</p>
              </div>
              <div
                class="flex justify-center items-center rounded-full text-p1"
              >
                <i class="ph ph-arrow-right"></i>
              </div>
            </a>
           <?php } ?>
           
           
           <a
              href="history.php"
              class="flex justify-between items-center py-3 px-4 border-b border-dashed border-color21 dark:bg-color1 dark:border-color24"
            >
              <div class="flex justify-start items-center gap-3">
                <div
                  class="flex justify-center items-center p-2 rounded-full border text-lg !leading-none bg-bgColor14 border-bgColor16 text-p1"
                  >
                  <i class="ph ph-diamonds-four"></i>
                </div>
                <p class="font-semibold dark:text-white">History</p>
              </div>
              <div
                class="flex justify-center items-center rounded-full text-p1"
              >
                <i class="ph ph-arrow-right"></i>
              </div>
            </a>
            <button
              class="flex justify-between items-center py-3 px-4 dark:bg-color1 withdrawModalOpenButton"
            >
              <div class="flex justify-start items-center gap-3">
                <div
                  class="flex justify-center items-center p-2 rounded-full border text-lg !leading-none bg-bgColor14 border-bgColor16 text-p1"
                >
                  <i class="ph ph-sign-out"></i>
                </div>
                <p class="font-semibold text-p1">Logout</p>
              </div>
              <div
                class="flex justify-center items-center rounded-full text-p1"
              >
                <i class="ph ph-arrow-right"></i>
              </div>
            </button>
          </div>
          <div style="margin-bottom:80px;"
          >
            
          </div>
        </div>
      </div>
    </div>
    <!-- Sidebar End -->

    <style>
  .bg-primary-custom{
    background:#997600 !important;
  }
.hidden { display: none; }
.toggle-button-visible {
    background:none;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-left: 0px !important;
    padding:0px;
    margin:0;
}
.toggle-button-visible i{
font-size:18px;
}
.card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  border-radius:50%;
  margin-bottom:5px;
}
.feature-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.bg-primary{
  background:#00e0af !important;
}
.feature-card{
  color:#000000 !important;
}
</style>

<style>
/* Hide scroll bar but allow scrolling */
.slider-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.slider-container::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

/* Notification dots */
.slider-dots {
    display: none; /* Initially hidden */
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.dot.active {
    background-color: #000000;
}

@media (max-width: 768px) {
    /* Ensure the container remains scrollable without showing the scrollbar */
    .slider-container {
        overflow-x: auto;
    }

    /* Show notification dots only on mobile */
    .slider-dots {
        display: block;
    }
}
.swiper-slide{
  min-width:130px;
  width:auto !important;
}

/* Fullscreen Overlay */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

/* Task Modal (Now Scrollable) */
#taskModal {
    display: none;
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 430px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    text-align: center;

    /* Enable scrolling */
    max-height: 85vh;  /* Limits height to 80% of viewport */
    overflow-y: auto;   /* Enables vertical scrolling if content overflows */
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
}

/* Task Content */
.task-content {
    padding: 15px;
    padding-bottom:20px;
}

/* Task Title */
.task-content h2 {
    margin-top: 10px;
    font-size: 20px;
    color: #222;
    font-weight: 600;
}

/* Task Description */
.task-content p {
    font-size: 16px;
    color: #555;
    margin-bottom: -20px;
    word-wrap: break-word;
}

/* Task Image */
.task-image {
    width: 100%;
    max-height: 300px; /* Limits image height */
    border-radius: 5px;
    margin: 15px 0;
    border-radius:5px;
    object-fit: contain; /* Ensures the full image is visible */
}
</style>