Countdown Timer Pro - Help File
=================================

TABLE OF CONTENTS
-----------------
1. Introduction
2. Quick Start
3. Configuration Options
4. Examples
5. Methods
6. Browser Support
7. Troubleshooting
8. FAQ


1. INTRODUCTION
---------------
Countdown Timer Pro is a modern, feature-rich countdown/countup timer built 
with HTML5 Canvas and jQuery. It features beautiful animations, extensive 
customization options, and full responsive design.

Key Features:
- Responsive design with optimized mobile layout
- Liquid Effect - Revolutionary 3D liquid animation (always enabled)
- Pulse Glow Animation - Pulsating glow effect
- Gradient Wave Animation - Animated gradient waves
- 13 Premium Presets - Professionally designed styles
- Visual Customizer Panel - No-code customization interface
- Countdown and countup modes
- Client-side and server-side time support
- Multicolor animations
- Customizable appearance
- Multiple instances support
- Expire actions
- Auto-reset functionality
- Celebration animations
- Sound effects
- 3D effects
- Background patterns


2. QUICK START
--------------
Step 1: Include jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Step 2: Include Countdown Timer Pro
<link rel="stylesheet" href="countdown-timer-pro.css">
<script src="countdown-timer-pro.js"></script>

Step 3: Create HTML element
<div id="my-timer" class="countdown-timer-pro"></div>

Step 4: Initialize
<script>
$(document).ready(function() {
    $('#my-timer').countdownTimerPro({
        timeType: 'countdown',
        duration: 3600
    });
});
</script>


3. CONFIGURATION OPTIONS
------------------------

Timer Type:
-----------
timeType: 'countdown' | 'countup' (default: 'countdown')

Time Source:
------------
timeSource: 'client' | 'server' (default: 'client')
duration: number (seconds, for client-side countdown)
endTime: number (Unix timestamp in seconds, for server-side countdown)
startTime: number (Unix timestamp in seconds, for countup, null for current)

Display Options:
----------------
showDays: boolean (default: true)
showHours: boolean (default: true)
showMinutes: boolean (default: true)
showSeconds: boolean (default: true)

Size Options:
-------------
width: number (pixels, default: 800)
height: number (pixels, default: 400)
fontSize: number (pixels, default: 48)
circleThickness: number (pixels, default: 8)

Color Options:
-------------
colors: {
    circle: '#3498db',           // Progress circle color
    circleBackground: '#ecf0f1',  // Background circle color
    text: '#2c3e50'              // Text color
}

Font Options:
-------------
fontFamily: string (default: 'Arial, sans-serif')
fontWeight: string (default: 'bold') - 'normal', 'bold', 'lighter', 'bolder', or numeric '100'-'900'
labelFontWeight: string (default: 'normal') - Font weight for labels

Multicolor Options:
-------------------
multicolor: {
    enabled: false,
    colors: ['#3498db', '#e74c3c', '#2ecc71', '#f39c12']
}

Liquid Effect (Always Enabled):
--------------------------------
liquidEffect: {
    enabled: true,        // Always enabled - distinctive visual feature
    intensity: 1.2,       // Wave intensity (0.5 to 2.0)
    bubbleSpeed: 1.0,     // Bubble rise speed (0.5 to 2.0)
    waveSpeed: 1.0,       // Wave animation speed (0.5 to 2.0)
    bubbleSpawnRate: 0.8, // Bubble spawn frequency (0.5 to 1.5)
    showEvaporation: true, // Show evaporation particles
    liquidColor: null     // Custom liquid color (null = use circle color)
}

Pulse Glow Animation:
---------------------
pulseGlow: {
    enabled: false,
    intensity: 1.0,  // Glow intensity (0.5 to 2.0)
    speed: 1.0      // Animation speed (0.5 to 2.0)
}

Gradient Wave Animation:
------------------------
gradientWave: {
    enabled: false,
    colors: ['#667eea', '#764ba2', '#f093fb', '#4facfe'], // Gradient colors
    speed: 1.0  // Animation speed (0.5 to 2.0)
}

Text Labels:
------------
texts: {
    days: 'DAYS',
    hours: 'HOURS',
    minutes: 'MINUTES',
    seconds: 'SECONDS'
}

Expire Actions:
---------------
expireAction: 'none' | 'hide' | 'redirect' | 'message' (default: 'none')
expireMessage: string (message to show when timer expires)
expireRedirectUrl: string (URL to redirect when timer expires)

Auto Reset:
-----------
autoReset: {
    enabled: false,
    unit: 'minutes' | 'hours' | 'days',
    value: number
}

Callbacks:
----------
onFinish: function (called when timer finishes)


4. EXAMPLES
-----------

Example 1: Basic Countdown
---------------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 3600,
    width: 800,
    height: 400
});

Example 2: Countup Timer
------------------------
$('#timer').countdownTimerPro({
    timeType: 'countup',
    startTime: Math.floor(Date.now() / 1000) - 3600,
    width: 800,
    height: 400
});

Example 3: Server-side Timestamp
---------------------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    timeSource: 'server',
    endTime: 1734567890,
    width: 800,
    height: 400
});

Example 4: Multicolor Timer
---------------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 7200,
    multicolor: {
        enabled: true,
        colors: ['#3498db', '#e74c3c', '#2ecc71', '#f39c12']
    },
    width: 800,
    height: 400
});

