Сен тәжірибелі Web-әзірлеуші (Frontend Developer) және UI/UX дизайнерсің. Маған «Үнемді тұтынуға байланысты арналған заманауи, креативті және интерактивті веб-сайттың толық кодын (HTML, CSS, JavaScript) жазып бер. Сайттың құрылымы мен талаптары:

1. Басты бет (Hero Section):

• Үнемді тұтыну суретіне арналған орын (placeholder). https://vibe-coding.diaoft.kz/uploads/img_69e4a91fcee64.png

• Тақырып атауы үлкен, әдемі типографиямен жазылсын.

Үнемді тұтынудың маңыздылығын ашатын Абай Құнанбаевтың үшінші қара сөзінен:«Ысырап қылма, артық өміріңді өз пайдаңа жұмса» сөзі тұрсын. «Әр тамшы – өмір, әр жарық – еңбек, әр ас – несібе!»

• 2. Екінші бет: Үнемді тұтыну туралы бейнематериал

<iframe width="560" height="315" src="https://www.youtube.com/embed/7ERrhJmZSq8?si=pi7r-j9sq48-QoJM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

2. Интерактивті Карточкалар бөлімі (Grid layout):

• Екінші бөлімнен бастап сайт карточкаларға (cards) бөлінуі тиіс.

• Карточкалардың тақырыптары төменде қарамен жазылған.

• Карточкаларға тышқанды апарғанда (hover) әдемі CSS анимациялар болсын.

3. Карточка ішіндегі контент (Модальды терезе немесе жеке бет ретінде):

• Әр карточканы басқан кезде ішіндегі толық ақпарат ашылуы керек.

• Ақпарат қарапайым мәтін емес, креативті пішімде берілсін:

Неліктен үнемдеу маңызды?карточкасы

Табиғаттың байлығы — шектеулі.

Суды, энергияны, тағамды артық қолдану → климаттың өзгеруіне, экологиялық тепе-теңсіздікке әкеледі.

Үнем = табиғатты сақтау + еңбекке құрмет + ұқыптылық.

Кесте

«Суды үнемдеу -тіршіліктің көзі»карточкасы

Визуал: судағы тамшы, кранды жапқан бала.

Мазмұны блога түрінде:
? Тіс жуғанда суды 1 минутқа жабу → 10 литр су үнем.
? Душ қабылдау уақыты — 5 минут = 50 литр; 10 минут = 100 литр.
? Гүлді жаңбыр суымен суар.артық сөз жазба

Кеңес блогы:

«Әр тамшының құны бар. Суды сақтасаң – өмірді сақтайсың!»

Энергияны үнемдеу» карточкасы

Визуал: күн сәулесі түскен бөлме, LED шам, табиғи жарық.
Мазмұны:

• Бөлмеден шыққанда жарықты сөндір.

• Электр құрылғысын токтан ажырат.

• Табиғи күн жарығын көбірек пайдалан.

Диаграмма идеясы (Chart.js үшін):

• Үй энергия шығыны:
  ? 40% – жарықтандыру
  ? 30% – жылытқыш, тұрмыстық техника
  ? 20% – су жылыту
  ? 10% – басқа құрылғылар

Кеңес:

«Бүгін жарықты өшірсең – ертең табиғат саған рақмет айтады.»

«Тамақты үнемдеу» (Zero Waste)карточкасы

Визуал: жеміс‑көкөніс, үйдегі пицца, компот.

Мазмұны:

• Артық тағамнан жаңа тағам:

  • ? Жеміс қалдығынан — компот;

  • ? Нан мен көкөністен — үй пиццасы;

  • ? Көкөніс қалдығынан — сорпа.

• Тағам – еңбек, оны тастау – еңбекті қадірлемеу.

Кеңес блогы:

«Тағамды сыйла – еңбекті бағала!»

4.Дизайнға қойылатын техникалық талаптар:

