Attendance Register \u2014 Tulasee Vanam & Vishnu Guest House<\/title>\r\n <style>\r\n :root{\r\n --bg:#f6f8fb;\r\n --card:#ffffff;\r\n --accent:#1366d6;\r\n --muted:#6c7a89;\r\n --present-border:#0a662a;\r\n --absent-border:#c62828;\r\n --present-bg:#e6f7ea;\r\n --absent-bg:#fff5f5;\r\n --grid-border:#e2e8f0;\r\n }\r\n body{\r\n font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n margin:0;\r\n background:var(--bg);\r\n color:#111;\r\n padding:0;\r\n -webkit-font-smoothing:antialiased;\r\n }\r\n .container{ max-width:1100px; margin:0 auto; padding:18px; }\r\n\r\n h1{ font-size:20px; margin:0 0 6px; }\r\n p.lead{ margin:0 0 14px; color:var(--muted); }\r\n\r\n .card{\r\n background:var(--card);\r\n border-radius:10px;\r\n padding:14px;\r\n box-shadow:0 2px 6px rgba(15,25,40,0.06);\r\n margin-bottom:16px;\r\n }\r\n\r\n \/* Attendance table *\/\r\n .grid-wrap{ overflow:auto; }\r\n table.att {\r\n border-collapse: collapse;\r\n width:100%;\r\n min-width:1020px;\r\n }\r\n table.att th, table.att td {\r\n border:1px solid var(--grid-border);\r\n padding:6px 8px;\r\n text-align:center;\r\n font-size:13px;\r\n vertical-align:middle;\r\n white-space:nowrap;\r\n }\r\n th.name-col, td.name {\r\n position:sticky; left:0;\r\n background:#fff;\r\n font-weight:600;\r\n text-align:left;\r\n min-width:200px;\r\n z-index:2;\r\n }\r\n td.day-cell { cursor:pointer; user-select:none; padding:10px 6px; width:36px; }\r\n td.day-cell .tick {\r\n width:18px; height:18px;\r\n display:inline-block;\r\n border-radius:4px;\r\n border:2px solid var(--absent-border);\r\n background:transparent;\r\n }\r\n td.day-cell.present { background:var(--present-bg); }\r\n td.day-cell.present .tick { border-color:var(--present-border); background:var(--present-border); }\r\n td.day-cell.absent { background:var(--absent-bg); }\r\n td.day-cell.absent .tick { border-color:var(--absent-border); background:transparent; }\r\n\r\n .controls { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }\r\n .btn {\r\n background:var(--accent); color:#fff; border:none; padding:8px 12px;\r\n border-radius:8px; cursor:pointer; font-weight:600;\r\n }\r\n .btn.secondary{ background:#7b8aa6; }\r\n .note { color:var(--muted); font-size:13px; margin-top:6px; }\r\n\r\n \/* Summary *\/\r\n .summary { overflow:auto; margin-top:12px; }\r\n .summary table { border-collapse:collapse; width:100%; min-width:820px; }\r\n .summary th, .summary td { border:1px solid var(--grid-border); padding:6px; text-align:center; }\r\n .summary th.name { text-align:left; font-weight:700; padding-left:12px; min-width:180px; }\r\n .summary td.present { background:var(--present-bg); border:2px solid var(--present-border); }\r\n .summary td.absent { background:var(--absent-bg); border:2px solid var(--absent-border); color:var(--muted); }\r\n\r\n \/* Login screen *\/\r\n #loginScreen {\r\n position:fixed; top:0; left:0; right:0; bottom:0;\r\n background:#f5f6fa;\r\n display:flex; align-items:center; justify-content:center;\r\n z-index:100;\r\n }\r\n #loginBox {\r\n background:#fff; padding:24px; border-radius:10px;\r\n box-shadow:0 4px 10px rgba(0,0,0,0.12);\r\n text-align:center;\r\n width:320px;\r\n }\r\n #loginBox h2{ margin:0 0 12px; }\r\n #loginBox input{ width:100%; padding:8px; margin-bottom:12px; border-radius:6px; border:1px solid #ccc; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"loginScreen\">\r\n <div id=\"loginBox\">\r\n <h2>Enter Password<\/h2>\r\n <input type=\"password\" id=\"passwordInput\" placeholder=\"Enter PIN\" \/>\r\n <button class=\"btn\" id=\"loginBtn\">Unlock<\/button>\r\n <div class=\"note\">PIN is required to access attendance register<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"mainApp\" style=\"display:none;\">\r\n <div class=\"container\">\r\n <h1>Tulasee Vanam & Vishnu Guest House \u2014 Attendance<\/h1>\r\n <p class=\"lead\">Tick the box for Present. Submit to view summary and salary payable. Unchecked = Absent.<\/p>\r\n\r\n <div class=\"card\">\r\n <strong>Staff \/ Housekeeping<\/strong>\r\n <div class=\"note\">Dates: 1 to 31. Salary shown on the right (monthly). Payable calculated on Submit.<\/div>\r\n\r\n <div class=\"grid-wrap\" style=\"margin-top:12px;\">\r\n <table class=\"att\" id=\"attendanceTable\">\r\n <thead>\r\n <tr>\r\n <th class=\"name-col\">Name<\/th>\r\n \r\n <\/tr>\r\n <\/thead>\r\n <tbody><\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div class=\"controls\">\r\n <label style=\"display:flex;align-items:center;gap:8px;\">\r\n <span style=\"font-size:13px;color:var(--muted)\">Month<\/span>\r\n <select id=\"monthSelect\" style=\"padding:6px;border-radius:6px;border:1px solid #d6dbe8;\">\r\n <option>January<\/option><option>February<\/option><option>March<\/option>\r\n <option>April<\/option><option>May<\/option><option>June<\/option>\r\n <option selected>July<\/option><option>August<\/option><option>September<\/option>\r\n <option>October<\/option><option>November<\/option><option>December<\/option>\r\n <\/select>\r\n <\/label>\r\n <button class=\"btn\" id=\"submitBtn\">Submit<\/button>\r\n <button class=\"btn secondary\" id=\"resetBtn\">Reset Grid<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <strong>Submitted Attendance Summary<\/strong>\r\n <div id=\"summaryArea\" class=\"summary\">\r\n <div class=\"note\">No submission yet. Fill the grid above and press Submit.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ---- Password Protection ----\r\n const correctPIN = \"9689\";\r\n const loginBtn = document.getElementById('loginBtn');\r\n loginBtn.addEventListener('click', () => {\r\n const val = document.getElementById('passwordInput').value.trim();\r\n if(val === correctPIN){\r\n document.getElementById('loginScreen').style.display='none';\r\n document.getElementById('mainApp').style.display='block';\r\n } else {\r\n alert(\"Incorrect PIN!\");\r\n }\r\n });\r\n\r\n \/\/ ---- Attendance + Salary Logic ----\r\n \/\/ staff with monthly salaries (as requested)\r\n const staffData = [\r\n { name: \"Rajamma Maid\", salaryMonthly: 6000 },\r\n { name: \"Manjula Maid\", salaryMonthly: 12000 },\r\n { name: \"Rambabu Maid\", salaryMonthly: 8000 },\r\n { name: \"Sridevi Maid\", salaryMonthly: 6000 }\r\n ];\r\n\r\n const DAYS = 31; \/\/ if you want to change month length, update this value\r\n const table = document.getElementById('attendanceTable');\r\n const tbody = table.querySelector('tbody');\r\n const submitBtn = document.getElementById('submitBtn');\r\n const resetBtn = document.getElementById('resetBtn');\r\n const summaryArea = document.getElementById('summaryArea');\r\n\r\n \/\/ build header (days + Salary column)\r\n (function buildHeader(){\r\n const theadRow = table.querySelector('thead tr');\r\n for(let d=1; d<=DAYS; d++){\r\n const th = document.createElement('th');\r\n th.textContent = d;\r\n theadRow.appendChild(th);\r\n }\r\n const thCount = document.createElement('th'); thCount.textContent = \"Days Present\";\r\n const thSalary = document.createElement('th'); thSalary.textContent = \"Salary (\u20b9\/month)\";\r\n theadRow.appendChild(thCount);\r\n theadRow.appendChild(thSalary);\r\n })();\r\n\r\n \/\/ build rows with salary column\r\n (function buildRows(){\r\n staffData.forEach((s, rowIdx) => {\r\n const tr = document.createElement('tr');\r\n\r\n \/\/ name\r\n const tdName = document.createElement('td');\r\n tdName.className='name';\r\n tdName.textContent = s.name;\r\n tr.appendChild(tdName);\r\n\r\n \/\/ day cells\r\n for(let d=1; d<=DAYS; d++){\r\n const td = document.createElement('td');\r\n td.className='day-cell absent';\r\n td.dataset.day = d;\r\n td.dataset.row = rowIdx;\r\n const tick = document.createElement('span');\r\n tick.className='tick';\r\n td.appendChild(tick);\r\n\r\n \/\/ toggle on click\r\n td.addEventListener('click', () => {\r\n td.classList.toggle('present');\r\n td.classList.toggle('absent');\r\n updateRowCount(tr);\r\n });\r\n\r\n tr.appendChild(td);\r\n }\r\n\r\n \/\/ days present count\r\n const tdCount = document.createElement('td');\r\n tdCount.className='count';\r\n tdCount.textContent='0';\r\n tr.appendChild(tdCount);\r\n\r\n \/\/ salary display cell\r\n const tdSalary = document.createElement('td');\r\n tdSalary.className='salary';\r\n tdSalary.textContent = s.salaryMonthly.toString();\r\n tr.appendChild(tdSalary);\r\n\r\n tbody.appendChild(tr);\r\n });\r\n })();\r\n\r\n \/\/ update days present count for a row\r\n function updateRowCount(tr){\r\n const presentCount = tr.querySelectorAll('.day-cell.present').length;\r\n tr.querySelector('.count').textContent = presentCount;\r\n }\r\n\r\n \/\/ Reset\r\n resetBtn.addEventListener('click', () => {\r\n if(!confirm('Reset all ticks to Absent?')) return;\r\n tbody.querySelectorAll('td.day-cell').forEach(td=>{\r\n td.classList.remove('present'); td.classList.add('absent');\r\n });\r\n tbody.querySelectorAll('.count').forEach(c=>c.textContent='0');\r\n summaryArea.innerHTML = '<div class=\"note\">Grid reset. No submission yet.<\/div>';\r\n });\r\n\r\n \/\/ Submit -> render summary with salary division and payable totals\r\n submitBtn.addEventListener('click', () => {\r\n const month = document.getElementById('monthSelect').value;\r\n const rows = [];\r\n tbody.querySelectorAll('tr').forEach((tr, idx) => {\r\n const name = tr.querySelector('.name').innerText.trim();\r\n const marks = [];\r\n let presentCount = 0;\r\n tr.querySelectorAll('.day-cell').forEach(td => {\r\n if(td.classList.contains('present')) { marks.push('P'); presentCount++; }\r\n else marks.push('A');\r\n });\r\n const salaryMonthly = Number(tr.querySelector('.salary').innerText || 0);\r\n \/\/ per-day rate: divide by DAYS, rounded to 4 decimals for internal, display 2 decimals\r\n const perDayRaw = salaryMonthly \/ DAYS;\r\n const perDay = Math.round(perDayRaw * 10000) \/ 10000; \/\/ keep extra precision\r\n const payableRaw = perDay * presentCount;\r\n const payable = Math.round(payableRaw * 100) \/ 100; \/\/ round to 2 decimals for currency display\r\n rows.push({ name, marks, presentCount, salaryMonthly, perDay, payable });\r\n });\r\n\r\n renderSummary(rows, month);\r\n });\r\n\r\n function renderSummary(rows, month){\r\n \/\/ Build table\r\n const div = document.createElement('div');\r\n div.style.marginBottom = '8px';\r\n div.innerHTML = `<div style=\"margin-bottom:8px;\"><strong>Month:<\/strong> ${month} | Dates: 1 to ${DAYS}<\/div>`;\r\n\r\n const tbl = document.createElement('table');\r\n tbl.style.width = '100%';\r\n\r\n \/\/ header\r\n const thead = document.createElement('thead');\r\n const headerRow = document.createElement('tr');\r\n const thName = document.createElement('th'); thName.className='name'; thName.textContent='Name';\r\n headerRow.appendChild(thName);\r\n for(let d=1; d<=DAYS; d++){\r\n const th = document.createElement('th'); th.textContent = d; headerRow.appendChild(th);\r\n }\r\n const thCount = document.createElement('th'); thCount.textContent='Days Present';\r\n const thPerDay = document.createElement('th'); thPerDay.textContent='Per-day (\u20b9)';\r\n const thSalary = document.createElement('th'); thSalary.textContent='Salary (\u20b9\/month)';\r\n const thPay = document.createElement('th'); thPay.textContent='Payable (\u20b9)';\r\n headerRow.appendChild(thCount);\r\n headerRow.appendChild(thPerDay);\r\n headerRow.appendChild(thSalary);\r\n headerRow.appendChild(thPay);\r\n thead.appendChild(headerRow);\r\n tbl.appendChild(thead);\r\n\r\n \/\/ body\r\n const tbodySum = document.createElement('tbody');\r\n let grandTotal = 0;\r\n rows.forEach(r => {\r\n const tr = document.createElement('tr');\r\n const tdName = document.createElement('td'); tdName.className='name'; tdName.textContent = r.name;\r\n tr.appendChild(tdName);\r\n\r\n r.marks.forEach(m => {\r\n const td = document.createElement('td');\r\n td.textContent = (m === 'P') ? 'P' : 'A';\r\n td.className = (m === 'P') ? 'present' : 'absent';\r\n tr.appendChild(td);\r\n });\r\n\r\n const tdCount = document.createElement('td'); tdCount.textContent = r.presentCount;\r\n const tdPerDay = document.createElement('td'); tdPerDay.textContent = r.perDay.toFixed(2);\r\n const tdSalary = document.createElement('td'); tdSalary.textContent = r.salaryMonthly.toFixed(2);\r\n const tdPay = document.createElement('td'); tdPay.textContent = r.payable.toFixed(2);\r\n tr.appendChild(tdCount);\r\n tr.appendChild(tdPerDay);\r\n tr.appendChild(tdSalary);\r\n tr.appendChild(tdPay);\r\n\r\n tbodySum.appendChild(tr);\r\n grandTotal += r.payable;\r\n });\r\n\r\n tbl.appendChild(tbodySum);\r\n\r\n \/\/ footer totals\r\n const tfoot = document.createElement('tfoot');\r\n const footRow = document.createElement('tr');\r\n const tdLabel = document.createElement('td');\r\n tdLabel.colSpan = DAYS + 1;\r\n tdLabel.style.textAlign = 'right';\r\n tdLabel.innerHTML = `<strong>Grand Total Payable (\u20b9):<\/strong>`;\r\n const tdPerDayEmpty = document.createElement('td'); tdPerDayEmpty.textContent = '';\r\n const tdSalaryEmpty = document.createElement('td'); tdSalaryEmpty.textContent = '';\r\n const tdGrand = document.createElement('td'); tdGrand.textContent = grandTotal.toFixed(2); tdGrand.style.fontWeight='700';\r\n footRow.appendChild(tdLabel);\r\n footRow.appendChild(tdPerDayEmpty);\r\n footRow.appendChild(tdSalaryEmpty);\r\n footRow.appendChild(tdGrand);\r\n tfoot.appendChild(footRow);\r\n tbl.appendChild(tfoot);\r\n\r\n div.appendChild(tbl);\r\n summaryArea.innerHTML = '';\r\n summaryArea.appendChild(div);\r\n }\r\n\r\n \/\/ initial counts set to 0 (already default) but ensure accessibility\r\n tbody.querySelectorAll('tr').forEach(tr => updateRowCount(tr)); \/\/ if any\r\n\r\n \/\/ If you want to support different month lengths, change DAYS variable at top (and salaries\/day will recalc accordingly)\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Attendance Register \u2014 Tulasee Vanam & Vishnu Guest House Enter Password Unlock PIN is required to access attendance register Tulasee Vanam & Vishnu Guest House \u2014 Attendance Tick the box for Present. Submit to view summary and salary payable. Unchecked = Absent. Staff \/ Housekeeping Dates: 1 to 31. Salary shown on the right (monthly). Payable calculated on Submit. Name Month JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember Submit Reset Grid Submitted Attendance Summary No submission yet. Fill the grid above and press Submit.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11700","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/11700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/comments?post=11700"}],"version-history":[{"count":13,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/11700\/revisions"}],"predecessor-version":[{"id":11715,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/11700\/revisions\/11715"}],"wp:attachment":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/media?parent=11700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Attendance Register \u2014 Tulasee Vanam & Vishnu Guest House<\/title>\r\n <style>\r\n :root{\r\n --bg:#f6f8fb;\r\n --card:#ffffff;\r\n --accent:#1366d6;\r\n --muted:#6c7a89;\r\n --present-border:#0a662a;\r\n --absent-border:#c62828;\r\n --present-bg:#e6f7ea;\r\n --absent-bg:#fff5f5;\r\n --grid-border:#e2e8f0;\r\n }\r\n body{\r\n font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n margin:0;\r\n background:var(--bg);\r\n color:#111;\r\n padding:0;\r\n -webkit-font-smoothing:antialiased;\r\n }\r\n .container{ max-width:1100px; margin:0 auto; padding:18px; }\r\n\r\n h1{ font-size:20px; margin:0 0 6px; }\r\n p.lead{ margin:0 0 14px; color:var(--muted); }\r\n\r\n .card{\r\n background:var(--card);\r\n border-radius:10px;\r\n padding:14px;\r\n box-shadow:0 2px 6px rgba(15,25,40,0.06);\r\n margin-bottom:16px;\r\n }\r\n\r\n \/* Attendance table *\/\r\n .grid-wrap{ overflow:auto; }\r\n table.att {\r\n border-collapse: collapse;\r\n width:100%;\r\n min-width:1020px;\r\n }\r\n table.att th, table.att td {\r\n border:1px solid var(--grid-border);\r\n padding:6px 8px;\r\n text-align:center;\r\n font-size:13px;\r\n vertical-align:middle;\r\n white-space:nowrap;\r\n }\r\n th.name-col, td.name {\r\n position:sticky; left:0;\r\n background:#fff;\r\n font-weight:600;\r\n text-align:left;\r\n min-width:200px;\r\n z-index:2;\r\n }\r\n td.day-cell { cursor:pointer; user-select:none; padding:10px 6px; width:36px; }\r\n td.day-cell .tick {\r\n width:18px; height:18px;\r\n display:inline-block;\r\n border-radius:4px;\r\n border:2px solid var(--absent-border);\r\n background:transparent;\r\n }\r\n td.day-cell.present { background:var(--present-bg); }\r\n td.day-cell.present .tick { border-color:var(--present-border); background:var(--present-border); }\r\n td.day-cell.absent { background:var(--absent-bg); }\r\n td.day-cell.absent .tick { border-color:var(--absent-border); background:transparent; }\r\n\r\n .controls { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }\r\n .btn {\r\n background:var(--accent); color:#fff; border:none; padding:8px 12px;\r\n border-radius:8px; cursor:pointer; font-weight:600;\r\n }\r\n .btn.secondary{ background:#7b8aa6; }\r\n .note { color:var(--muted); font-size:13px; margin-top:6px; }\r\n\r\n \/* Summary *\/\r\n .summary { overflow:auto; margin-top:12px; }\r\n .summary table { border-collapse:collapse; width:100%; min-width:820px; }\r\n .summary th, .summary td { border:1px solid var(--grid-border); padding:6px; text-align:center; }\r\n .summary th.name { text-align:left; font-weight:700; padding-left:12px; min-width:180px; }\r\n .summary td.present { background:var(--present-bg); border:2px solid var(--present-border); }\r\n .summary td.absent { background:var(--absent-bg); border:2px solid var(--absent-border); color:var(--muted); }\r\n\r\n \/* Login screen *\/\r\n #loginScreen {\r\n position:fixed; top:0; left:0; right:0; bottom:0;\r\n background:#f5f6fa;\r\n display:flex; align-items:center; justify-content:center;\r\n z-index:100;\r\n }\r\n #loginBox {\r\n background:#fff; padding:24px; border-radius:10px;\r\n box-shadow:0 4px 10px rgba(0,0,0,0.12);\r\n text-align:center;\r\n width:320px;\r\n }\r\n #loginBox h2{ margin:0 0 12px; }\r\n #loginBox input{ width:100%; padding:8px; margin-bottom:12px; border-radius:6px; border:1px solid #ccc; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div id=\"loginScreen\">\r\n <div id=\"loginBox\">\r\n <h2>Enter Password<\/h2>\r\n <input type=\"password\" id=\"passwordInput\" placeholder=\"Enter PIN\" \/>\r\n <button class=\"btn\" id=\"loginBtn\">Unlock<\/button>\r\n <div class=\"note\">PIN is required to access attendance register<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"mainApp\" style=\"display:none;\">\r\n <div class=\"container\">\r\n <h1>Tulasee Vanam & Vishnu Guest House \u2014 Attendance<\/h1>\r\n <p class=\"lead\">Tick the box for Present. Submit to view summary and salary payable. Unchecked = Absent.<\/p>\r\n\r\n <div class=\"card\">\r\n <strong>Staff \/ Housekeeping<\/strong>\r\n <div class=\"note\">Dates: 1 to 31. Salary shown on the right (monthly). Payable calculated on Submit.<\/div>\r\n\r\n <div class=\"grid-wrap\" style=\"margin-top:12px;\">\r\n <table class=\"att\" id=\"attendanceTable\">\r\n <thead>\r\n <tr>\r\n <th class=\"name-col\">Name<\/th>\r\n \r\n <\/tr>\r\n <\/thead>\r\n <tbody><\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div class=\"controls\">\r\n <label style=\"display:flex;align-items:center;gap:8px;\">\r\n <span style=\"font-size:13px;color:var(--muted)\">Month<\/span>\r\n <select id=\"monthSelect\" style=\"padding:6px;border-radius:6px;border:1px solid #d6dbe8;\">\r\n <option>January<\/option><option>February<\/option><option>March<\/option>\r\n <option>April<\/option><option>May<\/option><option>June<\/option>\r\n <option selected>July<\/option><option>August<\/option><option>September<\/option>\r\n <option>October<\/option><option>November<\/option><option>December<\/option>\r\n <\/select>\r\n <\/label>\r\n <button class=\"btn\" id=\"submitBtn\">Submit<\/button>\r\n <button class=\"btn secondary\" id=\"resetBtn\">Reset Grid<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <strong>Submitted Attendance Summary<\/strong>\r\n <div id=\"summaryArea\" class=\"summary\">\r\n <div class=\"note\">No submission yet. Fill the grid above and press Submit.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ---- Password Protection ----\r\n const correctPIN = \"9689\";\r\n const loginBtn = document.getElementById('loginBtn');\r\n loginBtn.addEventListener('click', () => {\r\n const val = document.getElementById('passwordInput').value.trim();\r\n if(val === correctPIN){\r\n document.getElementById('loginScreen').style.display='none';\r\n document.getElementById('mainApp').style.display='block';\r\n } else {\r\n alert(\"Incorrect PIN!\");\r\n }\r\n });\r\n\r\n \/\/ ---- Attendance + Salary Logic ----\r\n \/\/ staff with monthly salaries (as requested)\r\n const staffData = [\r\n { name: \"Rajamma Maid\", salaryMonthly: 6000 },\r\n { name: \"Manjula Maid\", salaryMonthly: 12000 },\r\n { name: \"Rambabu Maid\", salaryMonthly: 8000 },\r\n { name: \"Sridevi Maid\", salaryMonthly: 6000 }\r\n ];\r\n\r\n const DAYS = 31; \/\/ if you want to change month length, update this value\r\n const table = document.getElementById('attendanceTable');\r\n const tbody = table.querySelector('tbody');\r\n const submitBtn = document.getElementById('submitBtn');\r\n const resetBtn = document.getElementById('resetBtn');\r\n const summaryArea = document.getElementById('summaryArea');\r\n\r\n \/\/ build header (days + Salary column)\r\n (function buildHeader(){\r\n const theadRow = table.querySelector('thead tr');\r\n for(let d=1; d<=DAYS; d++){\r\n const th = document.createElement('th');\r\n th.textContent = d;\r\n theadRow.appendChild(th);\r\n }\r\n const thCount = document.createElement('th'); thCount.textContent = \"Days Present\";\r\n const thSalary = document.createElement('th'); thSalary.textContent = \"Salary (\u20b9\/month)\";\r\n theadRow.appendChild(thCount);\r\n theadRow.appendChild(thSalary);\r\n })();\r\n\r\n \/\/ build rows with salary column\r\n (function buildRows(){\r\n staffData.forEach((s, rowIdx) => {\r\n const tr = document.createElement('tr');\r\n\r\n \/\/ name\r\n const tdName = document.createElement('td');\r\n tdName.className='name';\r\n tdName.textContent = s.name;\r\n tr.appendChild(tdName);\r\n\r\n \/\/ day cells\r\n for(let d=1; d<=DAYS; d++){\r\n const td = document.createElement('td');\r\n td.className='day-cell absent';\r\n td.dataset.day = d;\r\n td.dataset.row = rowIdx;\r\n const tick = document.createElement('span');\r\n tick.className='tick';\r\n td.appendChild(tick);\r\n\r\n \/\/ toggle on click\r\n td.addEventListener('click', () => {\r\n td.classList.toggle('present');\r\n td.classList.toggle('absent');\r\n updateRowCount(tr);\r\n });\r\n\r\n tr.appendChild(td);\r\n }\r\n\r\n \/\/ days present count\r\n const tdCount = document.createElement('td');\r\n tdCount.className='count';\r\n tdCount.textContent='0';\r\n tr.appendChild(tdCount);\r\n\r\n \/\/ salary display cell\r\n const tdSalary = document.createElement('td');\r\n tdSalary.className='salary';\r\n tdSalary.textContent = s.salaryMonthly.toString();\r\n tr.appendChild(tdSalary);\r\n\r\n tbody.appendChild(tr);\r\n });\r\n })();\r\n\r\n \/\/ update days present count for a row\r\n function updateRowCount(tr){\r\n const presentCount = tr.querySelectorAll('.day-cell.present').length;\r\n tr.querySelector('.count').textContent = presentCount;\r\n }\r\n\r\n \/\/ Reset\r\n resetBtn.addEventListener('click', () => {\r\n if(!confirm('Reset all ticks to Absent?')) return;\r\n tbody.querySelectorAll('td.day-cell').forEach(td=>{\r\n td.classList.remove('present'); td.classList.add('absent');\r\n });\r\n tbody.querySelectorAll('.count').forEach(c=>c.textContent='0');\r\n summaryArea.innerHTML = '<div class=\"note\">Grid reset. No submission yet.<\/div>';\r\n });\r\n\r\n \/\/ Submit -> render summary with salary division and payable totals\r\n submitBtn.addEventListener('click', () => {\r\n const month = document.getElementById('monthSelect').value;\r\n const rows = [];\r\n tbody.querySelectorAll('tr').forEach((tr, idx) => {\r\n const name = tr.querySelector('.name').innerText.trim();\r\n const marks = [];\r\n let presentCount = 0;\r\n tr.querySelectorAll('.day-cell').forEach(td => {\r\n if(td.classList.contains('present')) { marks.push('P'); presentCount++; }\r\n else marks.push('A');\r\n });\r\n const salaryMonthly = Number(tr.querySelector('.salary').innerText || 0);\r\n \/\/ per-day rate: divide by DAYS, rounded to 4 decimals for internal, display 2 decimals\r\n const perDayRaw = salaryMonthly \/ DAYS;\r\n const perDay = Math.round(perDayRaw * 10000) \/ 10000; \/\/ keep extra precision\r\n const payableRaw = perDay * presentCount;\r\n const payable = Math.round(payableRaw * 100) \/ 100; \/\/ round to 2 decimals for currency display\r\n rows.push({ name, marks, presentCount, salaryMonthly, perDay, payable });\r\n });\r\n\r\n renderSummary(rows, month);\r\n });\r\n\r\n function renderSummary(rows, month){\r\n \/\/ Build table\r\n const div = document.createElement('div');\r\n div.style.marginBottom = '8px';\r\n div.innerHTML = `<div style=\"margin-bottom:8px;\"><strong>Month:<\/strong> ${month} | Dates: 1 to ${DAYS}<\/div>`;\r\n\r\n const tbl = document.createElement('table');\r\n tbl.style.width = '100%';\r\n\r\n \/\/ header\r\n const thead = document.createElement('thead');\r\n const headerRow = document.createElement('tr');\r\n const thName = document.createElement('th'); thName.className='name'; thName.textContent='Name';\r\n headerRow.appendChild(thName);\r\n for(let d=1; d<=DAYS; d++){\r\n const th = document.createElement('th'); th.textContent = d; headerRow.appendChild(th);\r\n }\r\n const thCount = document.createElement('th'); thCount.textContent='Days Present';\r\n const thPerDay = document.createElement('th'); thPerDay.textContent='Per-day (\u20b9)';\r\n const thSalary = document.createElement('th'); thSalary.textContent='Salary (\u20b9\/month)';\r\n const thPay = document.createElement('th'); thPay.textContent='Payable (\u20b9)';\r\n headerRow.appendChild(thCount);\r\n headerRow.appendChild(thPerDay);\r\n headerRow.appendChild(thSalary);\r\n headerRow.appendChild(thPay);\r\n thead.appendChild(headerRow);\r\n tbl.appendChild(thead);\r\n\r\n \/\/ body\r\n const tbodySum = document.createElement('tbody');\r\n let grandTotal = 0;\r\n rows.forEach(r => {\r\n const tr = document.createElement('tr');\r\n const tdName = document.createElement('td'); tdName.className='name'; tdName.textContent = r.name;\r\n tr.appendChild(tdName);\r\n\r\n r.marks.forEach(m => {\r\n const td = document.createElement('td');\r\n td.textContent = (m === 'P') ? 'P' : 'A';\r\n td.className = (m === 'P') ? 'present' : 'absent';\r\n tr.appendChild(td);\r\n });\r\n\r\n const tdCount = document.createElement('td'); tdCount.textContent = r.presentCount;\r\n const tdPerDay = document.createElement('td'); tdPerDay.textContent = r.perDay.toFixed(2);\r\n const tdSalary = document.createElement('td'); tdSalary.textContent = r.salaryMonthly.toFixed(2);\r\n const tdPay = document.createElement('td'); tdPay.textContent = r.payable.toFixed(2);\r\n tr.appendChild(tdCount);\r\n tr.appendChild(tdPerDay);\r\n tr.appendChild(tdSalary);\r\n tr.appendChild(tdPay);\r\n\r\n tbodySum.appendChild(tr);\r\n grandTotal += r.payable;\r\n });\r\n\r\n tbl.appendChild(tbodySum);\r\n\r\n \/\/ footer totals\r\n const tfoot = document.createElement('tfoot');\r\n const footRow = document.createElement('tr');\r\n const tdLabel = document.createElement('td');\r\n tdLabel.colSpan = DAYS + 1;\r\n tdLabel.style.textAlign = 'right';\r\n tdLabel.innerHTML = `<strong>Grand Total Payable (\u20b9):<\/strong>`;\r\n const tdPerDayEmpty = document.createElement('td'); tdPerDayEmpty.textContent = '';\r\n const tdSalaryEmpty = document.createElement('td'); tdSalaryEmpty.textContent = '';\r\n const tdGrand = document.createElement('td'); tdGrand.textContent = grandTotal.toFixed(2); tdGrand.style.fontWeight='700';\r\n footRow.appendChild(tdLabel);\r\n footRow.appendChild(tdPerDayEmpty);\r\n footRow.appendChild(tdSalaryEmpty);\r\n footRow.appendChild(tdGrand);\r\n tfoot.appendChild(footRow);\r\n tbl.appendChild(tfoot);\r\n\r\n div.appendChild(tbl);\r\n summaryArea.innerHTML = '';\r\n summaryArea.appendChild(div);\r\n }\r\n\r\n \/\/ initial counts set to 0 (already default) but ensure accessibility\r\n tbody.querySelectorAll('tr').forEach(tr => updateRowCount(tr)); \/\/ if any\r\n\r\n \/\/ If you want to support different month lengths, change DAYS variable at top (and salaries\/day will recalc accordingly)\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Attendance Register \u2014 Tulasee Vanam & Vishnu Guest House Enter Password Unlock PIN is required to access attendance register Tulasee Vanam & Vishnu Guest House \u2014 Attendance Tick the box for Present. Submit to view summary and salary payable. Unchecked = Absent. Staff \/ Housekeeping Dates: 1 to 31. Salary shown on the right (monthly). Payable calculated on Submit. Name Month JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember Submit Reset Grid Submitted Attendance Summary No submission yet. Fill the grid above and press Submit.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11700","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/11700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/comments?post=11700"}],"version-history":[{"count":13,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/11700\/revisions"}],"predecessor-version":[{"id":11715,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/11700\/revisions\/11715"}],"wp:attachment":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/media?parent=11700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}