Skip to content

Added a finance management website having good frontend. #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tejas-Santosh-Nalawade merged 1 commit into from
Oct 22, 2025
Merged

Added a finance management website having good frontend. #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 170 additions & 0 deletions Domains/Frontend/MiniProjects/FinanceManager/analytics.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
/* analytics.css */
.analytics-content {
max-width: var(--max-width);
margin: 0 auto;
padding: 90px 40px var(--spacing-2xl) 40px;
}

/* Time Selector */
.time-selector-card {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xl);
}

.tabs-container {
display: flex;
gap: var(--spacing-md);
}

.tab-btn {
color: var(--color-text-secondary);
padding: 10px 15px;
font-weight: 500;
transition: var(--transition-normal);
border-bottom: 2px solid transparent;
}

.tab-btn.active, .tab-btn:hover {
color: var(--color-primary);
border-bottom: 2px solid var(--color-primary);
}

.download-btn {
padding: 10px 20px;
}

/* Statistics Grid */
.statistics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}

.stat-card {
text-align: center;
}

.stat-card .label {
color: var(--color-text-secondary);
margin-bottom: 5px;
}

.stat-card .stat-value {
font-size: 2em;
margin: 0;
}

/* Charts Grid */
.charts-grid {
display: grid;
grid-template-columns: 2fr 1fr; /* Two main columns */
gap: var(--spacing-lg);
}

.chart-card.full-width {
grid-column: 1 / -1; /* Spans all columns */
}

.chart-card {
min-height: 350px;
}

.chart-placeholder {
height: 300px;
margin-top: var(--spacing-lg);
background-color: var(--color-bg-hover);
border-radius: var(--radius-md);
display: flex;
justify-content: center;
align-items: center;
color: var(--color-text-secondary);
font-size: 1.1em;
border: 1px dashed var(--color-border);
position: relative;
}

/* Mock Bar Chart Styling (for Income vs Expense) */
.bar-chart-mock {
display: flex;
justify-content: space-around;
align-items: flex-end;
padding: var(--spacing-lg);
height: 300px;
gap: var(--spacing-md);
}

.bar-set {
display: flex;
flex-direction: column;
align-items: center;
width: 60px;
height: 100%;
position: relative;
}

.income-bar, .expense-bar {
width: 25px;
border-radius: 4px 4px 0 0;
transition: height 0.5s;
}

.income-bar {
background-color: var(--color-success);
margin-bottom: 2px;
}

.expense-bar {
background-color: var(--color-danger);
margin-bottom: 2px;
}

.bar-set .label {
position: absolute;
bottom: -20px;
color: var(--color-text-secondary);
font-size: 0.9em;
}

/* Mock Pie/Line Chart Legend Dots */
.pie-chart-mock .legend-dot, .line-chart-mock .legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
.time-selector-card {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-md);
}
.tabs-container {
justify-content: space-around;
width: 100%;
margin-bottom: var(--spacing-md);
}
.download-btn {
width: 100%;
}
.statistics-grid {
grid-template-columns: repeat(2, 1fr);
}
.charts-grid {
grid-template-columns: 1fr; /* Stack charts on mobile */
}
.chart-card {
min-height: 300px;
}
}

@media (max-width: 600px) {
.statistics-grid {
grid-template-columns: 1fr;
}
}
111 changes: 111 additions & 0 deletions Domains/Frontend/MiniProjects/FinanceManager/analytics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MONEYFY - Analytics</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="dashboard.css">
<link rel="stylesheet" href="analytics.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>

<header class="navbar">
<div class="logo">
<span style="color: var(--color-primary);">MONEYFY</span>
</div>
<nav class="desktop-nav">
<a href="index.html">Dashboard</a>
<a href="transactions.html">Transactions</a>
<a href="budgets.html">Budgets</a>
<a href="analytics.html" class="active">Analytics</a>
<a href="settings.html">Settings</a>
</nav>
<div class="user-actions">
<input type="search" placeholder="Search..." class="search-input">
<i class="fa-solid fa-bell icon-btn" title="Notifications"></i>
<i class="fa-solid fa-user-circle icon-btn" title="Profile"></i>
<i class="fa-solid fa-bars mobile-menu-toggle"></i>
</div>
</header>

<main class="analytics-content">
<h1>Financial Analytics & Reports</h1>

<section class="time-selector-card card">
<div class="tabs-container">
<a href="#" class="tab-btn">This Week</a>
<a href="#" class="tab-btn active">This Month</a>
<a href="#" class="tab-btn">This Year</a>
<a href="#" class="tab-btn">Custom Range</a>
</div>
<button class="btn-primary download-btn"><i class="fa-solid fa-download"></i> Download Report</button>
</section>

<section class="statistics-grid">
<div class="card stat-card">
<p class="label">Avg. Daily Spending</p>
<h3 class="stat-value" style="color: var(--color-danger);">$68.15</h3>
</div>
<div class="card stat-card">
<p class="label">Highest Spending Category</p>
<h3 class="stat-value" style="color: var(--color-primary);">Bills</h3>
</div>
<div class="card stat-card">
<p class="label">Savings Goal Progress</p>
<h3 class="stat-value" style="color: var(--color-success);">62%</h3>
</div>
</section>

<section class="charts-grid">
<div class="card chart-card full-width">
<h2>Income vs. Expense Comparison</h2>
<div class="chart-placeholder bar-chart-mock">
<div class="bar-set">
<div class="income-bar" style="height: 70%;"></div>
<div class="expense-bar" style="height: 40%;"></div>
<span class="label">Jan</span>
</div>
<div class="bar-set">
<div class="income-bar" style="height: 60%;"></div>
<div class="expense-bar" style="height: 55%;"></div>
<span class="label">Feb</span>
</div>
<div class="bar-set">
<div class="income-bar" style="height: 90%;"></div>
<div class="expense-bar" style="height: 75%;"></div>
<span class="label">Mar</span>
</div>
</div>
</div>

<div class="card chart-card">
<h2>Spending by Category</h2>
<div class="chart-placeholder pie-chart-mock">
[Pie Chart Placeholder]
<div class="legend-dot" style="background-color: var(--color-primary);"></div> Bills
<div class="legend-dot" style="background-color: var(--color-danger);"></div> Food
</div>
</div>

<div class="card chart-card">
<h2>Net Income Over Time</h2>
<div class="chart-placeholder line-chart-mock">
[Line Chart Placeholder]
</div>
</div>

<div class="card chart-card full-width">
<h2>Savings Rate Trend</h2>
<div class="chart-placeholder line-chart-mock" style="height: 200px;">
[Savings Line Chart Placeholder]
</div>
</div>

</section>
</main>

<script src="scripts/analytics.js"></script>
</body>
</html>
Loading
Loading