<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mutual Fund SIP Calculator</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<style>
:root {
--primary-gradient-start: #2A5C9B;
--primary-gradient-end: #4CAF50;
--accent-bg: #E8F5E9;
--text-dark: #333;
--text-light: #666;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--text-dark);
background-color: #fff;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Header Styles */
header {
text-align: center;
margin-bottom: 40px;
padding: 20px 0;
position: relative;
}
.header-content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.header-text {
flex: 1;
min-width: 300px;
}
.title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
font-size: 1rem;
color: var(--text-light);
font-weight: 400;
}
.header-visual {
flex: 0 0 150px;
height: 150px;
position: relative;
}
/* Input Section Styles */
.input-section {
background: #fff;
border-radius: 12px;
box-shadow: var(--shadow);
padding: 30px;
margin-bottom: 40px;
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.input-group {
margin-bottom: 20px;
}
.input-label {
display: block;
font-weight: 500;
margin-bottom: 8px;
}
.input-control {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
transition: border 0.3s ease;
}
.input-control:focus {
outline: none;
border-color: var(--primary-gradient-end);
}
.slider-container {
margin-top: 15px;
}
.slider {
width: 100%;
cursor: pointer;
}
.helper-text {
font-size: 0.8rem;
color: var(--text-light);
margin-top: 5px;
}
.toggle-container {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
margin-right: 10px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--primary-gradient-end);
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
}
/* Results Section */
.results-section {
background-color: var(--accent-bg);
border-radius: 12px;
padding: 30px;
text-align: center;
margin-bottom: 40px;
box-shadow: var(--shadow);
}
.result-title {
font-size: 1.2rem;
margin-bottom: 20px;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
.result-item {
padding: 15px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.result-label {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 5px;
}
.result-value {
font-size: 1.6rem;
font-weight: 600;
}
.result-value.returns {
color: var(--primary-gradient-end);
}
.result-value.total {
background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.8rem;
}
.action-btn {
padding: 12px 25px;
background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
color: #fff;
border: none;
border-radius: 30px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Chart Section */
.chart-section {
background: #fff;
border-radius: 12px;
box-shadow: var(--shadow);
padding: 30px;
margin-bottom: 40px;
}
.chart-container {
position: relative;
height: 300px;
margin-top: 20px;
}
.chart-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chart-toggle {
display: flex;
background: #f1f1f1;
border-radius: 30px;
padding: 5px;
}
.chart-toggle-btn {
padding: 8px 15px;
border: none;
background: none;
font-family: 'Poppins', sans-serif;
cursor: pointer;
border-radius: 25px;
transition: background 0.3s ease;
}
.chart-toggle-btn.active {
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.export-btn {
background: none;
border: none;
color: var(--primary-gradient-start);
cursor: pointer;
display: flex;
align-items: center;
}
.export-btn svg {
margin-right: 5px;
}
/* Info Section */
.info-section {
margin-bottom: 40px;
}
.faq-container {
margin-bottom: 30px;
}
.faq-item {
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
}
.faq-question {
padding: 15px;
background: #f9f9f9;
font-weight: 500;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-answer {
padding: 0 15px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
padding: 15px;
max-height: 200px;
}
.benefits-list {
list-style: none;
margin-top: 20px;
}
.benefit-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.benefit-icon {
margin-right: 10px;
color: var(--primary-gradient-end);
}
.cta-container {
text-align: center;
margin: 30px 0;
}
/* Footer */
footer {
background: #f9f9f9;
padding: 30px 0;
text-align: center;
margin-top: 60px;
}
.disclaimer {
font-style: italic;
font-size: 0.8rem;
color: var(--text-light);
max-width: 800px;
margin: 0 auto 20px;
}
.footer-links {
margin-bottom: 20px;
}
.footer-link {
margin: 0 10px;
color: var(--text-dark);
text-decoration: none;
}
.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
.input-section, .results-section, .chart-section {
padding: 20px;
}
.chart-controls {
flex-direction: column;
gap: 15px;
}
.header-visual {
display: none;
}
}
/* Animated graph icon */
.graph-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
.graph-line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawLine 2s forwards, pulseColor 3s infinite 2s;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
@keyframes pulseColor {
0% { stroke: var(--primary-gradient-start); }
50% { stroke: var(--primary-gradient-end); }
100% { stroke: var(--primary-gradient-start); }
}
/* Pie chart icon */
.pie-chart-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.pie-chart {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(
var(--primary-gradient-end) 0% var(--returns-percentage),
var(--primary-gradient-start) var(--returns-percentage) 100%
);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pie-legend {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
font-size: 0.8rem;
}
.legend-item {
display: flex;
align-items: center;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
margin-right: 5px;
}
.legend-invested {
background-color: var(--primary-gradient-start);
}
.legend-returns {
background-color: var(--primary-gradient-end);
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="header-content">
<div class="header-text">
<h1 class="title">Mutual Fund SIP Calculator</h1>
<p class="subtitle">Plan Your Investments Smartly. Calculate Your Future Wealth!</p>
</div>
<div class="header-visual">
<svg class="graph-icon" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
<polyline
class="graph-line"
fill="none"
stroke="#2A5C9B"
stroke-width="2"
points="0,50 20,35 40,40 60,20 80,10 100,5"
/>
<circle cx="0" cy="50" r="3" fill="#2A5C9B"/>
<circle cx="20" cy="35" r="3" fill="#2A5C9B"/>
<circle cx="40" cy="40" r="3" fill="#2A5C9B"/>
<circle cx="60" cy="20" r="3" fill="#2A5C9B"/>
<circle cx="80" cy="10" r="3" fill="#2A5C9B"/>
<circle cx="100" cy="5" r="3" fill="#4CAF50"/>
</svg>
</div>
</div>
</header>
<section class="input-section">
<div class="input-grid">
<div class="input-group">
<label class="input-label" for="monthly-investment">Monthly Investment</label>
<input type="number" id="monthly-investment" class="input-control" value="5000" min="500" max="100000">
<div class="slider-container">
<input type="range" id="monthly-investment-slider" class="slider" min="500" max="100000" step="500" value="5000">
</div>
<p class="helper-text">Enter your monthly SIP amount.</p>
</div>
<div class="input-group">
<label class="input-label" for="investment-duration">Investment Duration (Years)</label>
<input type="number" id="investment-duration" class="input-control" value="10" min="1" max="30">
<div class="slider-container">
<input type="range" id="investment-duration-slider" class="slider" min="1" max="30" step="1" value="10">
</div>
<p class="helper-text">How long will you invest?</p>
</div>
<div class="input-group">
<label class="input-label" for="expected-return">Expected Annual Return (%)</label>
<input type="number" id="expected-return" class="input-control" value="12" min="1" max="30">
<div class="slider-container">
<input type="range" id="expected-return-slider" class="slider" min="1" max="30" step="0.5" value="12">
</div>
<p class="helper-text">Expected rate of return (historical average: 10–15%).</p>
</div>
<div class="input-group">
<div class="toggle-container">
<label class="toggle-switch">
<input type="checkbox" id="step-up-toggle">
<span class="toggle-slider"></span>
</label>
<label for="step-up-toggle">Step-Up SIP (Optional)</label>
</div>
<div id="step-up-container" style="display: none;">
<label class="input-label" for="step-up-percentage">Annual Increase (%)</label>
<input type="number" id="step-up-percentage" class="input-control" value="10" min="0" max="20">
<div class="slider-container">
<input type="range" id="step-up-percentage-slider" class="slider" min="0" max="20" step="1" value="10">
</div>
</div>
<p class="helper-text">Increase SIP amount yearly?</p>
</div>
</div>
</section>
<section class="results-section">
<h2 class="result-title">Your Investment Results</h2>
<div class="results-grid">
<div class="result-item">
<p class="result-label">Total Invested Amount</p>
<p class="result-value invested">₹6,00,000</p>
</div>
<div class="result-item">
<p class="result-label">Estimated Returns</p>
<p class="result-value returns">₹5,42,410</p>
</div>
<div class="result-item">
<p class="result-label">Total Value</p>
<p class="result-value total">₹11,42,410</p>
</div>
</div>
<div class="pie-chart-container">
<div class="pie-chart"></div>
</div>
<div class="pie-legend">
<div class="legend-item">
<div class="legend-color legend-invested"></div>
<span>Invested Amount</span>
</div>
<div class="legend-item">
<div class="legend-color legend-returns"></div>
<span>Returns</span>
</div>
</div>
<button id="recalculate-btn" class="action-btn">Recalculate</button>
</section>
<section class="chart-section">
<h2>Wealth Growth Projection</h2>
<div class="chart-controls">
<div class="chart-toggle">
<button id="cumulative-btn" class="chart-toggle-btn active">Cumulative Returns</button>
<button id="yearly-btn" class="chart-toggle-btn">Yearly Breakdown</button>
</div>
<button id="export-btn" class="export-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 16L12 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 13L12 16L15 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 15V16C3 18.2091 4.79086 20 7 20H17C19.2091 20 21 18.2091 21 16V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Export Chart
</button>
</div>
<div class="chart-container">
<canvas id="investment-chart"></canvas>
</div>
</section>
<section class="info-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-container">
<div class="faq-item">
<div class="faq-question">
What is SIP? <span>+</span>
</div>
<div class="faq-answer">
SIP or Systematic Investment Plan is an investment vehicle offered by mutual funds. It allows investors to invest a fixed amount at regular intervals (typically monthly) instead of making a lump-sum investment.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
How are returns calculated? <span>+</span>
</div>
<div class="faq-answer">
Returns are calculated using the compound interest formula for each monthly investment over the investment period. The calculation accounts for the time value of money, considering that each SIP installment is invested for a different period.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
What is Step-up SIP? <span>+</span>
</div>
<div class="faq-answer">
Step-up SIP allows you to increase your SIP amount periodically (usually annually) by a fixed percentage. This helps you invest more as your income increases over time, potentially generating higher returns.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
Is this calculator accurate? <span>+</span>
</div>
<div class="faq-answer">
This calculator provides estimates based on the information you provide. Actual results may vary due to market fluctuations, variations in returns, and other factors. It's advisable to consult with a financial advisor before making investment decisions.
</div>
</div>
</div>
<h2>Benefits of SIP</h2>
<ul class="benefits-list">
<li class="benefit-item">
<div class="benefit-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div>
<strong>Power of Compounding</strong>: Your returns earn returns, accelerating wealth creation over time.
</div>
</li>
<li class="benefit-item">
<div class="benefit-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div>
<strong>Rupee Cost Averaging</strong>: Buy more units when prices are low and fewer when prices are high, reducing the impact of market volatility.
</div>
</li>
<li class="benefit-item">
<div class="benefit-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div>
<strong>Financial Discipline</strong>: Regular investments instill savings habits and financial discipline.
</div>
</li>
<li class="benefit-item">
<div class="benefit-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div>
<strong>Flexibility</strong>: Start with a small amount and modify, stop, or resume as per your financial situation.
</div>
</li>
</ul>
<div class="cta-container">
<button class="action-btn">Start Investing Now</button>
</div>
</section>
</div>
<footer>
<div class="container">
<p class="disclaimer">Mutual fund investments are subject to market risks. Read all scheme related documents carefully before investing. Past performance is not indicative of future returns.</p>
<div class="footer-links">
<a href="#" class="footer-link">Privacy Policy</a>
<a href="#" class="footer-link">Terms & Conditions</a>
<a href="#" class="footer-link">Contact Us</a>
</div>
<div class="social-icons">
<a href="#" class="social-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<a href="#" class="social-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="2" y="9" width="4" height="12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="4" cy="4" r="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<a href="#" class="social-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M20.44 3.47998L20.439 3.47998C19.7654 2.80554 18.9534 2.2735 18.056 1.92044C17.1587 1.56739 16.1971 1.38879 15.23 1.38998H15.23C13.003 1.38998 10.99 2.23998 9.47999 3.74998C8.71908 4.50947 8.11886 5.41212 7.70588 6.40576C7.2929 7.3994 7.07497 8.46723 7.06499 9.54998V11.59H4.05999C3.92806 11.59 3.80157 11.6432 3.70905 11.7357C3.61653 11.8282 3.56332 11.9547 3.56332 12.0866C3.56332 12.2186 3.61653 12.345 3.70905 12.4376C3.80157 12.5301 3.92806 12.5833 4.05999 12.5833H7.06999V20.92C7.06999 21.0519 7.1232 21.1784 7.21572
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)