Sunroom Café

1. Quick start

1. Extract sunroom-cafe.zip and open index.html inside the sunroom-cafe folder.
2. Replace the sample business details, menu, prices, hours, visit information, 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, five WebP photographs under assets/images, a sun 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 Sunroom Café and the recipient in main.js too.

Replace 999-999-9999, hello@sunroomcafe.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. The full menu includes 24 sample selections across three categories. The categories use the data-filter and data-category pairs coffee, bakery, and kitchen. 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. Featured selections & group visits

The three featured cards introduce Honey Oat Latte, Butter Croissant, and Garden Toast. Update their names, descriptions, sample prices, and matching entries in the categorized menu together. Guests reach the full menu through the hero button or navigation.

Group-visit links use data-inquiry="Group dining", matching the form option exactly. Selecting an inquiry preserves unrelated entries and invalidates any old draft. Edit the available inquiry types in the select and corresponding links together.

6. Hours, location & map link

Sample hours are daily 7 AM–5 PM, Pacific time. Edit the visit section, footer, and matching FAQ together. Preferred times are not checked against opening hours.

The Google Maps link opens only the general San Diego, California area. There is no iframe or exact business pin. Replace the link with an approved destination and keep its label accurate. New-tab links include noopener noreferrer.

7. Colors, typography & imagery

Edit :root in assets/css/style.css: --bg cream #faf7ee, --panel pale beige #f1ecdd, --ink dark olive #343c26, --muted #666957, --olive #626c3b, --yellow #f2e6ad, and --line #dcdcc9. Georgia headings and Arial body text use system fonts. Preserve readable contrast and focus states.

The five 1536 × 1024 WebP images are hero.webp, latte.webp, croissant.webp, toast.webp, and interior.webp. Replace them with appropriately licensed imagery, revise meaningful alt text, and review object-fit crops at all widths. Hero text remains real HTML over the photograph; the mobile gradient preserves legibility. The plain HTML logo is editable text. The favicon is assets/icons/sun.svg.

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, featured cards, and story layouts stack on phones. Keep primary actions visible without hovering. The expanded mobile menu must fit short screens.

Custom CSS uses ?v=1.1 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, visits, 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, inquiry 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.