Countdown Component

Countdown JavaScript Methods & Events

// Initialize countdown with options
const countdown = UIkit.countdown(element, {
  date: '2024-12-31T23:59:59+00:00',
  offset: 0,
  segments: 4,
  labels: false,
  separator: true,
  updateInterval: 1000,
  autostart: true
});

// Countdown methods
const countdownElement = document.getElementById('myCountdown');
const countdownInstance = UIkit.countdown(countdownElement);

// Start countdown
countdownInstance.start();

// Stop/pause countdown
countdownInstance.stop();

// Reset countdown
countdownInstance.reset();

// Update target date
countdownInstance.update('2025-01-01T00:00:00+00:00');

// Get remaining time
const remaining = countdownInstance.getRemaining();
console.log('Days:', remaining.days);
console.log('Hours:', remaining.hours);
console.log('Minutes:', remaining.minutes);
console.log('Seconds:', remaining.seconds);
console.log('Total seconds:', remaining.total);

// Countdown events
countdownElement.addEventListener('start', function() {
  console.log('Countdown started');
});

countdownElement.addEventListener('stop', function() {
  console.log('Countdown stopped');
});

countdownElement.addEventListener('update', function(event) {
  const detail = event.detail;
  console.log('Countdown updated:', detail);
  
  // Update UI with remaining time
  document.getElementById('timeRemaining').textContent = 
    `${detail.days}d ${detail.hours}h ${detail.minutes}m ${detail.seconds}s`;
});

countdownElement.addEventListener('complete', function() {
  console.log('Countdown completed!');
  
  // Show completion message
  document.getElementById('completionMessage').hidden = false;
  
  // Trigger completion action
  triggerCompletionAction();
});

// Dynamic countdown control
const countdownController = {
  element: null,
  instance: null,
  
  init: function(elementId, targetDate) {
    this.element = document.getElementById(elementId);
    this.instance = UIkit.countdown(this.element, {
      date: targetDate,
      autostart: false
    });
    
    this.bindEvents();
  },
  
  bindEvents: function() {
    // Start button
    document.getElementById('startBtn').addEventListener('click', () => {
      this.instance.start();
      this.updateStatus('Running');
    });
    
    // Pause button
    document.getElementById('pauseBtn').addEventListener('click', () => {
      this.instance.stop();
      this.updateStatus('Paused');
    });
    
    // Reset button
    document.getElementById('resetBtn').addEventListener('click', () => {
      this.instance.reset();
      this.updateStatus('Reset');
    });
    
    // Update time button
    document.getElementById('updateBtn').addEventListener('click', () => {
      const newDate = document.getElementById('newDate').value;
      if (newDate) {
        this.instance.update(newDate);
        this.updateStatus('Updated');
      }
    });
  },
  
  updateStatus: function(status) {
    document.getElementById('statusDisplay').textContent = `Status: ${status}`;
  },
  
  getRemainingString: function() {
    const remaining = this.instance.getRemaining();
    return `${remaining.days}d ${remaining.hours}h ${remaining.minutes}m ${remaining.seconds}s`;
  }
};

// Initialize controller
countdownController.init('myCountdown', '2024-12-31T23:59:59+00:00');

// Countdown with percentage
function createPercentageCountdown(elementId, targetDate, totalDuration) {
  const countdownElement = document.getElementById(elementId);
  const progressBar = document.getElementById('progressBar');
  const percentageDisplay = document.getElementById('percentageDisplay');
  
  const countdown = UIkit.countdown(countdownElement, {
    date: targetDate,
    autostart: true
  });
  
  countdownElement.addEventListener('update', function(event) {
    const remaining = event.detail.total; // total seconds remaining
    const totalSeconds = totalDuration;
    const percentage = ((totalSeconds - remaining) / totalSeconds * 100).toFixed(1);
    
    // Update progress bar
    progressBar.style.width = `${percentage}%`;
    
    // Update percentage display
    percentageDisplay.textContent = `${percentage}% complete`;
    
    // Change color based on percentage
    if (percentage > 75) {
      progressBar.style.backgroundColor = '#32d296'; // green
    } else if (percentage > 50) {
      progressBar.style.backgroundColor = '#faa05a'; // orange
    } else if (percentage > 25) {
      progressBar.style.backgroundColor = '#f0506e'; // red
    }
  });
  
  countdownElement.addEventListener('complete', function() {
    progressBar.style.width = '100%';
    progressBar.style.backgroundColor = '#1e87f0'; // blue
    percentageDisplay.textContent = '100% - Completed!';
  });
}

