diff --git a/public/faq.css b/public/faq.css index c92ee082..7d83bfeb 100644 --- a/public/faq.css +++ b/public/faq.css @@ -681,4 +681,33 @@ html[data-theme="light"] .category-btn:hover{ /* FAQ hover */ html[data-theme="light"] .faq-item:hover{ background:#f9fafb; +}/* Scroll To Top Button */ + +#scrollTopBtn{ + position: fixed; + bottom: 30px; + right: 30px; + background: linear-gradient(135deg,#00e6a8,#64ffda); + color: #000; + border: none; + padding: 14px 16px; + border-radius: 50%; + font-size: 18px; + cursor: pointer; + display: none; + z-index: 1000; + box-shadow: 0 0 15px rgba(100,255,218,0.7); + transition: all 0.3s ease; +} + +#scrollTopBtn:hover{ + transform: translateY(-4px) scale(1.1); + box-shadow: 0 0 25px rgba(100,255,218,1); +} + +/* Dark Mode */ + +body.dark-mode #scrollTopBtn{ + background: linear-gradient(135deg,#64ffda,#00bfa5); + color:white; } \ No newline at end of file diff --git a/public/faq.html b/public/faq.html index ede67564..91e02ad2 100644 --- a/public/faq.html +++ b/public/faq.html @@ -568,7 +568,10 @@

Follow Us

© 2026 ExpenseFlow. All rights reserved.

- + + diff --git a/public/faq.js b/public/faq.js index 51f6916d..7221132b 100644 --- a/public/faq.js +++ b/public/faq.js @@ -237,4 +237,19 @@ const savedTheme = localStorage.getItem("theme"); if(savedTheme){ document.documentElement.setAttribute("data-theme",savedTheme); -} \ No newline at end of file +}const scrollBtn = document.getElementById("scrollTopBtn"); + +window.onscroll = function () { + if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { + scrollBtn.style.display = "block"; + } else { + scrollBtn.style.display = "none"; + } +}; + +scrollBtn.addEventListener("click", function () { + window.scrollTo({ + top: 0, + behavior: "smooth" + }); +}); \ No newline at end of file diff --git a/public/index.html b/public/index.html index ccb4bd6e..f1a5dddd 100644 --- a/public/index.html +++ b/public/index.html @@ -496,6 +496,7 @@ Analytics Goals Net Worth + Receipt
More
diff --git a/public/receipt.css b/public/receipt.css new file mode 100644 index 00000000..dabe78ef --- /dev/null +++ b/public/receipt.css @@ -0,0 +1,474 @@ +/* RESET */ + +*{ +margin:0; +padding:0; +box-sizing:border-box; +font-family:Segoe UI, Arial, sans-serif; +transition:background 0.3s,color 0.3s; +} + +/* THEME VARIABLES */ + +:root{ + +--bg:#ffffff; +--text:#0f172a; +--card:#f1f5f9; +--accent:#00c9a7; +--border:#e2e8f0; + +} + +body.dark{ + +--bg:#0f172a; +--text:#ffffff; +--card:#1e293b; +--accent:#00ffd5; +--border:#334155; + +} + +/* BODY */ + +body{ + +background:var(--bg); +color:var(--text); +line-height:1.6; + +} + +/* NAVBAR */ + +.navbar{ + +display:flex; +justify-content:space-between; +align-items:center; + +padding:15px 40px; + +background:var(--card); + +border-bottom:1px solid var(--border); + +} + +.logo{ + +font-size:20px; +font-weight:bold; + +} + +.navbar ul{ + +display:flex; +gap:20px; +list-style:none; + +} + +.navbar a{ + +text-decoration:none; +color:var(--text); +font-weight:500; + +} + +.navbar a:hover{ + +color:var(--accent); + +} + +/* THEME TOGGLE */ + +#themeToggle{ + +background:none; +border:none; + +font-size:20px; + +cursor:pointer; + +color:var(--text); + +} + +#themeToggle:hover{ + +transform:rotate(20deg); + +} + +/* SCANNER SECTION */ + +.scanner{ + +max-width:900px; + +margin:auto; + +padding:40px 20px; + +text-align:center; + +} + +.scanner h1{ + +font-size:32px; +margin-bottom:10px; + +} + +.scanner p{ + +margin-bottom:30px; +color:#64748b; + +} + +/* UPLOAD AREA */ + +.upload-area{ + +border:2px dashed var(--accent); + +padding:40px; + +border-radius:12px; + +cursor:pointer; + +} + +.upload-area:hover{ + +background:rgba(0,255,200,0.08); + +} + +/* FILE INPUT */ + +#fileInput{ + +margin-top:10px; + +} + +/* PREVIEW IMAGE */ + +#preview{ + +max-width:300px; + +margin-top:20px; + +border-radius:10px; + +box-shadow:0 0 15px rgba(0,255,200,0.4); + +display:none; + +} + +/* BUTTON */ + +button{ + +padding:10px 18px; + +border:none; +border-radius:8px; + +background:linear-gradient(135deg,var(--accent),#00d9f5); + +color:white; + +cursor:pointer; + +margin-top:15px; + +font-weight:bold; + +} + +button:hover{ + +transform:scale(1.05); + +box-shadow:0 0 10px var(--accent); + +} + +/* RESULT CARD */ + +.result{ + +margin-top:30px; + +background:var(--card); + +padding:20px; + +border-radius:12px; + +box-shadow:0 0 10px rgba(0,0,0,0.2); + +} + +.result p{ + +margin:8px 0; +font-size:18px; + +} + +/* OCR BOX */ + +.ocr-box{ + +margin-top:30px; + +background:var(--card); + +padding:20px; + +border-radius:12px; + +box-shadow:0 0 10px rgba(0,0,0,0.2); + +text-align:left; + +} + +.ocr-box h3{ + +margin-bottom:10px; + +} + +.ocr-box pre{ + +background:#000; + +color:#00ffd5; + +padding:10px; + +border-radius:8px; + +max-height:250px; + +overflow:auto; + +white-space:pre-wrap; + +font-size:13px; + +} + +/* SAVED SECTION */ + +.saved{ + +max-width:1100px; + +margin:auto; + +padding:40px 20px; + +} + +.saved h2{ + +text-align:center; +margin-bottom:20px; + +} + +/* RECEIPT GRID */ + +#receiptList{ + +display:grid; + +grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); + +gap:20px; + +} + +/* RECEIPT CARD */ + +.receipt-card{ + +background:var(--card); + +padding:15px; + +border-radius:12px; + +box-shadow:0 0 10px rgba(0,0,0,0.2); + +transition:0.3s; + +} + +.receipt-card:hover{ + +transform:translateY(-5px); + +box-shadow:0 0 20px rgba(0,255,200,0.4); + +} + +/* RECEIPT IMAGE */ + +.receipt-img{ + +width:100%; + +border-radius:8px; + +margin-bottom:10px; + +} + +/* RECEIPT INFO */ + +.receipt-info h3{ + +color:var(--accent); + +margin-bottom:5px; + +} + +/* OCR DETAILS */ + +details{ + +margin-top:10px; + +} + +details summary{ + +cursor:pointer; +color:var(--accent); +font-weight:bold; + +} + +details pre{ + +margin-top:10px; + +background:#000; + +color:#00ffd5; + +padding:10px; + +border-radius:6px; + +font-size:12px; + +max-height:200px; + +overflow:auto; + +} + +/* DELETE BUTTON */ + +.delete-btn{ + +background:#ef4444; + +margin-top:10px; + +} + +.delete-btn:hover{ + +background:#dc2626; + +} + +/* FOOTER */ + +footer{ + +margin-top:40px; + +padding:20px; + +text-align:center; + +border-top:1px solid var(--border); + +color:#64748b; + +} + +/* RESPONSIVE DESIGN */ + +@media (max-width:768px){ + +.navbar{ + +flex-direction:column; +gap:10px; + +} + +.navbar ul{ + +flex-wrap:wrap; +justify-content:center; + +} + +.scanner h1{ + +font-size:26px; + +} + +.upload-area{ + +padding:30px; + +} + +#preview{ + +max-width:100%; + +} + +} + +@media (max-width:480px){ + +button{ + +width:100%; + +} + +.result p{ + +font-size:16px; + +} + +} \ No newline at end of file diff --git a/public/receipt.html b/public/receipt.html new file mode 100644 index 00000000..1d90e214 --- /dev/null +++ b/public/receipt.html @@ -0,0 +1,103 @@ + + + + + + + +Receipt Scanner | ExpenseFlow + + + + + + + + + + + + + + + + +
+ +

๐Ÿงพ Smart Receipt Scanner

+

Upload a receipt and ExpenseFlow will detect your expense automatically

+ +
+ + + +

Drag receipt or upload image

+ +
+ + + + + +
+ +

Detected Expense

+ +

๐Ÿ’ฐ Amount: -

+

๐Ÿ“… Date: -

+

๐Ÿท Category: -

+ + + +
+ +
+

๐Ÿ” Scanned Receipt Text

+
No scan yet
+
+ +
+ + + + +
+ +

Saved Expenses

+ +
+ +
+ + + + +
+ +

ยฉ 2026 ExpenseFlow โ€ข Smart Personal Finance

+ +
+ + + + + + + \ No newline at end of file diff --git a/public/receipt.js b/public/receipt.js new file mode 100644 index 00000000..bb55f9dc --- /dev/null +++ b/public/receipt.js @@ -0,0 +1,254 @@ +document.addEventListener("DOMContentLoaded", () => { + +const fileInput = document.getElementById("fileInput"); +const preview = document.getElementById("preview"); +const scanBtn = document.getElementById("scanBtn"); +const saveBtn = document.getElementById("saveBtn"); + +const amountEl = document.getElementById("amount"); +const dateEl = document.getElementById("date"); +const categoryEl = document.getElementById("category"); + +const receiptList = document.getElementById("receiptList"); + +let detectedAmount = null; +let detectedCategory = "General"; + +loadReceipts(); + +fileInput.addEventListener("change", previewImage); +scanBtn.addEventListener("click", scanReceipt); +saveBtn.addEventListener("click", saveReceipt); + + +/* ---------- Preview Image ---------- */ + +function previewImage() { + +const file = fileInput.files[0]; + +if(!file) return; + +const reader = new FileReader(); + +reader.onload = function(e){ + +preview.src = e.target.result; +preview.style.display = "block"; + +}; + +reader.readAsDataURL(file); + +} + + +/* ---------- Scan Receipt ---------- */ + +async function scanReceipt(){ + +const file = fileInput.files[0]; + +if(!file){ +showPopup("๐Ÿ“ท Upload receipt first"); +return; +} + +scanBtn.innerText = "Scanning..."; + +const result = await Tesseract.recognize(file,"eng"); + +const text = result.data.text; +detectedOCR = text; +document.getElementById("ocrText").innerText = text; +console.log("OCR TEXT:", text); + +/* SHOW OCR TEXT IN FRONTEND */ + +document.getElementById("ocrText").innerText = text; + +/* DETECT DATA */ + +detectAmount(text); +detectCategory(text); + +amountEl.innerText = detectedAmount ? "โ‚น"+detectedAmount : "Not detected"; +dateEl.innerText = new Date().toLocaleDateString(); +categoryEl.innerText = detectedCategory; + +scanBtn.innerText = "Scan Receipt"; + +} + +/* ---------- Detect Amount ---------- */ + +function detectAmount(text){ + +const matches = text.match(/(โ‚น\s?\d+[.,]?\d*)|(\d+\.\d{2})/g); + +if(!matches){ + +detectedAmount = null; +return; + +} + +let values = matches.map(v => +parseFloat(v.replace(/[โ‚น,]/g,"")) +); + +detectedAmount = Math.max(...values); + +} + + +/* ---------- Detect Category ---------- */ + +function detectCategory(text){ + +text = text.toLowerCase(); + +if(text.includes("restaurant") || text.includes("cafe") || text.includes("food")) +detectedCategory = "Food"; + +else if(text.includes("fuel") || text.includes("petrol")) +detectedCategory = "Transport"; + +else if(text.includes("medical") || text.includes("pharmacy")) +detectedCategory = "Healthcare"; + +else if(text.includes("mart") || text.includes("store") || text.includes("supermarket")) +detectedCategory = "Shopping"; + +else +detectedCategory = "General"; + +} + + +/* ---------- Save Receipt ---------- */ + +function saveReceipt(){ + +const receipts = JSON.parse(localStorage.getItem("receipts")) || []; + +const receipt = { + +id: Date.now(), + +amount: detectedAmount ? detectedAmount : "Not detected", + +category: detectedCategory ? detectedCategory : "Unknown", + +date: new Date().toLocaleDateString(), + +image: preview.src ? preview.src : "", + +ocr: detectedOCR ? detectedOCR : "No OCR data available" + +}; + +receipts.push(receipt); + +localStorage.setItem("receipts", JSON.stringify(receipts)); + +loadReceipts(); + +showPopup("โœ… Receipt Saved Successfully"); + +} + + +/* ---------- Load Receipts ---------- */ + +function loadReceipts(){ + +const receipts = JSON.parse(localStorage.getItem("receipts")) || []; + +receiptList.innerHTML = ""; + +if(receipts.length === 0){ + +receiptList.innerHTML = "

No saved expenses

"; +return; + +} + +receipts.reverse().forEach(r => { + +const card = document.createElement("div"); + +card.className = "receipt-card"; + +card.innerHTML = ` + + + +
+ +

๐Ÿ’ฐ ${r.amount === "Not detected" ? "Amount not detected" : "โ‚น" + r.amount}

+ +

๐Ÿท ${r.category}

+ +

๐Ÿ“… ${r.date}

+ +
+View OCR Data +
${r.ocr}
+
+ + + +
+ +`; +receiptList.appendChild(card); + +}); + +} + + +/* ---------- Delete Receipt ---------- */ + +window.deleteReceipt = function(id){ + +let receipts = JSON.parse(localStorage.getItem("receipts")) || []; + +receipts = receipts.filter(r => r.id !== id); + +localStorage.setItem("receipts",JSON.stringify(receipts)); + +loadReceipts(); + +}; + + +/* ---------- Dark Light Toggle ---------- */ + +const toggle = document.getElementById("themeToggle"); + +toggle.addEventListener("click",()=>{ + +document.body.classList.toggle("dark"); + +}); + +});function showPopup(message){ + +const popup = document.getElementById("popup"); +const msg = document.getElementById("popupMsg"); + +msg.innerText = message; + +popup.classList.add("show"); + +setTimeout(()=>{ + +popup.classList.remove("show"); + +},3000); + +} \ No newline at end of file