Example 5: Custom Appearance
-----------------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 5400,
    colors: {
        circle: '#e74c3c',
        circleBackground: '#ecf0f1',
        text: '#2c3e50'
    },
    fontFamily: 'Georgia, serif',
    fontSize: 56,
    circleThickness: 12,
    width: 800,
    height: 400
});

Example 6: Hide Days
---------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 3661,
    showDays: false,
    showHours: true,
    showMinutes: true,
    showSeconds: true,
    width: 600,
    height: 300
});

Example 7: Custom Text Labels
-----------------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 4500,
    texts: {
        days: 'GIORNI',
        hours: 'ORE',
        minutes: 'MINUTI',
        seconds: 'SECONDI'
    },
    width: 800,
    height: 400
});

Example 8: Expire with Message
------------------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 3600,
    expireAction: 'message',
    expireMessage: 'Time is up! The event has started.',
    width: 800,
    height: 400
});

Example 9: Auto Reset
---------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 60,
    autoReset: {
        enabled: true,
        unit: 'minutes',
        value: 1
    },
    width: 800,
    height: 400
});

Example 10: Multiple Instances
-------------------------------
$('#timer1').countdownTimerPro({
    timeType: 'countdown',
    duration: 1800,
    width: 400,
    height: 200
});

$('#timer2').countdownTimerPro({
    timeType: 'countup',
    startTime: Math.floor(Date.now() / 1000) - 3600,
    width: 400,
    height: 200,
    colors: { circle: '#e74c3c' }
});

Example 11: Liquid Effect with Pulse Glow
------------------------------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 3600,
    liquidEffect: {
        enabled: true,
        intensity: 1.2,
        bubbleSpeed: 1.0,
        waveSpeed: 1.0,
        showEvaporation: true
    },
    pulseGlow: {
        enabled: true,
        intensity: 1.5,
        speed: 1.0
    },
    width: 800,
    height: 400
});

Example 12: Gradient Wave Animation
------------------------------------
$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 3600,
    gradientWave: {
        enabled: true,
        colors: ['#667eea', '#764ba2', '#f093fb', '#4facfe'],
        speed: 1.0
    },
    width: 800,
    height: 400
});

Example 13: Using Visual Customizer Panel
------------------------------------------
1. Open customizer-panel.html in your browser
2. Select a preset or customize manually
3. Use real-time preview to see changes
4. Copy the generated code
5. Paste into your website


5. METHODS
----------

Start Timer:
------------
$('#timer').countdownTimerPro('start');

Stop Timer:
-----------
$('#timer').countdownTimerPro('stop');

Reset Timer:
------------
$('#timer').countdownTimerPro('reset');

Destroy Timer:
--------------
$('#timer').countdownTimerPro('destroy');


6. BROWSER SUPPORT
------------------
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Requires jQuery 3.x (not included - user must provide)


7. TROUBLESHOOTING
-------------------

Problem: Timer not displaying
Solution: 
- Make sure jQuery is loaded before countdown-timer-pro.js
- Check browser console for errors
- Verify container element exists in DOM

Problem: Timer not updating
Solution:
- Check if timer is started with 'start' method
- Verify duration/endTime is set correctly
- Check browser console for JavaScript errors

Problem: Colors not changing (multicolor)
Solution:
- Ensure multicolor.enabled is set to true
- Verify colors array contains valid hex colors
- Check that at least 2 colors are provided

Problem: Timer not responsive
Solution:
- Ensure container has width set (100% or specific width)
- Check that CSS is loaded correctly
- Verify viewport meta tag is present


8. FAQ
------

Q: Can I use multiple timers on the same page?
A: Yes, each timer instance is independent and can have different settings.

Q: Does it work on mobile devices?
A: Yes, the timer is fully responsive and works on all mobile devices.

Q: Can I customize the appearance?
A: Yes, you can customize colors, fonts, sizes, and more via options.

Q: Does it require jQuery?
A: Yes, jQuery 3.0+ is required.

Q: Can I use server-side timestamps?
A: Yes, set timeSource to 'server' and provide endTime as Unix timestamp.

Q: How do I handle timer expiration?
A: Use expireAction option: 'hide', 'redirect', or 'message'.

Q: Can the timer auto-reset?
A: Yes, enable autoReset option with desired interval.

Q: Is it compatible with WordPress?
A: Yes, you can use it in WordPress themes or plugins by including the files.

Q: What is the Liquid Effect?
A: The Liquid Effect is a distinctive 3D animation feature that makes the timer circles appear to contain liquid. It includes realistic waves, bubbles, and evaporation particles. This effect is always enabled and cannot be disabled.

Q: How do I use the Visual Customizer Panel?
A: Simply open customizer-panel.html in your browser. Use the visual controls to customize your timer, see changes in real-time, and copy the generated code.

Q: What presets are included?
A: 13 premium presets: Premium Base, Luxury Gold, Dark Neon, Glassmorphism, Minimalist, Cyberpunk, Elegant Classic, Ocean Breeze, Sunset Glow, Forest Green, Black Friday, Christmas, and Product Launch.

Q: Can I combine multiple animations?
A: Yes! You can enable multicolor, pulse glow, and gradient wave animations together. The liquid effect is always active.

Q: Does it work on mobile devices?
A: Yes, the timer is fully responsive with an optimized vertical layout for mobile devices. Use the Customizer Panel's responsive preview to test different screen sizes.


SUPPORT
-------
For additional support, please visit:
For support, please contact through your purchase platform (Envato CodeCanyon).

