{"id":17709,"date":"2026-03-09T10:56:29","date_gmt":"2026-03-09T07:56:29","guid":{"rendered":"https:\/\/smartedujo.com\/?page_id=17709"},"modified":"2026-03-09T10:56:32","modified_gmt":"2026-03-09T07:56:32","slug":"%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%ab%d8%a7%d9%84%d8%ab-%d8%a7%d9%84%d8%aa%d9%83%d8%a7%d8%ab%d8%b1-%d9%88%d8%a7%d9%84%d9%86%d9%85%d9%88","status":"publish","type":"page","link":"https:\/\/smartedujo.com\/ar\/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%ab%d8%a7%d9%84%d8%ab-%d8%a7%d9%84%d8%aa%d9%83%d8%a7%d8%ab%d8%b1-%d9%88%d8%a7%d9%84%d9%86%d9%85%d9%88\/","title":{"rendered":"\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u062a\u0643\u0627\u062b\u0631 \u0648\u0627\u0644\u0646\u0645\u0648"},"content":{"rendered":"\n
\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u062a\u0643\u0627\u062b\u0631 \u0648\u0627\u0644\u0646\u0645\u0648<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n background: linear-gradient(to bottom right, #312e81, #5b21b6);\r\n font-family: 'Cairo', sans-serif;\r\n color: #f1f5f9;\r\n min-height: 100vh;\r\n padding: 2rem;\r\n }\r\n .content-container {\r\n max-width: 96rem;\r\n margin: 0 auto;\r\n background-color: rgba(30, 27, 75, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n }\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1e1b4b; }\r\n ::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }\r\n .simulation-card {\r\n background-color: rgba(30, 41, 59, 0.5);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 1.5rem;\r\n margin: 2rem 0;\r\n }\r\n .part-btn {\r\n background: #1e293b;\r\n border: 1px solid #475569;\r\n color: #94a3b8;\r\n padding: 0.25rem 0.5rem;\r\n border-radius: 0.375rem;\r\n font-size: 0.75rem;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n .part-btn:hover {\r\n background: #334155;\r\n }\r\n .part-btn.selected {\r\n background: #334155;\r\n border-color: #60a5fa;\r\n color: white;\r\n }\r\n .info-panel {\r\n background: #1e293b;\r\n border: 1px solid #475569;\r\n border-radius: 0.75rem;\r\n padding: 1rem;\r\n min-height: 150px;\r\n }\r\n .fetus-stage-card {\r\n background: #1e293b;\r\n border: 1px solid #475569;\r\n border-radius: 0.75rem;\r\n padding: 1.25rem;\r\n }\r\n .control-btn {\r\n background: #334155;\r\n color: white;\r\n border-radius: 9999px;\r\n padding: 0.5rem;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n .control-btn:hover:not(:disabled) {\r\n background: #475569;\r\n }\r\n .control-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n .play-btn {\r\n background: rgba(34, 197, 94, 0.2);\r\n color: #4ade80;\r\n border: 1px solid #4ade80;\r\n padding: 0.5rem 1rem;\r\n border-radius: 0.5rem;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n .play-btn.playing {\r\n background: rgba(239, 68, 68, 0.2);\r\n color: #f87171;\r\n border-color: #f87171;\r\n }\r\n .play-btn:hover {\r\n filter: brightness(1.2);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u062a\u0643\u0627\u062b\u0631 \u0648\u0627\u0644\u0646\u0645\u0648<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0645\u0646<\/p>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1);\">\r\n <div style=\"display: flex; flex-direction: column; align-items: flex-end;\">\r\n <span style=\"font-size: 0.625rem; color: #a5b4fc; line-height: 1;\">\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0639\u0644\u0645<\/span>\r\n <span style=\"font-size: 0.875rem; font-weight: bold; color: white; line-height: 1;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <div style=\"width: 2rem; height: 2rem; border-radius: 9999px; background-color: rgba(79, 70, 229, 0.2); display: flex; align-items: center; justify-content: center;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 1.25rem; height: 1.25rem; color: #a5b4fc;\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-3.32-2.217A59.902 59.902 0 0112 3.493a59.902 59.902 0 0110.399 5.84l-3.32 2.217m-1.488-3.322a48.627 48.627 0 01-8.232 4.41\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- \u0645\u0634\u063a\u0644 \u0627\u0644\u0635\u0648\u062a -->\r\n <div class=\"mt-4 w-full\">\r\n <audio controls class=\"w-full h-10\">\r\n <source src=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/03\/reproduction_and_growth.mp3\" type=\"audio\/mpeg\">\r\n <source src=\"audio\/lesson_gas_state.ogg\" type=\"audio\/ogg\">\r\n \u0645\u062a\u0635\u0641\u062d\u0643 \u0644\u0627 \u064a\u062f\u0639\u0645 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0635\u0648\u062a. \u064a\u0645\u0643\u0646\u0643 <a href=\"https:\/\/smartedujo.com\/wp-content\/uploads\/2026\/03\/reproduction_and_growth.mp3\" class=\"text-indigo-300 underline\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u0635\u0648\u062a\u064a<\/a>.\r\n <\/audio>\r\n <span class=\"text-xs text-indigo-300\">\u0634\u0631\u062d \u0627\u0644\u062f\u0631\u0633 (\u0635\u0648\u062a)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 text-right\">\r\n \r\n<h1 class=\"text-3xl font-bold text-center text-indigo-200 mb-8\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u062a\u0643\u0627\u062b\u0631 \u0648\u0627\u0644\u0646\u0645\u0648<\/h1>\r\n\r\n<div class=\"bg-indigo-900\/30 rounded-2xl p-6 mb-8 border border-indigo-500\/30 shadow-lg\">\r\n <h2 class=\"text-2xl font-bold text-indigo-300 mb-4 flex items-center gap-2\">\r\n <span><\/span> \u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\r\n <\/h2>\r\n <p class=\"text-gray-200 leading-relaxed text-lg\">\r\n \u064a\u064f\u0646\u062a\u062c \u0627\u0644\u062c\u0647\u0627\u0632\u0627\u0646 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a\u0627\u0646 (\u0627\u0644\u0630\u0643\u0631\u064a \u0648\u0627\u0644\u0623\u0646\u062b\u0648\u064a) \u0627\u0644\u0623\u0645\u0634\u0627\u062c (\u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062c\u0646\u0633\u064a\u0629) \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u062a\u0643\u0627\u062b\u0631 \u0627\u0644\u0625\u0646\u0633\u0627\u0646. \u0648\u062a\u0624\u062f\u064a \u0627\u0644\u0647\u0631\u0645\u0648\u0646\u0627\u062a \u062f\u0648\u0631\u064b\u0627 \u0645\u0647\u0645\u064b\u0627 \u0641\u064a \u062a\u0646\u0638\u064a\u0645 \u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062a\u0643\u0627\u062b\u0631 \u0648\u0646\u0645\u0648 \u0627\u0644\u062c\u0646\u064a\u0646. \u0627\u0644\u062a\u0643\u0627\u062b\u0631 \u0647\u0648 \u0639\u0645\u0644\u064a\u0629 \u062d\u064a\u0648\u064a\u0629 \u062a\u0647\u062f\u0641 \u0625\u0644\u0649 \u0627\u0633\u062a\u0645\u0631\u0627\u0631 \u0627\u0644\u0646\u0648\u0639 \u0627\u0644\u0628\u0634\u0631\u064a.\r\n <\/p>\r\n<\/div>\r\n\r\n<div class=\"space-y-12\">\r\n <!-- \u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0630\u0643\u0631\u064a -->\r\n <section>\r\n <h2 class=\"text-2xl font-bold text-blue-400 mb-6 border-b border-blue-500\/30 pb-2\">\u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0630\u0643\u0631\u064a (Male Reproductive System)<\/h2>\r\n \r\n <div class=\"bg-gray-800\/40 p-6 rounded-2xl border border-gray-700 mb-8\">\r\n <h3 class=\"text-xl font-bold text-blue-300 mb-4\">1. \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0630\u0643\u0631\u064a \u0648\u0648\u0638\u0627\u0626\u0641\u0647<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-blue-900\/20 p-5 rounded-xl border border-blue-500\/30\">\r\n <strong class=\"text-white block mb-2 text-lg\">\u0627\u0644\u062e\u0635\u064a\u062a\u0627\u0646 (Testes)<\/strong>\r\n <p class=\"text-gray-300 text-l mb-2\">\u0647\u0645\u0627 \u0627\u0644\u0639\u0636\u0648 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u060c \u0648\u062a\u0648\u062c\u062f\u0627\u0646 \u062f\u0627\u062e\u0644 \u0643\u064a\u0633 \u0627\u0644\u0635\u0641\u0646 \u062e\u0627\u0631\u062c \u062a\u062c\u0648\u064a\u0641 \u0627\u0644\u0628\u0637\u0646.<\/p>\r\n <ul class=\"list-disc list-inside text-gray-400 text-l space-y-1\">\r\n <li>\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 (\u0627\u0644\u0623\u0645\u0634\u0627\u062c \u0627\u0644\u0630\u0643\u0631\u064a\u0629).<\/li>\r\n <li>\u0625\u0646\u062a\u0627\u062c \u0647\u0631\u0645\u0648\u0646 \u0627\u0644\u0630\u0643\u0648\u0631\u0629 (\u0627\u0644\u062a\u0633\u062a\u0648\u0633\u062a\u064a\u0631\u0648\u0646).<\/li>\r\n <\/ul>\r\n <div class=\"mt-3 bg-blue-900\/40 p-2 rounded text-l text-blue-200\">\r\n \u062a\u0648\u062c\u062f\u0627\u0646 \u062e\u0627\u0631\u062c \u0627\u0644\u062c\u0633\u0645 \u0644\u062a\u0648\u0641\u064a\u0631 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u0623\u0642\u0644 \u0645\u0646 37\u00b0\u0645 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0646\u0645\u0648 \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629.\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-gray-700\/30 p-4 rounded-xl border border-gray-600\">\r\n <strong class=\"text-blue-200 block mb-1\">\u0627\u0644\u0628\u0631\u0628\u062e (Epididymis)<\/strong>\r\n <span class=\"text-gray-400 text-l\">\u0623\u0646\u0628\u0648\u0628 \u0645\u0644\u062a\u0641 \u0641\u0648\u0642 \u0627\u0644\u062e\u0635\u064a\u0629\u060c \u062a\u0646\u0636\u062c \u0641\u064a\u0647 \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 \u0648\u062a\u064f\u062e\u0632\u0651\u0646.<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-700\/30 p-4 rounded-xl border border-gray-600\">\r\n <strong class=\"text-blue-200 block mb-1\">\u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0646\u0627\u0642\u0644 (Vas Deferens)<\/strong>\r\n <span class=\"text-gray-400 text-l\">\u0623\u0646\u0628\u0648\u0628 \u064a\u0646\u0642\u0644 \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 \u0645\u0646 \u0627\u0644\u0628\u0631\u0628\u062e \u0625\u0644\u0649 \u0627\u0644\u0625\u062d\u0644\u064a\u0644.<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-700\/30 p-4 rounded-xl border border-gray-600\">\r\n <strong class=\"text-blue-200 block mb-1\">\u0627\u0644\u0625\u062d\u0644\u064a\u0644 (Urethra)<\/strong>\r\n <span class=\"text-gray-400 text-l\">\u0642\u0646\u0627\u0629 \u0645\u0634\u062a\u0631\u0643\u0629 \u0644\u0644\u0628\u0648\u0644 \u0648\u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 (\u0641\u064a \u0623\u0648\u0642\u0627\u062a \u0645\u0646\u0641\u0635\u0644\u0629).<\/span>\r\n <\/div>\r\n <div class=\"bg-gray-700\/30 p-4 rounded-xl border border-gray-600\">\r\n <strong class=\"text-blue-200 block mb-1\">\u0627\u0644\u063a\u062f\u062f \u0627\u0644\u0645\u0644\u062d\u0642\u0629<\/strong>\r\n <span class=\"text-gray-400 text-l\">\u062a\u0641\u0631\u0632 \u0633\u0648\u0627\u0626\u0644 \u062a\u063a\u0630\u064a \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 \u0648\u062a\u0633\u0647\u0644 \u062d\u0631\u0643\u062a\u0647\u0627 (\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0645\u0646\u064a).<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0630\u0643\u0631\u064a -->\r\n <div class=\"simulation-card\" id=\"male-simulation\">\r\n <h3 class=\"text-2xl font-bold text-center text-blue-300 mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0630\u0643\u0631\u064a<\/h3>\r\n <div class=\"flex flex-col md:flex-row gap-8 items-start\">\r\n <div class=\"flex-1 bg-slate-800\/50 rounded-xl p-4 border border-slate-600 relative min-h-[400px] flex items-center justify-center\">\r\n <svg viewBox=\"0 0 400 500\" class=\"w-full h-full max-h-[500px]\" id=\"male-svg\">\r\n <defs>\r\n <filter id=\"glow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\r\n <feGaussianBlur stdDeviation=\"3\" result=\"blur\" \/>\r\n <feComposite in=\"SourceGraphic\" in2=\"blur\" operator=\"over\" \/>\r\n <\/filter>\r\n <\/defs>\r\n\r\n <!-- Body Outline (Simplified) -->\r\n <path d=\"M 50 100 Q 50 400 100 450 L 300 450 Q 350 400 350 100\" fill=\"none\" stroke=\"#475569\" stroke-width=\"2\" stroke-dasharray=\"5,5\" opacity=\"0.5\"\/>\r\n\r\n <!-- Bladder (Context) -->\r\n <path d=\"M 150 100 Q 200 50 250 100 Q 250 180 200 180 Q 150 180 150 100\" fill=\"#334155\" opacity=\"0.5\" \/>\r\n <text x=\"200\" y=\"90\" text-anchor=\"middle\" fill=\"#94a3b8\" font-size=\"12\">\u0627\u0644\u0645\u062b\u0627\u0646\u0629 (\u0644\u0644\u062a\u0648\u0636\u064a\u062d)<\/text>\r\n\r\n <!-- Urethra -->\r\n <path id=\"urethra\" data-part=\"urethra\" d=\"M 200 180 L 200 280 L 210 410\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"6\" stroke-linecap=\"round\" class=\"part cursor-pointer hover:opacity-80 transition-colors\" \/>\r\n\r\n <!-- Penis -->\r\n <path id=\"penis\" data-part=\"penis\" d=\"M 180 280 L 180 370 Q 180 420 210 420 Q 240 420 240 370 L 240 280\" fill=\"#cbd5e1\" opacity=\"0.3\" stroke=\"#475569\" stroke-width=\"2\" class=\"part cursor-pointer transition-colors\" \/>\r\n\r\n <!-- Testis (left) -->\r\n <ellipse id=\"testis\" data-part=\"testis\" cx=\"140\" cy=\"340\" rx=\"25\" ry=\"35\" fill=\"#cbd5e1\" stroke=\"#475569\" stroke-width=\"2\" class=\"part cursor-pointer hover:brightness-110 transition-colors\" \/>\r\n\r\n <!-- Scrotum -->\r\n <path id=\"scrotum\" data-part=\"scrotum\" d=\"M 110 300 Q 100 390 140 400 Q 180 390 175 300\" fill=\"none\" stroke=\"#475569\" stroke-width=\"2\" stroke-dasharray=\"4,4\" class=\"part cursor-pointer hover:stroke-amber-500 transition-colors\" \/>\r\n\r\n <!-- Epididymis -->\r\n <path id=\"epididymis\" data-part=\"epididymis\" d=\"M 130 305 Q 160 300 165 340 Q 160 370 140 370\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"6\" stroke-linecap=\"round\" class=\"part cursor-pointer hover:stroke-green-400 transition-colors\" \/>\r\n\r\n <!-- Vas Deferens -->\r\n <path id=\"vas_deferens\" data-part=\"vas_deferens\" d=\"M 130 305 Q 110 290 110 250 Q 110 150 200 180\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"4\" stroke-dasharray=\"4,2\" class=\"part cursor-pointer hover:stroke-blue-400 transition-colors\" \/>\r\n\r\n <!-- Seminal Vesicle -->\r\n <path id=\"seminal_vesicle\" data-part=\"seminal_vesicle\" d=\"M 220 160 Q 260 140 250 180\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"8\" stroke-linecap=\"round\" class=\"part cursor-pointer hover:stroke-purple-400 transition-colors\" \/>\r\n\r\n <!-- Prostate -->\r\n <circle id=\"prostate\" data-part=\"prostate\" cx=\"200\" cy=\"200\" r=\"15\" fill=\"#94a3b8\" opacity=\"0.8\" class=\"part cursor-pointer hover:fill-pink-400 transition-colors\" \/>\r\n\r\n <!-- Labels -->\r\n <line x1=\"140\" y1=\"340\" x2=\"100\" y2=\"340\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"90\" y=\"345\" text-anchor=\"end\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-yellow-400\" onclick=\"selectPart('testis')\">\u0627\u0644\u062e\u0635\u064a\u0629<\/text>\r\n\r\n <line x1=\"130\" y1=\"305\" x2=\"90\" y2=\"290\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"80\" y=\"290\" text-anchor=\"end\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-green-400\" onclick=\"selectPart('epididymis')\">\u0627\u0644\u0628\u0631\u0628\u062e<\/text>\r\n\r\n <line x1=\"110\" y1=\"200\" x2=\"80\" y2=\"200\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"70\" y=\"205\" text-anchor=\"end\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-blue-400\" onclick=\"selectPart('vas_deferens')\">\u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0646\u0627\u0642\u0644<\/text>\r\n\r\n <line x1=\"250\" y1=\"160\" x2=\"320\" y2=\"160\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"330\" y=\"165\" text-anchor=\"start\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-purple-400\" onclick=\"selectPart('seminal_vesicle')\">\u0627\u0644\u062d\u0648\u064a\u0635\u0644\u0629 \u0627\u0644\u0645\u0646\u0648\u064a\u0629<\/text>\r\n\r\n <line x1=\"215\" y1=\"200\" x2=\"300\" y2=\"200\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"310\" y=\"205\" text-anchor=\"start\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-pink-400\" onclick=\"selectPart('prostate')\">\u0627\u0644\u0628\u0631\u0648\u0633\u062a\u0627\u062a<\/text>\r\n\r\n <line x1=\"210\" y1=\"350\" x2=\"280\" y2=\"350\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"290\" y=\"355\" text-anchor=\"start\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-red-400\" onclick=\"selectPart('urethra')\">\u0627\u0644\u0625\u062d\u0644\u064a\u0644<\/text>\r\n <\/svg>\r\n <div class=\"absolute bottom-2 right-2 text-l text-slate-500\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0623\u062c\u0632\u0627\u0621 \u0644\u0644\u062a\u0639\u0631\u0641 \u0639\u0644\u064a\u0647\u0627<\/div>\r\n <\/div>\r\n\r\n <div class=\"w-full md:w-1\/3 flex flex-col gap-4\">\r\n <div class=\"info-panel\" id=\"male-info\">\r\n <h4 class=\"text-lg font-bold text-white mb-4 border-b border-slate-600 pb-2\" id=\"male-part-name\">\u0627\u062e\u062a\u0631 \u062c\u0632\u0621\u0627\u064b<\/h4>\r\n <p class=\"text-slate-300 leading-relaxed\" id=\"male-part-description\">\u0642\u0645 \u0628\u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0641\u064a \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a \u0644\u0639\u0631\u0636 \u0648\u0638\u064a\u0641\u0629 \u0643\u0644 \u062c\u0632\u0621.<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <h5 class=\"text-l font-bold text-slate-400 mb-3\">\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u062c\u0632\u0627\u0621<\/h5>\r\n <div class=\"flex flex-wrap gap-2\" id=\"male-buttons\">\r\n <!-- \u062a\u0645\u0644\u0623 \u0628\u0648\u0627\u0633\u0637\u0629 JS -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-800\/40 p-6 rounded-2xl border border-gray-700 mt-6\">\r\n <h3 class=\"text-xl font-bold text-blue-300 mb-4\">2. \u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u062d\u064a\u0648\u0627\u0646 \u0627\u0644\u0645\u0646\u0648\u064a<\/h3>\r\n <div class=\"flex flex-col md:flex-row gap-4 justify-center items-center\">\r\n <div class=\"bg-gray-900\/50 p-4 rounded-xl text-center w-full md:w-1\/3 border border-gray-600\">\r\n <div class=\"text-2xl mb-2\"><\/div>\r\n <strong class=\"text-white block mb-1\">\u0627\u0644\u0631\u0623\u0633<\/strong>\r\n <p class=\"text-gray-400 text-l\">\u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0646\u0648\u0627\u0629 (\u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629) \u0648\u0625\u0646\u0632\u064a\u0645\u0627\u062a \u0644\u0627\u062e\u062a\u0631\u0627\u0642 \u0627\u0644\u0628\u0648\u064a\u0636\u0629.<\/p>\r\n <\/div>\r\n <div class=\"text-blue-500 text-2xl\"><\/div>\r\n <div class=\"bg-gray-900\/50 p-4 rounded-xl text-center w-full md:w-1\/3 border border-gray-600\">\r\n <div class=\"text-2xl mb-2\"><\/div>\r\n <strong class=\"text-white block mb-1\">\u0627\u0644\u0642\u0637\u0639\u0629 \u0627\u0644\u0648\u0633\u0637\u0649<\/strong>\r\n <p class=\"text-gray-400 text-l\">\u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0645\u064a\u062a\u0648\u0643\u0648\u0646\u062f\u0631\u064a\u0627 \u0644\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0644\u0644\u062d\u0631\u0643\u0629.<\/p>\r\n <\/div>\r\n <div class=\"text-blue-500 text-2xl\"><\/div>\r\n <div class=\"bg-gray-900\/50 p-4 rounded-xl text-center w-full md:w-1\/3 border border-gray-600\">\r\n <div class=\"text-2xl mb-2\">\u3030\ufe0f<\/div>\r\n <strong class=\"text-white block mb-1\">\u0627\u0644\u0630\u064a\u0644<\/strong>\r\n <p class=\"text-gray-400 text-l\">\u0633\u0648\u0637 \u0637\u0648\u064a\u0644 \u0644\u0644\u0633\u0628\u0627\u062d\u0629 \u0646\u062d\u0648 \u0627\u0644\u0628\u0648\u064a\u0636\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u062b\u0627\u0646\u064a\u0627\u064b: \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0623\u0646\u062b\u0648\u064a -->\r\n <section>\r\n <h2 class=\"text-2xl font-bold text-pink-400 mb-6 border-b border-pink-500\/30 pb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0623\u0646\u062b\u0648\u064a (Female Reproductive System)<\/h2>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n <div class=\"bg-pink-900\/20 p-5 rounded-xl border border-pink-500\/30\">\r\n <strong class=\"text-white block mb-2 text-lg\">\u0627\u0644\u0645\u0628\u064a\u0636\u0627\u0646 (Ovaries)<\/strong>\r\n <p class=\"text-gray-300 text-l mb-2\">\u0627\u0644\u0639\u0636\u0648 \u0627\u0644\u0623\u0633\u0627\u0633\u064a.<\/p>\r\n <ul class=\"list-disc list-inside text-gray-400 text-l space-y-1\">\r\n <li>\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u0628\u0648\u064a\u0636\u0627\u062a (\u0627\u0644\u0623\u0645\u0634\u0627\u062c \u0627\u0644\u0623\u0646\u062b\u0648\u064a\u0629).<\/li>\r\n <li>\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u0647\u0631\u0645\u0648\u0646\u0627\u062a (\u0627\u0644\u0625\u0633\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0628\u0631\u0648\u062c\u0633\u062a\u064a\u0631\u0648\u0646).<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"bg-pink-900\/20 p-5 rounded-xl border border-pink-500\/30\">\r\n <strong class=\"text-white block mb-2 text-lg\">\u0642\u0646\u0627\u0629 \u0627\u0644\u0628\u064a\u0636 (Fallopian Tube)<\/strong>\r\n <ul class=\"list-disc list-inside text-gray-400 text-l space-y-1\">\r\n <li>\u0646\u0642\u0644 \u0627\u0644\u0628\u0648\u064a\u0636\u0629 \u0645\u0646 \u0627\u0644\u0645\u0628\u064a\u0636 \u0644\u0644\u0631\u062d\u0645.<\/li>\r\n <li>\u0645\u0643\u0627\u0646 \u062d\u062f\u0648\u062b \u0627\u0644\u0625\u062e\u0635\u0627\u0628.<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"bg-pink-900\/20 p-5 rounded-xl border border-pink-500\/30\">\r\n <strong class=\"text-white block mb-2 text-lg\">\u0627\u0644\u0631\u062d\u0645 (Uterus)<\/strong>\r\n <p class=\"text-gray-300 text-l mb-2\">\u0639\u0636\u0648 \u0639\u0636\u0644\u064a \u0643\u0645\u062b\u0631\u064a \u0627\u0644\u0634\u0643\u0644.<\/p>\r\n <ul class=\"list-disc list-inside text-gray-400 text-l space-y-1\">\r\n <li>\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0627\u0644\u0628\u0648\u064a\u0636\u0629 \u0627\u0644\u0645\u062e\u0635\u0628\u0629.<\/li>\r\n <li>\u062a\u063a\u0630\u064a\u0629 \u0648\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u062c\u0646\u064a\u0646 (9 \u0623\u0634\u0647\u0631).<\/li>\r\n <li>\u0642\u0627\u0628\u0644 \u0644\u0644\u062a\u0645\u062f\u062f \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631.<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"bg-gray-800\/40 p-5 rounded-xl border border-gray-700 md:col-span-2 lg:col-span-3 flex flex-wrap gap-4 justify-center\">\r\n <div class=\"bg-gray-700\/50 px-4 py-2 rounded-lg text-l text-gray-300\">\r\n <strong class=\"text-pink-300\">\u0639\u0646\u0642 \u0627\u0644\u0631\u062d\u0645:<\/strong> \u0627\u0644\u0641\u062a\u062d\u0629 \u0627\u0644\u0633\u0641\u0644\u064a\u0629 \u0644\u0644\u0631\u062d\u0645.\r\n <\/div>\r\n <div class=\"bg-gray-700\/50 px-4 py-2 rounded-lg text-l text-gray-300\">\r\n <strong class=\"text-pink-300\">\u0627\u0644\u0645\u0647\u0628\u0644:<\/strong> \u0642\u0646\u0627\u0629 \u0639\u0636\u0644\u064a\u0629 (\u0642\u0646\u0627\u0629 \u0627\u0644\u0648\u0644\u0627\u062f\u0629).\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0623\u0646\u062b\u0648\u064a -->\r\n <div class=\"simulation-card\" id=\"female-simulation\">\r\n <h3 class=\"text-2xl font-bold text-center text-pink-300 mb-6\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0627\u0644\u0623\u0646\u062b\u0648\u064a<\/h3>\r\n <div class=\"flex flex-col md:flex-row gap-8 items-start\">\r\n <div class=\"flex-1 bg-slate-800\/50 rounded-xl p-4 border border-slate-600 relative min-h-[400px] flex items-center justify-center\">\r\n <svg viewBox=\"0 0 400 400\" class=\"w-full h-full max-h-[400px]\" id=\"female-svg\">\r\n <defs>\r\n <filter id=\"glow-female\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\r\n <feGaussianBlur stdDeviation=\"3\" result=\"blur\" \/>\r\n <feComposite in=\"SourceGraphic\" in2=\"blur\" operator=\"over\" \/>\r\n <\/filter>\r\n <\/defs>\r\n\r\n <!-- Vagina -->\r\n <path id=\"vagina\" data-part=\"vagina\" d=\"M 180 300 L 180 380 Q 200 390 220 380 L 220 300\" fill=\"#cbd5e1\" opacity=\"0.3\" stroke=\"#475569\" stroke-width=\"2\" class=\"part cursor-pointer transition-colors\" \/>\r\n\r\n <!-- Cervix -->\r\n <path id=\"cervix\" data-part=\"cervix\" d=\"M 170 280 Q 200 310 230 280\" fill=\"#cbd5e1\" opacity=\"0.5\" stroke=\"#475569\" stroke-width=\"2\" class=\"part cursor-pointer transition-colors\" \/>\r\n\r\n <!-- Uterus -->\r\n <path id=\"uterus\" data-part=\"uterus\" d=\"M 160 150 Q 100 150 140 250 Q 170 290 200 290 Q 230 290 260 250 Q 300 150 240 150 Q 200 180 160 150\" fill=\"#cbd5e1\" opacity=\"0.4\" stroke=\"#475569\" stroke-width=\"2\" class=\"part cursor-pointer transition-colors\" \/>\r\n\r\n <!-- Fallopian Tubes -->\r\n <path id=\"fallopian_tube\" data-part=\"fallopian_tube\" d=\"M 160 160 Q 100 120 60 180\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"8\" stroke-linecap=\"round\" class=\"part cursor-pointer hover:stroke-green-400 transition-colors\" \/>\r\n <path id=\"fallopian_tube2\" data-part=\"fallopian_tube\" d=\"M 240 160 Q 300 120 340 180\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"8\" stroke-linecap=\"round\" class=\"part cursor-pointer hover:stroke-green-400 transition-colors\" \/>\r\n <path d=\"M 60 180 Q 50 190 70 190\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"4\" \/>\r\n <path d=\"M 340 180 Q 350 190 330 190\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"4\" \/>\r\n\r\n <!-- Ovaries -->\r\n <ellipse id=\"ovary\" data-part=\"ovary\" cx=\"80\" cy=\"200\" rx=\"20\" ry=\"15\" fill=\"#cbd5e1\" stroke=\"#475569\" stroke-width=\"2\" class=\"part cursor-pointer hover:brightness-110 transition-colors\" \/>\r\n <ellipse id=\"ovary2\" data-part=\"ovary\" cx=\"320\" cy=\"200\" rx=\"20\" ry=\"15\" fill=\"#cbd5e1\" stroke=\"#475569\" stroke-width=\"2\" class=\"part cursor-pointer hover:brightness-110 transition-colors\" \/>\r\n\r\n <!-- Labels -->\r\n <line x1=\"80\" y1=\"200\" x2=\"40\" y2=\"200\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"30\" y=\"205\" text-anchor=\"end\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-yellow-400\" onclick=\"selectFemalePart('ovary')\">\u0627\u0644\u0645\u0628\u064a\u0636<\/text>\r\n\r\n <line x1=\"60\" y1=\"180\" x2=\"30\" y2=\"150\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"20\" y=\"145\" text-anchor=\"end\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-green-400\" onclick=\"selectFemalePart('fallopian_tube')\">\u0642\u0646\u0627\u0629 \u0627\u0644\u0628\u064a\u0636<\/text>\r\n\r\n <line x1=\"200\" y1=\"200\" x2=\"200\" y2=\"150\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"200\" y=\"140\" text-anchor=\"middle\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-pink-400\" onclick=\"selectFemalePart('uterus')\">\u0627\u0644\u0631\u062d\u0645<\/text>\r\n\r\n <line x1=\"230\" y1=\"280\" x2=\"280\" y2=\"280\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"290\" y=\"285\" text-anchor=\"start\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-purple-400\" onclick=\"selectFemalePart('cervix')\">\u0639\u0646\u0642 \u0627\u0644\u0631\u062d\u0645<\/text>\r\n\r\n <line x1=\"220\" y1=\"340\" x2=\"280\" y2=\"340\" stroke=\"#475569\" stroke-width=\"1\" \/>\r\n <text x=\"290\" y=\"345\" text-anchor=\"start\" fill=\"#cbd5e1\" font-size=\"12\" class=\"cursor-pointer hover:fill-orange-400\" onclick=\"selectFemalePart('vagina')\">\u0627\u0644\u0645\u0647\u0628\u0644<\/text>\r\n <\/svg>\r\n <div class=\"absolute bottom-2 right-2 text-l text-slate-500\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0623\u062c\u0632\u0627\u0621 \u0644\u0644\u062a\u0639\u0631\u0641 \u0639\u0644\u064a\u0647\u0627<\/div>\r\n <\/div>\r\n\r\n <div class=\"w-full md:w-1\/3 flex flex-col gap-4\">\r\n <div class=\"info-panel\" id=\"female-info\">\r\n <h4 class=\"text-lg font-bold text-white mb-4 border-b border-slate-600 pb-2\" id=\"female-part-name\">\u0627\u062e\u062a\u0631 \u062c\u0632\u0621\u0627\u064b<\/h4>\r\n <p class=\"text-slate-300 leading-relaxed\" id=\"female-part-description\">\u0642\u0645 \u0628\u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0641\u064a \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a \u0644\u0639\u0631\u0636 \u0648\u0638\u064a\u0641\u0629 \u0643\u0644 \u062c\u0632\u0621.<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700\">\r\n <h5 class=\"text-l font-bold text-slate-400 mb-3\">\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u062c\u0632\u0627\u0621<\/h5>\r\n <div class=\"flex flex-wrap gap-2\" id=\"female-buttons\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u062b\u0627\u0644\u062b\u0627\u064b: \u0645\u0631\u0627\u062d\u0644 \u062a\u0643\u0648\u0651\u0646 \u0627\u0644\u062c\u0646\u064a\u0646 -->\r\n <section>\r\n <h2 class=\"text-2xl font-bold text-green-400 mb-6 border-b border-green-500\/30 pb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u0645\u0631\u0627\u062d\u0644 \u062a\u0643\u0648\u0651\u0646 \u0627\u0644\u062c\u0646\u064a\u0646 (Fetal Development)<\/h2>\r\n <p class=\"text-gray-300 mb-6\">\u0628\u0639\u062f \u0627\u0644\u0625\u062e\u0635\u0627\u0628 \u0648\u062a\u0643\u0648\u0646 \u0627\u0644\u0632\u064a\u062c\u0648\u062a\u060c \u064a\u0645\u0631 \u0627\u0644\u062c\u0646\u064a\u0646 \u0628\u062b\u0644\u0627\u062b \u0645\u0631\u0627\u062d\u0644 \u0631\u0626\u064a\u0633\u064a\u0629 \u062e\u0644\u0627\u0644 9 \u0623\u0634\u0647\u0631:<\/p>\r\n \r\n <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u0631\u062d\u0644\u0629 \u0646\u0645\u0648 \u0627\u0644\u062c\u0646\u064a\u0646 -->\r\n <div class=\"simulation-card\" id=\"fetal-simulation\">\r\n <h3 class=\"text-2xl font-bold text-center text-green-300 mb-6\">\u0631\u062d\u0644\u0629 \u0646\u0645\u0648 \u0627\u0644\u062c\u0646\u064a\u0646 (\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629)<\/h3>\r\n <div class=\"flex flex-col md:flex-row gap-8\">\r\n <div class=\"flex-1 bg-slate-800\/50 rounded-xl p-4 border border-slate-600 relative min-h-[350px] flex items-center justify-center overflow-hidden\">\r\n <div class=\"relative w-full h-full flex items-center justify-center\">\r\n <div id=\"fetus-shape\" class=\"transition-all duration-300 ease-in-out\">\r\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\r\n <circle id=\"fetus-head\" cx=\"100\" cy=\"70\" r=\"40\" fill=\"#fde047\" opacity=\"0.9\" \/>\r\n <path id=\"fetus-body\" d=\"M 100 110 Q 160 150 100 190 Q 40 150 100 110\" fill=\"#fde047\" opacity=\"0.8\" \/>\r\n <circle id=\"fetus-eye-left\" cx=\"85\" cy=\"65\" r=\"4\" fill=\"#000\" opacity=\"0.5\" style=\"display: none;\" \/>\r\n <circle id=\"fetus-eye-right\" cx=\"115\" cy=\"65\" r=\"4\" fill=\"#000\" opacity=\"0.5\" style=\"display: none;\" \/>\r\n <path id=\"fetus-arm-left\" d=\"M 130 130 Q 150 150 140 170\" stroke=\"#fde047\" stroke-width=\"10\" stroke-linecap=\"round\" fill=\"none\" style=\"display: none;\" \/>\r\n <path id=\"fetus-arm-right\" d=\"M 70 130 Q 50 150 60 170\" stroke=\"#fde047\" stroke-width=\"10\" stroke-linecap=\"round\" fill=\"none\" style=\"display: none;\" \/>\r\n <\/svg>\r\n <\/div>\r\n <svg class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 -z-10\" width=\"300\" height=\"300\" viewBox=\"0 0 300 300\">\r\n <path d=\"M 150 150 C 100 100 50 200 20 150\" stroke=\"#ef4444\" stroke-width=\"4\" fill=\"none\" opacity=\"0.3\" \/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"absolute top-4 right-4 bg-slate-900\/80 px-3 py-1 rounded-full text-l text-slate-400 border border-slate-700\" id=\"month-indicator\">\u0627\u0644\u0634\u0647\u0631: 1<\/div>\r\n <\/div>\r\n\r\n <div class=\"w-full md:w-1\/3 flex flex-col gap-4\">\r\n <div class=\"fetus-stage-card\" id=\"fetal-info\">\r\n <div class=\"text-l font-bold uppercase tracking-wider mb-2 text-red-300\" id=\"fetal-trimester\">\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u0648\u0644\u0649<\/div>\r\n <h4 class=\"text-2xl font-bold text-white mb-4\" id=\"fetal-month-title\">\u0627\u0644\u0634\u0647\u0631 1<\/h4>\r\n <div class=\"space-y-3 mb-6\">\r\n <div class=\"flex justify-between border-b border-slate-700 pb-2\">\r\n <span class=\"text-slate-400 text-l\">\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u062a\u0642\u0631\u064a\u0628\u064a:<\/span>\r\n <span class=\"text-white font-bold\" id=\"fetal-size\">\u0628\u0630\u0631\u0629 \u0627\u0644\u062e\u0634\u062e\u0627\u0634<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between border-b border-slate-700 pb-2\">\r\n <span class=\"text-slate-400 text-l\">\u0627\u0644\u0637\u0648\u0644:<\/span>\r\n <span class=\"text-white font-bold\" id=\"fetal-length\">2 mm<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between border-b border-slate-700 pb-2\">\r\n <span class=\"text-slate-400 text-l\">\u0627\u0644\u0648\u0632\u0646:<\/span>\r\n <span class=\"text-white font-bold\" id=\"fetal-weight\">< 1 g<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-slate-300 leading-relaxed text-l bg-slate-900\/50 p-3 rounded-lg border border-slate-700\" id=\"fetal-description\">\u064a\u0628\u062f\u0623 \u0627\u0644\u0642\u0644\u0628 \u0628\u0627\u0644\u0646\u0628\u0636. \u064a\u062a\u0634\u0643\u0644 \u0627\u0644\u062d\u0628\u0644 \u0627\u0644\u0634\u0648\u0643\u064a \u0648\u0627\u0644\u062f\u0645\u0627\u063a. \u062a\u0638\u0647\u0631 \u0628\u0631\u0627\u0639\u0645 \u0627\u0644\u0623\u0637\u0631\u0627\u0641.<\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-800 p-4 rounded-xl border border-slate-700 flex items-center justify-between gap-4\">\r\n <button id=\"prev-month\" class=\"control-btn p-2 rounded-full bg-slate-700 text-white hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\u25c0<\/button>\r\n <button id=\"play-pause\" class=\"play-btn flex-1 py-2 px-4 rounded-lg font-bold flex items-center justify-center gap-2\">\u25b6 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0639\u0631\u0636<\/button>\r\n <button id=\"next-month\" class=\"control-btn p-2 rounded-full bg-slate-700 text-white hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed\">\u25b6<\/button>\r\n <\/div>\r\n\r\n <div class=\"px-2\">\r\n <div class=\"h-2 bg-slate-700 rounded-full overflow-hidden\">\r\n <div class=\"h-full bg-green-500\" id=\"fetal-progress\" style=\"width: 11.11%;\"><\/div>\r\n <\/div>\r\n <div class=\"flex justify-between text-[10px] text-slate-500 mt-1 px-1\">\r\n <span>1<\/span>\r\n <span>9<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 mt-6\">\r\n <div class=\"flex items-start gap-4 bg-gray-800\/40 p-5 rounded-xl border border-gray-700\">\r\n <div class=\"bg-green-900\/50 text-green-300 font-bold p-3 rounded-lg text-xl\">1<\/div>\r\n <div>\r\n <h3 class=\"text-lg font-bold text-green-300 mb-2\">\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 (First Trimester)<\/h3>\r\n <ul class=\"list-disc list-inside text-gray-300 text-l space-y-1\">\r\n <li>\u0628\u062f\u0621 \u062a\u0643\u0648\u0646 \u062c\u0645\u064a\u0639 \u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 (\u0627\u0644\u0639\u0635\u0628\u064a\u060c \u0627\u0644\u0642\u0644\u0628...).<\/li>\r\n <li>\u064a\u0633\u062a\u0637\u064a\u0639 \u062a\u062d\u0631\u064a\u0643 \u0623\u0635\u0627\u0628\u0639\u0647 \u0641\u064a \u0627\u0644\u0646\u0647\u0627\u064a\u0629.<\/li>\r\n <li><span class=\"text-red-300\">\u0645\u0631\u062d\u0644\u0629 \u062d\u0633\u0627\u0633\u0629:<\/span> \u0627\u0644\u062c\u0646\u064a\u0646 \u0639\u0631\u0636\u0629 \u0644\u062a\u0623\u062b\u064a\u0631 \u0635\u062d\u0629 \u0627\u0644\u0623\u0645 \u0648\u0627\u0644\u0623\u062f\u0648\u064a\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-start gap-4 bg-gray-800\/40 p-5 rounded-xl border border-gray-700\">\r\n <div class=\"bg-green-900\/50 text-green-300 font-bold p-3 rounded-lg text-xl\">2<\/div>\r\n <div>\r\n <h3 class=\"text-lg font-bold text-green-300 mb-2\">\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 (Second Trimester)<\/h3>\r\n <ul class=\"list-disc list-inside text-gray-300 text-l space-y-1\">\r\n <li>\u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u0646\u0645\u0648 \u0648\u062a\u0637\u0648\u0631 \u0627\u0644\u0623\u062c\u0647\u0632\u0629.<\/li>\r\n <li>\u062a\u0634\u0639\u0631 \u0627\u0644\u0623\u0645 \u0628\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0646\u064a\u0646.<\/li>\r\n <li>\u064a\u0645\u0635 \u0625\u0635\u0628\u0639\u0647 \u0648\u064a\u0641\u062a\u062d \u0639\u064a\u0646\u064a\u0647.<\/li>\r\n <li>\u0627\u0644\u0631\u0626\u062a\u0627\u0646 \u0644\u0645 \u062a\u0643\u062a\u0645\u0644 \u0628\u0639\u062f.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-start gap-4 bg-gray-800\/40 p-5 rounded-xl border border-gray-700\">\r\n <div class=\"bg-green-900\/50 text-green-300 font-bold p-3 rounded-lg text-xl\">3<\/div>\r\n <div>\r\n <h3 class=\"text-lg font-bold text-green-300 mb-2\">\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629 (Third Trimester)<\/h3>\r\n <ul class=\"list-disc list-inside text-gray-300 text-l space-y-1\">\r\n <li>\u0632\u064a\u0627\u062f\u0629 \u0633\u0631\u064a\u0639\u0629 \u0641\u064a \u0627\u0644\u0646\u0645\u0648 (\u062e\u0627\u0635\u0629 \u0627\u0644\u062f\u0645\u0627\u063a) \u0648\u0627\u0644\u0648\u0632\u0646.<\/li>\r\n <li>\u062a\u0643\u0648\u0646 \u0637\u0628\u0642\u0629 \u062f\u0647\u0648\u0646 \u062a\u062d\u062a \u0627\u0644\u062c\u0644\u062f (\u0644\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0628\u0639\u062f \u0627\u0644\u0648\u0644\u0627\u062f\u0629).<\/li>\r\n <li>\u0627\u0643\u062a\u0645\u0627\u0644 \u0646\u0645\u0648 \u0627\u0644\u0631\u0626\u062a\u064a\u0646 \u0648\u0627\u0644\u0623\u0639\u0636\u0627\u0621.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0631\u0627\u0628\u0639\u0627\u064b: \u062f\u0648\u0631 \u0627\u0644\u0647\u0631\u0645\u0648\u0646\u0627\u062a -->\r\n <section>\r\n <h2 class=\"text-2xl font-bold text-purple-400 mb-6 border-b border-purple-500\/30 pb-2\">\u0631\u0627\u0628\u0639\u0627\u064b: \u062f\u0648\u0631 \u0627\u0644\u0647\u0631\u0645\u0648\u0646\u0627\u062a \u0641\u064a \u0627\u0644\u062a\u0643\u0627\u062b\u0631<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-blue-900\/20 p-5 rounded-xl border border-blue-500\/30\">\r\n <h3 class=\"font-bold text-blue-300 mb-3\">\u0627\u0644\u0647\u0631\u0645\u0648\u0646\u0627\u062a \u0627\u0644\u0630\u0643\u0631\u064a\u0629 (\u0627\u0644\u062a\u0633\u062a\u0648\u0633\u062a\u064a\u0631\u0648\u0646)<\/h3>\r\n <p class=\"text-gray-300 text-l\">\u062a\u0641\u0631\u0632\u0647\u0627 \u0627\u0644\u062e\u0635\u064a\u0629. \u0645\u0633\u0624\u0648\u0644\u0629 \u0639\u0646:<\/p>\r\n <ul class=\"list-disc list-inside text-gray-400 text-l mt-2\">\r\n <li>\u0638\u0647\u0648\u0631 \u0627\u0644\u0635\u0641\u0627\u062a \u0627\u0644\u0630\u0643\u0631\u064a\u0629 (\u062e\u0634\u0648\u0646\u0629 \u0627\u0644\u0635\u0648\u062a\u060c \u0627\u0644\u0634\u0639\u0631).<\/li>\r\n <li>\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-pink-900\/20 p-5 rounded-xl border border-pink-500\/30\">\r\n <h3 class=\"font-bold text-pink-300 mb-3\">\u0627\u0644\u0647\u0631\u0645\u0648\u0646\u0627\u062a \u0627\u0644\u0623\u0646\u062b\u0648\u064a\u0629 (\u0627\u0644\u0625\u0633\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0628\u0631\u0648\u062c\u0633\u062a\u064a\u0631\u0648\u0646)<\/h3>\r\n <p class=\"text-gray-300 text-l\">\u064a\u0641\u0631\u0632\u0647\u0627 \u0627\u0644\u0645\u0628\u064a\u0636. \u0645\u0633\u0624\u0648\u0644\u0629 \u0639\u0646:<\/p>\r\n <ul class=\"list-disc list-inside text-gray-400 text-l mt-2\">\r\n <li>\u0638\u0647\u0648\u0631 \u0627\u0644\u0635\u0641\u0627\u062a \u0627\u0644\u0623\u0646\u062b\u0648\u064a\u0629.<\/li>\r\n <li>\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u062f\u0648\u0631\u0629 \u0627\u0644\u0634\u0647\u0631\u064a\u0629 \u0648\u0627\u0644\u062d\u0645\u0644.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u062e\u0627\u0645\u0633\u0627\u064b: \u0646\u0634\u0627\u0637 \u0639\u0644\u0645\u064a -->\r\n <section>\r\n <h2 class=\"text-2xl font-bold text-yellow-400 mb-6 border-b border-yellow-500\/30 pb-2\">\u062e\u0627\u0645\u0633\u0627\u064b: \u0646\u0634\u0627\u0637 \u0639\u0644\u0645\u064a (\u0643\u064a\u0641 \u0623\u0646\u0645\u0648\u061f)<\/h2>\r\n <div class=\"bg-gray-800\/40 p-6 rounded-2xl border border-gray-700\">\r\n <p class=\"text-gray-300 mb-4\">\r\n <strong>\u0627\u0644\u0647\u062f\u0641:<\/strong> \u0642\u064a\u0627\u0633 \u0645\u0639\u062f\u0644 \u0646\u0645\u0648 \u0623\u062c\u0632\u0627\u0621 \u062c\u0633\u0645 \u0627\u0644\u062c\u0646\u064a\u0646 (\u0627\u0644\u0631\u0623\u0633\u060c \u0627\u0644\u062c\u0630\u0639\u060c \u0627\u0644\u0623\u0631\u062c\u0644).\r\n <\/p>\r\n <div class=\"bg-yellow-900\/20 p-4 rounded-xl border border-yellow-500\/30\">\r\n <strong class=\"text-yellow-200 block mb-2\">\u0627\u0644\u0627\u0633\u062a\u0646\u062a\u0627\u062c:<\/strong>\r\n <p class=\"text-gray-300 text-l\">\r\n \u064a\u0632\u062f\u0627\u062f \u0637\u0648\u0644 \u0627\u0644\u062c\u0630\u0639 \u0648\u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0645\u0646 \u0627\u0644\u0631\u0623\u0633 \u0645\u0639 \u062a\u0642\u062f\u0645 \u0627\u0644\u0639\u0645\u0631\u060c \u0644\u064a\u0635\u0628\u062d \u0627\u0644\u062c\u0646\u064a\u0646 \u0623\u0643\u062b\u0631 \u062a\u0646\u0627\u0633\u0642\u0627\u064b. \u064a\u0633\u0627\u0639\u062f \u0627\u0644\u062a\u0645\u062b\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u0639\u0644\u0649 \u0631\u0624\u064a\u0629 \u0647\u0630\u0627 \u0627\u0644\u0646\u0645\u0637 \u0628\u0648\u0636\u0648\u062d.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0633\u0627\u062f\u0633\u0627\u064b: \u0627\u0644\u062a\u0641\u0643\u064a\u0631 \u0627\u0644\u0646\u0627\u0642\u062f -->\r\n <section>\r\n <h2 class=\"text-2xl font-bold text-orange-400 mb-6 border-b border-orange-500\/30 pb-2\">\u0633\u0627\u062f\u0633\u0627\u064b: \u0627\u0644\u062a\u0641\u0643\u064a\u0631 \u0627\u0644\u0646\u0627\u0642\u062f<\/h2>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-gray-800\/40 p-5 rounded-xl border border-gray-700\">\r\n <strong class=\"text-white block mb-2\">\u0644\u0645\u0627\u0630\u0627 \u062a\u064f\u0639\u062f \u0627\u0644\u062e\u0635\u064a\u0629 \u0639\u0636\u0648\u064b\u0627 \u0645\u0634\u062a\u0631\u0643\u064b\u0627 \u0628\u064a\u0646 \u062c\u0647\u0627\u0632 \u0627\u0644\u063a\u062f\u062f \u0627\u0644\u0635\u0645 \u0648\u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a\u061f<\/strong>\r\n <p class=\"text-gray-400 text-l\">\u0644\u0623\u0646\u0647\u0627 \u062a\u0646\u062a\u062c \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 (\u062c\u0647\u0627\u0632 \u062a\u0646\u0627\u0633\u0644\u064a) \u0648\u062a\u0641\u0631\u0632 \u0647\u0631\u0645\u0648\u0646 \u0627\u0644\u062a\u0633\u062a\u0648\u0633\u062a\u064a\u0631\u0648\u0646 \u0641\u064a \u0627\u0644\u062f\u0645 \u0645\u0628\u0627\u0634\u0631\u0629 (\u063a\u062f\u062f \u0635\u0645).<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-800\/40 p-5 rounded-xl border border-gray-700\">\r\n <strong class=\"text-white block mb-2\">\u0623\u0647\u0645\u064a\u0629 \u0627\u062d\u062a\u0648\u0627\u0621 \u0627\u0644\u0623\u0645\u0634\u0627\u062c \u0639\u0644\u0649 \u0646\u0635\u0641 \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 (23 \u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645)\u061f<\/strong>\r\n <p class=\"text-gray-400 text-l\">\u0644\u0623\u0646\u0647 \u0639\u0646\u062f \u0627\u0644\u0625\u062e\u0635\u0627\u0628 \u064a\u0646\u062f\u0645\u062c \u0627\u0644\u0645\u0634\u064a\u062c\u0627\u0646 \u0644\u064a\u0639\u0648\u062f \u0627\u0644\u0639\u062f\u062f \u0627\u0644\u0643\u0627\u0645\u0644 (46 \u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645)\u060c \u0645\u0645\u0627 \u064a\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u062b\u0628\u0627\u062a \u0639\u062f\u062f \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0639\u0628\u0631 \u0627\u0644\u0623\u062c\u064a\u0627\u0644.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633 -->\r\n <div class=\"bg-indigo-900\/40 border border-indigo-500\/30 rounded-2xl p-6 mt-8\">\r\n <h2 class=\"text-2xl font-bold text-center text-white mb-4\"> \u0645\u0644\u062e\u0635 \u0627\u0644\u062f\u0631\u0633<\/h2>\r\n <ul class=\"space-y-2 text-gray-300 list-disc list-inside text-l leading-relaxed\">\r\n <li>\u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u0630\u0643\u0631\u064a \u064a\u0646\u062a\u062c \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 (\u0627\u0644\u062e\u0635\u064a\u0629) \u0648\u064a\u0646\u0642\u0644\u0647\u0627 \u0644\u0644\u062e\u0627\u0631\u062c.<\/li>\r\n <li>\u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u0623\u0646\u062b\u0648\u064a \u064a\u0646\u062a\u062c \u0627\u0644\u0628\u0648\u064a\u0636\u0627\u062a (\u0627\u0644\u0645\u0628\u064a\u0636) \u0648\u064a\u062d\u062a\u0636\u0646 \u0627\u0644\u062c\u0646\u064a\u0646 (\u0627\u0644\u0631\u062d\u0645).<\/li>\r\n <li>\u064a\u062d\u062f\u062b \u0627\u0644\u0625\u062e\u0635\u0627\u0628 \u0641\u064a \u0642\u0646\u0627\u0629 \u0627\u0644\u0628\u064a\u0636\u060c \u0648\u064a\u0646\u0645\u0648 \u0627\u0644\u062c\u0646\u064a\u0646 \u0641\u064a \u0627\u0644\u0631\u062d\u0645 \u0639\u0628\u0631 3 \u0645\u0631\u0627\u062d\u0644.<\/li>\r\n <li>\u0627\u0644\u0647\u0631\u0645\u0648\u0646\u0627\u062a \u062a\u0646\u0638\u0645 \u0627\u0644\u062a\u0643\u0627\u062b\u0631\u060c \u0648\u0628\u0639\u0636 \u0627\u0644\u0623\u0639\u0636\u0627\u0621 \u0644\u0647\u0627 \u0648\u0638\u064a\u0641\u0629 \u0645\u0632\u062f\u0648\u062c\u0629 (\u062a\u0646\u0627\u0633\u0644\u064a\u0629 \u0648\u0647\u0631\u0645\u0648\u0646\u064a\u0629).<\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- JavaScript \u0644\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a -->\r\n <script>\r\n \/\/ \u0628\u064a\u0627\u0646\u0627\u062a \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u0630\u0643\u0631\u064a\r\n const maleParts = [\r\n { id: 'testis', name: '\u0627\u0644\u062e\u0635\u064a\u0629 (Testis)', description: '\u063a\u062f\u0629 \u0628\u064a\u0636\u0627\u0648\u064a\u0629 \u0627\u0644\u0634\u0643\u0644 \u062a\u0646\u062a\u062c \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 \u0648\u0647\u0631\u0645\u0648\u0646 \u0627\u0644\u062a\u0633\u062a\u0648\u0633\u062a\u064a\u0631\u0648\u0646.' },\r\n { id: 'scrotum', name: '\u0643\u064a\u0633 \u0627\u0644\u0635\u0641\u0646 (Scrotum)', description: '\u0643\u064a\u0633 \u062c\u0644\u062f\u064a \u064a\u062d\u0645\u064a \u0627\u0644\u062e\u0635\u064a\u062a\u064a\u0646 \u0648\u064a\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647\u0645\u0627 \u0623\u0642\u0644 \u0645\u0646 \u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u062c\u0633\u0645 \u0644\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629.' },\r\n { id: 'epididymis', name: '\u0627\u0644\u0628\u0631\u0628\u062e (Epididymis)', description: '\u0623\u0646\u0628\u0648\u0628 \u0645\u0644\u062a\u0641 \u0641\u0648\u0642 \u0627\u0644\u062e\u0635\u064a\u0629 \u064a\u062a\u0645 \u0641\u064a\u0647 \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 \u0648\u0627\u0643\u062a\u0645\u0627\u0644 \u0646\u0636\u062c\u0647\u0627.' },\r\n { id: 'vas_deferens', name: '\u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0646\u0627\u0642\u0644 (Vas Deferens)', description: '\u0642\u0646\u0627\u0629 \u062a\u0646\u0642\u0644 \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 \u0645\u0646 \u0627\u0644\u0628\u0631\u0628\u062e \u0625\u0644\u0649 \u0627\u0644\u0625\u062d\u0644\u064a\u0644.' },\r\n { id: 'urethra', name: '\u0627\u0644\u0625\u062d\u0644\u064a\u0644 (Urethra)', description: '\u0642\u0646\u0627\u0629 \u0645\u0634\u062a\u0631\u0643\u0629 \u0644\u0644\u062c\u0647\u0627\u0632\u064a\u0646 \u0627\u0644\u062a\u0646\u0627\u0633\u0644\u064a \u0648\u0627\u0644\u0628\u0648\u0644\u064a\u060c \u064a\u0645\u0631 \u0639\u0628\u0631\u0647\u0627 \u0627\u0644\u0628\u0648\u0644 \u0648\u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 \u0625\u0644\u0649 \u062e\u0627\u0631\u062c \u0627\u0644\u062c\u0633\u0645.' },\r\n { id: 'seminal_vesicle', name: '\u0627\u0644\u062d\u0648\u064a\u0635\u0644\u0629 \u0627\u0644\u0645\u0646\u0648\u064a\u0629 (Seminal Vesicle)', description: '\u062a\u0641\u0631\u0632 \u0633\u0627\u0626\u0644\u0627\u064b \u063a\u0646\u064a\u0627\u064b \u0628\u0627\u0644\u0637\u0627\u0642\u0629 (\u0627\u0644\u0641\u0631\u0643\u062a\u0648\u0632) \u0644\u062a\u063a\u0630\u064a\u0629 \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629 \u0648\u062a\u0633\u0647\u064a\u0644 \u062d\u0631\u0643\u062a\u0647\u0627.' },\r\n { id: 'prostate', name: '\u063a\u062f\u0629 \u0627\u0644\u0628\u0631\u0648\u0633\u062a\u0627\u062a (Prostate Gland)', description: '\u062a\u0641\u0631\u0632 \u0633\u0627\u0626\u0644\u0627\u064b \u0642\u0644\u0648\u064a\u0627\u064b \u064a\u0639\u0627\u062f\u0644 \u062d\u0645\u0648\u0636\u0629 \u0645\u062c\u0631\u0649 \u0627\u0644\u0628\u0648\u0644 \u0644\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629.' },\r\n { id: 'penis', name: '\u0627\u0644\u0642\u0636\u064a\u0628 (Penis)', description: '\u0639\u0636\u0648 \u062e\u0627\u0631\u062c\u064a \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0625\u062d\u0644\u064a\u0644\u060c \u0648\u0638\u064a\u0641\u062a\u0647 \u0625\u062e\u0631\u0627\u062c \u0627\u0644\u0628\u0648\u0644 \u0648\u0646\u0642\u0644 \u0627\u0644\u062d\u064a\u0648\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u0646\u0648\u064a\u0629.' }\r\n ];\r\n\r\n \/\/ \u0628\u064a\u0627\u0646\u0627\u062a \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u0623\u0646\u062b\u0648\u064a\r\n const femaleParts = [\r\n { id: 'ovary', name: '\u0627\u0644\u0645\u0628\u064a\u0636 (Ovary)', description: '\u0627\u0644\u0639\u0636\u0648 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0641\u064a \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u0623\u0646\u062b\u0648\u064a\u060c \u064a\u0642\u0648\u0645 \u0628\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u0628\u0648\u064a\u0636\u0627\u062a \u0648\u0627\u0644\u0647\u0631\u0645\u0648\u0646\u0627\u062a \u0627\u0644\u0623\u0646\u062b\u0648\u064a\u0629 (\u0627\u0644\u0625\u0633\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0628\u0631\u0648\u062c\u0633\u062a\u064a\u0631\u0648\u0646).' },\r\n { id: 'fallopian_tube', name: '\u0642\u0646\u0627\u0629 \u0627\u0644\u0628\u064a\u0636 (Fallopian Tube)', description: '\u0623\u0646\u0628\u0648\u0628 \u064a\u0635\u0644 \u0628\u064a\u0646 \u0627\u0644\u0645\u0628\u064a\u0636 \u0648\u0627\u0644\u0631\u062d\u0645\u060c \u064a\u062a\u0645 \u0641\u064a\u0647 \u0646\u0642\u0644 \u0627\u0644\u0628\u0648\u064a\u0636\u0629 \u0648\u064a\u062d\u062f\u062b \u0641\u064a\u0647 \u0627\u0644\u0625\u062e\u0635\u0627\u0628.' },\r\n { id: 'uterus', name: '\u0627\u0644\u0631\u062d\u0645 (Uterus)', description: '\u0639\u0636\u0648 \u0639\u0636\u0644\u064a \u0643\u0645\u062b\u0631\u064a \u0627\u0644\u0634\u0643\u0644\u060c \u064a\u0633\u062a\u0642\u0628\u0644 \u0627\u0644\u0628\u0648\u064a\u0636\u0629 \u0627\u0644\u0645\u062e\u0635\u0628\u0629 \u0648\u064a\u062d\u062a\u0636\u0646 \u0627\u0644\u062c\u0646\u064a\u0646 \u0637\u0648\u0627\u0644 \u0641\u062a\u0631\u0629 \u0627\u0644\u062d\u0645\u0644.' },\r\n { id: 'cervix', name: '\u0639\u0646\u0642 \u0627\u0644\u0631\u062d\u0645 (Cervix)', description: '\u0627\u0644\u0641\u062a\u062d\u0629 \u0627\u0644\u0633\u0641\u0644\u064a\u0629 \u0627\u0644\u0636\u064a\u0642\u0629 \u0644\u0644\u0631\u062d\u0645 \u0627\u0644\u062a\u064a \u062a\u062a\u0635\u0644 \u0628\u0627\u0644\u0645\u0647\u0628\u0644.' },\r\n { id: 'vagina', name: '\u0627\u0644\u0645\u0647\u0628\u0644 (Vagina)', description: '\u0642\u0646\u0627\u0629 \u0639\u0636\u0644\u064a\u0629 \u062a\u0645\u062a\u062f \u0645\u0646 \u0639\u0646\u0642 \u0627\u0644\u0631\u062d\u0645 \u0625\u0644\u0649 \u062e\u0627\u0631\u062c \u0627\u0644\u062c\u0633\u0645\u060c \u0648\u062a\u0633\u0645\u0649 \u0642\u0646\u0627\u0629 \u0627\u0644\u0648\u0644\u0627\u062f\u0629.' }\r\n ];\r\n\r\n \/\/ \u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0631\u0627\u062d\u0644 \u0627\u0644\u062c\u0646\u064a\u0646\r\n const fetalStages = [\r\n { month: 1, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u0648\u0644\u0649', size: '\u0628\u0630\u0631\u0629 \u0627\u0644\u062e\u0634\u062e\u0627\u0634', length: '2 mm', weight: '< 1 g', description: '\u064a\u0628\u062f\u0623 \u0627\u0644\u0642\u0644\u0628 \u0628\u0627\u0644\u0646\u0628\u0636. \u064a\u062a\u0634\u0643\u0644 \u0627\u0644\u062d\u0628\u0644 \u0627\u0644\u0634\u0648\u0643\u064a \u0648\u0627\u0644\u062f\u0645\u0627\u063a. \u062a\u0638\u0647\u0631 \u0628\u0631\u0627\u0639\u0645 \u0627\u0644\u0623\u0637\u0631\u0627\u0641.', color: '#fca5a5' },\r\n { month: 2, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u0648\u0644\u0649', size: '\u062d\u0628\u0629 \u0641\u0627\u0635\u0648\u0644\u064a\u0627', length: '1.6 cm', weight: '1 g', description: '\u062a\u062a\u0634\u0643\u0644 \u0645\u0644\u0627\u0645\u062d \u0627\u0644\u0648\u062c\u0647\u060c \u0627\u0644\u0639\u064a\u0648\u0646\u060c \u0648\u0627\u0644\u0623\u0630\u0646\u064a\u0646. \u062a\u0628\u062f\u0623 \u0627\u0644\u0623\u0635\u0627\u0628\u0639 \u0628\u0627\u0644\u0638\u0647\u0648\u0631.', color: '#fca5a5' },\r\n { month: 3, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u0648\u0644\u0649', size: '\u062d\u0628\u0629 \u0644\u064a\u0645\u0648\u0646', length: '5.4 cm', weight: '14 g', description: '\u062a\u0643\u062a\u0645\u0644 \u0645\u0639\u0638\u0645 \u0627\u0644\u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629. \u064a\u0633\u062a\u0637\u064a\u0639 \u0627\u0644\u062c\u0646\u064a\u0646 \u062a\u062d\u0631\u064a\u0643 \u0642\u0628\u0636\u062a\u0647. \u062a\u0638\u0647\u0631 \u0627\u0644\u0623\u0638\u0627\u0641\u0631.', color: '#fca5a5' },\r\n { month: 4, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629', size: '\u062d\u0628\u0629 \u0623\u0641\u0648\u0643\u0627\u062f\u0648', length: '11.6 cm', weight: '100 g', description: '\u064a\u0635\u0628\u062d \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0639\u0638\u0645\u064a \u0623\u0643\u062b\u0631 \u0635\u0644\u0627\u0628\u0629. \u064a\u0645\u0643\u0646 \u0633\u0645\u0627\u0639 \u0646\u0628\u0636\u0627\u062a \u0627\u0644\u0642\u0644\u0628 \u0628\u0648\u0636\u0648\u062d.', color: '#86efac' },\r\n { month: 5, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629', size: '\u062d\u0628\u0629 \u0645\u0648\u0632', length: '16.4 cm', weight: '300 g', description: '\u062a\u0634\u0639\u0631 \u0627\u0644\u0623\u0645 \u0628\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0646\u064a\u0646 (\u0627\u0644\u0631\u0643\u0644). \u064a\u0646\u0645\u0648 \u0634\u0639\u0631 \u0627\u0644\u0631\u0623\u0633 \u0648\u0627\u0644\u062d\u0648\u0627\u062c\u0628.', color: '#86efac' },\r\n { month: 6, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629', size: '\u0643\u0648\u0632 \u0630\u0631\u0629', length: '30 cm', weight: '600 g', description: '\u062a\u0633\u062a\u062c\u064a\u0628 \u0627\u0644\u0623\u0630\u0646 \u0644\u0644\u0623\u0635\u0648\u0627\u062a \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629. \u062a\u062a\u0643\u0648\u0646 \u0628\u0635\u0645\u0627\u062a \u0627\u0644\u0623\u0635\u0627\u0628\u0639.', color: '#86efac' },\r\n { month: 7, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629', size: '\u062b\u0645\u0631\u0629 \u0628\u0627\u0630\u0646\u062c\u0627\u0646', length: '36 cm', weight: '1 kg', description: '\u064a\u0641\u062a\u062d \u0627\u0644\u062c\u0646\u064a\u0646 \u0639\u064a\u0646\u064a\u0647 \u0648\u064a\u063a\u0644\u0642\u0647\u0645\u0627. \u064a\u0643\u062a\u0645\u0644 \u0646\u0645\u0648 \u0627\u0644\u0631\u0626\u062a\u064a\u0646 \u062c\u0632\u0626\u064a\u0627\u064b.', color: '#93c5fd' },\r\n { month: 8, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629', size: '\u062d\u0628\u0629 \u0623\u0646\u0627\u0646\u0627\u0633', length: '42 cm', weight: '1.7 kg', description: '\u064a\u0632\u062f\u0627\u062f \u0627\u0644\u0648\u0632\u0646 \u0628\u0633\u0631\u0639\u0629. \u064a\u0643\u062a\u0645\u0644 \u0646\u0645\u0648 \u0645\u0639\u0638\u0645 \u0627\u0644\u0623\u0639\u0636\u0627\u0621 \u0645\u0627 \u0639\u062f\u0627 \u0627\u0644\u0631\u0626\u062a\u064a\u0646.', color: '#93c5fd' },\r\n { month: 9, trimester: '\u0627\u0644\u0623\u0634\u0647\u0631 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u062e\u064a\u0631\u0629', size: '\u0628\u0637\u064a\u062e\u0629 \u0635\u063a\u064a\u0631\u0629', length: '50 cm', weight: '3.3 kg', description: '\u064a\u0643\u062a\u0645\u0644 \u0646\u0645\u0648 \u0627\u0644\u0631\u0626\u062a\u064a\u0646. \u064a\u062a\u062e\u0630 \u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0648\u0644\u0627\u062f\u0629 (\u0627\u0644\u0631\u0623\u0633 \u0644\u0644\u0623\u0633\u0641\u0644).', color: '#93c5fd' }\r\n ];\r\n\r\n \/\/ ========== \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u0630\u0643\u0631\u064a ==========\r\n let selectedMalePart = null;\r\n const maleDefaultColors = {\r\n testis: { fill: '#cbd5e1' },\r\n scrotum: { stroke: '#475569', dash: '4,4' },\r\n epididymis: { stroke: '#64748b' },\r\n vas_deferens: { stroke: '#64748b' },\r\n urethra: { stroke: '#94a3b8' },\r\n seminal_vesicle: { stroke: '#64748b' },\r\n prostate: { fill: '#94a3b8' },\r\n penis: { fill: '#cbd5e1' }\r\n };\r\n\r\n function selectMalePart(partId) {\r\n selectedMalePart = partId;\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629\r\n document.querySelectorAll('#male-svg .part').forEach(el => {\r\n const part = el.dataset.part;\r\n if (maleDefaultColors[part]) {\r\n if (maleDefaultColors[part].fill !== undefined) {\r\n el.setAttribute('fill', maleDefaultColors[part].fill);\r\n } else {\r\n el.setAttribute('fill', 'none');\r\n }\r\n if (maleDefaultColors[part].stroke) {\r\n el.setAttribute('stroke', maleDefaultColors[part].stroke);\r\n } else {\r\n el.setAttribute('stroke', '#475569');\r\n }\r\n if (maleDefaultColors[part].dash) {\r\n el.setAttribute('stroke-dasharray', maleDefaultColors[part].dash);\r\n } else {\r\n el.setAttribute('stroke-dasharray', 'none');\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u062a\u0644\u0648\u064a\u0646 \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0645\u062d\u062f\u062f\r\n const selectedEls = document.querySelectorAll(`#male-svg [data-part=\"${partId}\"]`);\r\n selectedEls.forEach(el => {\r\n if (partId === 'testis') el.setAttribute('fill', '#eab308');\r\n else if (partId === 'scrotum') el.setAttribute('stroke', '#d97706');\r\n else if (partId === 'epididymis') el.setAttribute('stroke', '#16a34a');\r\n else if (partId === 'vas_deferens') el.setAttribute('stroke', '#2563eb');\r\n else if (partId === 'urethra') el.setAttribute('stroke', '#dc2626');\r\n else if (partId === 'seminal_vesicle') el.setAttribute('stroke', '#9333ea');\r\n else if (partId === 'prostate') el.setAttribute('fill', '#db2777');\r\n else if (partId === 'penis') el.setAttribute('fill', '#f97316');\r\n });\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a\r\n const part = maleParts.find(p => p.id === partId);\r\n document.getElementById('male-part-name').textContent = part.name;\r\n document.getElementById('male-part-description').textContent = part.description;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u062d\u0627\u0644\u0629 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n document.querySelectorAll('#male-buttons button').forEach(btn => {\r\n if (btn.dataset.part === partId) {\r\n btn.classList.add('selected');\r\n } else {\r\n btn.classList.remove('selected');\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0644\u0644\u0630\u0643\u0631\r\n const maleButtonsDiv = document.getElementById('male-buttons');\r\n maleParts.forEach(part => {\r\n const btn = document.createElement('button');\r\n btn.className = 'part-btn';\r\n btn.dataset.part = part.id;\r\n btn.textContent = part.name.split('(')[0];\r\n btn.onclick = () => selectMalePart(part.id);\r\n maleButtonsDiv.appendChild(btn);\r\n });\r\n\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0645\u0633\u062a\u0645\u0639\u0627\u062a \u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 SVG\r\n document.querySelectorAll('#male-svg .part').forEach(el => {\r\n el.addEventListener('click', () => {\r\n selectMalePart(el.dataset.part);\r\n });\r\n });\r\n\r\n \/\/ ========== \u0627\u0644\u062c\u0647\u0627\u0632 \u0627\u0644\u0623\u0646\u062b\u0648\u064a ==========\r\n let selectedFemalePart = null;\r\n const femaleDefaultColors = {\r\n ovary: { fill: '#cbd5e1' },\r\n fallopian_tube: { stroke: '#64748b' },\r\n uterus: { fill: '#cbd5e1' },\r\n cervix: { fill: '#cbd5e1' },\r\n vagina: { fill: '#cbd5e1' }\r\n };\r\n\r\n function selectFemalePart(partId) {\r\n selectedFemalePart = partId;\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0623\u0644\u0648\u0627\u0646\r\n document.querySelectorAll('#female-svg .part').forEach(el => {\r\n const part = el.dataset.part;\r\n if (femaleDefaultColors[part]) {\r\n if (femaleDefaultColors[part].fill !== undefined) {\r\n el.setAttribute('fill', femaleDefaultColors[part].fill);\r\n } else {\r\n el.setAttribute('fill', 'none');\r\n }\r\n if (femaleDefaultColors[part].stroke) {\r\n el.setAttribute('stroke', femaleDefaultColors[part].stroke);\r\n } else {\r\n el.setAttribute('stroke', '#475569');\r\n }\r\n }\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 opacity\r\n if (part === 'uterus') el.setAttribute('opacity', '0.4');\r\n else if (part === 'cervix') el.setAttribute('opacity', '0.5');\r\n else if (part === 'vagina') el.setAttribute('opacity', '0.3');\r\n else if (part === 'ovary') el.setAttribute('opacity', '1');\r\n else if (part === 'fallopian_tube') el.setAttribute('opacity', '1');\r\n });\r\n\r\n \/\/ \u062a\u0644\u0648\u064a\u0646 \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0645\u062d\u062f\u062f\r\n const selectedEls = document.querySelectorAll(`#female-svg [data-part=\"${partId}\"]`);\r\n selectedEls.forEach(el => {\r\n if (partId === 'ovary') { el.setAttribute('fill', '#eab308'); el.setAttribute('opacity', '1'); }\r\n else if (partId === 'fallopian_tube') { el.setAttribute('stroke', '#16a34a'); }\r\n else if (partId === 'uterus') { el.setAttribute('fill', '#db2777'); el.setAttribute('opacity', '1'); }\r\n else if (partId === 'cervix') { el.setAttribute('fill', '#9333ea'); el.setAttribute('opacity', '1'); }\r\n else if (partId === 'vagina') { el.setAttribute('fill', '#f97316'); el.setAttribute('opacity', '1'); }\r\n });\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0644\u0648\u062d\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a\r\n const part = femaleParts.find(p => p.id === partId);\r\n document.getElementById('female-part-name').textContent = part.name;\r\n document.getElementById('female-part-description').textContent = part.description;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u062d\u0627\u0644\u0629 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n document.querySelectorAll('#female-buttons button').forEach(btn => {\r\n if (btn.dataset.part === partId) {\r\n btn.classList.add('selected');\r\n } else {\r\n btn.classList.remove('selected');\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0644\u0644\u0623\u0646\u062b\u0649\r\n const femaleButtonsDiv = document.getElementById('female-buttons');\r\n femaleParts.forEach(part => {\r\n const btn = document.createElement('button');\r\n btn.className = 'part-btn';\r\n btn.dataset.part = part.id;\r\n btn.textContent = part.name.split('(')[0];\r\n btn.onclick = () => selectFemalePart(part.id);\r\n femaleButtonsDiv.appendChild(btn);\r\n });\r\n\r\n document.querySelectorAll('#female-svg .part').forEach(el => {\r\n el.addEventListener('click', () => {\r\n selectFemalePart(el.dataset.part);\r\n });\r\n });\r\n\r\n \/\/ ========== \u0627\u0644\u062c\u0646\u064a\u0646 ==========\r\n let currentMonth = 1;\r\n let isPlaying = false;\r\n let playInterval = null;\r\n\r\n function updateFetalDisplay() {\r\n const stage = fetalStages[currentMonth - 1];\r\n document.getElementById('month-indicator').textContent = `\u0627\u0644\u0634\u0647\u0631: ${currentMonth}`;\r\n document.getElementById('fetal-trimester').textContent = stage.trimester;\r\n document.getElementById('fetal-trimester').style.color = stage.color;\r\n document.getElementById('fetal-month-title').textContent = `\u0627\u0644\u0634\u0647\u0631 ${currentMonth}`;\r\n document.getElementById('fetal-size').textContent = stage.size;\r\n document.getElementById('fetal-length').textContent = stage.length;\r\n document.getElementById('fetal-weight').textContent = stage.weight;\r\n document.getElementById('fetal-description').textContent = stage.description;\r\n document.getElementById('fetal-progress').style.width = `${(currentMonth \/ 9) * 100}%`;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0634\u0643\u0644 \u0627\u0644\u062c\u0646\u064a\u0646 (\u062a\u0628\u0633\u064a\u0637)\r\n const head = document.getElementById('fetus-head');\r\n const body = document.getElementById('fetus-body');\r\n const scale = 0.2 + (currentMonth \/ 9) * 0.8;\r\n document.getElementById('fetus-shape').style.transform = `scale(${scale})`;\r\n\r\n \/\/ \u0625\u0638\u0647\u0627\u0631 \u0627\u0644\u0639\u064a\u0648\u0646 \u0648\u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0628\u0639\u062f \u0627\u0644\u0634\u0647\u0631 2\r\n const eyeLeft = document.getElementById('fetus-eye-left');\r\n const eyeRight = document.getElementById('fetus-eye-right');\r\n const armLeft = document.getElementById('fetus-arm-left');\r\n const armRight = document.getElementById('fetus-arm-right');\r\n if (currentMonth > 2) {\r\n eyeLeft.style.display = 'block';\r\n eyeRight.style.display = 'block';\r\n armLeft.style.display = 'block';\r\n armRight.style.display = 'block';\r\n } else {\r\n eyeLeft.style.display = 'none';\r\n eyeRight.style.display = 'none';\r\n armLeft.style.display = 'none';\r\n armRight.style.display = 'none';\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u062d\u0627\u0644\u0629 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n document.getElementById('prev-month').disabled = currentMonth === 1;\r\n document.getElementById('next-month').disabled = currentMonth === 9;\r\n }\r\n\r\n function nextMonth() {\r\n if (currentMonth < 9) {\r\n currentMonth++;\r\n updateFetalDisplay();\r\n }\r\n }\r\n\r\n function prevMonth() {\r\n if (currentMonth > 1) {\r\n currentMonth--;\r\n updateFetalDisplay();\r\n }\r\n }\r\n\r\n function togglePlay() {\r\n isPlaying = !isPlaying;\r\n const playBtn = document.getElementById('play-pause');\r\n if (isPlaying) {\r\n playBtn.innerHTML = '\u23f8 \u0625\u064a\u0642\u0627\u0641';\r\n playBtn.classList.add('playing');\r\n playInterval = setInterval(() => {\r\n if (currentMonth < 9) {\r\n currentMonth++;\r\n updateFetalDisplay();\r\n } else {\r\n clearInterval(playInterval);\r\n isPlaying = false;\r\n playBtn.innerHTML = '\u25b6 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0639\u0631\u0636';\r\n playBtn.classList.remove('playing');\r\n }\r\n }, 2000);\r\n } else {\r\n clearInterval(playInterval);\r\n playBtn.innerHTML = '\u25b6 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0639\u0631\u0636';\r\n playBtn.classList.remove('playing');\r\n }\r\n }\r\n\r\n document.getElementById('prev-month').addEventListener('click', prevMonth);\r\n document.getElementById('next-month').addEventListener('click', nextMonth);\r\n document.getElementById('play-pause').addEventListener('click', togglePlay);\r\n\r\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0639\u0631\u0636\r\n updateFetalDisplay();\r\n\r\n \/\/ \u062f\u0648\u0627\u0644 \u0639\u0627\u0645\u0629 \u0644\u0644\u0646\u0642\u0631 \u0639\u0644\u0649 \u0627\u0644\u062a\u0633\u0645\u064a\u0627\u062a\r\n window.selectPart = selectMalePart;\r\n window.selectFemalePart = selectFemalePart;\r\n <\/script>\r\n<\/body>\r\n<\/html><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-17709","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/comments?post=17709"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17709\/revisions"}],"predecessor-version":[{"id":17710,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17709\/revisions\/17710"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}