<!--<section
        class="d-none earn-section container p-4 bg-light rounded shadow-sm"
        id="earn"
        style="height: 100vh"
      >
        <h2 class="text-primary mb-4">Earn</h2>

        <div class="row">
           Task Count and Progress 
          <div class="col-md-6 mb-4">
            <div class="card border-primary">
              <div class="card-body">
                <h5 class="card-title text-primary">Today's Tasks</h5>
                <p class="card-text mb-1">
                  <strong>Total Tasks:</strong> <span class="ads-limit-value taskCount" id="taskCount">taskCount</span>
                </p>
                <p class="card-text mb-1">
                  <strong>Completed:</strong>
                  <span id="tasksCompleted" class="tasksCompleted">tasksCompleted</span>
                </p>
                <p class="card-text mb-1">
                  <strong>Remaining:</strong>
                  <span id="tasksRemaining" class="tasksRemaining">tasksRemaining</span>
                </p>
               Start Task Button 
                <button id="show-ad" class="btn btn-primary mt-3 w-100">
                  Start Task Monetag
                </button>
          <button id="ad" class="btn btn-primary mt-3 w-100">-->
                <!--  Start Task Adsgram-->
                <!--</button>
              </div>

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

        
      </section>-->



      <section class="d-none earn-section container p-4 rounded shadow-sm" id="earn">

      <div class="card-body">
      <div class="text-center-box">Text Center</div>
      </div>

    

    <div class="row">
        <!-- Task Count and Progress -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body">
                    
                    <!-- Text Center Box -->
                    
                    
                    <h5 class="card-title">Today's Tasks</h5>
                    <p class="card-text mb-1">
                        <strong>Total Tasks:</strong> <span id="taskCount" class="taskCount">taskCount</span>
                    </p>
                    <p class="card-text mb-1">
                        <strong>Completed:</strong> <span id="tasksCompleted" class="tasksCompleted">tasksCompleted</span>
                    </p>
                    <p class="card-text mb-1">
                        <strong>Remaining:</strong> <span id="tasksRemaining" class="tasksRemaining">tasksRemaining</span>
                    </p>
                    
                    <!-- Start Task Button -->
                    <button id="show-ad" class="btn btn-primary mt-3 w-100">
                        Start Task Monetag
                    </button>
                </div>
            </div>
        </div>
    </div>



<div class="container mt-5">
  <h2 class="text-center">Web Task</h2>
  <div class="row text-center">
    <div class="col-md-4">
      <div class="card p-3">
        <img src="https://i.postimg.cc/zvJDCbsv/Solutions-website-logo-png-removebg-preview.png" width="50">
        <h5>WebVisit</h5>
        <a id="taskButton" href="<?php echo e($links->youtube ?? '#'); ?>" class="btn btn-danger" onclick="startTimer()" target="_blank">Visit Now</a>
        <p id="timer">60 seconds remaining</p> 
      </div>
    </div>

    

    <style> 

.earn-section {
    background-color: #f8f9fa; /* Light Gray Background */
    border-radius: 10px;
    padding: 20px;
    height: 100vh;
}

.earn-section h2 {
    color: #D35400; /* Dark Orange */
    font-weight: bold;
}

.card {
    width: 90%; /* Set card width to 90% */
    margin: auto; /* Center the card */
    border: 2px solid #D35400; /* Dark Orange Border */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft Shadow */
    text-align: center; /* Center all text inside the card */
}


.card1 {
    width: 90%; /* Set card width to 90% */
    margin: auto; /* Center the card */
    border: 2px solid #D35400; /* Dark Orange Border */
    height: 130px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft Shadow */
    text-align: center; /* Center all text inside the card */
}

.card-title {
    color: #D35400; /* Dark Orange Title */
    font-weight: bold;
}

.card-text {
    font-size: 1rem;
    color: #333; /* Dark Gray Text */
}

.btn-primary {
    background-color: #D35400; /* Dark Orange Button */
    border: none;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #B24300; /* Darker Orange on Hover */
}

.text-center-box {
    background-color: #D35400; /* Dark Orange Box */
    color: white;
    padding: 10px;
    font-weight: bold;
    border-radius: 5px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 18px;
    margin-top: 5px
}

     </style>






</section>

<?php /**PATH /home/devsetup/progressive.devsetuphub.top/resources/views/earn.blade.php ENDPATH**/ ?>