please centered the notification bar on our html code here is our code <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Petshop System</title>
<style>
body { margin:0; font-family:Arial, sans-serif; background:#f0f2f5; }
header { background:#007bff; color:#fff; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; }
header h1 { margin:0; font-size:18px; }
nav { display:flex; gap:8px; align-items:center; }
nav button { border:none; background:#fff2; color:#fff; padding:8px 12px; border-radius:6px; cursor:pointer; }
nav button:hover { background:#fff3; }
main { max-width:1100px; margin:20px auto; padding:0 15px; }
.section { display:none; background:#fff; padding:20px; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,0.1); }
h2 { margin-top:0; }
table { width:100%; border-collapse:collapse; margin-top:10px; }
th,td { border:1px solid #ddd; padding:8px; text-align:center; }
th { background:#007bff; color:#fff; }
.btn { padding:6px 10px; border-radius:6px; border:none; cursor:pointer; font-size:14px; }
.btn-primary { background:#007bff; color:#fff; }
.btn-success { background:#28a745; color:#fff; }
.btn-danger { background:#dc3545; color:#fff; }
.btn-warning { background:#ffc107; color:#000; }
.btn-muted { background:#6c757d; color:#fff; }
.form-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.form-row input, .form-row select { flex:1; padding:8px; border:1px solid #ccc; border-radius:6px; min-width:150px; }
#landing { text-align:center; padding:100px 20px; }
#landing h1 { font-size:32px; color:#007bff; }
#landing p { color:#555; margin-bottom:20px; }
#landing button { margin:8px; font-size:16px; }
#cart-total { text-align:center; font-weight:bold; margin-top:10px; font-size:18px; }
/* Dashboard summary cards */
.summary { display:flex; gap:15px; flex-wrap:wrap; margin-top:15px; }
.card { flex:1; min-width:200px; background:#f8f9fa; padding:15px; border-radius:8px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.card h3 { margin:5px 0; font-size:20px; }
.card p { margin:0; font-size:16px; color:#555; }
</style>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<header id="app-header" style="display:none;">
<h1>🐾 Petshop</h1>
<nav>
<button onclick="show('dashboard')">Dashboard</button>
<button id="addpet-btn" onclick="show('addpet')">Add Pet</button>
<button onclick="show('sales')">Sales</button>
<button id="cart-btn" onclick="show('cart')">Cart</button>
<button id="orders-btn" onclick="show('orders')">Orders</button>
<button id="allorders-btn" onclick="show('allorders')">All Orders</button>
<button class="btn-danger" onclick="logout()">Log Out</button>
</nav>
</header>
<main>
<!-- Landing -->
<section id="landing" class="section" style="display:block;">
<h1>Welcome to Petshop System</h1>
<p>Manage pets, sales, and orders easily.</p>
<button class="btn btn-primary" onclick="show('login')">Log In</button>
<button class="btn btn-success" onclick="show('signup')">Sign Up</button>
</section>
<!-- Login -->
<section id="login" class="section">
<h2>Log In</h2>
<form id="loginForm">
<div class="form-row">
<input id="loginUser" placeholder="Username" required/>
<input id="loginPass" type="password" placeholder="Password" required/>
<select id="loginRole" required>
<option value="" disabled selected>Select Role</option>
<option value="customer">Customer</option>
<option value="admin">Admin</option>
</select>
<button class="btn btn-primary" type="submit">Log In</button>
</div>
</form>
<p style="margin-top:10px;">Don’t have an account? <span style="color:#007bff;cursor:pointer;" onclick="show('signup')">Sign up here</span>.</p>
<button class="btn btn-muted" style="margin-top:15px;" onclick="show('landing')">⬅ Back</button>
</section>
<!-- Sign Up -->
<section id="signup" class="section">
<h2>Sign Up</h2>
<form id="signupForm">
<div class="form-row">
<input id="signupUser" placeholder="Username" required/>
<input id="signupPass" type="password" placeholder="Password" required/>
<select id="signupRole">
<option value="customer">Customer</option>
<option value="admin">Admin</option>
</select>
<button class="btn btn-success" type="submit">Sign Up</button>
</div>
</form>
<p style="margin-top:10px;">Already have an account? <span style="color:#007bff;cursor:pointer;" onclick="show('login')">Log in here</span>.</p>
<button class="btn btn-muted" style="margin-top:15px;" onclick="show('landing')">⬅ Back</button>
</section>
<!-- Dashboard -->
<section id="dashboard" class="section">
<h2>Dashboard</h2>
<p id="welcome"></p>
<div id="adminSummary" class="summary" style="display:none;">
<div class="card"><h3 id="statPets">0</h3><p>Pets for Sale</p></div>
<div class="card"><h3 id="statOrders">0</h3><p>Total Orders</p></div>
<div class="card"><h3 id="statCompleted">0</h3><p>Completed Orders</p></div>
<div class="card"><h3 id="statPending">0</h3><p>Pending Orders</p></div>
</div>
<!-- Charts -->
<div style="margin-top:30px;">
<h3>📊 Orders Overview</h3>
<canvas id="ordersChart"></canvas>
</div>
<div style="margin-top:30px;">
<h3>📈 Orders Per Day (Last 7 Days)</h3>
<canvas id="ordersOverTimeChart"></canvas>
</div>
</section>
<!-- Add Pet -->
<section id="addpet" class="section">
<h2>Add Pet</h2>
<form id="addPetForm">
<div class="form-row">
<select id="petType" required>
<option disabled selected>Select Type</option>
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
</select>
<input id="petBreed" placeholder="Breed" required/>
<input id="petPrice" type="number" placeholder="Price ₱" required/>
<button class="btn btn-primary" type="submit">Add Pet</button>
</div>
</form>
</section>
<!-- Sales -->
<section id="sales" class="section">
<h2>Available Sales</h2>
<table id="salesTable"><thead><tr><th>Type</th><th>Breed</th><th>Price ₱</th><th>Action</th></tr></thead><tbody></tbody></table>
</section>
<!-- Cart -->
<section id="cart" class="section">
<h2>Your Cart</h2>
<table id="cartTable"><thead><tr><th>Type</th><th>Breed</th><th>Price</th><th>Action</th></tr></thead><tbody></tbody></table>
<div id="cart-total">Total: ₱0</div>
</section>
<!-- Orders -->
<section id="orders" class="section">
<h2>Order History</h2>
<table id="ordersTable"><thead><tr><th>Type</th><th>Breed</th><th>Price</th><th>Status</th><th>Date</th></tr></thead><tbody></tbody></table>
</section>
<!-- All Orders -->
<section id="allorders" class="section">
<h2>📦 All Customer Orders (Admin)</h2>
<table id="allOrdersTable"><thead><tr><th>User</th><th>Type</th><th>Breed</th><th>Price</th><th>Status</th><th>Date</th><th>Action</th></tr></thead><tbody></tbody></table>
</section>
</main>
<script>
let users = JSON.parse(localStorage.getItem('users')||'{}');
let currentUser = null;
let pets = JSON.parse(localStorage.getItem('pets')||'[]');
let ordersPerDay = JSON.parse(localStorage.getItem('ordersPerDay')||'{}');
let ordersChart, ordersOverTimeChart;
function saveAll(){
localStorage.setItem('users', JSON.stringify(users));
localStorage.setItem('pets', JSON.stringify(pets));
localStorage.setItem('ordersPerDay', JSON.stringify(ordersPerDay));
}
function show(id){
document.querySelectorAll('.section').forEach(s=>s.style.display='none');
document.getElementById(id).style.display='block';
document.getElementById('app-header').style.display=currentUser?'flex':'none';
if(id==='sales') renderSales();
if(id==='cart') renderCart();
if(id==='orders') renderOrders();
if(id==='allorders' && currentUser?.role==='admin') renderAllOrders();
if(id==='dashboard' && currentUser?.role==='admin') renderAdminSummary();
}
// Helper: Get date range
function getDateRange(days){
let dates=[];
let d=new Date();
for(let i=days-1;i>=0;i--){
let temp=new Date(d);
temp.setDate(d.getDate()-i);
dates.push(temp.toISOString().split('T')[0]);
}
return dates;
}
// Signup
document.getElementById('signupForm').onsubmit=e=>{
e.preventDefault();
const u=document.getElementById('signupUser').value;
const p=document.getElementById('signupPass').value;
const r=document.getElementById('signupRole').value;
if(users[u]){ alert('User exists'); return; }
users[u]={password:p,role:r,cart:[],orders:[]};
saveAll(); show('login');
};
// Login
document.getElementById('loginForm').onsubmit=e=>{
e.preventDefault();
const u=document.getElementById('loginUser').value;
const p=document.getElementById('loginPass').value;
const r=document.getElementById('loginRole').value;
if(users[u] && users[u].password===p && users[u].role===r){
currentUser={username:u,role:r};
document.getElementById('welcome').textContent=`Welcome ${u} (${r})`;
show('dashboard');
document.getElementById('addpet-btn').style.display = r==='admin' ? 'inline-block':'none';
document.getElementById('allorders-btn').style.display = r==='admin' ? 'inline-block':'none';
document.getElementById('adminSummary').style.display = r==='admin' ? 'flex':'none';
if(r==='admin') renderAdminSummary();
} else {
alert('Invalid login');
}
};
function logout(){ currentUser=null; show('landing'); }
// Pets
document.getElementById('addPetForm').onsubmit=e=>{
e.preventDefault();
const t=document.getElementById('petType').value;
const b=document.getElementById('petBreed').value;
const p=document.getElementById('petPrice').value;
pets.push({type:t,breed:b,price:p});
saveAll(); show('sales');
};
function renderSales(){
const tb=document.querySelector('#salesTable tbody'); tb.innerHTML='';
pets.forEach((x,i)=>{
let tr=document.createElement('tr');
tr.innerHTML=currentUser.role==='admin'
? `<td>${x.type}</td><td>${x.breed}</td><td>${x.price}</td><td><button class="btn btn-danger" onclick="deletePet(${i})">Delete</button></td>`
: `<td>${x.type}</td><td>${x.breed}</td><td>${x.price}</td><td><button class="btn btn-success" onclick="addCart(${i})">Add</button></td>`;
tb.appendChild(tr);
});
}
function deletePet(i){ if(confirm("Delete pet?")){ pets.splice(i,1); saveAll(); renderSales(); } }
// Cart
function renderCart(){
const tb=document.querySelector('#cartTable tbody'); tb.innerHTML='';
let cart=users[currentUser.username].cart;
cart.forEach((x,i)=>{
tb.innerHTML+=`<tr><td>${x.type}</td><td>${x.breed}</td><td>${x.price}</td>
<td><button class="btn btn-success" onclick="placeOrder(${i})">Place</button>
<button class="btn btn-danger" onclick="cancelItem(${i})">Cancel</button></td></tr>`;
});
let total=cart.reduce((a,b)=>a+Number(b.price),0);
document.getElementById('cart-total').textContent=`Total: ₱${total}`;
}
// Orders
function renderOrders(){
const tb=document.querySelector('#ordersTable tbody'); tb.innerHTML='';
users[currentUser.username].orders.forEach(o=>{
tb.innerHTML+=`<tr><td>${o.type}</td><td>${o.breed}</td><td>${o.price}</td><td>${o.status}</td><td>${o.date||''}</td></tr>`;
});
}
// All Orders
function renderAllOrders(){
const tb=document.querySelector('#allOrdersTable tbody'); tb.innerHTML='';
for(let u in users){
if(users[u].orders){
users[u].orders.forEach((o,idx)=>{
tb.innerHTML+= o.status!=="Completed"
? `<tr><td>${u}</td><td>${o.type}</td><td>${o.breed}</td><td>${o.price}</td><td>${o.status}</td><td>${o.date||''}</td>
<td><button class="btn btn-warning" onclick="completeOrder('${u}',${idx})">Complete</button></td></tr>`
: `<tr><td>${u}</td><td>${o.type}</td><td>${o.breed}</td><td>${o.price}</td><td>✅ Completed</td><td>${o.date||''}</td><td>-</td></tr>`;
});
}
}
}
function completeOrder(user,idx){
users[user].orders[idx].status="Completed"; saveAll();
renderAllOrders(); renderAdminSummary();
}
function addCart(i){ users[currentUser.username].cart.push(pets[i]); saveAll(); renderCart(); }
function cancelItem(i){ users[currentUser.username].cart.splice(i,1); saveAll(); renderCart(); }
function placeOrder(i){
if(!confirm('Confirm order?')) return;
let cart=users[currentUser.username].cart;
let orders=users[currentUser.username].orders;
let o=cart[i];
let today = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
orders.push({...o,status:'Placed',date:today});
cart.splice(i,1);
ordersPerDay[today]=(ordersPerDay[today]||0)+1;
saveAll(); renderCart(); renderOrders();
if(currentUser.role==="admin") renderAdminSummary();
alert('✅ Thank you for buying and come again!');
}
function renderAdminSummary(){
document.getElementById('statPets').textContent=pets.length;
let total=0, completed=0, pending=0;
for(let u in users){
if(users[u].orders){
total+=users[u].orders.length;
completed+=users[u].orders.filter(o=>o.status==="Completed").length;
pending+=users[u].orders.filter(o=>o.status!=="Completed").length;
}
}
document.getElementById('statOrders').textContent=total;
document.getElementById('statCompleted').textContent=completed;
document.getElementById('statPending').textContent=pending;
updateOrdersChart(total,completed,pending);
updateOrdersOverTimeChart();
}
// Charts
function updateOrdersChart(total,completed,pending){
let ctx=document.getElementById('ordersChart');
if(!ordersChart){
ordersChart=new Chart(ctx,{
type:'bar',
data:{labels:['Total','Completed','Pending'],
datasets:[{label:'Orders',data:[total,completed,pending],
backgroundColor:['#007bff','#28a745','#ffc107']}]},
options:{responsive:true,scales:{y:{beginAtZero:true}}}
});
}else{
ordersChart.data.datasets[0].data=[total,completed,pending];
ordersChart.update();
}
}
function updateOrdersOverTimeChart(){
let ctx=document.getElementById('ordersOverTimeChart');
let labels=getDateRange(7); // last 7 days
let data=labels.map(date => ordersPerDay[date] || 0);
if(!ordersOverTimeChart){
ordersOverTimeChart=new Chart(ctx,{
type:'line',
data:{labels:labels,
datasets:[{label:'Orders Per Day',data:data,borderColor:'#17a2b8',
backgroundColor:'rgba(23,162,184,0.2)',fill:true,tension:0.3}]},
options:{responsive:true,scales:{y:{beginAtZero:true,precision:0}}}
});
}else{
ordersOverTimeChart.data.labels=labels;
ordersOverTimeChart.data.datasets[0].data=data;
ordersOverTimeChart.update();
}
}
// Start
show('landing');
</script>
</body>
</html>