

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Free time converter tool. Convert between seconds, minutes, hours, days, weeks, months, and years instantly.">
    <title>Time Converter - Convert Time Units | Anylistly</title>
    
        
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="https://anylistly.com//assets/css/style.css">
    
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-R0WQZK9Z1Z"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'G-R0WQZK9Z1Z');
    </script>
</head>
<body>
    <!-- Header Navigation -->
    <header>
        <div class="container">
            <nav>
                <!-- Logo -->
                <a href="https://anylistly.com/" class="logo">
                    <img src="https://anylistly.com//img/anylistly-logo.png" alt="Anylistly Logo">
                </a>
                
                <!-- Navigation Menu -->
                <ul class="nav-menu" id="navMenu">
                    <li><a href="https://anylistly.com/tools/" class="active">Tools</a></li>
                    <li><a href="https://anylistly.com/quotes/" class="">Quotes</a></li>
                    <li><a href="https://anylistly.com/countdowns/" class="">Countdowns</a></li>
                    <li><a href="https://anylistly.com/coloring-pages/" class="">Coloring Pages</a></li>
                </ul>
                
                <!-- Mobile Menu Toggle -->
                <div class="menu-toggle" id="menuToggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                
                <!-- Search Icon (can be enhanced later) -->
                <span class="search-icon">🔍</span>
            </nav>
        </div>
    </header>
    
    <!-- Main Content Starts Here (closed in footer.php) -->
    <main>
<!-- Breadcrumbs -->
<div class="container">
    <div class="breadcrumbs">
        <a href="https://anylistly.com/">Home</a>
        <span>›</span>
        <a href="https://anylistly.com/tools/">Free Tools</a>
        <span>›</span>
        <strong>Time Converter</strong>
    </div>
</div>

<!-- Page Header Hero Section -->
<section class="page-header" style="background: linear-gradient(135deg, #ddd6fe 0%, #fff 100%);">
    <div class="container" style="text-align: center;">
        <div style="font-size: 70px; margin-bottom: 16px;">⏰</div>
        <h1>Time Converter</h1>
        <p style="max-width: 650px; margin: 0 auto;">Convert time between different units instantly - seconds, minutes, hours, days, weeks, months, and years!</p>
    </div>
</section>

