Two Keys

Summary

The live "Get on board" form asks for everything on two steps before anyone gets in. This page turns it around: a username and a password, the three boxes every sign-up needs, and "Quick sign-up" — the account exists at once in the limited version of DEPO. Under the button one line says what limited means and that a complete profile gives 7 days of full access; a link opens the rest of the profile on the same page, in the order DEPO needs it, with a bar on top showing how complete it is. It keeps the real site header, footer, colours and fonts, so it shows how the change would look on dev0.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: the fastest possible sign-up for DEPO (after the live
"Get on board" steps one and two at dev0.dphub.net/authorization/get-on-board).

Function (shared sign-up engine, vanilla JS):
- The account needs only a username (7–30 lowercase Latin letters, digits, "." and "_", checked
  as you type, with free alternatives when taken) and a password (8+ Latin characters with a
  number, show / hide, strength meter).
- Required for every sign-up: "Agree to Terms of Use", "I agree that the management team will
  have access to any information shared through messages sent via the DEPO platform" and "I
  confirm that I am at least 18 years old"; a date of birth showing 18 or older ticks the last
  box by itself (and an under-18 date blocks the sign-up).
- A "Quick sign-up" button with a line under it: the account starts as the limited version of
  DEPO. A link opens the profile fields on the same page in DEPO's order of importance: first
  and last name, email, Instagram, phone (country picker, validated per country with
  libphonenumber-js), location (city search; suggestions from the phone's country first; a city
  picked while the phone is empty sets the phone's country and prefix), gender, role (the 14
  specialities), website, TikTok, Pinterest, LinkedIn, X, Facebook, date of birth.
- A complete profile — every field except the links; of the links only Instagram is needed —
  earns 7 days of full access, the same as the paid DEPO Member plan; the page says so next to
  the button, shows what is still missing and the profile's completeness.
- A demo: nothing is sent; the result shows what DEPO would receive.
- 360–1920 px without horizontal scroll, labels and errors tied to fields, visible focus.

Design for this page: the live DEPO site — its real header and footer, the dark #18171a ground,
green #469a58 and yellow #ffb500, Lazurski titles, Lato text, Poppins labels. Left: the promise
"Two keys. You are in." with three portraits and the three steps; right: one card with the form
and a profile-completeness bar on top; the profile fields open under a dashed rule inside the
same card.

How the sign-up works

The three sign-up demos (demo33–demo35) share one engine, js/signup.js, and one structural stylesheet, css/signup.css (each demo keeps its own copy).

• Two keys: username — 7–30 characters, lowercase Latin letters, digits, "." and "_", no dot at either end or two in a row (the live NicknameRules), lowered as you type, checked against a demo list of taken names with three free alternatives; password — 8+ characters from the live pattern with at least one number, show / hide and a four-step strength meter. No "confirm password" field: show / hide replaces it.
• Required boxes: Terms of Use, the management-team access line, and "I confirm that I am at least 18 years old". A date of birth that shows 18 or older ticks the age box by itself; clearing the date or entering an under-18 one takes that automatic tick away, and an under-18 date stops the sign-up.
• Quick sign-up sends only the username, the password and the three boxes: the limited version of DEPO. The profile opens on the same page in this order: first + last name, email, Instagram (a pasted link is cut to the nickname), phone, location, gender (Male, Female, Non-Binary, Unspecified), role (the 14 specialities, several allowed), website, TikTok, Pinterest, LinkedIn, X, Facebook (a handle or any link becomes a clean address), date of birth.
• 7 days of full access: a complete profile — all fields except the links, of which only Instagram is needed — earns 7 days of full access, the same as the paid DEPO Member plan. The note under "Create my account" lists what is still missing; the button changes to "Create my account + 7 days of full access" once nothing is.
• Phone: a country picker (popular countries first, then all 245, with calling codes) over libphonenumber-js — formatting as you type and a real per-country check. Typing "+" and a code switches the country; shared codes (+1, +44, +7 …) keep the main country (US, GB, RU …) unless the number belongs elsewhere. The first country is the visitor's own, from GeoIP: nginx looks the address up in the DB-IP database (the same lookup as /locals "Nearby") and /demo33/geo.json hands it to the page; when it is unknown — or Russia, Belarus or another CIS country, which are never offered by themselves (they can still be picked) — it is Czechia.
• Location ↔ phone: city suggestions come from Photon (photon.komoot.io, OpenStreetMap data, no key). Once the phone has a number or a chosen country, a second query with that country's name puts its cities first (marked in the list); a city picked while the phone is still empty sets the phone's country and prefix (and says so). A list of about 80 cities is the offline fallback.
• Result: nothing is sent. The page shows the welcome and, folded, the JSON DEPO would receive (with trial: {plan: "DEPO Member", days: 7} for a complete profile).

Look

• Type: the site's own fonts, self-hosted: Lazurski (titles), Lato (text), Poppins (labels, buttons).
• Palette: #18171a ground, card #27262b, inputs #1f1e22, green #469a58 (buttons, focus, chosen chips), yellow #ffb500 (kicker, numbers, links), muted #a1a1aa.
• Layout: header · two columns (the sticky promise with portraits and steps; the 520 px card) · footer. Below 980 px one column without the photos.
• Motion: the completeness bar grows; hover states.

Built with

Borrowed

• The field list, gender values, username and password rules and the three agreements from the live form: front/templates/auth_flows/sign_up.php, front/src/Support/AuthFlowSignUpForm.php, front/src/Support/NicknameRules.php (this repository, 2026-10-22); the 14 specialities from the dev0 database.
• libphonenumber-js 1.12.43, MIT licence, the bundle/libphonenumber-min.js build from jsDelivr.
• Header, footer and site CSS as copied for demo20 / demo25.

Config

config/demo33/nginx.conf — location = /demo33/geo.json returns {"country":"<ISO code>"} from nginx's GeoIP variable $depo_geo_country (/etc/nginx/conf.d/depo-geoip.conf, DB-IP City Lite at /var/lib/depo-geoip/); no PHP. Locally bin/router.php answers it from the DEMO_GEO_COUNTRY environment variable. The place search calls photon.komoot.io from the visitor's browser.

Notes

• The live backend still requires isAgeConfirmed and the step-one fields; making quick sign-up real needs an API that creates an account from username + password + the agreements, and a 7-day DEPO Member trial for a complete profile.
• Taken usernames are a demo list; production checks the API.
• Flags are shown as country codes (US, UA): flag emoji do not render on Windows.