Source Code

<div class="wrap">
  <div class="wifi-card">
    <div class="wifi-head">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1"/></svg>
      <div>
        <h3>Guest WiFi</h3>
        <p>Complimentary internet access</p>
      </div>
    </div>

    <div class="wifi-qr" id="wifiQr" aria-label="QR code to join guest WiFi network"></div>

    <div class="wifi-field">
      <span class="wifi-field-label">Network name (SSID)</span>
      <div class="wifi-field-row">
        <span class="wifi-field-val">Harbor-Guest</span>
        <button class="wifi-copy-btn" data-copy="Harbor-Guest" data-target="ssid">Copy</button>
      </div>
    </div>

    <div class="wifi-field">
      <span class="wifi-field-label">Password</span>
      <div class="wifi-field-row">
        <span class="wifi-field-val" id="wifiPassText">••••••••••</span>
        <button class="wifi-eye-btn" id="wifiEye" aria-label="Show password">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
        </button>
        <button class="wifi-copy-btn" data-copy="Sunset&2024!" data-target="pass">Copy</button>
      </div>
    </div>

    <p class="wifi-note" id="wifiNote">Password hidden — tap the eye icon to reveal it before sharing.</p>
  </div>
</div>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Guest WiFi Access Card — Free HTML CSS JS Snippet

Guest WiFi Access Card · Cards · Plain HTML, CSS & JS · Live preview

TagsClipboard APISVGCSS Grid

What's included

Features

Deterministic seeded pattern generator with authentic-looking QR finder-corner markers, no external QR library
Password masked with bullet characters by default, revealed only via an explicit eye-icon tap
Copy-to-clipboard for both SSID and password using the async Clipboard API
Automatic fallback to a hidden-textarea + execCommand copy method for browsers without Clipboard API support
Button briefly relabels to "Copied!" with a green tint as inline confirmation, no toast or alert needed
Helper note text changes based on whether the password is currently hidden or revealed
Monospace field styling makes the SSID and password unambiguous to read and retype if needed
Compact card sized for a lobby kiosk, printed tent card, or in-app "Connect to WiFi" screen

About this UI Snippet

Guest WiFi Access Card — QR Pattern, Masked Password Reveal & Copy-to-Clipboard

Screenshot of the Guest WiFi Access Card snippet rendered live

The universal ritual of asking a host for the WiFi password — squinting at a router sticker, typing a long mixed-case string on a phone keyboard — is exactly what this card exists to replace. It presents a guest network's SSID and password as a compact, shareable card: a scannable QR pattern for one-tap join, a masked password that stays hidden by default, and copy buttons that put either value on the clipboard without anyone needing to read or retype it.

A deterministic QR-style pattern without a QR library

seededPattern() hashes the SSID-and-password string into a numeric seed, then walks a 21×21 grid deriving each cell's on/off state from that running hash — plus a dedicated finderPattern() function that draws the three square "finder" corner markers real QR codes use to help a scanner locate and orient the code. This produces a visually authentic-looking, deterministic pattern (the same credentials always render the same grid) without pulling in a QR-encoding library. For production use where the pattern must actually decode as a scannable QR code, swap renderQr() for a real QR-encoding library that encodes a WIFI:T:WPA;S:<ssid>;P:<password>;; payload string — the rest of the card (copy buttons, reveal toggle) works identically either way.

Password hidden by default, revealed on demand

wifiPassText shows a fixed-width bullet mask until the eye-icon button is clicked, at which point revealed flips and the real REAL_PASSWORD constant is swapped in. This matters for any shared or public-facing screen (a lobby kiosk, a printed card on a cafe counter, a wall-mounted tablet) — a password visible at all times to anyone glancing at the screen defeats the point of having one, so requiring a deliberate tap to reveal it adds a small but real layer of intent before it's exposed.

Copy buttons that work with or without the async Clipboard API

copyText() tries navigator.clipboard.writeText() first (the modern async Clipboard API), but falls back to creating an off-screen <textarea>, selecting its contents, and calling the older document.execCommand('copy') if the async API isn't available — some embedded browsers, older devices, and non-HTTPS contexts still lack Clipboard API support, and a guest WiFi card is exactly the kind of interface likely to be viewed from an unpredictable range of guest devices rather than a controlled internal environment.

Feedback that confirms without demanding attention

Each copy button briefly relabels itself "Copied!" (with a green tint) for 1.6 seconds before reverting, rather than opening a toast or alert — a guest who copied the password already knows what they copied; they just need confirmation the click registered before switching to their WiFi settings screen to paste it in.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the QR pattern in this demo is only visually authentic rather than a real scannable code, and what the standard WIFI: URI payload format looks like so a real QR-encoding library could generate a genuinely joinable code from the same SSID and password values. The same assistant can help optimize it — for instance asking whether the seeded hash function used for the placeholder pattern has any bias that makes it look less randomly distributed than a real QR code's error-correction-encoded data would. It's also useful for extending the card: ask it to add a password-strength or expiry indicator, support multiple guest networks in a tabbed view, or wire the copy buttons to also fire an analytics event so a venue can see how often guests use copy versus scanning. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a "guest WiFi access card" in plain HTML, CSS, and JavaScript — no external QR-code library, no framework.