<!-- Tool Section -->
<section class="bg-gray">
    <div class="tool-container">
        <!-- Main Converter -->
        <div class="converter-section">
            <h3 style="text-align: center; margin-bottom: 30px; color: #1f2937;">⏱️ Enter Time Value</h3>
            
            <div class="converter-main">
                <div class="input-group">
                    <label for="inputValue">Value</label>
                    <input 
                        type="number" 
                        id="inputValue" 
                        placeholder="Enter value" 
                        value="1"
                        oninput="convertTime()"
                        step="any"
                    >
                </div>

                <div class="input-group">
                    <label for="fromUnit">From Unit</label>
                    <select id="fromUnit" onchange="convertTime()">
                        <option value="seconds">Seconds</option>
                        <option value="minutes">Minutes</option>
                        <option value="hours" selected>Hours</option>
                        <option value="days">Days</option>
                        <option value="weeks">Weeks</option>
                        <option value="months">Months</option>
                        <option value="years">Years</option>
                    </select>
                </div>
            </div>

            <!-- Current Conversion Display -->
            <div class="current-conversion" id="currentConversion">
                <div class="conversion-arrow">↓</div>
                <div class="conversion-text">Converting <strong id="conversionDisplay">1 Hour</strong></div>
            </div>
        </div>

        <!-- Results Grid -->
        <div class="results-section">
            <h3 style="text-align: center; margin-bottom: 25px; color: #1f2937;">📊 Conversion Results</h3>
            
            <div class="results-grid">
                <div class="result-card" id="card-seconds">
                    <div class="result-icon">⏱️</div>
                    <div class="result-value" id="resultSeconds">0</div>
                    <div class="result-label">Seconds</div>
                </div>

                <div class="result-card" id="card-minutes">
                    <div class="result-icon">⏲️</div>
                    <div class="result-value" id="resultMinutes">0</div>
                    <div class="result-label">Minutes</div>
                </div>

                <div class="result-card" id="card-hours">
                    <div class="result-icon">🕐</div>
                    <div class="result-value" id="resultHours">0</div>
                    <div class="result-label">Hours</div>
                </div>

                <div class="result-card" id="card-days">
                    <div class="result-icon">📅</div>
                    <div class="result-value" id="resultDays">0</div>
                    <div class="result-label">Days</div>
                </div>

                <div class="result-card" id="card-weeks">
                    <div class="result-icon">📆</div>
                    <div class="result-value" id="resultWeeks">0</div>
                    <div class="result-label">Weeks</div>
                </div>

                <div class="result-card" id="card-months">
                    <div class="result-icon">🗓️</div>
                    <div class="result-value" id="resultMonths">0</div>
                    <div class="result-label">Months</div>
                </div>

                <div class="result-card" id="card-years">
                    <div class="result-icon">📊</div>
                    <div class="result-value" id="resultYears">0</div>
                    <div class="result-label">Years</div>
                </div>

                <div class="result-card" id="card-milliseconds">
                    <div class="result-icon">⚡</div>
                    <div class="result-value" id="resultMilliseconds">0</div>
                    <div class="result-label">Milliseconds</div>
                </div>
            </div>
        </div>

        <!-- Quick Conversions -->
        <div class="quick-section">
            <h3 style="text-align: center; margin-bottom: 20px; color: #1f2937;">⚡ Quick Conversions</h3>
            <div class="quick-grid">
                <div class="quick-item" onclick="quickConvert(60, 'seconds')">
                    <span class="quick-label">1 Minute</span>
                    <span class="quick-value">= 60 Seconds</span>
                </div>
                <div class="quick-item" onclick="quickConvert(60, 'minutes')">
                    <span class="quick-label">1 Hour</span>
                    <span class="quick-value">= 60 Minutes</span>
                </div>
                <div class="quick-item" onclick="quickConvert(24, 'hours')">
                    <span class="quick-label">1 Day</span>
                    <span class="quick-value">= 24 Hours</span>
                </div>
                <div class="quick-item" onclick="quickConvert(7, 'days')">
                    <span class="quick-label">1 Week</span>
                    <span class="quick-value">= 7 Days</span>
                </div>
                <div class="quick-item" onclick="quickConvert(30, 'days')">
                    <span class="quick-label">1 Month</span>
                    <span class="quick-value">≈ 30 Days</span>
                </div>
                <div class="quick-item" onclick="quickConvert(365, 'days')">
                    <span class="quick-label">1 Year</span>
                    <span class="quick-value">= 365 Days</span>
                </div>
            </div>
        </div>

        <!-- Conversion Reference Table -->
        <div class="reference-table-section">
            <h3 style="text-align: center; margin-bottom: 20px; color: #1f2937;">📋 Time Unit Reference</h3>
            <div class="reference-table">
                <div class="ref-row ref-header">
                    <div class="ref-cell">Unit</div>
                    <div class="ref-cell">Equals</div>
                </div>
                <div class="ref-row">
                    <div class="ref-cell"><strong>1 Minute</strong></div>
                    <div class="ref-cell">60 Seconds</div>
                </div>
                <div class="ref-row">
                    <div class="ref-cell"><strong>1 Hour</strong></div>
                    <div class="ref-cell">60 Minutes = 3,600 Seconds</div>
                </div>
                <div class="ref-row">
                    <div class="ref-cell"><strong>1 Day</strong></div>
                    <div class="ref-cell">24 Hours = 1,440 Minutes = 86,400 Seconds</div>
                </div>
                <div class="ref-row">
                    <div class="ref-cell"><strong>1 Week</strong></div>
                    <div class="ref-cell">7 Days = 168 Hours = 10,080 Minutes</div>
                </div>
                <div class="ref-row">
                    <div class="ref-cell"><strong>1 Month</strong></div>
                    <div class="ref-cell">≈ 30 Days = 720 Hours (average)</div>
                </div>
                <div class="ref-row">
                    <div class="ref-cell"><strong>1 Year</strong></div>
                    <div class="ref-cell">365 Days = 8,760 Hours = 525,600 Minutes</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Content Section -->
