<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Cost Calculator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
padding: 40px;
max-width: 600px;
width: 100%;
backdrop-filter: blur(10px);
}
h1 {
color: #333;
margin-bottom: 30px;
text-align: center;
font-size: 2.5em;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 600;
font-size: 0.95em;
}
input, select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
background-color: #f8f9fa;
}
input:focus, select:focus {
outline: none;
border-color: #667eea;
background-color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-group {
position: relative;
}
.input-suffix {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #888;
pointer-events: none;
font-weight: 500;
}
.results {
margin-top: 30px;
padding: 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
color: white;
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.results.show {
opacity: 1;
transform: translateY(0);
}
.result-item {
margin-bottom: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
}
.result-label {
font-size: 0.9em;
opacity: 0.9;
margin-bottom: 5px;
}
.result-value {
font-size: 1.5em;
font-weight: 700;
}
.savings {
background: rgba(76, 175, 80, 0.2);
border: 2px solid rgba(76, 175, 80, 0.5);
}
@media (max-width: 600px) {
.container {
padding: 25px;
}
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Task Cost Calculator</h1>
<form id="calculatorForm">
<div class="form-group">
<label for="industry">What industry are you in?</label>
<select id="industry" required>
<option value="">Select an industry</option>
<option value="technology">Technology</option>
<option value="healthcare">Healthcare</option>
<option value="finance">Finance & Banking</option>
<option value="retail">Retail</option>
<option value="manufacturing">Manufacturing</option>
<option value="education">Education</option>
<option value="hospitality">Hospitality</option>
<option value="construction">Construction</option>
<option value="transportation">Transportation</option>
<option value="media">Media & Entertainment</option>
<option value="agriculture">Agriculture</option>
<option value="energy">Energy & Utilities</option>
<option value="real-estate">Real Estate</option>
<option value="government">Government</option>
<option value="non-profit">Non-Profit</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="numPeople">Number of people performing this task</label>
<input type="number" id="numPeople" min="1" required>
</div>
<div class="form-group">
<label for="timeSpent">% of time an employee spends on this task</label>
<div class="input-group">
<input type="number" id="timeSpent" min="0" max="100" step="0.1" required>
<span class="input-suffix">%</span>
</div>
</div>
<div class="form-group">
<label for="timeSaved">% of time saved if automated</label>
<div class="input-group">
<input type="number" id="timeSaved" min="0" max="100" step="0.1" required>
<span class="input-suffix">%</span>
</div>
</div>
<div class="form-group">
<label for="avgSalary">Average annual salary of employee</label>
<div class="input-group">
<input type="number" id="avgSalary" min="0" required placeholder="60000">
<span class="input-suffix">$</span>
</div>
</div>
</form>
<div id="results" class="results">
<div class="result-item">
<div class="result-label">Current Annual Cost</div>
<div class="result-value" id="currentCost">$0</div>
</div>
<div class="result-item">
<div class="result-label">Cost After Automation</div>
<div class="result-value" id="automatedCost">$0</div>
</div>
<div class="result-item savings">
<div class="result-label">Potential Annual Savings</div>
<div class="result-value" id="annualSavings">$0</div>
</div>
</div>
</div>
<script>
const form = document.getElementById('calculatorForm');
const results = document.getElementById('results');
const inputs = ['industry', 'numPeople', 'timeSpent', 'timeSaved', 'avgSalary'];
function formatCurrency(amount) {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0
}).format(amount);
}
function calculateCosts() {
const industry = document.getElementById('industry').value;
const numPeople = parseFloat(document.getElementById('numPeople').value) || 0;
const timeSpent = parseFloat(document.getElementById('timeSpent').value) || 0;
const timeSaved = parseFloat(document.getElementById('timeSaved').value) || 0;
const avgSalary = parseFloat(document.getElementById('avgSalary').value) || 0;
// Check if all fields are filled
if (!industry || numPeople === 0 || timeSpent === 0 || avgSalary === 0) {
results.classList.remove('show');
return;
}
// Calculate current annual cost
const currentAnnualCost = (avgSalary * (timeSpent / 100)) * numPeople;
// Calculate cost after automation
const timeAfterAutomation = timeSpent * (1 - timeSaved / 100);
const costAfterAutomation = (avgSalary * (timeAfterAutomation / 100)) * numPeople;
// Calculate savings
const annualSavings = currentAnnualCost - costAfterAutomation;
// Update display
document.getElementById('currentCost').textContent = formatCurrency(currentAnnualCost);
document.getElementById('automatedCost').textContent = formatCurrency(costAfterAutomation);
document.getElementById('annualSavings').textContent = formatCurrency(annualSavings);
// Show results with animation
results.classList.add('show');
}
// Add event listeners to all inputs
inputs.forEach(inputId => {
const element = document.getElementById(inputId);
element.addEventListener('input', calculateCosts);
element.addEventListener('change', calculateCosts);
});
// Prevent form submission
form.addEventListener('submit', (e) => {
e.preventDefault();
});
</script>
</body>
</html>
