I want to build a fun web page for an NFC standee at a buffet. When someone taps their phone, it should load a page that shows a doodle-style frying pan animation for a few seconds (like someone wok-frying), then reveals a promo code with the message “Here’s a treat for you — get $120 off your next buffet. T&Cs apply.” Can you help me scaffold this?
I'll help you create a fun NFC standee page with a wok-frying animation that reveals a promo code! This will be perfect for mobile users tapping their phones.
I've created a fun and engaging NFC standee page that includes:
🍳 Animation Features:
- Doodle-style wok/frying pan with bouncing animation
- Animated food particles flying around
- Steam effects rising from the pan
- Loading text and animated dots
📱 Mobile-Optimized:
- Responsive design perfect for phone screens
- Touch-friendly copy button
- Gradient background for visual appeal
🎁 Promo Reveal:
- Smooth transition from animation to promo code
- Clear $120 discount message
- Easy-to-copy promo code with visual feedback
- Professional terms and conditions
⏱️ Timing:
- 3-second animation duration
- Smooth fade transition to promo reveal
- Copy confirmation with checkmark
The page automatically starts the wok-frying animation when loaded (perfect for NFC taps), then reveals the promo code with a satisfying transition. The design uses warm, food-themed colors and playful animations to create an engaging experience!
use this doodle of a frying pan and animate it so it looks like it's cooking something.change beginning copy alongside the animation to "Cooking something up..."after the animation, change the backgroun to be #000000. have the card be #eae6e1. change the copy:Here’s a treat for you! -> Ooh, you got a spicy dealGet $120 off your next buffet -> Here’s $100 off your next buffetremove the "promo codeCode: FTTT100Change “copy promo code” to “save image”. have the copy icon change to the save image icon as well. this function should save an image of the card into the user's phoneChange orange button color to #FECC07have another button that says “try again” which goes into another loading animation of the frying pan doodle with the copy “here we go…(again)”. this button should be gray and on the left of the "save image button"then it loads another promo “here’s $60 off your buffet order” with the promo code “FTTT60”
I'll update the page to use your doodle and implement all the requested changes including the save image functionality and try again flow!
Perfect! I've implemented all your requested changes:
🍳 Animation Updates:
- Uses your actual frying pan doodle with cooking animation
- Changed copy to "Cooking something up..." (and "here we go…(again)" for second round)
- Added animated food particles around the doodle
🎨 Design Changes:
- Background changes to black (
#000000) after animation - Card background is now
#eae6e1 - Updated copy: "Ooh, you got a spicy deal" and "$100 off your next buffet"
- Removed promo code section for first deal
- Changed spicy pepper emoji to match the theme
💾 Save Image Feature:
- "Copy promo code" changed to "save image" with download icon
- Button color changed to
#FECC07 - Actually saves the card as a PNG image to user's device
🔄 Try Again Flow:
- Gray "try again" button on the left
- Triggers second animation with "here we go…(again)"
- Shows second promo: "$60 off your buffet order" with code "FTTT60"
- Only shows promo code for the second deal
The page now uses your hand-drawn frying pan doodle and creates a fun, interactive experience where users can try their luck twice and save their deals as images!
Code > Use code:Have the rectangle of the promo code have no outline. Change color to #F6F2EC.always have the “try again” button.here are all the code$100 off buffet order with FTTT100 for first 10 redemptions$60 off buffet orders with FTTT60 for first 25 redemptions$50 off mini buffet order FTTT50 for first 20 redemptions$40 OFF MOD (min spend $200) for first 40 redemptionsFree Live Station (worth $500) for first 5 redemptionsHaving the loading copy alternate between these, this copy should never appear for the first loading animation:Alright, let’s give it another go.We love someone who knows what they want.Trying again? That’s dedication.Oh, you’re committed — let’s see if luck’s on your side.Back at it? We respect that.remove the chilli emoji. for each promo there should be an image
