<!DOCTYPE html>
<html>
<head>
<title>Time Savings Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.time-calculator-container {
max-width: 700px;
margin: 20px auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.time-calculator-header {
text-align: center;
color: white;
padding: 15px;
margin-bottom: 20px;
border-bottom: 2px solid rgba(255,255,255,0.1);
}
.time-calculator-header h2 {
margin: 0 0 10px 0;
font-size: 28px;
font-weight: 700;
}
.time-calculator-header p {
margin: 0;
opacity: 0.9;
font-size: 16px;
line-height: 1.5;
}
.time-calculator-body {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.input-group {
margin-bottom: 25px;
}
.input-group label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #444;
font-size: 16px;
}
.input-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.input-field {
flex: 1;
}
.input-field label {
font-size: 14px;
font-weight: 500;
color: #666;
margin-bottom: 5px;
display: block;
}
.time-calculator input, .time-calculator select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s;
background-color: #f8f9fa;
}
.time-calculator input:focus, .time-calculator select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
background-color: white;
}
.calculate-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 16px 20px;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: all 0.3s;
margin-top: 10px;
box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}
.calculate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
}
.calculate-btn:active {
transform: translateY(-1px);
}
.time-results {
margin-top: 30px;
padding: 25px;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
border-radius: 10px;
border-left: 5px solid #667eea;
display: none;
}
.time-results.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.result-item {
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid #dce1e8;
display: flex;
justify-content: space-between;
align-items: center;
}
.result-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.result-label {
font-weight: 600;
color: #555;
font-size: 16px;
}
.result-value {
font-size: 20px;
font-weight: 700;
color: #667eea;
text-align: right;
}
.highlight {
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
padding: 20px;
border-radius: 8px;
margin-top: 20px;
text-align: center;
font-weight: 600;
font-size: 18px;
color: #7a2c2c;
box-shadow: 0 4px 10px rgba(255, 154, 158, 0.3);
}
.footer-note {
text-align: center;
margin-top: 20px;
padding: 15px;
color: rgba(255,255,255,0.8);
font-size: 14px;
border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 600px) {
.input-row {
flex-direction: column;
gap: 10px;
}
.time-calculator-header h2 {
font-size: 22px;
}
.time-calculator-container {
margin: 10px;
padding: 15px;
}
.time-calculator-body {
padding: 15px;
}
.result-item {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.result-value {
text-align: left;
}
}
/* Loading animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="time-calculator-container">
<div class="time-calculator-header">
<h2>⏰ Time Savings Calculator</h2>
<p>Calculate how much time you're saving compared to others by using your time more efficiently</p>
</div>
<div class="time-calculator-body time-calculator">
<div class="input-group">
<label>Your Sleep Schedule</label>
<div class="input-row">
<div class="input-field">
<label>Sleep Time</label>
<input type="time" id="blogger-sleep-time" value="00:00" required>
</div>
<div class="input-field">
<label>Wake Up Time</label>
<input type="time" id="blogger-wake-time" value="04:00" required>
</div>
</div>
</div>
<div class="input-group">
<label>Comparison Settings</label>
<div class="input-row">
<div class="input-field">
<label>Average Sleep (Others)</label>
<select id="blogger-avg-sleep">
<option value="5">5 hours</option>
<option value="6">6 hours</option>
<option value="7" selected>7 hours</option>
<option value="8">8 hours</option>
<option value="9">9 hours</option>
</select>
</div>
<div class="input-field">
<label>Time Period</label>
<select id="blogger-time-period">
<option value="1">1 Day</option>
<option value="7" selected>1 Week</option>
<option value="30">1 Month (30 days)</option>
<option value="90">3 Months (90 days)</option>
<option value="365">1 Year (365 days)</option>
</select>
</div>
</div>
</div>
<button class="calculate-btn" id="calculate-btn" onclick="calculateTimeSavings()">
<span id="btn-text">Calculate My Time Savings</span>
<span id="btn-loading" class="loading" style="display:none;"></span>
</button>
<div class="time-results" id="blogger-results">
<div class="result-item">
<div class="result-label">Your Sleep Duration</div>
<div class="result-value" id="blogger-your-sleep">4 hours</div>
</div>
<div class="result-item">
<div class="result-label">Average Sleep (Others)</div>
<div class="result-value" id="blogger-avg-sleep-result">7 hours</div>
</div>
<div class="result-item">
<div class="result-label">Time Saved Per Day</div>
<div class="result-value" id="blogger-time-saved-day">3 hours</div>
</div>
<div class="result-item">
<div class="result-label">Total Time Saved</div>
<div class="result-value" id="blogger-total-time-saved">21 hours</div>
</div>
<div class="highlight" id="blogger-highlight-result">
You've saved 21 hours in a week! That's almost a full day!
</div>
</div>
</div>
<div class="footer-note">
<p>Use your saved time wisely to achieve your goals! 🚀</p>
</div>
</div>
<script>
function calculateTimeSavings() {
// Show loading state
const btn = document.getElementById('calculate-btn');
const btnText = document.getElementById('btn-text');
const btnLoading = document.getElementById('btn-loading');
btn.disabled = true;
btnText.textContent = 'Calculating...';
btnLoading.style.display = 'inline-block';
// Small delay for better UX
setTimeout(() => {
try {
// Get user inputs
const sleepTime = document.getElementById('blogger-sleep-time').value;
const wakeTime = document.getElementById('blogger-wake-time').value;
const avgSleep = parseInt(document.getElementById('blogger-avg-sleep').value);
const timePeriod = parseInt(document.getElementById('blogger-time-period').value);
// Validate inputs
if (!sleepTime || !wakeTime) {
alert('Please enter both sleep and wake times');
resetButton();
return;
}
// Calculate sleep duration in hours
const sleepParts = sleepTime.split(':');
const wakeParts = wakeTime.split(':');
let sleepHour = parseInt(sleepParts[0]);
let sleepMinute = parseInt(sleepParts[1]);
let wakeHour = parseInt(wakeParts[0]);
let wakeMinute = parseInt(wakeParts[1]);
// Handle overnight sleep (if wake time is earlier than sleep time, it's the next day)
let totalSleepHours;
if (wakeHour < sleepHour || (wakeHour === sleepHour && wakeMinute < sleepMinute)) {
wakeHour += 24;
}
const sleepDurationMinutes = (wakeHour * 60 + wakeMinute) - (sleepHour * 60 + sleepMinute);
totalSleepHours = sleepDurationMinutes / 60;
// Validate sleep duration
if (totalSleepHours <= 0) {
alert('Please check your sleep times. Wake time should be after sleep time.');
resetButton();
return;
}
if (totalSleepHours > 24) {
alert('Sleep duration cannot be more than 24 hours. Please check your times.');
resetButton();
return;
}
// Calculate time saved
const timeSavedPerDay = avgSleep - totalSleepHours;
const totalTimeSaved = timeSavedPerDay * timePeriod;
// Update results
document.getElementById('blogger-your-sleep').textContent = totalSleepHours.toFixed(1) + ' hours';
document.getElementById('blogger-avg-sleep-result').textContent = avgSleep + ' hours';
document.getElementById('blogger-time-saved-day').textContent = Math.abs(timeSavedPerDay).toFixed(1) + ' hours';
document.getElementById('blogger-total-time-saved').textContent = Math.abs(totalTimeSaved).toFixed(1) + ' hours';
// Create highlight message based on time saved
let highlightMessage = '';
if (timeSavedPerDay < 0) {
highlightMessage = `You're sleeping ${Math.abs(timeSavedPerDay).toFixed(1)} hours MORE than average. Focus on quality sleep!`;
} else if (timeSavedPerDay === 0) {
highlightMessage = "You're sleeping exactly the average amount. Good balance!";
} else if (totalTimeSaved < 10) {
highlightMessage = `You've saved ${totalTimeSaved.toFixed(1)} hours! Every minute counts toward your goals!`;
} else if (totalTimeSaved < 24) {
highlightMessage = `You've saved ${totalTimeSaved.toFixed(1)} hours! That's a productive half-day!`;
} else if (totalTimeSaved < 48) {
highlightMessage = `You've saved ${totalTimeSaved.toFixed(1)} hours! That's more than a full day of extra time!`;
} else {
const daysSaved = (totalTimeSaved / 24).toFixed(1);
highlightMessage = `You've saved ${totalTimeSaved.toFixed(1)} hours! That's ${daysSaved} extra days to achieve your goals!`;
}
document.getElementById('blogger-highlight-result').textContent = highlightMessage;
// Show results
document.getElementById('blogger-results').classList.add('active');
} catch (error) {
console.error('Calculation error:', error);
alert('An error occurred during calculation. Please try again.');
}
// Reset button
resetButton();
}, 800);
}
function resetButton() {
const btn = document.getElementById('calculate-btn');
const btnText = document.getElementById('btn-text');
const btnLoading = document.getElementById('btn-loading');
btn.disabled = false;
btnText.textContent = 'Calculate My Time Savings';
btnLoading.style.display = 'none';
}
// Calculate on page load with default values
window.addEventListener('load', function() {
calculateTimeSavings();
});
// Add input validation
document.addEventListener('DOMContentLoaded', function() {
const inputs = document.querySelectorAll('input, select');
inputs.forEach(input => {
input.addEventListener('change', function() {
// Recalculate when any input changes
calculateTimeSavings();
});
});
});
</script>
</body>
</html>
0 Comments