Roam Food Truck

Quick start

1. Extract roam-food-truck.zip and open roam-food-truck/index.html.
2. Replace the demonstration brand details, Sacramento stops, hours, sample menu and contact information.
3. Set your inquiry email in assets/js/main.js and update every visible email and phone link in index.html.
4. Review food and truck photography, menu ingredients, dietary wording and both footer policies.
5. Check the page on a desktop, tablet and phone. Prepare a test draft, review it and send it from your email application to verify receipt at your real address.

The form prepares an email draft. Nothing is submitted or sent by the page, and no event is booked. Visitors must send the draft themselves. Automatic delivery requires a backend.

1. Overview & features

Roam Food Truck is a dark Bootstrap 5 landing page for a mobile food business. The design uses a full-width night-market hero, lime accents, street-food photographs, a weekly-stop strip, menu filters, weekly schedule, short brand story, catering inquiry form, visit details and FAQs.

Footer Privacy and Terms of Use links open accessible Bootstrap dialogs. The pinned main menu remains available while scrolling. There are no payments, online orders, live vehicle tracking, confirmed bookings, accounts or automatic email submissions.

2. Package files

HTML5, CSS3, vanilla JavaScript and Bootstrap run without a build process. Body text uses system Arial/Helvetica. The page needs no external fonts, CDN, embedded map or API key.

3. Business details & content

Edit all repeated details in index.html, including the page title, hero, contact section, footer and policy dialogs.

• Business: Roam Food Truck.
• Phone: (916) 555-0148; telephone link: tel:+19165550148.
• Email: hello@roamfoodtruck.example.
• Base city: Sacramento, California.
• Sample public stops: Thursday 11 AM–3 PM, Friday 5–9 PM, Saturday 12–8 PM, Pacific time. No public stops Sunday–Wednesday.

The phone is fictional, the example email cannot receive inquiries, and the event names and schedule are illustrative. Replace these with actual approved details. The footer contains a demonstration notice: remove or adapt it only once all demonstration information is replaced.

Keep the brand story accurate. The template includes no customer testimonials, awards or operating-history claims.

4. Brand, typography & spacing

The palette lives in :root in assets/css/style.css:

--ink: #0c0f0f;
--surface: #141817;
--lime: #ceff32;
--ivory: #f7f4e9;
--muted: #bdc2ba;
--line: #353b36;

The header and footer logo is plain HTML text, with no logo image, special font, rotation or decorative underline. To rename it, edit Roam and FOOD TRUCK in both brand blocks in index.html:

<span class="wordmark">
  <span class="brand-name">Roam</span>
  <span class="brand-tagline">FOOD TRUCK</span>
</span>

For a longer business name, reduce .brand-name font size in assets/css/style.css and recheck the mobile header. The two lines use system Arial/Helvetica and your existing ivory/lime colors. Update the home links’ aria-label text to match the new business name.

Replace assets/icons/truck.svg for the favicon. Headings use the locally bundled Nimbus Sans Narrow Bold font through the “Roam Display” font family. Body text uses Arial/Helvetica. Font redistribution notices are included in LICENSES.txt.

Edit h1, h2, .section and .container for sizing and spacing. Preserve readable contrast, visible focus indicators and touch-friendly controls. Recheck line wrapping after changing copy or fonts.

5. Full-width hero

The hero uses assets/images/truck-night.webp as a full-width image behind the text. .hero-shade supplies the dark overlay, while .hero-copy limits the text width. The headline, supporting text and buttons are real HTML.

Use a wide photograph with darker space on the left and the truck or food toward the right. The supplied image is 1536 × 1024. CSS uses object-fit: cover and responsive object-position; check desktop and phone crops before accepting a replacement. Update image dimensions and alt text if changing the source.

The primary actions link to the menu and schedule. The hero image is prioritized; photos lower on the page are lazy-loaded.

6. Menu & category controls

Edit #menu for the three featured dishes: Roam Burger ($12), Street Tacos ($11), and Loaded Fries ($8). Classic Fries ($5) and Fresh Limeade ($4) appear in the extras list. All prices and ingredients are samples.

Featured cards use .menu-item with a data-category value of burgers, tacos or sides. Filter buttons use matching data-filter values, with all showing every featured card. Extras remain visible for every filter.

<button class="filter" data-filter="tacos" aria-pressed="false">Tacos</button>
<article class="col-md-4 menu-item" data-category="tacos">…</article>

Buttons support normal Tab, Enter and Space keyboard use. The selected filter updates aria-pressed; a live region announces the visible dish count. Update captions, ingredients and dietary guidance with menu changes. No downloadable menu or allergen certification is included.

7. Weekly schedule & current-stop strip

Update the three schedule rows in #schedule, the truck hours in #find, and the STOPS array in assets/js/main.js together.

const TIME_ZONE = 'America/Los_Angeles';
const STOPS = [
  {day:4, name:'Riverside Market', hours:'11 AM–3 PM', end:15},
  {day:5, name:'Downtown Commons', hours:'5–9 PM', end:21},
  {day:6, name:'Midtown Meet-up', hours:'12–8 PM', end:20}
];

Day numbers run from Sunday (0) to Saturday (6). end is the ending hour in 24-hour Pacific time. The strip shows TODAY on a scheduled day before its ending hour, otherwise NEXT STOP. TODAY means a stop is scheduled that day, not that service has already started. The weekly pattern repeats; it is not a live location feed or a dated event calendar.

