Available Prompts

Floating Download Button

Summary

Float download button in the middle of the screen on the left side

Prompts

Add an opaque overlay banner at left middle corner of the demo page viewport with the text "Banner" in a bright color. Replace "Banner" word with a typical and obvious download icon. When the download icon is clicked, allow the user to dowload the zip file by calling the API endpoint `/steps/empty.zip` Show the download icon 3 seconds after the page is mounted. When the page is loaded, cleverly show the download icon. Add animation to the download icon so that it appears with a sliding in fade-in effect. Put the download icon in black transparent container. Add a back icon with Back text under the download icon that links to the previous page. When user hover on the download icon, show a tooltip that says "Click to download". When user hover on the back icon, show a tooltip that says "Back".

Floating Menu

Summary

Slide a floating menu in the middle of the screen on the left side. The menu contains a download icon and a back link

tailwindcss

Prompts

Add an opaque overlay menu at left middle corner of the demo page viewport with the text "Menu" in a bright color. Replace "Menu" word with a typical and obvious download icon. When the download icon is clicked, allow the user to dowload the zip file by calling the API endpoint `/steps/empty.zip` Show the download icon 3 seconds after the page is mounted. When the page is loaded, cleverly show the download icon. Add animation to the download icon so that it appears with a sliding in fade-in effect. Put the download icon in black transparent container. Add a back icon with Back text under the download icon that links to the previous page. When user hover on the download icon, show a tooltip that says "Click to download". When user hover on the back icon, show a tooltip that says "Back".

Fixes

It is not showing the menu in middle of viewport but in the middle of the page. I want in the middle of the viewport.