Your Cover

Summary

The same sign-up engine as demo33, staged as the thing members come to DEPO for: a cover. While the person types, the left half fills in — @username, first and last name in heavy Schibsted, the chosen roles as the lime kicker, the city — and the photo changes with the first role. The cover is the motivation to complete the profile; its meter shows how far along it is.

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 language of the favourite home page (demo5): pale green-grey, deep
green, lime, Schibsted Grotesk up to 900. Half the screen is a DEPO magazine cover that builds
itself as the person types — @username, first and last name in heavy type, the roles as the
kicker, the city, a completeness meter; the photo follows the first role picked. The form sits
on the other half: "Put your name on the cover."

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 /demo34/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: Schibsted Grotesk 400–900.
• Palette: ground #e7ece6, paper #f5f7f3, ink #13261d, deep green #17382b, lime #c8f06a, error #b3261e.
• Layout: a sticky 44vw cover (DEPO masthead, issue line, cover lines, meter) and the form column; below 900 px the cover sits on top.
• Motion: the cover photo cross-fades when the first role changes; the meter fills.

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