Description
We are a premium DTC press-on nail brand launching a mobile-first WooCommerce website. We need a Senior Frontend Developer to build our core feature: the "Smart Sizer." This is a custom, interactive mobile UI tool that allows users to measure the physical width of their nail beds using their phone screen. CRITICAL RULE: NO AI, NO CAMERA, NO BACKEND. We do NOT want any computer vision, AR, or camera activation. This must be a 100% lightweight, pure frontend JavaScript/CSS solution using on-screen interactive sliders and physical calibration. How the Tool Works (User Flow): The Trigger: A "Find My Exact Size" button on the WooCommerce mobile Product Detail Page (PDP) opens a full-screen modal overlay. Phase 1: Physical Calibration (Establishing PPI Scale): The user selects a standard physical reference item (Credit Card or Coin). A digital outline appears on the screen. The user places their actual physical card directly on their phone screen. They use an on-screen slider to adjust the digital outline until it perfectly matches their physical card. Your code calculates the exact pixel-to-millimeter ratio for their specific device based on this adjustment. Phase 2: Width Measurement: The user places their actual thumb directly flat on the phone screen. They drag two vertical guidelines (left and right) to frame the widest part of their nail bed. Your code calculates the pixel distance between the lines, applies the calibration ratio, and outputs the exact width in millimeters. P