<section>
    <div class="container">
        <div class="content-layout">
            <!-- Main Content -->
            <div class="main-content">
                <!-- Why Important -->
                <div class="content-card" style="background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); border: 2px solid #8b5cf6;">
                    <h2>🌟 Why Time Conversion is Important</h2>
                    <p>Time conversion is an essential skill in our globalized world. Whether you're managing projects across different time zones, calculating work hours, or understanding data measurements, knowing how to convert between time units is crucial for:</p>
                    <ul>
                        <li><strong>Professional Accuracy:</strong> Ensure precise project timelines, billing hours, and deadline calculations</li>
                        <li><strong>Technical Work:</strong> Programming, data analysis, and system administration require frequent time unit conversions</li>
                        <li><strong>Scientific Research:</strong> Experiments and data collection often need time conversions for accurate results</li>
                        <li><strong>Business Operations:</strong> Calculate employee hours, project durations, and service delivery times</li>
                        <li><strong>Personal Planning:</strong> Better understand time commitments, workout durations, and life milestones</li>
                        <li><strong>Education:</strong> Learn mathematical concepts and develop problem-solving skills</li>
                        <li><strong>International Communication:</strong> Coordinate with teams and clients across different time systems</li>
                    </ul>
                    <p>Our tool eliminates calculation errors and saves time by providing instant, accurate conversions across all major time units.</p>
                </div>

                <!-- About Tool -->
                <div class="content-card">
                    <h2>⏰ About Time Converter</h2>
                    <p>Our free Time Converter tool allows you to convert between different time units instantly. Whether you need to convert seconds to hours, days to weeks, or any other time unit conversion, our tool provides accurate results in real-time.</p>
                    <p>The converter supports 8 different time units: milliseconds, seconds, minutes, hours, days, weeks, months, and years, making it perfect for various calculations and conversions.</p>
                </div>

                <!-- How to Use -->
                <div class="content-card">
                    <h2>📖 How to Use</h2>
                    <ul>
                        <li>Enter the time value you want to convert</li>
                        <li>Select the unit you're converting from (seconds, minutes, hours, etc.)</li>
                        <li>View instant conversions to all other time units</li>
                        <li>The selected unit card will be highlighted for easy identification</li>
                        <li>Use quick conversion buttons for common time conversions</li>
                        <li>All results update automatically as you type</li>
                    </ul>
                </div>

                <!-- Features -->
                <div class="content-card">
                    <h2>✨ Key Features</h2>
                    <ul>
                        <li><strong>8 Time Units:</strong> Convert between milliseconds, seconds, minutes, hours, days, weeks, months, and years</li>
                        <li><strong>Visual Feedback:</strong> Selected unit is highlighted for better user experience</li>
                        <li><strong>Current Conversion Display:</strong> See what you're converting at a glance</li>
                        <li><strong>Instant Conversion:</strong> Results appear in real-time as you type</li>
                        <li><strong>Multiple Results:</strong> See conversions to all time units simultaneously</li>
                        <li><strong>Quick Conversions:</strong> One-click buttons for common time conversions</li>
                        <li><strong>Reference Table:</strong> Built-in time unit reference guide</li>
                        <li><strong>Accurate Calculations:</strong> Precise conversion formulas</li>
                        <li><strong>100% Free:</strong> No registration or payment required</li>
                        <li><strong>Mobile Friendly:</strong> Works perfectly on all devices</li>
                    </ul>
                </div>

                <!-- Use Cases -->
                <div class="content-card">
                    <h2>💡 Common Uses</h2>
                    <ul>
                        <li>Calculate project timelines and deadlines</li>
                        <li>Convert workout durations to different units</li>
                        <li>Calculate age in different time units</li>
                        <li>Convert video/audio lengths</li>
                        <li>Programming and coding (timestamp conversions)</li>
                        <li>Scientific calculations and research</li>
                        <li>Travel time calculations</li>
                        <li>Educational purposes and homework</li>
                        <li>Business and productivity planning</li>
                        <li>Time tracking for billing and invoicing</li>
                    </ul>
                </div>

                <!-- Conversion Formulas -->
                <div class="content-card">
                    <h2>🧮 Conversion Formulas</h2>
                    <ul>
                        <li><strong>Seconds to Minutes:</strong> Divide by 60</li>
                        <li><strong>Minutes to Hours:</strong> Divide by 60</li>
                        <li><strong>Hours to Days:</strong> Divide by 24</li>
                        <li><strong>Days to Weeks:</strong> Divide by 7</li>
                        <li><strong>Days to Months:</strong> Divide by 30 (average)</li>
                        <li><strong>Days to Years:</strong> Divide by 365</li>
                        <li><strong>Seconds to Milliseconds:</strong> Multiply by 1,000</li>
                    </ul>
                </div>

                <!-- Time Facts -->
                <div class="content-card">
                    <h2>🌟 Interesting Time Facts</h2>
                    <ul>
                        <li>1 year = 525,600 minutes (remember the song "Seasons of Love"?)</li>
                        <li>1 day = 86,400 seconds</li>
                        <li>1 week = 10,080 minutes</li>
                        <li>A decade = 315,360,000 seconds</li>
                        <li>Average human lifespan (80 years) ≈ 2.5 billion seconds</li>
                        <li>The average person spends about 26 years sleeping in their lifetime</li>
                        <li>In one year, light travels about 9.46 trillion kilometers</li>
                        <li>The Earth rotates 1° every 4 minutes</li>
                    </ul>
                </div>
            </div>

            <!-- Sidebar -->
            <aside class="sidebar">
                <!-- Tool Info Widget -->
                <div class="sidebar-widget">
                    <h3>Tool Information</h3>
                    <div class="widget-content">
                        <div class="widget-item">
                            <strong>Category:</strong>
                            <span>Converters</span>
                        </div>
                        <div class="widget-item">
                            <strong>Uses:</strong>
                            <span>22k+</span>
                        </div>
                        <div class="widget-item">
                            <strong>Status:</strong>
                            <span style="color: #10b981;">✓ Active</span>
                        </div>
                    </div>
                </div>

                <!-- Quick Reference -->
                <div class="sidebar-widget">
                    <h3>⚡ Quick Reference</h3>
                    <div class="quick-ref-content">
                        <div class="quick-ref-item">
                            <span class="qr-label">1 Min:</span>
                            <span class="qr-value">60 sec</span>
                        </div>
                        <div class="quick-ref-item">
                            <span class="qr-label">1 Hour:</span>
                            <span class="qr-value">3,600 sec</span>
                        </div>
                        <div class="quick-ref-item">
                            <span class="qr-label">1 Day:</span>
                            <span class="qr-value">86,400 sec</span>
                        </div>
                        <div class="quick-ref-item">
                            <span class="qr-label">1 Week:</span>
                            <span class="qr-value">604,800 sec</span>
                        </div>
                        <div class="quick-ref-item">
                            <span class="qr-label">1 Year:</span>
                            <span class="qr-value">31,536,000 sec</span>
                        </div>
                    </div>
                </div>

                <!-- Share Widget -->
                <div class="sidebar-widget">
                    <h3>Share This Tool</h3>
                    <div class="share-buttons">
                        <button class="share-btn share-facebook" onclick="shareOnFacebook()">📘 Facebook</button>
                        <button class="share-btn share-twitter" onclick="shareOnTwitter()">🦋 Twitter</button>
                        <button class="share-btn share-whatsapp" onclick="shareOnWhatsApp()">💬 WhatsApp</button>
                    </div>
                </div>

                <!-- Related Tools Widget -->
                <div class="sidebar-widget">
                    <h3>Related Tools</h3>
                    <div class="related-tools">
                        <a href="https://anylistly.com/tools/time-converter.php" class="related-tool">
                            <div class="related-icon">⏰</div>
                            <div class="related-info">
                                <h4>Time Converter</h4>
                                <p>Calculate time Formats</p>
                            </div>
                        </a>
                        <a href="https://anylistly.com/tools/age-calculator.php" class="related-tool">
                            <div class="related-icon">🎂</div>
                            <div class="related-info">
                                <h4>Age Calculator</h4>
                                <p>Calculate your age</p>
                            </div>
                        </a>
                        <!--<a href="https://anylistly.com/tools/timezone-converter/" class="related-tool">-->
                        <!--    <div class="related-icon">🌍</div>-->
                        <!--    <div class="related-info">-->
                        <!--        <h4>Timezone Converter</h4>-->
                        <!--        <p>Convert between timezones</p>-->
                        <!--    </div>-->
                        <!--</a>-->
                        <a href="https://anylistly.com/tools/" class="related-tool">
                            <div class="related-icon">🛠️</div>
                            <div class="related-info">
                                <h4>All Tools</h4>
                                <p>Browse all tools</p>
                            </div>
                        </a>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</section>

