Harvest Kitchen
Template guide.

01. Overview & files

Everything required to display the template is local. There is no build process, database, or required subscription.

harvest-kitchen/
  index.html                 Restaurant landing page
  README.html                This self-contained guide
  LICENSES.txt               Dependency and asset notices
  assets/
    css/style.css            Palette, typography, responsive layout
    js/main.js               Menu, gallery, reservation drafts
    images/                  Local WebP photographs
    icons/                   Local SVG marks and location icon
    vendor/bootstrap/        Bootstrap CSS and bundled JavaScript

The page uses Bootstrap components for mobile navigation, FAQs, and the photograph dialog. Custom CSS creates the editorial layout.

02. Quick start

1. Extract the ZIP and keep the harvest-kitchen folder structure intact.
2. Open index.html in a browser to explore the design. Open this guide using the footer link.
3. Edit the files in a plain-text code editor. Start with restaurant details in index.html and the RESTAURANT settings at the top of assets/js/main.js.
4. Refresh the browser after saving. For clipboard support, use an HTTPS site or a local development server. If copying is unavailable, the draft can be selected and copied manually.

No external fonts or image services are required. The area-map link and your email app are external destinations.

03. Edit the restaurant content

Replace demonstration details

The Pasadena address is fictional, the phone and email are sample contacts, and menu prices and hours are examples. Photographs show illustrative dishes and a dining-room concept. Replace or describe them accurately. There are no customer testimonials included.

Dietary information: the V marker refers only to vegan ingredients in the sample recipe. Verify ingredients, substitutions, and preparation practices before using any dietary label. Keep the note inviting guests to discuss their needs.

04. Colors & typography

Change the CSS variables at the beginning of assets/css/style.css. The guide has its own inline styles, so update this file separately if you want it to match a new brand.

--serif controls headings and editorial text; --sans controls body text and navigation. Both use fonts already on the visitor's device. If bundling a font, include its license and use a local @font-face definition.

Keep body text readable, avoid excessive letter spacing, and check button colors in their default, hover, and focus states. The hero overlay is intentional: changing the photograph may require adjusting it to preserve contrast.

05. Change images & icons

Replace hero.webp, chicken.webp, pasta.webp, and dining.webp in assets/images, or update their paths in the HTML. Keep photographs in WebP format and use enough resolution for their displayed size.

• The hero fills the width and crops with object-fit: cover. Adjust .hero-photo and its object-position for the subject's placement.
• When a photograph changes, update its alt text, related dish copy, and the dialog's data-photo, data-title, and data-caption values.
• Update HTML width and height attributes to reflect replacement image proportions.
• The SVG brand mark is also the favicon. Edit its local file to change the shape or stroke color.

Use photographs and icons that you have appropriate rights to use. Avoid presenting illustrative venue photographs as images of your actual restaurant.

06. Configure reservation requests

At the top of assets/js/main.js, update RESTAURANT.name, recipient, and timezone. The default timezone is America/Los_Angeles. Match the visible name and contact links in the HTML.

What happens when a visitor uses the form

1. The form checks name, email, party size, preferred date, and preferred time.
2. It rejects past Pasadena dates, Mondays, times outside configured dining windows, and earlier times on the current day.
3. It prepares a reviewable draft on the page. No data is submitted or stored by the template.
4. “Open email app” creates a mailto: link. The visitor must review and send the message in their email app.
5. “Copy draft” copies the recipient, subject, and message when the browser allows it; otherwise it selects the text for manual copying.
6. Changing any field invalidates and hides the previous draft. Reset clears fields and the draft.

Preferences are requests, not available time slots. The restaurant must reply to confirm. Sample recipients are not operational mailboxes.

Match the form to your hours

Update closedWeekdays, lunch/dinner windows, lateWeekdays, and maxGuests in JavaScript. Weekday numbers use Sunday = 0 through Saturday = 6. Update the HTML time and guest options, weekday hints, visible hours, and FAQs at the same time. Options marked data-late are enabled only for configured late weekdays.

For a genuine booking service, replace reservation CTA links with your supplied booking URL, or integrate your provider and rewrite the form descriptions to match. No booking provider or online ordering system is included.

07. Maintain navigation & interactions

