241 lines
17 KiB
HTML
241 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="kk">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Буын денсаулығы — артрит, артроз, Бехтерев ауруы</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦴</text></svg>">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Unbounded:wght@600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="top">
|
||
<div class="container top-in">
|
||
<a class="logo" href="#top">🦴 Буын денсаулығы</a>
|
||
<nav class="nav">
|
||
<a href="#about">Аурулар</a>
|
||
<a href="#timer">Жаттығу</a>
|
||
<a href="#tips">Кеңестер</a>
|
||
<a href="#meds">Дәрі</a>
|
||
<a href="#drugs">Дәрілер</a>
|
||
<a href="#chat">Шағым</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero" id="top">
|
||
<div class="container">
|
||
<p class="hero-badge">Артрит · Артроз · Анкилозды спондилит (Бехтерев ауруы)</p>
|
||
<h1>Буындарыңды сақта —<br>күн сайын қозғал</h1>
|
||
<p>Бұл сайт сенің күнделікті көмекшің: дайын жаттығу кешені таймермен, ауруға қарсы қарапайым кеңестер және дәрі туралы еске салулар. Қозғалыс — Бехтерев ауруы мен артриттегі ең күшті дәрі.</p>
|
||
<a class="btn" href="#timer">Бүгінгі жаттығуды бастау</a>
|
||
<a class="btn btn-ghost" href="#tips">Кеңестерді оқу</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="about">
|
||
<div class="container">
|
||
<h2>Өз ауруыңды біл — бұл жеңіс жартысы</h2>
|
||
<div class="grid3">
|
||
<div class="card reveal">
|
||
<div class="card-ico">🔥</div>
|
||
<h3>Артрит</h3>
|
||
<p>Буындардың <b>қабынуы</b>. Ісіну, ауырсыну, таңертең қаттылық. Қозғалыс қабынуды төмендетуге көмектеседі, бірақ жүктеме қалыпты болуы керек.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-ico">⚙️</div>
|
||
<h3>Артроз</h3>
|
||
<p>Буын <b>шеміршегінің тозуы</b>. Ауырсыну әдетте күннің соңына қарай күшейеді. Тұрақты жеңіл қозғалыс буынды «майлап» тұрады.</p>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-ico">🧘</div>
|
||
<h3>Бехтерев ауруы</h3>
|
||
<p>Омыртқа мен буындардың созылмалы қабынуы. Басты мақсат — <b>қозғалғыштықты сақтау</b>. Таңертеңгі гимнастика — бұл аурудағы ең маңызды әдет.</p>
|
||
</div>
|
||
</div>
|
||
<p class="note">Ауру туралы неғұрлым көп білсең, соғұрлым оны басқару оңай. Толық ақпаратты ревматолог дәрігерден аласың.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section dark" id="timer">
|
||
<div class="container">
|
||
<h2>⏱ Күнделікті жаттығу кешені</h2>
|
||
<p class="lead">Әр жаттығуды өз қарқыныңмен, ауырсынбай ғана орында. Тынысыңды ұстама, тегіс тыныста. Жаттығуды таңертең және қажет болса кешке жаса.</p>
|
||
|
||
<div class="timer-wrap">
|
||
<div class="timer-left">
|
||
<div class="ring" id="ring">
|
||
<div class="ring-inner">
|
||
<div class="timer-time" id="time">01:00</div>
|
||
<div class="timer-name" id="timerName">Жаттығуды таңда</div>
|
||
</div>
|
||
</div>
|
||
<div class="timer-btns">
|
||
<button class="btn btn-big" id="startBtn">▶ Бастау</button>
|
||
<button class="btn btn-ghost" id="resetBtn">↺ Қайта</button>
|
||
<button class="btn btn-ghost" id="skipBtn">Келесі →</button>
|
||
</div>
|
||
<div class="timer-progress">
|
||
<span id="progText">0 / 0</span>
|
||
<div class="bar"><div class="bar-fill" id="progBar"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="ex-list" id="exList"></div>
|
||
</div>
|
||
|
||
<button class="btn btn-wide" id="autoBtn">🎯 Толық кешенді бастау (барлық 8 жаттығу)</button>
|
||
<p class="note-light">Бір рет бассаң — жаттығулар ретімен өтеді, арасында 10 секунд демалыс.</p>
|
||
|
||
<h3 class="vid-h">📺 Жаттығулардың видеосы — дәрігерлермен түсірілген ресми кешендер</h3>
|
||
<div class="videos">
|
||
<div class="vid reveal">
|
||
<iframe src="https://www.youtube.com/embed/0t0k5SD48h8" title="Разминка ЛФК" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
|
||
<p><b>Разминка</b> — жаттығу алдындағы қыздыру (Бехтерев ауруы)</p>
|
||
</div>
|
||
<div class="vid reveal">
|
||
<iframe src="https://www.youtube.com/embed/RE93Us7ZB1U" title="ЛФК низкая активность" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
|
||
<p><b>ЛФК №1</b> — ауру жеңіл болғандағы жаттығу кешені</p>
|
||
</div>
|
||
<div class="vid reveal">
|
||
<iframe src="https://www.youtube.com/embed/ibYPHjGjbCA" title="ЛФК умеренная активность" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
|
||
<p><b>ЛФК №2</b> — орташа дәрежедегі ауруға арналған кешен</p>
|
||
</div>
|
||
<div class="vid reveal">
|
||
<iframe src="https://www.youtube.com/embed/x4sSCXd4nso" title="ЛФК высокая активность" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
|
||
<p><b>ЛФК №3</b> — ауыр дәрежедегі ауруға арналған кешен</p>
|
||
</div>
|
||
<div class="vid reveal">
|
||
<iframe src="https://www.youtube.com/embed/ECoy8zdgGrM" title="Гимнастика при артрозе" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
|
||
<p><b>Буын гимнастикасы</b> — артроз бен буын ауруларына арналған жаттығулар</p>
|
||
</div>
|
||
</div>
|
||
<p class="note-light">Бұл видеолар ревматолог дәрігерлердің қатысуымен түсірілген ресми оқу материалдары. Өзіңе қолайлы кешенді таңдап, дәрігермен келіс.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="tips">
|
||
<div class="container">
|
||
<h2>Күнделікті 7 кеңес</h2>
|
||
<div class="tips">
|
||
<div class="tip reveal"><b>1. Таңертең қозғал.</b> Бехтерев ауруында төсектен тұрмай-ақ 3-4 минут жеңіл тыныс және созылу жасап, содан кейін тұр.</div>
|
||
<div class="tip reveal"><b>2. Позаңды қадағала.</b> Омыртқа тік болсын: жұмыста, көлікте, телефон қарағанда. Әр 40 минут сайын тұрып созыл.</div>
|
||
<div class="tip reveal"><b>3. Қатты төсек, жұқа жастық.</b> Омыртқа түнде иілмеуі керек. Арқаңмен жату — ең жақсы нұсқа.</div>
|
||
<div class="tip reveal"><b>4. Жылу — дос, суық — ауырсыну.</b> Таңертең жылы душ немесе жылы компресс қаттылықты кетіреді. Суықта жылы киін.</div>
|
||
<div class="tip reveal"><b>5. Жүктемені бөл.</b> Ауыр көтеруден, бір қалыпта ұзақ отырудан сақтан. Жүктемемен баламалап демал.</div>
|
||
<div class="tip reveal"><b>6. Су іш және дұрыс тамақтан.</b> Омега-3 (теңіз балығы, зығыр), D дәрумені (күн сәулесі), кальций. Артық салмақ буынға жүктеме.</div>
|
||
<div class="tip reveal"><b>7. Стрессті басқар.</b> Стресс қабынуды күшейтеді. Тыныш тыныс алу, серуен, жеткілікті ұйқы — бәрі терапияның бөлігі.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="meds">
|
||
<div class="container">
|
||
<h2>Дәрі туралы: не білу керек</h2>
|
||
<div class="grid3">
|
||
<div class="card reveal">
|
||
<div class="card-ico">💉</div>
|
||
<h3>Укол түрлері</h3>
|
||
<ul class="med-list">
|
||
<li><b>Бұлшықетке (ішімге) уколдар</b> — қабынуға қарсы препараттар (НПВП), В дәрумендері. Қатты ауырсыну кезінде қысқа курс.</li>
|
||
<li><b>Буын ішіне укол</b> — стероид қабынуға қарсы дәрі. Бір буын қатты қабынғанда дәрігер салады, жиі қайталауға болмайды.</li>
|
||
<li><b>Тері астына укол</b> — Бехтерев ауруындағы биологиялық терапия (иммунды жүйеге әсер ететін дәрілер). Тек ревматолог тағайындайды және бақылайды.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-ico">💊</div>
|
||
<h3>Дәрі түрлері (ішу)</h3>
|
||
<ul class="med-list">
|
||
<li><b>Қабынуға қарсы (НПВП)</b> — ауырсыну мен қабынуды төмендетеді. Асқазанға сақ болу керек: тек дәрігер дозасында, ас ішкеннен кейін.</li>
|
||
<li><b>Ауырсыну басатын</b> — жеке жағдайда дәрігер тағайындайды.</li>
|
||
<li><b>Бұлшықет босаңсытқыштар</b> — қаттылық пен түйілуді азайтады.</li>
|
||
<li><b>Биологиялық терапия</b> — Бехтерев ауруының ауыр түрінде, тек ревматолог бақылауында.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="card-ico">🧴</div>
|
||
<h3>Мазь түрлері</h3>
|
||
<ul class="med-list">
|
||
<li><b>Қабынуға қарсы мазьдар</b> — буын үстіне жағылады, жергілікті ауырсынуды азайтады.</li>
|
||
<li><b>Жылытатын мазьдар</b> — қан айналымын жақсартады, бұлшықет қаттылығын жеңілдетеді. Жедел қабыну кезінде қолданба.</li>
|
||
<li><b>Салқындататын гельдер</b> — өткір ауырсынуда, қабынған буынға.</li>
|
||
<li><b>Хондропротекторлы кремдер</b> — көмекші құрал ретінде ғана.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="warn reveal">⚠️ <b>Маңызды:</b> бұл жалпы ақпарат, медициналық кеңес емес. Мұндағы ешбір препаратты өз бетіңмен қабылдама — уколды да, мазді да, таблетканы да тек дәрігер тағайындайды және дозасын анықтайды. Дәрігердің кеңесінсіз дозаны өзгертпе, үзіп тастама.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section dark" id="chat">
|
||
<div class="container">
|
||
<h2>💬 Шағымыңды айт</h2>
|
||
<p class="lead">Ауырсыну, қаттылық немесе басқа шағымыңды жаз — жүйе не істеу керек екенін айтады. Мысалы: «таңертең арқам қатты, қозғалу қиын».</p>
|
||
<div class="chat" id="chatBox">
|
||
<div class="msg bot">Сәлем! Шағымыңды жаз: ауырсыну қайда, қашан пайда болады, не істегенде жеңілдейді?</div>
|
||
</div>
|
||
<div class="chat-in">
|
||
<textarea id="chatInput" rows="2" placeholder="Мысалы: түнде бел ауырады, таңертең қиын тұрамын..."></textarea>
|
||
<button class="btn" id="chatSend">Жіберу</button>
|
||
</div>
|
||
<p class="note-light">Жауапты жасанды интеллект береді — бұл дәрігер кеңесінің орнын баспайды. Өткір ауырсыну болса — дәрігерге қарал.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section gray" id="drugs">
|
||
<div class="container">
|
||
<h2>Дәрі-дәрмек түрлері: аты мен көрінісі</h2>
|
||
<p class="lead">Төменде емдеуде жиі қолданылатын дәрі топтары және олардың белсенді затының аты. Фото — иллюстрация. Нақты дәріні және дозаны тек дәрігер тағайындайды.</p>
|
||
|
||
<div class="grid3">
|
||
<div class="card drug-card reveal">
|
||
<div class="drug-photo"><img src="https://loremflickr.com/600/400/syringe,injection" alt="Укол" loading="lazy"></div>
|
||
<h3>💉 Уколдар</h3>
|
||
<ul class="med-list">
|
||
<li><b>Диклофенак</b> — қабынуға қарсы, бұлшықетке укол</li>
|
||
<li><b>Мелоксикам</b> — қабынуға қарсы, бұлшықетке укол</li>
|
||
<li><b>Бетаметазон</b> — буын ішіне, қатты қабынуда</li>
|
||
<li><b>Метилпреднизолон</b> — буын ішіне, дәрігер тағайындауымен</li>
|
||
<li><b>Биологиялық терапия</b> — тері астына, Бехтерев ауруында, тек ревматолог</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card drug-card reveal">
|
||
<div class="drug-photo"><img src="https://loremflickr.com/600/400/medicine,tablets,pills" alt="Дәрі" loading="lazy"></div>
|
||
<h3>💊 Дәрілер (ішу)</h3>
|
||
<ul class="med-list">
|
||
<li><b>Диклофенак</b> — қабынуға қарсы таблетка</li>
|
||
<li><b>Ибупрофен</b> — қабынуға қарсы және ауырсыну басатын</li>
|
||
<li><b>Мелоксикам</b> — ұзақ қабылдауға қолайлырақ</li>
|
||
<li><b>Нимесулид</b> — қабынуға қарсы, жедел кезеңде</li>
|
||
<li><b>Толперизон</b> — бұлшықет босаңсытқыш</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card drug-card reveal">
|
||
<div class="drug-photo"><img src="https://loremflickr.com/600/400/cream,ointment,tube" alt="Мазь" loading="lazy"></div>
|
||
<h3>🧴 Мазьдар мен гельдер</h3>
|
||
<ul class="med-list">
|
||
<li><b>Диклофенак гель</b> — буын үстіне, қабынуға қарсы</li>
|
||
<li><b>Кетопрофен гель</b> — ауырсынуды басатын, сыртқа жағу</li>
|
||
<li><b>Жылытатын мазьдар</b> — қаттылықта, қабынусыз кезеңде</li>
|
||
<li><b>Салқындататын гельдер</b> — өткір ауырсынуда</li>
|
||
<li><b>Хондропротекторлы кремдер</b> — көмекші құрал ретінде</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="warn reveal">⚠️ <b>Ескерту:</b> бұл бөлімдегі атаулар — белсенді заттардың жалпы атаулары, олардың бірнеше түрлі фирмалық атаулары болуы мүмкін. Өз бетіңмен ешқандай дәрі сатып алма және қабылдама. Тек дәрігер сенің диагнозыңа қарап дәріні, түрін және дозасын тағайындайды.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p>🦴 Буын денсаулығы — күнделікті көмекші</p>
|
||
<p class="foot-small">Қозғалыс — дәрі. Бүгін баста.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|