Petal

About this template

Petal is a shop website for Hollyhock, a fictional independent florist in Shrewsbury. It has a live “order by 1pm for same-day delivery” countdown on London time that rolls to the next delivery day, a shop filtered by occasion, colour and price, product pages with sizes, a delivery calendar that skips Sundays and fully booked days and a gift message, a saved basket with a postcode check and delivery charges, a demo checkout, a subscription builder with the savings worked out, a wedding estimate and enquiry form, and a day-by-day flower care guide. Every bouquet is drawn in SVG from one JavaScript array, and the colours follow the season.

Features

• Live same-day delivery countdown in the shop’s time zone (Europe/London) that rolls to the next delivery day after the 1pm cut-off, on Sundays and on fully booked days
• Seasonal colours: the hero bouquet, delivery band and “in season now” list follow spring, summer, autumn and winter
• Shop filters for occasion, colour and price, with sorting and shareable ?occasion=, ?colour=, ?price= and ?sort= links
• Product pages with three sizes and prices, a keyboard-friendly delivery calendar that skips Sundays, holidays and fully booked days, and a gift message with a live counter and card preview
• Basket saved in localStorage: per-bouquet delivery day, quantity and gift message, with gift message drafts kept as you type
• Postcode check against delivery zones, with a charge per delivery day and no same-day delivery further afield
• Demo checkout with inline validation, card formatting and an order number
• Subscription builder: weekly, fortnightly or monthly, with the price per delivery, per month, per year, the yearly saving and the first delivery dates
• Wedding and event estimate with steppers and a validated enquiry form
• Every bouquet drawn in SVG from the product data, no photos to replace

Pages included

• Homeindex.html
• Shopshop.html
• Productproduct.html
• Basketbasket.html
• Checkoutcheckout.html
• Subscriptionssubscriptions.html
• Weddings & eventsweddings.html
• Flower carecare.html
• About & contactabout.html
• 404404.html

Quick start

unzip petal.zip && cd petalopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build

Changelog