الشرح

1. واجهة المستخدم:

   • تعرض صورة للأسنان تتغير بناءً على عدد السجائر المدخنة (مع 6 صور مختلفة تمثل مستويات تدهور الأسنان).

   • تحتوي على نموذج لإدخال عدد السجائر وتحديث الصورة والمؤشر بناءً عليها.

   • تحتوي على مؤشر يوضح مستوى تدهور الأسنان كنسبة مئوية ورقم السجائر المدخنة.

2. الواجهة الخلفية:

   • توفر واجهة API لتسجيل عدد السجائر المدخنة وتخزينها في قاعدة بيانات.

   • توفر واجهة API أخرى لجلب عدد السجائر المدخنة لتحديث واجهة المستخدم عند تحميل الصفحة.

3. تحديث الصور والمؤشرات:

   • يتم تحديث صورة الأسنان بناءً على عدد السجائر المدخنة.

   • يتم عرض مؤشر يوضح تدهور الأسنان كنسبة مئوية.

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