<section
        class="dnone profile-section container p-4 bg-light rounded shadow-sm my-4"
        id="profile"
      >
        <h2 class="text-primary mb-4">User Profile</h2>

        <div class="row">
          <!-- Profile Picture and User Info 
          <div class="col-md-4 text-center mb-4">
            <img
              src="https://placehold.co/150"
              alt="User Logo"
              class="rounded-circle mb-3 profile-pic"
              style="width: 150px; height: 150px"
            />
            <h3 class="text-primary UserName">UserName</h3>
            <p class="text-secondary"><strong>Username:</strong> <p class="UserUsername">UserUsername</p></p>
            <p class="text-secondary"><strong>Balance:</strong> <p class="user-balance">user-balance</p> </p>
          </div>-->



          <div class="user-card">
        <!-- User Image and Info -->
        <div>
           <img
              src="https://placehold.co/150"
              alt="User Logo"
              class="rounded-circle mb-3 profile-pic"
              style="width: 100px; height: 100px"
            />
        </div>
        <div class="profile-info1">
            <h3 class="profile-name1 UserName">UserName</h3>
            <p class="profile-details1"><strong></strong> <span class="UserUsername">UserUsername</span></p>
            <p class="profile-details1"><strong></strong> <span class="user-balance">user-balance</span></p>
        </div>
    </div>

          <div class="col-md-8">
            <div class="row">
              <div class="col-md-6 mb-4">
                
                  <div class="card-body">
                    


           
              </div>



               <!-- Earnings Section -->
  <div class="earnings-container">
    <div class="earn-card">
      <h5>Total Earnings</h5>
      <span id="totalEarnings" class="lifetime_earning">lifetime_earning</span>
    </div>


    <div class="earn-card">
      <h5>Lifetime Earnings</h5>
      <span id="totalAdsWatched" class="totalAdsWatched">totalAdsWatched</span>
    </div>
  </div>



               <!-- Earnings Section -->
  <div class="earnings-container">
    <div class="earn-card">
      <h5>Telegram Channal</h5>
      <a href="<?php echo e($links->telegram ?? '#'); ?>" class="btn btn-primary" target="_blank">Join Now</a>
    </div>


    <div class="earn-card">
      <h5>WebSite Visit Now </h5>
       <a id="taskButton" href="<?php echo e($links->youtube ?? '#'); ?>" class="btn btn-primary" onclick="startTimer()" target="_blank">Visit Now</a>
    </div>
  </div>





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

        <style>
          @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');

.profile-card1 {
    background-color: white;
    border: 2px solid #D35400; /* Dark Orange Border */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: auto; /* Center the card */
    margin-bottom: 15px;
    font-family: 'Quicksand', sans-serif; /* Apply Quicksand Font */
}

.profile-info1 {
    flex: 1;
    text-align: left;
    padding-left: 20px;
}

.profile-pic1 {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #D35400; /* Dark Orange Border */
}

.profile-name1 {
    font-size: 18px;
    font-weight: bold;
    color: #D35400; /* Dark Orange */
    margin-bottom: 5px;
}

.profile-details1 {
    color: #333;
    font-size: 16px;
    margin-bottom: 5px;
}

.card-custom1 {
    border: 2px solid #D35400; /* Dark Orange Border */
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    background-color: white;
    font-weight: bold;
}

/* Styling for Total Earnings and Ads Watched */
.text-dark-orange1 {
    color: #D35400 !important;
}
</style>
      </section><?php /**PATH E:\vAlphaBot\resources\views/profile.blade.php ENDPATH**/ ?>