Zperiod Clone

An open-source clone of zperiod.app — the interactive periodic table designed for Grade 9-12 chemistry students.

Developer: Liveupx.com
Hosted on: xHost.live
Original: Philip Zhao / Zperiod

---

✨ Features

Page	Description
Periodic Table	All 118 elements with category color-coding, search, and category filtering
Element Modal	Split-pane glassmorphic modal with 4-card slider, animated atom, properties, uses & hazards
Ions	30+ common ions with cation/anion filtering
Tools	Equation Balancer, Molar Mass Calculator, Solubility Table, Virtual Lab
Worksheet	Generate balanced equation worksheets with configurable difficulty
Settings	Global units (°C/°F/K), electron animation speed, suggestion box, changelog
Welcome Modal	Apple-style onboarding with author profile card
Changelog Modal	v2.0 release notes with tagged update cards

🎨 Design

Faithful recreation of the original Zperiod design language:

• Light cream theme (#fdfbf7) with warm pastel category colors
• Glassmorphic floating nav with backdrop-filter: blur(20px) pill navigation
• Inter font family from Google Fonts
• Element category colors: alkali #ffcccc, transition #fff2cc, noble gas #e0ccff, lanthanide #fce4d6, etc.
• Card slider in element modal (green → yellow → blue → red)

🚀 Quick Start

# Clone the repository
git clone https://github.com/liveupx/zperiod-clone.git
cd zperiod-clone

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

📦 Build for Production

npm run build
npm run preview

The built files will be in the dist/ directory, ready for deployment to any static hosting (Vercel, Netlify, GitHub Pages, etc.).

🗂 Project Structure

zperiod-clone/
├── index.html              # HTML entry point
├── public/
│   └── logo.svg            # App icon (gradient Z)
├── src/
│   ├── main.jsx            # React entry point
│   └── App.jsx             # Full application (all pages, data, modals)
├── package.json
├── vite.config.js
├── LICENSE                  # MIT
├── CONTRIBUTING.md
└── README.md

🧪 Tech Stack

• React 18 — UI framework
• Vite 5 — Build tool & dev server
• Vanilla CSS — No UI library, inline styles matching original design
• Google Fonts — Inter typeface

📄 License

MIT License — free for personal and commercial use.

🤝 Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

🙏 Credits

• Original Zperiod by Philip Zhao — Aurora High School, Toronto
• Clone developed by Liveupx.com
• Hosted on xHost.live