HTML, CSS және JavaScript (Vanilla) көмегімен балаларға арналған "Сиқырлы магнит" атты интерактивті нейроойын веб-сайтының кодын жазып бер.

Дизайн талаптары:

• Сайт дизайны балаларға арналған, ашық, көңілді түстермен (Glassmorphism немесе Soft UI стилінде) және мультфильм стилінде болсын.

• Анимациялар мен элементтердің ауысуы жұмсақ әрі тартымды болуы керек.

Ойын құрылымы мен логикасы:

1. Жоғарғы бөлік (Магнит өрісі): Экранның жоғарғы жағында тұрған үлкен көлемді 1 магнит солтүстік және оңтүстік өрісі бар сурет.суреттер бірінің устіне орналаспасын Үлкен көлемді 15х15 см (Магнит ) орналасады. Бұл аймақ "Drop zone" (қабылдау аймағы) қызметін атқарады.

2. Төменгі бөлік (тартылатын заттар): Төменгі жағында магнитке тартылатын заттардың көлемі 10х10 см (Қасық,Құлып,Қайшы,Шеге,Шелек,) ретсіз араласып тұрады. Бұлар "Draggable" (сүйреуге болатын) элементтер.

3. Drag and Drop (Сүйреп апару) механикасы:

   • Бала тартылатын заттарды сүйреп, магнит үстіне апарған кезде заттар сол жерге бекітіледі.

   • Дұрыс болған жағдайда:Сәттілік анимациясы (жасыл жарқырау немесе конфетти) ойнатылсын.

   • Қате болған жағдайда: басқа ағаштан,пластиктен жасалған затты апарса, ол қызыл түспен жыпылықтап, бастапқы орнына қайтадан сырғып қайтып баруы керек.

4. Төменгі бөлік (Тартылмайтын заттар): Төменгі жағында магнитке тартылмайтын заттар 10х10 см (Қуыршақ,Доп,Кітап,Ағаш ойыншық) суреттер бірінің устіне орналаспасын ретсіз араласып тұрады. Бұлар "Draggable" (сүйреуге болатын) элементтер.

5. Drag and Drop (Сүйреп апару) механикасы:

   • Бала тартылатын заттарды сүйреп, магнит үстіне апарған кезде заттар сол жерге бекітілмесін.

   • Қате болған жағдайда қызыл түспен жыпылықтап, бастапқы орнына қайтадан сырғып қайтып баруы керек

Камера: Дәл осы экранның бір шетінде камера болсын. Камерада оқушының қолын оқуы керек. Оқушы саусағының көмегімен тапсырманы орындауы тиіс. Сүйреп алғанда карточкалар жеңіл қозғалсын. Басқа ештеңені өзгертпе тек камераны қос. тапсырма мишкаменде камера арқылы да орындауы тиіс. Дұрыс жауапқа көңілді дыбыс қос.

Магнит: https://vibe-coding.diaoft.kz/uploads/img_69d93afe90043.png

Қайшы: https://vibe-coding.diaoft.kz/uploads/img_69d93cd0aa85f.jpeg

Шеге: https://vibe-coding.diaoft.kz/uploads/img_69d9456e9eb5f.webp

Құлып: https://vibe-coding.diaoft.kz/uploads/img_69d93de62a673.jpg

Қасық : https://vibe-coding.diaoft.kz/uploads/img_69d93e061dae1.jpeg

Шелек: https://vibe-coding.diaoft.kz/uploads/img_69d9460c6cc57.webp

Қуыршақ: https://vibe-coding.diaoft.kz/uploads/img_69d93e80b4f53.webp

Доп: https://vibe-coding.diaoft.kz/uploads/img_69d93e978e08c.webp

Кітап: https://vibe-coding.diaoft.kz/uploads/img_69d945acdbba9.webp

Ағаш ойыншық: https://vibe-coding.diaoft.kz/uploads/img_69d94524333c2.webp

Қосымша техникалық талаптар:

• Код мобильді телефондар мен планшеттерге бейімделген (Responsive) болсын, себебі балалар көбіне планшеттен ойнайды.

• Толық жұмыс істейтін HTML, CSS және JS кодтарын бөлек-бөлек немесе бір файлдың ішіне жинақтап бер.