PWA for Online Attendance

The Miracle Attendance PWA is officially finished. This was the final sprint and the longest I have done ever (but yeah it was broken in two major chunk of time). While the original goal was to integrate a full Computer Vision (CV) model for real-time face verification, I’ve had to make the difficult executive decision to shelf that specific feature for this version. Between the heavy academic load of Pure Mathematics exams and some recent health constraints, I didn’t have enough time to arrange for the CV.
Today also marks the final day for Flavortown.

1. PII & Anti-Scraping
   Canvas Rendering: I moved away from standard tags for personnel photos. By rendering the photo directly onto a element via photoBase64, there is no direct URL for a shoulder-surfer to find in the DevTools and “Save As”
   The Total Blackout: The blurred CSS class was updated to be much more aggressive. Instead of a simple blur, I implemented filter: brightness(0) and opacity: 0. The moment the window loses focus (standard for Snipping Tools or Screen Recording software), the entire screen turns into a solid black void.
   PII Shielding: All Personally Identifiable Information (Name, ID, Branch) was wrapped in the .secure-data class, making it non-selectable and protected by the blackout trigger.

2. Ghost Sessions
   A major “scary” discovery was how the browser’s Back/Forward arrows allowed users to peek at previous sessions. I implemented a pageshow listener combined with event.persisted checks. Now, if the browser tries to pull the page from its internal cache (bfcache) during a back-navigation or a refresh, the script immediately fires sessionStorage.clear() and uses window.location.replace to kick the user back to the login page.

A. I ran into a frustrating ReferenceError where the dashboard wouldn’t load.
A.1. I was “shadowing” my global empData variable with a local one inside the loadPersonnelData function.
A2. Refactored the logic to use a separate fetched variable and updated the global state using Object.assign
B. Live Firebase Storage triggered CORS blocks. I had to manually set the CORS configuration via gsutil to allow my local and hosted origins to talk to the bucket.

Plus— Personnel Dashboard to mark attendance is now live with a calendar! (don’t have integration for Firebase Cloud Functions so attendance won’t be marked but core functioning is implemented)

Goodbye, Flavortown.

Changelogs referenced:
“https://github.com/adibuddies/attendance/commit/9c8eed8c52d82a01c0a628c399d830cda47633b1”: Updated firestore rules
“https://github.com/adibuddies/attendance/commit/004a470ed2263b6553e77781b7be7dbaf73d4ee4”: Added full attendance.html
“https://github.com/adibuddies/attendance/commit/af383fed5bfcd91f6a087d96bfc8a70146a5365a”: Refractor index.html (renamed from login.html)
“https://github.com/adibuddies/attendance/commit/c48beef787a3fe3d97578add58a9906b96a91924”: branch.html changes

The primary goal for this session was to move the Miracle Attendance Portal from a local file:/// development environment to a live, production-ready state on Firebase Hosting. This required a complete alignment of our data pipeline to ensure the “Live Brain” (Firestore) was perfectly synced with the “Live Body” (PWA).
😵

• Transitioning to Firebase Hosting was the first step. I had to configure firebase.json and .firebaserc to map the root directory correctly. While the deployment was successful, it immediately revealed the “rigidity” of cloud environments compared to local testing—if the logic isn’t 100% perfect, the live site fails instantly.
  🦠
  The Debugging Journey

• After migrating the data from Excel to Firestore via node upload.js, I hit a critical mismatch.

• The Bug: My index.html was looking for a field named bid, but the database was still storing it as corpID because the upload.js pusher hadn’t been refactored yet.

• The Fix: Synchronized the Python translator and the Node.js pusher to use the new regional-ready schema (officeName, BID, BIN).

• One of the most frustrating errors of the session was a ReferenceError: enteredBID is not defined.

• Diagnosis: JavaScript is a case-sensitive stickler. I had defined enteredbid (lowercase) but called enteredBID (uppercase) in the logic check.

• Solution: Standardized all variable naming to enteredBID across the authentication listener.
  👻

• Fighting the Ghost Cache**
  Even after fixing the code and redeploying, the live site appeared broken.

• Lesson Learned: Firebase Hosting caches files heavily. I learned to utilize Hard Reloads (Ctrl+Shift+R) and Incognito Mode to bypass the “Ghost” versions of the code and ensure I was testing the latest deployment.

📌Current Status—

1. Deployment: Successfully live on pingin-presently.web.app.
2. Data Pipeline: Excel → Python → Firestore is now 100% synchronized with the bid and bin keys.
3. Auth Flow: “Head Office” / “HEAD” / “0001” now successfully clears authentication and redirects to the branch dashboard.

1. First thing I did was rework the overall color system. Earlier palette (cream/yellowish) was making the UI look dull. Shifted to a more neutral grey + white base and updated root variables accordingly.
2. Fixed global inconsistencies by adding a proper reset (* margin/padding + font). Earlier spacing was all over the place due to mixed defaults.
3. Reworked the clock logic properly this time. Instead of basic toLocaleTimeString, implemented full IST-based formatting using Intl.DateTimeFormat + formatToParts. Also added milliseconds (setInterval at 1ms). Now it matches what I had in branch.html.
4. Adjusted layout proportions again:
   i. login-side padding updated (60px → 60px 70px)
   ii. flex balance corrected slightly
   iii. background grid spacing also adjusted (28 → 32)
