webdevpuneet.com

Related Snippets

57 in Mobile Screens category
52–57 of 57

Mobile QR Code Scanner Screen

Mobile Search Filters Screen

Mobile Edit Profile Screen

Mobile OTP Verification Screen

Mobile Empty Cart Screen

Mobile Boarding Pass Screen

Mobile Boarding Pass Screen — Free HTML CSS JS Snippet

Mobile Boarding Pass Screen · Mobile · Plain HTML, CSS & JS · Live preview

CategoryMobile Screens
Tags3D EffectsMobile UICSS Grid

Copy & paste

Source Code

<div class="bps-phone">
  <div class="bps-screen">
    <div class="bps-status"><span>9:41</span><span class="bps-batt"><i></i></span></div>
    <header class="bps-head">
      <button class="bps-back" aria-label="Back">&#8249;</button>
      <h1>Boarding Pass</h1>
      <button class="bps-share" aria-label="Share">&#8631;</button>
    </header>

    <div class="bps-scroll">
      <div class="bps-card" id="bpsCard">
        <div class="bps-face bps-front">
          <div class="bps-airline">
            <span class="bps-logo">&#9992;</span>
            <div><b>Aerolinx</b><small id="bpsClass">Boarding Group B</small></div>
          </div>

          <div class="bps-route">
            <div class="bps-pt"><b>JFK</b><small>New York</small></div>
            <div class="bps-plane">
              <div class="bps-dots"></div>
              <span>&#9992;</span>
            </div>
            <div class="bps-pt right"><b>LHR</b><small>London</small></div>
          </div>

          <div class="bps-grid">
            <div><small>PASSENGER</small><b>A. Whitfield</b></div>
            <div><small>FLIGHT</small><b>AX 204</b></div>
            <div><small>DATE</small><b>Sep 14</b></div>
            <div><small>GATE</small><b id="bpsGate">C12</b></div>
            <div><small>SEAT</small><b>14A</b></div>
            <div><small>BOARDING</small><b>10:35</b></div>
          </div>

          <div class="bps-perf"></div>

          <div class="bps-stub">
            <div class="bps-stub-row"><span>Departs</span><b>11:05 AM</b></div>
            <div class="bps-stub-row"><span>Terminal</span><b>4</b></div>
            <button class="bps-flip-btn" id="bpsFlipBtn">Tap to view barcode &#8635;</button>
          </div>
        </div>

        <div class="bps-face bps-back">
          <p class="bps-back-label">Scan at gate</p>
          <div class="bps-barcode" aria-hidden="true"></div>
          <p class="bps-pnr">PNR <b>Q7X4M2</b></p>
          <button class="bps-flip-btn light" id="bpsFlipBack">&#8635; Back to pass</button>
        </div>
      </div>

      <button class="bps-wallet" id="bpsWallet">
        <span>&#63743;</span> Add to Apple Wallet
      </button>
      <p class="bps-added" id="bpsAdded" hidden>&#10003; Added to Wallet</p>
    </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

Genuine 3D CSS flip via rotateY and backface-visibility — not a cross-fade
Perforated-stub ticket motif drawn with a dashed border and two circular cutouts
CSS repeating-linear-gradient barcode placeholder — zero image requests
Add-to-Wallet button with a realistic disabled → adding → added state sequence
Simulated live gate-change push with a color-flash update
Full flight-detail grid: passenger, flight number, date, gate, seat, boarding time
Phone-frame mockup with status bar, back and share buttons
Scrollable screen body so the card and wallet button both fit on small phones
Zero dependencies, vanilla JavaScript only

About this UI Snippet

Mobile Boarding Pass Screen — Flip-to-Barcode Ticket with Live Gate Update

Screenshot of the Mobile Boarding Pass Screen snippet rendered live

A boarding pass is a ticket UI with a very specific job: show route, time, seat, and gate at a glance from across a security line, then flip to a scannable barcode the instant a gate agent asks for it. This snippet builds that full interaction inside a CSS phone frame — a front face with the standard airline-ticket layout (route, perforated stub, flight details), a genuine 3D flip to a barcode back face, an Apple Wallet-style add button, and a simulated live gate-change push notification.

A real 3D CSS flip, not a fade

The card is two absolutely-positioned .bps-face elements inside a perspective: 1200px container, each with backface-visibility: hidden. The front starts at rotateY(0), the back at rotateY(180deg) — so before any interaction, the back face is already physically behind the front, just rotated out of view. Adding .flipped to the card rotates the front to -180deg and the back to 0deg simultaneously, both eased with the same transition: transform .5s, producing a genuine card-flip rather than a cross-fade. This is the correct technique whenever a UI needs to visually represent "the same object, other side" rather than "a different screen."

The perforated-stub ticket motif