Жай ғана стандартты дизайн емес, заманауи стильдерді (Glassmorphism, жұмсақ көлеңкелер, градиенттер) қолдан.

• Мобильді құрылғыларға толық бейімделген (Responsive) болсын.

Код таза, құрылымды және бірден браузерде іске қосуға дайын (Ready-to-use) болуы қажет. JS логикасын диаграммалар мен модальды терезелерді ашу үшін дұрыс жаз.

4. Төртінші бет.

Интерактивті карточкалар:

Карточка 1: «Екінші өмір: Жемістер». (Тозып бара жатқан жемістерден хош иісті компот немесе джем жасау рецепті).

Карточка 2: «Кешкі астан жаңа тағам». (Тоңазытқышта қалған өнімдерден (шұжық, ірімшік, нан) пицца немесе фри-стильдегі тағам жасау нұсқаулығы).

Челлендж блогы: «Recycle Food Challenge» — тамақ қалдықтарын пайдалы дүниеге айналдыру туралы қысқа видео түсіріп, әлеуметтік желіге жүктеуге шақыру.

5. Бесінші бет

Ойшыл‑жазушылардың дәйекті сөздері

Абайдың сапалы суретіне арналған орын (placeholder). https://vibe-coding.diaoft.kz/uploads/img_69e4c62d9d294.jpeg

Автордың аты-жөні үлкен, әдемі типографиямен жазылсын

Абай Құнанбайұлының үнем мен ысырап туралы ойлары

• Он тоғызыншы қара сөзінен:

«Адам ата-анадан туғанда есті болмайды; естіп, көріп, ұстап, татып, ескерсе — дүниедегі жақсы, жаманды таниды. Сондайдан білгені, көргені көп адам білімді болады.»

Бұл сөзде Абай үнем мен ұқыптылықты тікелей «естілікке», яғни байқап, саралап, ысырап етпей қабылдаумен байланыстырады:
«Көргенін ескерген адам — ысырапсыз, ұқыпты адам» деген мағынада.

Мұхтар Әуезов дәйекті сөзі:

Мұхтардың сапалы суретіне арналған орын (placeholder). https://vibe-coding.diaoft.kz/uploads/img_69e4c418a4dab.jpg

Автордың аты-жөні үлкен, әдемі типографиямен жазылсын

«Адам баласы табиғаттың перзенті болса, сол табиғатты сақтау — борышы. Ысырап — сол борышты аяқасты ету.»
Әуезов табиғатты сақтаудың басты шартының бірі – үнем мен жауапкершілік екенін айтқан.

Ыбырай Алтынсарин дәйекті сөзі:

Ыбырайдың сапалы суретіне арналған орын (placeholder). https://vibe-coding.diaoft.kz/uploads/img_69e4c646283a0.jpeg

• Байлық — еңбекпен, ырыс — үнеммен келеді.»
  Ыбырайдың педагогикалық мәтіндерінде дүниені босқа шашпай, адал еңбектің қадірін түсіндіру басты идея.

6.алтыншы бет Қорытынды және Ұсыныстар бөлімі:

Үнемді тұтынуға сапалы суретіне арналған орын

https://vibe-coding.diaoft.kz/uploads/img_69e4c7149afb2.jpeg

Кері байланысқа арналған сілтеме: https://padlet.com/gserikkalieva/padlet-l6wza0hc495dda3a

Мазмұны: «Бізбен бірге үнемдеуді баста!»

Функция: Оқырманның пікірі немесе сұрағы ботқа сілтеме. https://padlet.com/gserikkalieva/padlet-l6wza0hc495dda3a

Footer: Әлеуметтік желілердегі парақшалардың сілтемесі.

Кеңес: Бұл промтты пайдаланып, суреттерді Midjourney немесе DALL-E арқылы «Eco-friendly lifestyle, aesthetic photography, high resolution» сипаттамасымен жасатып алсаңыз, сайтыңыз өте тартымды болады.