davepeck · December 12, 2024 18:33
diff --git a/retirement.html b/retirement.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress to Retirement</title>
    <style>
        body {
            font-family: "Helvetica Neue", sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
        }

        .container {
            max-width: 600px;
            margin: 100px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        h1 {
            margin-bottom: 20px;
        }

        .progress-bar-container {
            width: 100%;
            background: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            height: 25px;
            margin: 20px 0;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #4caf50, #81c784);
            width: 0%;
            text-align: center;
            line-height: 25px;
            color: white;
            font-weight: bold;
        }

        .weeks-remaining {
            font-size: 1.2em;
            margin-top: 10px;
        }

        form {
            margin-top: 40px;
            border-top: 1px solid #eee;
            padding-top: 40px;
        }

        label {
            display: block;
            margin: 10px 0 5px;
            color: #666;
        }

        input {
            padding: 8px;
            width: calc(100% - 16px);
            max-width: 400px;
            margin-bottom: 15px;
            color: #666;
            border: 1px solid #eee;
            border-radius: 5px;
        }

        button {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }
    </style>
 </head>

 <body>
    <div class="container">
        <h1><span id="percent"></span> to Retirement</h1>
        <div class="progress-bar-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        <div class="weeks-remaining" id="weeks-remaining">Weeks remaining: 0</div>
        <form id="settings-form">
            <label for="retirement-age">Target Retirement Age</label>
            <input type="number" id="retirement-age" min="1" max="100" required>

            <label for="birth-date">Birthdate</label>
            <input type="date" id="birth-date" required>

            <label for="start-date">First Day of Work</label>
            <input type="date" id="start-date" required>

            <button type="submit">Update Progress</button>
        </form>
    </div>

    <script>
        // Load saved settings from local storage or use defaults
        const savedRetirementAge = localStorage.getItem('retirementAge') || 67;
        const savedBirthDate = localStorage.getItem('birthDate') || '2000-01-01';
        const savedStartDate = localStorage.getItem('startDate') || '2022-01-01';

        document.getElementById('retirement-age').value = savedRetirementAge;
        document.getElementById('birth-date').value = savedBirthDate;
        document.getElementById('start-date').value = savedStartDate;

        function calculateProgress(retirementAge, birthDate, startDate) {
            const workStartDate = new Date(startDate);
            const birthDateObj = new Date(birthDate);

            // Compute retirement date
            const workEndDate = new Date(birthDateObj);
            workEndDate.setFullYear(birthDateObj.getFullYear() + parseInt(retirementAge, 10));

            // Compute weeks worked and total weeks
            const now = new Date();
            const weeksWorked = Math.floor((now - workStartDate) / (7 * 24 * 60 * 60 * 1000));
            const totalWeeks = Math.floor((workEndDate - workStartDate) / (7 * 24 * 60 * 60 * 1000));

            return {
                weeksWorked,
                weeksRemaining: totalWeeks - weeksWorked,
                percentage: ((weeksWorked / totalWeeks) * 100).toFixed(1)
            };
        }

        function updateProgressDisplay() {
            const retirementAge = document.getElementById('retirement-age').value;
            const birthDate = document.getElementById('birth-date').value;
            const startDate = document.getElementById('start-date').value;

            const progress = calculateProgress(retirementAge, birthDate, startDate);

            document.getElementById('progress-bar').style.width = `${progress.percentage}%`;
            document.getElementById('percent').textContent = `${progress.percentage}%`;
            document.getElementById('weeks-remaining').textContent = `Weeks remaining: ${progress.weeksRemaining}`;

            // Save settings to local storage
            localStorage.setItem('retirementAge', retirementAge);
            localStorage.setItem('birthDate', birthDate);
            localStorage.setItem('startDate', startDate);
        }

        document.getElementById('settings-form').addEventListener('submit', (event) => {
            event.preventDefault();
            updateProgressDisplay();
        });

        // Initial display update
        updateProgressDisplay();
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Progress to Retirement</title>
	<style>
	body {
	font-family: "Helvetica Neue", sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #f4f4f9;
	color: #333;
	}

	.container {
	max-width: 600px;
	margin: 100px auto;
	padding: 20px;
	background: #fff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	}

	h1 {
	margin-bottom: 20px;
	}

	.progress-bar-container {
	width: 100%;
	background: #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
	height: 25px;
	margin: 20px 0;
	}

	.progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #4caf50, #81c784);
	width: 0%;
	text-align: center;
	line-height: 25px;
	color: white;
	font-weight: bold;
	}

	.weeks-remaining {
	font-size: 1.2em;
	margin-top: 10px;
	}

	form {
	margin-top: 40px;
	border-top: 1px solid #eee;
	padding-top: 40px;
	}

	label {
	display: block;
	margin: 10px 0 5px;
	color: #666;
	}

	input {
	padding: 8px;
	width: calc(100% - 16px);
	max-width: 400px;
	margin-bottom: 15px;
	color: #666;
	border: 1px solid #eee;
	border-radius: 5px;
	}

	button {
	display: block;
	margin: 20px auto;
	padding: 10px 20px;
	background-color: #4caf50;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1em;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<h1><span id="percent"></span> to Retirement</h1>
	<div class="progress-bar-container">
	<div class="progress-bar" id="progress-bar"></div>
	</div>
	<div class="weeks-remaining" id="weeks-remaining">Weeks remaining: 0</div>
	<form id="settings-form">
	<label for="retirement-age">Target Retirement Age</label>
	<input type="number" id="retirement-age" min="1" max="100" required>

	<label for="birth-date">Birthdate</label>
	<input type="date" id="birth-date" required>

	<label for="start-date">First Day of Work</label>
	<input type="date" id="start-date" required>

	<button type="submit">Update Progress</button>
	</form>
	</div>

	<script>
	// Load saved settings from local storage or use defaults
	const savedRetirementAge = localStorage.getItem('retirementAge') \|\| 67;
	const savedBirthDate = localStorage.getItem('birthDate') \|\| '2000-01-01';
	const savedStartDate = localStorage.getItem('startDate') \|\| '2022-01-01';

	document.getElementById('retirement-age').value = savedRetirementAge;
	document.getElementById('birth-date').value = savedBirthDate;
	document.getElementById('start-date').value = savedStartDate;

	function calculateProgress(retirementAge, birthDate, startDate) {
	const workStartDate = new Date(startDate);
	const birthDateObj = new Date(birthDate);

	// Compute retirement date
	const workEndDate = new Date(birthDateObj);
	workEndDate.setFullYear(birthDateObj.getFullYear() + parseInt(retirementAge, 10));

	// Compute weeks worked and total weeks
	const now = new Date();
	const weeksWorked = Math.floor((now - workStartDate) / (7 * 24 * 60 * 60 * 1000));
	const totalWeeks = Math.floor((workEndDate - workStartDate) / (7 * 24 * 60 * 60 * 1000));

	return {
	weeksWorked,
	weeksRemaining: totalWeeks - weeksWorked,
	percentage: ((weeksWorked / totalWeeks) * 100).toFixed(1)
	};
	}

	function updateProgressDisplay() {
	const retirementAge = document.getElementById('retirement-age').value;
	const birthDate = document.getElementById('birth-date').value;
	const startDate = document.getElementById('start-date').value;

	const progress = calculateProgress(retirementAge, birthDate, startDate);

	document.getElementById('progress-bar').style.width = `${progress.percentage}%`;
	document.getElementById('percent').textContent = `${progress.percentage}%`;
	document.getElementById('weeks-remaining').textContent = `Weeks remaining: ${progress.weeksRemaining}`;

	// Save settings to local storage
	localStorage.setItem('retirementAge', retirementAge);
	localStorage.setItem('birthDate', birthDate);
	localStorage.setItem('startDate', startDate);
	}

	document.getElementById('settings-form').addEventListener('submit', (event) => {
	event.preventDefault();
	updateProgressDisplay();
	});

	// Initial display update
	updateProgressDisplay();
	</script>
	</body>

	</html>