|
1 | | -# 🕒 [ساعت زنده جاوا اسکریپت | Live JavaScript Clock](https://demo.aminarjmand.com/Live-Clock-JavaScript/) |
| 1 | +# 🕒 Live JavaScript Clock | ساعت زنده جاوا اسکریپت |
2 | 2 |
|
3 | 3 | <p align="center"> |
4 | 4 | <a target="_blank" href="https://demo.aminarjmand.com/Live-Clock-JavaScript/"> |
|
10 | 10 | </a> |
11 | 11 | </p> |
12 | 12 |
|
13 | | -یک مینیپروژه فرانتاند سبک، مدرن و تعاملی برای نمایش **ساعت آنی و زنده وب با جاوا اسکریپت خالص (Vanilla JS)**. این پروژه با طراحی شیک و شیشهای (**Glassmorphism**) توسعه یافته و قابلیت متوقف کردن و راهاندازی مجدد زمان را با یک کلیک ساده به کاربر میدهد. |
| 13 | +<p align="center"> |
| 14 | + <a href="#english">English</a> | <a href="#فارسی">فارسی</a> |
| 15 | +</p> |
14 | 16 |
|
15 | 17 | --- |
16 | 18 |
|
17 | | -## 🔗 مشاهده پیشنمایش زنده / Live Preview |
18 | | -برای مشاهده و تست آنلاین این پروژه میتوانید روی لینک زیر کلیک کنید: |
19 | | -👉 **[مشاهده دمو زنده پروژه / Launch Live Demo](https://demo.aminarjmand.com/Live-Clock-JavaScript/)** |
| 19 | +## English |
| 20 | + |
| 21 | +A lightweight, modern, and interactive frontend mini-project that displays a **real-time web clock built with Vanilla JavaScript**. This project features a sleek **Glassmorphism** (frosted-glass) user interface and allows users to easily pause and resume the live time with a simple click. |
| 22 | + |
| 23 | +### 🔗 Live Preview |
| 24 | +You can test the live version of this project here: |
| 25 | +👉 **[Launch Live Demo](https://demo.aminarjmand.com/Live-Clock-JavaScript/)** |
| 26 | + |
| 27 | +### ✨ Key Features |
| 28 | +- **Modern Glassmorphism UI:** Features gorgeous frosted-glass effects, background blur, and smooth gradient transitions. |
| 29 | +- **Pure Vanilla JavaScript (Zero-dependency):** Built entirely with native web technologies without using any third-party libraries or frameworks. |
| 30 | +- **Smart Pause/Resume Functionality:** Allows users to freeze the time and restart it just by clicking anywhere on the clock container. |
| 31 | +- **Dynamic State Styling:** Uses CSS classes to intuitively differentiate between the active and paused states of the clock. |
| 32 | +- **Standardized Time Format:** Ensures double-digit formatting (`00:00:00`) for hours, minutes, and seconds at all times. |
| 33 | +- **Fully Responsive Design:** Adapts fluidly to all desktop, tablet, and mobile displays. |
20 | 34 |
|
21 | 35 | --- |
22 | 36 |
|
23 | | -## ✨ ویژگیها (Features) |
| 37 | +## فارسی |
| 38 | + |
| 39 | +یک مینیپروژه فرانتاند سبک، مدرن و تعاملی برای نمایش **ساعت آنی و زنده وب با جاوا اسکریپت خالص (Vanilla JS)**. این پروژه با طراحی شیک و شیشهای (**Glassmorphism**) توسعه یافته و قابلیت متوقف کردن و راهاندازی مجدد زمان را با یک کلیک ساده به کاربر میدهد. |
| 40 | + |
| 41 | +### 🔗 مشاهده پیشنمایش زنده |
| 42 | +برای مشاهده و تست آنلاین این پروژه میتوانید روی لینک زیر کلیک کنید: |
| 43 | +👉 **[مشاهده دمو زنده پروژه](https://demo.aminarjmand.com/Live-Clock-JavaScript/)** |
24 | 44 |
|
| 45 | +### ✨ ویژگیهای برجسته |
25 | 46 | - **طراحی مدرن Glassmorphism:** استفاده از جلوههای شیشهای، تاری پسزمینه (Backdrop Blur) و گرادینتهای چشمنواز زیبا. |
26 | 47 | - **جاوا اسکریپت خالص (Zero-dependency):** بدون استفاده از هیچگونه کتابخانه جانبی یا فریمورک. |
27 | 48 | - **قابلیت هوشمند Pause/Resume:** امکان متوقف کردن زمان و استارت مجدد آن تنها با کلیک روی باکس ساعت. |
|
31 | 52 |
|
32 | 53 | --- |
33 | 54 |
|
34 | | -## 🛠️ تکنولوژیهای به کار رفته |
| 55 | +### 💻 Technologies Used / تکنولوژیهای به کار رفته |
35 | 56 |
|
36 | | -- **HTML5** (ساختار معنایی و استاندارد) |
37 | | -- **CSS3** (متغیرهای سراسری، فیلتر Blur، دکمههای انیمیشنی، فونتهای بهینه وب) |
38 | | -- **Vanilla JavaScript** (دستورات ساختاریافته زمان، اینتروالهای بهینه، مدیریت کلاسی DOM) |
| 57 | +- **HTML5** (Semantic structure) |
| 58 | +- **CSS3** (Global variables, Backdrop-filter blur, CSS animations, optimized web fonts) |
| 59 | +- **Vanilla JavaScript** (Native Date object, structured intervals, dynamic DOM class manipulation) |
39 | 60 |
|
40 | 61 | --- |
41 | 62 |
|
42 | | -## 🚀 نحوه استفاده و اجرا |
| 63 | +### 🚀 Structure / نحوه استفاده و اجرا |
43 | 64 |
|
44 | | -پروژه به صورت یک فایل ایستا (Static) است. برای اجرا کافیست مخزن را دانلود کرده و فایل `index.html` را در مرورگر خود باز کنید. |
| 65 | +The project is completely static. To run it, simply clone the repository and open `index.html` in your browser. |
45 | 66 |
|
46 | 67 | ```text |
47 | | -├── index.html # کدهای ساختار و استایل صفحه |
48 | | -└── JsClock.js # کدهای اصلی کنترلر جاوا اسکریپت ساعت |
| 68 | +├── index.html # HTML Structure & CSS Styles |
| 69 | +└── JsClock.js # Main JavaScript Clock Controller |
0 commit comments