A clear start.
A page that’s yours.

Quick start

Open index.html in a current browser. The template runs without installation, a build process, or an internet connection. Open README.html for this guide. For clipboard access, a browser may require HTTPS; a selectable manual-copy fallback is included.

Your files

wrenchgo-mobile/
├── index.html
├── README.html
├── LICENSES.txt
└── assets/
    ├── css/style.css
    ├── js/app.js
    ├── fonts/manrope.woff2
    ├── images/mobile-mechanic.webp
    ├── images/favicon.svg
    └── vendor/
        ├── bootstrap.min.css
        └── bootstrap.bundle.min.js

All required styles, scripts, fonts, icons, and imagery are local. Keep this folder structure intact when moving the template.

Make it your business

Edit the wordmark, headline, section copy, navigation, hours, contact details, services, and FAQs in index.html. Search the entire document for each contact string, including the policy dialogs and footer. Keep phone links in international format, such as tel:+19515550146.

Riverside, Corona, Moreno Valley, Mon–Sat 8am–6pm / Sun closed, the listed service categories, and all operating descriptions are starter content. Confirm or replace them before launch. Do not add credentials, guarantees, pricing, vehicle support, response promises, or reviews without appropriate support. There are no customer testimonials or review scores included.

Replace the hero with appropriately licensed, relevant imagery. Photography must not be presented as your actual team, vehicle, or completed job unless it is. Describe the visible scene naturally in alt text. Update the page title and description in the document head.

Services and preselection

Six service panels link to the request form. Each link’s data-service value must exactly match its corresponding <option> in the form’s #service select. Change the visible title, description, and matching option together.

Clicking a service selects it without clearing the visitor’s other entries. A prior draft becomes invalid if a selection changes. “Not sure yet” supports general inquiries. Verify actual repair scope, supported vehicles, tools, and location requirements. Some work may require workshop equipment.

No diagnostic fees, travel charges, price lists, repair guarantees, or universal compatibility claims are supplied. Add only confirmed terms and review the related FAQs and policies.

Coverage and business settings

The settings object near the top of assets/js/app.js controls the recipient, business timezone, and service-area list:

const settings = {
  recipient: 'hello@wrenchgo-mobile.example',
  timezone: 'America/Los_Angeles',
  serviceAreas: ['Riverside', 'Corona', 'Moreno Valley']
};

Keep the #coverage-city options, #area-list datalist, visible city chips, header, hero link, footer, FAQs, metadata, and JavaScript list consistent. Selecting a listed city populates the inquiry’s general-area field; typing in that field updates the coverage selector. “Another area” allows a direct coverage question.

The checker compares a city with the configured list. It does not validate an address, calculate a service radius, use GPS, estimate travel time, or check live availability. Each visit still requires direct confirmation. No map or third-party location service is embedded.

Visit requests and email drafts

Only name and valid email are required. Callback phone, service, vehicle, general area, preferred date/window, and message are optional. The form deliberately avoids exact addresses, VINs, registration plates, identity documents, payments, and uploads.

1. The visitor chooses Prepare email draft.
2. Required details and any preferred date are validated.
3. A reviewable text draft appears on the page.
4. Open email app opens an encoded mailto draft; Copy draft attempts clipboard access.
5. If clipboard access is unavailable, the text is selected for manual copying.
6. The visitor sends the email themselves and waits for a direct response.

Changing relevant entries invalidates the old draft. Reset clears entries, selected service/area, coverage response, and draft. Date validation rejects past dates in the configured timezone. Time windows are preferences in Riverside local time; no business-hours or live-slot validation is provided. Update all local-time wording if changing the timezone.

There is no automatic sending, contact endpoint, backend storage, CRM, dispatch, booking engine, payment flow, or confirmed appointment. No personal entries are saved in localStorage/sessionStorage, logged to the console, or added to the page URL. The visitor’s email provider handles the explicit mailto handoff. A genuine scheduler link can be integrated in a later change; none is included here.

