ابزار تشخیص وضعیت اینترنت | HTML, CSS, JavaScript خالص

معرفی سورس

یک ابزار ساده، کاربردی و سبک برای تشخیص لحظه‌ای وضعیت اینترنت کاربر که با HTML، CSS و JavaScript خالص نوشته شده است. این پروژه وضعیت اتصال (آنلاین/آفلاین) را به‌صورت بصری با رنگ‌های سبز و قرمز نمایش می‌دهد، دارای دکمه بررسی مجدد است و به‌طور خودکار به رویدادهای online و offline مرورگر گوش می‌دهد.

🎯 قابلیت‌ها

• ✅ تشخیص خودکار وضعیت اینترنت هنگام بارگذاری صفحه
• ✅ نمایش وضعیت با سه حالت: در حال بررسی (خاکستری)، متصل (سبز)، قطع (قرمز)
• ✅ دکمه "بررسی مجدد" برای چک کردن دستی
• ✅ واکنش خودکار به قطع و وصل شدن اینترنت (بدون نیاز به رفرش صفحه)
• ✅ طراحی مینیمال، واکنش‌گرا و کاربرپسند
• ✅ کدنویسی تمیز و خوانا
• ✅ بدون نیاز به هیچ کتابخانه خارجی

🎨 طراحی ظاهری

کارت سفید با سایه ملایم در مرکز صفحه قرار دارد. وضعیت اتصال با یک نوار رنگی (سبز برای اتصال، قرمز برای قطعی، خاکستری در حال بررسی) و متن واضح نمایش داده می‌شود. دکمه آبی رنگ "بررسی مجدد" در پایین کارت، امکان تست دستی را فراهم می‌کند.

📦 محتویات سورس

• index.html – ساختار صفحه و المنت‌ها
• style.css – استایل‌دهی کامل (کارت، رنگ‌بندی وضعیت، دکمه)
• script.js – منطق تشخیص اتصال و مدیریت رویدادها

🚀 نحوه استفاده

1. سه فایل را در یک پوشه قرار دهید.
2. فایل index.html را با مرورگر باز کنید.
3. وضعیت اینترنت خود را ببینید. می‌توانید اینترنت را قطع و وصل کنید تا تغییرات را مشاهده کنید.

برای استفاده در پروژه خود، می‌توانید کدهای CSS و JS را به راحتی به صفحات خود اضافه کنید.

📋 مشخصات فنی

• تکنولوژی: HTML5, CSS3, JavaScript (Vanilla)
• APIهای استفاده شده: navigator.onLine، رویدادهای online/offline
• طراحی: واکنش‌گرا (Responsive)
• وابستگی: صفر
• تعداد فایل: ۳
• حجم کلی: کمتر از ۲ کیلوبایت

🎁 این سورس برای چه کسانی مناسب است؟

• توسعه‌دهندگان وب که نیاز به نمایش وضعیت اینترنت کاربر دارند (مثلاً در PWA)
• افراد مبتدی که می‌خواهند با رویدادهای مرورگر و APIهای ساده JavaScript آشنا شوند
• پروژه‌های نیازمند هشدار قطعی اینترنت

💡 چرا این سورس؟

• 🔹 کاربردی و قابل استفاده در هر پروژه وب
• 🔹 کد بسیار ساده و قابل فهم
• 🔹 اجرای فوری و بدون پیش‌نیاز
• 🔹 کاملاً واکنش‌گرا و سازگار با تمام مرورگرها