مطالبة الثلاثاء #13: برمجة منشئ بطاقات عمل متميزة 💼✨

في مطالبة الثلاثاء الثالثة عشرة هذه، تحدينا الذكاء الاصطناعي لإنشاء أداة صغيرة متكاملة لإنشاء بطاقات العمل المهنية الخاصة بك.

في Linkeum، نتحدث عن التمويل والاستثمارات والفعاليات المهنية. وفي هذه العوالم، بناء العلاقات هو الأهم. فما هو الشيء الأكثر أهمية من بطاقة العمل أو شارة المؤتمر؟

في مطالبة الثلاثاء الثالثة عشرة هذه، تحدينا الذكاء الاصطناعي لإنشاء أداة صغيرة متكاملة لإنشاء بطاقات العمل المهنية الخاصة بك. الهدف هو إنشاء تطبيق ويب من "صفحة واحدة" (HTML وCSS وJS في ملف واحد) يسمح بتخصيص بطاقة العمل أو الشارة في الوقت الفعلي. طلبنا من الذكاء الاصطناعي دمج سمات احترافية (وول ستريت، التكنولوجيا المالية)، وتأثير ثلاثي الأبعاد أنيق عند التمرير، والقدرة على تصدير النتيجة كصورة PNG.

المطالبة

تمت كتابة المطالبة باللغة الإنجليزية لزيادة جودة الكود المُنشأ إلى أقصى حد، مع التركيز بشكل خاص على تصميم واجهة المستخدم وتجربة المستخدم واستخدام المكتبات الخارجية عبر CDN.

Act as an Expert Frontend Developer and UI/UX Designer specializing in Fintech and Corporate enterprise platforms. Your mission is to create a single-file web application (HTML, CSS, and JS combined) that functions as a real-time, premium Business Card and Conference Badge generator.

1. Design & Layout Strategy:

   • The UI must be highly professional, elegant, and trustworthy. Think "Investment Banking meets Modern Tech Startup".
   • Use Tailwind CSS (via CDN) for rapid, clean styling.
   • The layout should be split: a sleek configuration panel on the left (or top on mobile), and a sticky real-time live preview of the card on the right.
   • Background: A subtle, sophisticated dark mode (slate/gray) or a clean corporate light mode.

2. The Live Preview Card (The core element):

   • The card itself should look like a physical premium business card (standard ratio 3.5 x 2 inches, scaled up for the screen).
   • Add a subtle CSS 3D tilt/glare effect when the user hovers over the card with their mouse to make it feel premium.
   • It must include placeholders for: Company Logo, Full Name, Job Title (e.g., "Senior Portfolio Manager", "CTO"), Email, Phone Number, and a QR Code placeholder.

3. User Inputs & Configuration (HTML/JS):

   • Text Fields: Name, Job Title, Company, Phone, Email, Website.
   • Theme Selector (Dropdown):
     1. "Wall Street Classic" (Navy blue & Gold)
     2. "Fintech Minimalist" (Pure black, white text, subtle neon accent)
     3. "Tech Conference" (Vibrant gradient background with glassmorphism).
   • Layout Toggle: Choose between "Business Card" (horizontal) or "Event Badge" (vertical).

4. Logic & Export (JavaScript):

   • JS must instantly update the card's DOM elements as the user types (real-time data binding).
   • Include a "Download Card" button. Use the html2canvas library (import it via CDN) to capture the card's HTML node and trigger a PNG download so the user can actually save their creation.

The final code must be clean, heavily commented, fully functional in a modern browser, and require zero local installation.

حكمنا بعد الاختبار

قمنا باختبار هذه المطالبة على Qwen وكانت النتيجة مذهلة لمحاولة واحدة. يتم إنشاء الواجهة على الفور، ويضيف التأثير ثلاثي الأبعاد لمسة متميزة حقيقية، وتُطبق السمات بشكل مثالي.

كمطور، ستلاحظ أن هناك حاجة إلى بعض التعديلات اليدوية الطفيفة للوصول إلى الكمال: يتطلب رمز الاستجابة السريعة (QR) مكتبة حقيقية ليعمل، ويمكن أن يؤدي التقاط PNG عبر html2canvas أحيانًا إلى إزاحة بعض عناصر CSS المعقدة قليلاً. ومع ذلك، كأساس يتم إنشاؤه في 10 ثوانٍ، فهو توفير استثنائي للوقت!

دورك الآن!

انسخ الكود، وعدّل التفاصيل، وأنشئ الشارة المثالية لحدث التواصل القادم الخاص بك! إذا كنت تستمتع بهذه الأنواع من حيل التطوير وهندسة المطالبات لتوفير الوقت، لا تنس الاشتراك في نشرتنا الإخبارية لتلقي الأدوات والتحليلات القادمة مباشرة في صندوق الوارد الخاص بك.