adityarajmalviyaa

This was the final sprint to lock down the end. Android’s WebView engine is completely different game from desktop browsers, can’t seem to figure out what it renders and what it doesn’t. But anyways: https://github.com/adibuddies/letterhead.editor/commit/aa8a12022572545eab154070f2714d40372aa69d

1. I had completely removed all internet permissions so the HTML wasn’t able to communicate with qrcode.min.js on the url given. I fixed it by downloading the javascript file into the assets folder.
2. The micro-text features in android webview were just so not possible. Partially because I can’t expect a high-density display of a smartphone to render me a 0.5pt line (1/144th of an inch).
3. I fixed it by leaving no trace for the micro-text in the android app while it worked as usual with PC version.

Finally, an APK is available to download and test in the repo. Please do check out!

1. Eliminated the unwanted black margins.
   Injected an initial @media print block to force a white background and reset the .preview-area. I also set the .letterhead to a fixed 210mm width to override the mobile 100% view.
   The placement was still off, and the letter was still going into a second page on the PDF.
   Then comes the attempt to correct—
2. .letter-content increased the top margin to 2.5in
3. Reduced height to 296mm
4. overflow: hidden in the print CSS to guarantee a 1-page output

Success! 😎

Changelog: https://github.com/adibuddies/letterhead.editor/commit/eb4f501dfac449b1dc4044589081329ff3d98804

I can now scroll to the extreme bottom and am able to access the letter. Solved one of the problems. Now heading to defeat those unwanted black margins in the printed PDF! 😏😈

Diff view link: https://github.com/adibuddies/letterhead.editor/commit/b4d89278ce281316d5a8cf15f8f1789d360052e9

I implemented @media (max-width: 600px) logic to completely overhaul the layout as the index.html was a desktop-first design.
I swapped the main body from flex-direction: row to column, now instead of horizontal space the control features now sit on top of the letterhead vertically.
I had to use !important on almost every font size and padding value because the original desktop styles were acting higher and refused to be overridden by media queries.
I also scaled the name down to 18pt.

Now here’s the problem—
I fixed the “squashed” look, but I’ve run into a serious usability wall.
Because the sidebar is so long with all the new identity fields, it’s taking up the entire viewport. I can’t scroll past the “Print PDF” button to actually reach the letter body. If I can’t scroll, I can’t type, which basically makes it a very pretty, very useless screen right now.

I’m stopping here for the day before I smash my head against the keyboard.🥲

Once these issues are resolved I am going to make the Gen. QR button work and look if the code needs any more refining.

Changelogs: https://github.com/adibuddies/letterhead.editor/commits/LetterheadEditorbyMiracle/

Had to compress due to exceeding char limit

Phase 1 — Initialization (Android Studio, Java, API 24)

1. Incorrect asset root caused crash; fixed by relocating to src/main/assets and updating WebView to file:///android_asset/index.html.
2. A4 layout rendered incorrectly due to desktop-oriented CSS in WebView.

Phase 2 — Security & Isolation

1. Removed INTERNET permission; enforced no-cache via:
   myWebView.clearCache(true);
   s.setCacheMode(WebSettings.LOAD_NO_CACHE);
2. Bundled fonts (Playfair Display, EB Garamond, Inter) and localized Phosphor icons.
3. Fixed CSS font paths (../fonts/Phosphor.woff2).
4. Disabled content access and cross-file interaction.

Phase 3 — Functionality (WebView ↔ Android bridge)

1. Implemented WebChromeClient for image upload without broad storage permissions.
2. Added JavascriptInterface to route window.print to Android Print Spooler.
3. Tested on Android 12 (unsigned APK); all implemented features working as intended.

😎
This update was about breaking the previous hardcoded version into a flexible local app: professional letter tool.
Yk the previous version had a lot of info which was immutable using the UI/UX.

Changelog: https://github.com/adibuddies/letterhead.editor/commit/1588299078f86fcff3d937cfb9c0ba0756fdf11f

1. I replaced the hardcoded src paths for the logo (/watermark) and Signature with a FileReader logic. You can now upload your own logo and digital signature directly through the sidebar options.
2. I added several new metadata fields to the identity container, including Memberships, Phone Number, and a combined Socials line (LinkedIn/GitHub/Web).
3. Instead of a static string of text in the footer, I built a JavaScript repeat-logic function. (I was idiotic for hardcoding it multiple times). You can now type a single security phrase in the sidebar, and the system uses .repeat() to automatically generate those repeating anti-copy lines for the footer (30x) and the wet-signature area (15x).
4. I removed the strict gatekeeper in the initiatePrint function. Afixing a QR is optional now.
5. Kept the previous formatting options as it is.
6. Expanded the sidebar to 380px.
7. Used the section-tags to keep the sidebar still clean after adding hell lot more options.

P.S: forgot to add variable feature to the .crest-img ’s 0.15 opacity 🥲

changelog: https://github.com/adibuddies/letterhead.editor/commit/9be2fb6864183cee992234a359adef834e5d6018

1. the sidebar now uses a translucent glass effect (rgba overlays) and a thin gold border.
2. I implemented a micro-text separator (0.5pt) that repeats “IUM-LETTER-AUTHENTIC-DONOTCOPY” (had it hardcoded, didn’t think of limited extension)
3. I built a Print Modal. Now, when you hit print, it asks if the use case is Digital (it affixes a high-res digital signature) or Physical (it hides the signature and adds a specialized physical-sign line)
4. The physical sign line is also a micro-text (.5pt again) “IUM-PHYSICAL-SIGNATURE-AUTHENTIC-DONOTCOPY” (again hardcoded).
5. qrcode.js : You can now generate a dynamic verification QR code that sits in the bottom right. (the only problem is it need QR before printing, so first upload a metadata to a webpage and add that URL to your QR. Problematic for those who don’t need it)
6. Phosphor Icon library for the toolbar

Good that this works!

P.S.: this is still not final since it can’t be used by all yet. There are a lot of elements still hardcoded, thus will replace it with a lot of editable variables in next session. Thankyou

My goal was to build a professional tool for my sister. Choosing HTML was the best way forward I think, for the most part, the use is local and doesn’t need hosting.
So this particular tool was for a letterhead editor. But there is still a lot to work on the css. The looks are not quite aligned and are unsettling.

1. I tried to make the editor responsive, but the A4 sheet kept shrinking so used min-height and fixed-width rather than width=device-width.
2. I’ve imported Playfair Display for the names and EB Garamond for the body and assure you it’s not just another MSWord.
3. Used basic contenteditable attribute for content in A4.
4. I can type directly onto the paper space.
5. I have also added formatting using Italic and Bold. But don’t know how that will mess up and complicate my code when I try to bring order to the editor’s css later.
6. I can also print the letter once written using Ctrl + P and unchecking Header/Footer option. Refinement on it’s way!

There are some issues however:

1. The footer doesn’t have good styling, it touches the footer line (separator).
2. Also the UI is too dark.
3. I’ll also need to format the logo ‘Miracle’ on top better.

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 🙏😭