Contact person: Align & Restore MNOA Web App Frontend

Phone:Show

Email:Show

Location: Mumbai, India

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"Title:
Fix & Align Frontend Layout + Restore Output Mapping for MNOA (Medication Name Overlap Analyzer) Web App
Description:
We have a working Flask-based backend for a research project called MNOA – Medication Name Overlap Analyzer. The backend logic is already tested, stable, and produces correct JSON output for:
Alphabetically cleaned medication names
Round-by-round disambiguation statistics (round_stats)
Keystroke Power by round
All overlaps by round (prefix_logs)
The issue is entirely frontend-related. We recently tried to update the layout to have two large text areas side-by-side for:
Input Box (user pastes a list of medication names)
Alphabetized Cleaned Names (output from backend)
Next to these, on the right side, we have collapsible info boxes:
Overall List Stats
Round-by-Round Stats
Keystroke Power by Round
All Overlaps by Round
However, after making layout changes, two main problems appeared:
1. Layout & Alignment Issues
The input box and Alphabetized Cleaned Names box must both be big, tall text areas of equal size and perfectly aligned horizontally.
The Analyze button should be centered between them.
The stats boxes should be in a right-hand column, vertically stacked and aligned to the height of the text areas.
Current alignment is inconsistent — boxes shift, sizes don’t match, and spacing is uneven.
2. Output Mapping Bugs
Since layout changes, data mapping between backend and frontend broke:
The "Keystroke Power by Round" table is showing incorrect/fixed values instead of reading from the backend JSON exactly as before.
The "All Overlaps by Round" box is displaying incomplete or wrongly grouped data.
The "Round by Round Stats" panel no longer perfectly matches backend output format.
Important: The backend returns already computed, correct values in JSON. We need the frontend to simply display exactly what the backend sends, without recomputing or altering any values.
Technical Requirements
Frontend: Pure HTML/CSS/JS (no frameworks like React) — coding style should remain simple and well-commented, just like the original code.
Backend: Flask API (already complete — you will not modify backend logic).
Must work locally with the Flask server (/disambiguate endpoint returns JSON).
Must not break any existing logic or change the data being sent from backend.
Code should be clean, maintainable, and documented so future edits are easy.
Deliverables
Fully aligned layout: two large equal-height text areas (Input & Output) with Analyze button between them, stat boxes on the right, perfect spacing/alignment.
Correct display of all output sections, exactly matching backend values:
Alphabetized Cleaned Names → one name per line in right text area
Round-by-Round Stats → identical format to backend JSON
Keystroke Power by Round → table filled exactly from backend values
All Overlaps by Round → correctly grouped and displayed per backend data
Final HTML/CSS/JS file(s) replacing the current frontend, tested and working with backend locally.
What We Will Provide
Current fully functional frontend HTML/CSS/JS file (with working backend mapping before layout changes)
Current Flask backend file (for local testing)
Example backend JSON output for reference
Screenshots of the original correct output format and current broken layout
If you can fix this quickly and exactly while keeping code clean and documented, please apply." (client-provided description)