RTL Login Page is a clean, ready-to-use login form template designed for right-to-left (RTL) interfaces such as Persian and Arabic apps. It features a dark, glassmorphism-style card on an animated particle background, and integrates a Jalali (Shamsi) date picker for Persian calendars.
The page is built with plain HTML, CSS, and vanilla JavaScript — no framework or build step required. It includes a center/branch selector, a numeric code field, a password field, a date field with a Persian calendar, and a "remember me" option, with accessibility (ARIA) attributes throughout. The selected center is persisted in localStorage, and a built-in Gregorian-to-Jalali conversion fallback ensures the date picker always shows today's Persian date.
It is ideal for front-end developers who need a polished, RTL-first sign-in screen they can drop into any project.
🔎 Keywords: rtl login page, persian login form, jalali datepicker, shamsi date picker, html css login, vanilla javascript login, glassmorphism login, particles.js background, responsive login template.
- 🌐 RTL & Persian-ready —
dir="rtl"layout with Vazirmatn and Yekan fonts. - 📅 Jalali (Shamsi) date picker — Persian calendar input via
@majidh1/jalalidatepicker. - 🔁 Date fallback — built-in Gregorian → Jalali conversion so today's date always resolves.
- ✨ Animated background — interactive particles powered by
particles.js. - 🏢 Center selector — choose a branch/center, remembered across visits via
localStorage. - 🔑 Secure inputs — numeric code, password, and remember-me fields with proper
autocomplete. - ♿ Accessible — ARIA labels and semantic landmarks for screen readers.
- 🎨 Glassmorphism UI — modern dark theme with accent gradients and FontAwesome icons.
- 🪶 Zero build — pure HTML/CSS/JS; just open
index.html.
| Layer | Technology |
|---|---|
| Markup | HTML5 (RTL) |
| Styling | CSS3 (custom properties, glassmorphism) |
| Logic | Vanilla JavaScript |
| Fonts | Vazirmatn, Yekan |
| Date picker | @majidh1/jalalidatepicker |
| Background | particles.js |
| Icons | Font Awesome 6 |
- A modern web browser. No build tools or dependencies to install.
git clone https://github.com/morpheusadam/GlassLogin.git
cd loginpageSimply open index.html in your browser, or serve the folder with any static server:
# Optional: serve locally
npx serve .
# or
python -m http.serverThe third-party libraries (particles.js, Jalali date picker, fonts) are loaded from CDNs, so an internet connection is required for the full experience.
loginpage/
├── index.html
└── assets/
├── css/
│ ├── styles.css
│ └── jalalidatepicker.css
├── js/
│ ├── app.js
│ └── jalalidatepicker.js
└── img/
└── tabiat-logo.svg
Contributions are welcome! Open an issue or submit a pull request with improvements, new themes, or accessibility enhancements.
Free to use and modify. See LICENSE if present, otherwise released under the MIT License.
Web developer & cheerful hacker · PHP · Laravel · Go
⭐ If you like this template, consider giving it a star! ⭐