Universal Flashcard System

One HTML structure that morphs between all designs with OKLCH colors!

modern Design

Card 42HSK Level 142/100
CARD42
PROGRESS42%
学习
學習
xué xí
to study; to learn (v)
Click to reveal

minimal Design

Card 42HSK Level 142/100
CARD42
PROGRESS42%
学习
學習
xué xí
to study; to learn (v)
Click to reveal

split Design

Card 42HSK Level 142/100
CARD42
PROGRESS42%
学习
學習
xué xí
to study; to learn (v)
Click to reveal

material Design

Card 42HSK Level 142/100
CARD42
PROGRESS42%
学习
學習
xué xí
to study; to learn (v)
Click to reveal

gradient Design

Card 42HSK Level 142/100
CARD42
PROGRESS42%
学习
學習
xué xí
to study; to learn (v)
Click to reveal

border Design

Card 42HSK Level 142/100
CARD42
PROGRESS42%
学习
學習
xué xí
to study; to learn (v)
Click to reveal

Interactive Comparison

Click on any card to reveal the English translation

Card 1HSK Level 11/50
CARD1
PROGRESS2%
你好
nǐ hǎo
hello
Click to reveal
Card 2HSK Level 12/50
CARD2
PROGRESS4%
谢谢
謝謝
xiè xiè
thank you
Click to reveal
Card 3HSK Level 13/50
CARD3
PROGRESS6%
再见
再見
zài jiàn
goodbye (interj)
Click to reveal
Card 4HSK Level 14/50
CARD4
PROGRESS8%
朋友
péng yǒu
friend (n)
Click to reveal

Features

  • ✨ OKLCH colors for perceptual uniformity
  • 🎨 Six beautiful design variations
  • 🌙 Full dark mode support
  • 📊 Progress tracking with CSS variables
  • 🎯 Click to reveal translation
  • 📱 Responsive and mobile-friendly
  • ♿ Accessible with ARIA attributes
  • ⚡ CSS-only animations, no JavaScript required for styling