diff --git a/budget.py b/budget.py
index 6eb68e0..6b2885e 100644
--- a/budget.py
+++ b/budget.py
@@ -21,7 +21,7 @@ HTML = """
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Budget Tracker</title>
+ <title>Budget Dashboard</title>
<style>
* {{
margin: 0;
@@ -30,9 +30,9 @@ HTML = """
}}
body {{
- background: #f5f5f5;
- font-family: system-ui, -apple-system, sans-serif;
+ font-family: sans-serif;
padding: 2rem;
+ background: #f9f9fb;
}}
.dashboard {{
@@ -52,67 +52,53 @@ HTML = """
display: inline-block;
}}
- .cards-row {{
- display: flex;
- flex-wrap: wrap;
- gap: 1.5rem;
- margin-bottom: 1.5rem;
- }}
-
- .month-label {{
- margin-top: 0.5rem;
- margin-bottom: 1rem;
+ h2 {{
+ font-size: 1.5rem;
+ font-weight: 500;
+ color: #333;
+ display: inline-block;
}}
- .month-section-title {{
- font-size: 1.6rem;
+ h3 {{
+ margin: 0 0 5px 0;
+ font-size: 1.1rem;
font-weight: 500;
- color: #555;
- text-align: center;
}}
- .card {{
- flex: 1 1 250px;
- background: white;
- border-radius: 12px;
- padding: 1.5rem;
- border: 1px solid #e0e0e0;
- transition: box-shadow 0.2s ease;
+ .month-label {{
+ margin: 3rem 0 1rem 0;
+ text-align: center;
}}
- .card h2 {{
- font-size: 1rem;
- font-weight: 500;
- margin-bottom: 1rem;
- color: #666;
+ .container {{
+ width: 1200px;
+ margin: auto;
}}
- .amount {{
- font-size: 1.8rem;
- font-weight: 600;
- color: #333;
+ .grid-container {{
+ display: grid;
+ grid-template-columns: auto auto auto auto auto;
+ gap: 15px;
+ padding: 5px;
}}
- .currency-symbol {{
- font-size: 1.2rem;
- font-weight: 500;
- color: #666;
- margin-right: 2px;
+ .grid-container > div {{
+ background: #e6e6e6;
+ padding: 15px;
+ border: #191C1E;
+ border-radius: 10px;
+ text-align: center;
}}
- .card-note {{
- font-size: 0.75rem;
- color: #999;
- margin-top: 0.75rem;
+ .sub-card {{
+ font-size: 0.8rem;
+ font-style: italic;
+ color: #333;
+ margin-top: 10px;
}}
- @media (max-width: 600px) {{
- body {{
- padding: 1rem;
- }}
- .card {{
- flex: 1 1 100%;
- }}
+ .amount {{
+ font-size: 1.4rem;
}}
</style>
</head>