{"id":18388,"date":"2026-04-18T00:36:22","date_gmt":"2026-04-17T21:36:22","guid":{"rendered":"https:\/\/smartedujo.com\/?page_id=18388"},"modified":"2026-04-18T00:36:26","modified_gmt":"2026-04-17T21:36:26","slug":"%d8%a7%d9%84%d8%af%d8%b1%d8%b3-%d8%a7%d9%84%d8%ab%d8%a7%d9%86%d9%8a-%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-%d9%88%d8%b8%d9%88%d8%a7%d9%87%d8%b1-%d8%a8%d8%b5%d8%b1%d9%8a%d8%a9","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%86%d9%8a-%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-%d9%88%d8%b8%d9%88%d8%a7%d9%87%d8%b1-%d8%a8%d8%b5%d8%b1%d9%8a%d8%a9\/","title":{"rendered":"\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0638\u0648\u0627\u0647\u0631 \u0628\u0635\u0631\u064a\u0629"},"content":{"rendered":"\n
\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u062b\u0627\u0646\u064a: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0638\u0648\u0627\u0647\u0631 \u0628\u0635\u0631\u064a\u0629 - \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/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-container {\r\n margin: 2rem 0;\r\n padding: 1.5rem;\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 }\r\n canvas {\r\n border-radius: 0.5rem;\r\n background-color: rgba(15, 23, 42, 0.8);\r\n display: block;\r\n margin: 0 auto;\r\n }\r\n input[type=\"range\"] {\r\n -webkit-appearance: none;\r\n background: #1e293b;\r\n height: 4px;\r\n border-radius: 4px;\r\n }\r\n input[type=\"range\"]:focus {\r\n outline: none;\r\n }\r\n input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n background: #f59e0b;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .active-medium {\r\n background-color: #06b6d4 !important;\r\n border-color: #06b6d4 !important;\r\n color: white !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"content-container\">\r\n <!-- Header -->\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\u0646\u064a: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0638\u0648\u0627\u0647\u0631 \u0628\u0635\u0631\u064a\u0629<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u0645\u062a\u0648\u0633\u0637 - \u0627\u0644\u0635\u0641 \u0627\u0644\u062a\u0627\u0633\u0639<\/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\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0646\u064a__\u062a\u0637\u0628\u064a\u0642\u0627\u062a_\u0648\u0638\u0648\u0627\u0647\u0631_\u0628\u0635\u0631\u064a\u0629_audio.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\/04\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u062b\u0627\u0646\u064a__\u062a\u0637\u0628\u064a\u0642\u0627\u062a_\u0648\u0638\u0648\u0627\u0647\u0631_\u0628\u0635\u0631\u064a\u0629_audio.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\r\n\r\n <!-- \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0635\u0644\u064a (\u0628\u062f\u0648\u0646 \u0627\u0644\u0644\u0642\u0637\u0627\u062a \u0627\u0644\u062b\u0627\u0628\u062a\u0629) -->\r\n <div class=\"space-y-12 text-right\" dir=\"rtl\">\r\n <!-- \u0645\u0642\u062f\u0645\u0629 -->\r\n <section class=\"relative p-8 bg-gradient-to-br from-blue-900\/20 to-indigo-900\/40 rounded-3xl border border-blue-500\/20 shadow-2xl overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-32 h-32 bg-blue-500\/10 blur-3xl rounded-full -translate-x-1\/2 -translate-y-1\/2\"><\/div>\r\n <h2 class=\"text-3xl font-black text-white mb-6 flex items-center gap-3\">\r\n <span class=\"w-3 h-10 bg-blue-500 rounded-full\"><\/span>\r\n \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0638\u0648\u0627\u0647\u0631 \u0628\u0635\u0631\u064a\u0629\r\n <\/h2>\r\n <p class=\"text-slate-300 leading-relaxed text-lg\">\r\n \u0644\u0644\u0627\u0646\u0643\u0633\u0627\u0631 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0639\u062f\u064a\u062f\u0629 \u0641\u064a \u062d\u064a\u0627\u062a\u0646\u0627\u060c \u0648\u062a\u0646\u0634\u0623 \u0639\u0646\u0647 \u0638\u0648\u0627\u0647\u0631 \u0628\u0635\u0631\u064a\u0629 \u0645\u062a\u0646\u0648\u0639\u0629 \u0646\u0634\u0627\u0647\u062f\u0647\u0627 \u0641\u064a \u0627\u0644\u0637\u0628\u064a\u0639\u0629. \u0633\u0646\u062a\u0639\u0631\u0641 \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u062f\u0631\u0633 \u0639\u0644\u0649 \u0638\u0627\u0647\u0631\u0629 \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u060c \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a\u0647\u0627 \u0645\u062b\u0644 \u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629\u060c \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0638\u0648\u0627\u0647\u0631 \u0637\u0628\u064a\u0639\u064a\u0629 \u0645\u062b\u0644 \u0627\u0644\u0633\u0631\u0627\u0628 \u0648\u0642\u0648\u0633 \u0627\u0644\u0645\u0637\u0631.\r\n <\/p>\r\n <\/section>\r\n\r\n <!-- \u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a \u0648\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 -->\r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-cyan-500 rounded-full\"><\/span>\r\n \u0623\u0648\u0644\u0627\u064b: \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a \u0648\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629\r\n <\/h2>\r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-slate-700 space-y-8\">\r\n <div>\r\n <h3 class=\"text-cyan-400 font-bold text-lg mb-3\">1. \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 (Critical Angle - \u03b8_c):<\/h3>\r\n <p class=\"text-slate-300 leading-relaxed\">\r\n \u0647\u064a \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0633\u0642\u0648\u0637 \u0641\u064a \u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0623\u0643\u0628\u0631 \u0643\u062b\u0627\u0641\u0629 \u0636\u0648\u0626\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0642\u0627\u0628\u0644\u0647\u0627 \u0632\u0627\u0648\u064a\u0629 \u0627\u0646\u0643\u0633\u0627\u0631 \u0645\u0642\u062f\u0627\u0631\u0647\u0627 <span class=\"text-white font-bold\">90\u00b0<\/span> \u0641\u064a \u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0623\u0642\u0644 \u0643\u062b\u0627\u0641\u0629 \u0636\u0648\u0626\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-black\/40 p-6 rounded-2xl border border-cyan-500\/20\">\r\n <h4 class=\"text-cyan-300 font-bold mb-4 text-l\">\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629:<\/h4>\r\n <div class=\"font-mono text-cyan-300 text-lg\">sin \u03b8<sub>c<\/sub> = n\u2082 \/ n\u2081<\/div>\r\n <p class=\"text-l text-slate-500 mt-4 italic text-center\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u062b\u0627\u0646\u064a \u0647\u0648 \u0627\u0644\u0647\u0648\u0627\u0621 (n\u2082 \u2248 1):<\/p>\r\n <div class=\"font-mono text-cyan-300 text-lg\">sin \u03b8<sub>c<\/sub> = 1 \/ n<\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"p-4 bg-emerald-500\/5 rounded-xl border border-emerald-500\/20\">\r\n <h4 class=\"text-emerald-400 font-bold text-l mb-2\">\u0634\u0631\u0648\u0637 \u062d\u062f\u0648\u062b\u0647\u0627:<\/h4>\r\n <ul class=\"text-l text-slate-400 space-y-1\">\r\n <li>\u25cf \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0636\u0648\u0621 \u0645\u0646 \u0648\u0633\u0637 \u0623\u0643\u0628\u0631 \u0643\u062b\u0627\u0641\u0629 \u0625\u0644\u0649 \u0623\u0642\u0644 \u0643\u062b\u0627\u0641\u0629 (n\u2081 > n\u2082).<\/li>\r\n <li>\u25cf \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0633\u0642\u0648\u0637 \u062a\u0633\u0627\u0648\u064a \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 (\u03b8\u2081 = \u03b8_c).<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"p-4 bg-amber-500\/5 rounded-xl border border-amber-500\/20\">\r\n <h4 class=\"text-amber-400 font-bold text-l mb-2\">\u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a:<\/h4>\r\n <p class=\"text-l text-slate-400\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0633\u0642\u0648\u0637 <span class=\"text-white font-bold\">\u0623\u0643\u0628\u0631<\/span> \u0645\u0646 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 (\u03b8\u2081 > \u03b8_c).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u062d\u0627\u0648\u064a\u0629 \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 \u0648\u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a -->\r\n <div class=\"simulation-container\" id=\"critical-angle-sim\"><\/div>\r\n\r\n <!-- \u0623\u0645\u062b\u0644\u0629 \u0645\u062d\u0644\u0648\u0644\u0629 -->\r\n <section class=\"space-y-6\">\r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-blue-500\/20 shadow-lg\">\r\n <h3 class=\"text-blue-400 font-bold text-lg mb-4\">\u0623\u0645\u062b\u0644\u0629 \u0645\u062d\u0644\u0648\u0644\u0629 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628<\/h3>\r\n <div class=\"space-y-8\">\r\n <div class=\"p-6 bg-black\/30 rounded-2xl border border-white\/5\">\r\n <p class=\"text-slate-300 mb-4 font-bold\">\u0645\u062b\u0627\u0644: \u0623\u062d\u0633\u0628 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 \u0644\u0644\u0645\u0627\u0621 (n = 1.33).<\/p>\r\n <div class=\"space-y-3\">\r\n <div class=\"text-emerald-400 text-l\">\u0627\u0644\u062d\u0644:<\/div>\r\n <div class=\"font-mono text-emerald-400 text-lg\">sin \u03b8<sub>c<\/sub> = 1 \/ 1.33 = 0.7519<\/div>\r\n <div class=\"font-mono text-emerald-400 text-lg font-bold\">\u03b8<sub>c<\/sub> = sin\u207b\u00b9(0.7519) \u2248 48.6\u00b0<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 bg-black\/30 rounded-2xl border border-white\/5\">\r\n <p class=\"text-slate-300 mb-4 font-bold\">\u0645\u062b\u0627\u0644: \u062a\u062d\u062f\u064a\u062f \u0645\u0633\u0627\u0631 \u0627\u0644\u0623\u0634\u0639\u0629 \u0641\u064a \u0627\u0644\u0645\u0627\u0621 (\u03b8_c = 48.6\u00b0)<\/p>\r\n <ul class=\"text-l text-slate-400 space-y-3\">\r\n <li class=\"flex items-center gap-2\"><span class=\"w-2 h-2 bg-blue-500 rounded-full\"><\/span><span>\u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u03b8\u2081 = 30\u00b0: <span class=\"text-emerald-400\">\u064a\u0646\u0643\u0633\u0631 \u0645\u0628\u062a\u0639\u062f\u0627\u064b \u0639\u0646 \u0627\u0644\u0639\u0645\u0648\u062f.<\/span><\/span><\/li>\r\n <li class=\"flex items-center gap-2\"><span class=\"w-2 h-2 bg-yellow-500 rounded-full\"><\/span><span>\u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u03b8\u2081 = 48.6\u00b0: <span class=\"text-yellow-400\">\u064a\u0646\u0643\u0633\u0631 \u0645\u0648\u0627\u0632\u064a\u0627\u064b \u0644\u0644\u0633\u0637\u062d \u0627\u0644\u0641\u0627\u0635\u0644 (90\u00b0).<\/span><\/span><\/li>\r\n <li class=\"flex items-center gap-2\"><span class=\"w-2 h-2 bg-rose-500 rounded-full\"><\/span><span>\u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u03b8\u2081 = 55\u00b0: <span class=\"text-rose-400\">\u064a\u062d\u062f\u062b \u0627\u0646\u0639\u0643\u0627\u0633 \u0643\u0644\u064a \u062f\u0627\u062e\u0644\u064a.<\/span><\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u062b\u0627\u0644\u062b\u0627\u064b: \u0627\u0644\u0633\u0631\u0627\u0628 -->\r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-orange-500 rounded-full\"><\/span>\r\n \u062b\u0627\u0644\u062b\u0627\u064b: \u0627\u0644\u0633\u0631\u0627\u0628 (Mirage)\r\n <\/h2>\r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-orange-500\/20 shadow-inner\">\r\n <p class=\"text-slate-300 leading-relaxed\">\r\n <span class=\"text-orange-400 font-bold\">\u0627\u0644\u0633\u0631\u0627\u0628<\/span> \u0647\u0648 \u062e\u062f\u0627\u0639 \u0628\u0635\u0631\u064a \u064a\u064f\u0631\u0649 \u0641\u064a \u0627\u0644\u0635\u062d\u0631\u0627\u0621 \u0623\u0648 \u0639\u0644\u0649 \u0627\u0644\u0637\u0631\u0642\u0627\u062a \u0627\u0644\u0633\u0627\u062e\u0646\u0629\u060c \u0648\u0623\u064a\u0636\u0627\u064b \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0642\u0637\u0628\u064a\u0629. \u064a\u0646\u0634\u0623 \u0628\u0633\u0628\u0628 <span class=\"text-white font-bold\">\u0627\u0646\u0643\u0633\u0627\u0631\u0627\u062a \u0645\u062a\u062a\u0627\u0644\u064a\u0629 \u0644\u0644\u0636\u0648\u0621<\/span> \u062e\u0644\u0627\u0644 \u0637\u0628\u0642\u0627\u062a \u0627\u0644\u0647\u0648\u0627\u0621 \u0630\u0627\u062a \u0627\u0644\u0643\u062b\u0627\u0641\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 (\u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0627\u0646\u0643\u0633\u0627\u0631 \u0645\u062e\u062a\u0644\u0641\u0629) \u0646\u062a\u064a\u062c\u0629 \u0627\u062e\u062a\u0644\u0627\u0641 \u062f\u0631\u062c\u0627\u062a \u062d\u0631\u0627\u0631\u062a\u0647\u0627.\r\n <\/p>\r\n <\/div>\r\n <!-- \u062d\u0627\u0648\u064a\u0629 \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0633\u0631\u0627\u0628 -->\r\n <div class=\"simulation-container\" id=\"mirage-sim\"><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-orange-900\/10 p-6 rounded-3xl border border-orange-500\/20\">\r\n <h4 class=\"text-orange-400 font-bold mb-3\">\u0627\u0644\u0633\u0631\u0627\u0628 \u0627\u0644\u0635\u062d\u0631\u0627\u0648\u064a (\u0627\u0644\u0633\u0641\u0644\u064a):<\/h4>\r\n <p class=\"text-l text-slate-400 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 \u0627\u0644\u0623\u0631\u0636 \u0633\u0627\u062e\u0646\u0629 \u062c\u062f\u0627\u064b\u061b \u062d\u064a\u062b \u062a\u0633\u062e\u0646 \u0637\u0628\u0642\u0627\u062a \u0627\u0644\u0647\u0648\u0627\u0621 \u0627\u0644\u0642\u0631\u064a\u0628\u0629 \u0645\u0646\u0647\u0627 \u0641\u064a\u0642\u0644 \u0645\u0639\u0627\u0645\u0644 \u0627\u0646\u0643\u0633\u0627\u0631\u0647\u0627. \u064a\u0646\u0643\u0633\u0631 \u0627\u0644\u0636\u0648\u0621 \u0627\u0644\u0642\u0627\u062f\u0645 \u0645\u0646 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0627\u0644\u0628\u0639\u064a\u062f\u0629 \u0645\u0628\u062a\u0639\u062f\u0627\u064b \u0639\u0646 \u0627\u0644\u0639\u0645\u0648\u062f \u062d\u062a\u0649 \u064a\u062d\u062f\u062b \u0627\u0646\u0639\u0643\u0627\u0633 \u0643\u0644\u064a\u060c \u0641\u0646\u0631\u0649 \u0635\u0648\u0631\u0629 \u0645\u0642\u0644\u0648\u0628\u0629 \u0644\u0644\u0623\u062c\u0633\u0627\u0645 \u0643\u0623\u0646\u0647\u0627 \u0628\u0631\u0643\u0629 \u0645\u0627\u0621.<\/p>\r\n <\/div>\r\n <div class=\"bg-blue-900\/10 p-6 rounded-3xl border border-blue-500\/20\">\r\n <h4 class=\"text-blue-400 font-bold mb-3\">\u0627\u0644\u0633\u0631\u0627\u0628 \u0627\u0644\u0642\u0637\u0628\u064a (\u0627\u0644\u0639\u0644\u0648\u064a):<\/h4>\r\n <p class=\"text-l text-slate-400 leading-relaxed\">\u064a\u062d\u062f\u062b \u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0628\u0627\u0631\u062f\u0629\u061b \u062d\u064a\u062b \u064a\u0643\u0648\u0646 \u0627\u0644\u0647\u0648\u0627\u0621 \u0627\u0644\u0642\u0631\u064a\u0628 \u0645\u0646 \u0627\u0644\u062c\u0644\u064a\u062f \u0623\u0628\u0631\u062f \u0648\u0623\u0643\u062b\u0631 \u0643\u062b\u0627\u0641\u0629. \u064a\u0646\u062d\u0646\u064a \u0627\u0644\u0636\u0648\u0621 \u0646\u062d\u0648 \u0627\u0644\u0623\u0633\u0641\u0644\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0627\u0644\u0628\u0639\u064a\u062f\u0629 (\u0645\u062b\u0644 \u0627\u0644\u0633\u0641\u0646) \u062a\u0628\u062f\u0648 \u0643\u0623\u0646\u0647\u0627 \u062a\u0637\u0641\u0648 \u0641\u064a \u0627\u0644\u0647\u0648\u0627\u0621 \u0641\u0648\u0642 \u0627\u0644\u0623\u0641\u0642 \u0623\u0648 \u062a\u0638\u0647\u0631 \u0645\u0642\u0644\u0648\u0628\u0629 \u0641\u064a \u0627\u0644\u0633\u0645\u0627\u0621.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0631\u0627\u0628\u0639\u0627\u064b: \u0642\u0648\u0633 \u0627\u0644\u0645\u0637\u0631 -->\r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-gradient-to-b from-red-500 via-green-500 to-purple-500 rounded-full\"><\/span>\r\n \u0631\u0627\u0628\u0639\u0627\u064b: \u0642\u0648\u0633 \u0627\u0644\u0645\u0637\u0631 (Rainbow)\r\n <\/h2>\r\n <div class=\"bg-slate-800\/40 p-8 rounded-3xl border border-white\/10 space-y-8\">\r\n <p class=\"text-slate-300 leading-relaxed\">\u062a\u062a\u0643\u0648\u0646 \u0642\u0648\u0633 \u0627\u0644\u0645\u0637\u0631 \u0646\u062a\u064a\u062c\u0629 \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0636\u0648\u0621 \u0645\u0639 \u0642\u0637\u0631\u0627\u062a \u0627\u0644\u0645\u0637\u0631\u060c \u062d\u064a\u062b \u062a\u0639\u0645\u0644 \u0643\u0644 \u0642\u0637\u0631\u0629 \u0643\u0645\u0646\u0634\u0648\u0631 \u0632\u062c\u0627\u062c\u064a \u0635\u063a\u064a\u0631 \u064a\u062d\u0644\u0644 \u0627\u0644\u0636\u0648\u0621 \u0627\u0644\u0623\u0628\u064a\u0636 \u0625\u0644\u0649 \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0637\u064a\u0641 \u0627\u0644\u0633\u0628\u0639\u0629.<\/p>\r\n <!-- \u062d\u0627\u0648\u064a\u0629 \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0648\u0633 \u0627\u0644\u0645\u0637\u0631 -->\r\n <div class=\"simulation-container\" id=\"rainbow-sim\"><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"p-4 bg-white\/5 rounded-2xl border border-white\/5 text-center\">\r\n <div class=\"text-2xl mb-2\">1. \u0627\u0646\u0643\u0633\u0627\u0631 \u0648\u062a\u062d\u0644\u0644<\/div>\r\n <p class=\"text-[10px] text-slate-400\">\u0639\u0646\u062f \u062f\u062e\u0648\u0644 \u0627\u0644\u0636\u0648\u0621 \u0644\u0644\u0642\u0637\u0631\u0629\u060c \u064a\u0646\u0643\u0633\u0631 \u0648\u064a\u062a\u062d\u0644\u0644 \u0644\u0623\u0644\u0648\u0627\u0646\u0647 (\u0627\u0644\u0623\u062d\u0645\u0631 \u064a\u0646\u0643\u0633\u0631 \u0628\u0623\u0642\u0644 \u0632\u0627\u0648\u064a\u0629 \u0648\u0627\u0644\u0628\u0646\u0641\u0633\u062c\u064a \u0628\u0623\u0643\u0628\u0631 \u0632\u0627\u0648\u064a\u0629).<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/5 rounded-2xl border border-white\/5 text-center\">\r\n <div class=\"text-2xl mb-2\">2. \u0627\u0646\u0639\u0643\u0627\u0633 \u0643\u0644\u064a<\/div>\r\n <p class=\"text-[10px] text-slate-400\">\u064a\u0635\u0637\u062f\u0645 \u0627\u0644\u0636\u0648\u0621 \u0628\u0627\u0644\u062c\u062f\u0627\u0631 \u0627\u0644\u062f\u0627\u062e\u0644\u064a \u0644\u0644\u0642\u0637\u0631\u0629 \u0628\u0632\u0627\u0648\u064a\u0629 \u0623\u0643\u0628\u0631 \u0645\u0646 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 \u0641\u064a\u0646\u0639\u0643\u0633 \u0643\u0644\u064a\u0627\u064b.<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/5 rounded-2xl border border-white\/5 text-center\">\r\n <div class=\"text-2xl mb-2\">3. \u0627\u0646\u0643\u0633\u0627\u0631 \u062b\u0627\u0646\u064d<\/div>\r\n <p class=\"text-[10px] text-slate-400\">\u064a\u062e\u0631\u062c \u0627\u0644\u0636\u0648\u0621 \u0645\u0646 \u0627\u0644\u0642\u0637\u0631\u0629 \u0645\u0646\u0643\u0633\u0631\u0627\u064b \u0645\u0631\u0629 \u0623\u062e\u0631\u0649\u060c \u0648\u062a\u0635\u0644 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0644\u0644\u0639\u064a\u0646 \u0628\u0632\u0648\u0627\u064a\u0627 \u0645\u062e\u062a\u0644\u0641\u0629 (\u0627\u0644\u0623\u062d\u0645\u0631 ~42\u00b0 \u0648\u0627\u0644\u0628\u0646\u0641\u0633\u062c\u064a ~40\u00b0).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u062e\u0627\u0645\u0633\u0627\u064b: \u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629 -->\r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-indigo-500 rounded-full\"><\/span>\r\n \u062e\u0627\u0645\u0633\u0627\u064b: \u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629 (Optical Fibers)\r\n <\/h2>\r\n <div class=\"bg-indigo-900\/10 p-8 rounded-3xl border border-indigo-500\/20 space-y-8\">\r\n <div class=\"space-y-4\">\r\n <h4 class=\"text-indigo-400 font-bold\">\u0645\u0628\u062f\u0623 \u0627\u0644\u0639\u0645\u0644 \u0648\u0627\u0644\u062a\u0631\u0643\u064a\u0628:<\/h4>\r\n <p class=\"text-slate-300 text-l leading-relaxed\">\u062a\u0639\u062a\u0645\u062f \u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629 \u0639\u0644\u0649 \u0638\u0627\u0647\u0631\u0629 <span class=\"text-white font-bold\">\u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a \u0627\u0644\u0645\u062a\u0643\u0631\u0631<\/span>. \u064a\u062a\u0643\u0648\u0646 \u0627\u0644\u0644\u064a\u0641 \u0645\u0646 \u0642\u0644\u0628 (Core) \u0630\u0648 \u0645\u0639\u0627\u0645\u0644 \u0627\u0646\u0643\u0633\u0627\u0631 \u0639\u0627\u0644\u064d\u060c \u064a\u062d\u064a\u0637 \u0628\u0647 \u063a\u0644\u0627\u0641 (Cladding) \u0630\u0648 \u0645\u0639\u0627\u0645\u0644 \u0627\u0646\u0643\u0633\u0627\u0631 \u0623\u0642\u0644. \u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0644\u0627\u0641 \u064a\u0636\u0645\u0646 \u0628\u0642\u0627\u0621 \u0627\u0644\u0636\u0648\u0621 \u0645\u062d\u0635\u0648\u0631\u0627\u064b \u062f\u0627\u062e\u0644 \u0627\u0644\u0642\u0644\u0628 \u062d\u062a\u0649 \u0644\u0648 \u0643\u0627\u0646 \u0627\u0644\u0644\u064a\u0641 \u0645\u0646\u062d\u0646\u064a\u0627\u064b.<\/p>\r\n <\/div>\r\n <!-- \u062d\u0627\u0648\u064a\u0629 \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629 -->\r\n <div class=\"simulation-container\" id=\"fiber-sim\"><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"p-6 bg-black\/40 rounded-2xl border border-white\/5\">\r\n <h5 class=\"text-indigo-300 font-bold mb-3 flex items-center gap-2\"><span class=\"w-1.5 h-1.5 bg-indigo-500 rounded-full\"><\/span>\u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0637\u0628\u064a\u0629<\/h5>\r\n <p class=\"text-l text-slate-400 leading-relaxed\">\u062a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a <span class=\"text-white\">\u0627\u0644\u0645\u0646\u0627\u0638\u064a\u0631 \u0627\u0644\u0637\u0628\u064a\u0629 (Endoscopes)<\/span> \u0644\u0631\u0624\u064a\u0629 \u0627\u0644\u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0648\u0625\u062c\u0631\u0627\u0621 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062c\u0631\u0627\u062d\u064a\u0629 \u0627\u0644\u062f\u0642\u064a\u0642\u0629 \u062f\u0648\u0646 \u0627\u0644\u062d\u0627\u062c\u0629 \u0644\u0641\u062a\u062d \u062c\u0631\u0627\u062d\u064a \u0643\u0628\u064a\u0631\u060c \u0645\u0645\u0627 \u064a\u0642\u0644\u0644 \u0645\u0646 \u0622\u0644\u0627\u0645 \u0627\u0644\u0645\u0631\u064a\u0636 \u0648\u0633\u0631\u0639\u0629 \u062a\u0639\u0627\u0641\u064a\u0647.<\/p>\r\n <\/div>\r\n <div class=\"p-6 bg-black\/40 rounded-2xl border border-white\/5\">\r\n <h5 class=\"text-indigo-300 font-bold mb-3 flex items-center gap-2\"><span class=\"w-1.5 h-1.5 bg-indigo-500 rounded-full\"><\/span>\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0627\u0644\u0627\u062a\u0635\u0627\u0644\u0627\u062a<\/h5>\r\n <p class=\"text-l text-slate-400 leading-relaxed\">\u062a\u0639\u062a\u0628\u0631 \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u0641\u0642\u0631\u064a \u0644\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u061b \u062d\u064a\u062b \u062a\u0646\u0642\u0644 \u0643\u0645\u064a\u0627\u062a \u0647\u0627\u0626\u0644\u0629 \u0645\u0646 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0628\u0633\u0631\u0639\u0629 \u0627\u0644\u0636\u0648\u0621\u060c \u0648\u062a\u062a\u0645\u064a\u0632 \u0628\u0645\u0642\u0627\u0648\u0645\u062a\u0647\u0627 \u0644\u0644\u062a\u0634\u0648\u064a\u0634 \u0627\u0644\u0643\u0647\u0631\u0648\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0648\u062e\u0641\u0629 \u0648\u0632\u0646\u0647\u0627 \u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u0627\u0644\u0623\u0633\u0644\u0627\u0643 \u0627\u0644\u0646\u062d\u0627\u0633\u064a\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u062f\u0631\u0633 -->\r\n <section class=\"bg-slate-800\/60 p-8 rounded-3xl border border-white\/10\">\r\n <h3 class=\"text-xl font-bold text-white mb-6\">\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u062f\u0631\u0633:<\/h3>\r\n <div class=\"space-y-4\">\r\n <div class=\"p-4 bg-white\/5 rounded-xl border border-white\/5\">\r\n <p class=\"text-slate-300 text-l font-bold mb-2\">\u0633: \u0645\u0627 \u0647\u064a \u0634\u0631\u0648\u0637 \u062d\u062f\u0648\u062b \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u061f<\/p>\r\n <p class=\"text-slate-400 text-l leading-relaxed\">\u062c: 1. \u0623\u0646 \u064a\u0646\u062a\u0642\u0644 \u0627\u0644\u0636\u0648\u0621 \u0645\u0646 \u0648\u0633\u0637 \u0645\u0639\u0627\u0645\u0644 \u0627\u0646\u0643\u0633\u0627\u0631\u0647 \u0623\u0643\u0628\u0631 \u0625\u0644\u0649 \u0648\u0633\u0637 \u0645\u0639\u0627\u0645\u0644 \u0627\u0646\u0643\u0633\u0627\u0631\u0647 \u0623\u0642\u0644. <br\/> 2. \u0623\u0646 \u062a\u0643\u0648\u0646 \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0633\u0642\u0648\u0637 \u0623\u0643\u0628\u0631 \u0645\u0646 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 (\u03b8\u2081 > \u03b8_c).<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-white\/5 rounded-xl border border-white\/5\">\r\n <p class=\"text-slate-300 text-l font-bold mb-2\">\u0633: \u0644\u0645\u0627\u0630\u0627 \u064a\u0644\u0645\u0639 \u0627\u0644\u0645\u0627\u0633 \u0628\u0634\u062f\u0629\u061f<\/p>\r\n <p class=\"text-slate-400 text-l leading-relaxed\">\u062c: \u0644\u0623\u0646 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 \u0644\u0644\u0645\u0627\u0633 \u0635\u063a\u064a\u0631\u0629 \u062c\u062f\u0627\u064b (24.4\u00b0)\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0627\u0644\u0636\u0648\u0621 \u0627\u0644\u0633\u0627\u0642\u0637 \u0639\u0644\u064a\u0647 \u064a\u0639\u0627\u0646\u064a \u0645\u0646 \u0627\u0646\u0639\u0643\u0627\u0633\u0627\u062a \u0643\u0644\u064a\u0629 \u062f\u0627\u062e\u0644\u064a\u0629 \u0645\u062a\u0639\u062f\u062f\u0629 \u0642\u0628\u0644 \u062e\u0631\u0648\u062c\u0647.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062d\u0627\u0643\u064a\u0627\u062a (JavaScript \u062e\u0627\u0644\u0635) -->\r\n<script>\r\n (function() {\r\n \/\/ ==============================================\r\n \/\/ 1. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 \u0648\u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a (CriticalAngleSimulation)\r\n \/\/ ==============================================\r\n const criticalContainer = document.getElementById('critical-angle-sim');\r\n if (criticalContainer) {\r\n const mediums = [\r\n { name: '\u0647\u0648\u0627\u0621', n: 1.0 },\r\n { name: '\u0645\u0627\u0621', n: 1.33 },\r\n { name: '\u0632\u062c\u0627\u062c', n: 1.52 },\r\n { name: '\u0645\u0627\u0633', n: 2.42 }\r\n ];\r\n let n1 = 1.5; \/\/ \u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0623\u0648\u0644 (\u0627\u0644\u0623\u0643\u0628\u0631 \u0643\u062b\u0627\u0641\u0629)\r\n let n2 = 1.0; \/\/ \u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u062b\u0627\u0646\u064a (\u0627\u0644\u0623\u0642\u0644 \u0643\u062b\u0627\u0641\u0629)\r\n let angle1Deg = 30;\r\n let angle2Deg = 0;\r\n let criticalAngle = 0;\r\n let isTIR = false;\r\n\r\n \/\/ \u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629\r\n const wrapper = document.createElement('div');\r\n wrapper.className = 'w-full max-w-4xl bg-slate-900 rounded-3xl border border-slate-800 shadow-2xl overflow-hidden font-cairo';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <div class=\"bg-gradient-to-r from-cyan-600 to-blue-600 p-6 text-white flex items-center justify-between\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"p-2 bg-white\/20 rounded-lg\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-6 h-6\"><path d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\"\/><path d=\"M20 2v4\"\/><path d=\"M22 4h-4\"\/><circle cx=\"4\" cy=\"20\" r=\"2\"\/><\/svg>\r\n <\/div>\r\n <div><h3 class=\"text-xl font-bold\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 \u0648\u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a<\/h3><p class=\"text-l text-blue-100\">\u0627\u0633\u062a\u0643\u0634\u0641 \u0634\u0631\u0648\u0637 \u062d\u062f\u0648\u062b \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-8 grid grid-cols-1 lg:grid-cols-2 gap-12\">\r\n <div class=\"relative flex flex-col items-center justify-center bg-black\/40 rounded-2xl border border-white\/5 p-8 min-h-[420px]\">\r\n <canvas id=\"criticalCanvas\" width=\"320\" height=\"320\" class=\"overflow-visible\"><\/canvas>\r\n <div class=\"mt-8 grid grid-cols-2 gap-4 w-full\">\r\n <div class=\"p-3 bg-cyan-500\/10 rounded-xl border border-cyan-500\/20 text-center\"><p class=\"text-[10px] text-cyan-400 mb-1\">\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 (\u03b8c)<\/p><p class=\"text-lg font-bold text-white\" id=\"criticalAngleValue\">-<\/p><\/div>\r\n <div class=\"p-3 rounded-xl border text-center\" id=\"stateBox\"><p class=\"text-[10px] mb-1 text-emerald-400\">\u0627\u0644\u062d\u0627\u0644\u0629<\/p><p class=\"text-l font-bold text-white\" id=\"stateText\">\u0627\u0646\u0643\u0633\u0627\u0631 \u0637\u0628\u064a\u0639\u064a<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-8\">\r\n <div class=\"space-y-6\">\r\n <div class=\"flex items-center gap-2 text-cyan-400 mb-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-4 h-4\"><path d=\"M14 17H5\"\/><path d=\"M19 7h-9\"\/><circle cx=\"17\" cy=\"17\" r=\"3\"\/><circle cx=\"7\" cy=\"7\" r=\"3\"\/><\/svg><span class=\"text-l font-bold\">\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062a\u062c\u0631\u0628\u0629<\/span><\/div>\r\n <div class=\"space-y-3\"><label class=\"text-l text-slate-400 flex justify-between\"><span>\u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u0623\u0648\u0644 (\u0627\u0644\u0623\u0643\u0628\u0631 \u0643\u062b\u0627\u0641\u0629)<\/span><span class=\"text-cyan-400 font-bold\" id=\"n1Value\">1.5<\/span><\/label><div class=\"grid grid-cols-4 gap-2\" id=\"medium1Btns\"><\/div><\/div>\r\n <div class=\"space-y-3\"><label class=\"text-l text-slate-400 flex justify-between\"><span>\u0627\u0644\u0648\u0633\u0637 \u0627\u0644\u062b\u0627\u0646\u064a (\u0627\u0644\u0623\u0642\u0644 \u0643\u062b\u0627\u0641\u0629)<\/span><span class=\"text-cyan-400 font-bold\" id=\"n2Value\">1.0<\/span><\/label><div class=\"grid grid-cols-4 gap-2\" id=\"medium2Btns\"><\/div><\/div>\r\n <div class=\"space-y-3 pt-4 border-t border-white\/5\"><label class=\"text-l text-slate-400 flex justify-between\"><span>\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0633\u0642\u0648\u0637 (\u03b8\u2081)<\/span><span class=\"text-amber-400 font-bold\" id=\"angle1Display\">30.0\u00b0<\/span><\/label><input type=\"range\" id=\"angleSlider\" min=\"0\" max=\"89\" step=\"0.1\" value=\"30\" class=\"w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-amber-500\"\/><div class=\"flex justify-between text-[10px] text-slate-500\"><span>0\u00b0<\/span><span id=\"criticalMarker\">-<\/span><span>90\u00b0<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"p-4 bg-cyan-500\/5 rounded-2xl border border-cyan-500\/10 space-y-3\">\r\n <div class=\"flex items-center gap-2 text-cyan-400\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-4 h-4\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg><span class=\"text-l font-bold\">\u062a\u0630\u0643\u064a\u0631 \u0628\u0627\u0644\u0634\u0631\u0637\u064a\u0646:<\/span><\/div>\r\n <ul class=\"text-[10px] text-slate-400 space-y-2 leading-relaxed\">\r\n <li class=\"flex items-start gap-2\"><span class=\"text-cyan-500\">\u2192<\/span><span>\u064a\u062c\u0628 \u0623\u0646 \u064a\u0643\u0648\u0646 <span class=\"text-white\">n\u2081 > n\u2082<\/span> (\u0645\u0646 \u0648\u0633\u0637 \u0623\u062b\u0642\u0644 \u0625\u0644\u0649 \u0623\u062e\u0641).<\/span><\/li>\r\n <li class=\"flex items-start gap-2\"><span class=\"text-cyan-500\">\u2192<\/span><span>\u064a\u062d\u062f\u062b \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0641\u0642\u0637 \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 <span class=\"text-white font-bold\">\u03b8\u2081 > \u03b8c<\/span>.<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n criticalContainer.appendChild(wrapper);\r\n\r\n const canvas = document.getElementById('criticalCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const size = 320, centerX = size\/2, centerY = size\/2, rayLen = 140;\r\n\r\n function calculateCritical() {\r\n if (n1 > n2) {\r\n const rad = Math.asin(n2 \/ n1);\r\n criticalAngle = rad * 180 \/ Math.PI;\r\n } else {\r\n criticalAngle = 0;\r\n }\r\n }\r\n function calculateRefraction() {\r\n const rad = angle1Deg * Math.PI \/ 180;\r\n const sinTheta2 = (n1 * Math.sin(rad)) \/ n2;\r\n if (sinTheta2 >= 1 || (n1 <= n2 && angle1Deg > 0)) {\r\n isTIR = true;\r\n angle2Deg = 90;\r\n } else {\r\n isTIR = false;\r\n angle2Deg = Math.asin(sinTheta2) * 180 \/ Math.PI;\r\n }\r\n }\r\n function draw() {\r\n ctx.clearRect(0, 0, size, size);\r\n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062e\u0644\u0641\u064a\u0629\r\n ctx.fillStyle = 'rgba(6, 182, 212, 0.1)';\r\n ctx.fillRect(0, centerY, size, centerY);\r\n ctx.fillStyle = 'rgba(255,255,255,0.03)';\r\n ctx.fillRect(0, 0, size, centerY);\r\n \/\/ \u062e\u0637 \u0627\u0644\u0633\u0637\u062d \u0648\u0627\u0644\u0639\u0645\u0648\u062f\r\n ctx.beginPath(); ctx.moveTo(0,centerY); ctx.lineTo(size,centerY); ctx.strokeStyle='#475569'; ctx.setLineDash([4,4]); ctx.lineWidth=2; ctx.stroke();\r\n ctx.beginPath(); ctx.moveTo(centerX,0); ctx.lineTo(centerX,size); ctx.strokeStyle='#94a3b8'; ctx.setLineDash([2,2]); ctx.stroke(); ctx.setLineDash([]);\r\n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a\r\n ctx.font = 'bold 12px Cairo'; ctx.fillStyle = '#06b6d4'; ctx.fillText(`\u0627\u0644\u0648\u0633\u0637 1 (n\u2081 = ${n1})`, 10, centerY+20);\r\n ctx.fillStyle = '#94a3b8'; ctx.fillText(`\u0627\u0644\u0648\u0633\u0637 2 (n\u2082 = ${n2})`, 10, centerY-10);\r\n \/\/ \u0627\u0644\u0634\u0639\u0627\u0639 \u0627\u0644\u0633\u0627\u0642\u0637\r\n const rad = angle1Deg * Math.PI \/ 180;\r\n const incX = centerX - rayLen * Math.sin(rad);\r\n const incY = centerY + rayLen * Math.cos(rad);\r\n ctx.beginPath(); ctx.moveTo(incX, incY); ctx.lineTo(centerX, centerY); ctx.strokeStyle='#fbbf24'; ctx.lineWidth=3; ctx.stroke();\r\n \/\/ \u0627\u0644\u0634\u0639\u0627\u0639 \u0627\u0644\u062e\u0627\u0631\u062c\r\n if (isTIR) {\r\n const refX = centerX + rayLen * Math.sin(rad);\r\n const refY = centerY + rayLen * Math.cos(rad);\r\n ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(refX, refY); ctx.strokeStyle='#f87171'; ctx.stroke();\r\n ctx.fillStyle = '#f87171'; ctx.font = '10px Cairo'; ctx.fillText('\u0627\u0646\u0639\u0643\u0627\u0633 \u0643\u0644\u064a', centerX+30, centerY+30);\r\n } else {\r\n const theta2Rad = angle2Deg * Math.PI \/ 180;\r\n const refX = centerX + rayLen * Math.sin(theta2Rad);\r\n const refY = centerY - rayLen * Math.cos(theta2Rad);\r\n ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(refX, refY); ctx.strokeStyle='#34d399'; ctx.stroke();\r\n ctx.fillStyle = '#34d399'; ctx.fillText(`\u03b8\u2082 = ${angle2Deg.toFixed(1)}\u00b0`, centerX+30, centerY-30);\r\n }\r\n ctx.fillStyle = '#fbbf24'; ctx.fillText(`\u03b8\u2081 = ${angle1Deg.toFixed(1)}\u00b0`, centerX-50, centerY-20);\r\n \/\/ \u0642\u0648\u0633 \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062d\u0631\u062c\u0629 (\u0628\u0633\u064a\u0637)\r\n ctx.beginPath(); ctx.arc(centerX, centerY, 30, 0, rad, false); ctx.strokeStyle='#fbbf24'; ctx.setLineDash([2,2]); ctx.stroke(); ctx.setLineDash([]);\r\n }\r\n function updateUI() {\r\n document.getElementById('n1Value').innerText = n1;\r\n document.getElementById('n2Value').innerText = n2;\r\n document.getElementById('angle1Display').innerText = angle1Deg.toFixed(1) + '\u00b0';\r\n const critVal = criticalAngle > 0 ? criticalAngle.toFixed(1) + '\u00b0' : '\u0644\u0627 \u062a\u0648\u062c\u062f';\r\n document.getElementById('criticalAngleValue').innerText = critVal;\r\n document.getElementById('criticalMarker').innerHTML = criticalAngle > 0 ? criticalAngle.toFixed(1) + '\u00b0 (\u03b8c)' : '-';\r\n const stateBox = document.getElementById('stateBox');\r\n const stateText = document.getElementById('stateText');\r\n if (isTIR) {\r\n stateBox.className = 'p-3 rounded-xl border text-center bg-rose-500\/10 border-rose-500\/20';\r\n stateText.className = 'text-l font-bold text-white';\r\n stateText.innerText = '\u0627\u0646\u0639\u0643\u0627\u0633 \u0643\u0644\u064a \u062f\u0627\u062e\u0644\u064a';\r\n } else if (Math.abs(angle1Deg - criticalAngle) < 0.1 && criticalAngle > 0) {\r\n stateBox.className = 'p-3 rounded-xl border text-center bg-yellow-500\/10 border-yellow-500\/20';\r\n stateText.innerText = '\u0627\u0646\u0643\u0633\u0627\u0631 \u0645\u0645\u0627\u0633\u064a (90\u00b0)';\r\n } else {\r\n stateBox.className = 'p-3 rounded-xl border text-center bg-emerald-500\/10 border-emerald-500\/20';\r\n stateText.innerText = '\u0627\u0646\u0643\u0633\u0627\u0631 \u0637\u0628\u064a\u0639\u064a';\r\n }\r\n \/\/ \u062a\u0645\u064a\u064a\u0632 \u0627\u0644\u0623\u0632\u0631\u0627\u0631\r\n document.querySelectorAll('[data-medium1]').forEach(btn => { if (parseFloat(btn.dataset.medium1) === n1) btn.classList.add('active-medium'); else btn.classList.remove('active-medium'); });\r\n document.querySelectorAll('[data-medium2]').forEach(btn => { if (parseFloat(btn.dataset.medium2) === n2) btn.classList.add('active-medium'); else btn.classList.remove('active-medium'); });\r\n draw();\r\n }\r\n function updateSim() {\r\n calculateCritical();\r\n calculateRefraction();\r\n updateUI();\r\n }\r\n \/\/ \u0628\u0646\u0627\u0621 \u0623\u0632\u0631\u0627\u0631 \u0627\u0644\u0623\u0648\u0633\u0627\u0637\r\n const medium1Div = document.getElementById('medium1Btns');\r\n const medium2Div = document.getElementById('medium2Btns');\r\n mediums.forEach(m => {\r\n const btn1 = document.createElement('button');\r\n btn1.textContent = m.name;\r\n btn1.className = 'py-2 text-[10px] rounded-lg border transition-all bg-slate-800 border-slate-700 text-slate-400 hover:border-slate-600';\r\n btn1.setAttribute('data-medium1', m.n);\r\n btn1.addEventListener('click', () => { n1 = m.n; updateSim(); });\r\n medium1Div.appendChild(btn1);\r\n const btn2 = document.createElement('button');\r\n btn2.textContent = m.name;\r\n btn2.className = 'py-2 text-[10px] rounded-lg border transition-all bg-slate-800 border-slate-700 text-slate-400 hover:border-slate-600';\r\n btn2.setAttribute('data-medium2', m.n);\r\n btn2.addEventListener('click', () => { if (m.n < n1) { n2 = m.n; updateSim(); } });\r\n medium2Div.appendChild(btn2);\r\n });\r\n const slider = document.getElementById('angleSlider');\r\n slider.addEventListener('input', (e) => { angle1Deg = parseFloat(e.target.value); updateSim(); });\r\n updateSim();\r\n }\r\n\r\n \/\/ ==============================================\r\n \/\/ 2. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0633\u0631\u0627\u0628 (MirageSimulation)\r\n \/\/ ==============================================\r\n const mirageContainer = document.getElementById('mirage-sim');\r\n if (mirageContainer) {\r\n let tempGradient = 1; \/\/ 0: \u0639\u0627\u062f\u064a, 1: \u062d\u0627\u0631 (\u0633\u0631\u0627\u0628 \u0633\u0641\u0644\u064a), 2: \u0628\u0627\u0631\u062f (\u0633\u0631\u0627\u0628 \u0639\u0644\u0648\u064a)\r\n const canvasW = 400, canvasH = 400;\r\n const groundY = 350;\r\n let points = [];\r\n\r\n function updateRayPath() {\r\n const startX = 50, startY = 150;\r\n let currX = startX, currY = startY;\r\n let angle = 0.1; \/\/ \u0632\u0627\u0648\u064a\u0629 \u0627\u0628\u062a\u062f\u0627\u0626\u064a\u0629 \u0644\u0644\u0623\u0633\u0641\u0644\r\n const newPoints = [{x: currX, y: currY}];\r\n for (let i = 0; i < 60; i++) {\r\n currX += 5;\r\n if (tempGradient === 1) {\r\n const distFromGround = groundY - currY;\r\n const bendForce = Math.max(0, (40 - distFromGround) * 0.001);\r\n angle -= bendForce + 0.005;\r\n } else if (tempGradient === 2) {\r\n const distFromGround = groundY - currY;\r\n const bendForce = Math.max(0, (distFromGround - 20) * 0.0005);\r\n angle += bendForce + 0.01;\r\n } else {\r\n angle = 0.1;\r\n }\r\n currY += Math.sin(angle) * 15;\r\n if (currY > groundY) currY = groundY;\r\n if (currY < 0) currY = 0;\r\n newPoints.push({x: currX, y: currY});\r\n if (currX > 350) break;\r\n }\r\n points = newPoints;\r\n }\r\n function drawMirage() {\r\n const canvas = document.getElementById('mirageCanvas');\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n ctx.clearRect(0, 0, canvasW, canvasH);\r\n \/\/ \u0627\u0644\u0633\u0645\u0627\u0621\r\n const grad = ctx.createLinearGradient(0, 0, 0, groundY);\r\n if (tempGradient === 2) { grad.addColorStop(0, '#1e3a8a'); grad.addColorStop(1, '#38bdf8'); }\r\n else { grad.addColorStop(0, '#38bdf8'); grad.addColorStop(1, '#fbbf24'); }\r\n ctx.fillStyle = grad;\r\n ctx.fillRect(0, 0, canvasW, groundY);\r\n \/\/ \u0627\u0644\u0623\u0631\u0636\r\n ctx.fillStyle = tempGradient === 1 ? '#78350f' : '#1e293b';\r\n ctx.fillRect(0, groundY, canvasW, canvasH - groundY);\r\n \/\/ \u0645\u0648\u062c\u0627\u062a \u062d\u0631\u0627\u0631\u0629\r\n if (tempGradient === 1) {\r\n ctx.strokeStyle = 'rgba(251,191,36,0.3)';\r\n ctx.lineWidth = 1;\r\n for (let i = 0; i < 10; i++) {\r\n ctx.beginPath();\r\n ctx.moveTo(i*40, groundY);\r\n ctx.lineTo(i*40+10, groundY-20);\r\n ctx.stroke();\r\n }\r\n }\r\n \/\/ \u0627\u0644\u062c\u0633\u0645 (\u0634\u062c\u0631\u0629)\r\n ctx.fillStyle = '#451a03'; ctx.fillRect(45, 130, 10, 20);\r\n ctx.fillStyle = '#166534'; ctx.beginPath(); ctx.arc(50, 120, 15, 0, 2*Math.PI); ctx.fill();\r\n \/\/ \u0645\u0633\u0627\u0631 \u0627\u0644\u0636\u0648\u0621\r\n ctx.beginPath();\r\n ctx.moveTo(points[0].x, points[0].y);\r\n for (let i=1; i<points.length; i++) ctx.lineTo(points[i].x, points[i].y);\r\n ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 3; ctx.stroke();\r\n \/\/ \u0627\u0644\u0639\u064a\u0646\r\n ctx.fillStyle = '#94a3b8'; ctx.beginPath(); ctx.arc(360, 150, 12, 0, 2*Math.PI); ctx.fill();\r\n \/\/ \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0648\u0647\u0645\u064a\u0629\r\n if (tempGradient !== 0) {\r\n ctx.save();\r\n if (tempGradient === 1) {\r\n ctx.translate(50, groundY+30);\r\n ctx.scale(1, -1);\r\n } else {\r\n ctx.translate(50, 20);\r\n ctx.scale(1, 1);\r\n }\r\n ctx.fillStyle = '#451a03'; ctx.fillRect(0, 0, 10, 20);\r\n ctx.fillStyle = '#166534'; ctx.beginPath(); ctx.arc(5, -15, 15, 0, 2*Math.PI); ctx.fill();\r\n ctx.restore();\r\n }\r\n }\r\n function updateMirage() {\r\n updateRayPath();\r\n drawMirage();\r\n const desc = document.getElementById('mirageDesc');\r\n if (tempGradient === 0) desc.innerText = '\u0641\u064a \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0639\u0627\u062f\u064a\u0629\u060c \u062a\u0643\u0648\u0646 \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0647\u0648\u0627\u0621 \u0645\u062a\u062c\u0627\u0646\u0633\u0629 \u062a\u0642\u0631\u064a\u0628\u0627\u064b\u060c \u0644\u0630\u0627 \u0644\u0627 \u064a\u0639\u0627\u0646\u064a \u0627\u0644\u0636\u0648\u0621 \u0645\u0646 \u0627\u0646\u062d\u0631\u0627\u0641\u0627\u062a \u0645\u0644\u062d\u0648\u0638\u0629 \u0648\u0646\u0631\u0649 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0641\u064a \u0645\u0648\u0627\u0642\u0639\u0647\u0627 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629.';\r\n else if (tempGradient === 1) desc.innerText = '\u0641\u064a \u0627\u0644\u0635\u062d\u0631\u0627\u0621\u060c \u064a\u0643\u0648\u0646 \u0627\u0644\u0647\u0648\u0627\u0621 \u0627\u0644\u0645\u0644\u0627\u0645\u0633 \u0644\u0644\u0623\u0631\u0636 \u0623\u0642\u0644 \u0643\u062b\u0627\u0641\u0629 (\u0645\u0639\u0627\u0645\u0644 \u0627\u0646\u0643\u0633\u0627\u0631 \u0623\u0642\u0644). \u0639\u0646\u062f\u0645\u0627 \u064a\u0646\u062a\u0642\u0644 \u0627\u0644\u0636\u0648\u0621 \u0645\u0646 \u0637\u0628\u0642\u0627\u062a \u0639\u0644\u064a\u0627 \u0628\u0627\u0631\u062f\u0629 \u0625\u0644\u0649 \u0633\u0641\u0644\u0649 \u0633\u0627\u062e\u0646\u0629\u060c \u064a\u0646\u0643\u0633\u0631 \u0645\u0628\u062a\u0639\u062f\u0627\u064b \u0639\u0646 \u0627\u0644\u0639\u0645\u0648\u062f \u062d\u062a\u0649 \u064a\u062d\u062f\u062b \u0627\u0646\u0639\u0643\u0627\u0633 \u0643\u0644\u064a\u060c \u0641\u062a\u0631\u0649 \u0627\u0644\u0639\u064a\u0646 \u0635\u0648\u0631\u0629 \u0645\u0642\u0644\u0648\u0628\u0629 \u0644\u0644\u0623\u062c\u0633\u0627\u0645 \u0643\u0623\u0646\u0647\u0627 \u0645\u0646\u0639\u0643\u0633\u0629 \u0639\u0644\u0649 \u0633\u0637\u062d \u0645\u0627\u0621.';\r\n else desc.innerText = '\u0641\u064a \u0627\u0644\u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0642\u0637\u0628\u064a\u0629\u060c \u0627\u0644\u0647\u0648\u0627\u0621 \u0627\u0644\u0642\u0631\u064a\u0628 \u0645\u0646 \u0627\u0644\u062c\u0644\u064a\u062f \u0623\u0628\u0631\u062f \u0648\u0623\u0643\u062b\u0631 \u0643\u062b\u0627\u0641\u0629. \u064a\u0646\u062d\u0646\u064a \u0627\u0644\u0636\u0648\u0621 \u0646\u062d\u0648 \u0627\u0644\u0623\u0633\u0641\u0644\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0627\u0644\u0623\u062c\u0633\u0627\u0645 \u0627\u0644\u0628\u0639\u064a\u062f\u0629 \u062a\u0628\u062f\u0648 \u0645\u0631\u062a\u0641\u0639\u0629 \u0639\u0646 \u0645\u0643\u0627\u0646\u0647\u0627 \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0623\u0648 \u062a\u0638\u0647\u0631 \u0641\u0648\u0642 \u0627\u0644\u0623\u0641\u0642.';\r\n }\r\n const miraWrapper = document.createElement('div');\r\n miraWrapper.className = 'w-full max-w-4xl bg-slate-900 rounded-3xl border border-slate-800 shadow-2xl overflow-hidden font-cairo';\r\n miraWrapper.setAttribute('dir', 'rtl');\r\n miraWrapper.innerHTML = `\r\n <div class=\"bg-gradient-to-r from-orange-600 to-amber-600 p-6 text-white flex items-center justify-between\">\r\n <div class=\"flex items-center gap-3\"><div class=\"p-2 bg-white\/20 rounded-lg\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-6 h-6\"><path d=\"M12 2v2\"\/><path d=\"M12 8a4 4 0 0 0-1.645 7.647\"\/><path d=\"M2 12h2\"\/><path d=\"M20 14.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z\"\/><path d=\"m4.93 4.93 1.41 1.41\"\/><path d=\"m6.34 17.66-1.41 1.41\"\/><\/svg><\/div><div><h3 class=\"text-xl font-bold\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0638\u0627\u0647\u0631\u0629 \u0627\u0644\u0633\u0631\u0627\u0628<\/h3><p class=\"text-l text-amber-100\">\u0643\u064a\u0641 \u064a\u0646\u062d\u0646\u064a \u0627\u0644\u0636\u0648\u0621 \u0628\u0633\u0628\u0628 \u0627\u062e\u062a\u0644\u0627\u0641 \u062f\u0631\u062c\u0627\u062a \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u061f<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"p-8 grid grid-cols-1 lg:grid-cols-2 gap-12\">\r\n <div class=\"relative bg-black\/40 rounded-2xl border border-white\/5 p-4 h-[400px] overflow-hidden\"><canvas id=\"mirageCanvas\" width=\"400\" height=\"400\" class=\"w-full h-full\"><\/canvas><div class=\"absolute top-4 right-4 bg-black\/60 backdrop-blur-md p-2 rounded-lg border border-white\/10\"><p class=\"text-[10px] text-slate-400\">\u0627\u0644\u0645\u0633\u0627\u0631 \u0627\u0644\u062d\u0642\u064a\u0642\u064a \u0644\u0644\u0636\u0648\u0621<\/p><div class=\"h-1 w-full bg-amber-500 rounded-full mt-1\"><\/div><\/div><\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"bg-white\/5 p-6 rounded-2xl border border-white\/10 space-y-4\"><h4 class=\"text-l font-bold text-white mb-4\">\u0627\u062e\u062a\u0631 \u0646\u0648\u0639 \u0627\u0644\u0628\u064a\u0626\u0629:<\/h4><div class=\"grid grid-cols-1 gap-3\"><button id=\"mirageNormal\" class=\"p-4 rounded-xl border text-right transition-all bg-slate-800 border-slate-700 text-slate-400 hover:bg-slate-700\"><div class=\"font-bold\">\u062c\u0648 \u0645\u0639\u062a\u062f\u0644<\/div><div class=\"text-[10px] opacity-80\">\u0627\u0644\u0636\u0648\u0621 \u064a\u0633\u064a\u0631 \u0641\u064a \u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629<\/div><\/button><button id=\"mirageHot\" class=\"p-4 rounded-xl border text-right transition-all bg-orange-600 border-orange-500 text-white\"><div class=\"font-bold\">\u0635\u062d\u0631\u0627\u0621 \u062d\u0627\u0631\u0629 (\u0633\u0631\u0627\u0628 \u0633\u0641\u0644\u064a)<\/div><div class=\"text-[10px] opacity-80\">\u0627\u0644\u0623\u0631\u0636 \u0633\u0627\u062e\u0646\u0629 \u062c\u062f\u0627\u064b\u060c \u0627\u0644\u0636\u0648\u0621 \u064a\u0646\u062d\u0646\u064a \u0644\u0644\u0623\u0639\u0644\u0649<\/div><\/button><button id=\"mirageCold\" class=\"p-4 rounded-xl border text-right transition-all bg-slate-800 border-slate-700 text-slate-400 hover:bg-slate-700\"><div class=\"font-bold\">\u0645\u0646\u0627\u0637\u0642 \u0642\u0637\u0628\u064a\u0629 (\u0633\u0631\u0627\u0628 \u0639\u0644\u0648\u064a)<\/div><div class=\"text-[10px] opacity-80\">\u0627\u0644\u0623\u0631\u0636 \u0628\u0627\u0631\u062f\u0629 \u062c\u062f\u0627\u064b\u060c \u0627\u0644\u0636\u0648\u0621 \u064a\u0646\u062d\u0646\u064a \u0644\u0644\u0623\u0633\u0641\u0644<\/div><\/button><\/div><\/div>\r\n <div class=\"p-4 bg-amber-500\/5 rounded-2xl border border-amber-500\/10\"><div class=\"flex items-center gap-2 text-amber-400 mb-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-4 h-4\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg><span class=\"text-l font-bold\">\u0627\u0644\u062a\u0641\u0633\u064a\u0631 \u0627\u0644\u0639\u0644\u0645\u064a:<\/span><\/div><p class=\"text-[10px] text-slate-400 leading-relaxed\" id=\"mirageDesc\"><\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n mirageContainer.appendChild(miraWrapper);\r\n const canval = document.getElementById('mirageCanvas');\r\n if (canval) canval.getContext('2d');\r\n document.getElementById('mirageNormal').addEventListener('click', () => { tempGradient = 0; updateMirage(); });\r\n document.getElementById('mirageHot').addEventListener('click', () => { tempGradient = 1; updateMirage(); });\r\n document.getElementById('mirageCold').addEventListener('click', () => { tempGradient = 2; updateMirage(); });\r\n updateMirage();\r\n }\r\n\r\n \/\/ ==============================================\r\n \/\/ 3. \u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0648\u0633 \u0627\u0644\u0645\u0637\u0631 (RainbowSimulation)\r\n \/\/ ==============================================\r\n const rainbowContainer = document.getElementById('rainbow-sim');\r\n if (rainbowContainer) {\r\n let step = 0;\r\n const colors = [\r\n { name: '\u0623\u062d\u0645\u0631', color: '#ef4444', angle: 42 },\r\n { name: '\u0628\u0631\u062a\u0642\u0627\u0644\u064a', color: '#f97316', angle: 41.5 },\r\n { name: '\u0623\u0635\u0641\u0631', color: '#eab308', angle: 41 },\r\n { name: '\u0623\u062e\u0636\u0631', color: '#22c55e', angle: 40.5 },\r\n { name: '\u0623\u0632\u0631\u0642', color: '#3b82f6', angle: 40 },\r\n { name: '\u0646\u064a\u0644\u064a', color: '#6366f1', angle: 39.5 },\r\n { name: '\u0628\u0646\u0641\u0633\u062c\u064a', color: '#a855f7', angle: 39 }\r\n ];\r\n const rainbowWrapper = document.createElement('div');\r\n rainbowWrapper.className = 'w-full max-w-4xl bg-slate-900 rounded-3xl border border-slate-800 shadow-2xl overflow-hidden font-cairo';\r\n rainbowWrapper.setAttribute('dir', 'rtl');\r\n rainbowWrapper.innerHTML = `\r\n <div class=\"bg-gradient-to-r from-purple-600 via-blue-600 to-green-600 p-6 text-white flex items-center justify-between\">\r\n <div class=\"flex items-center gap-3\"><div class=\"p-2 bg-white\/20 rounded-lg\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-6 h-6\"><path d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\"\/><path d=\"M16 14v6\"\/><path d=\"M8 14v6\"\/><path d=\"M12 16v6\"\/><\/svg><\/div><div><h3 class=\"text-xl font-bold\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0643\u0648\u0646 \u0642\u0648\u0633 \u0627\u0644\u0645\u0637\u0631<\/h3><p class=\"text-l text-blue-100\">\u0631\u062d\u0644\u0629 \u0627\u0644\u0636\u0648\u0621 \u062f\u0627\u062e\u0644 \u0642\u0637\u0631\u0629 \u0627\u0644\u0645\u0637\u0631<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"p-8 grid grid-cols-1 lg:grid-cols-2 gap-12\">\r\n <div class=\"relative bg-black\/40 rounded-2xl border border-white\/5 p-4 h-[400px] flex items-center justify-center overflow-hidden\"><canvas id=\"rainbowCanvas\" width=\"400\" height=\"400\"><\/canvas><div class=\"absolute top-4 left-4 flex flex-col gap-2\" id=\"colorList\"><\/div><\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"bg-white\/5 p-6 rounded-2xl border border-white\/10 space-y-6\"><h4 class=\"text-l font-bold text-white mb-4\">\u062a\u062a\u0628\u0639 \u0645\u0633\u0627\u0631 \u0627\u0644\u0636\u0648\u0621:<\/h4><div class=\"space-y-4\" id=\"stepButtons\"><\/div><\/div>\r\n <div class=\"p-4 bg-blue-500\/5 rounded-2xl border border-blue-500\/10\"><div class=\"flex items-center gap-2 text-blue-400 mb-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-4 h-4\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg><span class=\"text-l font-bold\">\u0644\u0645\u0627\u0630\u0627 \u0646\u0631\u0649 \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u061f<\/span><\/div><p class=\"text-[10px] text-slate-400 leading-relaxed\">\u0644\u0643\u0644 \u0644\u0648\u0646 \u0645\u0639\u0627\u0645\u0644 \u0627\u0646\u0643\u0633\u0627\u0631 \u0645\u062e\u062a\u0644\u0641 \u0641\u064a \u0627\u0644\u0645\u0627\u0621\u061b \u0641\u0627\u0644\u0644\u0648\u0646 <span class=\"text-red-400\">\u0627\u0644\u0623\u062d\u0645\u0631<\/span> \u064a\u0646\u0643\u0633\u0631 \u0628\u0623\u0642\u0644 \u0632\u0627\u0648\u064a\u0629\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0644\u0648\u0646 <span class=\"text-purple-400\">\u0627\u0644\u0628\u0646\u0641\u0633\u062c\u064a<\/span> \u064a\u0646\u0643\u0633\u0631 \u0628\u0623\u0643\u0628\u0631 \u0632\u0627\u0648\u064a\u0629. \u0647\u0630\u0627 \u0627\u0644\u0627\u062e\u062a\u0644\u0627\u0641 \u0647\u0648 \u0645\u0627 \u064a\u062c\u0639\u0644\u0646\u0627 \u0646\u0631\u0649 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0645\u0646\u0641\u0635\u0644\u0629 \u0639\u0644\u0649 \u0634\u0643\u0644 \u0642\u0648\u0633.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n rainbowContainer.appendChild(rainbowWrapper);\r\n const canvasR = document.getElementById('rainbowCanvas');\r\n const ctxR = canvasR.getContext('2d');\r\n const centerX = 200, centerY = 200, radius = 120;\r\n function drawRainbow() {\r\n ctxR.clearRect(0, 0, 400, 400);\r\n ctxR.fillStyle = 'rgba(186, 230, 253, 0.2)';\r\n ctxR.beginPath(); ctxR.arc(centerX, centerY, radius, 0, 2*Math.PI); ctxR.fill();\r\n ctxR.strokeStyle = 'rgba(255,255,255,0.2)'; ctxR.lineWidth = 2; ctxR.stroke();\r\n \/\/ \u0627\u0644\u0634\u0639\u0627\u0639 \u0627\u0644\u0633\u0627\u0642\u0637\r\n ctxR.beginPath(); ctxR.moveTo(0, centerY-40); ctxR.lineTo(centerX-113, centerY-40); ctxR.strokeStyle='white'; ctxR.lineWidth=4; ctxR.stroke();\r\n if (step >= 1) {\r\n colors.forEach((c, i) => {\r\n ctxR.beginPath(); ctxR.moveTo(centerX-113, centerY-40); ctxR.lineTo(centerX+113, centerY+40 - i*5); ctxR.strokeStyle=c.color; ctxR.lineWidth=2; ctxR.stroke();\r\n });\r\n }\r\n if (step >= 2) {\r\n colors.forEach((c, i) => {\r\n ctxR.beginPath(); ctxR.moveTo(centerX+113, centerY+40 - i*5); ctxR.lineTo(centerX-80, centerY+90 - i*3); ctxR.strokeStyle=c.color; ctxR.lineWidth=2; ctxR.stroke();\r\n });\r\n }\r\n if (step >= 3) {\r\n colors.forEach((c, i) => {\r\n ctxR.beginPath(); ctxR.moveTo(centerX-80, centerY+90 - i*3); ctxR.lineTo(0, centerY+150 + i*10); ctxR.strokeStyle=c.color; ctxR.lineWidth=2; ctxR.stroke();\r\n });\r\n }\r\n ctxR.fillStyle = '#94a3b8'; ctxR.font = '12px Cairo'; ctxR.fillText('\u0642\u0637\u0631\u0629 \u0645\u0637\u0631 \u0645\u0643\u0628\u0631\u0629', centerX, centerY+radius+30);\r\n }\r\n const stepsData = [\r\n { id: 0, title: \"1. \u0633\u0642\u0648\u0637 \u0627\u0644\u0636\u0648\u0621\", desc: \"\u0636\u0648\u0621 \u0627\u0644\u0634\u0645\u0633 \u0627\u0644\u0623\u0628\u064a\u0636 \u064a\u0635\u0637\u062f\u0645 \u0628\u0627\u0644\u0642\u0637\u0631\u0629\" },\r\n { id: 1, title: \"2. \u0627\u0644\u0627\u0646\u0643\u0633\u0627\u0631 \u0648\u0627\u0644\u062a\u062d\u0644\u0644\", desc: \"\u064a\u0646\u0643\u0633\u0631 \u0627\u0644\u0636\u0648\u0621 \u0648\u064a\u062a\u062d\u0644\u0644 \u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0637\u064a\u0641\" },\r\n { id: 2, title: \"3. \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a\", desc: \"\u064a\u0646\u0639\u0643\u0633 \u0627\u0644\u0636\u0648\u0621 \u0639\u0646 \u062c\u062f\u0627\u0631 \u0627\u0644\u0642\u0637\u0631\u0629 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\" },\r\n { id: 3, title: \"4. \u0627\u0644\u062e\u0631\u0648\u062c \u0648\u0627\u0644\u0638\u0647\u0648\u0631\", desc: \"\u064a\u0646\u0643\u0633\u0631 \u0627\u0644\u0636\u0648\u0621 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u062e\u0627\u0631\u062c\u0627\u064b \u0644\u0644\u0639\u064a\u0646\" }\r\n ];\r\n const stepDiv = document.getElementById('stepButtons');\r\n stepsData.forEach(s => {\r\n const btn = document.createElement('button');\r\n btn.className = `w-full p-4 rounded-xl border text-right transition-all flex items-center justify-between ${step === s.id ? 'bg-blue-600 border-blue-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-400 hover:bg-slate-700'}`;\r\n btn.innerHTML = `<div><div class=\"font-bold text-l\">${s.title}<\/div><div class=\"text-[10px] opacity-80\">${s.desc}<\/div><\/div>${step >= s.id ? '<div class=\"w-2 h-2 rounded-full bg-white animate-pulse\"><\/div>' : ''}`;\r\n btn.addEventListener('click', () => { step = s.id; drawRainbow(); document.querySelectorAll('#stepButtons button').forEach((b,i)=>{ if(i===s.id) b.className = 'w-full p-4 rounded-xl border text-right transition-all flex items-center justify-between bg-blue-600 border-blue-500 text-white'; else b.className = 'w-full p-4 rounded-xl border text-right transition-all flex items-center justify-between bg-slate-800 border-slate-700 text-slate-400 hover:bg-slate-700'; }); });\r\n stepDiv.appendChild(btn);\r\n });\r\n \/\/ \u0625\u0636\u0627\u0641\u0629 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u0644\u0648\u0627\u0646\r\n const colorListDiv = document.getElementById('colorList');\r\n colors.forEach(c => {\r\n const div = document.createElement('div'); div.className = 'flex items-center gap-2';\r\n div.innerHTML = `<div class=\"w-3 h-3 rounded-full\" style=\"background-color:${c.color}\"><\/div><span class=\"text-[10px] text-slate-400\">${c.name}<\/span>`;\r\n colorListDiv.appendChild(div);\r\n });\r\n drawRainbow();\r\n }\r\n\r\n \/\/ ==============================================\r\n \/\/ 4. \u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629 (FiberOpticSimulation)\r\n \/\/ ==============================================\r\n const fiberContainer = document.getElementById('fiber-sim');\r\n if (fiberContainer) {\r\n let isBent = false;\r\n const fiberWrapper = document.createElement('div');\r\n fiberWrapper.className = 'w-full max-w-4xl bg-slate-900 rounded-3xl border border-slate-800 shadow-2xl overflow-hidden font-cairo';\r\n fiberWrapper.setAttribute('dir', 'rtl');\r\n fiberWrapper.innerHTML = `\r\n <div class=\"bg-gradient-to-r from-indigo-600 to-purple-600 p-6 text-white flex items-center justify-between\">\r\n <div class=\"flex items-center gap-3\"><div class=\"p-2 bg-white\/20 rounded-lg\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-6 h-6\"><path d=\"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z\"\/><\/svg><\/div><div><h3 class=\"text-xl font-bold\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629<\/h3><p class=\"text-l text-indigo-100\">\u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0639\u0628\u0631 \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a<\/p><\/div><\/div>\r\n <\/div>\r\n <div class=\"p-8 space-y-8\">\r\n <div class=\"relative bg-black\/40 rounded-2xl border border-white\/5 p-8 h-[250px] flex items-center justify-center overflow-hidden\"><svg id=\"fiberSvg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 500 200\"><\/svg><div class=\"absolute bottom-4 left-4 flex gap-4\"><div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 bg-indigo-500\/30 rounded-full\"><\/div><span class=\"text-[10px] text-slate-400\">\u063a\u0644\u0627\u0641 (n \u0623\u0642\u0644)<\/span><\/div><div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 bg-white\/20 rounded-full\"><\/div><span class=\"text-[10px] text-slate-400\">\u0642\u0644\u0628 (n \u0623\u0643\u0628\u0631)<\/span><\/div><\/div><\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n <div class=\"space-y-4\"><button id=\"fiberToggle\" class=\"w-full p-6 rounded-2xl border-2 transition-all flex items-center justify-between bg-slate-800 border-slate-700 text-slate-400 hover:border-slate-600\"><div class=\"text-right\"><div class=\"font-bold text-l\">\u062a\u063a\u064a\u064a\u0631 \u0634\u0643\u0644 \u0627\u0644\u0644\u064a\u0641<\/div><div class=\"text-[10px] opacity-80\" id=\"fiberState\">\u0627\u0644\u0644\u064a\u0641 \u0645\u0633\u062a\u0642\u064a\u0645 \u0627\u0644\u0622\u0646<\/div><\/div><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-6 h-6\"><path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\"\/><\/svg><\/button><div class=\"p-4 bg-indigo-500\/5 rounded-2xl border border-indigo-500\/10 flex items-start gap-3\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-5 h-5 text-indigo-400 shrink-0\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg><p class=\"text-[10px] text-slate-400 leading-relaxed\">\u0644\u0627\u062d\u0638 \u0643\u064a\u0641 \u064a\u0628\u0642\u0649 \u0627\u0644\u0636\u0648\u0621 \u0645\u062d\u0635\u0648\u0631\u0627\u064b \u062f\u0627\u062e\u0644 \u0627\u0644\u0642\u0644\u0628 \u062d\u062a\u0649 \u0639\u0646\u062f \u0627\u0646\u062d\u0646\u0627\u0621 \u0627\u0644\u0644\u064a\u0641\u060c \u0648\u0630\u0644\u0643 \u0628\u0641\u0636\u0644 <span class=\"text-white font-bold\">\u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0627\u0644\u0643\u0644\u064a \u0627\u0644\u062f\u0627\u062e\u0644\u064a<\/span> \u0627\u0644\u0645\u0633\u062a\u0645\u0631.<\/p><\/div><\/div>\r\n <div class=\"bg-white\/5 p-6 rounded-2xl border border-white\/10\"><h4 class=\"text-l font-bold text-indigo-300 mb-4 flex items-center gap-2\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-4 h-4\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg>\u0645\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0623\u0644\u064a\u0627\u0641 \u0627\u0644\u0636\u0648\u0626\u064a\u0629:<\/h4><ul class=\"space-y-3\"><li class=\"flex items-center gap-2 text-[10px] text-slate-400\"><div class=\"w-1 h-1 bg-indigo-500 rounded-full\"><\/div>\u0646\u0642\u0644 \u0643\u0645\u064a\u0627\u062a \u0647\u0627\u0626\u0644\u0629 \u0645\u0646 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a (\u0633\u0631\u0639\u0629 \u0641\u0627\u0626\u0642\u0629).<\/li><li class=\"flex items-center gap-2 text-[10px] text-slate-400\"><div class=\"w-1 h-1 bg-indigo-500 rounded-full\"><\/div>\u0639\u062f\u0645 \u0627\u0644\u062a\u0623\u062b\u0631 \u0628\u0627\u0644\u062a\u0634\u0648\u064a\u0634 \u0627\u0644\u0643\u0647\u0631\u0648\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a.<\/li><li class=\"flex items-center gap-2 text-[10px] text-slate-400\"><div class=\"w-1 h-1 bg-indigo-500 rounded-full\"><\/div>\u062e\u0641\u0629 \u0627\u0644\u0648\u0632\u0646 \u0648\u0635\u063a\u0631 \u0627\u0644\u062d\u062c\u0645 \u0645\u0642\u0627\u0631\u0646\u0629 \u0628\u0627\u0644\u0623\u0633\u0644\u0627\u0643 \u0627\u0644\u0646\u062d\u0627\u0633\u064a\u0629.<\/li><li class=\"flex items-center gap-2 text-[10px] text-slate-400\"><div class=\"w-1 h-1 bg-indigo-500 rounded-full\"><\/div>\u0623\u0645\u0627\u0646 \u0639\u0627\u0644\u064a \u0648\u0635\u0639\u0648\u0628\u0629 \u0627\u062e\u062a\u0631\u0627\u0642 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a.<\/li><\/ul><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n fiberContainer.appendChild(fiberWrapper);\r\n const svgNS = \"http:\/\/www.w3.org\/2000\/svg\";\r\n const svg = document.getElementById('fiberSvg');\r\n function updateFiber() {\r\n svg.innerHTML = '';\r\n const claddingPath = document.createElementNS(svgNS, 'path');\r\n const corePath = document.createElementNS(svgNS, 'path');\r\n const lightPath = document.createElementNS(svgNS, 'path');\r\n if (isBent) {\r\n claddingPath.setAttribute('d', 'M 0,100 C 150,100 250,50 350,150 S 450,100 500,100');\r\n corePath.setAttribute('d', 'M 0,100 C 150,100 250,50 350,150 S 450,100 500,100');\r\n lightPath.setAttribute('d', 'M 0,100 L 50,85 L 100,115 L 150,85 L 200,100 L 250,60 L 300,90 L 350,140 L 400,120 L 450,90 L 500,100');\r\n } else {\r\n claddingPath.setAttribute('d', 'M 0,100 L 500,100');\r\n corePath.setAttribute('d', 'M 0,100 L 500,100');\r\n lightPath.setAttribute('d', 'M 0,100 L 40,90 L 80,110 L 120,90 L 160,110 L 200,90 L 240,110 L 280,90 L 320,110 L 360,90 L 400,110 L 440,90 L 480,110 L 500,100');\r\n }\r\n claddingPath.setAttribute('fill', 'none'); claddingPath.setAttribute('stroke', 'rgba(99, 102, 241, 0.2)'); claddingPath.setAttribute('stroke-width', '40'); claddingPath.setAttribute('stroke-linecap', 'round');\r\n corePath.setAttribute('fill', 'none'); corePath.setAttribute('stroke', 'rgba(255,255,255,0.1)'); corePath.setAttribute('stroke-width', '15'); corePath.setAttribute('stroke-linecap', 'round');\r\n lightPath.setAttribute('fill', 'none'); lightPath.setAttribute('stroke', '#fbbf24'); lightPath.setAttribute('stroke-width', '2'); lightPath.setAttribute('class', 'drop-shadow-[0_0_5px_rgba(251,191,36,0.8)]');\r\n svg.appendChild(claddingPath); svg.appendChild(corePath); svg.appendChild(lightPath);\r\n const text1 = document.createElementNS(svgNS, 'text'); text1.setAttribute('x', '20'); text1.setAttribute('y', '70'); text1.setAttribute('fill', '#6366f1'); text1.setAttribute('font-size', '10'); text1.textContent = '\u0627\u0644\u063a\u0644\u0627\u0641 (Cladding)';\r\n const text2 = document.createElementNS(svgNS, 'text'); text2.setAttribute('x', '20'); text2.setAttribute('y', '105'); text2.setAttribute('fill', '#94a3b8'); text2.setAttribute('font-size', '8'); text2.textContent = '\u0627\u0644\u0642\u0644\u0628 (Core)';\r\n svg.appendChild(text1); svg.appendChild(text2);\r\n document.getElementById('fiberState').innerText = isBent ? '\u0627\u0644\u0644\u064a\u0641 \u0645\u0646\u062d\u0646\u064a \u0627\u0644\u0622\u0646' : '\u0627\u0644\u0644\u064a\u0641 \u0645\u0633\u062a\u0642\u064a\u0645 \u0627\u0644\u0622\u0646';\r\n }\r\n document.getElementById('fiberToggle').addEventListener('click', () => { isBent = !isBent; updateFiber(); });\r\n updateFiber();\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-18388","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18388","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=18388"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18388\/revisions"}],"predecessor-version":[{"id":18389,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18388\/revisions\/18389"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}