webdevpuneet.com

Related Snippets

57 in Mobile Screens category
36–41 of 57

Mobile Ride-Hailing Screen

Mobile Food Order Screen

Mobile Music Player Screen

Mobile Banking Screen

Mobile Checkout Screen

Mobile Feed Screen

Mobile Ride-Hailing Screen — Free HTML CSS JS UI

Mobile Ride-Hailing Screen · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
TagsSVGMobile UI

Copy & paste

Source Code

<div class="mrd-phone">
  <div class="mrd-screen">
    <div class="mrd-map">
      <div class="mrd-status"><span>9:41</span><span class="mrd-batt"><i></i></span></div>
      <button class="mrd-back" aria-label="Back">&#8249;</button>
      <svg class="mrd-route" viewBox="0 0 260 320" preserveAspectRatio="none">
        <path d="M40 60 Q120 90 130 170 T210 250" fill="none" stroke="#6366f1" stroke-width="5" stroke-linecap="round" stroke-dasharray="6 10"/>
      </svg>
      <span class="mrd-pin from">A</span>
      <span class="mrd-pin to">B</span>
      <div class="mrd-car" id="mrdCar">🚗</div>
    </div>

    <div class="mrd-sheet">
      <div class="mrd-grip"></div>
      <div class="mrd-trip">
        <div class="mrd-tr"><span class="mrd-dot d1"></span><div><small>Pickup</small><b>Grand Central Station</b></div></div>
        <div class="mrd-tr"><span class="mrd-dot d2"></span><div><small>Drop-off</small><b>Brooklyn Museum</b></div></div>
      </div>

      <div class="mrd-tiers" id="mrdTiers">
        <button class="mrd-tier active" data-eta="4" data-price="14.50"><span class="mrd-ic">🚗</span><div class="mrd-tinfo"><b>Standard</b><small>4 min away</small></div><span class="mrd-tp">$14.50</span></button>
        <button class="mrd-tier" data-eta="3" data-price="22.00"><span class="mrd-ic">🚙</span><div class="mrd-tinfo"><b>Comfort</b><small>3 min away</small></div><span class="mrd-tp">$22.00</span></button>
        <button class="mrd-tier" data-eta="6" data-price="32.75"><span class="mrd-ic">🚘</span><div class="mrd-tinfo"><b>Premium</b><small>6 min away</small></div><span class="mrd-tp">$32.75</span></button>
      </div>

      <div class="mrd-pay">
        <span class="mrd-pic">VISA</span><span>•••• 4242</span><em>&#8250;</em>
      </div>
      <button class="mrd-confirm" id="mrdConfirm">Confirm <b id="mrdCTier">Standard</b> · <span id="mrdCPrice">$14.50</span></button>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

CSS-only map
Street grid and park drawn with gradients — no tiles.
SVG dashed route
A quadratic path with stroke-dasharray.
Teardrop pins
Classic markers from a single rotated element.
Tier selection
Accent border moves; price rewrites the CTA.
Attribute-driven price
Confirm reads data-price and data-eta.
State reset
Changing tier clears the matched confirm label.
Car animation
Web Animations drives the car to the destination.
No dependency
Pure HTML, CSS, and vanilla JavaScript.

About this UI Snippet

Mobile Ride-Hailing Screen — Ride Booking UI

Screenshot of the Mobile Ride-Hailing Screen snippet rendered live

A ride-hailing screen has a signature split: a map filling the top with pins and a route, and a bottom sheet where you pick a ride tier and confirm. This snippet builds a complete, interactive one inside a CSS phone frame — with a gridded map drawn entirely in CSS, an animated dashed route, selectable ride tiers that update the confirm price, and a car that drives along the route when you book — in HTML, CSS, and vanilla JavaScript with no map library or API key.

A map with no tiles

The map is pure CSS: two repeating linear gradients cross to form the street grid via background-size, and a blobby ::after with an organic border-radius suggests a park. The route is an inline SVG <path> with a quadratic curve and a stroke-dasharray, giving the dotted trip line without any external tiles — so the whole screen loads instantly and works offline, unlike a real map embed.

Teardrop pins

The pickup and drop-off pins use the classic map-marker shape made from a single element: a circle with three rounded corners and the fourth squared, rotated 45 degrees so the point faces down. Green marks the origin and indigo the destination, matching the dots in the trip summary below.

