commit a7d8192182e73f5871f5bf9bdb9f3d5dea0b96a5
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 14:16:25 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..e002123
--- /dev/null
+++ b/body.html
@@ -0,0 +1,95 @@
+<header>
+ <h1>BudgetWise</h1>
+ <nav>
+ <ul>
+ <li><a href="#dashboard">Dashboard</a></li>
+ <li><a href="#income">Income</a></li>
+ <li><a href="#expenses">Expenses</a></li>
+ <li><a href="#savings">Savings</a></li>
+ <li><a href="#reports">Reports</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="dashboard">
+ <h2>Dashboard</h2>
+ <div class="summary">
+ <div class="card">
+ <h3>Total Income</h3>
+ <p>$0.00</p>
+ </div>
+ <div class="card">
+ <h3>Total Expenses</h3>
+ <p>$0.00</p>
+ </div>
+ <div class="card">
+ <h3>Savings Balance</h3>
+ <p>$0.00</p>
+ </div>
+ </div>
+ <div class="actions">
+ <button onclick="addIncome()">Add Income</button>
+ <button onclick="addExpense()">Add Expense</button>
+ </div>
+ </section>
+
+ <section id="income">
+ <h2>Income</h2>
+ <div class="income-list"></div>
+ <form id="income-form" class="hidden">
+ <input type="text" placeholder="Source" required>
+ <input type="number" placeholder="Amount" required>
+ <select>
+ <option>Weekly</option>
+ <option>Bi-Weekly</option>
+ <option>Monthly</option>
+ </select>
+ <button type="submit">Add</button>
+ </form>
+ </section>
+
+ <section id="expenses">
+ <h2>Expenses</h2>
+ <div class="expense-list"></div>
+ <form id="expense-form" class="hidden">
+ <input type="text" placeholder="Description" required>
+ <input type="number" placeholder="Amount" required>
+ <select>
+ <option>Food</option>
+ <option>Transportation</option>
+ <option>Utilities</option>
+ <option>Other</option>
+ </select>
+ <button type="submit">Add</button>
+ </form>
+ </section>
+
+ <section id="savings">
+ <h2>Savings</h2>
+ <div class="savings-goal">
+ <label for="goal">Savings Goal:</label>
+ <input type="number" id="goal" placeholder="Enter your goal">
+ <button onclick="setGoal()">Set Goal</button>
+ </div>
+ <div class="progress-bar">
+ <div class="progress"></div>
+ </div>
+ </section>
+
+ <section id="reports">
+ <h2>Reports</h2>
+ <div class="charts">
+ <div class="chart-container">
+ <canvas id="expenseChart"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="savingsChart"></canvas>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Track your finances with ease and achieve your savings goals.</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..c23f2b2
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://budgetwise.scroll.pub
+metaTags
+editButton /edit.html
+title BudgetWise - Personal Budgeting App
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7b69215
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# budgetwise1.scroll.pub
+Website generated by DeepSeek from prompt: Project Title: Personal Budgeting App Purpose: Create a simple and intuitive personal budgeting app that allows users to track their income, expenses, and savings goals with visual insights. Structure 1. Main Features Income Tracking: Add multiple income sources with customizable categories. Expense Tracking: Log daily expenses under predefined categories (e.g., Food, Transportation, Utilities) or add custom ones. Savings Goals: Define financial goals and track progress with visual indicators. Budget Summary: Provide an overview of the monthly budget, showing total income, expenses, and savings balance. Visual Insights: Include pie charts, bar graphs, and trend lines to analyze spending habits. Notifications: Reminders for bill payments and overspending alerts. 2. Pages Home Dashboard Summary of monthly financial activity. Quick links to add income or expenses. Income List of income sources with amounts and frequency. Add, edit, or delete sources. Expenses Itemized list of expenses grouped by category. Search and filter options. Savings A progress tracker for goals. Insights on potential savings based on current spending habits. Reports Visual graphs showing spending breakdown, savings trends, and budget adherence. 3. User Interactions Interactive forms for data entry (income, expenses, goals). Dropdowns for selecting categories. Drag-and-drop interface for reorganizing goals or budget priorities. 4. Technical Requirements Use ScrollHub to structure and visually represent app wireframes. Include detailed .scroll files for modular features. Embed live chart examples (e.g., pie chart for expenses) using HTML/CSS placeholders. 5. Key Components Usability: Ensure simple navigation with tooltips for new users. Accessibility: Comply with ADA standards for visually impaired users. Scalability: Allow users to export data as CSV or PDF for tax filing or reporting. Output Expectation: A responsive prototype hosted on ScrollHub that can be previewed live and iterated based on user feedback.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d28d1d0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,99 @@
+let income = [];
+let expenses = [];
+let savingsGoal = 0;
+
+function addIncome() {
+ const form = document.getElementById('income-form');
+ form.classList.toggle('hidden');
+}
+
+function addExpense() {
+ const form = document.getElementById('expense-form');
+ form.classList.toggle('hidden');
+}
+
+function setGoal() {
+ const goalInput = document.getElementById('goal');
+ savingsGoal = parseFloat(goalInput.value);
+ updateProgress();
+}
+
+function updateProgress() {
+ const totalIncome = income.reduce((sum, item) => sum + item.amount, 0);
+ const totalExpenses = expenses.reduce((sum, item) => sum + item.amount, 0);
+ const savings = totalIncome - totalExpenses;
+ const progress = (savings / savingsGoal) * 100;
+
+ const progressBar = document.querySelector('.progress');
+ progressBar.style.width = `${Math.min(progress, 100)}%`;
+}
+
+document.getElementById('income-form').addEventListener('submit', function(e) {
+ e.preventDefault();
+ const source = this.querySelector('input[type="text"]').value;
+ const amount = parseFloat(this.querySelector('input[type="number"]').value);
+ const frequency = this.querySelector('select').value;
+
+ income.push({ source, amount, frequency });
+ updateProgress();
+ this.reset();
+ this.classList.add('hidden');
+});
+
+document.getElementById('expense-form').addEventListener('submit', function(e) {
+ e.preventDefault();
+ const description = this.querySelector('input[type="text"]').value;
+ const amount = parseFloat(this.querySelector('input[type="number"]').value);
+ const category = this.querySelector('select').value;
+
+ expenses.push({ description, amount, category });
+ updateProgress();
+ this.reset();
+ this.classList.add('hidden');
+});
+
+// Chart.js initialization
+const expenseCtx = document.getElementById('expenseChart').getContext('2d');
+const savingsCtx = document.getElementById('savingsChart').getContext('2d');
+
+const expenseChart = new Chart(expenseCtx, {
+ type: 'pie',
+ data: {
+ labels: ['Food', 'Transportation', 'Utilities', 'Other'],
+ datasets: [{
+ data: [0, 0, 0, 0],
+ backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
+ }]
+ }
+});
+
+const savingsChart = new Chart(savingsCtx, {
+ type: 'line',
+ data: {
+ labels: [],
+ datasets: [{
+ label: 'Savings',
+ data: [],
+ borderColor: '#4CAF50',
+ fill: false
+ }]
+ }
+});
+
+function updateCharts() {
+ const categories = ['Food', 'Transportation', 'Utilities', 'Other'];
+ const expenseData = categories.map(cat =>
+ expenses.filter(e => e.category === cat).reduce((sum, e) => sum + e.amount, 0)
+ );
+
+ expenseChart.data.datasets[0].data = expenseData;
+ expenseChart.update();
+
+ const totalIncome = income.reduce((sum, item) => sum + item.amount, 0);
+ const totalExpenses = expenses.reduce((sum, item) => sum + item.amount, 0);
+ const savings = totalIncome - totalExpenses;
+
+ savingsChart.data.labels.push(new Date().toLocaleDateString());
+ savingsChart.data.datasets[0].data.push(savings);
+ savingsChart.update();
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6df3146
--- /dev/null
+++ b/style.css
@@ -0,0 +1,142 @@
+:root {
+ --primary-color: #4CAF50;
+ --secondary-color: #2196F3;
+ --background-color: #f5f5f5;
+ --text-color: #333;
+ --card-bg: #fff;
+ --shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 1rem;
+ text-align: center;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+}
+
+nav a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+main {
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+section {
+ margin-bottom: 2rem;
+}
+
+.summary {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.card {
+ background-color: var(--card-bg);
+ padding: 1rem;
+ border-radius: 4px;
+ box-shadow: var(--shadow);
+ text-align: center;
+}
+
+.actions {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+button {
+ background-color: var(--secondary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+button:hover {
+ background-color: #1976D2;
+}
+
+form {
+ display: grid;
+ gap: 0.5rem;
+ margin-top: 1rem;
+}
+
+input, select {
+ padding: 0.5rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+
+.progress-bar {
+ background-color: #ddd;
+ height: 20px;
+ border-radius: 10px;
+ margin-top: 1rem;
+ overflow: hidden;
+}
+
+.progress {
+ background-color: var(--primary-color);
+ height: 100%;
+ width: 0;
+ transition: width 0.3s;
+}
+
+.charts {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1rem;
+}
+
+.chart-container {
+ background-color: var(--card-bg);
+ padding: 1rem;
+ border-radius: 4px;
+ box-shadow: var(--shadow);
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background-color: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ nav ul {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .summary {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file