Girls Hostel Application<\/title>\r\n <style>\r\n :root{\r\n --bg:#fffaf0;\r\n --card:#ffffff;\r\n --border:#e7e2d8;\r\n --text:#1f2937;\r\n --muted:#6b7280;\r\n --accent:#2a7c6f;\r\n --accent2:#f59e0b;\r\n --field:#fff7bf; \/* light yellow *\/\r\n --shadow: 0 10px 26px rgba(18,38,63,.08);\r\n --radius:16px;\r\n }\r\n *{box-sizing:border-box}\r\n body{\r\n margin:0;\r\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n color:var(--text);\r\n background:linear-gradient(180deg,#fffaf0,#fff);\r\n }\r\n .wrap{max-width:1100px;margin:18px auto;padding:14px}\r\n .card{\r\n background:var(--card);\r\n border:1px solid var(--border);\r\n border-radius:var(--radius);\r\n box-shadow:var(--shadow);\r\n overflow:hidden;\r\n }\r\n header{\r\n padding:16px 18px;\r\n background:linear-gradient(90deg,#fff,#fff7e6);\r\n border-bottom:1px solid var(--border);\r\n display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;\r\n }\r\n h1{margin:0;font-size:22px;line-height:1.2}\r\n .sub{margin:2px 0 0;color:var(--muted);font-size:13px}\r\n .grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:12px;\r\n padding:16px 18px;\r\n }\r\n @media (max-width:900px){.grid{grid-template-columns:1fr}}\r\n .section{\r\n border:1px solid var(--border);\r\n border-radius:14px;\r\n padding:14px;\r\n background:#fff;\r\n }\r\n .section h2{margin:0 0 10px;font-size:16px}\r\n .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}\r\n @media (max-width:600px){.row{grid-template-columns:1fr}}\r\n label{display:block;font-size:13px;color:#374151;margin:10px 0 6px}\r\n input[type=\"text\"], input[type=\"number\"], select, textarea{\r\n width:100%;\r\n padding:11px 12px;\r\n border:1px solid var(--border);\r\n border-radius:12px;\r\n background:var(--field);\r\n outline:none;\r\n font-size:14px;\r\n }\r\n textarea{min-height:90px;resize:vertical}\r\n input:focus, select:focus, textarea:focus{\r\n border-color:#b7d7d2;\r\n box-shadow:0 0 0 3px rgba(42,124,111,.12);\r\n }\r\n .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}\r\n button{\r\n border:1px solid var(--border);\r\n background:#ffffff;\r\n padding:10px 12px;\r\n border-radius:12px;\r\n font-weight:700;\r\n cursor:pointer;\r\n }\r\n button.primary{\r\n background:linear-gradient(180deg,#e9fff9,#d7fbf1);\r\n border-color:#b7e9dc;\r\n color:#0f4b42;\r\n }\r\n button.warn{\r\n background:linear-gradient(180deg,#fff6e6,#ffedd5);\r\n border-color:#f3d2a5;\r\n color:#7c4a0f;\r\n }\r\n button:active{transform:translateY(1px)}\r\n .meta{\r\n margin-top:10px;\r\n font-size:12px;\r\n color:var(--muted);\r\n padding:10px 12px;\r\n border:1px dashed var(--border);\r\n border-radius:12px;\r\n background:#fffdf6;\r\n }\r\n .pill{\r\n display:inline-flex;\r\n padding:6px 10px;\r\n border-radius:999px;\r\n background:#fff3d6;\r\n border:1px solid #f2d9a8;\r\n font-size:12px;\r\n color:#7a4b11;\r\n font-weight:700;\r\n gap:6px;align-items:center;\r\n }\r\n\r\n .tableWrap{padding:0 18px 18px}\r\n .toolbar{\r\n display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;\r\n padding:12px 18px;border-top:1px solid var(--border);background:#fffdf8;\r\n }\r\n .toolLeft{display:flex;gap:10px;flex-wrap:wrap;align-items:center}\r\n .toolRight{display:flex;gap:10px;flex-wrap:wrap;align-items:center}\r\n .small{font-size:12px;color:var(--muted)}\r\n .lockBox{\r\n display:flex;gap:8px;align-items:center;flex-wrap:wrap;\r\n padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;\r\n }\r\n .lockBox input{width:140px}\r\n table{width:100%;border-collapse:separate;border-spacing:0}\r\n th, td{\r\n text-align:left;\r\n padding:10px 10px;\r\n border-bottom:1px solid var(--border);\r\n vertical-align:top;\r\n font-size:13px;\r\n white-space:nowrap; \/* neat one-line table *\/\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n max-width:240px;\r\n }\r\n th{\r\n font-size:12px;\r\n color:#374151;\r\n background:#fff9ef;\r\n position:sticky;top:0;z-index:1;\r\n }\r\n tr:hover td{background:#fffdf3}\r\n .tag{\r\n display:inline-flex;align-items:center;gap:6px;\r\n padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800;\r\n border:1px solid var(--border);background:#fff;\r\n }\r\n .tag.pub{border-color:#b7e9dc;background:#eefcf8;color:#0f4b42}\r\n .tag.priv{border-color:#f3d2a5;background:#fff5e6;color:#7c4a0f}\r\n .tag.pending{border-color:#d7d8df;background:#f7f7fb;color:#4b5563}\r\n .muted{color:var(--muted)}\r\n .hidden{display:none !important}\r\n .note{\r\n padding:12px 18px 0;\r\n color:var(--muted);\r\n font-size:12px;\r\n }\r\n .split{\r\n display:flex;gap:12px;flex-wrap:wrap;align-items:center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n <div class=\"card\">\r\n <header>\r\n <div>\r\n <h1>GIRLS HOSTEL APPLICATION<\/h1>\r\n <div class=\"sub\">Check-out \/ Check-in \/ Request \u2022 Auto date & time \u2022 Admin approval (Public \/ Private)<\/div>\r\n <\/div>\r\n <div class=\"split\">\r\n <span class=\"pill\" id=\"voicePill\">\ud83d\udd0a Voice: ON<\/span>\r\n <button class=\"warn\" id=\"toggleVoiceBtn\" type=\"button\">Toggle Voice<\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"grid\">\r\n \r\n <div class=\"section\">\r\n <h2>Student Details<\/h2>\r\n <div class=\"row\">\r\n <div>\r\n <label for=\"studentName\">Enter Name<\/label>\r\n <input id=\"studentName\" type=\"text\" placeholder=\"Student full name\" autocomplete=\"name\" \/>\r\n <\/div>\r\n <div>\r\n <label for=\"studentId\">Enter Student ID No.<\/label>\r\n <input id=\"studentId\" type=\"text\" placeholder=\"e.g., 24A1XXXX\" autocomplete=\"off\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"meta\" id=\"studentMeta\">\r\n <b>Tip:<\/b> First enter Name and Student ID. Then use <b>Check-Out<\/b> \/ <b>Check-In<\/b> \/ <b>Request<\/b>.\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <h2>Check-Out<\/h2>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"checkoutBtn\" type=\"button\">Check-Out<\/button>\r\n <\/div>\r\n\r\n <label for=\"checkoutDT\">Auto Date & Time (Check-Out)<\/label>\r\n <input id=\"checkoutDT\" type=\"text\" placeholder=\"Auto filled on Check-Out\" readonly \/>\r\n\r\n <label for=\"purposeText\">Purpose<\/label>\r\n <input id=\"purposeText\" type=\"text\" placeholder=\"Short purpose (optional)\" \/>\r\n\r\n <label for=\"purposeDD\">Select Purpose Type<\/label>\r\n <select id=\"purposeDD\">\r\n <option value=\"\">-- Select --<\/option>\r\n <option>College<\/option>\r\n <option>Home Town<\/option>\r\n <option>Shopping<\/option>\r\n <option>Hospital<\/option>\r\n <option>Relatives House<\/option>\r\n <option>Others<\/option>\r\n <\/select>\r\n\r\n <div id=\"otherPurposeWrap\" class=\"hidden\">\r\n <label for=\"otherPurpose\">Others (Text Box)<\/label>\r\n <input id=\"otherPurpose\" type=\"text\" placeholder=\"Type other purpose\" \/>\r\n <\/div>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"submitCheckout\" type=\"button\">Submit Check-Out<\/button>\r\n <\/div>\r\n\r\n <div class=\"small muted\">On submit, it will be saved as <b>Pending<\/b> until Admin approves to Public\/Private.<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <h2>Check-In<\/h2>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"checkinBtn\" type=\"button\">Check-In<\/button>\r\n <\/div>\r\n\r\n <label for=\"checkinDT\">Auto Date & Time (Check-In)<\/label>\r\n <input id=\"checkinDT\" type=\"text\" placeholder=\"Auto filled on Check-In\" readonly \/>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"submitCheckin\" type=\"button\">Submit Check-In<\/button>\r\n <\/div>\r\n\r\n <div class=\"small muted\">No options required. Just Check-In hostel.<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <h2>Request<\/h2>\r\n <label for=\"requestText\">Request<\/label>\r\n <textarea id=\"requestText\" placeholder=\"Type your request...\"><\/textarea>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"submitRequest\" type=\"button\">Submit Request<\/button>\r\n <\/div>\r\n\r\n <div class=\"small muted\">Saved as Pending until Admin approves to Public\/Private.<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <h2>Admin Approval<\/h2>\r\n <div class=\"lockBox\">\r\n <b>Admin Lock:<\/b>\r\n <input id=\"adminPin\" type=\"number\" inputmode=\"numeric\" placeholder=\"Enter PIN\" \/>\r\n <button class=\"warn\" id=\"unlockBtn\" type=\"button\">Unlock<\/button>\r\n <button id=\"lockBtn\" type=\"button\">Lock<\/button>\r\n <\/div>\r\n <div class=\"note\">\r\n After unlock, each pending record can be approved to <b>Public List<\/b> or <b>Private List<\/b>.\r\n <\/div>\r\n <div class=\"btns\" style=\"margin-top:10px\">\r\n <button id=\"exportBtn\" type=\"button\">Export JSON<\/button>\r\n <button id=\"clearAllBtn\" type=\"button\">Clear All Data<\/button>\r\n <\/div>\r\n <div class=\"small muted\">\r\n Data is stored in your browser (localStorage). Keep PIN private.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"toolbar\">\r\n <div class=\"toolLeft\">\r\n <b>Records<\/b>\r\n <span class=\"small\" id=\"counts\">Loading\u2026<\/span>\r\n <\/div>\r\n <div class=\"toolRight\">\r\n <label class=\"small\" for=\"viewFilter\">View:<\/label>\r\n <select id=\"viewFilter\">\r\n <option value=\"all\">All<\/option>\r\n <option value=\"pending\">Pending<\/option>\r\n <option value=\"public\">Public<\/option>\r\n <option value=\"private\">Private<\/option>\r\n <\/select>\r\n <input id=\"searchBox\" type=\"text\" placeholder=\"Search name \/ ID \/ type...\" style=\"width:240px\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tableWrap\">\r\n <div style=\"overflow:auto;border:1px solid var(--border);border-radius:14px\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th style=\"min-width:120px\">Type<\/th>\r\n <th style=\"min-width:160px\">Name<\/th>\r\n <th style=\"min-width:140px\">Student ID<\/th>\r\n <th style=\"min-width:210px\">Date & Time<\/th>\r\n <th style=\"min-width:240px\">Details<\/th>\r\n <th style=\"min-width:120px\">Status<\/th>\r\n <th style=\"min-width:260px\">Admin Actions<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"recordsTbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div class=\"note\">\r\n \u201cAfter approval records will be display after submit button\u201d \u2014 your submitted entry appears immediately as <b>Pending<\/b>, then moves to <b>Public<\/b> or <b>Private<\/b> after Admin approval.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/***********************\r\n * Simple Local App\r\n ***********************\/\r\n const STORAGE_KEY = \"girls_hostel_app_records_v1\";\r\n const ADMIN_PIN = \"1528\";\r\n\r\n const $ = (id) => document.getElementById(id);\r\n\r\n const els = {\r\n voicePill: $(\"voicePill\"),\r\n toggleVoiceBtn: $(\"toggleVoiceBtn\"),\r\n studentName: $(\"studentName\"),\r\n studentId: $(\"studentId\"),\r\n\r\n checkoutBtn: $(\"checkoutBtn\"),\r\n checkoutDT: $(\"checkoutDT\"),\r\n purposeText: $(\"purposeText\"),\r\n purposeDD: $(\"purposeDD\"),\r\n otherPurposeWrap: $(\"otherPurposeWrap\"),\r\n otherPurpose: $(\"otherPurpose\"),\r\n submitCheckout: $(\"submitCheckout\"),\r\n\r\n checkinBtn: $(\"checkinBtn\"),\r\n checkinDT: $(\"checkinDT\"),\r\n submitCheckin: $(\"submitCheckin\"),\r\n\r\n requestText: $(\"requestText\"),\r\n submitRequest: $(\"submitRequest\"),\r\n\r\n adminPin: $(\"adminPin\"),\r\n unlockBtn: $(\"unlockBtn\"),\r\n lockBtn: $(\"lockBtn\"),\r\n exportBtn: $(\"exportBtn\"),\r\n clearAllBtn: $(\"clearAllBtn\"),\r\n\r\n viewFilter: $(\"viewFilter\"),\r\n searchBox: $(\"searchBox\"),\r\n tbody: $(\"recordsTbody\"),\r\n counts: $(\"counts\"),\r\n };\r\n\r\n let isAdminUnlocked = false;\r\n let voiceEnabled = true;\r\n\r\n function nowISTString(){\r\n \/\/ Uses user's device time (your phone\/PC). Displays in dd-mm-yyyy hh:mm:ss format.\r\n const d = new Date();\r\n const pad = (n)=> String(n).padStart(2,\"0\");\r\n const dd = pad(d.getDate());\r\n const mm = pad(d.getMonth()+1);\r\n const yyyy = d.getFullYear();\r\n const hh = pad(d.getHours());\r\n const mi = pad(d.getMinutes());\r\n const ss = pad(d.getSeconds());\r\n return `${dd}-${mm}-${yyyy} ${hh}:${mi}:${ss}`;\r\n }\r\n\r\n function loadRecords(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n const arr = raw ? JSON.parse(raw) : [];\r\n return Array.isArray(arr) ? arr : [];\r\n }catch(e){\r\n return [];\r\n }\r\n }\r\n function saveRecords(records){\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(records));\r\n }\r\n\r\n function speak(text){\r\n if(!voiceEnabled) return;\r\n if(!(\"speechSynthesis\" in window)) return;\r\n\r\n \/\/ Cancel any queued speech for quick field guidance\r\n window.speechSynthesis.cancel();\r\n\r\n const u = new SpeechSynthesisUtterance(text);\r\n u.rate = 0.95;\r\n u.pitch = 1.0;\r\n u.volume = 1.0;\r\n\r\n \/\/ Try to pick an Indian English voice if available\r\n const voices = window.speechSynthesis.getVoices() || [];\r\n const preferred = voices.find(v =>\r\n \/en\/i.test(v.lang) && (\/IN\/i.test(v.lang) || \/India\/i.test(v.name))\r\n ) || voices.find(v => \/en\/i.test(v.lang)) || null;\r\n\r\n if(preferred) u.voice = preferred;\r\n\r\n window.speechSynthesis.speak(u);\r\n }\r\n\r\n \/\/ Ensure voices list is available in some browsers\r\n window.speechSynthesis?.addEventListener?.(\"voiceschanged\", () => {});\r\n\r\n function playNotedSaved(){\r\n speak(\"Noted and Saved\");\r\n }\r\n\r\n function setVoiceUI(){\r\n els.voicePill.textContent = voiceEnabled ? \"\ud83d\udd0a Voice: ON\" : \"\ud83d\udd07 Voice: OFF\";\r\n }\r\n\r\n function requireStudentBasics(){\r\n const name = els.studentName.value.trim();\r\n const sid = els.studentId.value.trim();\r\n if(!name){\r\n speak(\"Please enter student name\");\r\n els.studentName.focus();\r\n return null;\r\n }\r\n if(!sid){\r\n speak(\"Please enter student I D number\");\r\n els.studentId.focus();\r\n return null;\r\n }\r\n return { name, sid };\r\n }\r\n\r\n function createRecord({type, datetime, details}){\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n\r\n const records = loadRecords();\r\n const rec = {\r\n id: crypto.randomUUID ? crypto.randomUUID() : String(Date.now()) + \"_\" + Math.random().toString(16).slice(2),\r\n type, \/\/ CHECKOUT \/ CHECKIN \/ REQUEST\r\n name: basics.name,\r\n studentId: basics.sid,\r\n datetime,\r\n details,\r\n status: \"pending\", \/\/ pending\/public\/private\r\n createdAt: Date.now()\r\n };\r\n records.unshift(rec);\r\n saveRecords(records);\r\n render();\r\n playNotedSaved();\r\n }\r\n\r\n function statusTag(status){\r\n if(status === \"public\") return `<span class=\"tag pub\">Public<\/span>`;\r\n if(status === \"private\") return `<span class=\"tag priv\">Private<\/span>`;\r\n return `<span class=\"tag pending\">Pending<\/span>`;\r\n }\r\n\r\n function updateCounts(records){\r\n const total = records.length;\r\n const p = records.filter(r=>r.status===\"pending\").length;\r\n const pub = records.filter(r=>r.status===\"public\").length;\r\n const pri = records.filter(r=>r.status===\"private\").length;\r\n els.counts.textContent = `Total: ${total} \u2022 Pending: ${p} \u2022 Public: ${pub} \u2022 Private: ${pri} \u2022 Admin: ${isAdminUnlocked ? \"Unlocked\" : \"Locked\"}`;\r\n }\r\n\r\n function getFiltered(records){\r\n const view = els.viewFilter.value;\r\n const q = els.searchBox.value.trim().toLowerCase();\r\n\r\n return records.filter(r=>{\r\n const viewOk = (view===\"all\") ? true : (r.status===view);\r\n const qOk = !q ? true : (\r\n (r.name||\"\").toLowerCase().includes(q) ||\r\n (r.studentId||\"\").toLowerCase().includes(q) ||\r\n (r.type||\"\").toLowerCase().includes(q) ||\r\n (r.details||\"\").toLowerCase().includes(q)\r\n );\r\n return viewOk && qOk;\r\n });\r\n }\r\n\r\n function render(){\r\n const records = loadRecords();\r\n updateCounts(records);\r\n\r\n const shown = getFiltered(records);\r\n els.tbody.innerHTML = shown.map(r=>{\r\n const adminActions = isAdminUnlocked ? `\r\n <button class=\"primary\" data-act=\"approvePublic\" data-id=\"${r.id}\">Approve Public<\/button>\r\n <button class=\"warn\" data-act=\"approvePrivate\" data-id=\"${r.id}\">Approve Private<\/button>\r\n <button data-act=\"delete\" data-id=\"${r.id}\">Delete<\/button>\r\n ` : `<span class=\"muted\">Locked<\/span>`;\r\n\r\n return `\r\n <tr>\r\n <td title=\"${r.type}\"><b>${r.type}<\/b><\/td>\r\n <td title=\"${escapeHtml(r.name)}\">${escapeHtml(r.name)}<\/td>\r\n <td title=\"${escapeHtml(r.studentId)}\">${escapeHtml(r.studentId)}<\/td>\r\n <td title=\"${escapeHtml(r.datetime)}\">${escapeHtml(r.datetime)}<\/td>\r\n <td title=\"${escapeHtml(r.details)}\">${escapeHtml(r.details || \"-\")}<\/td>\r\n <td>${statusTag(r.status)}<\/td>\r\n <td>${adminActions}<\/td>\r\n <\/tr>\r\n `;\r\n }).join(\"\");\r\n\r\n \/\/ Attach actions\r\n els.tbody.querySelectorAll(\"button[data-act]\").forEach(btn=>{\r\n btn.addEventListener(\"click\", ()=>{\r\n const act = btn.getAttribute(\"data-act\");\r\n const id = btn.getAttribute(\"data-id\");\r\n handleAdminAction(act, id);\r\n });\r\n });\r\n }\r\n\r\n function handleAdminAction(act, id){\r\n if(!isAdminUnlocked){\r\n speak(\"Admin is locked\");\r\n return;\r\n }\r\n const records = loadRecords();\r\n const idx = records.findIndex(r=>r.id===id);\r\n if(idx<0) return;\r\n\r\n if(act===\"approvePublic\"){\r\n records[idx].status = \"public\";\r\n saveRecords(records);\r\n speak(\"Approved to public list\");\r\n render();\r\n }\r\n if(act===\"approvePrivate\"){\r\n records[idx].status = \"private\";\r\n saveRecords(records);\r\n speak(\"Approved to private list\");\r\n render();\r\n }\r\n if(act===\"delete\"){\r\n records.splice(idx,1);\r\n saveRecords(records);\r\n speak(\"Deleted\");\r\n render();\r\n }\r\n }\r\n\r\n function escapeHtml(s){\r\n return String(s ?? \"\")\r\n .replaceAll(\"&\",\"&\")\r\n .replaceAll(\"<\",\"<\")\r\n .replaceAll(\">\",\">\")\r\n .replaceAll('\"',\""\")\r\n .replaceAll(\"'\",\"'\");\r\n }\r\n\r\n \/***********************\r\n * Field voice prompts\r\n ***********************\/\r\n function attachFieldVoice(el, text){\r\n el.addEventListener(\"focus\", ()=> speak(text));\r\n el.addEventListener(\"click\", ()=> speak(text));\r\n }\r\n\r\n attachFieldVoice(els.studentName, \"Enter student name\");\r\n attachFieldVoice(els.studentId, \"Enter student I D number\");\r\n\r\n attachFieldVoice(els.purposeText, \"Enter purpose\");\r\n attachFieldVoice(els.purposeDD, \"Select purpose type\");\r\n attachFieldVoice(els.otherPurpose, \"Type other purpose\");\r\n\r\n attachFieldVoice(els.requestText, \"Type your request\");\r\n\r\n \/***********************\r\n * Check-Out flow\r\n ***********************\/\r\n els.purposeDD.addEventListener(\"change\", ()=>{\r\n const v = els.purposeDD.value;\r\n if(v === \"Others\"){\r\n els.otherPurposeWrap.classList.remove(\"hidden\");\r\n setTimeout(()=>els.otherPurpose.focus(), 50);\r\n }else{\r\n els.otherPurposeWrap.classList.add(\"hidden\");\r\n els.otherPurpose.value = \"\";\r\n }\r\n });\r\n\r\n els.checkoutBtn.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n const dt = nowISTString();\r\n els.checkoutDT.value = dt;\r\n speak(\"Check out time recorded\");\r\n });\r\n\r\n els.submitCheckout.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n\r\n const dt = els.checkoutDT.value.trim() || nowISTString();\r\n els.checkoutDT.value = dt;\r\n\r\n const purpose = els.purposeText.value.trim();\r\n const dd = els.purposeDD.value.trim();\r\n const other = els.otherPurpose.value.trim();\r\n\r\n let details = [];\r\n if(purpose) details.push(`Purpose: ${purpose}`);\r\n if(dd) details.push(`Type: ${dd}`);\r\n if(dd === \"Others\" && other) details.push(`Other: ${other}`);\r\n\r\n createRecord({\r\n type: \"CHECKOUT\",\r\n datetime: dt,\r\n details: details.length ? details.join(\" | \") : \"\u2014\"\r\n });\r\n\r\n \/\/ reset (keep name\/id)\r\n els.purposeText.value = \"\";\r\n els.purposeDD.value = \"\";\r\n els.otherPurpose.value = \"\";\r\n els.otherPurposeWrap.classList.add(\"hidden\");\r\n \/\/ keep checkoutDT visible\r\n });\r\n\r\n \/***********************\r\n * Check-In flow\r\n ***********************\/\r\n els.checkinBtn.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n const dt = nowISTString();\r\n els.checkinDT.value = dt;\r\n speak(\"Check in time recorded\");\r\n });\r\n\r\n els.submitCheckin.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n\r\n const dt = els.checkinDT.value.trim() || nowISTString();\r\n els.checkinDT.value = dt;\r\n\r\n createRecord({\r\n type: \"CHECKIN\",\r\n datetime: dt,\r\n details: \"Hostel check in\"\r\n });\r\n });\r\n\r\n \/***********************\r\n * Request flow\r\n ***********************\/\r\n els.submitRequest.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n\r\n const text = els.requestText.value.trim();\r\n if(!text){\r\n speak(\"Please type your request\");\r\n els.requestText.focus();\r\n return;\r\n }\r\n const dt = nowISTString();\r\n\r\n createRecord({\r\n type: \"REQUEST\",\r\n datetime: dt,\r\n details: text\r\n });\r\n\r\n els.requestText.value = \"\";\r\n });\r\n\r\n \/***********************\r\n * Admin lock\r\n ***********************\/\r\n els.unlockBtn.addEventListener(\"click\", ()=>{\r\n const pin = String(els.adminPin.value || \"\").trim();\r\n if(pin === ADMIN_PIN){\r\n isAdminUnlocked = true;\r\n speak(\"Admin unlocked\");\r\n render();\r\n }else{\r\n speak(\"Wrong pin\");\r\n }\r\n });\r\n\r\n els.lockBtn.addEventListener(\"click\", ()=>{\r\n isAdminUnlocked = false;\r\n els.adminPin.value = \"\";\r\n speak(\"Admin locked\");\r\n render();\r\n });\r\n\r\n \/***********************\r\n * Export \/ Clear\r\n ***********************\/\r\n els.exportBtn.addEventListener(\"click\", ()=>{\r\n const records = loadRecords();\r\n const blob = new Blob([JSON.stringify(records, null, 2)], {type:\"application\/json\"});\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement(\"a\");\r\n a.href = url;\r\n a.download = \"girls_hostel_records.json\";\r\n document.body.appendChild(a);\r\n a.click();\r\n a.remove();\r\n URL.revokeObjectURL(url);\r\n speak(\"Exported\");\r\n });\r\n\r\n els.clearAllBtn.addEventListener(\"click\", ()=>{\r\n if(!isAdminUnlocked){\r\n speak(\"Unlock admin to clear all data\");\r\n return;\r\n }\r\n const ok = confirm(\"Clear all saved records? This cannot be undone.\");\r\n if(!ok) return;\r\n localStorage.removeItem(STORAGE_KEY);\r\n speak(\"All data cleared\");\r\n render();\r\n });\r\n\r\n \/***********************\r\n * Filters\r\n ***********************\/\r\n els.viewFilter.addEventListener(\"change\", render);\r\n els.searchBox.addEventListener(\"input\", render);\r\n\r\n \/***********************\r\n * Voice toggle\r\n ***********************\/\r\n els.toggleVoiceBtn.addEventListener(\"click\", ()=>{\r\n voiceEnabled = !voiceEnabled;\r\n setVoiceUI();\r\n speak(voiceEnabled ? \"Voice on\" : \"Voice off\");\r\n });\r\n setVoiceUI();\r\n\r\n \/\/ Initial render\r\n render();\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>Girls Hostel Application GIRLS HOSTEL APPLICATION Check-out \/ Check-in \/ Request \u2022 Auto date & time \u2022 Admin approval (Public \/ Private) \ud83d\udd0a Voice: ON Toggle Voice Student Details Enter Name Enter Student ID No. Tip: First enter Name and Student ID. Then use Check-Out \/ Check-In \/ Request. Check-Out Check-Out Auto Date & Time (Check-Out) Purpose Select Purpose Type — Select —CollegeHome TownShoppingHospitalRelatives HouseOthers Others (Text Box) Submit Check-Out On submit, it will be saved as Pending until Admin approves to Public\/Private. Check-In Check-In Auto Date & Time (Check-In) Submit Check-In No options required. Just Check-In hostel. Request Request Submit Request Saved as Pending until Admin approves to Public\/Private. Admin Approval Admin Lock: Unlock Lock After unlock, each pending record can be approved to Public List or Private List. Export JSON Clear All Data Data is stored in your browser (localStorage). Keep PIN private. Records Loading\u2026 View: AllPendingPublicPrivate Type Name Student ID Date & Time Details Status Admin Actions \u201cAfter approval records will be display after submit button\u201d \u2014 your submitted entry appears immediately as Pending, then moves to Public or Private after Admin approval.<\/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-12588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/12588","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=12588"}],"version-history":[{"count":4,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/12588\/revisions"}],"predecessor-version":[{"id":12593,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/12588\/revisions\/12593"}],"wp:attachment":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/media?parent=12588"}],"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 Girls Hostel Application<\/title>\r\n <style>\r\n :root{\r\n --bg:#fffaf0;\r\n --card:#ffffff;\r\n --border:#e7e2d8;\r\n --text:#1f2937;\r\n --muted:#6b7280;\r\n --accent:#2a7c6f;\r\n --accent2:#f59e0b;\r\n --field:#fff7bf; \/* light yellow *\/\r\n --shadow: 0 10px 26px rgba(18,38,63,.08);\r\n --radius:16px;\r\n }\r\n *{box-sizing:border-box}\r\n body{\r\n margin:0;\r\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n color:var(--text);\r\n background:linear-gradient(180deg,#fffaf0,#fff);\r\n }\r\n .wrap{max-width:1100px;margin:18px auto;padding:14px}\r\n .card{\r\n background:var(--card);\r\n border:1px solid var(--border);\r\n border-radius:var(--radius);\r\n box-shadow:var(--shadow);\r\n overflow:hidden;\r\n }\r\n header{\r\n padding:16px 18px;\r\n background:linear-gradient(90deg,#fff,#fff7e6);\r\n border-bottom:1px solid var(--border);\r\n display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;\r\n }\r\n h1{margin:0;font-size:22px;line-height:1.2}\r\n .sub{margin:2px 0 0;color:var(--muted);font-size:13px}\r\n .grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:12px;\r\n padding:16px 18px;\r\n }\r\n @media (max-width:900px){.grid{grid-template-columns:1fr}}\r\n .section{\r\n border:1px solid var(--border);\r\n border-radius:14px;\r\n padding:14px;\r\n background:#fff;\r\n }\r\n .section h2{margin:0 0 10px;font-size:16px}\r\n .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}\r\n @media (max-width:600px){.row{grid-template-columns:1fr}}\r\n label{display:block;font-size:13px;color:#374151;margin:10px 0 6px}\r\n input[type=\"text\"], input[type=\"number\"], select, textarea{\r\n width:100%;\r\n padding:11px 12px;\r\n border:1px solid var(--border);\r\n border-radius:12px;\r\n background:var(--field);\r\n outline:none;\r\n font-size:14px;\r\n }\r\n textarea{min-height:90px;resize:vertical}\r\n input:focus, select:focus, textarea:focus{\r\n border-color:#b7d7d2;\r\n box-shadow:0 0 0 3px rgba(42,124,111,.12);\r\n }\r\n .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}\r\n button{\r\n border:1px solid var(--border);\r\n background:#ffffff;\r\n padding:10px 12px;\r\n border-radius:12px;\r\n font-weight:700;\r\n cursor:pointer;\r\n }\r\n button.primary{\r\n background:linear-gradient(180deg,#e9fff9,#d7fbf1);\r\n border-color:#b7e9dc;\r\n color:#0f4b42;\r\n }\r\n button.warn{\r\n background:linear-gradient(180deg,#fff6e6,#ffedd5);\r\n border-color:#f3d2a5;\r\n color:#7c4a0f;\r\n }\r\n button:active{transform:translateY(1px)}\r\n .meta{\r\n margin-top:10px;\r\n font-size:12px;\r\n color:var(--muted);\r\n padding:10px 12px;\r\n border:1px dashed var(--border);\r\n border-radius:12px;\r\n background:#fffdf6;\r\n }\r\n .pill{\r\n display:inline-flex;\r\n padding:6px 10px;\r\n border-radius:999px;\r\n background:#fff3d6;\r\n border:1px solid #f2d9a8;\r\n font-size:12px;\r\n color:#7a4b11;\r\n font-weight:700;\r\n gap:6px;align-items:center;\r\n }\r\n\r\n .tableWrap{padding:0 18px 18px}\r\n .toolbar{\r\n display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;\r\n padding:12px 18px;border-top:1px solid var(--border);background:#fffdf8;\r\n }\r\n .toolLeft{display:flex;gap:10px;flex-wrap:wrap;align-items:center}\r\n .toolRight{display:flex;gap:10px;flex-wrap:wrap;align-items:center}\r\n .small{font-size:12px;color:var(--muted)}\r\n .lockBox{\r\n display:flex;gap:8px;align-items:center;flex-wrap:wrap;\r\n padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;\r\n }\r\n .lockBox input{width:140px}\r\n table{width:100%;border-collapse:separate;border-spacing:0}\r\n th, td{\r\n text-align:left;\r\n padding:10px 10px;\r\n border-bottom:1px solid var(--border);\r\n vertical-align:top;\r\n font-size:13px;\r\n white-space:nowrap; \/* neat one-line table *\/\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n max-width:240px;\r\n }\r\n th{\r\n font-size:12px;\r\n color:#374151;\r\n background:#fff9ef;\r\n position:sticky;top:0;z-index:1;\r\n }\r\n tr:hover td{background:#fffdf3}\r\n .tag{\r\n display:inline-flex;align-items:center;gap:6px;\r\n padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800;\r\n border:1px solid var(--border);background:#fff;\r\n }\r\n .tag.pub{border-color:#b7e9dc;background:#eefcf8;color:#0f4b42}\r\n .tag.priv{border-color:#f3d2a5;background:#fff5e6;color:#7c4a0f}\r\n .tag.pending{border-color:#d7d8df;background:#f7f7fb;color:#4b5563}\r\n .muted{color:var(--muted)}\r\n .hidden{display:none !important}\r\n .note{\r\n padding:12px 18px 0;\r\n color:var(--muted);\r\n font-size:12px;\r\n }\r\n .split{\r\n display:flex;gap:12px;flex-wrap:wrap;align-items:center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n <div class=\"card\">\r\n <header>\r\n <div>\r\n <h1>GIRLS HOSTEL APPLICATION<\/h1>\r\n <div class=\"sub\">Check-out \/ Check-in \/ Request \u2022 Auto date & time \u2022 Admin approval (Public \/ Private)<\/div>\r\n <\/div>\r\n <div class=\"split\">\r\n <span class=\"pill\" id=\"voicePill\">\ud83d\udd0a Voice: ON<\/span>\r\n <button class=\"warn\" id=\"toggleVoiceBtn\" type=\"button\">Toggle Voice<\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"grid\">\r\n \r\n <div class=\"section\">\r\n <h2>Student Details<\/h2>\r\n <div class=\"row\">\r\n <div>\r\n <label for=\"studentName\">Enter Name<\/label>\r\n <input id=\"studentName\" type=\"text\" placeholder=\"Student full name\" autocomplete=\"name\" \/>\r\n <\/div>\r\n <div>\r\n <label for=\"studentId\">Enter Student ID No.<\/label>\r\n <input id=\"studentId\" type=\"text\" placeholder=\"e.g., 24A1XXXX\" autocomplete=\"off\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"meta\" id=\"studentMeta\">\r\n <b>Tip:<\/b> First enter Name and Student ID. Then use <b>Check-Out<\/b> \/ <b>Check-In<\/b> \/ <b>Request<\/b>.\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <h2>Check-Out<\/h2>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"checkoutBtn\" type=\"button\">Check-Out<\/button>\r\n <\/div>\r\n\r\n <label for=\"checkoutDT\">Auto Date & Time (Check-Out)<\/label>\r\n <input id=\"checkoutDT\" type=\"text\" placeholder=\"Auto filled on Check-Out\" readonly \/>\r\n\r\n <label for=\"purposeText\">Purpose<\/label>\r\n <input id=\"purposeText\" type=\"text\" placeholder=\"Short purpose (optional)\" \/>\r\n\r\n <label for=\"purposeDD\">Select Purpose Type<\/label>\r\n <select id=\"purposeDD\">\r\n <option value=\"\">-- Select --<\/option>\r\n <option>College<\/option>\r\n <option>Home Town<\/option>\r\n <option>Shopping<\/option>\r\n <option>Hospital<\/option>\r\n <option>Relatives House<\/option>\r\n <option>Others<\/option>\r\n <\/select>\r\n\r\n <div id=\"otherPurposeWrap\" class=\"hidden\">\r\n <label for=\"otherPurpose\">Others (Text Box)<\/label>\r\n <input id=\"otherPurpose\" type=\"text\" placeholder=\"Type other purpose\" \/>\r\n <\/div>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"submitCheckout\" type=\"button\">Submit Check-Out<\/button>\r\n <\/div>\r\n\r\n <div class=\"small muted\">On submit, it will be saved as <b>Pending<\/b> until Admin approves to Public\/Private.<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <h2>Check-In<\/h2>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"checkinBtn\" type=\"button\">Check-In<\/button>\r\n <\/div>\r\n\r\n <label for=\"checkinDT\">Auto Date & Time (Check-In)<\/label>\r\n <input id=\"checkinDT\" type=\"text\" placeholder=\"Auto filled on Check-In\" readonly \/>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"submitCheckin\" type=\"button\">Submit Check-In<\/button>\r\n <\/div>\r\n\r\n <div class=\"small muted\">No options required. Just Check-In hostel.<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <h2>Request<\/h2>\r\n <label for=\"requestText\">Request<\/label>\r\n <textarea id=\"requestText\" placeholder=\"Type your request...\"><\/textarea>\r\n\r\n <div class=\"btns\">\r\n <button class=\"primary\" id=\"submitRequest\" type=\"button\">Submit Request<\/button>\r\n <\/div>\r\n\r\n <div class=\"small muted\">Saved as Pending until Admin approves to Public\/Private.<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <h2>Admin Approval<\/h2>\r\n <div class=\"lockBox\">\r\n <b>Admin Lock:<\/b>\r\n <input id=\"adminPin\" type=\"number\" inputmode=\"numeric\" placeholder=\"Enter PIN\" \/>\r\n <button class=\"warn\" id=\"unlockBtn\" type=\"button\">Unlock<\/button>\r\n <button id=\"lockBtn\" type=\"button\">Lock<\/button>\r\n <\/div>\r\n <div class=\"note\">\r\n After unlock, each pending record can be approved to <b>Public List<\/b> or <b>Private List<\/b>.\r\n <\/div>\r\n <div class=\"btns\" style=\"margin-top:10px\">\r\n <button id=\"exportBtn\" type=\"button\">Export JSON<\/button>\r\n <button id=\"clearAllBtn\" type=\"button\">Clear All Data<\/button>\r\n <\/div>\r\n <div class=\"small muted\">\r\n Data is stored in your browser (localStorage). Keep PIN private.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"toolbar\">\r\n <div class=\"toolLeft\">\r\n <b>Records<\/b>\r\n <span class=\"small\" id=\"counts\">Loading\u2026<\/span>\r\n <\/div>\r\n <div class=\"toolRight\">\r\n <label class=\"small\" for=\"viewFilter\">View:<\/label>\r\n <select id=\"viewFilter\">\r\n <option value=\"all\">All<\/option>\r\n <option value=\"pending\">Pending<\/option>\r\n <option value=\"public\">Public<\/option>\r\n <option value=\"private\">Private<\/option>\r\n <\/select>\r\n <input id=\"searchBox\" type=\"text\" placeholder=\"Search name \/ ID \/ type...\" style=\"width:240px\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tableWrap\">\r\n <div style=\"overflow:auto;border:1px solid var(--border);border-radius:14px\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th style=\"min-width:120px\">Type<\/th>\r\n <th style=\"min-width:160px\">Name<\/th>\r\n <th style=\"min-width:140px\">Student ID<\/th>\r\n <th style=\"min-width:210px\">Date & Time<\/th>\r\n <th style=\"min-width:240px\">Details<\/th>\r\n <th style=\"min-width:120px\">Status<\/th>\r\n <th style=\"min-width:260px\">Admin Actions<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"recordsTbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div class=\"note\">\r\n \u201cAfter approval records will be display after submit button\u201d \u2014 your submitted entry appears immediately as <b>Pending<\/b>, then moves to <b>Public<\/b> or <b>Private<\/b> after Admin approval.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/***********************\r\n * Simple Local App\r\n ***********************\/\r\n const STORAGE_KEY = \"girls_hostel_app_records_v1\";\r\n const ADMIN_PIN = \"1528\";\r\n\r\n const $ = (id) => document.getElementById(id);\r\n\r\n const els = {\r\n voicePill: $(\"voicePill\"),\r\n toggleVoiceBtn: $(\"toggleVoiceBtn\"),\r\n studentName: $(\"studentName\"),\r\n studentId: $(\"studentId\"),\r\n\r\n checkoutBtn: $(\"checkoutBtn\"),\r\n checkoutDT: $(\"checkoutDT\"),\r\n purposeText: $(\"purposeText\"),\r\n purposeDD: $(\"purposeDD\"),\r\n otherPurposeWrap: $(\"otherPurposeWrap\"),\r\n otherPurpose: $(\"otherPurpose\"),\r\n submitCheckout: $(\"submitCheckout\"),\r\n\r\n checkinBtn: $(\"checkinBtn\"),\r\n checkinDT: $(\"checkinDT\"),\r\n submitCheckin: $(\"submitCheckin\"),\r\n\r\n requestText: $(\"requestText\"),\r\n submitRequest: $(\"submitRequest\"),\r\n\r\n adminPin: $(\"adminPin\"),\r\n unlockBtn: $(\"unlockBtn\"),\r\n lockBtn: $(\"lockBtn\"),\r\n exportBtn: $(\"exportBtn\"),\r\n clearAllBtn: $(\"clearAllBtn\"),\r\n\r\n viewFilter: $(\"viewFilter\"),\r\n searchBox: $(\"searchBox\"),\r\n tbody: $(\"recordsTbody\"),\r\n counts: $(\"counts\"),\r\n };\r\n\r\n let isAdminUnlocked = false;\r\n let voiceEnabled = true;\r\n\r\n function nowISTString(){\r\n \/\/ Uses user's device time (your phone\/PC). Displays in dd-mm-yyyy hh:mm:ss format.\r\n const d = new Date();\r\n const pad = (n)=> String(n).padStart(2,\"0\");\r\n const dd = pad(d.getDate());\r\n const mm = pad(d.getMonth()+1);\r\n const yyyy = d.getFullYear();\r\n const hh = pad(d.getHours());\r\n const mi = pad(d.getMinutes());\r\n const ss = pad(d.getSeconds());\r\n return `${dd}-${mm}-${yyyy} ${hh}:${mi}:${ss}`;\r\n }\r\n\r\n function loadRecords(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n const arr = raw ? JSON.parse(raw) : [];\r\n return Array.isArray(arr) ? arr : [];\r\n }catch(e){\r\n return [];\r\n }\r\n }\r\n function saveRecords(records){\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(records));\r\n }\r\n\r\n function speak(text){\r\n if(!voiceEnabled) return;\r\n if(!(\"speechSynthesis\" in window)) return;\r\n\r\n \/\/ Cancel any queued speech for quick field guidance\r\n window.speechSynthesis.cancel();\r\n\r\n const u = new SpeechSynthesisUtterance(text);\r\n u.rate = 0.95;\r\n u.pitch = 1.0;\r\n u.volume = 1.0;\r\n\r\n \/\/ Try to pick an Indian English voice if available\r\n const voices = window.speechSynthesis.getVoices() || [];\r\n const preferred = voices.find(v =>\r\n \/en\/i.test(v.lang) && (\/IN\/i.test(v.lang) || \/India\/i.test(v.name))\r\n ) || voices.find(v => \/en\/i.test(v.lang)) || null;\r\n\r\n if(preferred) u.voice = preferred;\r\n\r\n window.speechSynthesis.speak(u);\r\n }\r\n\r\n \/\/ Ensure voices list is available in some browsers\r\n window.speechSynthesis?.addEventListener?.(\"voiceschanged\", () => {});\r\n\r\n function playNotedSaved(){\r\n speak(\"Noted and Saved\");\r\n }\r\n\r\n function setVoiceUI(){\r\n els.voicePill.textContent = voiceEnabled ? \"\ud83d\udd0a Voice: ON\" : \"\ud83d\udd07 Voice: OFF\";\r\n }\r\n\r\n function requireStudentBasics(){\r\n const name = els.studentName.value.trim();\r\n const sid = els.studentId.value.trim();\r\n if(!name){\r\n speak(\"Please enter student name\");\r\n els.studentName.focus();\r\n return null;\r\n }\r\n if(!sid){\r\n speak(\"Please enter student I D number\");\r\n els.studentId.focus();\r\n return null;\r\n }\r\n return { name, sid };\r\n }\r\n\r\n function createRecord({type, datetime, details}){\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n\r\n const records = loadRecords();\r\n const rec = {\r\n id: crypto.randomUUID ? crypto.randomUUID() : String(Date.now()) + \"_\" + Math.random().toString(16).slice(2),\r\n type, \/\/ CHECKOUT \/ CHECKIN \/ REQUEST\r\n name: basics.name,\r\n studentId: basics.sid,\r\n datetime,\r\n details,\r\n status: \"pending\", \/\/ pending\/public\/private\r\n createdAt: Date.now()\r\n };\r\n records.unshift(rec);\r\n saveRecords(records);\r\n render();\r\n playNotedSaved();\r\n }\r\n\r\n function statusTag(status){\r\n if(status === \"public\") return `<span class=\"tag pub\">Public<\/span>`;\r\n if(status === \"private\") return `<span class=\"tag priv\">Private<\/span>`;\r\n return `<span class=\"tag pending\">Pending<\/span>`;\r\n }\r\n\r\n function updateCounts(records){\r\n const total = records.length;\r\n const p = records.filter(r=>r.status===\"pending\").length;\r\n const pub = records.filter(r=>r.status===\"public\").length;\r\n const pri = records.filter(r=>r.status===\"private\").length;\r\n els.counts.textContent = `Total: ${total} \u2022 Pending: ${p} \u2022 Public: ${pub} \u2022 Private: ${pri} \u2022 Admin: ${isAdminUnlocked ? \"Unlocked\" : \"Locked\"}`;\r\n }\r\n\r\n function getFiltered(records){\r\n const view = els.viewFilter.value;\r\n const q = els.searchBox.value.trim().toLowerCase();\r\n\r\n return records.filter(r=>{\r\n const viewOk = (view===\"all\") ? true : (r.status===view);\r\n const qOk = !q ? true : (\r\n (r.name||\"\").toLowerCase().includes(q) ||\r\n (r.studentId||\"\").toLowerCase().includes(q) ||\r\n (r.type||\"\").toLowerCase().includes(q) ||\r\n (r.details||\"\").toLowerCase().includes(q)\r\n );\r\n return viewOk && qOk;\r\n });\r\n }\r\n\r\n function render(){\r\n const records = loadRecords();\r\n updateCounts(records);\r\n\r\n const shown = getFiltered(records);\r\n els.tbody.innerHTML = shown.map(r=>{\r\n const adminActions = isAdminUnlocked ? `\r\n <button class=\"primary\" data-act=\"approvePublic\" data-id=\"${r.id}\">Approve Public<\/button>\r\n <button class=\"warn\" data-act=\"approvePrivate\" data-id=\"${r.id}\">Approve Private<\/button>\r\n <button data-act=\"delete\" data-id=\"${r.id}\">Delete<\/button>\r\n ` : `<span class=\"muted\">Locked<\/span>`;\r\n\r\n return `\r\n <tr>\r\n <td title=\"${r.type}\"><b>${r.type}<\/b><\/td>\r\n <td title=\"${escapeHtml(r.name)}\">${escapeHtml(r.name)}<\/td>\r\n <td title=\"${escapeHtml(r.studentId)}\">${escapeHtml(r.studentId)}<\/td>\r\n <td title=\"${escapeHtml(r.datetime)}\">${escapeHtml(r.datetime)}<\/td>\r\n <td title=\"${escapeHtml(r.details)}\">${escapeHtml(r.details || \"-\")}<\/td>\r\n <td>${statusTag(r.status)}<\/td>\r\n <td>${adminActions}<\/td>\r\n <\/tr>\r\n `;\r\n }).join(\"\");\r\n\r\n \/\/ Attach actions\r\n els.tbody.querySelectorAll(\"button[data-act]\").forEach(btn=>{\r\n btn.addEventListener(\"click\", ()=>{\r\n const act = btn.getAttribute(\"data-act\");\r\n const id = btn.getAttribute(\"data-id\");\r\n handleAdminAction(act, id);\r\n });\r\n });\r\n }\r\n\r\n function handleAdminAction(act, id){\r\n if(!isAdminUnlocked){\r\n speak(\"Admin is locked\");\r\n return;\r\n }\r\n const records = loadRecords();\r\n const idx = records.findIndex(r=>r.id===id);\r\n if(idx<0) return;\r\n\r\n if(act===\"approvePublic\"){\r\n records[idx].status = \"public\";\r\n saveRecords(records);\r\n speak(\"Approved to public list\");\r\n render();\r\n }\r\n if(act===\"approvePrivate\"){\r\n records[idx].status = \"private\";\r\n saveRecords(records);\r\n speak(\"Approved to private list\");\r\n render();\r\n }\r\n if(act===\"delete\"){\r\n records.splice(idx,1);\r\n saveRecords(records);\r\n speak(\"Deleted\");\r\n render();\r\n }\r\n }\r\n\r\n function escapeHtml(s){\r\n return String(s ?? \"\")\r\n .replaceAll(\"&\",\"&\")\r\n .replaceAll(\"<\",\"<\")\r\n .replaceAll(\">\",\">\")\r\n .replaceAll('\"',\""\")\r\n .replaceAll(\"'\",\"'\");\r\n }\r\n\r\n \/***********************\r\n * Field voice prompts\r\n ***********************\/\r\n function attachFieldVoice(el, text){\r\n el.addEventListener(\"focus\", ()=> speak(text));\r\n el.addEventListener(\"click\", ()=> speak(text));\r\n }\r\n\r\n attachFieldVoice(els.studentName, \"Enter student name\");\r\n attachFieldVoice(els.studentId, \"Enter student I D number\");\r\n\r\n attachFieldVoice(els.purposeText, \"Enter purpose\");\r\n attachFieldVoice(els.purposeDD, \"Select purpose type\");\r\n attachFieldVoice(els.otherPurpose, \"Type other purpose\");\r\n\r\n attachFieldVoice(els.requestText, \"Type your request\");\r\n\r\n \/***********************\r\n * Check-Out flow\r\n ***********************\/\r\n els.purposeDD.addEventListener(\"change\", ()=>{\r\n const v = els.purposeDD.value;\r\n if(v === \"Others\"){\r\n els.otherPurposeWrap.classList.remove(\"hidden\");\r\n setTimeout(()=>els.otherPurpose.focus(), 50);\r\n }else{\r\n els.otherPurposeWrap.classList.add(\"hidden\");\r\n els.otherPurpose.value = \"\";\r\n }\r\n });\r\n\r\n els.checkoutBtn.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n const dt = nowISTString();\r\n els.checkoutDT.value = dt;\r\n speak(\"Check out time recorded\");\r\n });\r\n\r\n els.submitCheckout.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n\r\n const dt = els.checkoutDT.value.trim() || nowISTString();\r\n els.checkoutDT.value = dt;\r\n\r\n const purpose = els.purposeText.value.trim();\r\n const dd = els.purposeDD.value.trim();\r\n const other = els.otherPurpose.value.trim();\r\n\r\n let details = [];\r\n if(purpose) details.push(`Purpose: ${purpose}`);\r\n if(dd) details.push(`Type: ${dd}`);\r\n if(dd === \"Others\" && other) details.push(`Other: ${other}`);\r\n\r\n createRecord({\r\n type: \"CHECKOUT\",\r\n datetime: dt,\r\n details: details.length ? details.join(\" | \") : \"\u2014\"\r\n });\r\n\r\n \/\/ reset (keep name\/id)\r\n els.purposeText.value = \"\";\r\n els.purposeDD.value = \"\";\r\n els.otherPurpose.value = \"\";\r\n els.otherPurposeWrap.classList.add(\"hidden\");\r\n \/\/ keep checkoutDT visible\r\n });\r\n\r\n \/***********************\r\n * Check-In flow\r\n ***********************\/\r\n els.checkinBtn.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n const dt = nowISTString();\r\n els.checkinDT.value = dt;\r\n speak(\"Check in time recorded\");\r\n });\r\n\r\n els.submitCheckin.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n\r\n const dt = els.checkinDT.value.trim() || nowISTString();\r\n els.checkinDT.value = dt;\r\n\r\n createRecord({\r\n type: \"CHECKIN\",\r\n datetime: dt,\r\n details: \"Hostel check in\"\r\n });\r\n });\r\n\r\n \/***********************\r\n * Request flow\r\n ***********************\/\r\n els.submitRequest.addEventListener(\"click\", ()=>{\r\n const basics = requireStudentBasics();\r\n if(!basics) return;\r\n\r\n const text = els.requestText.value.trim();\r\n if(!text){\r\n speak(\"Please type your request\");\r\n els.requestText.focus();\r\n return;\r\n }\r\n const dt = nowISTString();\r\n\r\n createRecord({\r\n type: \"REQUEST\",\r\n datetime: dt,\r\n details: text\r\n });\r\n\r\n els.requestText.value = \"\";\r\n });\r\n\r\n \/***********************\r\n * Admin lock\r\n ***********************\/\r\n els.unlockBtn.addEventListener(\"click\", ()=>{\r\n const pin = String(els.adminPin.value || \"\").trim();\r\n if(pin === ADMIN_PIN){\r\n isAdminUnlocked = true;\r\n speak(\"Admin unlocked\");\r\n render();\r\n }else{\r\n speak(\"Wrong pin\");\r\n }\r\n });\r\n\r\n els.lockBtn.addEventListener(\"click\", ()=>{\r\n isAdminUnlocked = false;\r\n els.adminPin.value = \"\";\r\n speak(\"Admin locked\");\r\n render();\r\n });\r\n\r\n \/***********************\r\n * Export \/ Clear\r\n ***********************\/\r\n els.exportBtn.addEventListener(\"click\", ()=>{\r\n const records = loadRecords();\r\n const blob = new Blob([JSON.stringify(records, null, 2)], {type:\"application\/json\"});\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement(\"a\");\r\n a.href = url;\r\n a.download = \"girls_hostel_records.json\";\r\n document.body.appendChild(a);\r\n a.click();\r\n a.remove();\r\n URL.revokeObjectURL(url);\r\n speak(\"Exported\");\r\n });\r\n\r\n els.clearAllBtn.addEventListener(\"click\", ()=>{\r\n if(!isAdminUnlocked){\r\n speak(\"Unlock admin to clear all data\");\r\n return;\r\n }\r\n const ok = confirm(\"Clear all saved records? This cannot be undone.\");\r\n if(!ok) return;\r\n localStorage.removeItem(STORAGE_KEY);\r\n speak(\"All data cleared\");\r\n render();\r\n });\r\n\r\n \/***********************\r\n * Filters\r\n ***********************\/\r\n els.viewFilter.addEventListener(\"change\", render);\r\n els.searchBox.addEventListener(\"input\", render);\r\n\r\n \/***********************\r\n * Voice toggle\r\n ***********************\/\r\n els.toggleVoiceBtn.addEventListener(\"click\", ()=>{\r\n voiceEnabled = !voiceEnabled;\r\n setVoiceUI();\r\n speak(voiceEnabled ? \"Voice on\" : \"Voice off\");\r\n });\r\n setVoiceUI();\r\n\r\n \/\/ Initial render\r\n render();\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>Girls Hostel Application GIRLS HOSTEL APPLICATION Check-out \/ Check-in \/ Request \u2022 Auto date & time \u2022 Admin approval (Public \/ Private) \ud83d\udd0a Voice: ON Toggle Voice Student Details Enter Name Enter Student ID No. Tip: First enter Name and Student ID. Then use Check-Out \/ Check-In \/ Request. Check-Out Check-Out Auto Date & Time (Check-Out) Purpose Select Purpose Type — Select —CollegeHome TownShoppingHospitalRelatives HouseOthers Others (Text Box) Submit Check-Out On submit, it will be saved as Pending until Admin approves to Public\/Private. Check-In Check-In Auto Date & Time (Check-In) Submit Check-In No options required. Just Check-In hostel. Request Request Submit Request Saved as Pending until Admin approves to Public\/Private. Admin Approval Admin Lock: Unlock Lock After unlock, each pending record can be approved to Public List or Private List. Export JSON Clear All Data Data is stored in your browser (localStorage). Keep PIN private. Records Loading\u2026 View: AllPendingPublicPrivate Type Name Student ID Date & Time Details Status Admin Actions \u201cAfter approval records will be display after submit button\u201d \u2014 your submitted entry appears immediately as Pending, then moves to Public or Private after Admin approval.<\/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-12588","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/12588","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=12588"}],"version-history":[{"count":4,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/12588\/revisions"}],"predecessor-version":[{"id":12593,"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/pages\/12588\/revisions\/12593"}],"wp:attachment":[{"href":"https:\/\/indianbrahmins.com\/index.php\/wp-json\/wp\/v2\/media?parent=12588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}