SMART HTML Viewer by Nima.Sh
🌐 SMART HTML Viewer یک ابزار سبک، واکنشگرا و چندزبانه برای تست و پیشنمایش کدهای HTML بهصورت زنده است.
این پروژه با هدف سادهسازی تجربه توسعهدهندگان، طراحان و دانشآموزان طراحی شده تا بدون نیاز به محیطهای پیچیده، کدهای HTML خود را اجرا، دیباگ و مدیریت کنند. نسخه جدید با بهرهگیری از Web Audio API و ابزارهای هوشمند، تجربهای تعاملیتر را ارائه میدهد.
😍 برای تست و استفاده:
- 🔥 اجرای زنده (Real-time): نمایش تغییرات کد در لحظه بدون نیاز به رفرش.
- 🔊 سیستم بازخورد صوتی (Sound FX): تجربه کاربری شنیداری با افکتهای صوتی برای تایپ، کلیک، خطا و موفقیت (با استفاده از Web Audio API).
- 🐛 دیباگر هوشمند: آنالیز دقیق کد، بررسی تگهای بسته نشده، آمار تعداد خطوط/کاراکترها و ارائه پیشنهادات اصلاحی (مثل افزودن DOCTYPE).
- 📑 مدیریت پیشرفته تبها: امکان کار روی چندین فایل همزمان با قابلیت تغییر نام تبها (با دابل کلیک) و حذف آنها.
- 🧹 فرمتدهی خودکار: مرتبسازی و دندانه دار کردن (Indentation) کدها تنها با یک کلیک برای خوانایی بهتر.
- 🎨 شخصیسازی کامل: - انتخابگر دقیق رنگ برای تنظیم رنگ اصلی و رنگ فرعی تم.
- دکمه بازگشت به تنظیمات رنگ پیشفرض.
- حالت تاریک/روشن (Dark/Light Mode).
- 📱 شبیهساز واکنشگرا: تست نمایش در سایزهای لپتاپ (1366px)، تبلت (768px) و موبایل (375px).
- 🪟 پنجرههای پاپآپ مستقل: امکان باز کردن پیشنمایش در پنجرههای جدید مرورگر با ابعاد دقیق دستگاهها.
- 📏 تنظیم ارتفاع هوشمند: امکان تنظیم دستی ارتفاع باکس پیشنمایش یا استفاده از تنظیم خودکار بر اساس حجم کد.
- 🌍 پشتیبانی چندزبانه: رابط کاربری کامل به زبانهای فارسی، انگلیسی، عربی، فرانسوی، اسپانیایی، چینی و آلمانی.
- 💾 خروجی منعطف: دانلود کدها با فرمت
.htmlو.txtو قابلیت کپی سریع.
- شروع سریع: کد HTML خود را در ادیتور تایپ کنید (همراه با صدای تایپ لذتبخش).
- مدیریت پروژه: با دکمه
+تب جدید باز کنید و با دابل کلیک روی نام تب، اسم فایل خود را تغییر دهید. - بهینهسازی: از دکمه "مرتبسازی کد" (Format) برای تمیز کردن کد و از دکمه "دیباگ" (Bug) برای یافتن خطاها استفاده کنید.
- شخصیسازی ظاهری: از نوار رنگی بالا یا پنل تنظیمات، رنگهای تم را متناسب با سلیقه خود تغییر دهید.
- تست نهایی: با استفاده از منوی پاپآپ، خروجی را در پنجرهای جداگانه و در سایز واقعی دستگاه مدنظر مشاهده کنید.
- ذخیرهسازی: نتیجه کار را دانلود کرده یا در کلیپبورد کپی کنید.
- HTML5 / CSS3 → ساختار مدرن و انیمیشنهای CSS Variables
- JavaScript (Vanilla) → منطق برنامه بدون وابستگی به کتابخانه
- Web Audio API → تولید و مدیریت صداهای سیستمی (Oscillators)
- Font Awesome → آیکونهای بصری
این پروژه تحت مجوز MIT منتشر شده و استفاده، ویرایش و توسعه آن آزاد است.