Tier selection that drives the price

Each ride tier is a button carrying data-price and data-eta. Selecting one moves an accent border and background to it and rewrites the confirm button's tier name and price from those attributes, so the call-to-action always reflects the current choice. Switching tiers also resets the confirm button out of its matched state — you would not want a stale "finding your Premium" label after changing your mind.

Booking animates the car

Tapping confirm turns the button green, changes its label to "Finding your …", and animates the car marker along a three-keyframe path from pickup toward drop-off using the Web Animations API with fill: 'forwards' so it holds at the destination. It is a lightweight way to convey "searching / en route" without a real GPS feed.

Accessibility and performance

Each ride tier is a real <button> and the confirm control is a button too, so the whole booking flow works from the keyboard and screen readers announce each option. When you adapt it, add aria-pressed to the selected tier so its chosen state is announced, and give the confirm button an aria-live region for the "finding your ride" status so the change is spoken, not just shown. The decorative map is inert — no focus traps, no listeners — so it never interferes with tabbing to the sheet controls. Performance is a strong point of the tile-free approach: the map is a handful of CSS gradients and one SVG path with no network requests, so it paints instantly and adds nothing to bundle size or runtime. The car animation runs through the Web Animations API, which the browser can composite off the main thread, and selecting a tier only rewrites two text nodes and toggles classes. For real geography you would swap in a map SDK, but the sheet, tiers, and confirm logic stay exactly as they are.

Reusing it

Swap the CSS map for your real map SDK, feed tiers and prices from your pricing API, and wire confirm to your booking endpoint. Keep the bottom-sheet pattern as-is — it is framework-agnostic. Present it inside a phone mockup, or pair it with a mobile map location card for a fuller navigation flow.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA ride screen renders with a CSS map, route, pins, and a bottom sheet of ride tiers.
  2. 2
    Pick a ride tierTap Standard, Comfort, or Premium — the selection border moves and the confirm price updates.
  3. 3
    Read the confirm buttonIt always shows the chosen tier name and its price so the action is unambiguous.
  4. 4
    Confirm the rideThe button turns green, switches to "Finding your…", and the car drives along the route.
  5. 5
    Change your mindSelecting a different tier resets the confirm button out of its matched state.
  6. 6
    Wire your backendSwap the CSS map for a real SDK and confirm against your booking API.

Real-world uses

Common Use Cases

Ride-hailing booking screens
Split the screen into a tile-free CSS map above and a bottom sheet below, with the selected ride tier rewriting the price on the confirm button.
Delivery tracking views
Reuse the animated dashed route for an order tracking timeline, swapping ride tiers for courier stages.
Bottom sheet patterns
Study a ride-specific take on the bottom sheet, where the sheet holds tiers and the map keeps the route visible.
Location context cards
Pair with a location card to show the pickup and drop-off addresses clearly beside the route on the map.
CSS map reference
Learn how a street grid and park are drawn using gradients alone, with teardrop pins made from a single rotated element and an SVG dashed route.
Related: Mobile Food Order Screen
See the Mobile Food Order Screen for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

No. The map is drawn entirely in CSS: crossing linear-gradient backgrounds form the street grid and a blobby ::after suggests a park, while the route is an inline SVG path with a dashed stroke. This loads instantly and works offline. To use real geography, replace the map div with your map SDK and keep the bottom sheet unchanged.

Each pin is a single element with border-radius set to round three corners and square the fourth (50% 50% 50% 0), then rotated 45 degrees so the squared corner points downward. That produces the familiar map-marker teardrop from one div, with the letter counter-rotated to stay upright.

Each tier button carries data-price and data-eta attributes. Selecting a tier reads those attributes and rewrites the tier name and price inside the confirm button, so the call to action reflects the current choice. It also clears the matched state so a previous booking label does not linger after you switch tiers.

Confirm calls the Web Animations API on the car marker with a three-keyframe path from the pickup pin toward the drop-off pin, using fill: forwards so it holds at the end. It is a visual stand-in for a searching or en-route state; in production you would move the marker from real driver coordinates over a WebSocket.

Render the tiers from data and hold the selected tier in state; derive the confirm label and price from it rather than editing the DOM. Bind the active class to the selection and the matched class to a booking flag. Replace element.animate with a driver-position stream and animate the marker via state or a ref. Tailwind expresses the map grid, pins, and sheet with utilities.