Update the fallback strip text in HTML as well. If your schedule varies by date or requires minute-level end times, adapt the data and selection logic or replace the strip with a manually maintained announcement.

8. Location placeholders

The weekly schedule uses demonstration stop names and the placeholder “Exact location announced soon.” No real street addresses or external map links are included.

Replace each location placeholder in #schedule only when you have confirmed your actual trading location. Keep the schedule, contact information and FAQs consistent.

If you choose to add external directions later, use your confirmed address, identify links that open in a new tab, and update the Privacy and Terms of Use wording to describe the external service. No map embed, iframe, geolocation request or map dependency is included.

9. Image map

All four images are 1536 × 1024 WebP. The photographs are illustrative and do not verify an operating food truck. Replace them with suitable, authorized business photographs where needed.

Preserve filenames or update every HTML reference. Maintain descriptive alt text and actual width/height attributes. Avoid placing text inside replacement photos because site headings and controls must remain accessible HTML. Check cover crops at desktop, tablet and phone widths.

10. Catering form & preselection

The form ID is cateringForm. Required fields are name, email, event type, preferred date, estimated guests, and location. Phone, preferred time and a message are optional. Estimated guests must be a whole number from 1 to 1,000; this is an inquiry range, not a capacity commitment.

Date validation uses TIME_ZONE in JavaScript, set to America/Los_Angeles. Past dates are rejected against the business’s calendar date. A preferred time is collected in Pacific time but not checked against live availability or serving hours. Change labels and timezone together.

Wedding, Corporate event and Private party buttons use data-event values that match the event selector. They update only the event type and preserve other entries. Changing any form field invalidates the old draft; prepare it again before sending.

Browser-native validation handles required fields, email, date and guest count. Name and location also reject whitespace-only values. Reset clears the form, validation messages and draft. No entries are stored by the page.

11. Email draft & backend

const BUSINESS_EMAIL = 'hello@roamfoodtruck.example';
const BUSINESS_PHONE = '(916) 555-0148';

Update these constants in assets/js/main.js and all HTML contact links. The “Send Inquiry” button validates the form and prepares a reviewable draft; it does not send an email. On valid completion, the form shows the draft, an Open email app link and a Copy draft button. No request is automatically sent, no order is placed and no event is confirmed.

Copy uses the browser clipboard when permitted. If unavailable, the text is selected for manual copying. Email clients may limit long drafts and need a configured account. Phone and email links provide alternatives. Opening the email app still requires the visitor to review and send.

For automatic delivery, replace the submit handler with a secure backend. Validate on the server, add spam controls, keep secrets off the client, preserve entries on errors, and display success only after confirmed acceptance. Update the form and policies to match the new behavior and test actual receipt.

12. Navigation, FAQs & policies

The sticky header is #siteHeader; the Bootstrap mobile menu is #mainNav. Navigation links target #menu, #schedule, #story, #catering and #find. JavaScript tracks the collapsed header height for anchor offsets and closes the mobile menu before scrolling. The expanded menu can scroll on short screens.

Four FAQ items use #faq0 through #faq3. Keep button targets and aria-controls aligned with their corresponding answers.

The footer controls labeled Privacy and Terms of Use open #privacyModal and #termsModal. Bootstrap handles dialog focus trapping, Escape, close controls and return focus. Dialogs layer above the pinned header. Keep Bootstrap loaded before main.js.

Review both policies before launch. Their included guest-facing wording is a starting point based on the page’s email-draft behavior. Update the wording for real business practices, contact details and any added services. Keep buyer setup instructions outside these dialogs.

The page includes a skip link, visible focus styles, labels, descriptive alt text and reduced-motion support. Preserve them while customizing.

13. Metadata, responsiveness & asset versions

Update the title, meta description, theme color and favicon in index.html. No canonical URL, structured data, sitemap, social platform links or social preview metadata is configured. Use real production details if you add these. This README is marked noindex.

Check 320–390px phones, tablet widths and desktop layouts. Do not place content in fixed-width containers that cause horizontal scrolling. Long emails and draft text are allowed to wrap. The tablet uses the same pinned navigation; phones use the menu toggle.

assets/css/style.css?v=roam-3
assets/js/main.js?v=roam-1

Change the affected version token whenever you change custom CSS or JavaScript. Keep updated index.html and its matching assets together. These queries refresh asset URLs but do not guarantee that cached HTML or every hosting cache has refreshed.

14. Launch checklist

• Replace sample identity, phone, email, stops, addresses, hours, menu, prices and ingredients everywhere.
• Update the JavaScript recipient, phone, timezone and weekly-stop data.
• Replace location placeholders with confirmed trading details when available.
• Use authorized photography and keep captions and alt text accurate.
• Review the brand story, dietary note, guest-facing policies and demonstration notice.
• Test the pinned header, anchor offsets, menu toggle, filters, FAQs and both policy dialogs.
• Test invalid and valid forms, past dates, whole-number guest counts, preselection, draft invalidation, copy, email handoff and Reset.
• Verify real email receipt after sending from an email app.
• Check desktop, tablet and small-phone layouts and keyboard navigation.
• Keep local assets, versioned references and dependency notices together.

The package requires no build step. Preserve relative paths and filename case. LICENSES.txt contains the relevant dependency notices; this guide does not create additional purchase terms or support commitments.

15. Troubleshooting