# BUG-003 — Visual Polish, Invitation Preview & Wedding Day Experience

Act as Senior Product Designer, Senior Frontend Engineer, and Senior QA Engineer.

This release is BUG-003.

Objective:

Perform a complete visual polish and interaction stabilization of the Couple Portal, Invitation Preview, and Wedding Day Operation Workspace.

This is NOT a feature release.

Do NOT modify business logic.

Do NOT change database schema.

Do NOT introduce new platform modules.

Only improve the visual presentation, responsiveness, interaction quality, scanner reliability, and UX consistency.

--------------------------------------------------
PART A
Visual Polish
--------------------------------------------------

Review every Couple Portal page.

Focus on:

• spacing consistency
• typography hierarchy
• icon alignment
• button consistency
• card consistency
• badge consistency
• table alignment
• responsive spacing
• empty states
• loading states
• hover states
• focus states

Verify:

Dashboard

Invitation

Guest

Guest Engagement

Wedding Day

Workspace Users

Settings

Do NOT redesign.

Only polish existing UI.

--------------------------------------------------
PART B
Brand Color Refinement
--------------------------------------------------

Keep existing brand identity.

Refine the gradients to become softer and more premium.

Preferred flow:

Soft Blue

↓

Indigo

↓

Lavender

↓

Soft Pink

Avoid:

- oversaturated colors
- harsh transitions
- button color bleeding
- inconsistent gradients

Buttons, Hero Cards and CTA should all share the same gradient system.

--------------------------------------------------
PART C
Invitation Preview Workspace
--------------------------------------------------

Current mobile preview is acceptable.

Improve Tablet and Desktop.

Desktop Preview

- remove tiny iframe appearance
- occupy approximately 90~95% width
- realistic browser chrome
- responsive rendering
- no unnecessary scaling

Tablet Preview

- large responsive browser frame
- wider preview
- browser chrome

Mobile Preview

Keep existing phone simulator.

Optional

Add zoom:

50%

75%

100%

125%

--------------------------------------------------
PART D
Wedding Day Scanner
--------------------------------------------------

Improve scanner reliability.

Bundle html5-qrcode locally.

Do NOT depend on external CDN.

Verify library loaded before initialization.

Improve loading flow.

Loading

↓

Permission

↓

Camera Ready

↓

Scanning

↓

Guest Found

↓

Check-in

If scanner unavailable

Show proper message.

Allow retry.

--------------------------------------------------
PART E
Camera Handling
--------------------------------------------------

Desktop

Automatically detect webcam.

If multiple cameras exist

Allow camera selection.

Example

Integrated Camera

Logitech Webcam

Virtual Camera

Remember last selected camera.

Mobile

Automatically prefer rear camera.

Fallback to front camera if necessary.

--------------------------------------------------
PART F
Wedding Day UX
--------------------------------------------------

Improve Operator Experience.

Add

Start Scan

Stop Scan

Camera Status

Scanning Indicator

Loading Indicator

Success Animation

Error Animation

Beep after successful scan

Auto close scanner after successful lookup

--------------------------------------------------
PART G
Guest Lookup
--------------------------------------------------

Keep Search by:

Guest Name

Phone

Guest Code

Improve:

debounce

loading indicator

keyboard navigation

Enter to select first result

better empty state

Lookup must continue working even if camera is unavailable.

--------------------------------------------------
PART H
Responsive QA
--------------------------------------------------

Verify:

Desktop

Laptop

Tablet

Mobile

Review:

Dashboard

Invitation

Preview

Guest

Wedding Day

Workspace User

Settings

No overlapping.

No clipping.

No overflow.

No broken spacing.

--------------------------------------------------
PART I
Visual Consistency
--------------------------------------------------

Ensure every page follows the same design language.

Consistent:

border radius

shadow

padding

button height

input height

card spacing

header spacing

icon size

Font Awesome sizing

Typography hierarchy

--------------------------------------------------
PART J
Verification
--------------------------------------------------

Manual browser testing.

Desktop

Tablet

Mobile

Scanner

Desktop Webcam

Logitech Webcam

Laptop Webcam

Android Camera

iPhone Camera

Invitation Preview

Desktop

Tablet

Mobile

Responsive

Landscape

Portrait

--------------------------------------------------
Deliverables
--------------------------------------------------

Provide a complete walkthrough including:

Modified files

Visual improvements

Scanner improvements

Invitation Preview improvements

Responsive improvements

Verification

PHP syntax validation

Browser testing

--------------------------------------------------
IMPORTANT
--------------------------------------------------

This is a polish release.

Do NOT redesign pages.

Do NOT refactor unrelated code.

Do NOT change business logic.

Do NOT modify database schema.

Do NOT introduce new modules.

Only stabilize and polish the existing platform to production quality.