{"id":17432,"date":"2026-02-15T07:05:47","date_gmt":"2026-02-15T07:05:47","guid":{"rendered":"https:\/\/smartedujo.com\/?page_id=17432"},"modified":"2026-02-15T07:05:53","modified_gmt":"2026-02-15T07:05:53","slug":"%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d8%a7%d9%84%d9%85%d8%a7%d8%af%d8%a9-%d8%a7%d9%84%d9%88%d8%b1%d8%a7%d8%ab%d9%8a%d8%a9-dna%d8%8c-%d8%a7%d9%84%d9%83%d8%b1%d9%88%d9%85","status":"publish","type":"page","link":"https:\/\/smartedujo.com\/ar\/%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d8%a7%d9%84%d9%85%d8%a7%d8%af%d8%a9-%d8%a7%d9%84%d9%88%d8%b1%d8%a7%d8%ab%d9%8a%d8%a9-dna%d8%8c-%d8%a7%d9%84%d9%83%d8%b1%d9%88%d9%85\/","title":{"rendered":"\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 (DNA\u060c \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a\u060c \u0627\u0644\u062c\u064a\u0646\u0627\u062a\u060c \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u062a\u0633\u0627\u0648\u064a \u0648\u0627\u0644\u0645\u0646\u0635\u0641)"},"content":{"rendered":"\n
\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 (DNA\u060c \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a\u060c \u0627\u0644\u062c\u064a\u0646\u0627\u062a\u060c \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u062a\u0633\u0627\u0648\u064a \u0648\u0627\u0644\u0645\u0646\u0635\u0641)<\/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 \r\n .simulation-box {\r\n background-color: rgba(0, 0, 0, 0.2);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 0.75rem;\r\n padding: 1rem;\r\n margin: 1.5rem 0;\r\n }\r\n .simulation-title {\r\n font-size: 1.25rem;\r\n font-weight: 700;\r\n margin-bottom: 1rem;\r\n text-align: center;\r\n color: rgba(255, 255, 255, 0.9);\r\n }\r\n canvas {\r\n display: block;\r\n margin: 0 auto;\r\n border-radius: 0.5rem;\r\n background-color: rgba(15, 23, 42, 0.5);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n .btn {\r\n padding: 0.5rem 1rem;\r\n border-radius: 0.5rem;\r\n font-weight: 600;\r\n transition: all 0.2s;\r\n cursor: pointer;\r\n border: none;\r\n font-family: 'Cairo', sans-serif;\r\n }\r\n .btn-primary {\r\n background-color: #4f46e5;\r\n color: white;\r\n }\r\n .btn-primary:hover {\r\n background-color: #6366f1;\r\n }\r\n .btn-secondary {\r\n background-color: #334155;\r\n color: white;\r\n }\r\n .btn-secondary:hover {\r\n background-color: #475569;\r\n }\r\n .btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n .legend {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n margin-top: 1rem;\r\n font-size: 0.75rem;\r\n color: #cbd5e1;\r\n }\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.25rem;\r\n }\r\n .color-dot {\r\n width: 0.75rem;\r\n height: 0.75rem;\r\n border-radius: 9999px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <!-- \u0631\u0623\u0633 \u0627\u0644\u062f\u0631\u0633 -->\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\u0623\u0648\u0644: \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 (DNA\u060c \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a\u060c \u0627\u0644\u062c\u064a\u0646\u0627\u062a\u060c \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u062a\u0633\u0627\u0648\u064a \u0648\u0627\u0644\u0645\u0646\u0635\u0641)<\/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\/geneticMaterial.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\/geneticMaterial.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 \r\n <!-- \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062f\u0631\u0633 \u0645\u0639 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a -->\r\n <div class=\"space-y-6 text-right\" dir=\"rtl\">\r\n <h1 class=\"text-2xl l:text-3xl font-bold text-purple-300 mb-4\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629<\/h1>\r\n\r\n <!-- \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 -->\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 (Genetic Material)<\/h2>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg mb-4\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">1. \u0627\u0644\u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a<\/h3>\r\n <p class=\"text-slate-300 text-l\">\u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 \u0647\u064a \u0645\u0627\u062f\u0629 \u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0629 \u0645\u0648\u062c\u0648\u062f\u0629 \u0641\u064a \u062c\u0645\u064a\u0639 \u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062d\u064a\u0629\u060c \u062a\u062a\u062d\u0643\u0645 \u0641\u064a \u062c\u0645\u064a\u0639 \u0623\u0646\u0634\u0637\u0629 \u0627\u0644\u062e\u0644\u064a\u0629 \u0648\u062a\u0646\u0642\u0644 \u0627\u0644\u0635\u0641\u0627\u062a \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 \u0645\u0646 \u0627\u0644\u0622\u0628\u0627\u0621 \u0625\u0644\u0649 \u0627\u0644\u0623\u0628\u0646\u0627\u0621.<\/p>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <h3 class=\"font-bold text-purple-300 mb-2\">2. \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a (Chromosomes)<\/h3>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l\">\r\n <li>\u062a\u0631\u0627\u0643\u064a\u0628 \u062f\u0642\u064a\u0642\u0629 \u062f\u0627\u062e\u0644 \u0646\u0648\u0627\u0629 \u0627\u0644\u062e\u0644\u064a\u0629 \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629.<\/li>\r\n <li>\u062a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0646\u0648\u0648\u064a <strong>DNA<\/strong> \u0648\u0627\u0644\u0628\u0631\u0648\u062a\u064a\u0646\u0627\u062a.<\/li>\r\n <li>\u062a\u062e\u062a\u0644\u0641 \u0623\u0639\u062f\u0627\u062f\u0647\u0627 \u0628\u064a\u0646 \u0627\u0644\u0643\u0627\u0626\u0646\u0627\u062a \u0627\u0644\u062d\u064a\u0629 (\u0627\u0644\u0625\u0646\u0633\u0627\u0646: <strong>46<\/strong> \u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u064b\u0627 \u0641\u064a \u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062c\u0633\u0645\u064a\u0629).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700\">\r\n <h3 class=\"font-bold text-blue-300 mb-2\">3. \u0627\u0644\u062c\u064a\u0646\u0627\u062a (Genes)<\/h3>\r\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-l\">\r\n <li>\u0623\u062c\u0632\u0627\u0621 \u0645\u062d\u062f\u062f\u0629 \u0645\u0646 DNA \u062a\u062a\u062d\u0643\u0645 \u0641\u064a \u0635\u0641\u0627\u062a \u0648\u0631\u0627\u062b\u064a\u0629 \u0645\u0639\u064a\u0646\u0629.<\/li>\r\n <li>\u0644\u0643\u0644 \u062c\u064a\u0646 \u0645\u0648\u0642\u0639 \u0645\u062d\u062f\u062f \u0639\u0644\u0649 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645.<\/li>\r\n <li>\u0647\u064a \u0627\u0644\u0645\u0633\u0624\u0648\u0644\u0629 \u0639\u0646 \u0627\u062e\u062a\u0644\u0627\u0641 \u0627\u0644\u0635\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u0623\u0641\u0631\u0627\u062f.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a (ChromosomesSimulation) -->\r\n <div class=\"simulation-box\" id=\"chromosomes-sim-container\">\r\n <div class=\"simulation-title\">\u0631\u062d\u0644\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u062e\u0644\u064a\u0629: \u0645\u0646 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 \u0625\u0644\u0649 DNA<\/div>\r\n <canvas id=\"chromosomesCanvas\" width=\"400\" height=\"300\" class=\"shadow-inner\"><\/canvas>\r\n <div class=\"flex gap-4 mt-4 justify-center\">\r\n <button id=\"zoomOutBtn\" class=\"btn btn-secondary\">\u062a\u0635\u063a\u064a\u0631 (-)<\/button>\r\n <span id=\"viewIndicator\" class=\"px-4 py-2 bg-slate-800 rounded-lg text-white font-mono min-w-[120px] text-center flex items-center justify-center\">\u0627\u0644\u062e\u0644\u064a\u0629<\/span>\r\n <button id=\"zoomInBtn\" class=\"btn btn-primary\">\u062a\u0643\u0628\u064a\u0631 (+)<\/button>\r\n <\/div>\r\n <div class=\"flex justify-center mt-2\">\r\n <button id=\"resetViewBtn\" class=\"text-slate-400 hover:text-white text-l flex items-center gap-1\">\u27f2 \u0625\u0639\u0627\u062f\u0629 \u0644\u0644\u0628\u062f\u0627\u064a\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062b\u0627\u0646\u064a: \u062a\u0631\u0643\u064a\u0628 DNA -->\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0646\u064a\u0627\u064b: \u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0646\u0648\u0648\u064a DNA<\/h2>\r\n <div class=\"bg-slate-900\/50 p-4 rounded-lg border border-white\/10\">\r\n <p class=\"text-slate-300 text-l mb-3\"><strong>\u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0639\u0627\u0645:<\/strong> \u0633\u0644\u0633\u0644\u062a\u0627\u0646 \u0644\u0648\u0644\u0628\u064a\u062a\u0627\u0646 \u0645\u0632\u062f\u0648\u062c\u062a\u0627\u0646 \u0639\u0644\u0649 \u0634\u0643\u0644 \"\u0633\u0644\u0645 \u0644\u0648\u0644\u0628\u064a\".<\/p>\r\n \r\n <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0646\u064a\u0648\u0643\u0644\u064a\u0648\u062a\u064a\u062f (NucleotideStructure) -->\r\n <div class=\"simulation-box\">\r\n <div class=\"simulation-title\">\u062a\u0631\u0643\u064a\u0628 \u0627\u0644\u0646\u064a\u0648\u0643\u0644\u064a\u0648\u062a\u064a\u062f (\u0648\u062d\u062f\u0629 \u0628\u0646\u0627\u0621 DNA)<\/div>\r\n <svg id=\"nucleotideSvg\" width=\"320\" height=\"160\" viewBox=\"0 0 320 160\" class=\"max-w-full cursor-pointer mx-auto\">\r\n <!-- Connections -->\r\n <line x1=\"70\" y1=\"80\" x2=\"130\" y2=\"80\" stroke=\"#94a3b8\" stroke-width=\"4\" \/>\r\n <line x1=\"190\" y1=\"80\" x2=\"230\" y2=\"80\" stroke=\"#94a3b8\" stroke-width=\"4\" \/>\r\n <!-- Phosphate Group -->\r\n <g id=\"phosphateGroup\" style=\"cursor:pointer\">\r\n <circle cx=\"40\" cy=\"80\" r=\"30\" fill=\"#fbbf24\" stroke=\"#d97706\" stroke-width=\"3\" \/>\r\n <text x=\"40\" y=\"85\" text-anchor=\"middle\" fill=\"#78350f\" font-weight=\"bold\" font-size=\"20\" font-family=\"sans-serif\">P<\/text>\r\n <\/g>\r\n <!-- Sugar -->\r\n <g id=\"sugarGroup\" style=\"cursor:pointer\">\r\n <path d=\"M130 80 L145 55 L175 55 L190 80 L160 115 Z\" fill=\"#60a5fa\" stroke=\"#1d4ed8\" stroke-width=\"3\" \/>\r\n <text x=\"160\" y=\"90\" text-anchor=\"middle\" fill=\"#1e3a8a\" font-weight=\"bold\" font-size=\"14\" font-family=\"sans-serif\">S<\/text>\r\n <\/g>\r\n <!-- Nitrogenous Base -->\r\n <g id=\"baseGroup\" style=\"cursor:pointer\">\r\n <rect x=\"230\" y=\"55\" width=\"80\" height=\"50\" rx=\"8\" fill=\"#f87171\" stroke=\"#b91c1c\" stroke-width=\"3\" \/>\r\n <text x=\"270\" y=\"85\" text-anchor=\"middle\" fill=\"#7f1d1d\" font-weight=\"bold\" font-size=\"14\" font-family=\"sans-serif\">Base<\/text>\r\n <\/g>\r\n <\/svg>\r\n <div id=\"nucleotideInfo\" class=\"mt-4 min-h-[80px] w-full text-center bg-slate-800\/50 p-3 rounded-lg border border-white\/5\">\r\n <p class=\"text-slate-400 text-l\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u0646\u064a\u0648\u0643\u0644\u064a\u0648\u062a\u064a\u062f \u0644\u0645\u0639\u0631\u0641\u0629 \u0648\u0638\u0627\u0626\u0641\u0647\u0627<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"font-bold text-white\/90 mb-2 mt-6\">\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646\u064a\u0629 \u0648\u0627\u0631\u062a\u0628\u0627\u0637\u0647\u0627:<\/h3>\r\n <p class=\"text-slate-300 text-l mb-3\">\u062a\u0631\u062a\u0628\u0637 \u0627\u0644\u0633\u0644\u0633\u0644\u062a\u0627\u0646 \u0645\u0639\u064b\u0627 \u0639\u0628\u0631 \u0631\u0648\u0627\u0628\u0637 \u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646\u064a\u0629 \u0648\u0641\u0642 \u0646\u0638\u0627\u0645 \u0645\u062d\u062f\u062f:<\/p>\r\n \r\n <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0643\u0627\u0645\u0644 \u0627\u0644\u0642\u0648\u0627\u0639\u062f (BasePairingSimulation) -->\r\n <div class=\"simulation-box\" id=\"basePairingSim\">\r\n <div class=\"simulation-title\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0643\u0627\u0645\u0644 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646\u064a\u0629<\/div>\r\n <div class=\"flex gap-4 items-start w-full max-w-md mx-auto\">\r\n <div class=\"flex-1 flex justify-center bg-slate-900\/50 rounded-lg border border-slate-700 py-4\">\r\n <canvas id=\"basePairingCanvas\" width=\"200\" height=\"320\"><\/canvas>\r\n <\/div>\r\n <div class=\"flex flex-col gap-3 w-32\">\r\n <p class=\"text-l text-slate-300 text-center mb-1\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0645\u0643\u0645\u0644\u0629:<\/p>\r\n <button id=\"btnA\" class=\"w-full py-2 rounded font-bold text-white shadow-md transition-transform active:scale-95\" style=\"background-color:#f87171\">A<\/button>\r\n <button id=\"btnT\" class=\"w-full py-2 rounded font-bold text-white shadow-md transition-transform active:scale-95\" style=\"background-color:#facc15\">T<\/button>\r\n <button id=\"btnC\" class=\"w-full py-2 rounded font-bold text-white shadow-md transition-transform active:scale-95\" style=\"background-color:#60a5fa\">C<\/button>\r\n <button id=\"btnG\" class=\"w-full py-2 rounded font-bold text-white shadow-md transition-transform active:scale-95\" style=\"background-color:#34d399\">G<\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"pairingFeedback\" class=\"mt-4 flex flex-col items-center min-h-[40px]\">\r\n <p class=\"text-slate-400 text-l\">\u0623\u0643\u0645\u0644 \u0627\u0644\u0633\u0644\u0633\u0644\u0629 \u0628\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0635\u062d\u064a\u062d\u0629<\/p>\r\n <\/div>\r\n <div class=\"flex justify-center mt-2\">\r\n <button id=\"resetPairingBtn\" class=\"p-2 rounded-full bg-slate-700 hover:bg-slate-600 text-white transition-colors\" title=\"\u0633\u0644\u0633\u0644\u0629 \u062c\u062f\u064a\u062f\u0629\">\u27f2<\/button>\r\n <\/div>\r\n <div class=\"legend\">\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#f87171\"><\/span> \u0623\u062f\u0646\u064a\u0646 (A)<\/span>\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#facc15\"><\/span> \u062b\u0627\u064a\u0645\u064a\u0646 (T)<\/span>\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#60a5fa\"><\/span> \u0633\u0627\u064a\u062a\u0648\u0633\u064a\u0646 (C)<\/span>\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#34d399\"><\/span> \u062c\u0648\u0627\u0646\u064a\u0646 (G)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062a\u0636\u0627\u0639\u0641 DNA -->\r\n <div class=\"mt-4 bg-slate-800\/50 p-4 rounded-lg\">\r\n <h3 class=\"font-bold text-white\/90 mb-2\">\u062a\u0636\u0627\u0639\u0641 DNA:<\/h3>\r\n <p class=\"text-l text-slate-300 mb-2\"><strong>\u0627\u0644\u0647\u062f\u0641:<\/strong> \u0625\u0646\u062a\u0627\u062c \u0646\u0633\u062e\u0629 \u0645\u0637\u0627\u0628\u0642\u0629 \u0645\u0646 DNA \u0642\u0628\u0644 \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u062e\u0644\u0648\u064a \u0644\u0636\u0645\u0627\u0646 \u0646\u0642\u0644 \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 \u0643\u0627\u0645\u0644\u0629.<\/p>\r\n <p class=\"text-l text-slate-300 font-semibold\">\u0627\u0644\u062e\u0637\u0648\u0627\u062a:<\/p>\r\n <ol class=\"list-decimal list-inside text-slate-300 text-l space-y-1 marker:text-purple-400\">\r\n <li>\u0627\u0646\u0641\u0635\u0627\u0644 \u0627\u0644\u0633\u0644\u0633\u0644\u062a\u064a\u0646 (\u0628\u0648\u0627\u0633\u0637\u0629 \u0625\u0646\u0632\u064a\u0645\u0627\u062a \u062e\u0627\u0635\u0629 \u062a\u0643\u0633\u0631 \u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646\u064a\u0629).<\/li>\r\n <li>\u0628\u0646\u0627\u0621 \u0633\u0644\u0627\u0633\u0644 \u062c\u062f\u064a\u062f\u0629 \u0645\u0643\u0645\u0644\u0629 (\u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0625\u0646\u0632\u064a\u0645 \u0628\u0644\u0645\u0631\u0629 DNA).<\/li>\r\n <li>\u062a\u0643\u0648\u064a\u0646 \u062c\u0632\u0626\u064a\u0646 \u0645\u062a\u0637\u0627\u0628\u0642\u064a\u0646 \u0645\u0646 DNA (\u0643\u0644 \u062c\u0632\u064a\u0621 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0633\u0644\u0633\u0644\u0629 \u0642\u062f\u064a\u0645\u0629 \u0648\u0633\u0644\u0633\u0644\u0629 \u062c\u062f\u064a\u062f\u0629).<\/li>\r\n <\/ol>\r\n <\/div>\r\n\r\n <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0636\u0627\u0639\u0641 DNA (DNAReplicationSimulation) -->\r\n <div class=\"simulation-box\" id=\"dnaReplicationSim\">\r\n <div class=\"simulation-title\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0636\u0627\u0639\u0641 DNA<\/div>\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <div class=\"flex gap-2\">\r\n <button id=\"playReplicationBtn\" class=\"btn btn-primary\">\u0628\u062f\u0621 \u0627\u0644\u062a\u0636\u0627\u0639\u0641<\/button>\r\n <button id=\"pauseReplicationBtn\" class=\"btn btn-secondary\" disabled>\u0625\u064a\u0642\u0627\u0641 \u0645\u0624\u0642\u062a<\/button>\r\n <button id=\"resetReplicationBtn\" class=\"p-2 bg-slate-600 hover:bg-slate-500 text-white rounded-lg\">\u27f2<\/button>\r\n <\/div>\r\n <\/div>\r\n <canvas id=\"dnaReplicationCanvas\" width=\"600\" height=\"300\"><\/canvas>\r\n <div class=\"legend\">\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#f87171\"><\/span> \u0623\u062f\u0646\u064a\u0646 (A)<\/span>\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#facc15\"><\/span> \u062b\u0627\u064a\u0645\u064a\u0646 (T)<\/span>\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#60a5fa\"><\/span> \u0633\u0627\u064a\u062a\u0648\u0633\u064a\u0646 (C)<\/span>\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#34d399\"><\/span> \u062c\u0648\u0627\u0646\u064a\u0646 (G)<\/span>\r\n <\/div>\r\n <p class=\"text-center text-l text-slate-400 mt-2 p-2 bg-slate-800\/40 rounded\">\r\n \u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u064a\u0646\u0641\u0635\u0644 \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u0623\u0635\u0644\u064a \u062b\u0645 \u064a\u062a\u0645 \u0628\u0646\u0627\u0621 \u0634\u0631\u064a\u0637 \u062c\u062f\u064a\u062f \u0645\u0643\u0645\u0644 \u0644\u0643\u0644 \u0637\u0631\u0641.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u062b\u0627\u0644\u062b: \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u062e\u0644\u0648\u064a (\u0645\u064f\u062d\u0633\u0651\u0646) -->\r\n <section>\r\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u062b\u0627\u0644\u062b\u0627\u064b: \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u062e\u0644\u0648\u064a<\/h2>\r\n <p class=\"text-slate-300 text-l mb-4\">\u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u062e\u0644\u0648\u064a \u0647\u0648 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062d\u064a\u0648\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0646\u0642\u0633\u0645 \u0641\u064a\u0647\u0627 \u0627\u0644\u062e\u0644\u064a\u0629 \u0627\u0644\u0623\u0645 \u0625\u0644\u0649 \u062e\u0644\u064a\u062a\u064a\u0646 \u0623\u0648 \u0623\u0643\u062b\u0631. \u0647\u0630\u0647 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0636\u0631\u0648\u0631\u064a\u0629 \u0644\u0646\u0645\u0648 \u0627\u0644\u0643\u0627\u0626\u0646\u0627\u062a \u0627\u0644\u062d\u064a\u0629\u060c \u0648\u062a\u0639\u0648\u064a\u0636 \u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062a\u0627\u0644\u0641\u0629\u060c \u0648\u0627\u0644\u062a\u0643\u0627\u062b\u0631.<\/p>\r\n\r\n <!-- \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u062e\u0644\u0648\u064a \u0627\u0644\u0645\u062d\u0633\u0651\u0646\u0629 -->\r\n <div class=\"simulation-box\" id=\"cellDivisionSim\">\r\n <div class=\"simulation-title\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u062e\u0644\u0648\u064a (\u0645\u062a\u0633\u0627\u0648\u064a\u060c \u0645\u0646\u0635\u0641\u060c \u0627\u0646\u0634\u0637\u0627\u0631 \u062b\u0646\u0627\u0626\u064a)<\/div>\r\n <div class=\"flex justify-center gap-2 mb-4\">\r\n <button id=\"btnMitosis\" class=\"btn btn-primary\">\u0645\u062a\u0633\u0627\u0648\u064a<\/button>\r\n <button id=\"btnMeiosis\" class=\"btn btn-secondary\">\u0645\u0646\u0635\u0641<\/button>\r\n <button id=\"btnBinary\" class=\"btn btn-secondary\">\u0627\u0646\u0634\u0637\u0627\u0631 \u062b\u0646\u0627\u0626\u064a<\/button>\r\n <\/div>\r\n <canvas id=\"cellDivisionCanvas\" width=\"500\" height=\"300\"><\/canvas>\r\n <div class=\"mt-4 flex flex-col items-center gap-3\">\r\n <div class=\"flex items-center gap-2\">\r\n <button id=\"prevPhaseBtn\" class=\"btn btn-secondary\">\u2190 \u0627\u0644\u0633\u0627\u0628\u0642<\/button>\r\n <span id=\"phaseName\" class=\"text-center px-4 min-w-[200px] font-bold text-white\">\u0627\u0644\u0637\u0648\u0631 \u0627\u0644\u0628\u064a\u0646\u064a<\/span>\r\n <button id=\"nextPhaseBtn\" class=\"btn btn-primary\">\u0627\u0644\u062a\u0627\u0644\u064a \u2192<\/button>\r\n <\/div>\r\n <p id=\"phaseDesc\" class=\"text-l text-slate-300 text-center max-w-md bg-slate-800\/50 p-2 rounded-md\"><\/p>\r\n <\/div>\r\n <div class=\"mt-2 text-l text-center text-yellow-400\" id=\"meiosisNote\"><\/div>\r\n <div class=\"legend\" id=\"chromosomeLegend\">\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#f87171\"><\/span> \u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 \u0627\u0644\u0623\u0628<\/span>\r\n <span class=\"legend-item\"><span class=\"color-dot\" style=\"background:#60a5fa\"><\/span> \u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 \u0627\u0644\u0623\u0645<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629 -->\r\n <div class=\"overflow-x-auto bg-white\/20 rounded-lg border border-white\/10 mb-4\">\r\n <table class=\"w-full text-l text-right text-slate-300\">\r\n <thead class=\"bg-white\/10 text-l text-slate-200 uppercase\">\r\n <tr>\r\n <th class=\"px-4 py-3\">\u0648\u062c\u0647 \u0627\u0644\u0645\u0642\u0627\u0631\u0646\u0629<\/th>\r\n <th class=\"px-4 py-3 text-purple-300\">\u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u062a\u0633\u0627\u0648\u064a (Mitosis)<\/th>\r\n <th class=\"px-4 py-3 text-teal-300\">\u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u0646\u0635\u0641 (Meiosis)<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr class=\"border-b border-white\/10\"><td class=\"px-4 py-3 font-semibold\">\u0627\u0644\u0645\u0648\u0642\u0639<\/td><td class=\"px-4 py-3\">\u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062c\u0633\u0645\u064a\u0629<\/td><td class=\"px-4 py-3\">\u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062c\u0646\u0633\u064a\u0629<\/td><\/tr>\r\n <tr class=\"border-b border-white\/10\"><td class=\"px-4 py-3 font-semibold\">\u0627\u0644\u0646\u0627\u062a\u062c<\/td><td class=\"px-4 py-3\">\u062e\u0644\u064a\u062a\u0627\u0646 \u0645\u062a\u0645\u0627\u062b\u0644\u062a\u0627\u0646 (2n)<\/td><td class=\"px-4 py-3\">4 \u062e\u0644\u0627\u064a\u0627 (\u062c\u0627\u0645\u064a\u062a\u0627\u062a) (1n)<\/td><\/tr>\r\n <tr class=\"border-b border-white\/10\"><td class=\"px-4 py-3 font-semibold\">\u0627\u0644\u0623\u0647\u0645\u064a\u0629<\/td><td class=\"px-4 py-3\">\u0627\u0644\u0646\u0645\u0648\u060c \u062a\u0639\u0648\u064a\u0636 \u0627\u0644\u062a\u0627\u0644\u0641\u060c \u0627\u0644\u062a\u0643\u0627\u062b\u0631 \u0627\u0644\u0644\u0627\u062c\u0646\u0633\u064a<\/td><td class=\"px-4 py-3\">\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u0623\u0645\u0634\u0627\u062c \u0644\u0644\u062a\u0643\u0627\u062b\u0631 \u0627\u0644\u062c\u0646\u0633\u064a<\/td><\/tr>\r\n <tr><td class=\"px-4 py-3 font-semibold\">\u0639\u062f\u062f \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a<\/td><td class=\"px-4 py-3\">\u0646\u0641\u0633 \u0627\u0644\u0639\u062f\u062f \u0627\u0644\u0623\u0635\u0644\u064a<\/td><td class=\"px-4 py-3\">\u0646\u0635\u0641 \u0627\u0644\u0639\u062f\u062f \u0627\u0644\u0623\u0635\u0644\u064a<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0627\u0644\u062e\u0644\u0627\u0635\u0629 -->\r\n <section class=\"bg-indigo-900\/30 p-4 rounded-xl border border-white\/10 mt-6\">\r\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0627\u0644\u062e\u0644\u0627\u0635\u0629<\/h2>\r\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-l\">\r\n <li><strong>\u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629:<\/strong> \u062a\u0648\u062c\u062f \u0641\u064a \u0627\u0644\u0646\u0648\u0627\u0629 \u0639\u0644\u0649 \u0634\u0643\u0644 \u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a\u060c \u0648\u062a\u062a\u062d\u0643\u0645 \u0641\u064a \u0635\u0641\u0627\u062a \u0627\u0644\u0643\u0627\u0626\u0646 \u0627\u0644\u062d\u064a.<\/li>\r\n <li><strong>\u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645:<\/strong> \u062a\u0631\u0643\u064a\u0628 \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 DNA \u0648\u0628\u0631\u0648\u062a\u064a\u0646\u0627\u062a\u060c \u0648\u064a\u062d\u0645\u0644 \u0627\u0644\u062c\u064a\u0646\u0627\u062a.<\/li>\r\n <li><strong>\u0627\u0644\u062c\u064a\u0646:<\/strong> \u062c\u0632\u0621 \u0645\u062d\u062f\u062f \u0645\u0646 DNA \u0645\u0633\u0624\u0648\u0644 \u0639\u0646 \u0635\u0641\u0629 \u0648\u0631\u0627\u062b\u064a\u0629 \u0645\u0639\u064a\u0646\u0629.<\/li>\r\n <li><strong>DNA:<\/strong> \u0634\u0631\u064a\u0637 \u0645\u0632\u062f\u0648\u062c \u0644\u0648\u0644\u0628\u064a \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0648\u062d\u062f\u0627\u062a \u062a\u0633\u0645\u0649 \u0627\u0644\u0646\u064a\u0648\u0643\u0644\u064a\u0648\u062a\u064a\u062f\u0627\u062a. \u062a\u0631\u062a\u0628\u0637 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646\u064a\u0629 \u0641\u064a\u0647 \u0628\u0646\u0638\u0627\u0645 \u0645\u062d\u062f\u062f (A \u0645\u0639 T\u060c \u0648 C \u0645\u0639 G).<\/li>\r\n <li><strong>\u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u062a\u0633\u0627\u0648\u064a:<\/strong> \u064a\u062d\u062f\u062b \u0641\u064a \u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062c\u0633\u0645\u064a\u0629 \u0644\u0644\u0646\u0645\u0648 \u0648\u062a\u0639\u0648\u064a\u0636 \u0627\u0644\u062a\u0627\u0644\u0641\u060c \u0648\u064a\u0646\u062a\u062c \u062e\u0644\u064a\u062a\u064a\u0646 \u0645\u062a\u0637\u0627\u0628\u0642\u062a\u064a\u0646 (2n).<\/li>\r\n <li><strong>\u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u0646\u0635\u0641:<\/strong> \u064a\u062d\u062f\u062b \u0641\u064a \u0627\u0644\u062e\u0644\u0627\u064a\u0627 \u0627\u0644\u062c\u0646\u0633\u064a\u0629 \u0644\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u062c\u0627\u0645\u064a\u062a\u0627\u062a\u060c \u0648\u064a\u0646\u062a\u062c 4 \u062e\u0644\u0627\u064a\u0627 \u062a\u062d\u062a\u0648\u064a \u0646\u0635\u0641 \u0627\u0644\u0639\u062f\u062f \u0645\u0646 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a (1n).<\/li>\r\n <\/ul>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u0643\u0648\u062f JavaScript \u0627\u0644\u0645\u0648\u062d\u062f \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a (\u0645\u0639 \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u062e\u0644\u0648\u064a) -->\r\n <script>\r\n (function() {\r\n \/\/ ==================== Helper functions ====================\r\n function getElement(id) { return document.getElementById(id); }\r\n\r\n \/\/ ==================== 1. Nucleotide Structure ====================\r\n (function() {\r\n const partsInfo = {\r\n phosphate: { title: '\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a', desc: '\u062a\u0631\u0628\u0637 \u0627\u0644\u0633\u0643\u0631\u064a\u0627\u062a \u0628\u0628\u0639\u0636\u0647\u0627 \u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u062e\u0627\u0631\u062c\u064a \u0644\u0634\u0631\u064a\u0637 DNA.', color: '#fbbf24' },\r\n sugar: { title: '\u0633\u0643\u0631 \u062e\u0645\u0627\u0633\u064a (\u062f\u064a\u0648\u0643\u0633\u064a \u0631\u0627\u064a\u0628\u0648\u0632)', desc: '\u0633\u0643\u0631 \u0645\u0646\u0642\u0648\u0635 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 \u064a\u0634\u0643\u0644 \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u0641\u0642\u0631\u064a \u0645\u0639 \u0627\u0644\u0641\u0648\u0633\u0641\u0627\u062a.', color: '#60a5fa' },\r\n base: { title: '\u0642\u0627\u0639\u062f\u0629 \u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646\u064a\u0629', desc: '\u062a\u062d\u062f\u062f \u0627\u0644\u0634\u0641\u0631\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629\u060c \u0648\u0647\u064a \u0623\u062d\u062f \u0623\u0631\u0628\u0639\u0629 \u0623\u0646\u0648\u0627\u0639 (A, T, C, G).', color: '#f87171' }\r\n };\r\n const infoDiv = getElement('nucleotideInfo');\r\n \r\n const setActive = (part) => {\r\n if (part) {\r\n infoDiv.innerHTML = `<strong class=\"text-white block mb-1 text-lg\" style=\"color:${partsInfo[part].color}\">${partsInfo[part].title}<\/strong><p class=\"text-l text-slate-300\">${partsInfo[part].desc}<\/p>`;\r\n } else {\r\n infoDiv.innerHTML = '<p class=\"text-slate-400 text-l\">\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \u0623\u062c\u0632\u0627\u0621 \u0627\u0644\u0646\u064a\u0648\u0643\u0644\u064a\u0648\u062a\u064a\u062f \u0644\u0645\u0639\u0631\u0641\u0629 \u0648\u0638\u0627\u0626\u0641\u0647\u0627<\/p>';\r\n }\r\n };\r\n\r\n getElement('phosphateGroup').addEventListener('click', () => setActive('phosphate'));\r\n getElement('sugarGroup').addEventListener('click', () => setActive('sugar'));\r\n getElement('baseGroup').addEventListener('click', () => setActive('base'));\r\n \r\n ['phosphateGroup', 'sugarGroup', 'baseGroup'].forEach(id => {\r\n getElement(id).addEventListener('mouseenter', function() { this.style.opacity = '0.8'; });\r\n getElement(id).addEventListener('mouseleave', function() { this.style.opacity = '1'; });\r\n });\r\n })();\r\n\r\n \/\/ ==================== 2. Chromosomes Simulation ====================\r\n (function() {\r\n const canvas = getElement('chromosomesCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const viewIndicator = getElement('viewIndicator');\r\n const zoomInBtn = getElement('zoomInBtn');\r\n const zoomOutBtn = getElement('zoomOutBtn');\r\n const resetBtn = getElement('resetViewBtn');\r\n\r\n let view = 'cell'; \/\/ cell, nucleus, chromosome, dna\r\n let time = 0;\r\n let animationFrame;\r\n\r\n const views = ['cell', 'nucleus', 'chromosome', 'dna'];\r\n const viewNames = { cell: '\u0627\u0644\u062e\u0644\u064a\u0629', nucleus: '\u0627\u0644\u0646\u0648\u0627\u0629', chromosome: '\u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645', dna: 'DNA' };\r\n\r\n function draw() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n if (view === 'cell') drawCell();\r\n else if (view === 'nucleus') drawNucleus();\r\n else if (view === 'chromosome') drawChromosome();\r\n else if (view === 'dna') drawDNA();\r\n viewIndicator.textContent = viewNames[view];\r\n time++;\r\n animationFrame = requestAnimationFrame(draw);\r\n }\r\n\r\n function drawCell() {\r\n ctx.fillStyle = '#e0f2fe';\r\n ctx.strokeStyle = '#38bdf8';\r\n ctx.lineWidth = 3;\r\n ctx.beginPath();\r\n for (let i = 0; i <= 360; i++) {\r\n const angle = i * Math.PI \/ 180;\r\n const r = 100 + Math.sin(angle * 5 + time * 0.05) * 2;\r\n const x = canvas.width\/2 + r * Math.cos(angle);\r\n const y = canvas.height\/2 + r * Math.sin(angle);\r\n if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);\r\n }\r\n ctx.closePath(); ctx.fill(); ctx.stroke();\r\n\r\n ctx.fillStyle = '#f3e8ff';\r\n ctx.strokeStyle = '#c084fc';\r\n ctx.beginPath(); ctx.arc(canvas.width\/2, canvas.height\/2, 40, 0, Math.PI*2); ctx.fill(); ctx.stroke();\r\n\r\n ctx.strokeStyle = '#6b21a8';\r\n ctx.lineWidth = 1.5;\r\n for (let i=0; i<4; i++) {\r\n const angle = (i\/4)*Math.PI*2 + time*0.02;\r\n const cx = canvas.width\/2 + Math.cos(angle)*15;\r\n const cy = canvas.height\/2 + Math.sin(angle)*15;\r\n ctx.beginPath();\r\n ctx.moveTo(cx-3, cy-3); ctx.lineTo(cx+3, cy+3);\r\n ctx.moveTo(cx+3, cy-3); ctx.lineTo(cx-3, cy+3);\r\n ctx.stroke();\r\n }\r\n ctx.fillStyle = '#1e293b';\r\n ctx.font = 'bold 14px Cairo'; ctx.textAlign = 'center';\r\n ctx.fillText('\u0627\u0644\u062e\u0644\u064a\u0629', canvas.width\/2, canvas.height-20);\r\n ctx.font = '12px Cairo'; ctx.fillText('\u0627\u0644\u0646\u0648\u0627\u0629', canvas.width\/2, canvas.height\/2+55);\r\n }\r\n\r\n function drawNucleus() {\r\n ctx.fillStyle = '#f3e8ff'; ctx.fillRect(0,0,canvas.width,canvas.height);\r\n const grad = ctx.createRadialGradient(canvas.width\/2, canvas.height\/2, 100, canvas.width\/2, canvas.height\/2, 200);\r\n grad.addColorStop(0, 'rgba(192,132,252,0)'); grad.addColorStop(1, 'rgba(192,132,252,0.5)');\r\n ctx.fillStyle = grad; ctx.fillRect(0,0,canvas.width,canvas.height);\r\n for (let i=0; i<6; i++) {\r\n const angle = (i\/6)*Math.PI*2 + time*0.01;\r\n const cx = canvas.width\/2 + Math.cos(angle*1.5)*60;\r\n const cy = canvas.height\/2 + Math.sin(angle*2)*40;\r\n ctx.save(); ctx.translate(cx, cy); ctx.rotate(angle+Math.PI\/4);\r\n ctx.fillStyle = '#9333ea';\r\n ctx.beginPath(); ctx.ellipse(0, -15, 6, 15, 0, 0, Math.PI*2); ctx.fill();\r\n ctx.beginPath(); ctx.ellipse(0, 15, 6, 15, 0, 0, Math.PI*2); ctx.fill();\r\n ctx.fillStyle = '#e879f9';\r\n ctx.beginPath(); ctx.arc(0,0,5,0,Math.PI*2); ctx.fill();\r\n ctx.restore();\r\n }\r\n ctx.fillStyle = '#1e293b'; ctx.font = 'bold 16px Cairo'; ctx.textAlign = 'center';\r\n ctx.fillText('\u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u062f\u0627\u062e\u0644 \u0627\u0644\u0646\u0648\u0627\u0629', canvas.width\/2, canvas.height-20);\r\n }\r\n\r\n function drawChromosome() {\r\n ctx.clearRect(0,0,canvas.width,canvas.height);\r\n ctx.save(); ctx.translate(canvas.width\/2, canvas.height\/2); ctx.rotate(Math.sin(time*0.02)*0.05);\r\n ctx.fillStyle = '#a855f7'; ctx.strokeStyle = '#581c87'; ctx.lineWidth = 2;\r\n const drawArm = (angle) => {\r\n ctx.save(); ctx.rotate(angle);\r\n ctx.beginPath(); ctx.roundRect(-12, -100-10, 25, 100, 12); ctx.fill(); ctx.stroke();\r\n for (let i=0; i<5; i++) {\r\n const y = -100 + 15 + i*15;\r\n ctx.fillStyle = i%2===0 ? '#f0abfc' : '#e879f9';\r\n ctx.fillRect(-12+2, y, 25-4, 8);\r\n }\r\n ctx.restore();\r\n };\r\n drawArm(-0.2); drawArm(Math.PI-0.2); drawArm(0.2); drawArm(Math.PI+0.2);\r\n ctx.fillStyle = '#fae8ff'; ctx.beginPath(); ctx.arc(0,0,18,0,Math.PI*2); ctx.fill(); ctx.stroke();\r\n ctx.restore();\r\n ctx.fillStyle = '#1e293b'; ctx.font = 'bold 16px Cairo'; ctx.textAlign = 'center';\r\n ctx.fillText('\u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 \u0648\u0627\u0644\u062c\u064a\u0646\u0627\u062a', canvas.width\/2, canvas.height-20);\r\n ctx.font = '12px Cairo'; ctx.fillText('\u0627\u0644\u062c\u064a\u0646: \u062c\u0632\u0621 \u0645\u062d\u062f\u062f \u0645\u0646 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 \u064a\u062a\u062d\u0643\u0645 \u0641\u064a \u0635\u0641\u0629 \u0645\u0639\u064a\u0646\u0629', canvas.width\/2, canvas.height-40);\r\n }\r\n\r\n function drawDNA() {\r\n const startX = 50; const amplitude = 30; const freq = 0.05; const speed = time*0.05;\r\n ctx.save(); ctx.globalAlpha = 0.3; ctx.translate(60, canvas.height\/2); ctx.rotate(0.2);\r\n ctx.fillStyle = '#a855f7'; ctx.beginPath(); ctx.roundRect(-15,-60,30,120,15); ctx.fill();\r\n ctx.restore(); ctx.globalAlpha = 1;\r\n ctx.strokeStyle = '#94a3b8'; ctx.lineWidth = 2; ctx.setLineDash([5,5]);\r\n ctx.beginPath(); ctx.moveTo(80, canvas.height\/2); ctx.lineTo(120, canvas.height\/2); ctx.stroke();\r\n ctx.setLineDash([]);\r\n const dnaStartX = 130; const dnaWidth = canvas.width - dnaStartX - 20;\r\n for (let x=0; x<dnaWidth; x+=5) {\r\n const angle = x*freq - speed;\r\n const y1 = canvas.height\/2 + Math.sin(angle)*amplitude;\r\n const y2 = canvas.height\/2 + Math.sin(angle+Math.PI)*amplitude;\r\n const screenX = dnaStartX + x;\r\n ctx.beginPath(); ctx.moveTo(screenX, y1); ctx.lineTo(screenX, y2);\r\n ctx.strokeStyle = '#cbd5e1'; ctx.lineWidth = 2; ctx.stroke();\r\n const radius = 3 + (Math.cos(angle)+1);\r\n ctx.beginPath(); ctx.arc(screenX, y1, radius, 0, Math.PI*2); ctx.fillStyle = '#3b82f6'; ctx.fill();\r\n ctx.beginPath(); ctx.arc(screenX, y2, radius, 0, Math.PI*2); ctx.fillStyle = '#ef4444'; ctx.fill();\r\n }\r\n ctx.fillStyle = '#1e293b'; ctx.font = 'bold 16px Cairo'; ctx.textAlign = 'center';\r\n ctx.fillText('\u0627\u0644\u062d\u0645\u0636 \u0627\u0644\u0646\u0648\u0648\u064a DNA', canvas.width\/2, canvas.height-20);\r\n ctx.font = '12px Cairo'; ctx.fillText('\u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0634\u0631\u064a\u0637 DNA \u0645\u0644\u062a\u0641 \u0628\u0625\u062d\u0643\u0627\u0645', canvas.width\/2, canvas.height-40);\r\n }\r\n\r\n zoomInBtn.addEventListener('click', () => { let idx = views.indexOf(view); if (idx < views.length-1) view = views[idx+1]; });\r\n zoomOutBtn.addEventListener('click', () => { let idx = views.indexOf(view); if (idx > 0) view = views[idx-1]; });\r\n resetBtn.addEventListener('click', () => { view = 'cell'; });\r\n draw();\r\n })();\r\n\r\n \/\/ ==================== 3. Base Pairing Simulation ====================\r\n (function() {\r\n const canvas = getElement('basePairingCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const bases = ['A','T','C','G'];\r\n const pairs = {A:'T', T:'A', C:'G', G:'C'};\r\n const colors = {A:'#f87171', T:'#facc15', C:'#60a5fa', G:'#34d399'};\r\n \r\n let templateStrand = [];\r\n let userStrand = [];\r\n let currentIndex = 0;\r\n let completed = false;\r\n let feedback = null;\r\n let feedbackTimeout;\r\n\r\n const feedbackDiv = getElement('pairingFeedback');\r\n const btnA = getElement('btnA'); const btnT = getElement('btnT'); const btnC = getElement('btnC'); const btnG = getElement('btnG');\r\n const resetBtn = getElement('resetPairingBtn');\r\n\r\n function generateTemplate() {\r\n templateStrand = []; for (let i=0; i<6; i++) templateStrand.push(bases[Math.floor(Math.random()*4)]);\r\n userStrand = []; currentIndex = 0; completed = false; feedback = null; updateFeedback(); drawCanvas();\r\n }\r\n\r\n function handleBaseClick(base) {\r\n if (completed) return;\r\n const target = templateStrand[currentIndex]; const correct = pairs[target];\r\n if (base === correct) {\r\n userStrand.push(base); feedback = 'correct';\r\n if (currentIndex === templateStrand.length-1) completed = true; else currentIndex++;\r\n } else feedback = 'wrong';\r\n updateFeedback(); drawCanvas();\r\n if (feedback) { clearTimeout(feedbackTimeout); feedbackTimeout = setTimeout(() => { feedback = null; updateFeedback(); drawCanvas(); }, 500); }\r\n }\r\n\r\n function updateFeedback() {\r\n if (completed) feedbackDiv.innerHTML = '<div class=\"flex items-center gap-2 text-green-400 font-bold bg-green-900\/20 px-4 py-2 rounded animate-pulse\"><span>\u2713<\/span><span>\u0623\u062d\u0633\u0646\u062a! \u0627\u0644\u0633\u0644\u0633\u0644\u0629 \u0645\u0643\u062a\u0645\u0644\u0629<\/span><\/div>';\r\n else if (feedback === 'wrong') feedbackDiv.innerHTML = '<p class=\"text-red-400 font-bold animate-bounce\">\u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649! \u062a\u0630\u0643\u0631 (A \u0645\u0639 T) \u0648 (C \u0645\u0639 G)<\/p>';\r\n else feedbackDiv.innerHTML = '<p class=\"text-slate-400 text-l\">\u0623\u0643\u0645\u0644 \u0627\u0644\u0633\u0644\u0633\u0644\u0629 \u0628\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0635\u062d\u064a\u062d\u0629<\/p>';\r\n }\r\n\r\n function drawCanvas() {\r\n ctx.clearRect(0,0,200,320); const itemHeight = 40; const startY = 20; const centerX = 100;\r\n templateStrand.forEach((base, idx) => {\r\n const y = startY + idx*50;\r\n ctx.fillStyle = '#a855f7'; ctx.fillRect(centerX-80, y, 10, itemHeight);\r\n ctx.strokeStyle = '#a855f7'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(centerX-70, y+itemHeight\/2); ctx.lineTo(centerX-40, y+itemHeight\/2); ctx.stroke();\r\n ctx.fillStyle = colors[base]; ctx.beginPath(); ctx.moveTo(centerX-40, y); ctx.lineTo(centerX, y);\r\n if (base==='A'||base==='G') ctx.lineTo(centerX-10, y+itemHeight\/2); else ctx.lineTo(centerX, y+itemHeight\/2);\r\n ctx.lineTo(centerX, y+itemHeight); ctx.lineTo(centerX-40, y+itemHeight); ctx.fill();\r\n ctx.fillStyle = '#fff'; ctx.font = 'bold 16px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\r\n ctx.fillText(base, centerX-25, y+itemHeight\/2);\r\n });\r\n userStrand.forEach((base, idx) => {\r\n const y = startY + idx*50;\r\n ctx.fillStyle = '#38bdf8'; ctx.fillRect(centerX+70, y, 10, itemHeight);\r\n ctx.strokeStyle = '#38bdf8'; ctx.beginPath(); ctx.moveTo(centerX+40, y+itemHeight\/2); ctx.lineTo(centerX+70, y+itemHeight\/2); ctx.stroke();\r\n ctx.fillStyle = colors[base]; ctx.beginPath(); ctx.moveTo(centerX+40, y); ctx.lineTo(centerX, y); ctx.lineTo(centerX, y+itemHeight); ctx.lineTo(centerX+40, y+itemHeight); ctx.fill();\r\n ctx.fillStyle = '#fff'; ctx.fillText(base, centerX+25, y+itemHeight\/2);\r\n const target = templateStrand[idx]; const doubleBond = (target==='A'||target==='T');\r\n ctx.strokeStyle = '#9ca3af'; ctx.lineWidth = 2; ctx.setLineDash([2,2]);\r\n if (doubleBond) {\r\n ctx.beginPath(); ctx.moveTo(centerX-5, y+itemHeight\/3); ctx.lineTo(centerX+5, y+itemHeight\/3); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(centerX-5, y+2*itemHeight\/3); ctx.lineTo(centerX+5, y+2*itemHeight\/3); ctx.stroke();\r\n } else {\r\n ctx.beginPath(); ctx.moveTo(centerX-5, y+itemHeight\/4); ctx.lineTo(centerX+5, y+itemHeight\/4); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(centerX-5, y+itemHeight\/2); ctx.lineTo(centerX+5, y+itemHeight\/2); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(centerX-5, y+3*itemHeight\/4); ctx.lineTo(centerX+5, y+3*itemHeight\/4); ctx.stroke();\r\n }\r\n ctx.setLineDash([]);\r\n });\r\n if (!completed) {\r\n const y = startY + currentIndex*50;\r\n ctx.strokeStyle = feedback==='wrong' ? '#ef4444' : '#facc15'; ctx.lineWidth = 3;\r\n ctx.strokeRect(centerX-85, y-5, 80, itemHeight+10);\r\n }\r\n }\r\n\r\n btnA.addEventListener('click', () => handleBaseClick('A')); btnT.addEventListener('click', () => handleBaseClick('T'));\r\n btnC.addEventListener('click', () => handleBaseClick('C')); btnG.addEventListener('click', () => handleBaseClick('G'));\r\n resetBtn.addEventListener('click', generateTemplate);\r\n generateTemplate();\r\n })();\r\n\r\n \/\/ ==================== 4. DNA Replication Simulation ====================\r\n (function() {\r\n const canvas = getElement('dnaReplicationCanvas'); const ctx = canvas.getContext('2d');\r\n const width = 600, height = 300; const bases = ['A','T','C','G']; const pairs = {A:'T', T:'A', C:'G', G:'C'}; const colors = {A:'#f87171', T:'#facc15', C:'#60a5fa', G:'#34d399'};\r\n let basePairs = []; let progress = 0; let isPlaying = false; let animationFrame; const startX = 50; const pairWidth = 30; const gapY = 80;\r\n function initDNA() { basePairs = []; for (let i=0; i<18; i++) { const left = bases[Math.floor(Math.random()*4)]; basePairs.push({ left, right: pairs[left], x: startX + i*pairWidth }); } }\r\n initDNA();\r\n\r\n function drawReplication() {\r\n ctx.clearRect(0,0,width,height); const splitIndex = (progress\/100)*basePairs.length;\r\n basePairs.forEach((pair, idx) => {\r\n const isSplit = idx < splitIndex; let topY = height\/2, bottomY = height\/2; let opacityNew = 0;\r\n if (isSplit) { topY = height\/2 - gapY; bottomY = height\/2 + gapY; opacityNew = 1; }\r\n else if (idx < splitIndex+2 && idx > splitIndex-1) {\r\n const separation = Math.max(0, (splitIndex - idx)\/3); const actualGap = Math.min(1, separation) * gapY;\r\n topY = height\/2 - actualGap; bottomY = height\/2 + actualGap; if (separation > 0.5) opacityNew = (separation-0.5)*2;\r\n }\r\n ctx.lineWidth = 3; ctx.strokeStyle = '#a855f7';\r\n if (idx > 0) {\r\n let prevTopY = height\/2, prevBottomY = height\/2; const prevIdx = idx-1; const isPrevSplit = prevIdx < splitIndex;\r\n if (isPrevSplit) { prevTopY = height\/2 - gapY; prevBottomY = height\/2 + gapY; }\r\n else if (prevIdx < splitIndex+2) { const sep = Math.max(0, (splitIndex - prevIdx)\/3); const g = Math.min(1, sep)*gapY; prevTopY = height\/2 - g; prevBottomY = height\/2 + g; }\r\n ctx.beginPath(); ctx.moveTo(basePairs[prevIdx].x, prevTopY-15); ctx.lineTo(pair.x, topY-15); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(basePairs[prevIdx].x, prevBottomY+15); ctx.lineTo(pair.x, bottomY+15); ctx.stroke();\r\n }\r\n function drawBase(x, y, char, color, down) { ctx.fillStyle = color; const w=12, h=20; ctx.beginPath(); if (down) ctx.rect(x-w\/2, y-h, w, h); else ctx.rect(x-w\/2, y, w, h); ctx.fill(); ctx.fillStyle = '#fff'; ctx.font = 'bold 10px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(char, x, down ? y-h\/2 : y+h\/2); }\r\n drawBase(pair.x, topY-15, pair.left, colors[pair.left], true); drawBase(pair.x, bottomY+15, pair.right, colors[pair.right], false);\r\n if (!isSplit && Math.abs(topY-bottomY) < 10) { ctx.strokeStyle = '#9ca3af'; ctx.setLineDash([2,2]); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(pair.x, topY-5); ctx.lineTo(pair.x, bottomY+5); ctx.stroke(); ctx.setLineDash([]); }\r\n if (opacityNew > 0) {\r\n ctx.globalAlpha = opacityNew; const newTop = pairs[pair.left]; const newBottom = pairs[pair.right];\r\n drawBase(pair.x, topY+15, newTop, colors[newTop], false); drawBase(pair.x, bottomY-15, newBottom, colors[newBottom], true);\r\n ctx.strokeStyle = '#38bdf8';\r\n if (idx > 0 && (idx-1) < splitIndex) {\r\n ctx.beginPath(); ctx.moveTo(basePairs[idx-1].x, height\/2 - gapY + 15); ctx.lineTo(pair.x, topY+15); ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(basePairs[idx-1].x, height\/2 + gapY - 15); ctx.lineTo(pair.x, bottomY-15); ctx.stroke();\r\n }\r\n ctx.globalAlpha = 1;\r\n }\r\n });\r\n const wedgeX = startX + splitIndex * pairWidth;\r\n ctx.fillStyle = '#fbbf24'; ctx.beginPath(); ctx.moveTo(wedgeX+10, height\/2); ctx.lineTo(wedgeX-20, height\/2-20); ctx.lineTo(wedgeX-20, height\/2+20); ctx.fill();\r\n ctx.fillStyle = '#000'; ctx.font = '10px Cairo'; ctx.fillText('\u0625\u0646\u0632\u064a\u0645 \u0641\u0643 \u0627\u0644\u0627\u0644\u062a\u0648\u0627\u0621', wedgeX-50, height\/2+35);\r\n if (progress>5 && progress<95) { ctx.fillStyle = '#60a5fa'; ctx.globalAlpha = 0.7; ctx.beginPath(); ctx.arc(wedgeX-40, height\/2-gapY, 20, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(wedgeX-40, height\/2+gapY, 20, 0, Math.PI*2); ctx.fill(); ctx.globalAlpha = 1; ctx.fillStyle = '#fff'; ctx.font = '10px Cairo'; ctx.textAlign = 'center'; ctx.fillText('\u0628\u0644\u0645\u0631\u0629 DNA', wedgeX-40, height\/2-gapY-25); }\r\n if (isPlaying && progress < 100) { progress = Math.min(100, progress + 0.5); animationFrame = requestAnimationFrame(drawReplication); }\r\n }\r\n const playBtn = getElement('playReplicationBtn'); const pauseBtn = getElement('pauseReplicationBtn'); const resetBtn = getElement('resetReplicationBtn');\r\n playBtn.addEventListener('click', () => { isPlaying = true; playBtn.disabled = true; pauseBtn.disabled = false; drawReplication(); });\r\n pauseBtn.addEventListener('click', () => { isPlaying = false; playBtn.disabled = false; pauseBtn.disabled = true; });\r\n resetBtn.addEventListener('click', () => { isPlaying = false; progress = 0; initDNA(); playBtn.disabled = false; pauseBtn.disabled = true; drawReplication(); });\r\n drawReplication();\r\n })();\r\n\r\n \/\/ ==================== 5. Cell Division Simulation (\u0645\u062d\u0633\u0651\u0646) ====================\r\n (function() {\r\n const canvas = getElement('cellDivisionCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const width = 500, height = 300;\r\n const phaseNameEl = getElement('phaseName');\r\n const phaseDescEl = getElement('phaseDesc');\r\n const prevBtn = getElement('prevPhaseBtn');\r\n const nextBtn = getElement('nextPhaseBtn');\r\n const btnMitosis = getElement('btnMitosis');\r\n const btnMeiosis = getElement('btnMeiosis');\r\n const btnBinary = getElement('btnBinary');\r\n const meiosisNote = getElement('meiosisNote');\r\n const legend = getElement('chromosomeLegend');\r\n\r\n let type = 'mitosis'; \/\/ mitosis, meiosis, binary\r\n let phase = 0;\r\n let progress = 0; \/\/ \u0644\u0644\u0627\u0646\u062a\u0642\u0627\u0644\u0627\u062a \u0627\u0644\u0633\u0644\u0633\u0629 (0-1)\r\n let animationFrame;\r\n\r\n \/\/ \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0623\u0637\u0648\u0627\u0631\r\n const phaseInfo = {\r\n mitosis: [\r\n { name: '\u0627\u0644\u0637\u0648\u0631 \u0627\u0644\u0628\u064a\u0646\u064a (Interphase)', desc: '\u062a\u062a\u0636\u0627\u0639\u0641 \u0627\u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0648\u0631\u0627\u062b\u064a\u0629 (DNA) \u0648\u062a\u0633\u062a\u0639\u062f \u0627\u0644\u062e\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0642\u0633\u0627\u0645.' },\r\n { name: '\u0627\u0644\u0637\u0648\u0631 \u0627\u0644\u062a\u0645\u0647\u064a\u062f\u064a (Prophase)', desc: '\u062a\u062a\u0643\u062b\u0641 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0648\u062a\u0638\u0647\u0631 \u0628\u0648\u0636\u0648\u062d\u060c \u0648\u064a\u062a\u0644\u0627\u0634\u0649 \u0627\u0644\u063a\u0644\u0627\u0641 \u0627\u0644\u0646\u0648\u0648\u064a.' },\r\n { name: '\u0627\u0644\u0637\u0648\u0631 \u0627\u0644\u0627\u0633\u062a\u0648\u0627\u0626\u064a (Metaphase)', desc: '\u062a\u0635\u0637\u0641 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0641\u0631\u0627\u062f\u0649 \u0641\u064a \u0645\u0646\u062a\u0635\u0641 \u0627\u0644\u062e\u0644\u064a\u0629 (\u062e\u0637 \u0627\u0644\u0627\u0633\u062a\u0648\u0627\u0621).' },\r\n { name: '\u0627\u0644\u0637\u0648\u0631 \u0627\u0644\u0627\u0646\u0641\u0635\u0627\u0644\u064a (Anaphase)', desc: '\u062a\u0646\u0641\u0635\u0644 \u0627\u0644\u0643\u0631\u0648\u0645\u0627\u062a\u064a\u062f\u0627\u062a \u0627\u0644\u0634\u0642\u064a\u0642\u0629 \u0648\u062a\u062a\u062d\u0631\u0643 \u0646\u062d\u0648 \u0623\u0642\u0637\u0627\u0628 \u0627\u0644\u062e\u0644\u064a\u0629.' },\r\n { name: '\u0627\u0644\u0637\u0648\u0631 \u0627\u0644\u0646\u0647\u0627\u0626\u064a (Telophase)', desc: '\u064a\u0646\u0642\u0633\u0645 \u0627\u0644\u0633\u064a\u062a\u0648\u0628\u0644\u0627\u0632\u0645 \u0648\u062a\u062a\u0643\u0648\u0646 \u062e\u0644\u064a\u062a\u0627\u0646 \u062c\u062f\u064a\u062f\u062a\u0627\u0646 \u0645\u062a\u0637\u0627\u0628\u0642\u062a\u0627\u0646.' }\r\n ],\r\n meiosis: [\r\n { name: '\u0627\u0644\u0637\u0648\u0631 \u0627\u0644\u0628\u064a\u0646\u064a', desc: '\u062a\u0636\u0627\u0639\u0641 DNA (2n).' },\r\n { name: '\u0627\u0644\u062a\u0645\u0647\u064a\u062f\u064a \u0627\u0644\u0623\u0648\u0644', desc: '\u062a\u0642\u062a\u0631\u0628 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u062a\u0645\u0627\u062b\u0644\u0629 \u0645\u0646 \u0628\u0639\u0636\u0647\u0627 (\u062a\u0634\u0627\u0628\u0643) \u0648\u064a\u062d\u062f\u062b \u0627\u0644\u0639\u0628\u0648\u0631.' },\r\n { name: '\u0627\u0644\u0627\u0633\u062a\u0648\u0627\u0626\u064a \u0627\u0644\u0623\u0648\u0644', desc: '\u062a\u0635\u0637\u0641 \u0623\u0632\u0648\u0627\u062c \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u062a\u0645\u0627\u062b\u0644\u0629 \u0641\u064a \u0648\u0633\u0637 \u0627\u0644\u062e\u0644\u064a\u0629.' },\r\n { name: '\u0627\u0644\u0627\u0646\u0641\u0635\u0627\u0644\u064a \u0627\u0644\u0623\u0648\u0644', desc: '\u062a\u0646\u0641\u0635\u0644 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u062a\u0645\u0627\u062b\u0644\u0629 (\u0648\u0644\u064a\u0633 \u0627\u0644\u0643\u0631\u0648\u0645\u0627\u062a\u064a\u062f\u0627\u062a) \u0648\u062a\u0628\u062a\u0639\u062f.' },\r\n { name: '\u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0627\u0644\u0623\u0648\u0644', desc: '\u062a\u0646\u0642\u0633\u0645 \u0627\u0644\u062e\u0644\u064a\u0629 \u0644\u062a\u0639\u0637\u064a \u062e\u0644\u064a\u062a\u064a\u0646\u060c \u0643\u0644 \u0645\u0646\u0647\u0645\u0627 \u062a\u062d\u062a\u0648\u064a \u0646\u0635\u0641 \u0639\u062f\u062f \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a (1n).' },\r\n { name: '\u0627\u0644\u062a\u0645\u0647\u064a\u062f\u064a \u0627\u0644\u062b\u0627\u0646\u064a', desc: '\u062a\u0638\u0647\u0631 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u062a\u064a\u0646 \u0627\u0644\u062c\u062f\u064a\u062f\u062a\u064a\u0646\u060c \u0648\u064a\u062a\u0644\u0627\u0634\u0649 \u0627\u0644\u063a\u0644\u0627\u0641 \u0627\u0644\u0646\u0648\u0648\u064a.' },\r\n { name: '\u0627\u0644\u0627\u0633\u062a\u0648\u0627\u0626\u064a \u0627\u0644\u062b\u0627\u0646\u064a', desc: '\u062a\u0635\u0637\u0641 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0641\u0631\u0627\u062f\u0649 \u0641\u064a \u0648\u0633\u0637 \u0643\u0644 \u062e\u0644\u064a\u0629.' },\r\n { name: '\u0627\u0644\u0627\u0646\u0641\u0635\u0627\u0644\u064a \u0627\u0644\u062b\u0627\u0646\u064a', desc: '\u062a\u0646\u0641\u0635\u0644 \u0627\u0644\u0643\u0631\u0648\u0645\u0627\u062a\u064a\u062f\u0627\u062a \u0627\u0644\u0634\u0642\u064a\u0642\u0629 \u0641\u064a \u0643\u0644 \u062e\u0644\u064a\u0629 \u0648\u062a\u062a\u062d\u0631\u0643 \u0646\u062d\u0648 \u0627\u0644\u0623\u0642\u0637\u0627\u0628.' },\r\n { name: '\u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0627\u0644\u062b\u0627\u0646\u064a', desc: '\u062a\u0646\u0642\u0633\u0645 \u0643\u0644 \u062e\u0644\u064a\u0629\u060c \u0641\u064a\u0646\u062a\u062c \u0627\u0644\u0645\u062c\u0645\u0648\u0639 4 \u062e\u0644\u0627\u064a\u0627 \u0623\u062d\u0627\u062f\u064a\u0629 \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u064a\u0629.' }\r\n ],\r\n binary: [\r\n { name: '\u062a\u0636\u0627\u0639\u0641 DNA', desc: '\u064a\u0628\u062f\u0623 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 \u0627\u0644\u062d\u0644\u0642\u064a \u0627\u0644\u0628\u0643\u062a\u064a\u0631\u064a \u0628\u0646\u0633\u062e \u0646\u0641\u0633\u0647.' },\r\n { name: '\u0627\u0644\u0627\u0633\u062a\u0637\u0627\u0644\u0629', desc: '\u062a\u0632\u062f\u0627\u062f \u0627\u0644\u062e\u0644\u064a\u0629 \u0641\u064a \u0627\u0644\u062d\u062c\u0645 (\u062a\u0633\u062a\u0637\u064a\u0644) \u0648\u064a\u062a\u062d\u0631\u0643 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u0646 \u0646\u062d\u0648 \u0637\u0631\u0641\u064a \u0627\u0644\u062e\u0644\u064a\u0629.' },\r\n { name: '\u062a\u0643\u0648\u0646 \u0627\u0644\u062d\u0627\u062c\u0632', desc: '\u064a\u0628\u062f\u0623 \u0627\u0644\u063a\u0634\u0627\u0621 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u064a \u0648\u0627\u0644\u062c\u062f\u0627\u0631 \u0627\u0644\u062e\u0644\u0648\u064a \u0628\u0627\u0644\u0627\u0646\u063a\u0645\u0627\u062f \u0646\u062d\u0648 \u0627\u0644\u062f\u0627\u062e\u0644 (\u062a\u062e\u0635\u0631).' },\r\n { name: '\u0627\u0644\u0627\u0646\u0641\u0635\u0627\u0644', desc: '\u064a\u0643\u062a\u0645\u0644 \u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0633\u064a\u062a\u0648\u0628\u0644\u0627\u0632\u0645 \u0648\u062a\u062a\u0643\u0648\u0646 \u062e\u0644\u064a\u062a\u0627\u0646 \u0628\u0643\u062a\u064a\u0631\u064a\u062a\u0627\u0646 \u062c\u062f\u064a\u062f\u062a\u0627\u0646 \u0645\u062a\u0637\u0627\u0628\u0642\u062a\u0627\u0646.' }\r\n ]\r\n };\r\n\r\n function updateUI() {\r\n const info = phaseInfo[type][phase] || { name: '', desc: '' };\r\n phaseNameEl.textContent = info.name;\r\n phaseDescEl.textContent = info.desc;\r\n if (type === 'meiosis' && phase === 4) {\r\n meiosisNote.innerHTML = '* \u0627\u0636\u063a\u0637 \u0627\u0644\u062a\u0627\u0644\u064a \u0644\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0625\u0644\u0649 \u0627\u0644\u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629 \u0645\u0646 \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u0646\u0635\u0641.';\r\n } else {\r\n meiosisNote.innerHTML = '';\r\n }\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0623\u0646\u0645\u0627\u0637\r\n [btnMitosis, btnMeiosis, btnBinary].forEach(btn => btn.classList.remove('btn-primary', 'btn-secondary'));\r\n if (type === 'mitosis') { btnMitosis.classList.add('btn-primary'); btnMeiosis.classList.add('btn-secondary'); btnBinary.classList.add('btn-secondary'); }\r\n else if (type === 'meiosis') { btnMeiosis.classList.add('btn-primary'); btnMitosis.classList.add('btn-secondary'); btnBinary.classList.add('btn-secondary'); }\r\n else if (type === 'binary') { btnBinary.classList.add('btn-primary'); btnMitosis.classList.add('btn-secondary'); btnMeiosis.classList.add('btn-secondary'); }\r\n legend.style.display = (type === 'binary') ? 'none' : 'flex';\r\n }\r\n\r\n \/\/ \u062f\u0627\u0644\u0629 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\r\n function draw() {\r\n ctx.clearRect(0, 0, width, height);\r\n progress = Math.min(1, progress + 0.02); \/\/ \u062a\u0642\u062f\u0645 \u062a\u0644\u0642\u0627\u0626\u064a \u0644\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629\r\n\r\n if (type === 'mitosis') drawMitosis();\r\n else if (type === 'meiosis') drawMeiosis();\r\n else if (type === 'binary') drawBinary();\r\n\r\n updateUI();\r\n animationFrame = requestAnimationFrame(draw);\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u062e\u0644\u064a\u0629 (\u062f\u0627\u0626\u0631\u0629)\r\n function drawCell(x, y, r, fillStyle = '#1e293b', strokeStyle = '#38bdf8') {\r\n ctx.beginPath();\r\n ctx.arc(x, y, r, 0, Math.PI * 2);\r\n ctx.fillStyle = fillStyle;\r\n ctx.fill();\r\n ctx.strokeStyle = strokeStyle;\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 (X \u0623\u0648 ||) \u0641\u064a \u0645\u0648\u0636\u0639 \u0645\u0639\u064a\u0646\r\n function drawChromosome(x, y, color, separated = false, scale = 1) {\r\n ctx.save();\r\n ctx.translate(x, y);\r\n ctx.scale(scale, scale);\r\n ctx.strokeStyle = color;\r\n ctx.lineWidth = 4;\r\n ctx.lineCap = 'round';\r\n if (!separated) {\r\n \/\/ \u0634\u0643\u0644 X (\u0643\u0631\u0648\u0645\u0627\u062a\u064a\u062f\u0627\u062a \u0634\u0642\u064a\u0642\u0629 \u0645\u062a\u0635\u0644\u0629)\r\n ctx.beginPath();\r\n ctx.moveTo(-8, -12); ctx.lineTo(8, 12);\r\n ctx.moveTo(8, -12); ctx.lineTo(-8, 12);\r\n ctx.stroke();\r\n } else {\r\n \/\/ \u0634\u0643\u0644\u064a\u0646 \u0645\u0646\u0641\u0635\u0644\u064a\u0646 (\u0623\u0648 \u0643\u0631\u0648\u0645\u0627\u062a\u064a\u062f\u0627\u062a \u0645\u0646\u0641\u0635\u0644\u0629)\r\n ctx.beginPath();\r\n ctx.moveTo(-8, -12); ctx.lineTo(0, 0); ctx.lineTo(-8, 12);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.moveTo(8, -12); ctx.lineTo(0, 0); ctx.lineTo(8, 12);\r\n ctx.stroke();\r\n }\r\n ctx.restore();\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u0632\u0648\u062c \u0645\u0646 \u0627\u0644\u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u062a\u0645\u0627\u062b\u0644\u0629 (\u0644\u0644\u0645\u0646\u0635\u0641)\r\n function drawHomologPair(x, y, color1, color2, separated = false) {\r\n drawChromosome(x-10, y-5, color1, separated, 0.9);\r\n drawChromosome(x+10, y+5, color2, separated, 0.9);\r\n }\r\n\r\n \/\/ === \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u062a\u0633\u0627\u0648\u064a ===\r\n function drawMitosis() {\r\n const cx = width\/2, cy = height\/2;\r\n if (phase === 0) { \/\/ Interphase\r\n drawCell(cx, cy, 70);\r\n \/\/ \u0643\u0631\u0648\u0645\u0627\u062a\u064a\u0646 \u0645\u0646\u062a\u0634\u0631\r\n ctx.strokeStyle = '#a855f7'; ctx.lineWidth = 1;\r\n for (let i=0; i<10; i++) {\r\n let x = cx + (Math.random()-0.5)*50; let y = cy + (Math.random()-0.5)*50;\r\n ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x+10, y+8); ctx.stroke();\r\n }\r\n } else if (phase === 1) { \/\/ Prophase\r\n drawCell(cx, cy, 70);\r\n drawChromosome(cx-20, cy-10, '#f87171', false, 1);\r\n drawChromosome(cx+20, cy+10, '#60a5fa', false, 1);\r\n drawChromosome(cx-15, cy+15, '#f87171', false, 1);\r\n drawChromosome(cx+15, cy-15, '#60a5fa', false, 1);\r\n } else if (phase === 2) { \/\/ Metaphase\r\n drawCell(cx, cy, 70);\r\n \/\/ \u062e\u0637 \u0627\u0633\u062a\u0648\u0627\u0621 \u0648\u0647\u0645\u064a\r\n ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.lineWidth = 1; ctx.setLineDash([5,5]);\r\n ctx.beginPath(); ctx.moveTo(cx-70, cy); ctx.lineTo(cx+70, cy); ctx.stroke(); ctx.setLineDash([]);\r\n drawChromosome(cx-30, cy, '#f87171', false, 1);\r\n drawChromosome(cx-10, cy, '#60a5fa', false, 1);\r\n drawChromosome(cx+10, cy, '#f87171', false, 1);\r\n drawChromosome(cx+30, cy, '#60a5fa', false, 1);\r\n } else if (phase === 3) { \/\/ Anaphase\r\n drawCell(cx, cy, 70);\r\n \/\/ \u0627\u0646\u0641\u0635\u0627\u0644 \u0627\u0644\u0643\u0631\u0648\u0645\u0627\u062a\u064a\u062f\u0627\u062a\r\n drawChromosome(cx-40, cy-10, '#f87171', true, 1);\r\n drawChromosome(cx+40, cy+10, '#f87171', true, 1);\r\n drawChromosome(cx-40, cy+10, '#60a5fa', true, 1);\r\n drawChromosome(cx+40, cy-10, '#60a5fa', true, 1);\r\n } else if (phase === 4) { \/\/ Telophase\r\n \/\/ \u062e\u0644\u064a\u062a\u0627\u0646\r\n drawCell(cx-60, cy, 35);\r\n drawCell(cx+60, cy, 35);\r\n drawChromosome(cx-60, cy-5, '#f87171', false, 0.7);\r\n drawChromosome(cx-60, cy+5, '#60a5fa', false, 0.7);\r\n drawChromosome(cx+60, cy-5, '#f87171', false, 0.7);\r\n drawChromosome(cx+60, cy+5, '#60a5fa', false, 0.7);\r\n }\r\n }\r\n\r\n \/\/ === \u0627\u0644\u0627\u0646\u0642\u0633\u0627\u0645 \u0627\u0644\u0645\u0646\u0635\u0641 ===\r\n function drawMeiosis() {\r\n const cx = width\/2, cy = height\/2;\r\n if (phase === 0) { \/\/ Interphase\r\n drawCell(cx, cy, 70);\r\n ctx.strokeStyle = '#a855f7'; ctx.lineWidth = 1;\r\n for (let i=0; i<10; i++) { let x = cx + (Math.random()-0.5)*50; let y = cy + (Math.random()-0.5)*50; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x+10, y+8); ctx.stroke(); }\r\n } else if (phase === 1) { \/\/ Prophase I (\u062a\u0634\u0627\u0628\u0643)\r\n drawCell(cx, cy, 70);\r\n drawHomologPair(cx-15, cy-10, '#f87171', '#60a5fa', false);\r\n drawHomologPair(cx+15, cy+10, '#f87171', '#60a5fa', false);\r\n } else if (phase === 2) { \/\/ Metaphase I\r\n drawCell(cx, cy, 70);\r\n ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.setLineDash([5,5]); ctx.beginPath(); ctx.moveTo(cx-70, cy); ctx.lineTo(cx+70, cy); ctx.stroke(); ctx.setLineDash([]);\r\n drawHomologPair(cx-20, cy-5, '#f87171', '#60a5fa', false);\r\n drawHomologPair(cx+20, cy+5, '#f87171', '#60a5fa', false);\r\n } else if (phase === 3) { \/\/ Anaphase I\r\n drawCell(cx, cy, 70);\r\n drawChromosome(cx-40, cy-10, '#f87171', false, 1);\r\n drawChromosome(cx+40, cy+10, '#60a5fa', false, 1);\r\n drawChromosome(cx-40, cy+10, '#f87171', false, 1);\r\n drawChromosome(cx+40, cy-10, '#60a5fa', false, 1);\r\n } else if (phase === 4) { \/\/ Telophase I (\u062e\u0644\u064a\u062a\u0627\u0646)\r\n drawCell(cx-60, cy-10, 35); drawCell(cx+60, cy+10, 35);\r\n drawChromosome(cx-60, cy-15, '#f87171', false, 0.7);\r\n drawChromosome(cx-60, cy-5, '#60a5fa', false, 0.7);\r\n drawChromosome(cx+60, cy+5, '#f87171', false, 0.7);\r\n drawChromosome(cx+60, cy+15, '#60a5fa', false, 0.7);\r\n } else if (phase === 5) { \/\/ Prophase II\r\n drawCell(cx-60, cy-10, 35); drawCell(cx+60, cy+10, 35);\r\n drawChromosome(cx-60, cy-15, '#f87171', false, 0.7);\r\n drawChromosome(cx-60, cy-5, '#60a5fa', false, 0.7);\r\n drawChromosome(cx+60, cy+5, '#f87171', false, 0.7);\r\n drawChromosome(cx+60, cy+15, '#60a5fa', false, 0.7);\r\n } else if (phase === 6) { \/\/ Metaphase II\r\n drawCell(cx-60, cy-10, 35); drawCell(cx+60, cy+10, 35);\r\n drawChromosome(cx-60, cy-15, '#f87171', false, 0.7);\r\n drawChromosome(cx-60, cy-5, '#60a5fa', false, 0.7);\r\n drawChromosome(cx+60, cy+5, '#f87171', false, 0.7);\r\n drawChromosome(cx+60, cy+15, '#60a5fa', false, 0.7);\r\n } else if (phase === 7) { \/\/ Anaphase II\r\n drawCell(cx-60, cy-10, 35); drawCell(cx+60, cy+10, 35);\r\n drawChromosome(cx-70, cy-15, '#f87171', true, 0.7);\r\n drawChromosome(cx-50, cy-15, '#f87171', true, 0.7);\r\n drawChromosome(cx-70, cy-5, '#60a5fa', true, 0.7);\r\n drawChromosome(cx-50, cy-5, '#60a5fa', true, 0.7);\r\n drawChromosome(cx+50, cy+5, '#f87171', true, 0.7);\r\n drawChromosome(cx+70, cy+5, '#f87171', true, 0.7);\r\n drawChromosome(cx+50, cy+15, '#60a5fa', true, 0.7);\r\n drawChromosome(cx+70, cy+15, '#60a5fa', true, 0.7);\r\n } else if (phase === 8) { \/\/ Telophase II (4 \u062e\u0644\u0627\u064a\u0627)\r\n drawCell(cx-90, cy-20, 20); drawCell(cx-30, cy-20, 20); drawCell(cx+30, cy+20, 20); drawCell(cx+90, cy+20, 20);\r\n drawChromosome(cx-90, cy-20, '#f87171', false, 0.5);\r\n drawChromosome(cx-30, cy-20, '#60a5fa', false, 0.5);\r\n drawChromosome(cx+30, cy+20, '#f87171', false, 0.5);\r\n drawChromosome(cx+90, cy+20, '#60a5fa', false, 0.5);\r\n }\r\n }\r\n\r\n \/\/ === \u0627\u0644\u0627\u0646\u0634\u0637\u0627\u0631 \u0627\u0644\u062b\u0646\u0627\u0626\u064a ===\r\n function drawBinary() {\r\n const cx = width\/2, cy = height\/2;\r\n const drawBacterium = (x, y, w, h) => {\r\n ctx.beginPath();\r\n ctx.roundRect(x-w\/2, y-h\/2, w, h, h\/2);\r\n ctx.fillStyle = '#86efac';\r\n ctx.fill();\r\n ctx.strokeStyle = '#166534';\r\n ctx.lineWidth = 3;\r\n ctx.stroke();\r\n };\r\n \/\/ \u0643\u0631\u0648\u0645\u0648\u0633\u0648\u0645 \u062f\u0627\u0626\u0631\u064a \u0645\u0628\u0633\u0637\r\n const drawNucleoid = (x, y) => {\r\n ctx.strokeStyle = '#ef4444';\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.arc(x, y, 10, 0, Math.PI*2);\r\n ctx.stroke();\r\n ctx.beginPath();\r\n ctx.arc(x-3, y-2, 3, 0, Math.PI*2); ctx.stroke();\r\n ctx.beginPath();\r\n ctx.arc(x+4, y+3, 3, 0, Math.PI*2); ctx.stroke();\r\n };\r\n if (phase === 0) {\r\n drawBacterium(cx, cy, 120, 60);\r\n drawNucleoid(cx, cy);\r\n } else if (phase === 1) {\r\n drawBacterium(cx, cy, 160, 60);\r\n drawNucleoid(cx-20, cy);\r\n drawNucleoid(cx+20, cy);\r\n } else if (phase === 2) {\r\n drawBacterium(cx, cy-5, 180, 60);\r\n drawNucleoid(cx-30, cy-5);\r\n drawNucleoid(cx+30, cy-5);\r\n \/\/ \u062d\u0627\u062c\u0632\r\n ctx.strokeStyle = '#166534'; ctx.lineWidth = 2; ctx.setLineDash([3,3]);\r\n ctx.beginPath(); ctx.moveTo(cx-40, cy+15); ctx.lineTo(cx+40, cy+15); ctx.stroke(); ctx.setLineDash([]);\r\n } else if (phase === 3) {\r\n drawBacterium(cx-50, cy, 100, 50);\r\n drawBacterium(cx+50, cy, 100, 50);\r\n drawNucleoid(cx-50, cy);\r\n drawNucleoid(cx+50, cy);\r\n }\r\n }\r\n\r\n \/\/ \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n function setType(newType) {\r\n type = newType; phase = 0; progress = 0; updateUI();\r\n }\r\n btnMitosis.addEventListener('click', () => setType('mitosis'));\r\n btnMeiosis.addEventListener('click', () => setType('meiosis'));\r\n btnBinary.addEventListener('click', () => setType('binary'));\r\n\r\n prevBtn.addEventListener('click', () => {\r\n if (phase > 0) { phase--; progress = 0; }\r\n });\r\n nextBtn.addEventListener('click', () => {\r\n const max = type==='mitosis' ? 4 : (type==='binary' ? 3 : 8);\r\n if (phase < max) { phase++; progress = 0; }\r\n });\r\n\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u062f\u0627\u0644\u0629 roundRect \u0644\u0644\u0633\u064a\u0627\u0642\r\n CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {\r\n if (w < 2 * r) r = w \/ 2; if (h < 2 * r) r = h \/ 2;\r\n this.moveTo(x + r, y); this.lineTo(x + w - r, y); this.quadraticCurveTo(x + w, y, x + w, y + r);\r\n this.lineTo(x + w, y + h - r); this.quadraticCurveTo(x + w, y + h, x + w - r, y + h);\r\n this.lineTo(x + r, y + h); this.quadraticCurveTo(x, y + h, x, y + h - r);\r\n this.lineTo(x, y + r); this.quadraticCurveTo(x, y, x + r, y);\r\n return this;\r\n };\r\n\r\n setType('mitosis');\r\n draw();\r\n })();\r\n })();\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-17432","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17432","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=17432"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17432\/revisions"}],"predecessor-version":[{"id":17433,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/17432\/revisions\/17433"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=17432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}