<!-- Custom Styles -->
<style>
/* Tool Container */
.tool-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* Converter Section */
.converter-section {
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-radius: 16px;
    border: 2px solid #8b5cf6;
}

.converter-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    margin-bottom: 10px;
    font-weight: 600;
    color: #1f2937;
    font-size: 15px;
}

input[type="number"],
select {
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s;
    background: #fff;
    font-weight: 600;
}

input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

select {
    cursor: pointer;
}

/* Current Conversion Display */
.current-conversion {
    margin-top: 25px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    text-align: center;
}

.conversion-arrow {
    font-size: 28px;
    color: #8b5cf6;
    margin-bottom: 8px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.conversion-text {
    font-size: 16px;
    color: #1f2937;
}

.conversion-text strong {
    color: #7c3aed;
    font-size: 18px;
}

/* Results Section */
.results-section {
    margin-bottom: 40px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.result-card {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    padding: 20px;
    border-radius: 14px;
    text-align: center;
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.result-card:hover {
    transform: translateY(-4px);
    border-color: #8b5cf6;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2);
}

.result-card.selected {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border-color: #7c3aed;
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.4);
}

.result-card.selected .result-icon {
    font-size: 38px;
    animation: pulse 1.5s infinite;
}

.result-card.selected .result-value {
    color: #fff;
    font-size: 26px;
}

.result-card.selected .result-label {
    color: #e0e7ff;
}

.result-card.selected::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 12px;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.result-icon {
    font-size: 32px;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.result-value {
    font-size: 24px;
    font-weight: 800;
    color: #7c3aed;
    margin-bottom: 6px;
    word-break: break-word;
    transition: all 0.3s;
}

.result-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

/* Quick Section */
.quick-section {
    margin-bottom: 40px;
    padding: 30px;
    background: #f9fafb;
    border-radius: 16px;
    border: 2px solid #e5e7eb;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.quick-item {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-item:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.quick-label {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.quick-value {
    font-size: 13px;
    color: #7c3aed;
    font-weight: 600;
}

/* Reference Table */
.reference-table-section {
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    border: 2px solid #e5e7eb;
}

.reference-table {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.ref-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-bottom: 1px solid #e5e7eb;
}

.ref-row:last-child {
    border-bottom: none;
}

.ref-row:nth-child(even) {
    background: #f9fafb;
}

.ref-header {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    font-weight: 700;
}

.ref-cell {
    padding: 14px 20px;
    font-size: 14px;
}

.ref-row:not(.ref-header) .ref-cell:first-child {
    color: #1f2937;
}

.ref-row:not(.ref-header) .ref-cell:last-child {
    color: #6b7280;
}

/* Content Layout */
.content-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    margin-top: 40px;
}

.main-content {
    min-width: 0;
}

.content-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.content-card h2 {
    font-size: 24px;
    color: #1f2937;
    margin-bottom: 20px;
}

.content-card p {
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 16px;
}

.content-card ul {
    margin-left: 20px;
    margin-bottom: 16px;
}

.content-card li {
    color: #6b7280;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: #f9fafb;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.sidebar-widget h3 {
    font-size: 18px;
    color: #1f2937;
    margin-bottom: 16px;
}

.widget-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-item {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
}

.widget-item:last-child {
    border-bottom: none;
}

.widget-item strong {
    color: #1f2937;
}

.widget-item span {
    color: #6b7280;
}

/* Quick Reference */
.quick-ref-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-ref-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
}

.qr-label {
    color: #6b7280;
    font-weight: 600;
}

.qr-value {
    color: #7c3aed;
    font-weight: 700;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-btn {
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.share-facebook { background: #1877f2; }
.share-twitter { background: #1da1f2; }
.share-whatsapp { background: #25d366; }

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Related Tools */
.related-tools {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.related-tool:hover {
    background: #f5f3ff;
    transform: translateX(5px);
}

.related-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 8px;
    flex-shrink: 0;
}

.related-info h4 {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
}

.related-info p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .content-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .tool-container {
        padding: 30px 24px;
    }

    .converter-main {
        grid-template-columns: 1fr;
    }

    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-grid {
        grid-template-columns: 1fr;
    }

    .ref-row {
        grid-template-columns: 1fr;
    }

    .ref-cell {
        padding: 10px 16px;
    }
}
</style>

<!-- JavaScript -->
<script>
// Time conversion constants (all to seconds)
const timeUnits = {
    milliseconds: 0.001,
    seconds: 1,
    minutes: 60,
    hours: 3600,
    days: 86400,
    weeks: 604800,
    months: 2592000, // 30 days average
    years: 31536000  // 365 days
};

// Unit display names
const unitNames = {
    milliseconds: 'Milliseconds',
    seconds: 'Seconds',
    minutes: 'Minutes',
    hours: 'Hours',
    days: 'Days',
    weeks: 'Weeks',
    months: 'Months',
    years: 'Years'
};

function convertTime() {
    const value = parseFloat(document.getElementById('inputValue').value) || 0;
    const fromUnit = document.getElementById('fromUnit').value;
    
    // Update conversion display
    const unitName = unitNames[fromUnit];
    const displayText = value === 1 ? unitName.slice(0, -1) : unitName;
    document.getElementById('conversionDisplay').textContent = `${value} ${displayText}`;
    
    // Convert input to seconds first
    const inSeconds = value * timeUnits[fromUnit];
    
    // Convert seconds to all other units
    const results = {
        milliseconds: inSeconds / timeUnits.milliseconds,
        seconds: inSeconds / timeUnits.seconds,
        minutes: inSeconds / timeUnits.minutes,
        hours: inSeconds / timeUnits.hours,
        days: inSeconds / timeUnits.days,
        weeks: inSeconds / timeUnits.weeks,
        months: inSeconds / timeUnits.months,
        years: inSeconds / timeUnits.years
    };
    
    // Update display
    document.getElementById('resultMilliseconds').textContent = formatNumber(results.milliseconds);
    document.getElementById('resultSeconds').textContent = formatNumber(results.seconds);
    document.getElementById('resultMinutes').textContent = formatNumber(results.minutes);
    document.getElementById('resultHours').textContent = formatNumber(results.hours);
    document.getElementById('resultDays').textContent = formatNumber(results.days);
    document.getElementById('resultWeeks').textContent = formatNumber(results.weeks);
    document.getElementById('resultMonths').textContent = formatNumber(results.months);
    document.getElementById('resultYears').textContent = formatNumber(results.years);
    
    // Highlight selected unit card
    highlightSelectedCard(fromUnit);
}

function highlightSelectedCard(selectedUnit) {
    // Remove 'selected' class from all cards
    document.querySelectorAll('.result-card').forEach(card => {
        card.classList.remove('selected');
    });
    
    // Add 'selected' class to the current unit card
    const cardId = `card-${selectedUnit}`;
    const selectedCard = document.getElementById(cardId);
    if (selectedCard) {
        selectedCard.classList.add('selected');
        
        // Smooth scroll to selected card on mobile
        if (window.innerWidth <= 768) {
            setTimeout(() => {
                selectedCard.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
            }, 100);
        }
    }
}

function formatNumber(num) {
    if (num === 0) return '0';
    
    // For very large numbers, use exponential notation
    if (Math.abs(num) >= 1e15) {
        return num.toExponential(2);
    }
    
    // For very small numbers
    if (Math.abs(num) < 0.000001 && num !== 0) {
        return num.toExponential(6);
    }
    
    // For decimal numbers, limit to 6 decimal places
    if (num % 1 !== 0) {
        return parseFloat(num.toFixed(6)).toLocaleString('en-US', {
            maximumFractionDigits: 6
        });
    }
    
    // For whole numbers, add thousand separators
    return num.toLocaleString('en-US');
}

function quickConvert(value, unit) {
    document.getElementById('inputValue').value = value;
    document.getElementById('fromUnit').value = unit;
    convertTime();
    
    // Scroll to results
    document.querySelector('.results-section').scrollIntoView({ 
        behavior: 'smooth', 
        block: 'nearest' 
    });
}

// Share functions
function shareOnFacebook() {
    const url = encodeURIComponent(window.location.href);
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
}

function shareOnTwitter() {
    const url = encodeURIComponent(window.location.href);
    const text = encodeURIComponent('Check out this Time Converter tool! Convert between seconds, minutes, hours, days, and more instantly!');
    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank', 'width=600,height=400');
}

function shareOnWhatsApp() {
    const url = encodeURIComponent(window.location.href);
    const text = encodeURIComponent('Check out this Time Converter tool! Convert between seconds, minutes, hours, days, and more instantly!');
    window.open(`https://wa.me/?text=${text}%20${url}`, '_blank');
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    convertTime();
});
</script>

</main>
    <!-- Main Content Ends Here (opened in header.php) -->
    
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <!-- About Column -->
                <div class="footer-col">
                    <h4>About</h4>
                    <ul>
                        <li><a href="https://anylistly.com/about-us/">About Us</a></li>
                        <li><a href="https://anylistly.com/contact-us/">Contact</a></li>
                        <li><a href="https://anylistly.com/coming-soon/">Blog</a></li>
                    </ul>
                </div>
                
                <!-- Categories Column -->
                <div class="footer-col">
                    <h4>Categories</h4>
                    <ul>
                        <li><a href="https://anylistly.com/coloring-pages/">Coloring Pages</a></li>
                        <li><a href="https://anylistly.com/quotes/">Quotes & Wishes</a></li>
                        <li><a href="https://anylistly.com/tools/">Free Online Tools</a></li>
                        <li><a href="https://anylistly.com/countdowns/">Countdowns</a></li>
                    </ul>
                </div>
                
                <!-- Legal Column -->
                <div class="footer-col">
                    <h4>Legal</h4>
                    <ul>
                        <li><a href="https://anylistly.com/privacy/">Privacy Policy</a></li>
                        <li><a href="https://anylistly.com/terms/">Terms of Service</a></li>
                        <li><a href="https://anylistly.com/disclaimer/">Disclaimer</a></li>
                    </ul>
                </div>
                
                <!-- Social/Newsletter Column (Optional - Add as needed) -->
                <div class="footer-col">
                    <h4>Follow Us</h4>
                    <ul>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">Pinterest</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Copyright -->
            <div class="copyright">
                <p>&copy; 2026 Anylistly.com – All Rights Reserved</p>
            </div>
        </div>
    </footer>
    
    <!-- Main JavaScript -->
    <script src="https://anylistly.com/assets/js/main.js"></script>
    
    
    <button id="scrollToTop" class="scroll-to-top-v3" title="Go to top">
        <span>TOP</span>
    </button>

    
</body>
</html>