write extension for woocommerce extra product options

1) A block of text output on the basis of the entered text and the selected font.. A text output block with a font image. In case the text is too long (more than 19 characters), then add the "enlarge" button. In the lower right corner, add a character count. The text for the display is taken from the standard block "Text area" EPO. For the empty "Text Area" block, we display the placeholder "enter the text here". Add "x" to quickly clear the input field. 2) The font selection block. Display a list of pre-generated font images. The image is formed by running the plugin from the admin panel, parsing the fonts folder and creating an image with the font name via ttf info. If you click on "?" An iframe with enlarged examples should appear, this is the second type of image. When clicking on the selected font, we apply it in the drop-down list and close the window. In the admin panel, you should be able to select a standard font for this product. 3) Color selection block. A list of colors is displayed, preset in the product admin area, specifying colors in hex format. When you click on "?" An iframe is loaded with the colors available for this product. The list is generated through bootstrap depending on the resolution. When clicking on the selected color, we apply it in the drop-down list and close the window. 4) Block output options. The block must be output in the same order as the attached image. In the admin panel for each product, we add the ability to specify your link to describe "?". If the field for the link is empty, the "?" Icon is not displayed. 5) We calculate the approximate width of the text based on the chosen altitude variation. To do this, in the admin panel we set the coefficient. width of a font and further under the formula Selected in the variations height * number of characters * coefficient. font. 6) All received information must be transferred to the basket and then to the order. 7) Write an extension to validate the value entry. The goal is to change the type of alarm. Instead of standard messages that depend on the browser, when using attribute "required" you need to do it as on printscreen. 8) for "select box" add the calculation type "price for one letter of the text specified in the text area"