Nexilant Elite Timer — Nexilant Studio

Flash Sale Ending Soon!

00 Hrs

00 Mins

00 Secs

PRO STATIC CLEAN CODE (READY TO PASTE)

.nexilant-glass-timer-{{ section.id }} {
    /* Mapping for your Universal Parser */
    --timer_bg: {{ section.settings.timer_bg }};
    --timer_text: {{ section.settings.timer_text }};
    --glass_bg: {{ section.settings.glass_bg }};
    --glass_border: {{ section.settings.glass_border }};
    --radius: {{ section.settings.radius }}px;
    --h_size: {{ section.settings.h_size }}rem;
    --n_size: {{ section.settings.n_size }}rem;
    --spacing: {{ section.settings.spacing }}px;

background-color: var(--timer_bg);
    padding: var(--spacing) 20px;
    font-family: "{{ section.settings.font_family }}", sans-serif;
    text-align: center;
    color: var(--timer_text);
    overflow: hidden;
  }

.timer-glass-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
  }

.glass-block {
    /* Glass Effect */
    background: var(--glass_bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass_border);
    border-radius: var(--radius);
    
    padding: 20px;
    min-width: 110px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
  }

.glass-block:hover {
    transform: translateY(-5px);
  }

.glass-num {
    display: block;
    font-size: var(--n_size);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
  }

.glass-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
    font-weight: 600;
  }

@media (max-width: 768px) {
    .glass-block { min-width: 80px; padding: 15px; }
    .glass-num { font-size: 1.5rem; }
  }
</style>

<section class="nexilant-glass-timer-{{ section.id }}">
  <div class="container">
    {% if section.settings.title != blank %}
      <h2 style="font-size: var(--h_size); font-weight: 700; margin: 0;">{{ section.settings.title }}</h2>
    {% endif %}

const x = setInterval(function() {
      const now = new Date().getTime(), distance = countDown - now;

const h = document.getElementById("h-{{ section.id }}"),
            m = document.getElementById("m-{{ section.id }}"),
            s = document.getElementById("s-{{ section.id }}");

// Logic updated to show total hours including days
      if (h) h.innerText = Math.floor(distance / hour);
      if (m) m.innerText = Math.floor((distance % hour) / minute);
      if (s) s.innerText = Math.floor((distance % minute) / second);

if (distance < 0) {
        clearInterval(x);
        document.getElementById("glass-timer-{{ section.id }}").innerHTML = "<h3>EXPIRED</h3>";
      }
    }, 1000);
  }());
</script>