Welcome to the Smart Spending Dashboard!
This app helps you track your spending and save for future goals.
- Log Expenses
- Set Budget
- Analyze Spending Patterns
Check out the live demo of the Smart Spending dashboard here.
This is the HTML for the Smart Spending dashboard.
# Smart Spending - Dashboard
This is the HTML for the Smart Spending dashboard.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Spending - Dashboard</title>
<link rel="stylesheet" href="styles/style.css">
<style>
/* Hero Section */
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh; /* Adjust height for better scrolling */
text-align: center;
background-size: cover;
background-position: center;
transition: background-image 1s ease-in-out;
color: #fff;
padding: 3rem;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
animation: fadeIn 2s ease-in-out;
position: relative;
background-attachment: fixed; /* Keeps background fixed during scrolling */
}
/* Body and other elements */
body {
margin: 0;
font-family: Arial, sans-serif;
}
main {
padding: 2rem;
background-color: #f4f4f4;
}
section {
margin-bottom: 2rem;
}
.dashboard-overview {
display: flex;
justify-content: space-between;
}
.summary-card {
background-color: #fff;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 30%;
text-align: center;
}
.quick-actions {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
button {
padding: 0.8rem 1.5rem;
font-size: 1rem;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
footer {
text-align: center;
padding: 1rem;
background-color: #2c3e50;
color: #fff;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo-container">
<img src="assets/images/smart-home-3653441.png" alt="Smart Spending Logo" class="logo">
<h1>SMART spending</h1>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="log-expense.html">Log Expense</a></li>
<li><a href="budget-planner.html">Budget Planner</a></li>
<li><a href="spending-analysis.html">Spending Analysis</a></li>
</ul>
</nav>
</header>
<main>
<!-- Hero Section for dynamic background -->
<section class="hero">
<h2>Welcome Back, User!</h2>
<p>Here’s an overview of your financial health.</p>
</section>
<section class="dashboard-header">
<h2>Dashboard Overview</h2>
<p>Your financial insights at a glance.</p>
</section>
<section class="dashboard-overview">
<div class="summary-card income-card">
<h3>Total Income</h3>
<p>$3,000</p>
</div>
<div class="summary-card expense-card">
<h3>Total Expenses</h3>
<p>$1,500</p>
</div>
<div class="summary-card savings-card">
<h3>Savings Progress</h3>
<p>50%</p>
</div>
</section>
<section class="quick-actions">
<button onclick="window.location.href='log-expense.html'">Log Expense</button>
<button onclick="window.location.href='budget-planner.html'">Set Budget</button>
<button onclick="window.location.href='view-reports.html'">View Reports</button>
</section>
</main>
<footer>
<p>© 2024 Smart Spending. All Rights Reserved.</p>
</footer>
<script>
// JavaScript for dynamic background
const hero = document.querySelector('.hero');
const images = [
'assets/images/business-2700757.jpg',
'assets/images/finance-108655.jpg',
'assets/images/scale-2635397.jpg', // Fixed typo in the file name
'assets/images/stock-624712.jpg',
'assets/images/the-labour-code-3520806.jpg' // Fixed path to the correct image
];
let currentImageIndex = 0;
function changeBackgroundImage() {
// Change the background image based on the current index
hero.style.backgroundImage = `url(${images[currentImageIndex]})`;
// Move to the next image index
currentImageIndex++;
// If we've reached the end of the images array, loop back to the first image
if (currentImageIndex >= images.length) {
currentImageIndex = 0;
}
}
// Change background image every 4 seconds
setInterval(changeBackgroundImage, 4000);
// Set the first background image initially
changeBackgroundImage();
</script>
</body>
</html>