Hugging Face's logo

Spaces:
fenglui
/
time-calculator
Running

App Files Community
time-calculator
File size: 9,787 Bytes 
604573e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Calculator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .glow-text {
            text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
        }
        .input-field {
            transition: all 0.3s ease;
        }
        .input-field:focus {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
        }
        .result-box {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(129, 140, 248, 0.1) 100%);
            backdrop-filter: blur(5px);
        }
        .clock-digit {
            font-family: 'Courier New', monospace;
            font-weight: bold;
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
    <div class="max-w-2xl w-full bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
        <!-- Header -->
        <div class="bg-blue-600 p-6 text-center">
            <h1 class="text-3xl font-bold glow-text">Time Calculator</h1>
            <p class="mt-2 text-blue-100">Calculate future dates based on time duration</p>
        </div>
        
        <!-- Current Time Display -->
        <div class="p-6 border-b border-gray-700">
            <div class="flex justify-center items-center space-x-4">
                <i class="fas fa-clock text-blue-400 text-2xl"></i>
                <div id="current-time" class="text-2xl font-mono clock-digit">00:00:00</div>
                <div id="current-date" class="text-gray-300">-</div>
            </div>
        </div>
        
        <!-- Input Section -->
        <div class="p-6">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div>
                    <label for="days" class="block text-sm font-medium text-gray-300 mb-1">Days</label>
                    <input type="number" id="days" class="w-full input-field bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500" min="0" value="0">
                </div>
                <div>
                    <label for="hours" class="block text-sm font-medium text-gray-300 mb-1">Hours</label>
                    <input type="number" id="hours" class="w-full input-field bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500" min="0" max="23" value="0">
                </div>
                <div>
                    <label for="minutes" class="block text-sm font-medium text-gray-300 mb-1">Minutes</label>
                    <input type="number" id="minutes" class="w-full input-field bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500" min="0" max="59" value="0">
                </div>
                <div>
                    <label for="seconds" class="block text-sm font-medium text-gray-300 mb-1">Seconds</label>
                    <input type="number" id="seconds" class="w-full input-field bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:border-blue-500" min="0" max="59" value="0">
                </div>
            </div>
            
            <button id="calculate-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
                <i class="fas fa-calculator"></i>
                <span>Calculate Future Time</span>
            </button>
        </div>
        
        <!-- Result Section -->
        <div id="result-section" class="p-6 hidden">
            <div class="result-box border border-blue-500 rounded-lg p-4">
                <h3 class="text-lg font-semibold text-blue-400 mb-2">Result:</h3>
                <p id="result-text" class="text-gray-200"></p>
            </div>
        </div>
        
        <!-- Instructions -->
        <div class="bg-gray-700 p-4 text-sm text-gray-300">
            <div class="flex items-start space-x-2">
                <i class="fas fa-info-circle text-blue-400 mt-1"></i>
                <div>
                    <p class="font-medium">How to use:</p>
                    <p class="mt-1">Enter days, hours, minutes and seconds, then click "Calculate" to see what the date and time will be after that duration from now.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Update current time every second
        function updateCurrentTime() {
            const now = new Date();
            const timeElement = document.getElementById('current-time');
            const dateElement = document.getElementById('current-date');
            
            // Format time (HH:MM:SS)
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            timeElement.textContent = `${hours}:${minutes}:${seconds}`;
            
            // Format date (Month Day, Year)
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            dateElement.textContent = now.toLocaleDateString(undefined, options);
        }
        
        // Initialize and update time every second
        updateCurrentTime();
        setInterval(updateCurrentTime, 1000);
        
        // Calculate future time
        document.getElementById('calculate-btn').addEventListener('click', function() {
            // Get input values
            const days = parseInt(document.getElementById('days').value) || 0;
            const hours = parseInt(document.getElementById('hours').value) || 0;
            const minutes = parseInt(document.getElementById('minutes').value) || 0;
            const seconds = parseInt(document.getElementById('seconds').value) || 0;
            
            // Validate inputs
            if (days < 0 || hours < 0 || minutes < 0 || seconds < 0) {
                alert("Please enter positive numbers only");
                return;
            }
            
            if (hours > 23 || minutes > 59 || seconds > 59) {
                alert("Please enter valid time values (hours: 0-23, minutes: 0-59, seconds: 0-59)");
                return;
            }
            
            // Calculate future date
            const now = new Date();
            const futureDate = new Date(now);
            
            // Add the input duration to current date
            futureDate.setDate(futureDate.getDate() + days);
            futureDate.setHours(futureDate.getHours() + hours);
            futureDate.setMinutes(futureDate.getMinutes() + minutes);
            futureDate.setSeconds(futureDate.getSeconds() + seconds);
            
            // Format the result string
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric', 
                hour: 'numeric', 
                minute: '2-digit', 
                second: '2-digit',
                hour12: true 
            };
            const formattedDate = futureDate.toLocaleDateString(undefined, options);
            
            // Build the result text
            let durationText = [];
            if (days > 0) durationText.push(`${days} day${days !== 1 ? 's' : ''}`);
            if (hours > 0) durationText.push(`${hours} hour${hours !== 1 ? 's' : ''}`);
            if (minutes > 0) durationText.push(`${minutes} minute${minutes !== 1 ? 's' : ''}`);
            if (seconds > 0) durationText.push(`${seconds} second${seconds !== 1 ? 's' : ''}`);
            
            if (durationText.length === 0) {
                durationText = ["0 seconds"];
            }
            
            const resultText = `In ${durationText.join(', ')} from now it will be ${formattedDate}.`;
            
            // Display the result
            document.getElementById('result-text').textContent = resultText;
            document.getElementById('result-section').classList.remove('hidden');
            
            // Scroll to result
            document.getElementById('result-section').scrollIntoView({ behavior: 'smooth' });
        });
        
        // Add input validation
        document.getElementById('hours').addEventListener('change', function() {
            if (this.value > 23) this.value = 23;
            if (this.value < 0) this.value = 0;
        });
        
        document.getElementById('minutes').addEventListener('change', function() {
            if (this.value > 59) this.value = 59;
            if (this.value < 0) this.value = 0;
        });
        
        document.getElementById('seconds').addEventListener('change', function() {
            if (this.value > 59) this.value = 59;
            if (this.value < 0) this.value = 0;
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fenglui/time-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>