Skip to content

Commit 5211daa

Browse files
yashbahadure18yashbahadure18
committed
Added a finance management website having good frontend.
1 parent f9a8a53 commit 5211daa

15 files changed

Lines changed: 2211 additions & 0 deletions

File tree

‎Domains/Frontend/MiniProjects/FinanceManager/analytics.css‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
/* analytics.css */
2+
.analytics-content {
3+
max-width: var(--max-width);
4+
margin: 0 auto;
5+
padding: 90px 40px var(--spacing-2xl) 40px;
6+
}
7+
8+
/* Time Selector */
9+
.time-selector-card {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
margin-bottom: var(--spacing-xl);
14+
}
15+
16+
.tabs-container {
17+
display: flex;
18+
gap: var(--spacing-md);
19+
}
20+
21+
.tab-btn {
22+
color: var(--color-text-secondary);
23+
padding: 10px 15px;
24+
font-weight: 500;
25+
transition: var(--transition-normal);
26+
border-bottom: 2px solid transparent;
27+
}
28+
29+
.tab-btn.active, .tab-btn:hover {
30+
color: var(--color-primary);
31+
border-bottom: 2px solid var(--color-primary);
32+
}
33+
34+
.download-btn {
35+
padding: 10px 20px;
36+
}
37+
38+
/* Statistics Grid */
39+
.statistics-grid {
40+
display: grid;
41+
grid-template-columns: repeat(3, 1fr);
42+
gap: var(--spacing-lg);
43+
margin-bottom: var(--spacing-xl);
44+
}
45+
46+
.stat-card {
47+
text-align: center;
48+
}
49+
50+
.stat-card .label {
51+
color: var(--color-text-secondary);
52+
margin-bottom: 5px;
53+
}
54+
55+
.stat-card .stat-value {
56+
font-size: 2em;
57+
margin: 0;
58+
}
59+
60+
/* Charts Grid */
61+
.charts-grid {
62+
display: grid;
63+
grid-template-columns: 2fr 1fr; /* Two main columns */
64+
gap: var(--spacing-lg);
65+
}
66+
67+
.chart-card.full-width {
68+
grid-column: 1 / -1; /* Spans all columns */
69+
}
70+
71+
.chart-card {
72+
min-height: 350px;
73+
}
74+
75+
.chart-placeholder {
76+
height: 300px;
77+
margin-top: var(--spacing-lg);
78+
background-color: var(--color-bg-hover);
79+
border-radius: var(--radius-md);
80+
display: flex;
81+
justify-content: center;
82+
align-items: center;
83+
color: var(--color-text-secondary);
84+
font-size: 1.1em;
85+
border: 1px dashed var(--color-border);
86+
position: relative;
87+
}
88+
89+
/* Mock Bar Chart Styling (for Income vs Expense) */
90+
.bar-chart-mock {
91+
display: flex;
92+
justify-content: space-around;
93+
align-items: flex-end;
94+
padding: var(--spacing-lg);
95+
height: 300px;
96+
gap: var(--spacing-md);
97+
}
98+
99+
.bar-set {
100+
display: flex;
101+
flex-direction: column;
102+
align-items: center;
103+
width: 60px;
104+
height: 100%;
105+
position: relative;
106+
}
107+
108+
.income-bar, .expense-bar {
109+
width: 25px;
110+
border-radius: 4px 4px 0 0;
111+
transition: height 0.5s;
112+
}
113+
114+
.income-bar {
115+
background-color: var(--color-success);
116+
margin-bottom: 2px;
117+
}
118+
119+
.expense-bar {
120+
background-color: var(--color-danger);
121+
margin-bottom: 2px;
122+
}
123+
124+
.bar-set .label {
125+
position: absolute;
126+
bottom: -20px;
127+
color: var(--color-text-secondary);
128+
font-size: 0.9em;
129+
}
130+
131+
/* Mock Pie/Line Chart Legend Dots */
132+
.pie-chart-mock .legend-dot, .line-chart-mock .legend-dot {
133+
display: inline-block;
134+
width: 10px;
135+
height: 10px;
136+
border-radius: 50%;
137+
margin-right: 5px;
138+
}
139+
140+
/* Mobile Responsiveness */
141+
@media (max-width: 1024px) {
142+
.time-selector-card {
143+
flex-direction: column;
144+
align-items: stretch;
145+
gap: var(--spacing-md);
146+
}
147+
.tabs-container {
148+
justify-content: space-around;
149+
width: 100%;
150+
margin-bottom: var(--spacing-md);
151+
}
152+
.download-btn {
153+
width: 100%;
154+
}
155+
.statistics-grid {
156+
grid-template-columns: repeat(2, 1fr);
157+
}
158+
.charts-grid {
159+
grid-template-columns: 1fr; /* Stack charts on mobile */
160+
}
161+
.chart-card {
162+
min-height: 300px;
163+
}
164+
}
165+
166+
@media (max-width: 600px) {
167+
.statistics-grid {
168+
grid-template-columns: 1fr;
169+
}
170+
}