Colors, typography, and full-width hero

Change the CSS custom properties at the top of style.css to adjust the palette. The primary action uses near-black text on electric lime. Keep sufficient contrast in text, controls, selected states, and focus rings.

The hero sits outside the constrained content grid. Its image and overlay reach the viewport edges; .page-wrap aligns the text. Tune .hero-image object-position and .hero-shade for new photographs at desktop and phone widths. Avoid placing the hero inside a fixed-width container. The desktop line break is hidden on phones.

Manrope is served locally. Main headings use an 800 weight and responsive sizes. The hero is approximately 70–105px on larger screens, 42–66px on phones; section headings are 34–52px desktop and 32–43px phones. Main text is 18px desktop and 17px mobile. Hero support is 19px desktop and 17px mobile. Service copy is 16px desktop and 17px phones. FAQs and policies are 16px. Controls are 16px; labels 13–14px; help text 11–13px. Buttons are 13–15px. Footer links are 12px desktop and 14px phones, with a 12px bottom line. Sizes respond to available width.

Forms use equal grid columns on desktop and one column on phones. Controls have matching heights, dark backgrounds, visible borders, and lime focus. Native date/select appearance may vary by browser; preserve accessible focus.

Sticky layout and accessible controls

The information bar and navigation share one sticky header. A ResizeObserver measures #pinned-rows and updates --header-height for anchors and the mobile menu. The expanded menu is excluded from that measurement. Recheck offsets after changing header content.

A Request a visit / Call bar appears below 576px. Its safe-area padding and page-bottom clearance keep content reachable. Dialogs sit above the bar and header. FAQs use Bootstrap collapse with one answer open at a time. Policy dialogs support Escape, focus trapping, scrolling, and focus return.

Keep semantic headings, form labels, alt text, sufficient contrast, focus visibility, and comfortable touch targets. Reduced-motion preferences disable smooth scrolling and transitions. Footer Privacy and Terms of Use controls align with other links; no copyright year is included.

Custom CSS and JS use ?v=1.0 cache tokens. Increase affected tokens when revising those assets, and deliver the matching HTML and asset files together.

Policies and launch checklist

Review Privacy and Terms of Use for your actual business practices, hosting setup, email services, and any later integrations. They describe the supplied client-side draft behavior; they do not replace your business’s policy review.

• Verify every service, coverage area, vehicle claim, hour, contact, and pricing statement.
• Replace the reserved example email and configure the JavaScript recipient.
• Use authorized imagery and customer feedback; remove unsupported statements.
• Check desktop, tablet, 390px, 320px, and short-screen layouts.
• Test service selection, coverage, required fields, date handling, drafts, copying, editing, and reset.
• Test phone links, navigation, FAQ collapse, mobile menu, and policy dialogs using keyboard and touch.
• Check that images load and the hero crop keeps text readable.
• Confirm requests require direct follow-up and no booking/dispatch is implied.

Troubleshooting

Images or styling missing: preserve the relative folder paths and inspect the requested asset filenames. The template has no remote asset dependency.

Email app does not open: the browser/device needs a configured email handler. Use Copy draft or manually select the visible text, then send from your preferred email service.

Copy is blocked: use the selectable text fallback. Clipboard access depends on browser and page context.

Past-date validation seems unexpected: inspect the configured business timezone and the corresponding local-time labels. The visitor’s device timezone is not used for the minimum date.

Service selection does not match: ensure each data-service value exactly matches a form option.

Anchor headings hide behind navigation: preserve the pinned-rows wrapper and its ResizeObserver. Check whether custom header content is outside the measured rows.

An edit appears missing: verify the exact file/page and asset tokens being viewed before assuming caching.

Dependencies and notices

Bootstrap 5.3.3 is included locally under its MIT license. Manrope is included under the SIL Open Font License 1.1. Full notices are in LICENSES.txt. Icons and favicon are local SVG artwork. The template needs no additional icon or JavaScript library.