senangwebs-epoch 1.1.2 → 1.1.3

package/README.md

@@ -94,6 +94,25 @@ Include SenangWebs Epoch directly in your HTML file:
   - `data-swe-second`
 - `data-swe-format`: Specifies display format for each unit
 
+### Format Options
+
+The format string determines zero-padding based on its length:
+
+| Unit | Format | Output Example | Description |
+|------|--------|----------------|-------------|
+| Year | `yyyy` | `2026` | Four-digit year |
+| Month | `m` | `5` | Single digit month |
+| Month | `mm` | `05` | Two-digit month |
+| Day | `d` | `5` | Single digit day |
+| Day | `dd` | `05` | Two-digit day |
+| Day | `ddd` | `005` | Three-digit day (for long countdowns) |
+| Hour | `H` | `9` | Single digit hour |
+| Hour | `HH` | `09` | Two-digit hour |
+| Minute | `m` | `7` | Single digit minute |
+| Minute | `mm` | `07` | Two-digit minute |
+| Second | `s` | `3` | Single digit second |
+| Second | `ss` | `03` | Two-digit second |
+
 ### JavaScript Initialization
 
 ```javascript
@@ -190,7 +209,7 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
+MIT License
 
 ## Support
 

package/dist/swe.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.SWE=e():t.SWE=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=Array(e);n<e;n++)i[n]=t[n];return i}function o(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,r(i.key),i)}}function r(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.d(e,{default:()=>s});var a=function(){return t=function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.options={autostart:void 0===n.autostart||n.autostart,duration:n.duration,countdownEnd:n.countdownEnd,onTick:n.onTick,onEnd:n.onEnd,onStart:n.onStart,onPause:n.onPause,onResume:n.onResume,onReset:n.onReset,onStop:n.onStop},this.intervalId=null,this.isPaused=!1,this.startTime=null,this.pausedTimeRemaining=null,this.endTime=null,this.initialize()},(e=[{key:"initialize",value:function(){if(!(this.element&&this.element instanceof HTMLElement))throw new Error("SWE: Invalid element provided");if(this.mode=this.determineMode(),this.setupElements(),this.options.autostart)this.start();else if("countdown-duration"===this.mode&&this.options.duration)this.updateDisplay(1e3*this.options.duration);else if("countdown-end"===this.mode&&this.options.countdownEnd){var t=new Date(this.options.countdownEnd),e=new Date,n=t.getTime()-e.getTime();this.updateDisplay(n>0?n:0)}}},{key:"determineMode",value:function(){if(this.options.countdownEnd)return"countdown-end";if(this.options.duration)return"countdown-duration";if(this.element.hasAttribute("data-swe-countdown-end"))return"countdown-end";if(this.element.hasAttribute("data-swe-countdown-duration"))return"countdown-duration";if(this.element.hasAttribute("data-swe-current"))return"current";if(this.options.countdownEnd)return"countdown-end";throw new Error("SWE: Invalid mode - missing required configuration")}},{key:"setupElements",value:function(){this.elements={year:this.element.querySelector("[data-swe-year]"),month:this.element.querySelector("[data-swe-month]"),day:this.element.querySelector("[data-swe-day]"),hour:this.element.querySelector("[data-swe-hour]"),minute:this.element.querySelector("[data-swe-minute]"),second:this.element.querySelector("[data-swe-second]")}}},{key:"start",value:function(){if(!this.intervalId){switch(this.isPaused=!1,this.startTime=Date.now(),this.mode){case"countdown-end":this.startCountdownToDate();break;case"countdown-duration":this.startCountdownDuration();break;case"current":this.startCurrentTime()}this.dispatchEvent("start")}}},{key:"startCountdownToDate",value:function(){var t=new Date(this.options.countdownEnd||this.element.getAttribute("data-swe-countdown-end"));if(isNaN(t.getTime()))throw new Error("SWE: Invalid end date format");this.endTime=t.getTime(),this.updateTimer()}},{key:"startCountdownDuration",value:function(){var t=this.options.duration||parseInt(this.element.getAttribute("data-swe-countdown-duration"),10);if(isNaN(t)||t<0)throw new Error("SWE: Invalid duration");null!==this.pausedTimeRemaining?this.endTime=Date.now()+this.pausedTimeRemaining:this.endTime=Date.now()+1e3*t,this.updateTimer()}},{key:"updateTimer",value:function(){var t=this,e=function(){var e=Date.now(),n=t.endTime-e;if(n<=0)return t.stop(),t.updateDisplay(0),void t.dispatchEvent("end");t.updateDisplay(n),t.dispatchEvent("tick")};e(),this.intervalId=setInterval(e,1e3)}},{key:"startCurrentTime",value:function(){var t=this,e=function(){var e=new Date;t.updateCurrentTimeDisplay(e),t.dispatchEvent("tick")};e(),this.intervalId=setInterval(e,1e3)}},{key:"updateDisplay",value:function(t){var e=this,n=this.calculateTimeUnits(t);Object.entries(this.elements).forEach((function(t){var o=function(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,o,r,a,s=[],u=!0,d=!1;try{if(r=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;u=!1}else for(;!(u=(i=r.call(n)).done)&&(s.push(i.value),s.length!==e);u=!0);}catch(t){d=!0,o=t}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(d)throw o}}return s}}(t,e)||function(t,e){if(t){if("string"==typeof t)return i(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t,2),r=o[0],a=o[1];a&&e.updateElement(a,n[r])}))}},{key:"updateCurrentTimeDisplay",value:function(t){this.elements.hour&&this.updateElement(this.elements.hour,t.getHours()),this.elements.minute&&this.updateElement(this.elements.minute,t.getMinutes()),this.elements.second&&this.updateElement(this.elements.second,t.getSeconds())}},{key:"updateElement",value:function(t,e){var n=t.getAttribute("data-swe-format");t.textContent=this.formatValue(e,n)}},{key:"formatValue",value:function(t,e){return e?t.toString().padStart(e.length,"0"):t.toString()}},{key:"calculateTimeUnits",value:function(t){var e=Math.floor(t/1e3),n=Math.floor(e/60),i=Math.floor(n/60),o=Math.floor(i/24),r=Math.floor(o/30);return{year:Math.floor(o/365),month:r%12,day:o%30,hour:i%24,minute:n%60,second:e%60}}},{key:"dispatchEvent",value:function(t){var e="on".concat(t.charAt(0).toUpperCase()+t.slice(1));"function"==typeof this.options[e]&&this.options[e].call(this);var n=new CustomEvent("swe:".concat(t),{bubbles:!0,detail:{instance:this}});this.element.dispatchEvent(n)}},{key:"pause",value:function(){this.intervalId&&!this.isPaused&&(clearInterval(this.intervalId),this.intervalId=null,this.isPaused=!0,this.pausedTimeRemaining=this.endTime-Date.now(),this.dispatchEvent("pause"))}},{key:"resume",value:function(){this.isPaused&&(this.start(),this.dispatchEvent("resume"))}},{key:"reset",value:function(){if(this.stop(),this.pausedTimeRemaining=null,this.endTime=null,"countdown-end"===this.mode&&this.options.countdownEnd){var t=new Date(this.options.countdownEnd),e=new Date,n=t.getTime()-e.getTime();this.updateDisplay(n>0?n:0)}else"countdown-duration"===this.mode&&this.options.duration&&this.updateDisplay(1e3*this.options.duration);this.dispatchEvent("reset"),this.options.autostart&&this.start()}},{key:"stop",value:function(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null,this.isPaused=!1,this.dispatchEvent("stop"))}}])&&o(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll("[data-swe]").forEach((function(t){new a(t)}))}));const s=a;return"undefined"!=typeof window&&(window.SWE=a),e.default})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.SWE=e():t.SWE=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=Array(e);n<e;n++)i[n]=t[n];return i}function o(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,r(i.key),i)}}function r(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.d(e,{default:()=>s});var a=function(){return t=function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.options={autostart:void 0===n.autostart||n.autostart,duration:n.duration,countdownEnd:n.countdownEnd,onTick:n.onTick,onEnd:n.onEnd,onStart:n.onStart,onPause:n.onPause,onResume:n.onResume,onReset:n.onReset,onStop:n.onStop},this.intervalId=null,this.isPaused=!1,this.startTime=null,this.pausedTimeRemaining=null,this.endTime=null,this.initialize()},(e=[{key:"initialize",value:function(){if(!(this.element&&this.element instanceof HTMLElement))throw new Error("SWE: Invalid element provided");if(this.mode=this.determineMode(),this.setupElements(),this.options.autostart)this.start();else if("countdown-duration"===this.mode&&this.options.duration)this.updateDisplay(1e3*this.options.duration);else if("countdown-end"===this.mode&&this.options.countdownEnd){var t=new Date(this.options.countdownEnd),e=new Date,n=t.getTime()-e.getTime();this.updateDisplay(n>0?n:0)}}},{key:"determineMode",value:function(){if(this.options.countdownEnd)return"countdown-end";if(this.options.duration)return"countdown-duration";if(this.element.hasAttribute("data-swe-countdown-end"))return"countdown-end";if(this.element.hasAttribute("data-swe-countdown-duration"))return"countdown-duration";if(this.element.hasAttribute("data-swe-current"))return"current";if(this.options.countdownEnd)return"countdown-end";throw new Error("SWE: Invalid mode - missing required configuration")}},{key:"setupElements",value:function(){this.elements={year:this.element.querySelector("[data-swe-year]"),month:this.element.querySelector("[data-swe-month]"),day:this.element.querySelector("[data-swe-day]"),hour:this.element.querySelector("[data-swe-hour]"),minute:this.element.querySelector("[data-swe-minute]"),second:this.element.querySelector("[data-swe-second]")}}},{key:"start",value:function(){if(!this.intervalId){switch(this.isPaused=!1,this.startTime=Date.now(),this.mode){case"countdown-end":this.startCountdownToDate();break;case"countdown-duration":this.startCountdownDuration();break;case"current":this.startCurrentTime()}this.dispatchEvent("start")}}},{key:"startCountdownToDate",value:function(){var t=new Date(this.options.countdownEnd||this.element.getAttribute("data-swe-countdown-end"));if(isNaN(t.getTime()))throw new Error("SWE: Invalid end date format");this.endTime=t.getTime(),this.updateTimer()}},{key:"startCountdownDuration",value:function(){var t=this.options.duration||parseInt(this.element.getAttribute("data-swe-countdown-duration"),10);if(isNaN(t)||t<0)throw new Error("SWE: Invalid duration");null!==this.pausedTimeRemaining?this.endTime=Date.now()+this.pausedTimeRemaining:this.endTime=Date.now()+1e3*t,this.updateTimer()}},{key:"updateTimer",value:function(){var t=this,e=function(){var e=Date.now(),n=t.endTime-e;if(n<=0)return t.stop(),t.updateDisplay(0),void t.dispatchEvent("end");t.updateDisplay(n),t.dispatchEvent("tick")};e(),this.intervalId=setInterval(e,1e3)}},{key:"startCurrentTime",value:function(){var t=this,e=function(){var e=new Date;t.updateCurrentTimeDisplay(e),t.dispatchEvent("tick")};e(),this.intervalId=setInterval(e,1e3)}},{key:"updateDisplay",value:function(t){var e=this,n=this.calculateTimeUnits(t);Object.entries(this.elements).forEach((function(t){var o=function(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,o,r,a,s=[],u=!0,d=!1;try{if(r=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;u=!1}else for(;!(u=(i=r.call(n)).done)&&(s.push(i.value),s.length!==e);u=!0);}catch(t){d=!0,o=t}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(d)throw o}}return s}}(t,e)||function(t,e){if(t){if("string"==typeof t)return i(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t,2),r=o[0],a=o[1];a&&e.updateElement(a,n[r])}))}},{key:"updateCurrentTimeDisplay",value:function(t){this.elements.hour&&this.updateElement(this.elements.hour,t.getHours()),this.elements.minute&&this.updateElement(this.elements.minute,t.getMinutes()),this.elements.second&&this.updateElement(this.elements.second,t.getSeconds())}},{key:"updateElement",value:function(t,e){var n=t.getAttribute("data-swe-format");t.textContent=this.formatValue(e,n)}},{key:"formatValue",value:function(t,e){return e?t.toString().padStart(e.length,"0"):t.toString()}},{key:"calculateTimeUnits",value:function(t){var e=Math.floor(t/1e3),n=Math.floor(e/60),i=Math.floor(n/60),o=(Math.floor(i/24),new Date),r=new Date(o.getTime()+t),a=r.getFullYear()-o.getFullYear(),s=r.getMonth()-o.getMonth(),u=r.getDate()-o.getDate();return u<0&&(s--,u+=new Date(r.getFullYear(),r.getMonth(),0).getDate()),s<0&&(a--,s+=12),{year:a,month:s,day:u,hour:i%24,minute:n%60,second:e%60}}},{key:"dispatchEvent",value:function(t){var e="on".concat(t.charAt(0).toUpperCase()+t.slice(1));"function"==typeof this.options[e]&&this.options[e].call(this);var n=new CustomEvent("swe:".concat(t),{bubbles:!0,detail:{instance:this}});this.element.dispatchEvent(n)}},{key:"pause",value:function(){this.intervalId&&!this.isPaused&&(clearInterval(this.intervalId),this.intervalId=null,this.isPaused=!0,this.pausedTimeRemaining=this.endTime-Date.now(),this.dispatchEvent("pause"))}},{key:"resume",value:function(){if(this.isPaused){switch(this.isPaused=!1,this.startTime=Date.now(),this.mode){case"countdown-end":this.startCountdownToDate();break;case"countdown-duration":this.startCountdownDuration();break;case"current":this.startCurrentTime()}this.dispatchEvent("resume")}}},{key:"reset",value:function(){if(this.stop(),this.pausedTimeRemaining=null,this.endTime=null,"countdown-end"===this.mode&&this.options.countdownEnd){var t=new Date(this.options.countdownEnd),e=new Date,n=t.getTime()-e.getTime();this.updateDisplay(n>0?n:0)}else"countdown-duration"===this.mode&&this.options.duration&&this.updateDisplay(1e3*this.options.duration);this.dispatchEvent("reset"),this.options.autostart&&this.start()}},{key:"stop",value:function(){var t=null!==this.intervalId;this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null),this.isPaused=!1,t&&this.dispatchEvent("stop")}}])&&o(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();document.addEventListener("DOMContentLoaded",(function(){document.querySelectorAll("[data-swe]").forEach((function(t){new a(t)}))}));const s=a;return"undefined"!=typeof window&&(window.SWE=a),e.default})()));

package/examples/index.html

@@ -4,71 +4,450 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SenangWebs Epoch Demo</title>
+    <title>SenangWebs Epoch - Examples & Use Cases</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="../dist/swe.css">
+    <link rel="stylesheet" href="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart.min.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+    <style>
+        .gradient-text {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        .timer-unit {
+            transition: all 0.3s ease;
+        }
+        .timer-unit:hover {
+            transform: scale(1.05);
+        }
+        @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
+            50% { box-shadow: 0 0 40px rgba(239, 68, 68, 0.6); }
+        }
+        .flash-sale-glow {
+            animation: pulse-glow 2s infinite;
+        }
+    </style>
 </head>
 
-<body class="min-h-screen bg-gray-100">
+<body class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 font-sans">
+
+    <!-- Hero Header -->
+    <header class="bg-gradient-to-br from-[#00FF99] to-[#007370] text-white py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h1 class="text-4xl lg:text-5xl font-extrabold mb-4 drop-shadow-lg">SenangWebs Epoch</h1>
+            <p class="text-xl text-white/90 max-w-2xl mx-auto">A lightweight JavaScript library for creating dynamic countdown timers and time displays. Perfect for any time-sensitive content.</p>
+        </div>
+    </header>
 
     <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <h4 class="text-xl lg:text-2xl capitalize font-bold mb-4">SenangWebs Epoch</h4>
-
-        <div class="flex flex-col gap-8">
-            <!-- Countdown to a specific date-time -->
-            <div data-swe data-swe-countdown-end="2025-01-01 00:00:00">
-                <div data-swe-year data-swe-format="yyyy"></div>
-                <div data-swe-month data-swe-format="mm"></div>
-                <div data-swe-day data-swe-format="dd"></div>
-                <div data-swe-hour data-swe-format="HH"></div>
-                <div data-swe-minute data-swe-format="mm"></div>
-                <div data-swe-second data-swe-format="ss"></div>
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+
+        <!-- Section: Event Countdowns -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center gap-2"><span class="ss ss-calendar text-2xl"></span> Event Countdowns</h2>
+            <p class="text-gray-600 mb-6">Perfect for building anticipation for upcoming events, launches, or celebrations.</p>
+            
+            <div class="grid md:grid-cols-2 gap-6">
+                
+                <!-- New Year Countdown -->
+                <div class="glass-card rounded-2xl p-6 shadow-lg">
+                    <div class="flex items-center gap-3 mb-4">
+                        <span class="ss ss-star text-3xl text-amber-500"></span>
+                        <div>
+                            <h3 class="text-lg font-bold text-gray-800">New Year Countdown</h3>
+                            <p class="text-sm text-gray-500">Count down to the new year celebration</p>
+                        </div>
+                    </div>
+                    <div id="new-year" data-swe data-swe-countdown-end="2027-01-01 00:00:00" class="flex flex-wrap gap-3 justify-center">
+                        <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-amber-400 to-orange-500 text-white rounded-xl p-4 min-w-[70px] shadow-lg">
+                            <span data-swe-day data-swe-format="ddd" class="text-2xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider opacity-90">Days</span>
+                        </div>
+                        <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-amber-400 to-orange-500 text-white rounded-xl p-4 min-w-[70px] shadow-lg">
+                            <span data-swe-hour data-swe-format="HH" class="text-2xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider opacity-90">Hours</span>
+                        </div>
+                        <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-amber-400 to-orange-500 text-white rounded-xl p-4 min-w-[70px] shadow-lg">
+                            <span data-swe-minute data-swe-format="mm" class="text-2xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider opacity-90">Mins</span>
+                        </div>
+                        <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-amber-400 to-orange-500 text-white rounded-xl p-4 min-w-[70px] shadow-lg">
+                            <span data-swe-second data-swe-format="ss" class="text-2xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider opacity-90">Secs</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Product Launch -->
+                <div class="glass-card rounded-2xl p-6 shadow-lg">
+                    <div class="flex items-center gap-3 mb-4">
+                        <span class="ss ss-bolt text-3xl text-blue-500"></span>
+                        <div>
+                            <h3 class="text-lg font-bold text-gray-800">Product Launch</h3>
+                            <p class="text-sm text-gray-500">Building excitement for your next big release</p>
+                        </div>
+                    </div>
+                    <div id="product-launch" data-swe data-swe-countdown-end="2026-06-15 09:00:00" class="flex flex-wrap gap-3 justify-center">
+                        <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-blue-500 to-cyan-400 text-white rounded-xl p-4 min-w-[70px] shadow-lg">
+                            <span data-swe-month data-swe-format="mm" class="text-2xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider opacity-90">Months</span>
+                        </div>
+                        <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-blue-500 to-cyan-400 text-white rounded-xl p-4 min-w-[70px] shadow-lg">
+                            <span data-swe-day data-swe-format="dd" class="text-2xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider opacity-90">Days</span>
+                        </div>
+                        <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-blue-500 to-cyan-400 text-white rounded-xl p-4 min-w-[70px] shadow-lg">
+                            <span data-swe-hour data-swe-format="HH" class="text-2xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider opacity-90">Hours</span>
+                        </div>
+                        <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-blue-500 to-cyan-400 text-white rounded-xl p-4 min-w-[70px] shadow-lg">
+                            <span data-swe-minute data-swe-format="mm" class="text-2xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider opacity-90">Mins</span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </section>
+
+        <!-- Section: E-Commerce -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center gap-2"><span class="ss ss-shopping-cart text-2xl"></span> E-Commerce & Sales</h2>
+            <p class="text-gray-600 mb-6">Create urgency and drive conversions with time-limited offers.</p>
+            
+            <div class="grid md:grid-cols-2 gap-6">
+                
+                <!-- Flash Sale -->
+                <div class="bg-gradient-to-br from-red-600 to-rose-700 rounded-2xl p-6 shadow-xl flash-sale-glow">
+                    <div class="flex items-center gap-3 mb-4">
+                        <span class="ss ss-thunder text-3xl text-yellow-300 animate-bounce"></span>
+                        <div>
+                            <h3 class="text-lg font-bold text-white">Flash Sale Ending Soon!</h3>
+                            <p class="text-sm text-white/80">Up to 70% OFF - Limited Time</p>
+                        </div>
+                    </div>
+                    <div id="flash-sale" class="flex flex-wrap gap-3 justify-center">
+                        <div class="timer-unit flex flex-col items-center bg-white/20 backdrop-blur text-white rounded-xl p-4 min-w-[70px]">
+                            <span data-swe-hour data-swe-format="HH" class="text-3xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider">Hours</span>
+                        </div>
+                        <div class="text-3xl font-bold text-white self-center">:</div>
+                        <div class="timer-unit flex flex-col items-center bg-white/20 backdrop-blur text-white rounded-xl p-4 min-w-[70px]">
+                            <span data-swe-minute data-swe-format="mm" class="text-3xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider">Mins</span>
+                        </div>
+                        <div class="text-3xl font-bold text-white self-center">:</div>
+                        <div class="timer-unit flex flex-col items-center bg-white/20 backdrop-blur text-white rounded-xl p-4 min-w-[70px]">
+                            <span data-swe-second data-swe-format="ss" class="text-3xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider">Secs</span>
+                        </div>
+                    </div>
+                    <button class="mt-4 w-full bg-white text-red-600 font-bold py-3 px-6 rounded-xl hover:bg-gray-100 transition-colors">
+                        Shop Now →
+                    </button>
+                </div>
+
+                <!-- Limited Offer -->
+                <div class="bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 shadow-xl">
+                    <div class="flex items-center gap-3 mb-4">
+                        <span class="ss ss-gift text-3xl text-white"></span>
+                        <div>
+                            <h3 class="text-lg font-bold text-white">Free Shipping Offer</h3>
+                            <p class="text-sm text-white/80">Order now to get free delivery!</p>
+                        </div>
+                    </div>
+                    <div id="shipping-offer" class="flex flex-wrap gap-3 justify-center">
+                        <div class="timer-unit flex flex-col items-center bg-white/20 backdrop-blur text-white rounded-xl p-4 min-w-[70px]">
+                            <span data-swe-hour data-swe-format="HH" class="text-3xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider">Hours</span>
+                        </div>
+                        <div class="timer-unit flex flex-col items-center bg-white/20 backdrop-blur text-white rounded-xl p-4 min-w-[70px]">
+                            <span data-swe-minute data-swe-format="mm" class="text-3xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider">Mins</span>
+                        </div>
+                        <div class="timer-unit flex flex-col items-center bg-white/20 backdrop-blur text-white rounded-xl p-4 min-w-[70px]">
+                            <span data-swe-second data-swe-format="ss" class="text-3xl font-bold"></span>
+                            <span class="text-xs uppercase tracking-wider">Secs</span>
+                        </div>
+                    </div>
+                    <div class="mt-4 text-center text-white/90 text-sm">
+                        <span class="ss ss-truck mr-1"></span> Orders placed within this time ship FREE!
+                    </div>
+                </div>
+
             </div>
+        </section>
+
+        <!-- Section: Productivity & Utility -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center gap-2"><span class="ss ss-cog-6-tooth text-2xl"></span> Productivity & Utility</h2>
+            <p class="text-gray-600 mb-6">Useful timers for sessions, focus work, and everyday tasks.</p>
+            
+            <div class="grid md:grid-cols-3 gap-6">
+                
+                <!-- Session Timer -->
+                <div class="glass-card rounded-2xl p-6 shadow-lg">
+                    <div class="flex items-center gap-3 mb-4">
+                        <span class="ss ss-lock-closed text-3xl text-gray-700"></span>
+                        <div>
+                            <h3 class="text-lg font-bold text-gray-800">Session Timeout</h3>
+                            <p class="text-sm text-gray-500">Auto-logout warning timer</p>
+                        </div>
+                    </div>
+                    <div id="session-timer" class="text-center">
+                        <div class="inline-flex items-center gap-2 bg-yellow-100 text-yellow-800 rounded-full px-4 py-2 text-sm font-medium mb-3">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
+                            Session expires in
+                        </div>
+                        <div class="flex justify-center gap-2">
+                            <div class="timer-unit bg-gray-800 text-white rounded-lg px-4 py-3 min-w-[60px]">
+                                <span data-swe-minute data-swe-format="mm" class="text-2xl font-mono font-bold"></span>
+                            </div>
+                            <span class="text-2xl font-bold text-gray-400 self-center">:</span>
+                            <div class="timer-unit bg-gray-800 text-white rounded-lg px-4 py-3 min-w-[60px]">
+                                <span data-swe-second data-swe-format="ss" class="text-2xl font-mono font-bold"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Pomodoro Timer -->
+                <div class="glass-card rounded-2xl p-6 shadow-lg">
+                    <div class="flex items-center gap-3 mb-4">
+                        <span class="ss ss-crosshair text-3xl text-red-500"></span>
+                        <div>
+                            <h3 class="text-lg font-bold text-gray-800">Pomodoro Timer</h3>
+                            <p class="text-sm text-gray-500">25-minute focus sessions</p>
+                        </div>
+                    </div>
+                    <div id="pomodoro" class="text-center">
+                        <div class="relative inline-flex items-center justify-center w-32 h-32 rounded-full bg-gradient-to-br from-red-400 to-red-600 shadow-lg mb-3">
+                            <div class="flex items-baseline gap-1 text-white">
+                                <span data-swe-minute data-swe-format="mm" class="text-3xl font-bold"></span>
+                                <span class="text-xl">:</span>
+                                <span data-swe-second data-swe-format="ss" class="text-3xl font-bold"></span>
+                            </div>
+                        </div>
+                        <div class="flex justify-center gap-2">
+                            <button id="pomodoro-pause" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors">Pause</button>
+                            <button id="pomodoro-reset" class="bg-red-100 hover:bg-red-200 text-red-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors">Reset</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Current Time Clock -->
+                <div class="glass-card rounded-2xl p-6 shadow-lg">
+                    <div class="flex items-center gap-3 mb-4">
+                        <span class="ss ss-clock text-3xl text-slate-700"></span>
+                        <div>
+                            <h3 class="text-lg font-bold text-gray-800">Live Clock</h3>
+                            <p class="text-sm text-gray-500">Current local time display</p>
+                        </div>
+                    </div>
+                    <div id="live-clock" data-swe data-swe-current class="text-center">
+                        <div class="inline-flex items-center gap-1 bg-gradient-to-br from-slate-700 to-slate-900 text-white rounded-xl p-4 shadow-lg">
+                            <span data-swe-hour data-swe-format="HH" class="text-4xl font-mono font-bold"></span>
+                            <span class="text-4xl font-bold animate-pulse">:</span>
+                            <span data-swe-minute data-swe-format="mm" class="text-4xl font-mono font-bold"></span>
+                            <span class="text-4xl font-bold animate-pulse">:</span>
+                            <span data-swe-second data-swe-format="ss" class="text-4xl font-mono font-bold"></span>
+                        </div>
+                        <p class="mt-3 text-gray-500 text-sm">Auto-updates every second</p>
+                    </div>
+                </div>
 
-            <!-- Countdown for 10 seconds -->
-            <div data-swe data-swe-countdown-duration="10">
-                <div data-swe-second data-swe-format="ss"></div>
             </div>
+        </section>
 
-            <!-- Display current time -->
-            <div data-swe data-swe-current>
-                <div data-swe-hour data-swe-format="HH"></div>
-                <div data-swe-minute data-swe-format="mm"></div>
-                <div data-swe-second data-swe-format="ss"></div>
+        <!-- Section: Interactive Demo -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center gap-2"><span class="ss ss-controller text-2xl"></span> Interactive Controls</h2>
+            <p class="text-gray-600 mb-6">Demonstrates the full control API with pause, resume, and reset functionality.</p>
+            
+            <div class="glass-card rounded-2xl p-8 shadow-lg max-w-xl mx-auto">
+                <div class="text-center mb-6">
+                    <h3 class="text-lg font-bold text-gray-800 mb-2">Controllable Timer</h3>
+                    <p class="text-sm text-gray-500">A 60-second timer with full controls</p>
+                </div>
+                
+                <div id="interactive-timer" class="flex justify-center gap-4 mb-6">
+                    <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-violet-500 to-purple-600 text-white rounded-xl p-5 min-w-[80px] shadow-lg">
+                        <span data-swe-minute data-swe-format="mm" class="text-4xl font-bold"></span>
+                        <span class="text-xs uppercase tracking-wider opacity-90">Mins</span>
+                    </div>
+                    <div class="timer-unit flex flex-col items-center bg-gradient-to-br from-violet-500 to-purple-600 text-white rounded-xl p-5 min-w-[80px] shadow-lg">
+                        <span data-swe-second data-swe-format="ss" class="text-4xl font-bold"></span>
+                        <span class="text-xs uppercase tracking-wider opacity-90">Secs</span>
+                    </div>
+                </div>
+                
+                <div class="flex flex-wrap justify-center gap-3">
+                    <button id="btn-start" class="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-white px-5 py-2.5 rounded-xl font-medium transition-colors shadow-md">
+                        <span class="ss ss-play text-lg"></span>
+                        Start
+                    </button>
+                    <button id="btn-pause" class="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-5 py-2.5 rounded-xl font-medium transition-colors shadow-md">
+                        <span class="ss ss-pause text-lg"></span>
+                        Pause
+                    </button>
+                    <button id="btn-resume" class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white px-5 py-2.5 rounded-xl font-medium transition-colors shadow-md">
+                        <span class="ss ss-play-circle text-lg"></span>
+                        Resume
+                    </button>
+                    <button id="btn-reset" class="flex items-center gap-2 bg-rose-500 hover:bg-rose-600 text-white px-5 py-2.5 rounded-xl font-medium transition-colors shadow-md">
+                        <span class="ss ss-arrow-path text-lg"></span>
+                        Reset
+                    </button>
+                </div>
+                
+                <div id="event-log" class="mt-6 bg-gray-900 text-green-400 font-mono text-xs p-4 rounded-xl max-h-32 overflow-y-auto">
+                    <p class="text-gray-500"># Event log - interactions will appear here</p>
+                </div>
             </div>
+        </section>
 
-            <!-- Timer for 15 seconds -->
-            <div id="timer" class="flex gap-4 p-4 bg-gray-300 rounded-xl max-w-max">
-                <div data-swe-hour data-swe-format="HH" class="w-12 bg-gray-200 aspect-square flex items-center justify-center rounded-lg"></div>
-                <div data-swe-minute data-swe-format="mm" class="w-12 bg-gray-200 aspect-square flex items-center justify-center rounded-lg"></div>
-                <div data-swe-second data-swe-format="ss" class="w-12 bg-gray-200 aspect-square flex items-center justify-center rounded-lg"></div>
+        <!-- Section: Code Examples -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-gray-800 mb-2 flex items-center gap-2"><span class="ss ss-code text-2xl"></span> Quick Start Guide</h2>
+            <p class="text-gray-600 mb-6">Get started with SenangWebs Epoch in seconds.</p>
+            
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="bg-gray-900 rounded-2xl p-6 shadow-xl">
+                    <h4 class="text-white font-semibold mb-4 flex items-center gap-2">
+                        <span class="bg-green-500 text-xs px-2 py-1 rounded">HTML</span>
+                        Data Attribute Method
+                    </h4>
+                    <pre class="text-sm text-gray-300 overflow-x-auto"><code>&lt;!-- Countdown to date --&gt;
+&lt;div data-swe data-swe-countdown-end="2026-12-31 00:00:00"&gt;
+    &lt;div data-swe-day data-swe-format="dd"&gt;&lt;/div&gt;
+    &lt;div data-swe-hour data-swe-format="HH"&gt;&lt;/div&gt;
+    &lt;div data-swe-minute data-swe-format="mm"&gt;&lt;/div&gt;
+    &lt;div data-swe-second data-swe-format="ss"&gt;&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                </div>
+                
+                <div class="bg-gray-900 rounded-2xl p-6 shadow-xl">
+                    <h4 class="text-white font-semibold mb-4 flex items-center gap-2">
+                        <span class="bg-yellow-500 text-xs px-2 py-1 rounded text-black">JS</span>
+                        JavaScript Method
+                    </h4>
+                    <pre class="text-sm text-gray-300 overflow-x-auto"><code>const timer = new SWE(element, {
+    autostart: true,
+    duration: 300, // 5 minutes
+    onTick: () => console.log('Tick!'),
+    onEnd: () => alert('Time is up!')
+});
+
+// Control methods
+timer.pause();
+timer.resume();
+timer.reset();</code></pre>
+                </div>
             </div>
-        </div>
+        </section>
 
     </main>
 
     <script src="../dist/swe.js"></script>
 
     <script>
-        let timer;
         document.addEventListener('DOMContentLoaded', () => {
-            timer = new SWE(document.querySelector('#timer'), {
+            
+            // Flash Sale - 2 hours countdown
+            const flashSale = new SWE(document.querySelector('#flash-sale'), {
                 autostart: true,
-                duration: 15,
-                // countdownEnd: '2025-01-01 00:00:00',
-                onTick: () => {
-                    console.log('Timer ticked!');
-                },
+                duration: 7200, // 2 hours
                 onEnd: () => {
-                    console.log('Timer finished!');
+                    document.querySelector('#flash-sale').innerHTML = '<p class="text-white text-xl font-bold">Sale Ended!</p>';
                 }
             });
 
-            // Event listening
-            timer.element.addEventListener('swe:end', () => {
-                console.log('Timer finished! Event listening');
+            // Free Shipping Offer - 4 hours
+            const shippingOffer = new SWE(document.querySelector('#shipping-offer'), {
+                autostart: true,
+                duration: 14400, // 4 hours
             });
+
+            // Session Timer - 5 minutes
+            const sessionTimer = new SWE(document.querySelector('#session-timer'), {
+                autostart: true,
+                duration: 300,
+                onEnd: () => {
+                    alert('Your session has expired! Please log in again.');
+                }
+            });
+
+            // Pomodoro Timer - 25 minutes
+            let pomodoroTimer = new SWE(document.querySelector('#pomodoro'), {
+                autostart: true,
+                duration: 1500, // 25 minutes
+                onEnd: () => {
+                    alert('🍅 Pomodoro complete! Take a 5-minute break.');
+                }
+            });
+
+            document.querySelector('#pomodoro-pause').addEventListener('click', () => {
+                pomodoroTimer.isPaused ? pomodoroTimer.resume() : pomodoroTimer.pause();
+                document.querySelector('#pomodoro-pause').textContent = pomodoroTimer.isPaused ? 'Resume' : 'Pause';
+            });
+
+            document.querySelector('#pomodoro-reset').addEventListener('click', () => {
+                pomodoroTimer.reset();
+            });
+
+            // Interactive Timer - 60 seconds
+            const interactiveTimer = new SWE(document.querySelector('#interactive-timer'), {
+                autostart: false,
+                duration: 60,
+                onStart: () => logEvent('Timer started'),
+                onPause: () => logEvent('Timer paused'),
+                onResume: () => logEvent('Timer resumed'),
+                onReset: () => logEvent('Timer reset'),
+                onTick: () => {}, // Silent tick
+                onEnd: () => logEvent('⏰ Timer ended!')
+            });
+
+            // Control buttons
+            document.querySelector('#btn-start').addEventListener('click', () => interactiveTimer.start());
+            document.querySelector('#btn-pause').addEventListener('click', () => interactiveTimer.pause());
+            document.querySelector('#btn-resume').addEventListener('click', () => interactiveTimer.resume());
+            document.querySelector('#btn-reset').addEventListener('click', () => interactiveTimer.reset());
+
+            // Event log
+            function logEvent(message) {
+                const log = document.querySelector('#event-log');
+                const time = new Date().toLocaleTimeString();
+                log.innerHTML += `<p>[${time}] ${message}</p>`;
+                log.scrollTop = log.scrollHeight;
+            }
+
+            // Listen for events
+            const timerEl = document.querySelector('#interactive-timer');
+            ['start', 'pause', 'resume', 'reset', 'end'].forEach(event => {
+                timerEl.addEventListener(`swe:${event}`, () => {
+                    logEvent(`Event: swe:${event} fired`);
+                });
+            });
+
         });
     </script>
 

package/index.js

@@ -0,0 +1,7 @@
+/**
+ * SenangWebs Epoch (SWE) - Module Entry Point
+ * A lightweight JavaScript library for countdown timers and time display
+ */
+
+// Export the main library
+module.exports = require('./dist/swe.js');

package/package.json

@@ -1,27 +1,28 @@
-{
-  "name": "senangwebs-epoch",
-  "version": "1.1.2",
-  "description": "Lightweight JavaScript library for creating dynamic countdown timers and time displays.",
-  "main": "index.js",
-  "directories": {
-    "example": "examples"
-  },
-  "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack --mode development --watch",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": ["image", "carousel", "web", "customizable"],
-  "author": "a-hakim",
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/preset-env": "^7.25.8",
-    "babel-loader": "^9.2.1",
-    "css-loader": "^7.1.2",
-    "mini-css-extract-plugin": "^2.9.1",
-    "style-loader": "^4.0.0",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4"
-  }
-}
+{
+  "name": "senangwebs-epoch",
+  "version": "1.1.3",
+  "description": "Lightweight JavaScript library for creating dynamic countdown timers and time displays.",
+  "main": "dist/swe.js",
+  "module": "dist/swe.js",
+  "directories": {
+    "example": "examples"
+  },
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack --mode development --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["countdown", "timer", "time", "epoch", "javascript", "date", "clock"],
+  "author": "a-hakim",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.25.8",
+    "@babel/preset-env": "^7.25.8",
+    "babel-loader": "^9.2.1",
+    "css-loader": "^7.1.2",
+    "mini-css-extract-plugin": "^2.9.1",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/src/js/swe.js

@@ -1,8 +1,10 @@
 /**
  * SenangWebs Epoch (SWE) - A JavaScript library for countdown timers and time display
- * Version: 1.1.1
+ * Version: 1.1.2
  */
 
+import '../css/swe.css';
+
 class SWE {
     constructor(element, options = {}) {
         this.element = element;
@@ -208,20 +210,38 @@ class SWE {
     }
 
     calculateTimeUnits(milliseconds) {
-        const seconds = Math.floor(milliseconds / 1000);
-        const minutes = Math.floor(seconds / 60);
-        const hours = Math.floor(minutes / 60);
-        const days = Math.floor(hours / 24);
-        const months = Math.floor(days / 30);
-        const years = Math.floor(days / 365);
+        // Calculate using proper date math for accuracy
+        const totalSeconds = Math.floor(milliseconds / 1000);
+        const totalMinutes = Math.floor(totalSeconds / 60);
+        const totalHours = Math.floor(totalMinutes / 60);
+        const totalDays = Math.floor(totalHours / 24);
+        
+        // Use date-based calculation for months and years
+        const now = new Date();
+        const futureDate = new Date(now.getTime() + milliseconds);
+        
+        let years = futureDate.getFullYear() - now.getFullYear();
+        let months = futureDate.getMonth() - now.getMonth();
+        let days = futureDate.getDate() - now.getDate();
+        
+        // Normalize negative values
+        if (days < 0) {
+            months--;
+            const prevMonth = new Date(futureDate.getFullYear(), futureDate.getMonth(), 0);
+            days += prevMonth.getDate();
+        }
+        if (months < 0) {
+            years--;
+            months += 12;
+        }
 
         return {
             year: years,
-            month: months % 12,
-            day: days % 30,
-            hour: hours % 24,
-            minute: minutes % 60,
-            second: seconds % 60
+            month: months,
+            day: days,
+            hour: totalHours % 24,
+            minute: totalMinutes % 60,
+            second: totalSeconds % 60
         };
     }
 
@@ -252,7 +272,21 @@ class SWE {
 
     resume() {
         if (this.isPaused) {
-            this.start();
+            this.isPaused = false;
+            this.startTime = Date.now();
+
+            switch (this.mode) {
+                case 'countdown-end':
+                    this.startCountdownToDate();
+                    break;
+                case 'countdown-duration':
+                    this.startCountdownDuration();
+                    break;
+                case 'current':
+                    this.startCurrentTime();
+                    break;
+            }
+
             this.dispatchEvent('resume');
         }
     }
@@ -279,10 +313,13 @@ class SWE {
     }
 
     stop() {
+        const wasRunning = this.intervalId !== null;
         if (this.intervalId) {
             clearInterval(this.intervalId);
             this.intervalId = null;
-            this.isPaused = false;
+        }
+        this.isPaused = false;
+        if (wasRunning) {
             this.dispatchEvent('stop');
         }
     }

package/webpack.config.js

@@ -2,12 +2,9 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-  entry: {
-    swe: './src/js/swe.js',
-    style: './src/css/swe.css',
-  },
+  entry: './src/js/swe.js',
   output: {
-    filename: '[name].js',
+    filename: 'swe.js',
     path: path.resolve(__dirname, 'dist'),
     library: {
       name: 'SWE',

package/dist/style.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SWE=t():e.SWE=t()}(this,(()=>(()=>{"use strict";var e={};return e.default})()));