Between the flight-detail grid and the departure/terminal stub, .bps-perf draws a dashed horizontal rule with two circular cutouts positioned at each end via ::before/::after, matching the screen's background color to fake a punched perforation. This single CSS trick is what makes the card read instantly as "ticket" rather than "generic card" — a visual convention borrowed directly from paper boarding passes and still expected in their digital equivalents.

Barcode as pure CSS, not an image

The back face's .bps-barcode element is a single div with a repeating-linear-gradient background alternating white bars of different widths against the dark back-face color — no image request, no canvas, no barcode-generation library. It is a visual stand-in; a production build should render an actual scannable PDF417 or Aztec barcode (via a library like bwip-js) encoded with the real ticket data, since gate scanners need a decodable symbol, not a decorative stripe pattern.

Add to Wallet with a realistic delay

Clicking "Add to Apple Wallet" disables the button, shows an "Adding…" label, and after a brief simulated delay replaces the button with a green confirmation — modeling the real (usually sub-second but non-instant) round trip to generate and register a .pkpass file with the OS wallet app, rather than snapping to success instantly in a way that would feel unconvincing.

A gate change that pushes itself

Four seconds after the screen loads, the gate value updates from C12 to C18 and briefly flashes red before settling back to normal text color — a small simulation of the real-time gate-change push notifications airline apps send, and a reminder that a boarding pass screen is not static: it needs a live-update path from day one, not bolted on later. Wire this to a real WebSocket or polling connection to your flight-ops API in production.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA boarding pass card renders inside a phone frame, front face showing.
  2. 2
    Tap "view barcode"The card performs a real 3D flip to reveal the scannable barcode back face.
  3. 3
    Flip backTap the back-face button to flip the card back to the ticket details.
  4. 4
    Add to WalletClick the wallet button to see the disabled/adding/added state sequence.
  5. 5
    Watch the gate updateAfter a few seconds the gate value changes and briefly flashes red, simulating a live push.
  6. 6
    Swap in real data and a real barcodeReplace the CSS-stripe placeholder with a generated PDF417/Aztec barcode encoding actual ticket data.

Real-world uses

Common Use Cases

Airline and travel booking apps
The canonical use case — a post-checkin boarding pass screen with the flip-to-barcode interaction gate agents and TSA scanners expect.
Event and concert ticket apps
The same front/back flip and barcode pattern applies directly to any scannable admission ticket, not just flights — swap route for venue and seat.
Loyalty and wallet-integration demos
A concrete example of the add-to-wallet interaction pattern used across boarding passes, loyalty cards, and coupons.
Teaching 3D CSS card flips
A clean, real-world reference for perspective, backface-visibility, and synchronized rotateY transitions between two faces of one card.
Related: Mobile Notifications Screen
See the Mobile Notifications Screen for how a real gate-change push would surface to the user before they open this screen.
Related: Order Tracking Timeline
See the Order Tracking Timeline for a related status-over-time pattern worth pairing with a travel itinerary screen.
Related: Mobile Search Filters Screen
See the Mobile Search Filters Screen for a related mobile pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Both faces sit absolutely positioned inside a container with perspective set, each with backface-visibility: hidden. The front starts at rotateY(0) and the back at rotateY(180deg), so the back is already physically behind the front before any interaction. Adding a flipped class to the card rotates the front to -180deg and the back to 0deg at the same time, both eased with the same CSS transition, producing a genuine 3D flip.

No — it is a decorative CSS repeating-linear-gradient standing in for a real barcode. Production use requires generating an actual scannable symbol (commonly PDF417 or Aztec for boarding passes) encoding the real ticket data, typically with a library such as bwip-js, and rendering that as an image or canvas element in place of the CSS placeholder.

The .bps-perf element draws a dashed horizontal line with two circular divs positioned at its ends, colored to match the surrounding background so they read as punched-out holes. This single visual trick is what makes the layout instantly recognizable as a ticket rather than a generic info card.

No — it simulates the interaction sequence (disabled state, "Adding…" label, then a success message) with a setTimeout delay. A real implementation generates a signed .pkpass file server-side and either offers it as a download that iOS/Android wallet apps intercept, or uses a platform-specific wallet SDK to register the pass directly.

A setTimeout fires four seconds after the screen loads, changes the gate text content from C12 to C18, and briefly sets its color to red before reverting to the default color after 1.5 seconds. In production, replace this fixed timeout with a real WebSocket or polling subscription to your flight-operations data source.

Keep a boolean flipped state that toggles a CSS class or conditional class list on the card, and a separate walletState (idle/adding/added) that drives the wallet button\u2019s label and disabled attribute. Drive the gate value from real-time flight data (a subscription or polling hook) rather than a fixed timeout once connected to a real API.