‎Domains/Frontend/MiniProjects/FinanceManager/analytics.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MONEYFY - Analytics</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="dashboard.css">
9+
<link rel="stylesheet" href="analytics.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
11+
</head>
12+
<body>
13+
14+
<header class="navbar">
15+
<div class="logo">
16+
<span style="color: var(--color-primary);">MONEYFY</span>
17+
</div>
18+
<nav class="desktop-nav">
19+
<a href="index.html">Dashboard</a>
20+
<a href="transactions.html">Transactions</a>
21+
<a href="budgets.html">Budgets</a>
22+
<a href="analytics.html" class="active">Analytics</a>
23+
<a href="settings.html">Settings</a>
24+
</nav>
25+
<div class="user-actions">
26+
<input type="search" placeholder="Search..." class="search-input">
27+
<i class="fa-solid fa-bell icon-btn" title="Notifications"></i>
28+
<i class="fa-solid fa-user-circle icon-btn" title="Profile"></i>
29+
<i class="fa-solid fa-bars mobile-menu-toggle"></i>
30+
</div>
31+
</header>
32+
33+
<main class="analytics-content">
34+
<h1>Financial Analytics & Reports</h1>
35+
36+
<section class="time-selector-card card">
37+
<div class="tabs-container">
38+
<a href="#" class="tab-btn">This Week</a>
39+
<a href="#" class="tab-btn active">This Month</a>
40+
<a href="#" class="tab-btn">This Year</a>
41+
<a href="#" class="tab-btn">Custom Range</a>
42+
</div>
43+
<button class="btn-primary download-btn"><i class="fa-solid fa-download"></i> Download Report</button>
44+
</section>
45+
46+
<section class="statistics-grid">
47+
<div class="card stat-card">
48+
<p class="label">Avg. Daily Spending</p>
49+
<h3 class="stat-value" style="color: var(--color-danger);">$68.15</h3>
50+
</div>
51+
<div class="card stat-card">
52+
<p class="label">Highest Spending Category</p>
53+
<h3 class="stat-value" style="color: var(--color-primary);">Bills</h3>
54+
</div>
55+
<div class="card stat-card">
56+
<p class="label">Savings Goal Progress</p>
57+
<h3 class="stat-value" style="color: var(--color-success);">62%</h3>
58+
</div>
59+
</section>
60+
61+
<section class="charts-grid">
62+
<div class="card chart-card full-width">
63+
<h2>Income vs. Expense Comparison</h2>
64+
<div class="chart-placeholder bar-chart-mock">
65+
<div class="bar-set">
66+
<div class="income-bar" style="height: 70%;"></div>
67+
<div class="expense-bar" style="height: 40%;"></div>
68+
<span class="label">Jan</span>
69+
</div>
70+
<div class="bar-set">
71+
<div class="income-bar" style="height: 60%;"></div>
72+
<div class="expense-bar" style="height: 55%;"></div>
73+
<span class="label">Feb</span>
74+
</div>
75+
<div class="bar-set">
76+
<div class="income-bar" style="height: 90%;"></div>
77+
<div class="expense-bar" style="height: 75%;"></div>
78+
<span class="label">Mar</span>
79+
</div>
80+
</div>
81+
</div>
82+
83+
<div class="card chart-card">
84+
<h2>Spending by Category</h2>
85+
<div class="chart-placeholder pie-chart-mock">
86+
[Pie Chart Placeholder]
87+
<div class="legend-dot" style="background-color: var(--color-primary);"></div> Bills
88+
<div class="legend-dot" style="background-color: var(--color-danger);"></div> Food
89+
</div>
90+
</div>
91+
92+
<div class="card chart-card">
93+
<h2>Net Income Over Time</h2>
94+
<div class="chart-placeholder line-chart-mock">
95+
[Line Chart Placeholder]
96+
</div>
97+
</div>
98+
99+
<div class="card chart-card full-width">
100+
<h2>Savings Rate Trend</h2>
101+
<div class="chart-placeholder line-chart-mock" style="height: 200px;">
102+
[Savings Line Chart Placeholder]
103+
</div>
104+
</div>
105+
106+
</section>
107+
</main>
108+
109+
<script src="scripts/analytics.js"></script>
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)