Skip to content

README.md

Latest commit

 

History

History
105 lines (90 loc) · 3.97 KB

README.md

File metadata and controls

105 lines (90 loc) · 3.97 KB
Raw

Spotify form replica

A pixel-close recreation of Spotify's marketing splash page, login flow, and three-step account creation funnel. The project is entirely static (HTML, CSS, JavaScript) yet captures the feel of the official site, including inline validation, progressive disclosure of form steps, and contextual warnings.

Table of Contents

Features

  • Landing + Auth Pages – index.html mirrors the public marketing hero; sites/login.html, sites/registration.html, and sites/registration-password.html replicate the authentication views with matching typography and spacing.
  • Interactive Validation – Custom scripts add blur and input handlers that toggle .touched, .hidden, and .warning utility classes so errors appear instantly.
  • Password Coach Marks – The password step highlights requirements (letter, number/special char, minimum length) with live SVG swaps and red state text.
  • Progress Indicators – A progress bar plus “Step x of y” copy guide people through the registration funnel.
  • Responsive Layouts – Independent stylesheets for landing, login, creation, and shared fonts keep the UI adaptable across viewports without a framework.
  • Navigation Helpers – Lightweight helpers route users to the next step or open supporting pages without leaving the experience.

Screenshots

Login Form Login Form – Email/username and password inputs.

Registration Step Registration – Email – Email verification step with validation hints.

Registration Alternate Step Registration – Profile Info – Username, date of birth, and gender selection.

Tech Stack

  • HTML5 for structure and semantic layout
  • CSS3 (Flexbox, custom properties, animations) for styling
  • Vanilla JavaScript for form validation, alerts (SweetAlert) , and UI transitions

Project Structure

website-copy-project/
├── index.html
├── sites/
│   ├── login.html
│   ├── registration.html
│   └── registration-password.html
├── styles/
│   ├── createAcc.css
│   ├── fonts.css
│   ├── index.css
│   ├── login.css
│   └── registration.css
├── js/
│   ├── emailValidity.js
│   ├── formCheck.js
│   ├── loginAlert.js
│   ├── nextStep.js
│   ├── openNewPage.js
│   ├── passwordValidity.js
│   ├── registrationAlert.js
│   ├── togglePassword.js
│   └── usernameValidity.js
└── assets/
	 ├── landing.png
	 ├── login.png
	 ├── registration.png
	 ├── registration-other.png
	 └── registration-password.png

Setup and Usage

  1. Clone the repository 
    git clone https://github.com/majtobijakodric/website-copy-project.git
cd website-copy-project
  2. Launch a static server (pick one):
    • VS Code Live Server extension
    • Python: python -m http.server 5173
    • Node: npx serve .
    • Or open index.html directly in a browser (best results with a server to preserve relative links)
  3. Explore the flow:
    • index.html → CTA buttons
    • sites/login.html → email/password validation + password toggle
    • sites/registration.html → email/username stage
    • sites/registration-password.html → password coach marks → profile details → confirmation step

Validation

  • Login credentials are hardcoded inside js/loginAlert.js so the prototype can demo the alerts without a backend.
  • The first working pair is username: maj with password: 123; the same arrays also accept maj@gmail.com as the matching email entry.

Author

Maj Tobija Kodrič

License

MIT License. See LICENSE for details.