Made a calculator to show how expensive flame is compared to resolve/fusion (which is free)
here is the code for fun
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>šø Savings Calculator</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
</head>
<body class="bg-purple-100">
<div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-3xl shadow-xl">
<h1 class="text-4xl font-bold mb-6 text-center animate__animated animate__fadeIn">
šø Money Saved Calculator
</h1>
<div class="space-y-6">
<div class="animate__animated animate__fadeInUp">
<label class="block text-lg font-medium mb-2">
Number of Flame Licenses š„
</label>
<input
type="number"
id="licenses"
min="1"
value="1"
class="w-full p-3 border border-purple-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
>
</div>
<div class="animate__animated animate__fadeInUp" style="animation-delay: 0.2s">
<label class="block text-lg font-medium mb-2">
Years Not Using Flame ā
<span id="yearValue" class="text-purple-600">1</span>
</label>
<input
type="range"
id="years"
min="1"
max="10"
value="1"
class="w-full h-2 bg-purple-200 rounded-lg appearance-none cursor-pointer"
>
</div>
<div class="mt-8 p-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl text-white animate__animated animate__fadeInUp" style="animation-delay: 0.4s">
<div class="text-center">
<h2 class="text-2xl font-bold mb-4">Total Savings š°</h2>
<p id="totalSavings" class="text-4xl font-bold">$0</p>
</div>
<div class="mt-4 text-center">
<h3 class="text-xl font-bold mb-2">With S&P 500 Returns š</h3>
<p id="withInvestment" class="text-3xl font-bold">$0</p>
</div>
</div>
</div>
</div>
<script>
const licenseInput = document.getElementById('licenses');
const yearsSlider = document.getElementById('years');
const yearValue = document.getElementById('yearValue');
const totalSavings = document.getElementById('totalSavings');
const withInvestment = document.getElementById('withInvestment');
function calculateSavings() {
const licenses = parseInt(licenseInput.value);
const years = parseInt(yearsSlider.value);
const monthlyPerLicense = 610;
const monthlySavings = licenses * monthlyPerLicense;
const totalSaved = monthlySavings * 12 * years;
// Calculate compound interest with monthly contributions
let investmentValue = 0;
const monthlyRate = 0.10 / 12; // 10% annual return divided by 12 months
for (let month = 0; month < years * 12; month++) {
investmentValue = (investmentValue + monthlySavings) * (1 + monthlyRate);
}
totalSavings.textContent = `$${totalSaved.toLocaleString()}`;
withInvestment.textContent = `$${Math.round(investmentValue).toLocaleString()}`;
}
licenseInput.addEventListener('input', calculateSavings);
yearsSlider.addEventListener('input', (e) => {
yearValue.textContent = e.target.value;
calculateSavings();
});
// Initial calculation
calculateSavings();
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #F3E8FF;
margin: 0;
padding: 20px;
min-height: 100vh;
}
input[type="range"] {
-webkit-appearance: none;
height: 8px;
background: #E9D5FF;
border-radius: 5px;
background-image: linear-gradient(#A855F7, #A855F7);
background-repeat: no-repeat;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #A855F7;
cursor: pointer;
box-shadow: 0 0 2px 0 #555;
transition: background .3s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: #9333EA;
}
.animate__animated {
--animate-duration: 0.8s;
}
</style>
</body>
</html>