feat: implement attendance tracking UI with guest management system

static/app.js

@@ -75,8 +75,27 @@ function renderTable() {
         guestNameInput.type = 'text';
         guestNameInput.value = data.guestNames[date] || '';
         guestNameInput.placeholder = 'Enter guest name';
+        guestNameInput.maxLength = 50;
         guestNameInput.onchange = e => {
-            data.guestNames[date] = e.target.value;
+            let value = e.target.value;
+            // Only allow plain text, disallow HTML/script tags, max 50 chars
+            if (/</.test(value) || />/.test(value) || /["'`\\]/.test(value)) {
+                alert("Guest name cannot contain code or special characters like <, >, \", \\\\, or backticks.");
+                guestNameInput.value = data.guestNames[date] || '';
+                return;
+            }
+            // Only allow a-z, A-Z, 0-9, spaces, hyphens, periods
+            if (!/^([a-zA-Z0-9 .-]+)$/.test(value)) {
+                alert('Guest name can only contain letters, numbers, spaces, hyphens, and periods.');
+                guestNameInput.value = data.guestNames[date] || '';
+                return;
+            }
+            if (value.length > 50) {
+                alert('Guest name cannot be longer than 50 characters.');
+                guestNameInput.value = value.slice(0, 50);
+                value = value.slice(0, 50);
+            }
+            data.guestNames[date] = value;
             saveData();
         };
         guestNameTd.appendChild(guestNameInput);
@@ -89,6 +108,12 @@ function renderTable() {
 
 document.getElementById('add-date').onclick = function() {
     const date = prompt('Enter date (DD/MM/YY):');
+    // Check format: DD/MM/YY
+    const dateRegex = /^\d{2}\/\d{2}\/\d{2}$/;
+    if (!dateRegex.test(date)) {
+        alert('Date must be in DD/MM/YY format.');
+        return;
+    }
     if (date && !data.dates.includes(date)) {
         data.dates.push(date);
         saveData();