Layar Login dari spesifikasi desain

Kamu menerima spesifikasi layar Login dari designer. Bangun layarnya dengan HTML, CSS, dan sedikit JavaScript, persis seperti developer menerjemahkan file Figma.

Struktur (layer)

Di dalam <main class="layar">:

1. h1 berisi Selamat datang.
2. p berisi Masuk untuk melanjutkan.
3. <form class="form"> berisi:
   • label dengan for="email" bertuliskan Email, lalu input type="email" dengan id="email".
   • label dengan for="sandi" bertuliskan Kata sandi, lalu input type="password" dengan id="sandi".
   • <button class="tombol" type="submit">Masuk</button>.
4. p berisi Belum punya akun? dan tautan a bertuliskan Daftar.
5. <button id="ganti-mode" type="button"> untuk berganti mode.

Design tokens (variables)

Token	Light (:root)	Dark ([data-mode="dark"])
--bg-surface	#ffffff	#1a1a1a
--text-primary	#1a1a1a	#ffffff
--warna-primer	#7c5cff	#7c5cff

Layout dan komponen

• .layar: Auto Layout vertikal (display: flex, flex-direction: column), gap 16px, padding 24px, latar var(--bg-surface), teks var(--text-primary).
• .form: Auto Layout vertikal, gap 16px.
• .tombol: latar var(--warna-primer), teks #ffffff, padding 12px 24px, radius 12px.
• Area sentuh: .tombol dan kedua input punya min-height: 44px.

Interaksi

Klik #ganti-mode memasang data-mode="dark" pada .layar (dan klik lagi melepasnya), sehingga warna latar dan teks berganti lewat variables.

Contoh hasil

Layar putih berisi judul, subjudul, dua input bertumpuk berjarak 16px, tombol ungu Masuk, dan teks Daftar. Setelah tombol mode diklik, latar menjadi gelap dan teks menjadi putih tanpa ada warna yang ditulis ulang di .layar.