// Example usage: 24 hour countdown
createPercentageCountdown('dayCountdown', '+24:00:00', 86400); // 24 hours in seconds

// Countdown scheduler
const countdownScheduler = {
  schedules: [],
  
  addSchedule: function(name, targetDate, callback) {
    const elementId = `countdown-${name}`;
    const element = document.createElement('div');
    element.id = elementId;
    element.className = 'uk-countdown';
    element.setAttribute('uk-countdown', `date: ${targetDate}`);
    
    document.getElementById('schedulesContainer').appendChild(element);
    
    const countdown = UIkit.countdown(element);
    
    element.addEventListener('complete', function() {
      if (callback) callback(name);
      this.remove(); // Remove element after completion
    });
    
    this.schedules.push({
      name: name,
      element: element,
      instance: countdown
    });
  },
  
  removeSchedule: function(name) {
    const index = this.schedules.findIndex(s => s.name === name);
    if (index !== -1) {
      this.schedules[index].instance.stop();
      this.schedules[index].element.remove();
      this.schedules.splice(index, 1);
    }
  },
  
  listSchedules: function() {
    return this.schedules.map(s => ({
      name: s.name,
      remaining: s.instance.getRemaining()
    }));
  }
};

// Add multiple countdowns
countdownScheduler.addSchedule('meeting', '+01:00:00', function(name) {
  console.log(`${name} countdown completed!`);
  alert('Time for your meeting!');
});

countdownScheduler.addSchedule('break', '+01:30:00', function(name) {
  console.log(`${name} countdown completed!`);
  alert('Time for a break!');
});

Product Launch Countdown

<!-- Product Launch Countdown -->
<div class="uk-card uk-card-default uk-card-large">
  <div class="uk-card-header">
    <div class="uk-grid-small uk-flex-middle" uk-grid>
      <div class="uk-width-auto">
        <img src="product-icon.png" width="60" height="60" alt="Product Icon">
      </div>
      <div class="uk-width-expand">
        <h3 class="uk-card-title uk-margin-remove-bottom">iPhone 16 Pro Max</h3>
        <p class="uk-text-meta uk-margin-remove-top">Next Generation Launch</p>
      </div>
    </div>
  </div>
  <div class="uk-card-body">
    <div class="uk-text-center">
      <h2 class="uk-heading-primary">Launching In</h2>
      <div class="uk-countdown uk-grid-small uk-child-width-auto uk-flex-center" uk-grid uk-countdown="date: 2024-09-15T09:00:00+00:00">
        <div>
          <div class="uk-countdown-number uk-countdown-days uk-box-shadow-medium uk-padding uk-text-large uk-text-bold"></div>
          <div class="uk-countdown-label uk-text-small uk-text-uppercase">Days</div>
        </div>
        <div class="uk-countdown-separator uk-flex uk-flex-middle uk-text-large">:</div>
        <div>
          <div class="uk-countdown-number uk-countdown-hours uk-box-shadow-medium uk-padding uk-text-large uk-text-bold"></div>
          <div class="uk-countdown-label uk-text-small uk-text-uppercase">Hours</div>
        </div>
        <div class="uk-countdown-separator uk-flex uk-flex-middle uk-text-large">:</div>
        <div>
          <div class="uk-countdown-number uk-countdown-minutes uk-box-shadow-medium uk-padding uk-text-large uk-text-bold"></div>
          <div class="uk-countdown-label uk-text-small uk-text-uppercase">Minutes</div>
        </div>
        <div class="uk-countdown-separator uk-flex uk-flex-middle uk-text-large">:</div>
        <div>
          <div class="uk-countdown-number uk-countdown-seconds uk-box-shadow-medium uk-padding uk-text-large uk-text-bold"></div>
          <div class="uk-countdown-label uk-text-small uk-text-uppercase">Seconds</div>
        </div>
      </div>
      
      <div class="uk-margin-medium-top">
        <div class="uk-progress uk-progress-large">
          <div class="uk-progress-bar" style="width: 75%;" id="launchProgress"></div>
        </div>
        <div class="uk-flex uk-flex-between uk-text-small uk-margin-small-top">
          <span>Pre-orders: 75% filled</span>
          <span id="remainingPreorders">250 remaining</span>
        </div>
      </div>
      
      <div class="uk-margin-medium-top">
        <button class="uk-button uk-button-primary uk-button-large">
          <span uk-icon="icon: cart" class="uk-margin-small-right"></span>
          Pre-order Now
        </button>
        <p class="uk-text-small uk-text-meta uk-margin-small-top">Limited quantity available</p>
      </div>
    </div>
  </div>
  <div class="uk-card-footer">
    <div class="uk-grid-small" uk-grid>
      <div class="uk-width-1-3">
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold">$1,199</div>
          <div class="uk-text-small">Starting Price</div>
        </div>
      </div>
      <div class="uk-width-1-3">
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold">256GB</div>
          <div class="uk-text-small">Base Storage</div>
        </div>
      </div>
      <div class="uk-width-1-3">
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold">24</div>
          <div class="uk-text-small">Hour Support</div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Update pre-order progress
