موقع تعديل روابط وتوليد QR cod

لدي مشروع قائم لمنصة اختصار روابط ذكية تُدعى "رابطني". واجهة المستخدم (UI/UX) مصممة بالكامل وجاهزة في ملف index.html واحد، وهي مبنية بأسلوب عصري (Modern Dark Mode) يعتمد على Tailwind CSS وتأثيرات الإضاءة (Neon Glow) والزجاج (Glassmorphism).

​الملف يحتوي على منطق جافا سكريبت تفاعلي أساسي (Vanilla JS) لإدارة الواجهة كـ (Single Page Application)، والمطلوب منك هو استلام هذا الكود، مراجعته، وتحضيره للربط الفعلي مع الـ Backend.

​أولاً: ما تم إنجازه في الكود الحالي (المعطيات):

​الصفحة مصممة بالكامل ومقسمة إلى التبويبات التالية التي تعمل برمجياً بشكل مؤقت (Client-side):

​أداة الاختصار: حقل مجهز لاستقبال الرابط الأصلي، وتحديد اسم مخصص (Alias)، واختيار التصنيف.

​أداة التعديل والتخصيص: شاشة تمكن من تعديل الرابط مع وجود "شاشة معاينة حية" (Live Preview) تتحدث مع الكتابة.

​الاختصار الجماعي: منطقة نصية لاستقبال روابط متعددة واختصارها دفعة واحدة، مع زر لتصديرها كملف CSV.

​مولد الـ QR Code: أداة لتوليد الرمز الشريطي حياً داخل canvas وتغيير ألوانه وحجمه والتحميل بصيغة PNG (باستخدام مكتبة qrcode.min.js المرفقة في الهيدر).

​قسم "روابطي": جدول ديناميكي يعرض الروابط، ويحتوي على محرك بحث وتصفية حية (Live Filter)، بالإضافة إلى رسوم بيانية مصغرة (Sparklines) مرسومة بالـ Canvas لكل رابط.

​لوحة الإحصائيات: عدادات رقمية متحركة، ومخطط بياني كبير (Custom Chart) مرسوم بالـ Canvas لبيان النقرات الأسبوعية.