Freeframe
Travel9 pages · 0 downloads · Free

Canopy

A northwoods campground website with an interactive site map, a booking calendar and a camp store.

About this template

A complete campground and cabins site, shown as Tamarack Pines, a family-run campground on Lake Superior near Marquette, Michigan. It has a season status worked out from the opening rule, a keyboard-accessible SVG map of 25 sites and cabins with filters, a date-range booking calendar with seasonal and weekend rates, availability and add-ons, trails with elevation profiles, guided programs that roll forward, and a camp store pre-order basket, all drawn in a trail-map style.

Features

  • Season status and countdown from an opening rule (third Friday of May to third Sunday of October), in Michigan time
  • Interactive SVG campground map of 20 sites and 5 cabins, keyboard-accessible, with type, hookup, RV length and pet filters kept in the URL
  • Date-range booking calendar with availability, shoulder, peak and weekend rates, minimum stays and keyboard navigation
  • Booking add-ons (firewood, kayak hire, early check-in, extra vehicle), tax and a night-by-night total, finishing with a booking reference
  • Camp store pre-order basket with product options, saved in the browser and prefilled from the last booking
  • Five trails with difficulty filter and generated SVG elevation profiles
  • Guided programs built from weekly rules and one-off dates that roll forward every season
  • Rates table and a season strip drawn from the same data as the booking calendar
  • Contact form with topic from the URL, office hours that switch between season and winter
  • Trail-map SVG artwork with a distinct illustration for every cabin, an accessible mobile menu and scroll reveals

Pages included

Quick start

unzip canopy.zip && cd canopyopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Canopy documentation →

Changelog

  1. v1.0.1

    Fixed

    • The thumbnail shows the campground in season instead of "Closed for the winter".
    • The site map is usable on phones: a hint and an edge fade show that it scrolls sideways to Pine Loop and the cabins, choosing a site scrolls its pin into view, and the scrolling frame is a focusable, labelled region.
    • The guest menu stops at six and at the chosen site's limit, matching the six-person rule on the rates page.
    • The newsletter success message no longer says the next letter goes out "when booking opens" (booking is always open).
    • Visit page: Presque Isle Park is 10 miles away (on the way into town, closer than downtown), and Little Presque Isle is reached over a sandbar on calm days rather than "at low water" (Lake Superior has no tides).
    • The visit page's area map no longer has an empty lower part.
    • The season status strip above the header is in its own landmark.
  2. v1.0.0

    Added

    • Eight pages for Tamarack Pines Campground & Cabins, a fictional family-run campground on Lake Superior near Marquette, Michigan: home, sites and cabins, booking, trails and programs, rates and policies, camp store, visit and FAQ, and contact, plus a 404 page.
    • Season status, countdown and "now booking" year worked out in the browser from the season rule (third Friday of May to the third Sunday of October), in Michigan time (America/Detroit).
    • Interactive SVG campground map with 20 sites and 5 cabins, keyboard navigation, a detail panel and filters for type, hookups, RV length and pets, kept in the URL.
    • Booking page with a date-range calendar, demo availability, shoulder, peak and weekend rates, a Saturday two-night minimum, party checks, add-ons, Michigan use tax and a booking request with a reference.
    • Camp store with 15 products, categories, product options and a pre-order basket saved in the browser (in memory when storage is blocked), prefilled from the last booking request.
    • Five trails with a difficulty filter and generated SVG elevation profiles, paddling routes and guided programs built from weekly rules and one-off dates that roll forward.
    • Rates table and season strip drawn from the booking data, policies, directions with an area map, FAQ, and a contact form with office hours for the season and winter.
    • Trail-map SVG artwork (hero, five cabins, paddling, camp store), a PNG social image, an accessible mobile menu, scroll reveals that respect reduced motion, a back-to-top button, and SEO and Open Graph tags.

More templates

Wander website template preview

Wander

Travel

A sun-warmed, editorial site for a small-group tour company, with a trip finder, filters and a booking enquiry.

HTML + TailwindNext.jsAstroWordPress

9 pages · 223 KB

Documentation