const countdownElement = document.querySelector('[uk-countdown]');
const progressBar = document.getElementById('launchProgress');
const remainingDisplay = document.getElementById('remainingPreorders');

countdownElement.addEventListener('update', function(event) {
  const remaining = event.detail;
  const totalDays = 90; // 90 days until launch
  
  // Calculate progress percentage
  const daysRemaining = remaining.days;
  const progress = ((totalDays - daysRemaining) / totalDays * 100).toFixed(1);
  
  // Update progress bar
  progressBar.style.width = `${progress}%`;
  
  // Update remaining pre-orders (simulated)
  const remainingOrders = Math.max(0, 1000 - (daysRemaining * 10));
  remainingDisplay.textContent = `${remainingOrders} remaining`;
  
  // Change progress bar color based on time
  if (daysRemaining < 7) {
    progressBar.style.backgroundColor = '#f0506e'; // red for last week
  } else if (daysRemaining < 30) {
    progressBar.style.backgroundColor = '#faa05a'; // orange for last month
  } else {
    progressBar.style.backgroundColor = '#32d296'; // green for more than month
  }
});

countdownElement.addEventListener('complete', function() {
  // Launch is here!
  document.querySelector('.uk-card-body').innerHTML = `
    <div class="uk-text-center">
      <h2 class="uk-heading-primary">🎉 Launch Day! 🎉</h2>
      <p class="uk-text-lead">The iPhone 16 Pro Max is now available!</p>
      <button class="uk-button uk-button-primary uk-button-large">
        <span uk-icon="icon: cart" class="uk-margin-small-right"></span>
        Buy Now
      </button>
    </div>
  `;
});
</script>

Exam/Test Timer