• Anchor links depend on section IDs such as story, menu, dining, visit, and reservation. Update links if changing IDs.
• Menu filters use data-menu values matched to data-category. The “Full menu” button uses all. Keep category IDs and heading references unique.
• Menu buttons remain keyboard accessible and announce the selected category. Preserve aria-pressed and the live-status region.
• Signature-dish and atmosphere-gallery photograph buttons set the Bootstrap dialog's image and caption. Escape closes it, and focus returns to the triggering button.
• FAQs need unique collapse IDs, matching button targets, and aria-controls values.
• The mobile navigation closes when a link is chosen. Keep the toggle's target matched to mainNav.

Privacy & Terms of Use

The two footer controls open Bootstrap dialogs in index.html. Edit the paragraphs inside privacyModal and termsModal to match your restaurant’s actual practices, reservation conditions, and any services you add. The policies address restaurant guests and describe the included browser-only email drafts. Treat this wording as a starting point requiring review before launch: verify your restaurant’s real information handling, email and hosting arrangements, contacts, and any added services. Add only policies that reflect your actual practices. Keep buyer instructions and template customization notes in this guide, outside the guest-facing dialogs. Keep the dialog IDs, headings, close controls, and footer targets matched; Escape closes a dialog and focus returns to its footer control.

This template has no preselection links or private-dining form. If adding them, update only the intended field, preserve other visitor input, and dispatch an input/change event so the old draft is invalidated.

Keep labels, meaningful alternative text, the skip link, visible keyboard focus, and reduced-motion support. Keep external links labeled when opening a new tab.

08. Responsive customization

The custom stylesheet includes adjustments at 1199, 991, 767, and 380 pixels. The centered full-width hero, wide editorial grids, and atmosphere gallery become phone-friendly layouts, while menu rows remain readable and the reservation fields use one column on very small phones.

• Use flexible widths rather than fixed widths for new content.
• Check long dish names and email addresses on small screens.
• Keep form controls and tap targets comfortably sized.
• If changing the heading font, check wrapping at desktop, tablet, and phone widths.
• Keep the full-width hero and comfortable section spacing; reduce only spacing that becomes excessive at a particular breakpoint.

09. Dependencies & notices

Bootstrap 5.3.8 CSS and its JavaScript bundle are included locally. The bundle includes Popper 2.11.8. Both use the MIT license; their notices are included in LICENSES.txt.

The local SVG marks and illustrative photographs are included template assets. Your applicable purchase agreement governs template use. System fonts are referenced without redistributing font files.

Preserve dependency license notices. If adding libraries, fonts, or media, include their required notices and keep the README accurate.

10. Practical launch checklist

• Replace the sample brand copy, fictional address, phone, email, hours, menu prices, and illustrative venue imagery as needed.
• Update the email recipient, timezone, dining rules, contact links, and actual directions URL.
• Confirm menu ingredients and dietary wording with the restaurant.
• Check all menu categories, photograph dialogs, FAQs, navigation links, and CTAs.
• Try an invalid form, a valid draft, edits after drafting, Reset, copying, and opening the email app.
• Inspect desktop, tablet, and phone layouts, keyboard navigation, heading order, and color contrast.
• Adapt the Privacy and Terms of Use dialogs to your actual site and any external services you add; check both footer controls and their close/focus behavior.
• Remove demonstration labels only after replacing the sample information with accurate restaurant details.

11. Troubleshooting

Photographs or styles are missing

Keep the assets folder beside index.html. Check filename capitalization and relative paths; many servers treat uppercase and lowercase differently.

The mobile menu, FAQ, or photo dialog does not open

Confirm that the local Bootstrap bundle loads before main.js and that component targets still match their IDs.

The email app does not open

The visitor needs a configured email handler. Use the copy-draft option or the visible phone/email fallback. Opening an email app does not send the message.

Copying is unavailable

Some browsers restrict the clipboard on local files or non-HTTPS pages. Select the draft and use the device's Copy command; the template provides this fallback.

A requested date or time is rejected

Check the restaurant timezone, closed weekdays, dining windows, and whether the time has already passed. Changing one setting may require updating HTML time options and visible hours too.

A long draft is awkward in the email app

Some email handlers limit mailto: URLs. Copy the draft into a new email instead.