Figma to HTML/CSS with extensive Javascript Animation

There are 3 simple screens in Figma that mainly require Javascript scripting and HTML/CSS conversion . Refer to the link below: [login to view URL] The first screen with a red message and a Start button is the starting point. After the button is pressed a padlock-style input console is loaded. In order to change numbers in the console, a user must swipe each wheel accordingly. If swiped up or down the wheel should be animated respectively. Red dots under each number should turn green after the correct number is dialed on the console's corresponding wheel. Once 356254 is dialed on the console the locked red padlock icon should turn into green unlocked one via flip or shake animation and the corresponding green message with OK button to appear. Coding can be done either in plain HTML/CSS/JS or using React framework. The Web App will NOT have a desktop layout. The Web App is Mobile-ONLY. So if the Web App is opened from a Desktop browser, then it should still be rendered in the same mobile layout. The height of the screen in this case should fit the height of the Desktop browser while the width should remain proportional to the mobile layout. An image of a thin mobile frame might be added later. To manipulate numbers in the console, mobile users will need to swipe each wheel accordingly, with animations triggered for up and down swipes. The page must cover the whole mobile screen and no scrolling should be allowed. As for a Desktop users they should interact with the wheels using a mouse scroll wheel. If a user hovers over a wheel with a mouse pointer, the wheel may get lit (optionally) and a mouse scroll wheel can trigger the respective animation (up or down) Device compatibility must be considered for iPhone 6 and later, iPad, and Android mobile devices. Generally developer should focus on the most commonly used devices. Browser compatibility must be ensured for Edge, Firefox, Chrome, and Safari (all the latest version or close to it).