<!-- Exam Timer Dashboard -->
<div class="uk-card uk-card-default">
  <div class="uk-card-header">
    <div class="uk-grid-small uk-flex-middle" uk-grid>
      <div class="uk-width-expand">
        <h3 class="uk-card-title uk-margin-remove-bottom">Mathematics Final Exam</h3>
        <p class="uk-text-meta uk-margin-remove-top">Time Remaining</p>
      </div>
      <div class="uk-width-auto">
        <span class="uk-label uk-label-warning">In Progress</span>
      </div>
    </div>
  </div>
  <div class="uk-card-body">
    <!-- Main Timer -->
    <div class="uk-text-center">
      <div class="uk-countdown uk-grid-small uk-child-width-auto uk-flex-center" uk-grid uk-countdown="date: +01:30:00" id="examTimer">
        <div>
          <div class="uk-countdown-number uk-countdown-hours uk-text-large uk-text-bold uk-background-primary uk-light uk-padding-large uk-border-rounded"></div>
          <div class="uk-countdown-label uk-text-small uk-margin-small-top">HOURS</div>
        </div>
        <div class="uk-countdown-separator uk-flex uk-flex-middle uk-text-large">:</div>
        <div>
          <div class="uk-countdown-number uk-countdown-minutes uk-text-large uk-text-bold uk-background-secondary uk-light uk-padding-large uk-border-rounded"></div>
          <div class="uk-countdown-label uk-text-small uk-margin-small-top">MINUTES</div>
        </div>
        <div class="uk-countdown-separator uk-flex uk-flex-middle uk-text-large">:</div>
        <div>
          <div class="uk-countdown-number uk-countdown-seconds uk-text-large uk-text-bold uk-background-danger uk-light uk-padding-large uk-border-rounded"></div>
          <div class="uk-countdown-label uk-text-small uk-margin-small-top">SECONDS</div>
        </div>
      </div>
    </div>
    
    <!-- Progress and Controls -->
    <div class="uk-margin-medium-top">
      <div class="uk-grid-small uk-flex-middle" uk-grid>
        <div class="uk-width-expand">
          <div class="uk-progress">
            <div class="uk-progress-bar" style="width: 50%;" id="examProgress"></div>
          </div>
          <div class="uk-flex uk-flex-between uk-text-small uk-margin-small-top">
            <span>Section: <span id="currentSection">1 of 5</span></span>
            <span>Time Used: <span id="timeUsed">45:00</span></span>
            <span>Time Left: <span id="timeLeft">45:00</span></span>
          </div>
        </div>
        <div class="uk-width-auto">
          <div class="uk-button-group">
            <button class="uk-button uk-button-default" id="pauseExam">
              <span uk-icon="icon: pause"></span> Pause
            </button>
            <button class="uk-button uk-button-primary" id="nextSection">
              Next Section <span uk-icon="icon: chevron-right"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Warning Messages -->
    <div class="uk-alert-warning uk-margin-top" id="warning30min" hidden>
      <p><span uk-icon="icon: warning"></span> <strong>30 Minutes Warning:</strong> You have 30 minutes remaining.</p>
    </div>
    
    <div class="uk-alert-danger uk-margin-top" id="warning5min" hidden>
      <p><span uk-icon="icon: warning"></span> <strong>5 Minutes Warning:</strong> Only 5 minutes remaining! Please review your answers.</p>
    </div>
    
    <div class="uk-alert-success uk-margin-top" id="examComplete" hidden>
      <p><span uk-icon="icon: check"></span> <strong>Exam Submitted!</strong> Your answers have been submitted successfully.</p>
    </div>
  </div>
  <div class="uk-card-footer">
    <div class="uk-grid-small" uk-grid>
      <div class="uk-width-1-4">
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold" id="questionsAnswered">12</div>
          <div class="uk-text-small">Answered</div>
        </div>
      </div>
      <div class="uk-width-1-4">
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold" id="questionsRemaining">38</div>
          <div class="uk-text-small">Remaining</div>
        </div>
      </div>
      <div class="uk-width-1-4">
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold" id="currentScore">65%</div>
          <div class="uk-text-small">Estimated Score</div>
        </div>
      </div>
      <div class="uk-width-1-4">
        <div class="uk-text-center">
          <button class="uk-button uk-button-danger" id="submitExam">
            Submit Exam
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Exam timer functionality
const examTimer = document.getElementById('examTimer');
const examProgress = document.getElementById('examProgress');
const warning30min = document.getElementById('warning30min');
const warning5min = document.getElementById('warning5min');
const examComplete = document.getElementById('examComplete');
const timeLeftDisplay = document.getElementById('timeLeft');
const timeUsedDisplay = document.getElementById('timeUsed');

const totalExamTime = 90 * 60; // 90 minutes in seconds
let isPaused = false;
let timeUsed = 0;

