Countdown Timer Pro - Installation Guide
==========================================

QUICK START
-----------

1. Include jQuery (required):
   Add this before the closing </head> tag:
   
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Include Countdown Timer Pro files:
   Add these in your HTML:
   
   <link rel="stylesheet" href="countdown-timer-pro.css">
   <script src="countdown-timer-pro.js"></script>

3. Create a container element:
   
   <div id="my-timer" class="countdown-timer-pro"></div>

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


BASIC USAGE
-----------

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

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

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


VISUAL CUSTOMIZER PANEL
-----------------------
The easiest way to customize your timer is using the Visual Customizer Panel:

1. Open customizer-panel.html in your browser
2. Use the visual controls to customize all aspects of the timer
3. See changes in real-time preview
4. Copy the generated code and paste it into your website
5. Export presets to share or reuse later

The Customizer Panel includes:
- 13 Premium Presets ready to use
- Real-time preview with responsive modes
- Code generator for easy integration
- Export timer as PNG image
- Preset management (load, export, import, share)


PREMIUM PRESETS
---------------
Countdown Timer Pro includes 13 professionally designed presets:
1. Premium Base
2. Luxury Gold
3. Dark Neon
4. Glassmorphism
5. Minimalist
6. Cyberpunk
7. Elegant Classic
8. Ocean Breeze
9. Sunset Glow
10. Forest Green
11. Black Friday
12. Christmas
13. Product Launch

All presets can be loaded and customized via the Customizer Panel.


VISUAL EFFECTS
--------------
Liquid Effect (Always Enabled):
- Revolutionary 3D liquid animation
- Realistic waves, bubbles, and evaporation
- Distinctive visual feature with realistic 3D liquid animation

Pulse Glow Animation:
- Pulsating glow effect on circle borders
- Customizable intensity and speed

Gradient Wave Animation:
- Animated gradient waves on circle borders
- Multiple color support
- Smooth animation transitions


REQUIREMENTS
------------
- jQuery 3.0 or higher
- Modern browser with HTML5 Canvas support
- No additional dependencies required


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)


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

For detailed documentation, see README.md file included in this package.

