Oak & Flame

1. Quick start

1. Extract oak-and-flame.zip and open index.html inside the oak-and-flame folder.
2. Replace the sample business details, menu, prices, hours, event programming, and contact information.
3. Set a monitored recipient in assets/js/main.js, then test the entire inquiry journey.

Prepare inquiry creates a reviewable email draft. Guests must open their email app and send it themselves. This page does not automatically send requests, check availability, confirm reservations, sell tickets, take orders, or process payments.

2. Package & dependencies

The package includes index.html, this self-contained README.html, LICENSES.txt, assets/css/style.css, assets/js/main.js, three WebP photographs under assets/images, a flame SVG favicon under assets/icons, and local Bootstrap 5.3.8 CSS and bundled JavaScript under assets/vendor. No build process, external fonts, CDN, or API key is required. System Arial and Georgia provide the typography. Bootstrap and Popper license notices are included in LICENSES.txt.

3. Business name, story & contact details

Edit the plain HTML text logo in the header and footer, page title, metadata, story, visit section, FAQs, and policies in index.html. Update Oak & Flame and the recipient in main.js too.

Replace 999-999-9999, hello@oakandflame.example, and “Exact location announced soon.” The phone is nonfunctional and the reserved example email cannot receive inquiries. San Diego, California is general demonstration context; no specific property is represented.

4. Menu & prices

Edit the .menu-item rows in index.html. Three categories use the data-filter and data-category pairs grill, bar, and drinks. Keep each pair identical and retain aria-pressed, hidden groups, and the live menuStatus announcement. Prices are sample USD amounts, not an operating menu. Review ingredients and dietary notes; discuss allergies directly without promising allergen-free preparation.

5. Events & group dining

The Friday live music, Saturday game night, and Sunday grill listings are sample programming. Replace the labels, descriptions, and schedule with approved current information. Event rows and the group CTA use data-inquiry values matching the inquiry select exactly. Selecting an event preserves other entries and invalidates any old draft. This is an inquiry, not a ticket purchase or confirmed attendance.

6. Hours, location & map link

Sample Pacific hours are Monday closed; Tuesday–Thursday 4–10 PM; Friday–Saturday noon–11 PM; Sunday noon–9 PM. Edit hours in the visit section and matching FAQ copy. The form does not validate service hours.

The general-area link uses https://www.google.com/maps/search/?api=1&query=San+Diego+CA. It opens a new tab with noopener noreferrer. There is no iframe or exact-location pin. Replace it accurately for the real business and keep its label consistent with its destination.

7. Colors, typography & imagery

Change the :root tokens in assets/css/style.css: --bg charcoal #171916, --panel #21241f, --ink ivory #f5efdf, --muted #bcbfb1, --ember #ed915c, and --line #41443b. Preserve text and button contrast in every state.

Replace steak.webp, burger.webp, and interior.webp in assets/images with appropriately licensed photographs. The supplied landscape assets are 1536 × 1024. The dining-room image also fills the reservation introduction beside the form; its crop is controlled by .booking-photo. Review object-position and object-fit crops on phones. Edit meaningful alt text and descriptive captions in HTML. The favicon is assets/icons/flame.svg. Photographs are illustrative; replace them as appropriate for the business.

8. Inquiry fields & validation

Name, email, preferred date, preferred time, and party size are required. Phone and message are optional. Whitespace-only names, invalid email, past dates, fractional guest counts, and counts outside 1–50 are rejected. Message length is 2,000 characters. The 50-person limit is an inquiry setting, not verified venue capacity; adjust min, max, and step in HTML.

TIME_ZONE in main.js is America/Los_Angeles. Date validation uses that timezone. Update Pacific-time labels in HTML, the validation message, and the email draft if changing the timezone. Preferred times are not checked against opening hours or live availability.

9. Email drafts, copy & reset

Change RECIPIENT in assets/js/main.js and all matching email links and policy contacts in index.html. A valid form prepares a visible draft with the guest details. Open email app uses a mailto link. Copy draft uses the clipboard API with a manual-copy fallback message. Editing a field clears the previous draft; Reset clears the form and draft.

No backend, automatic delivery, persistent entry storage, ordering, payment, or booking service is included. Confirm reservations directly. If integrating an external booking provider, use its approved link and update CTA wording, policies, and inquiry instructions to match.

10. Navigation & accessibility

The header remains sticky. The --header-height variable is updated by JavaScript for anchor offsets; mobile anchor scrolling waits for the expanded menu to close. Keep the mobile collapse IDs and Bootstrap attributes aligned. Short-screen menus scroll vertically. Preserve the skip link, focus outlines, field labels, semantic headings, category selected states, reduced-motion support, and live draft messages.

11. FAQs & policy dialogs

Edit the six FAQ questions and answers in index.html. The FAQ panels form two columns on larger screens and one column on phones. Keep .faq-number and .faq-question spans inside each button; the plus/minus control follows the expanded state. Keep each button data-bs-target and aria-controls matched to its unique collapse ID and data-bs-parent="#faq".

Footer Privacy and Terms of Use buttons open Bootstrap dialogs privacyModal and termsModal. Preserve dialog labels, close controls, Escape, focus trapping, and focus return. The included guest-facing wording is a starting point requiring review before launch. Update it for real contacts, actual data handling, hosting, booking providers, analytics, or other services you add.

12. Responsive edits & cache versions

Check desktop, tablet, and phones down to 320 px after changes. Menu rows and story layouts stack on phones; event rows retain a compact day column. Keep primary actions visible without hovering. The expanded mobile menu must fit short screens.

Custom CSS uses ?v=1.3 and JS uses ?v=1.0 in index.html. Change the relevant version token whenever editing an asset and replace the HTML and matching CSS/JS together. Query strings change asset URLs but do not guarantee cached HTML or every hosting cache refreshes.

13. Launch checklist & troubleshooting

• Replace contacts, fictional address, sample menu, prices, hours, events, and photos.
• Configure recipient, timezone, party-size limit, and any approved external booking links.
• Review dietary notes, FAQs, Privacy, and Terms of Use.
• Test invalid fields, past dates, event preselection, draft review, copy, email handoff, edit invalidation, and Reset.
• Send a test email from the email app and verify receipt.
• Check navigation, menu filters, policies, and all layouts.

If an inquiry does not arrive, confirm the real recipient and that the guest actually sent the email. If copying is blocked, copy visible text manually. For stale styling, update asset versions and refresh caches. For a broken filter or dialog, check matching IDs, data attributes, and local scripts.