// Timer events
examTimer.addEventListener('update', function(event) {
  const remaining = event.detail;
  const remainingSeconds = remaining.total;
  timeUsed = totalExamTime - remainingSeconds;
  
  // Update displays
  const minutesLeft = Math.floor(remainingSeconds / 60);
  const secondsLeft = remainingSeconds % 60;
  timeLeftDisplay.textContent = `${minutesLeft}:${secondsLeft.toString().padStart(2, '0')}`;
  
  const minutesUsed = Math.floor(timeUsed / 60);
  const secondsUsed = timeUsed % 60;
  timeUsedDisplay.textContent = `${minutesUsed}:${secondsUsed.toString().padStart(2, '0')}`;
  
  // Update progress bar
  const progressPercentage = (timeUsed / totalExamTime * 100).toFixed(1);
  examProgress.style.width = `${progressPercentage}%`;
  
  // Show warnings
  if (remainingSeconds <= 30 * 60 && remainingSeconds > 5 * 60) {
    warning30min.hidden = false;
  } else if (remainingSeconds <= 5 * 60 && remainingSeconds > 0) {
    warning30min.hidden = true;
    warning5min.hidden = false;
    // Blink warning
    warning5min.style.animation = 'blink 1s infinite';
  }
  
  // Update score estimate (simulated)
  const estimatedScore = Math.min(100, 50 + (progressPercentage * 0.5));
  document.getElementById('currentScore').textContent = `${estimatedScore.toFixed(0)}%`;
});

examTimer.addEventListener('complete', function() {
  // Time's up!
  warning30min.hidden = true;
  warning5min.hidden = true;
  examComplete.hidden = false;
  
  // Auto-submit exam
  submitExam();
});

// Control buttons
document.getElementById('pauseExam').addEventListener('click', function() {
  if (!isPaused) {
    UIkit.countdown(examTimer).stop();
    this.innerHTML = '<span uk-icon="icon: play"></span> Resume';
    isPaused = true;
  } else {
    UIkit.countdown(examTimer).start();
    this.innerHTML = '<span uk-icon="icon: pause"></span> Pause';
    isPaused = false;
  }
});

document.getElementById('submitExam').addEventListener('click', function() {
  if (confirm('Are you sure you want to submit your exam?')) {
    submitExam();
  }
});

function submitExam() {
  UIkit.countdown(examTimer).stop();
  examComplete.hidden = false;
  document.getElementById('pauseExam').disabled = true;
  document.getElementById('submitExam').disabled = true;
  
  // Show submission animation
  examTimer.innerHTML = `
    <div class="uk-text-center">
      <h3 class="uk-text-success">✓ Exam Submitted</h3>
      <p>Your answers have been recorded.</p>
    </div>
  `;
}

// Section navigation
let currentSection = 1;
const totalSections = 5;

document.getElementById('nextSection').addEventListener('click', function() {
  if (currentSection < totalSections) {
    currentSection++;
    document.getElementById('currentSection').textContent = `${currentSection} of ${totalSections}`;
    
    // Update questions (simulated)
    const questionsPerSection = 10;
    const answered = (currentSection - 1) * questionsPerSection + 2;
    const remaining = totalSections * questionsPerSection - answered;
    
    document.getElementById('questionsAnswered').textContent = answered;
    document.getElementById('questionsRemaining').textContent = remaining;
    
    // Show section completion
    UIkit.notification({
      message: `Section ${currentSection - 1} completed. Starting Section ${currentSection}`,
      status: 'primary',
      pos: 'top-center',
      timeout: 3000
    });
  }
  
  if (currentSection === totalSections) {
    this.disabled = true;
    this.textContent = 'Last Section';
  }
});

// Add blinking animation
const style = document.createElement('style');
style.textContent = `
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
`;
document.head.appendChild(style);
</script>

/* Custom Countdown Styles */
/* Neon Countdown */
.uk-countdown-neon {
  color: #fff;
  text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080, 0 0 30px #ff0080;
}

.uk-countdown-neon .uk-countdown-number {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #ff0080;
  border-radius: 10px;
  padding: 15px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

/* Gradient Countdown */
.uk-countdown-gradient .uk-countdown-number {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  padding: 10px 15px;
  font-weight: bold;
}

.uk-countdown-gradient .uk-countdown-separator {
  color: #667eea;
  font-weight: bold;
}

/* Glassmorphism Countdown */
.uk-countdown-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 20px;
}

