Metro Motors

1. Quick start

Extract the ZIP. Open index.html to explore the page, and open this guide for editing instructions. All required CSS, JavaScript, and photographs are local. No installation or build step is needed. Use a local static server if browser restrictions affect clipboard behavior.

metro-motors/
  index.html
  README.html
  LICENSES.txt
  assets/
    css/style.css
    js/app.js
    images/*.webp
    vendor/bootstrap.min.css
    vendor/bootstrap.bundle.min.js

2. Replace starter business information

Metro Motors is a downloadable business concept. Before public use, replace the reserved phone (951) 555-0146, all corresponding tel:+19515550146 destinations, the reserved recipient hello@metro-motors.example, invented address 1840 Juniper Avenue, Riverside, CA 92507, and starter hours (Monday–Saturday 9 am–6 pm, Sunday closed). The address is not a verified dealership location. Update the information bar, contact section, footer, policies, and JavaScript recipient together.

The brand is editable text. Search index.html for Metro Motors, including page title, description, wordmarks, contact details, policy dialogs, and form wording. Update the draft greeting and subject in assets/js/app.js. The page has no embedded map; add an exact external directions link only after confirming the real address.

3. Inventory data and photographs

Edit the inventory array near the top of assets/js/app.js. Its six vehicle records, names, asking prices, mileage, transmissions, and local references are starter examples, not real stock. Generic names avoid claiming a verified year, make, or model from a photograph. All vehicle data and photo matches must be replaced or verified before launch. No VINs, model years, fuel types, histories, certifications, warranties, or title claims are included.

Keyword search matches names, styles, and references. It combines with body-style filters and price/mileage sorting. The result count updates accessibly; zero matches show a reset action. Reset filters restores the complete list without altering an inquiry selection. Vehicle details show matching data and an inquiry action. Selecting a vehicle preserves other form entries. Inventory is local and does not synchronize with a dealer feed.

Images are local WebP photographs from Unsplash. They are visual starter material and do not establish actual dealership stock, premises, or staff. The image named sedan.webp depicts a coupe; the filename is only an asset key and its displayed category is Coupe. The image named coupe.webp depicts a sedan and is displayed as Touring Sedan. The image named touring.webp depicts a hatchback. For clarity, you may rename assets and their matching data keys when replacing inventory.

Use your own licensed, accurately matched vehicle photography. Crop the card images consistently and keep wheels and bodywork visible where possible. Hero uses object-fit:cover and object-position; adjust these in CSS for your replacement. Replace all alt descriptions to match new images. Hero loads eagerly; supporting images load lazily. No invented vehicle offers or review ratings are included in structured data.

4. Inquiry workflow

The form requires only name and valid email. Callback phone, vehicle, date, time, and message are optional. Inquiry type offers Vehicle Question, Test Drive, Trade-In Question, or General Question. Not sure yet allows a general inquiry without choosing a vehicle.

Prepare email draft validates the form and displays a reviewable draft. Open email app uses an encoded mailto link; the visitor must send the message themselves. Copy draft uses the Clipboard API when permitted. If copying fails, the draft text is selected and manual-copy instructions appear. Editing an entry invalidates the old draft. Reset clears the fields, vehicle selection, and draft.

Replace hello@metro-motors.example in the JavaScript mailto recipient and all HTML contact links. There is no automatic submission, lead receipt, CRM connection, backend storage, live booking, inventory hold, payment processing, credit application, instant valuation, or financing approval. Connect an approved external service separately if needed; update labels and policies to describe its actual behavior.

The business timezone defaults to America/Los_Angeles inside localToday(). Dates before the current dealership-local day are rejected. Preferred times are explicitly Pacific Time. If changing city/timezone, update the JavaScript timezone, form note, and draft wording. No business-hours or live-slot validation is performed. The dealership must confirm appointments directly.

Do not invite Social Security numbers, licenses, financial records, credit information, or payment details through this inquiry. Form entries are not saved to localStorage/sessionStorage or sent to a page server. The explicit email handoff passes the draft to the visitor's email app. No analytics are included. Email providers and hosting systems have separate practices.

5. Copy, feedback, and policies

Replace starter owner-voice operating examples with the dealership's actual approach. The Jamie R. and Alex M. quotes and names are invented starter copy; replace them with verified, authorized customer feedback or remove the section before public use. They are not verified reviews or attributed to a review platform.

Do not add claims about licensing, franchise status, experience, inspections, accident history, warranties, guaranteed approval, fees, prices, or lender relationships without evidence. No dedicated financing section is included. Trade-ins invite discussion and direct assessment; no instant values are calculated. Ask the dealership to verify all prices and applicable charges.

Edit the FAQ array in app.js. Bootstrap collapse starts with all questions closed and allows one answer open at a time. The grid is two columns on large screens and one on smaller screens, with content-driven heights. Footer Privacy and Terms of Use open Bootstrap dialogs. Their current text explains the delivered draft workflow. Have the business review and adapt these policies and its actual provider practices before launch; no legal certification is represented.

6. Design and typography

Edit CSS variables at the start of style.css: navy #142536, petrol blue #245B73, paper #F7F8F6, slate #4A5966, copper #B45B32. Font stacks use system Arial/Helvetica with Georgia italic accents; there are no downloadable font dependencies.

Verify wrapping and touch targets after changing typography. Hero and content grids reflow at 991px and 767px; very narrow layouts adapt below 359px.

7. Header, mobile controls, and dialogs

The information bar and navigation share one sticky wrapper. JavaScript measures the pinned rows and updates --header-height for anchor offsets and mobile menu limits. The expanded mobile menu scrolls independently. The bottom request/call bar includes safe-area padding and sits below dialogs. Footer clearance prevents overlap. Bootstrap manages dialog focus, Escape, and focus return; the vehicle inquiry action moves focus to the lead form after the dialog closes.

Keep keyboard focus styles on links, buttons, forms, filters, and FAQ controls. Reduced-motion preferences disable smooth scrolling and transitions. Custom CSS and JavaScript include ?v=1.0 references. Increase relevant version tokens after edits and distribute updated HTML/assets together. A version token does not force a hosting or HTML cache refresh.

The inventory search and sort controls share equal-width columns and a 48px height. Their default border is neutral gray. Pointer selection does not add the copper outline; keyboard focus uses a petrol-blue indicator. Edit the matched-control rules at the end of assets/css/style.css, keeping both columns equal.

8. Launch checklist

• Replace all contacts, hours, address, stock, asking prices, specifications, and photos; verify each match.
• Replace or remove starter testimonials and unsupported operating examples.
• Set the recipient and local timezone; verify phone and email destinations.
• Review policies, price wording, trade-in guidance, and actual external service behavior.
• Test filters together, empty results, sorting, details dialogs, vehicle preselection, draft/copy/reset, and keyboard controls.
• Check desktop, tablet, 390px/320px phones, short screens, mobile menu, sticky bars, and dialog scrolling.
• Check every local file loads and keep license notices with redistributed dependencies.

9. Troubleshooting

No cars appear: check array syntax and unique IDs in app.js, then inspect the console for JavaScript errors. Wrong/missing image: check the exact image basename and .webp filename. No email app: use Copy draft or manually select the draft text. Copy is unavailable: clipboard access may require HTTPS or localhost; manual copying remains available. Date rejected: check the configured business timezone and current local date. Old styling: confirm the HTML references the matching CSS/JS versions before investigating caches. Changes affect layout: review narrow-screen wrapping and combined header offsets.

10. Dependencies and licensing

Bootstrap 5.3.3 CSS and bundled JavaScript are local and MIT-licensed. See LICENSES.txt for the dependency notice and image source links. System fonts require no bundled font files. Keep relevant notices when redistributing third-party components.