5. Brand-side finally fixed. Earlier I had broken structure (logo-stack sitting outside). Moved everything properly inside brand-side and corrected positioning.
6. Also increased logo size and cleaned up typography (EB Garamond for estd, spacing fixes, footer pushed lower but inside the box).
7. Credential animation tweaked again. Switched back to a small setTimeout delay instead of requestAnimationFrame.
8. Updated input behavior:
   i. text color correction (was using wrong variable earlier)
   ii. label changed to “BIN / PIN” to reflect logic better (because I had created a Branch page, so considered having personnel page separate but with same login).
9. Refined button hover (shadow + letter-spacing transition).
10. Also cleaned up minor things in suggestions logic and redirects.

At this point it matches what I had in mind visually and structurally. Thankfully so it does.
I think I’ll work on going live with it in Firebase next! Thankyou 🙏

1. Worked on improving the overall feel of the login page. It was looking very flat and unfinished earlier.

2. Added a subtle background pattern (grid type).
   [background-image: radial-gradient(circle at 1px 1px, #e6e6e6 1px, transparent 0);]

3. Finally worked on the clock. Shifted it to ist-clock format and made it live update every second. Functional clock on the login page now.

4. Updated the header text styling to “Authentication Required” with better spacing.

5. Tried fixing the branding section alignment. Centering is done but the share of cred-container box is disproportionate.

6. Tried to keep PIN field numeric only but seems like need to read about it a little {inputmode=“numeric” didn’t work}

7. Minor hover refinement on suggestions list.

Thanks. Going to work non-stop today!

1. Started aligning the login page structure towards the final UI I think I want for a product-like look.
2. Shifted the container styling from dashed border to a 1px solid border + tried putting shadow.
3. Renamed login-form to login-side (idk, just trying to separate login fields from logo) to match the structure I’m targeting ahead.
4. Shifted from already listed fields to a basic reveal animation for credential fields after department selection. It works, but there is a jerk after selection. Doesn’t feel premium UX wise.
5. Updated button styling (#1a1a1a + gold hover +1px letter spacing). I think it’s good.
6. Did a small restructure on the branding side using a logo-stack so I can later separate footer positioning cleanly but didn’t go as planned. Seems messed up.
7. Also added maxlength to PIN field to control input length (basic but needed).
8. Hardcoded a few more workplaces into const departments.

But the visuals are disturbing, still feels so rough.

P.S.: Forgot to work on the clock 😭

basically cleaned up the script logic and ensured the department selection flows better into the next state.

1. branch.html: It’s the dashboard for the Branches. Tried to keep it simple. But the problem is it’s static and I can’t hardcode information for 1500 employees over 100+ branches so will need to work on Firebase next!

2. Built a responsive grid for the employee-card layout. Each card shows the name, role, and pay grade (like Level A-1 or Level B-2)

3. Implemented a modal-overlay with a 6-digit PIN input. Now, clicking an employee card triggers a “Verify Identity” prompt.

4. branch.html: Updated the ist-clock to show time down to milliseconds (idk why but I wanted it). And yes, it’s working for the first time! I am yet to update login.html with a working clock.

Mostly debugging the modal’s CSS and making sure the info-side branding stayed put while the directory could be scrolled with ease. Also, setting up the mock data for employees took a lot of time.

P.s.:
Yet to figure out what to do for the next devlog but yeah… the clock gives a high-tech server feel for me.

Removed dead variable (I’d updated the code to earlier to remove the partner logo function but forgot to remove these) in ln232- const partnerArea
A few formatting changes.

That’s all. Visuals remain same— unchanged.

P.S.: Old ss uploaded

My first version of the login page had some bugs leading to a disappointing final visual. The login box was top left aligned instead of being centered.
Following fixes followed:

1. A typo in line 17 –clock-strip writen as –clock-stip.
2. Syntax error: space in ln18: cubic bezier (0.4, 0, 0.2, 1);
3. Wrong used variable doesn’t exists: color: var(–text-main);
4. Centered the login box using:
   justify-content: center;
   align-items: center;
5. Clock position changed to top-right corner of webpage from login-box awkward placing using- position: absolute; top: 20px; right: 20x;
6. Validation error in ln204
7. Removed ln285, if (dept.has logo): I earlier had UPSWC logo for use but now want to keep it solely my branding on the page.

Thankyou 😎

Worked on some basic visuals and HTML tags leaving open-end for easy integration if I wish to take this site live with a domain.
the first page was login page, which will be what anyone visits at the first. I wish to keep it simple as my target user base may not be computer-literate. Thus skipped adding unnecessary buttons or steps and went directly with a login page which could be downloaded onto the desktop as a PWA.

My primary color pallete under :root was primarily influenced by https://www.figma.com/resource-library/color-combinations/ and my other projects like the Stock Exchange game I am working on.

Though the visuals tell it didn’t go as planned. I am going to work on it in the next devlog.

Stay tuned!

P.S. I am back to coding after nearly 3 year, close to 3 hours for this sloppy work may seem a lot. Please don’t mind me 🙏😭