.uk-countdown-glass .uk-countdown-number {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px;
  color: white;
  font-weight: bold;
}

/* Animated Digit Countdown */
.uk-countdown-digit {
  position: relative;
  overflow: hidden;
}

.uk-countdown-digit .uk-countdown-number {
  position: relative;
  display: inline-block;
  animation: digitChange 0.5s ease;
}

@keyframes digitChange {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-20px); opacity: 0; }
  51% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Flip Card Countdown */
.uk-countdown-flipcard {
  perspective: 1000px;
}

.uk-countdown-flipcard .uk-countdown-number {
  position: relative;
  width: 60px;
  height: 80px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.uk-countdown-flipcard .uk-countdown-number.flipping {
  transform: rotateX(180deg);
}

.uk-countdown-flipcard .uk-countdown-number-front,
.uk-countdown-flipcard .uk-countdown-number-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 2em;
  font-weight: bold;
}

.uk-countdown-flipcard .uk-countdown-number-front {
  background: #1e87f0;
  color: white;
}

.uk-countdown-flipcard .uk-countdown-number-back {
  background: #32d296;
  color: white;
  transform: rotateX(180deg);
}

/* Circular Progress Countdown */
.uk-countdown-circular {
  position: relative;
  width: 100px;
  height: 100px;
}

.uk-countdown-circular .uk-countdown-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  font-weight: bold;
  z-index: 2;
}

.uk-countdown-circular svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.uk-countdown-circular circle {
  fill: none;
  stroke: #1e87f0;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  animation: circularProgress 1s linear forwards;
}

@keyframes circularProgress {
  to {
    stroke-dashoffset: 0;
  }
}

/* Usage Examples */
<div class="uk-countdown uk-countdown-neon" uk-countdown="date: 2024-12-31T23:59:59+00:00">
  <!-- Neon countdown -->
</div>

<div class="uk-countdown uk-countdown-gradient" uk-countdown="date: 2024-06-30T23:59:59+00:00">
  <!-- Gradient countdown -->
</div>

<div class="uk-countdown uk-countdown-glass" uk-countdown="date: 2024-09-15T09:00:00+00:00">
  <!-- Glassmorphism countdown -->
</div>

<div class="uk-countdown uk-countdown-digit" uk-countdown="date: 2024-03-31T23:59:59+00:00">
  <!-- Animated digit countdown -->
</div>

<div class="uk-countdown uk-countdown-flipcard" uk-countdown="date: 2024-08-01T00:00:00+00:00">
  <!-- Flip card countdown -->
</div>

<div class="uk-countdown uk-countdown-circular" uk-countdown="date: +01:00:00">
  <!-- Circular progress countdown -->
</div>

/* Responsive Countdown */
@media (max-width: 640px) {
  .uk-countdown-responsive .uk-countdown-number {
    padding: 5px 8px;
    font-size: 0.9em;
  }
  
  .uk-countdown-responsive .uk-countdown-label {
    font-size: 0.7em;
  }
  
  .uk-countdown-responsive .uk-countdown-separator {
    margin: 0 2px;
  }
}

/* Countdown with Background Image */
.uk-countdown-bg {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px;
  border-radius: 20px;
  position: relative;
}

.uk-countdown-bg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}

.uk-countdown-bg > * {
  position: relative;
  z-index: 1;
  color: white;
}

/* Pulse Animation */
.uk-countdown-pulse .uk-countdown-number {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Countdown with Icons */
.uk-countdown-icon .uk-countdown-days:before {
  content: '📅';
  margin-right: 5px;
}

.uk-countdown-icon .uk-countdown-hours:before {
  content: '⏰';
  margin-right: 5px;
}

.uk-countdown-icon .uk-countdown-minutes:before {
  content: '⏱️';
  margin-right: 5px;
}

.uk-countdown-icon .uk-countdown-seconds:before {
  content: '⚡';
  margin-right: 5px;
}