Elegant Time Picker - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elegant Time Picker</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .time-picker-container {
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
            width: 300px;
            animation: fadeIn 1s ease-in-out;
        }
        .time-picker-header {
            font-size: 1.5em;
            margin-bottom: 10px;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .time-picker-header i {
            cursor: pointer;
            transition: color 0.3s;
        }
        .time-picker-header i:hover {
            color: #4facfe;
        }
        .time-picker-display {
            font-size: 3em;
            margin: 10px 0;
            color: #555;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .time-picker-display div {
            margin: 0 10px;
        }
        .time-picker-controls {
            display: flex;
            justify-content: space-between;
        }
        .time-picker-controls button {
            background: #4facfe;
            border: none;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            font-size: 1.2em;
            height: 50px;
            width: 50px;
            transition: background 0.3s;
        }
        .time-picker-controls button:hover {
            background: #00f2fe;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        .time-picker-emoji {
            font-size: 2em;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="time-picker-container">
        <div class="time-picker-header">
            <i class="fas fa-chevron-left" id="decrement-hour"></i>
            <span>Select Time</span>
            <i class="fas fa-chevron-right" id="increment-hour"></i>
        </div>
        <div class="time-picker-display">
            <div id="hours">12</div>:<div id="minutes">00</div> <div id="ampm">AM</div>
        </div>
        <div class="time-picker-controls">
            <button type="button" id="increment-minute" title="Increase"><i class="fas fa-chevron-up"></i></button>
            <button type="button" id="decrement-minute" title="Decrease"><i class="fas fa-chevron-down"></i></button>
        </div>
        <div class="time-picker-emoji">⏰</div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const hoursElem = document.getElementById('hours');
            const minutesElem = document.getElementById('minutes');
            const ampmElem = document.getElementById('ampm');
            const incrementHour = document.getElementById('increment-hour');
            const decrementHour = document.getElementById('decrement-hour');
            const incrementMinute = document.getElementById('increment-minute');
            const decrementMinute = document.getElementById('decrement-minute');
            let hours = 12;
            let minutes = 0;
            let isAM = true;
            function updateDisplay() {
                hoursElem.textContent = hours < 10 ? '0' + hours : hours;
                minutesElem.textContent = minutes < 10 ? '0' + minutes : minutes;
                ampmElem.textContent = isAM ? 'AM' : 'PM';
            }
            incrementHour.addEventListener('click', () => {
                hours = (hours % 12) + 1;
                if (hours === 12) isAM = !isAM;
                updateDisplay();
            });
            decrementHour.addEventListener('click', () => {
                hours = (hours === 1) ? 12 : hours - 1;
                if (hours === 11) isAM = !isAM;
                updateDisplay();
            });
            incrementMinute.addEventListener('click', () => {
                minutes = (minutes + 1) % 60;
                if (minutes === 0) incrementHour.click();
                updateDisplay();
            });
            decrementMinute.addEventListener('click', () => {
                if (minutes === 0) {
                    minutes = 59;
                    decrementHour.click();
                } else {
                    minutes -= 1;
                }
                updateDisplay();
            });
            updateDisplay();
        });
    </script>
</body>
</html>