<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stall Sales Data Collection</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, "Noto Sans Tamil", sans-serif;
background: #f4f6f8;
color: #222;
}
.sales-container {
max-width: 1100px;
margin: 20px auto;
padding: 15px;
}
.sales-header {
background: linear-gradient(135deg, #673ab7, #3f51b5);
color: white;
padding: 22px;
border-radius: 12px;
margin-bottom: 15px;
text-align: center;
}
.sales-header h2 {
margin: 0 0 5px;
font-size: 25px;
}
.sales-header p {
margin: 0;
opacity: 0.9;
}
.summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 15px;
}
.summary-box {
background: white;
padding: 18px;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.summary-title {
font-size: 14px;
color: #666;
}
.summary-value {
font-size: 24px;
font-weight: bold;
margin-top: 5px;
color: #3f51b5;
}
.controls {
background: white;
padding: 12px;
border-radius: 10px;
margin-bottom: 15px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.search {
flex: 1;
min-width: 220px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 7px;
font-size: 15px;
}
button {
border: none;
padding: 11px 16px;
border-radius: 7px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
}
.export-btn {
background: #198754;
color: white;
}
.clear-btn {
background: #dc3545;
color: white;
}
.table-wrapper {
background: white;
border-radius: 10px;
overflow-x: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}
th {
background: #3f51b5;
color: white;
padding: 12px 8px;
text-align: center;
position: sticky;
top: 0;
}
td {
padding: 8px;
border-bottom: 1px solid #e5e5e5;
}
td:nth-child(1) {
text-align: center;
font-weight: bold;
width: 80px;
}
td:nth-child(2) {
min-width: 350px;
}
td:nth-child(3),
td:nth-child(4) {
width: 160px;
}
input.sales-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 15px;
}
input.sales-input:focus {
outline: none;
border-color: #3f51b5;
box-shadow: 0 0 3px rgba(63,81,181,0.4);
}
.stall-name {
font-size: 16px;
line-height: 1.5;
}
.footer-total {
background: #eef1ff;
font-weight: bold;
font-size: 17px;
}
.save-status {
text-align: center;
color: #198754;
font-size: 13px;
padding: 8px;
}
@media(max-width:600px) {
.sales-container {
padding: 8px;
margin: 5px auto;
}
.summary {
grid-template-columns: 1fr;
}
.sales-header h2 {
font-size: 21px;
}
.controls {
flex-direction: column;
}
.search {
width: 100%;
}
button {
width: 100%;
}
}
</style>
</head>
<body>
<div class="sales-container">
<div class="sales-header">
<h2>அரங்குகள் விற்பனை விவரங்கள்</h2>
<p>Stall Sales Data Collection</p>
</div>
<div class="summary">
<div class="summary-box">
<div class="summary-title">மொத்த விற்பனை அளவு</div>
<div class="summary-value" id="totalQty">0</div>
</div>
<div class="summary-box">
<div class="summary-title">மொத்த விற்பனை தொகை</div>
<div class="summary-value" id="totalAmount">₹0.00</div>
</div>
</div>
<div class="controls">
<input
type="text"
id="searchBox"
class="search"
placeholder="🔍 அரங்க எண் / அரங்க பெயர் தேடுக..."
onkeyup="searchStalls()"
>
<button class="export-btn" onclick="exportCSV()">
📥 Excel / CSV
</button>
<button class="clear-btn" onclick="clearData()">
🗑️ Clear All
</button>
</div>
<div class="table-wrapper">
<table id="salesTable">
<thead>
<tr>
<th>அரங்க எண்<br>Stall No.</th>
<th>அரங்க பெயர்<br>Stall Name</th>
<th>விற்பனை அளவு<br>Quantity</th>
<th>விற்பனை தொகை<br>Sales Amount ₹</th>
</tr>
</thead>
<tbody id="stallBody">
</tbody>
<tfoot>
<tr class="footer-total">
<td colspan="2">மொத்தம் / TOTAL</td>
<td id="footerQty">0</td>
<td id="footerAmount">₹0.00</td>
</tr>
</tfoot>
</table>
</div>
<div class="save-status" id="saveStatus">
✓ Data is automatically saved in this browser
</div>
</div>
<script>
const stalls = [
["1", "ஆரணி - பட்டுச் சேலைகள்"],
["2", "சேலம் - வெண்பட்டு, வேஷ்டி, சர்ட்டிங், அங்கவஸ்திரம்"],
["3", "ஜெயங்கொண்டம் பருத்திச் சேலைகள்"],
["4", "சேலம் HF பட்டு சேலைகள், கும்பகோணம் - HF பட்டு சேலைகள், ஈரோடு - கோரா பருத்தி சேலைகள்"],
["5", "காதிகிராஃப்ட்"],
["6,7", "பூம்புகார்"],
["8,9", "பட்டு வளர்ச்சித் துறை"],
["10", "குஜராத்-பாந்தினி, அஜ்ரக், டை&டை சேலைகள், ஸ்கர்ட்ஸ், டாப்ஸ், துப்பட்டா"],
["11", "ஒடிஷா - பட்டுச் சேலைகள், பருத்திச் சேலைகள்"],
["12", "கூட்டுறவுத் துறை - சமையல் பொருட்கள்"],
["13", "தமிழ்நாடு மாநில கூட்டுறவு வங்கி - வங்கி திட்ட உதவிகள்"],
["14", "திண்டுக்கல் - செயற்கை பட்டு சேலைகள், பம்பர் காட்டன் சேலைகள், கோட்டா பருத்தி சேலைகள்"],
["15", "மேற்கு வங்கம் - தந்துஜா - பருத்தி மற்றும் பட்டுச் சேலைகள்"],
["16", "மேற்கு வங்கம் - கைத்தறி டசர் சில்க், மஸ்லின் சில்க் சேலைகள்"],
["17", "திருப்பூர் - கோரா சேலைகள், பட்டுச் சேலைகள், லினன் சேலைகள், டை & டை சேலைகள்"],
["18", "மத்திய பிரதேசம் - மகேஸ்வரி சேலைகள், சந்தேரி சேலைகள்"],
["19", "திண்டுக்கல் - மென் பட்டுச் சேலைகள், கோரா காட்டன் சேலைகள்"],
["20", "கோயம்புத்தூர் - மென் பட்டுச் சேலைகள், சில்க் காட்டன் சேலைகள்"],
["21", "TRIFED - புல்லாங்குழல், கைவினைப் பொருட்கள்"],
["22", "கேரளா கைத்தறி வளர்ச்சி கழகம் - கைத்தறி கசவு சேலைகள், முண்டு, வேட்டி வகைகள்"],
["23", "தெலுங்கானா - போச்சம்பள்ளி பட்டு & பருத்திச் சேலைகள்"],
["24", "கடலூர் - பருத்திச் சேலைகள், பருத்தி சட்டைகள், லுங்கிகள்"],
["25", "கரூர் - பெட்ஷீட், படுக்கை விரிப்பு, தலையணை உறை"],
["26,27", "ஈரோடு - மெத்தை விரிப்புகள், போர்வைகள், துண்டுகள், தலையணை உறை, பேக், ஜமுக்காளம், கால்மிதியடிகள்"],
["28", "ஜம்மு & காஷ்மீர் - யுனிவர்சல் பாஷ்மீனா சில்க் சேலைகள்"],
["29", "ஜம்மு & காஷ்மீர் - பட்டுச் சேலைகள், பருத்திச் சேலைகள், ஆகாஷ் பாஷ்மீனா, ரங்கோலி பாஷ்மீனா"],
["30", "ஆந்திரப்பிரதேசம் - வெங்கடகிரி, ராஜமந்திரி சேலைகள், உப்பாடா பருத்திச் சேலைகள், சில்க் காட்டன்"],
["31", "ஜார்கண்ட் - டசர் சில்க், பிரிண்டட் சில்க் சேலைகள்"],
["32", "மகாராஷ்டிரா - சில்க் சேலைகள் மற்றும் சில்க் ஷீட்ஸ்"],
["33", "தெலுங்கானா - போச்சம்பள்ளி பருத்தி மற்றும் பட்டுச் சேலைகள்"],
["34", "திருநெல்வேலி - செடி புட்டா, பேட்டு பருத்திச் சேலைகள்"],
["35", "சேலம் - சேலம் பருத்திச் சேலைகள்"],
["36", "மதுரை - லுங்கிகள், வேட்டிகள், துண்டுகள்"],
["37", "பரமக்குடி - பருத்திச் சேலைகள், ஆர்ட்சில்க் சேலைகள், பம்பர், சில்க் காட்டன் சேலைகள்"],
["38", "சத்தீஸ்கர் - பட்டு மற்றும் பருத்திச் சேலைகள்"],
["39", "ஹரியானா - பருத்திச் சேலைகள், சர்ட்டிங், பெட்ஷீட்ஸ்"],
["40", "கோயம்புத்தூர் - நெகமம் பருத்திச் சேலைகள்"],
["41", "திருச்சிராப்பள்ளி - உறையூர் சேலைகள், மணமேடு சேலைகள்"],
["42", "மணிப்பூர் - மொயாங் பி சேலைகள், சில்க் துப்பட்டா, பருத்தி கோட்"],
["43", "தோடா - ஷால், மப்ளர், ஸ்டோல், பர்ஸ்"],
["44", "மத்திய பிரதேஷ் - சந்தேரி காட்டன், சில்க் சேலைகள்"],
["45", "கர்நாடகா - ஜிப்பா (குர்தா), டாப்ஸ், காட்டன் சட்டைகள், டவல்ஸ், கைக்குட்டைகள்"],
["46,47", "Co-optex - பட்டு மற்றும் பருத்திச் சேலைகள்"],
["48,49", "காஞ்சிபுரம் - பட்டுச் சேலைகள்"],
["50", "காஞ்சிபுரம் - பட்டுச் சேலைகள்"],
["51", "திருபுவனம் - பட்டு சேலைகள்"],
["52", "Billing Stall"]
];
// Create table
function loadStalls() {
const tbody = document.getElementById("stallBody");
tbody.innerHTML = "";
stalls.forEach((stall, index) => {
const savedQty =
localStorage.getItem("stall_qty_" + index) || "";
const savedAmount =
localStorage.getItem("stall_amount_" + index) || "";
const row = document.createElement("tr");
row.setAttribute("data-stall", stall[0]);
row.setAttribute("data-name", stall[1]);
row.innerHTML = `
<td>${stall[0]}</td>
<td class="stall-name">
${stall[1]}
</td>
<td>
<input
type="number"
min="0"
class="sales-input quantity"
value="${savedQty}"
data-index="${index}"
placeholder="0"
oninput="saveData(${index})"
>
</td>
<td>
<input
type="number"
min="0"
step="0.01"
class="sales-input amount"
value="${savedAmount}"
data-index="${index}"
placeholder="₹ 0"
oninput="saveData(${index})"
>
</td>
`;
tbody.appendChild(row);
});
calculateTotal();
}
// Save data
function saveData(index) {
const qtyInput =
document.querySelector(
`.quantity[data-index="${index}"]`
);
const amountInput =
document.querySelector(
`.amount[data-index="${index}"]`
);
localStorage.setItem(
"stall_qty_" + index,
qtyInput.value
);
localStorage.setItem(
"stall_amount_" + index,
amountInput.value
);
calculateTotal();
document.getElementById("saveStatus").innerText =
"✓ Saved automatically";
}
// Calculate totals
function calculateTotal() {
let totalQty = 0;
let totalAmount = 0;
document.querySelectorAll(".quantity").forEach(input => {
totalQty += Number(input.value) || 0;
});
document.querySelectorAll(".amount").forEach(input => {
totalAmount += Number(input.value) || 0;
});
document.getElementById("totalQty").innerText =
totalQty.toLocaleString("en-IN");
document.getElementById("totalAmount").innerText =
"₹" + totalAmount.toLocaleString("en-IN", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
document.getElementById("footerQty").innerText =
totalQty.toLocaleString("en-IN");
document.getElementById("footerAmount").innerText =
"₹" + totalAmount.toLocaleString("en-IN", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
}
// Search stalls
function searchStalls() {
const search =
document.getElementById("searchBox")
.value
.toLowerCase();
document.querySelectorAll("#stallBody tr")
.forEach(row => {
const stall =
row.getAttribute("data-stall")
.toLowerCase();
const name =
row.getAttribute("data-name")
.toLowerCase();
if (
stall.includes(search) ||
name.includes(search)
) {
row.style.display = "";
} else {
row.style.display = "none";
}
});
}
// Clear all data
function clearData() {
const confirmClear =
confirm(
"Are you sure you want to clear all sales data?"
);
if (!confirmClear) return;
stalls.forEach((stall, index) => {
localStorage.removeItem("stall_qty_" + index);
localStorage.removeItem("stall_amount_" + index);
});
loadStalls();
document.getElementById("saveStatus").innerText =
"✓ All data cleared";
}
// Export CSV
function exportCSV() {
let csv =
"Stall No,Stall Name Tamil,Sales Quantity,Sales Amount\n";
stalls.forEach((stall, index) => {
const qty =
localStorage.getItem(
"stall_qty_" + index
) || "0";
const amount =
localStorage.getItem(
"stall_amount_" + index
) || "0";
csv +=
`"${stall[0]}","${stall[1].replace(/"/g, '""')}","${qty}","${amount}"\n`;
});
const totalQty =
document.getElementById("totalQty").innerText;
const totalAmount =
document.getElementById("totalAmount").innerText;
csv +=
`\n"TOTAL","","${totalQty}","${totalAmount}"\n`;
const blob =
new Blob(
["\uFEFF" + csv],
{ type: "text/csv;charset=utf-8;" }
);
const url =
URL.createObjectURL(blob);
const link =
document.createElement("a");
link.href = url;
link.download =
"Stall_Sales_Data.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
// Start
loadStalls();
</scr
</body>
</html>
