<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Home Projects</title>
<style>
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f0f0f5;padding-bottom:80px;}
.header {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:20px;text-align:center;}
.container {padding:20px;max-width:600px;margin:0 auto;}
.card {background:white;border-radius:12px;padding:15px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.add-btn {position:fixed;bottom:90px;right:20px;width:60px;height:60px;border-radius:30px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;font-size:30px;box-shadow:0 4px 12px rgba(102,126,234,0.4);}
.bottom-nav {position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid #e0e0e0;display:flex;justify-content:space-around;padding:10px 0;}
.nav-item {text-align:center;padding:5px;font-size:12px;color:#666;background:none;border:none;}
.nav-item.active {color:#667eea;}
.tab-content {display:none;}
.tab-content.active {display:block;}
.action-btn {background:white;border:2px solid #667eea;color:#667eea;padding:15px;border-radius:10px;font-size:14px;font-weight:600;width:48%;margin:1%;}
</style>
</head>
<body>
<div class="header">
<h1>🏠 Home Projects</h1>
<div id="total">Total: $0</div>
</div>
<div class="container">
<div id="home-tab" class="tab-content active">
<h2>Quick Actions</h2>
<button class="action-btn" onclick="addProject()">📁 New Project</button>
<button class="action-btn" onclick="addExpense()">💰 Add Expense</button>
<button class="action-btn" onclick="viewProjects()">📊 View All</button>
<button class="action-btn" onclick="exportData()">💾 Export</button>
</div>
<div id="projects-tab" class="tab-content">
<h2>Projects</h2>
<div id="projects-list"></div>
</div>
<div id="expenses-tab" class="tab-content">
<h2>Expenses</h2>
<div id="expenses-list"></div>
</div>
</div>
<button class="add-btn" onclick="quickAdd()">+</button>
<nav class="bottom-nav">
<button class="nav-item active" onclick="switchTab('home',this)">🏠 Home</button>
<button class="nav-item" onclick="switchTab('projects',this)">📁 Projects</button>
<button class="nav-item" onclick="switchTab('expenses',this)">💰 Expenses</button>
</nav>
<script>
let data={projects:[],expenses:[]};
function saveData(){try{localStorage.setItem('pdata',JSON.stringify(data));}catch(e){}}
function loadData(){try{let s=localStorage.getItem('pdata');if(s)data=JSON.parse(s);}catch(e){}}
function addProject(){let n=prompt('Project name:');if(!n)return;let b=prompt('Budget:');data.projects.push({name:n,budget:parseFloat(b)||0,spent:0});saveData();alert('✅ Added!');viewProjects();}
function addExpense(){if(!data.projects.length){alert('Add project first');addProject();return;}let p=prompt('Project:\n'+data.projects.map(x=>x.name).join('\n'));let a=prompt('Amount:');if(!a)return;data.expenses.push({project:p,amount:parseFloat(a)||0});let pr=data.projects.find(x=>x.name==p);if(pr)pr.spent+=parseFloat(a)||0;saveData();alert('✅ Added!');}
function quickAdd(){if(confirm('OK=Project, Cancel=Expense'))addProject();else addExpense();}
function viewProjects(){switchTab('projects');let h='';data.projects.forEach(p=>{h+=`<div class="card"><b>${p.name}</b><br>Budget: $${p.budget}<br>Spent: $${p.spent}</div>`;});document.getElementById('projects-list').innerHTML=h||'No projects yet';}
function switchTab(t,el){document.querySelectorAll('.tab-content').forEach(x=>x.classList.remove('active'));document.getElementById(t+'-tab').classList.add('active');if(el){document.querySelectorAll('.nav-item').forEach(x=>x.classList.remove('active'));el.classList.add('active');}}
function exportData(){alert('Data:\n'+JSON.stringify(data));}
window.onload=function(){loadData();document.getElementById('total').textContent='Projects: '+data.projects.length;}
</script>
</body>
</html>