One Question

Summary

The same sign-up engine as one question per screen. "Pick your username." then "And a password." — with the three required boxes and the yellow Quick sign-up already there. "Or tell us more" turns the rest of the profile into sixteen short questions in DEPO's order; each can be skipped, the links are marked optional, and "Create my account now" ends it from anywhere. Enter moves on, a counter and a line on top show where you are.

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: a conversation: one big question per screen on deep DEPO green with cream
type and the brand yellow — Gloock for the questions, Sora for the rest; a huge underlined
input; Enter goes on, Back and Skip below, "Create my account now" from any profile question;
question 2 (password and the agreements) already offers quick sign-up; a counter (02 / 16) and a
progress line on top; the link questions marked optional.

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 /demo35/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: Gloock for the questions and the counter, Sora 300–600 for inputs and text.
• Palette: deep green #0f2a1a, cream #f2ecdf, yellow #ffb500, soft cream for hints, coral #ff9a85 for errors; two soft radial glows.
• Layout: top bar (DEPO, counter, Log in) and a progress line; the question; the navigation at the bottom (Back, Skip, Create my account now, Next).
• Motion: every question rises in; the progress line grows. Reduced motion turns both off.

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.

Config

config/demo35/nginx.conf — location = /demo35/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.