Requirements:
- Display a network name (SSID) and a password as two separate labeled fields, each with its own "Copy" button that copies just that field's exact value to the clipboard.
- The password field must be masked with a fixed-width placeholder (such as bullet characters) by default, with a separate eye-icon toggle button that reveals the real password text on click and re-masks it on a second click, updating its own accessible label ("Show password" / "Hide password") each time.
- Implement the copy behavior by trying the modern async Clipboard API first, and if it is unavailable, falling back to creating a temporary off-screen textarea, selecting its content, and using the older execCommand-based copy method — the button must show a brief inline "Copied!" confirmation (not a browser alert or external toast library) that reverts back to its original label after roughly a second and a half.
- Render a square placeholder QR-style grid pattern (does not need to be a real, scannable, standards-compliant QR code) generated deterministically from the SSID and password strings, including at least the three square corner "finder" markers real QR codes use, using only div elements or an SVG grid — no image file and no QR-generation library.
- Show a small helper text line beneath the fields whose wording changes depending on whether the password is currently hidden or revealed.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Set the real network credentialsUpdate the SSID text in the HTML, the data-copy attribute on the SSID copy button, and REAL_PASSWORD plus its matching data-copy attribute in the JS.
  2. 2
    Tap the eye icon to reveal the passwordThe password stays masked with bullet characters by default; clicking the eye icon swaps in the real value and updates the helper note.
  3. 3
    Click Copy on either fieldThe SSID or password is copied to the clipboard, with the button briefly showing "Copied!" as confirmation.
  4. 4
    Swap in a real QR encoder for productionReplace renderQr() with a proper QR-encoding library call that encodes a WIFI:T:WPA;S:<ssid>;P:<password>;; payload string so phone cameras can actually auto-join.
  5. 5
    Style for your venueUpdate the header text, icon, and colors to match your hotel, cafe, office, or venue branding.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a Tailwind CSS version.

Real-world uses

Common Use Cases

Hotel and hospitality in-room screens
Show guest network credentials on an in-room tablet or the hotel app's room details screen, letting guests scan or copy instead of squinting at a card by the phone.
Cafe and restaurant self-serve kiosks
Display on a countertop tablet or digital menu screen so customers can join WiFi without asking staff to read out a password.
Office visitor and meeting room panels
Pair with a visitor check-in flow or meeting-room booking display so guests get network access as part of arrival, not a separate ask.
Event and conference venue signage apps
Surface attendee WiFi credentials inside an event app alongside the schedule, avoiding printed cards that go out of date each event.
Coworking space member portals
Show member-specific or rotating guest network credentials inside a coworking space's member dashboard.
Learn clipboard fallback patterns
A clean example of trying the modern async Clipboard API first and gracefully falling back to the older execCommand technique for broader device support.

Got questions?

Frequently Asked Questions

The demo pattern is a deterministic, authentic-looking grid generated from a hash of the credentials — it is not a real encoded QR code and will not decode. For production, replace renderQr() with a proper QR-encoding library that encodes a WIFI:T:WPA;S:<ssid>;P:<password>;; payload string, which is the standard format phone cameras recognize as WiFi-join QR codes.

A guest WiFi card is often displayed on a shared or public screen (a lobby kiosk, a printed card, a wall tablet). Hiding the password by default and requiring a deliberate eye-icon tap to reveal it adds a small layer of intent before the credential is exposed to anyone glancing at the screen.

copyText() falls back to creating an off-screen textarea containing the value, selecting its text, and calling the older document.execCommand("copy") API. This covers older browsers, some embedded WebViews, and non-HTTPS contexts where the modern async Clipboard API is unavailable.

Update the data-copy attribute on each .wifi-copy-btn button to the value you want copied, and keep the REAL_PASSWORD constant and the visible SSID text in sync with the same values so the displayed and copied credentials always match.

Yes — since the card reads REAL_PASSWORD from a single JavaScript constant and the QR pattern is regenerated from the same credential string via renderQr(), updating that one constant (and re-running renderQr()) on a schedule from your access point's admin API keeps both the displayed password and the QR pattern in sync automatically.

In React, keep revealed as useState(false) and toggle it in the eye button's onClick, deriving the displayed password text from a ternary; keep the copy-to-clipboard function as a plain async helper called from each button's onClick with its own value. In Vue, use a ref for revealed and a computed property for the displayed password text.