\u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a - \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 display: block;\r\n margin: 0 auto;\r\n border-radius: 0.75rem;\r\n box-shadow: 0 0 20px rgba(0,0,0,0.5);\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: #6366f1;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .btn-active {\r\n background-color: #f59e0b !important;\r\n color: black !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n \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\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u0639\u0627\u0634\u0631<\/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 \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\u0625\u062b\u0631\u0627\u0621_\u0648\u0627\u0644\u062a\u0648\u0633\u0639__\u0627\u0644\u0648\u0639\u0627\u0621_\u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a_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\u0625\u062b\u0631\u0627\u0621_\u0648\u0627\u0644\u062a\u0648\u0633\u0639__\u0627\u0644\u0648\u0639\u0627\u0621_\u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a_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 <div class=\"space-y-8\" dir=\"rtl\">\r\n <div class=\"bg-gradient-to-br from-indigo-900 to-slate-900 p-8 rounded-3xl shadow-2xl border border-indigo-500\/30 relative overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-full h-full bg-[url('https:\/\/www.transparenttextures.com\/patterns\/cubes.png')] opacity-10\"><\/div>\r\n <h1 class=\"text-4xl md:text-5xl font-extrabold mb-4 leading-tight text-white\">\u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0648\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627: \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a (Magnetic Bottle)<\/h1>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-indigo-500\/20 backdrop-blur-l\">\r\n <p class=\"text-slate-300\">\u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0647\u0648 \u062d\u0642\u0644 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0645\u0635\u0645\u0645 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u062d\u0628\u0633 \u0648\u0627\u062d\u062a\u0648\u0627\u0621 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627 \u0641\u064a \u062d\u064a\u0632 \u0645\u062d\u062f\u062f\u060c \u0628\u063a\u0631\u0636 \u0625\u062d\u062f\u0627\u062b \u0627\u0644\u0627\u0646\u062f\u0645\u0627\u062c \u0627\u0644\u0646\u0648\u0648\u064a \u0648\u0627\u0644\u0627\u0633\u062a\u0641\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0647\u0627\u0626\u0644\u0629 \u0627\u0644\u0645\u0646\u0637\u0644\u0642\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-indigo-500 rounded-full\"><\/span>\u0643\u064a\u0641 \u064a\u0639\u0645\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u061f<\/h2>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-indigo-500\/20\">\r\n <p class=\"text-slate-300 leading-relaxed mb-4\">\u0644\u062a\u062d\u0642\u064a\u0642 \u0627\u0644\u0627\u0646\u062f\u0645\u0627\u062c \u0627\u0644\u0646\u0648\u0648\u064a\u060c \u064a\u062c\u0628 \u062a\u0633\u062e\u064a\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0625\u0644\u0649 \u0623\u0643\u062b\u0631 \u0645\u0646 <strong class=\"text-white\">100 \u0645\u0644\u064a\u0648\u0646 \u062f\u0631\u062c\u0629 \u0645\u0626\u0648\u064a\u0629<\/strong>. \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0644\u0629 \u062a\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0627\u062f\u0629 \u0625\u0644\u0649 \u0628\u0644\u0627\u0632\u0645\u0627 (\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u0634\u062d\u0648\u0646\u0629). \u0628\u0645\u0627 \u0623\u0646\u0647 \u0644\u0627 \u064a\u0648\u062c\u062f \u0648\u0639\u0627\u0621 \u0645\u0627\u062f\u064a \u064a\u062a\u062d\u0645\u0644 \u0647\u0630\u0647 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u064a\u064f\u0633\u062a\u062e\u062f\u0645 <strong class=\"text-white\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a<\/strong> \u0643\u0648\u0639\u0627\u0621 \u063a\u064a\u0631 \u0645\u0631\u0626\u064a \u064a\u0645\u0646\u0639 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627 \u0645\u0646 \u0644\u0645\u0633 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0645\u0641\u0627\u0639\u0644.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-amber-500 rounded-full\"><\/span>\u0645\u0628\u062f\u0623 \u0627\u0644\u0645\u0631\u0622\u0629 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629 (Magnetic Mirror)<\/h2>\r\n <div class=\"bg-amber-900\/10 p-6 rounded-2xl border border-amber-500\/30\">\r\n <p class=\"text-slate-300 mb-6\">\u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0645\u0644\u0641\u0627\u062a \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0644\u062a\u0648\u0644\u064a\u062f \u0645\u062c\u0627\u0644 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0636\u0639\u064a\u0641 \u0641\u064a \u0627\u0644\u0645\u0646\u062a\u0635\u0641 \u0648\u0642\u0648\u064a \u062c\u062f\u0627\u064b \u0639\u0646\u062f \u0627\u0644\u0637\u0631\u0641\u064a\u0646. \u062a\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0628\u0634\u0643\u0644 \u062d\u0644\u0632\u0648\u0646\u064a\u060c \u0648\u0639\u0646\u062f\u0645\u0627 \u062a\u0642\u062a\u0631\u0628 \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0627\u0644\u0642\u0648\u064a\u0629\u060c \u062a\u0631\u062a\u062f \u0644\u0644\u062e\u0644\u0641 \u0643\u0645\u0627 \u0644\u0648 \u0623\u0646\u0647\u0627 \u0627\u0635\u0637\u062f\u0645\u062a \u0628\u0645\u0631\u0622\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"simulation-container\" id=\"magnetic-bottle-simulation\"><\/div>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-rose-500 rounded-full\"><\/span>\u0627\u0644\u062a\u062d\u062f\u064a \u0627\u0644\u0643\u0628\u064a\u0631: \u062a\u0633\u0631\u0628 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627<\/h2>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-rose-500\/20\">\r\n <p class=\"text-slate-300 leading-relaxed\">\u0627\u0644\u0645\u0634\u0643\u0644\u0629 \u0623\u0646 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u062a\u062d\u0631\u0643 \u0628\u0645\u0648\u0627\u0632\u0627\u0629 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644\u060c \u0623\u0648 \u0628\u0632\u0627\u0648\u064a\u0629 \u0635\u063a\u064a\u0631\u0629 \u062c\u062f\u0627\u064b\u060c \u0644\u0627 \u062a\u0631\u062a\u062f \u0628\u0644 \u062a\u0647\u0631\u0628 \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0627\u0644\u0645\u0641\u062a\u0648\u062d\u0629. \u064a\u064f\u0639\u0631\u0641 \u0647\u0630\u0627 \u0627\u0644\u0646\u0637\u0627\u0642 \u0628\u0627\u0633\u0645 <strong class=\"text-rose-400\">\"\u0645\u062e\u0631\u0648\u0637 \u0627\u0644\u0641\u0642\u062f\" (Loss Cone)<\/strong>\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0627\u0644\u0627\u062d\u062a\u0648\u0627\u0621 \u0637\u0648\u064a\u0644 \u0627\u0644\u0623\u0645\u062f \u0635\u0639\u0628\u0627\u064b.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-emerald-500 rounded-full\"><\/span>\u0623\u0646\u0648\u0627\u0639 \u062a\u0635\u0627\u0645\u064a\u0645 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/5\"><h4 class=\"font-bold text-emerald-400 mb-3\">1. \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u0627\u0644\u0645\u0641\u062a\u0648\u062d\u0629 (Open-Ended)<\/h4><p class=\"text-l text-slate-400 leading-relaxed\">\u0645\u062b\u0644 \u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0645\u0631\u0622\u0629 \u0627\u0644\u0643\u0644\u0627\u0633\u064a\u0643\u064a\u0629. \u062a\u0639\u0627\u0646\u064a \u0645\u0646 \u0627\u0644\u062a\u0633\u0631\u0628 \u0627\u0644\u062c\u0648\u0647\u0631\u064a \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0627\u0644\u0645\u0641\u062a\u0648\u062d\u0629 \u0648\u0639\u062f\u0645 \u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/5\"><h4 class=\"font-bold text-emerald-400 mb-3\">2. \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u0627\u0644\u062d\u0644\u0642\u064a\u0629 (Toroidal)<\/h4><p class=\"text-l text-slate-400 leading-relaxed\">\u062a\u064f\u063a\u0644\u0642 \u0627\u0644\u0623\u0646\u0628\u0648\u0628 \u0639\u0644\u0649 \u0634\u0643\u0644 \u062d\u0644\u0642\u0629 (\u062f\u0648\u0646\u0627\u062a) \u0644\u062d\u0644 \u0645\u0634\u0643\u0644\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641. \u0623\u0634\u0647\u0631\u0647\u0627:<br\/><br\/>\u2022 <strong class=\"text-white\">\u0627\u0644\u062a\u0648\u0643\u0627\u0645\u0627\u0643 (Tokamak):<\/strong> \u0627\u0644\u0623\u0643\u062b\u0631 \u0627\u0646\u062a\u0634\u0627\u0631\u0627\u064b (\u0645\u062b\u0644 \u0645\u0634\u0631\u0648\u0639 ITER).<br\/>\u2022 <strong class=\"text-white\">\u0627\u0644\u0633\u062a\u064a\u0644\u064a\u0631\u0627\u062a\u0648\u0631 (Stellarator):<\/strong> \u064a\u0633\u062a\u062e\u062f\u0645 \u0645\u0644\u0641\u0627\u062a \u0645\u0644\u062a\u0648\u064a\u0629 \u0645\u0639\u0642\u062f\u0629 \u0644\u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0645\u0633\u062a\u0645\u0631.<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-sky-500 rounded-full\"><\/span>\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062d\u062f\u064a\u062b\u0629<\/h2>\r\n <div class=\"bg-sky-900\/20 p-6 rounded-2xl border border-sky-500\/30\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-start gap-4\"><div class=\"p-2 bg-sky-500\/20 rounded-lg text-sky-400\"><\/div><div><h5 class=\"text-white font-bold\">\u062a\u062c\u0631\u0628\u0629 WHAM (2024)<\/h5><p class=\"text-l text-slate-400\">\u062d\u0642\u0642\u062a \u0631\u0642\u0645\u0627\u064b \u0642\u064a\u0627\u0633\u064a\u0627\u064b \u0628\u062d\u0628\u0633 \u0628\u0644\u0627\u0632\u0645\u0627 \u0628\u0645\u062c\u0627\u0644 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0634\u062f\u062a\u0647 17 \u062a\u0633\u0644\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u0627\u062a \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u062a\u0648\u0635\u064a\u0644.<\/p><\/div><\/div>\r\n <div class=\"flex items-start gap-4\"><div class=\"p-2 bg-sky-500\/20 rounded-lg text-sky-400\"><\/div><div><h5 class=\"text-white font-bold\">\u0637\u0627\u0642\u0629 \u0627\u0644\u0627\u0646\u062f\u0645\u0627\u062c<\/h5><p class=\"text-l text-slate-400\">\u0625\u0646\u062a\u0627\u062c \u0637\u0627\u0642\u0629 \u0646\u0638\u064a\u0641\u0629 \u0648\u0622\u0645\u0646\u0629 \u0644\u0627 \u062a\u0646\u0636\u0628 (\u0645\u0634\u0631\u0648\u0639 ITER \u0627\u0644\u0639\u0627\u0644\u0645\u064a).<\/p><\/div><\/div>\r\n <div class=\"flex items-start gap-4\"><div class=\"p-2 bg-sky-500\/20 rounded-lg text-sky-400\"><\/div><div><h5 class=\"text-white font-bold\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0641\u0636\u0627\u0621<\/h5><p class=\"text-l text-slate-400\">\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0645\u0631\u0643\u0628\u0627\u062a \u0627\u0644\u0641\u0636\u0627\u0626\u064a\u0629 \u0645\u0646 \u0627\u0644\u0625\u0634\u0639\u0627\u0639\u0627\u062a \u0627\u0644\u0643\u0648\u0646\u064a\u0629 \u0627\u0644\u0636\u0627\u0631\u0629 \u0639\u0628\u0631 \u062d\u0642\u0648\u0644 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629 \u0648\u0627\u0642\u064a\u0629.<\/p><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"bg-slate-800\/80 p-6 rounded-2xl border border-white\/10 text-center\">\r\n <p class=\"text-slate-400 text-l italic\">\"\u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0647\u0648 \u0627\u0644\u0645\u0641\u062a\u0627\u062d \u0644\u0641\u062a\u062d \u0622\u0641\u0627\u0642 \u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u060c \u062d\u064a\u062b \u0646\u062d\u0627\u0643\u064a \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u062d\u062f\u062b \u0641\u064a \u0642\u0644\u0628 \u0627\u0644\u0646\u062c\u0648\u0645 \u0644\u0625\u0646\u062a\u0627\u062c \u0637\u0627\u0642\u0629 \u0646\u0638\u064a\u0641\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0631\u0636.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function() {\r\n const container = document.getElementById('magnetic-bottle-simulation');\r\n if (!container) return;\r\n\r\n \/\/ \u0628\u0646\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 = 'bg-slate-900 p-6 rounded-2xl border border-slate-700 shadow-xl w-full my-8 font-cairo';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <div class=\"flex flex-col md:flex-row justify-between items-center mb-6 gap-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"p-2 bg-indigo-500\/20 rounded-lg text-indigo-400\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-white\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a (Magnetic Bottle)<\/h3>\r\n <\/div>\r\n <div class=\"flex gap-2\">\r\n <button id=\"btn-play-pause\" class=\"p-2 rounded-lg transition-all bg-amber-500 text-black\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>\r\n <\/button>\r\n <button id=\"btn-reset\" class=\"p-2 rounded-lg bg-slate-800 text-slate-300 hover:bg-slate-700\">\u0625\u0639\u0627\u062f\u0629 \u062d\u0642\u0646 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\r\n <div class=\"lg:col-span-3 relative aspect-video bg-black rounded-xl overflow-hidden border border-slate-700\">\r\n <canvas id=\"magnetic-canvas\" width=\"600\" height=\"340\" class=\"w-full h-full block\"><\/canvas>\r\n <div class=\"absolute bottom-4 right-4 flex flex-col gap-2 bg-black\/60 backdrop-blur-md p-3 rounded-lg border border-white\/10\">\r\n <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 rounded-full bg-blue-400\"><\/div><span class=\"text-[10px] text-slate-300\">\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a<\/span><\/div>\r\n <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 rounded-full bg-red-400\"><\/div><span class=\"text-[10px] text-slate-300\">\u0623\u064a\u0648\u0646\u0627\u062a<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-white\/5\">\r\n <label class=\"text-l text-slate-400 block mb-2 flex justify-between\">\r\n <span>\u0642\u0648\u0629 \u0627\u0644\u0645\u0631\u0622\u0629 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629<\/span>\r\n <span id=\"mirror-strength-value\" class=\"text-indigo-400 font-mono\">8.0T<\/span>\r\n <\/label>\r\n <input id=\"mirror-slider\" type=\"range\" min=\"0.1\" max=\"2\" step=\"0.1\" value=\"0.8\" class=\"w-full accent-indigo-500\">\r\n <p class=\"text-[9px] text-slate-500 mt-1\">\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0642\u0648\u0629 \u062a\u0642\u0644\u0644 \u0645\u0646 \"\u0645\u062e\u0631\u0648\u0637 \u0627\u0644\u0641\u0642\u062f\" \u0648\u062a\u0633\u0631\u0628 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-white\/5\">\r\n <label class=\"text-l text-slate-400 block mb-2\">\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627<\/label>\r\n <input id=\"particle-count-slider\" type=\"range\" min=\"10\" max=\"100\" step=\"10\" value=\"30\" class=\"w-full accent-rose-500\">\r\n <\/div>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-xl border border-indigo-500\/30\">\r\n <h4 class=\"text-indigo-400 font-bold mb-2 text-l flex items-center gap-1\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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>\r\n \u0645\u0628\u062f\u0623 \u0627\u0644\u0639\u0645\u0644:\r\n <\/h4>\r\n <p class=\"text-[10px] text-slate-300 leading-relaxed\">\u062a\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0628\u0634\u0643\u0644 \u062d\u0644\u0632\u0648\u0646\u064a. \u0639\u0646\u062f \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u062d\u064a\u062b \u0627\u0644\u0645\u062c\u0627\u0644 \u0642\u0648\u064a\u060c \u062a\u0631\u062a\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0644\u0644\u062e\u0644\u0641. \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u062a\u062d\u0631\u0643 \u0628\u0632\u0627\u0648\u064a\u0629 \u062d\u0627\u062f\u0629 \u062c\u062f\u0627\u064b \u062a\u0647\u0631\u0628 \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 (\u0645\u062e\u0631\u0648\u0637 \u0627\u0644\u0641\u0642\u062f).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n \/\/ --- \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 ---\r\n let canvas = document.getElementById('magnetic-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 600, height = 340;\r\n canvas.width = width; canvas.height = height;\r\n\r\n let isPlaying = true;\r\n let mirrorStrength = 0.8; \/\/ \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0641\u0639\u0644\u064a\u0629 (0-2)\r\n let particleCount = 30;\r\n\r\n \/\/ \u0628\u0646\u064a\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\r\n class Particle {\r\n constructor(x, y, vx, vy, vz, color) {\r\n this.x = x;\r\n this.y = y;\r\n this.vx = vx;\r\n this.vy = vy;\r\n this.vz = vz;\r\n this.color = color;\r\n this.escaped = false;\r\n }\r\n }\r\n\r\n let particles = [];\r\n\r\n function initParticles(count) {\r\n particles = [];\r\n for (let i = 0; i < count; i++) {\r\n particles.push(new Particle(\r\n 0, \/\/ x \u0627\u0628\u062a\u062f\u0627\u0626\u064a (\u0645\u0631\u0643\u0632)\r\n (Math.random() - 0.5) * 40, \/\/ y\r\n (Math.random() - 0.5) * 4, \/\/ vx\r\n (Math.random() - 0.5) * 2, \/\/ vy\r\n (Math.random() - 0.5) * 2, \/\/ vz\r\n Math.random() > 0.5 ? '#60a5fa' : '#f87171' \/\/ \u0623\u0632\u0631\u0642 \u0623\u0648 \u0623\u062d\u0645\u0631\r\n ));\r\n }\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627\r\n function updateParticleCount(newCount) {\r\n particleCount = newCount;\r\n initParticles(particleCount);\r\n }\r\n\r\n \/\/ \u062f\u0648\u0631\u0629 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\r\n let animationId = null;\r\n const centerX = width \/ 2;\r\n const centerY = height \/ 2;\r\n const bottleLength = 200; \/\/ \u0646\u0635\u0641 \u0637\u0648\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 (\u0645\u0646 \u0627\u0644\u0645\u0631\u0643\u0632 \u0625\u0644\u0649 \u0627\u0644\u0637\u0631\u0641)\r\n\r\n function draw() {\r\n if (!ctx) return;\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n \/\/ \u0631\u0633\u0645 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a (\u0645\u0646\u062d\u0646\u064a\u0627\u062a)\r\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.2)';\r\n ctx.lineWidth = 1;\r\n for (let i = -3; i <= 3; i++) {\r\n const yOffset = i * 20;\r\n ctx.beginPath();\r\n ctx.moveTo(centerX - bottleLength, centerY + yOffset * 0.5);\r\n ctx.bezierCurveTo(\r\n centerX - bottleLength \/ 2, centerY + yOffset * 1.5,\r\n centerX + bottleLength \/ 2, centerY + yOffset * 1.5,\r\n centerX + bottleLength, centerY + yOffset * 0.5\r\n );\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0644\u0641\u0627\u062a (\u0627\u0644\u0645\u0631\u0627\u064a\u0627)\r\n ctx.fillStyle = 'rgba(30, 41, 59, 0.8)';\r\n ctx.strokeStyle = '#6366f1';\r\n ctx.lineWidth = 3;\r\n \/\/ \u0645\u0644\u0641 \u0623\u064a\u0633\u0631\r\n ctx.beginPath();\r\n ctx.ellipse(centerX - bottleLength, centerY, 20, 60, 0, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.stroke();\r\n \/\/ \u0645\u0644\u0641 \u0623\u064a\u0645\u0646\r\n ctx.beginPath();\r\n ctx.ellipse(centerX + bottleLength, centerY, 20, 60, 0, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.stroke();\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0648\u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a\r\n for (let p of particles) {\r\n if (p.escaped) continue;\r\n\r\n \/\/ \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a: \u0642\u0648\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u062a\u0632\u062f\u0627\u062f \u0643\u0644\u0645\u0627 \u0627\u0642\u062a\u0631\u0628\u0646\u0627 \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641\r\n const distFromCenter = Math.abs(p.x);\r\n const fieldStrength = 1 + (distFromCenter \/ bottleLength) * mirrorStrength * 5;\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0639\u0646\u062f \u0627\u0644\u0623\u0637\u0631\u0627\u0641\r\n if (distFromCenter > bottleLength - 10) {\r\n \/\/ \u062d\u0633\u0627\u0628 \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062c\u0633\u064a\u0645 \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644\r\n const angle = Math.atan2(Math.sqrt(p.vy * p.vy + p.vz * p.vz), Math.abs(p.vx));\r\n const lossConeAngle = 0.3 \/ mirrorStrength; \/\/ \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0642\u0648\u0629 \u0627\u0644\u0645\u0631\u0622\u0629\u060c \u0635\u063a\u0631 \u0645\u062e\u0631\u0648\u0637 \u0627\u0644\u0641\u0642\u062f\r\n if (angle < lossConeAngle) {\r\n p.escaped = true; \/\/ \u0647\u0631\u0648\u0628 \u0627\u0644\u062c\u0633\u064a\u0645\r\n } else {\r\n p.vx *= -1; \/\/ \u0627\u0646\u0639\u0643\u0627\u0633\r\n p.x += p.vx * 2; \/\/ \u0627\u0644\u0627\u0628\u062a\u0639\u0627\u062f \u0639\u0646 \u0627\u0644\u062d\u0627\u0641\u0629\r\n }\r\n }\r\n\r\n \/\/ \u062d\u0631\u0643\u0629 \u062d\u0644\u0632\u0648\u0646\u064a\u0629 (\u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0640 vz)\r\n const time = Date.now() * 0.005;\r\n const spiralRadius = 5 \/ fieldStrength;\r\n const spiralY = p.y + Math.sin(time + p.x * 0.1) * spiralRadius;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0648\u0642\u0639\r\n p.x += p.vx;\r\n p.y += p.vy * 0.1;\r\n\r\n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\r\n ctx.fillStyle = p.color;\r\n ctx.shadowBlur = 10;\r\n ctx.shadowColor = p.color;\r\n ctx.beginPath();\r\n ctx.arc(centerX + p.x, centerY + spiralY, 3, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n }\r\n\r\n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a\r\n ctx.fillStyle = 'white';\r\n ctx.font = '10px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('\u0645\u0631\u0622\u0629 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629', centerX - bottleLength, centerY - 70);\r\n ctx.fillText('\u0645\u0631\u0622\u0629 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629', centerX + bottleLength, centerY - 70);\r\n ctx.fillText('\u0628\u0644\u0627\u0632\u0645\u0627 \u0645\u062d\u0635\u0648\u0631\u0629', centerX, centerY + 80);\r\n\r\n \/\/ \u0627\u0633\u062a\u0645\u0631\u0627\u0631 \u0627\u0644\u062d\u0644\u0642\u0629 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0639\u0645\u0644\r\n if (isPlaying) {\r\n animationId = requestAnimationFrame(draw);\r\n }\r\n }\r\n\r\n \/\/ \u0628\u062f\u0621 \u0627\u0644\u062d\u0644\u0642\u0629 \u064a\u062f\u0648\u064a\u0627\u064b\r\n function startAnimation() {\r\n if (animationId) cancelAnimationFrame(animationId);\r\n animationId = requestAnimationFrame(draw);\r\n }\r\n\r\n \/\/ \u0631\u0628\u0637 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u062d\u0643\u0645\r\n const playPauseBtn = document.getElementById('btn-play-pause');\r\n const resetBtn = document.getElementById('btn-reset');\r\n const mirrorSlider = document.getElementById('mirror-slider');\r\n const mirrorValueSpan = document.getElementById('mirror-strength-value');\r\n const countSlider = document.getElementById('particle-count-slider');\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0642\u064a\u0645\u0629 \u0642\u0648\u0629 \u0627\u0644\u0645\u0631\u0622\u0629\r\n mirrorSlider.addEventListener('input', (e) => {\r\n mirrorStrength = parseFloat(e.target.value);\r\n mirrorValueSpan.innerText = (mirrorStrength * 10).toFixed(1) + 'T';\r\n \/\/ \u0644\u0627 \u062d\u0627\u062c\u0629 \u0644\u0625\u0639\u0627\u062f\u0629 \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a\u060c \u0641\u0642\u0637 \u0627\u0644\u0642\u0648\u0629 \u062a\u062a\u063a\u064a\u0631 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u064b\r\n });\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627\r\n countSlider.addEventListener('input', (e) => {\r\n const newCount = parseInt(e.target.value);\r\n updateParticleCount(newCount);\r\n });\r\n\r\n \/\/ \u062a\u0634\u063a\u064a\u0644\/\u0625\u064a\u0642\u0627\u0641\r\n playPauseBtn.addEventListener('click', () => {\r\n isPlaying = !isPlaying;\r\n if (isPlaying) {\r\n playPauseBtn.classList.remove('bg-emerald-600');\r\n playPauseBtn.classList.add('bg-amber-500', 'text-black');\r\n playPauseBtn.innerHTML = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>';\r\n startAnimation();\r\n } else {\r\n playPauseBtn.classList.remove('bg-amber-500', 'text-black');\r\n playPauseBtn.classList.add('bg-emerald-600', 'text-white');\r\n playPauseBtn.innerHTML = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>';\r\n if (animationId) cancelAnimationFrame(animationId);\r\n }\r\n });\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062d\u0642\u0646 (\u0625\u0639\u0627\u062f\u0629 \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a)\r\n resetBtn.addEventListener('click', () => {\r\n initParticles(particleCount);\r\n \/\/ \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u062a\u0648\u0642\u0641\u0629\u060c \u0646\u0639\u064a\u062f \u062a\u0634\u063a\u064a\u0644\u0647\u0627 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0623\u0648 \u0646\u062a\u0631\u0643\u0647\u0627 \u0643\u0645\u0627 \u0647\u064a\r\n if (!isPlaying) {\r\n \/\/ \u0646\u0631\u0633\u0645 \u0644\u0642\u0637\u0629 \u0648\u0627\u062d\u062f\u0629 \u0644\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0634\u0627\u0634\u0629\r\n draw();\r\n }\r\n });\r\n\r\n \/\/ \u0627\u0644\u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0623\u0648\u0644\u064a\u0629\r\n initParticles(particleCount);\r\n startAnimation();\r\n\r\n \/\/ \u062a\u0646\u0638\u064a\u0641 \u0639\u0646\u062f \u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0635\u0641\u062d\u0629 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)\r\n window.addEventListener('beforeunload', () => {\r\n if (animationId) cancelAnimationFrame(animationId);\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-18423","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18423","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=18423"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18423\/revisions"}],"predecessor-version":[{"id":18424,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18423\/revisions\/18424"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a - \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 display: block;\r\n margin: 0 auto;\r\n border-radius: 0.75rem;\r\n box-shadow: 0 0 20px rgba(0,0,0,0.5);\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: #6366f1;\r\n cursor: pointer;\r\n border: none;\r\n }\r\n .btn-active {\r\n background-color: #f59e0b !important;\r\n color: black !important;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n \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\u0625\u062b\u0631\u0627\u0621 \u0648\u0627\u0644\u062a\u0648\u0633\u0639: \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u0639\u0627\u0634\u0631<\/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 \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\u0625\u062b\u0631\u0627\u0621_\u0648\u0627\u0644\u062a\u0648\u0633\u0639__\u0627\u0644\u0648\u0639\u0627\u0621_\u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a_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\u0625\u062b\u0631\u0627\u0621_\u0648\u0627\u0644\u062a\u0648\u0633\u0639__\u0627\u0644\u0648\u0639\u0627\u0621_\u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a_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 <div class=\"space-y-8\" dir=\"rtl\">\r\n <div class=\"bg-gradient-to-br from-indigo-900 to-slate-900 p-8 rounded-3xl shadow-2xl border border-indigo-500\/30 relative overflow-hidden\">\r\n <div class=\"absolute top-0 left-0 w-full h-full bg-[url('https:\/\/www.transparenttextures.com\/patterns\/cubes.png')] opacity-10\"><\/div>\r\n <h1 class=\"text-4xl md:text-5xl font-extrabold mb-4 leading-tight text-white\">\u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 \u0648\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627: \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a (Magnetic Bottle)<\/h1>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-indigo-500\/20 backdrop-blur-l\">\r\n <p class=\"text-slate-300\">\u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0647\u0648 \u062d\u0642\u0644 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0645\u0635\u0645\u0645 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u062d\u0628\u0633 \u0648\u0627\u062d\u062a\u0648\u0627\u0621 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627 \u0641\u064a \u062d\u064a\u0632 \u0645\u062d\u062f\u062f\u060c \u0628\u063a\u0631\u0636 \u0625\u062d\u062f\u0627\u062b \u0627\u0644\u0627\u0646\u062f\u0645\u0627\u062c \u0627\u0644\u0646\u0648\u0648\u064a \u0648\u0627\u0644\u0627\u0633\u062a\u0641\u0627\u062f\u0629 \u0645\u0646 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0647\u0627\u0626\u0644\u0629 \u0627\u0644\u0645\u0646\u0637\u0644\u0642\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-indigo-500 rounded-full\"><\/span>\u0643\u064a\u0641 \u064a\u0639\u0645\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u061f<\/h2>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-indigo-500\/20\">\r\n <p class=\"text-slate-300 leading-relaxed mb-4\">\u0644\u062a\u062d\u0642\u064a\u0642 \u0627\u0644\u0627\u0646\u062f\u0645\u0627\u062c \u0627\u0644\u0646\u0648\u0648\u064a\u060c \u064a\u062c\u0628 \u062a\u0633\u062e\u064a\u0646 \u0627\u0644\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646 \u0625\u0644\u0649 \u0623\u0643\u062b\u0631 \u0645\u0646 <strong class=\"text-white\">100 \u0645\u0644\u064a\u0648\u0646 \u062f\u0631\u062c\u0629 \u0645\u0626\u0648\u064a\u0629<\/strong>. \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0644\u0629 \u062a\u062a\u062d\u0648\u0644 \u0627\u0644\u0645\u0627\u062f\u0629 \u0625\u0644\u0649 \u0628\u0644\u0627\u0632\u0645\u0627 (\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u0634\u062d\u0648\u0646\u0629). \u0628\u0645\u0627 \u0623\u0646\u0647 \u0644\u0627 \u064a\u0648\u062c\u062f \u0648\u0639\u0627\u0621 \u0645\u0627\u062f\u064a \u064a\u062a\u062d\u0645\u0644 \u0647\u0630\u0647 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u064a\u064f\u0633\u062a\u062e\u062f\u0645 <strong class=\"text-white\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a<\/strong> \u0643\u0648\u0639\u0627\u0621 \u063a\u064a\u0631 \u0645\u0631\u0626\u064a \u064a\u0645\u0646\u0639 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627 \u0645\u0646 \u0644\u0645\u0633 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0645\u0641\u0627\u0639\u0644.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-amber-500 rounded-full\"><\/span>\u0645\u0628\u062f\u0623 \u0627\u0644\u0645\u0631\u0622\u0629 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629 (Magnetic Mirror)<\/h2>\r\n <div class=\"bg-amber-900\/10 p-6 rounded-2xl border border-amber-500\/30\">\r\n <p class=\"text-slate-300 mb-6\">\u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0645\u0644\u0641\u0627\u062a \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0644\u062a\u0648\u0644\u064a\u062f \u0645\u062c\u0627\u0644 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0636\u0639\u064a\u0641 \u0641\u064a \u0627\u0644\u0645\u0646\u062a\u0635\u0641 \u0648\u0642\u0648\u064a \u062c\u062f\u0627\u064b \u0639\u0646\u062f \u0627\u0644\u0637\u0631\u0641\u064a\u0646. \u062a\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0628\u0634\u0643\u0644 \u062d\u0644\u0632\u0648\u0646\u064a\u060c \u0648\u0639\u0646\u062f\u0645\u0627 \u062a\u0642\u062a\u0631\u0628 \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0627\u0644\u0642\u0648\u064a\u0629\u060c \u062a\u0631\u062a\u062f \u0644\u0644\u062e\u0644\u0641 \u0643\u0645\u0627 \u0644\u0648 \u0623\u0646\u0647\u0627 \u0627\u0635\u0637\u062f\u0645\u062a \u0628\u0645\u0631\u0622\u0629.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"simulation-container\" id=\"magnetic-bottle-simulation\"><\/div>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-rose-500 rounded-full\"><\/span>\u0627\u0644\u062a\u062d\u062f\u064a \u0627\u0644\u0643\u0628\u064a\u0631: \u062a\u0633\u0631\u0628 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627<\/h2>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-rose-500\/20\">\r\n <p class=\"text-slate-300 leading-relaxed\">\u0627\u0644\u0645\u0634\u0643\u0644\u0629 \u0623\u0646 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u062a\u062d\u0631\u0643 \u0628\u0645\u0648\u0627\u0632\u0627\u0629 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644\u060c \u0623\u0648 \u0628\u0632\u0627\u0648\u064a\u0629 \u0635\u063a\u064a\u0631\u0629 \u062c\u062f\u0627\u064b\u060c \u0644\u0627 \u062a\u0631\u062a\u062f \u0628\u0644 \u062a\u0647\u0631\u0628 \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0627\u0644\u0645\u0641\u062a\u0648\u062d\u0629. \u064a\u064f\u0639\u0631\u0641 \u0647\u0630\u0627 \u0627\u0644\u0646\u0637\u0627\u0642 \u0628\u0627\u0633\u0645 <strong class=\"text-rose-400\">\"\u0645\u062e\u0631\u0648\u0637 \u0627\u0644\u0641\u0642\u062f\" (Loss Cone)<\/strong>\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0627\u0644\u0627\u062d\u062a\u0648\u0627\u0621 \u0637\u0648\u064a\u0644 \u0627\u0644\u0623\u0645\u062f \u0635\u0639\u0628\u0627\u064b.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-emerald-500 rounded-full\"><\/span>\u0623\u0646\u0648\u0627\u0639 \u062a\u0635\u0627\u0645\u064a\u0645 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/5\"><h4 class=\"font-bold text-emerald-400 mb-3\">1. \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u0627\u0644\u0645\u0641\u062a\u0648\u062d\u0629 (Open-Ended)<\/h4><p class=\"text-l text-slate-400 leading-relaxed\">\u0645\u062b\u0644 \u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0645\u0631\u0622\u0629 \u0627\u0644\u0643\u0644\u0627\u0633\u064a\u0643\u064a\u0629. \u062a\u0639\u0627\u0646\u064a \u0645\u0646 \u0627\u0644\u062a\u0633\u0631\u0628 \u0627\u0644\u062c\u0648\u0647\u0631\u064a \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0627\u0644\u0645\u0641\u062a\u0648\u062d\u0629 \u0648\u0639\u062f\u0645 \u0627\u0644\u0627\u0633\u062a\u0642\u0631\u0627\u0631.<\/p><\/div>\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border border-white\/5\"><h4 class=\"font-bold text-emerald-400 mb-3\">2. \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u0627\u0644\u062d\u0644\u0642\u064a\u0629 (Toroidal)<\/h4><p class=\"text-l text-slate-400 leading-relaxed\">\u062a\u064f\u063a\u0644\u0642 \u0627\u0644\u0623\u0646\u0628\u0648\u0628 \u0639\u0644\u0649 \u0634\u0643\u0644 \u062d\u0644\u0642\u0629 (\u062f\u0648\u0646\u0627\u062a) \u0644\u062d\u0644 \u0645\u0634\u0643\u0644\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641. \u0623\u0634\u0647\u0631\u0647\u0627:<br\/><br\/>\u2022 <strong class=\"text-white\">\u0627\u0644\u062a\u0648\u0643\u0627\u0645\u0627\u0643 (Tokamak):<\/strong> \u0627\u0644\u0623\u0643\u062b\u0631 \u0627\u0646\u062a\u0634\u0627\u0631\u0627\u064b (\u0645\u062b\u0644 \u0645\u0634\u0631\u0648\u0639 ITER).<br\/>\u2022 <strong class=\"text-white\">\u0627\u0644\u0633\u062a\u064a\u0644\u064a\u0631\u0627\u062a\u0648\u0631 (Stellarator):<\/strong> \u064a\u0633\u062a\u062e\u062f\u0645 \u0645\u0644\u0641\u0627\u062a \u0645\u0644\u062a\u0648\u064a\u0629 \u0645\u0639\u0642\u062f\u0629 \u0644\u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0645\u0633\u062a\u0645\u0631.<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"space-y-6\">\r\n <h2 class=\"text-2xl font-bold text-white flex items-center gap-2 border-b border-white\/10 pb-2\"><span class=\"w-2 h-8 bg-sky-500 rounded-full\"><\/span>\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062d\u062f\u064a\u062b\u0629<\/h2>\r\n <div class=\"bg-sky-900\/20 p-6 rounded-2xl border border-sky-500\/30\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-start gap-4\"><div class=\"p-2 bg-sky-500\/20 rounded-lg text-sky-400\"><\/div><div><h5 class=\"text-white font-bold\">\u062a\u062c\u0631\u0628\u0629 WHAM (2024)<\/h5><p class=\"text-l text-slate-400\">\u062d\u0642\u0642\u062a \u0631\u0642\u0645\u0627\u064b \u0642\u064a\u0627\u0633\u064a\u0627\u064b \u0628\u062d\u0628\u0633 \u0628\u0644\u0627\u0632\u0645\u0627 \u0628\u0645\u062c\u0627\u0644 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0634\u062f\u062a\u0647 17 \u062a\u0633\u0644\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u0627\u062a \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u062a\u0648\u0635\u064a\u0644.<\/p><\/div><\/div>\r\n <div class=\"flex items-start gap-4\"><div class=\"p-2 bg-sky-500\/20 rounded-lg text-sky-400\"><\/div><div><h5 class=\"text-white font-bold\">\u0637\u0627\u0642\u0629 \u0627\u0644\u0627\u0646\u062f\u0645\u0627\u062c<\/h5><p class=\"text-l text-slate-400\">\u0625\u0646\u062a\u0627\u062c \u0637\u0627\u0642\u0629 \u0646\u0638\u064a\u0641\u0629 \u0648\u0622\u0645\u0646\u0629 \u0644\u0627 \u062a\u0646\u0636\u0628 (\u0645\u0634\u0631\u0648\u0639 ITER \u0627\u0644\u0639\u0627\u0644\u0645\u064a).<\/p><\/div><\/div>\r\n <div class=\"flex items-start gap-4\"><div class=\"p-2 bg-sky-500\/20 rounded-lg text-sky-400\"><\/div><div><h5 class=\"text-white font-bold\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0641\u0636\u0627\u0621<\/h5><p class=\"text-l text-slate-400\">\u062d\u0645\u0627\u064a\u0629 \u0627\u0644\u0645\u0631\u0643\u0628\u0627\u062a \u0627\u0644\u0641\u0636\u0627\u0626\u064a\u0629 \u0645\u0646 \u0627\u0644\u0625\u0634\u0639\u0627\u0639\u0627\u062a \u0627\u0644\u0643\u0648\u0646\u064a\u0629 \u0627\u0644\u0636\u0627\u0631\u0629 \u0639\u0628\u0631 \u062d\u0642\u0648\u0644 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629 \u0648\u0627\u0642\u064a\u0629.<\/p><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"bg-slate-800\/80 p-6 rounded-2xl border border-white\/10 text-center\">\r\n <p class=\"text-slate-400 text-l italic\">\"\u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a \u0647\u0648 \u0627\u0644\u0645\u0641\u062a\u0627\u062d \u0644\u0641\u062a\u062d \u0622\u0641\u0627\u0642 \u0637\u0627\u0642\u0629 \u0627\u0644\u0645\u0633\u062a\u0642\u0628\u0644\u060c \u062d\u064a\u062b \u0646\u062d\u0627\u0643\u064a \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u062d\u062f\u062b \u0641\u064a \u0642\u0644\u0628 \u0627\u0644\u0646\u062c\u0648\u0645 \u0644\u0625\u0646\u062a\u0627\u062c \u0637\u0627\u0642\u0629 \u0646\u0638\u064a\u0641\u0629 \u0639\u0644\u0649 \u0627\u0644\u0623\u0631\u0636.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function() {\r\n const container = document.getElementById('magnetic-bottle-simulation');\r\n if (!container) return;\r\n\r\n \/\/ \u0628\u0646\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 = 'bg-slate-900 p-6 rounded-2xl border border-slate-700 shadow-xl w-full my-8 font-cairo';\r\n wrapper.setAttribute('dir', 'rtl');\r\n wrapper.innerHTML = `\r\n <div class=\"flex flex-col md:flex-row justify-between items-center mb-6 gap-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"p-2 bg-indigo-500\/20 rounded-lg text-indigo-400\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-white\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a (Magnetic Bottle)<\/h3>\r\n <\/div>\r\n <div class=\"flex gap-2\">\r\n <button id=\"btn-play-pause\" class=\"p-2 rounded-lg transition-all bg-amber-500 text-black\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>\r\n <\/button>\r\n <button id=\"btn-reset\" class=\"p-2 rounded-lg bg-slate-800 text-slate-300 hover:bg-slate-700\">\u0625\u0639\u0627\u062f\u0629 \u062d\u0642\u0646 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\r\n <div class=\"lg:col-span-3 relative aspect-video bg-black rounded-xl overflow-hidden border border-slate-700\">\r\n <canvas id=\"magnetic-canvas\" width=\"600\" height=\"340\" class=\"w-full h-full block\"><\/canvas>\r\n <div class=\"absolute bottom-4 right-4 flex flex-col gap-2 bg-black\/60 backdrop-blur-md p-3 rounded-lg border border-white\/10\">\r\n <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 rounded-full bg-blue-400\"><\/div><span class=\"text-[10px] text-slate-300\">\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u0627\u062a<\/span><\/div>\r\n <div class=\"flex items-center gap-2\"><div class=\"w-3 h-3 rounded-full bg-red-400\"><\/div><span class=\"text-[10px] text-slate-300\">\u0623\u064a\u0648\u0646\u0627\u062a<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-white\/5\">\r\n <label class=\"text-l text-slate-400 block mb-2 flex justify-between\">\r\n <span>\u0642\u0648\u0629 \u0627\u0644\u0645\u0631\u0622\u0629 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629<\/span>\r\n <span id=\"mirror-strength-value\" class=\"text-indigo-400 font-mono\">8.0T<\/span>\r\n <\/label>\r\n <input id=\"mirror-slider\" type=\"range\" min=\"0.1\" max=\"2\" step=\"0.1\" value=\"0.8\" class=\"w-full accent-indigo-500\">\r\n <p class=\"text-[9px] text-slate-500 mt-1\">\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0642\u0648\u0629 \u062a\u0642\u0644\u0644 \u0645\u0646 \"\u0645\u062e\u0631\u0648\u0637 \u0627\u0644\u0641\u0642\u062f\" \u0648\u062a\u0633\u0631\u0628 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-white\/5\">\r\n <label class=\"text-l text-slate-400 block mb-2\">\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627<\/label>\r\n <input id=\"particle-count-slider\" type=\"range\" min=\"10\" max=\"100\" step=\"10\" value=\"30\" class=\"w-full accent-rose-500\">\r\n <\/div>\r\n <div class=\"bg-indigo-900\/20 p-4 rounded-xl border border-indigo-500\/30\">\r\n <h4 class=\"text-indigo-400 font-bold mb-2 text-l flex items-center gap-1\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><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>\r\n \u0645\u0628\u062f\u0623 \u0627\u0644\u0639\u0645\u0644:\r\n <\/h4>\r\n <p class=\"text-[10px] text-slate-300 leading-relaxed\">\u062a\u062a\u062d\u0631\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0628\u0634\u0643\u0644 \u062d\u0644\u0632\u0648\u0646\u064a. \u0639\u0646\u062f \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u062d\u064a\u062b \u0627\u0644\u0645\u062c\u0627\u0644 \u0642\u0648\u064a\u060c \u062a\u0631\u062a\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0644\u0644\u062e\u0644\u0641. \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u062a\u062d\u0631\u0643 \u0628\u0632\u0627\u0648\u064a\u0629 \u062d\u0627\u062f\u0629 \u062c\u062f\u0627\u064b \u062a\u0647\u0631\u0628 \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 (\u0645\u062e\u0631\u0648\u0637 \u0627\u0644\u0641\u0642\u062f).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(wrapper);\r\n\r\n \/\/ --- \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 ---\r\n let canvas = document.getElementById('magnetic-canvas');\r\n let ctx = canvas.getContext('2d');\r\n let width = 600, height = 340;\r\n canvas.width = width; canvas.height = height;\r\n\r\n let isPlaying = true;\r\n let mirrorStrength = 0.8; \/\/ \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0641\u0639\u0644\u064a\u0629 (0-2)\r\n let particleCount = 30;\r\n\r\n \/\/ \u0628\u0646\u064a\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\r\n class Particle {\r\n constructor(x, y, vx, vy, vz, color) {\r\n this.x = x;\r\n this.y = y;\r\n this.vx = vx;\r\n this.vy = vy;\r\n this.vz = vz;\r\n this.color = color;\r\n this.escaped = false;\r\n }\r\n }\r\n\r\n let particles = [];\r\n\r\n function initParticles(count) {\r\n particles = [];\r\n for (let i = 0; i < count; i++) {\r\n particles.push(new Particle(\r\n 0, \/\/ x \u0627\u0628\u062a\u062f\u0627\u0626\u064a (\u0645\u0631\u0643\u0632)\r\n (Math.random() - 0.5) * 40, \/\/ y\r\n (Math.random() - 0.5) * 4, \/\/ vx\r\n (Math.random() - 0.5) * 2, \/\/ vy\r\n (Math.random() - 0.5) * 2, \/\/ vz\r\n Math.random() > 0.5 ? '#60a5fa' : '#f87171' \/\/ \u0623\u0632\u0631\u0642 \u0623\u0648 \u0623\u062d\u0645\u0631\r\n ));\r\n }\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627\r\n function updateParticleCount(newCount) {\r\n particleCount = newCount;\r\n initParticles(particleCount);\r\n }\r\n\r\n \/\/ \u062f\u0648\u0631\u0629 \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\r\n let animationId = null;\r\n const centerX = width \/ 2;\r\n const centerY = height \/ 2;\r\n const bottleLength = 200; \/\/ \u0646\u0635\u0641 \u0637\u0648\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 (\u0645\u0646 \u0627\u0644\u0645\u0631\u0643\u0632 \u0625\u0644\u0649 \u0627\u0644\u0637\u0631\u0641)\r\n\r\n function draw() {\r\n if (!ctx) return;\r\n ctx.clearRect(0, 0, width, height);\r\n\r\n \/\/ \u0631\u0633\u0645 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a (\u0645\u0646\u062d\u0646\u064a\u0627\u062a)\r\n ctx.strokeStyle = 'rgba(99, 102, 241, 0.2)';\r\n ctx.lineWidth = 1;\r\n for (let i = -3; i <= 3; i++) {\r\n const yOffset = i * 20;\r\n ctx.beginPath();\r\n ctx.moveTo(centerX - bottleLength, centerY + yOffset * 0.5);\r\n ctx.bezierCurveTo(\r\n centerX - bottleLength \/ 2, centerY + yOffset * 1.5,\r\n centerX + bottleLength \/ 2, centerY + yOffset * 1.5,\r\n centerX + bottleLength, centerY + yOffset * 0.5\r\n );\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ \u0631\u0633\u0645 \u0627\u0644\u0645\u0644\u0641\u0627\u062a (\u0627\u0644\u0645\u0631\u0627\u064a\u0627)\r\n ctx.fillStyle = 'rgba(30, 41, 59, 0.8)';\r\n ctx.strokeStyle = '#6366f1';\r\n ctx.lineWidth = 3;\r\n \/\/ \u0645\u0644\u0641 \u0623\u064a\u0633\u0631\r\n ctx.beginPath();\r\n ctx.ellipse(centerX - bottleLength, centerY, 20, 60, 0, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.stroke();\r\n \/\/ \u0645\u0644\u0641 \u0623\u064a\u0645\u0646\r\n ctx.beginPath();\r\n ctx.ellipse(centerX + bottleLength, centerY, 20, 60, 0, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.stroke();\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0648\u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a\r\n for (let p of particles) {\r\n if (p.escaped) continue;\r\n\r\n \/\/ \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a: \u0642\u0648\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u062a\u0632\u062f\u0627\u062f \u0643\u0644\u0645\u0627 \u0627\u0642\u062a\u0631\u0628\u0646\u0627 \u0645\u0646 \u0627\u0644\u0623\u0637\u0631\u0627\u0641\r\n const distFromCenter = Math.abs(p.x);\r\n const fieldStrength = 1 + (distFromCenter \/ bottleLength) * mirrorStrength * 5;\r\n\r\n \/\/ \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0627\u0646\u0639\u0643\u0627\u0633 \u0639\u0646\u062f \u0627\u0644\u0623\u0637\u0631\u0627\u0641\r\n if (distFromCenter > bottleLength - 10) {\r\n \/\/ \u062d\u0633\u0627\u0628 \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062c\u0633\u064a\u0645 \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644\r\n const angle = Math.atan2(Math.sqrt(p.vy * p.vy + p.vz * p.vz), Math.abs(p.vx));\r\n const lossConeAngle = 0.3 \/ mirrorStrength; \/\/ \u0643\u0644\u0645\u0627 \u0632\u0627\u062f\u062a \u0642\u0648\u0629 \u0627\u0644\u0645\u0631\u0622\u0629\u060c \u0635\u063a\u0631 \u0645\u062e\u0631\u0648\u0637 \u0627\u0644\u0641\u0642\u062f\r\n if (angle < lossConeAngle) {\r\n p.escaped = true; \/\/ \u0647\u0631\u0648\u0628 \u0627\u0644\u062c\u0633\u064a\u0645\r\n } else {\r\n p.vx *= -1; \/\/ \u0627\u0646\u0639\u0643\u0627\u0633\r\n p.x += p.vx * 2; \/\/ \u0627\u0644\u0627\u0628\u062a\u0639\u0627\u062f \u0639\u0646 \u0627\u0644\u062d\u0627\u0641\u0629\r\n }\r\n }\r\n\r\n \/\/ \u062d\u0631\u0643\u0629 \u062d\u0644\u0632\u0648\u0646\u064a\u0629 (\u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0640 vz)\r\n const time = Date.now() * 0.005;\r\n const spiralRadius = 5 \/ fieldStrength;\r\n const spiralY = p.y + Math.sin(time + p.x * 0.1) * spiralRadius;\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0648\u0642\u0639\r\n p.x += p.vx;\r\n p.y += p.vy * 0.1;\r\n\r\n \/\/ \u0631\u0633\u0645 \u0627\u0644\u062c\u0633\u064a\u0645\r\n ctx.fillStyle = p.color;\r\n ctx.shadowBlur = 10;\r\n ctx.shadowColor = p.color;\r\n ctx.beginPath();\r\n ctx.arc(centerX + p.x, centerY + spiralY, 3, 0, Math.PI * 2);\r\n ctx.fill();\r\n ctx.shadowBlur = 0;\r\n }\r\n\r\n \/\/ \u062a\u0633\u0645\u064a\u0627\u062a\r\n ctx.fillStyle = 'white';\r\n ctx.font = '10px Cairo';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('\u0645\u0631\u0622\u0629 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629', centerX - bottleLength, centerY - 70);\r\n ctx.fillText('\u0645\u0631\u0622\u0629 \u0645\u063a\u0646\u0627\u0637\u064a\u0633\u064a\u0629', centerX + bottleLength, centerY - 70);\r\n ctx.fillText('\u0628\u0644\u0627\u0632\u0645\u0627 \u0645\u062d\u0635\u0648\u0631\u0629', centerX, centerY + 80);\r\n\r\n \/\/ \u0627\u0633\u062a\u0645\u0631\u0627\u0631 \u0627\u0644\u062d\u0644\u0642\u0629 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0639\u0645\u0644\r\n if (isPlaying) {\r\n animationId = requestAnimationFrame(draw);\r\n }\r\n }\r\n\r\n \/\/ \u0628\u062f\u0621 \u0627\u0644\u062d\u0644\u0642\u0629 \u064a\u062f\u0648\u064a\u0627\u064b\r\n function startAnimation() {\r\n if (animationId) cancelAnimationFrame(animationId);\r\n animationId = requestAnimationFrame(draw);\r\n }\r\n\r\n \/\/ \u0631\u0628\u0637 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u062d\u0643\u0645\r\n const playPauseBtn = document.getElementById('btn-play-pause');\r\n const resetBtn = document.getElementById('btn-reset');\r\n const mirrorSlider = document.getElementById('mirror-slider');\r\n const mirrorValueSpan = document.getElementById('mirror-strength-value');\r\n const countSlider = document.getElementById('particle-count-slider');\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0642\u064a\u0645\u0629 \u0642\u0648\u0629 \u0627\u0644\u0645\u0631\u0622\u0629\r\n mirrorSlider.addEventListener('input', (e) => {\r\n mirrorStrength = parseFloat(e.target.value);\r\n mirrorValueSpan.innerText = (mirrorStrength * 10).toFixed(1) + 'T';\r\n \/\/ \u0644\u0627 \u062d\u0627\u062c\u0629 \u0644\u0625\u0639\u0627\u062f\u0629 \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a\u060c \u0641\u0642\u0637 \u0627\u0644\u0642\u0648\u0629 \u062a\u062a\u063a\u064a\u0631 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0627\u064b\r\n });\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0628\u0644\u0627\u0632\u0645\u0627\r\n countSlider.addEventListener('input', (e) => {\r\n const newCount = parseInt(e.target.value);\r\n updateParticleCount(newCount);\r\n });\r\n\r\n \/\/ \u062a\u0634\u063a\u064a\u0644\/\u0625\u064a\u0642\u0627\u0641\r\n playPauseBtn.addEventListener('click', () => {\r\n isPlaying = !isPlaying;\r\n if (isPlaying) {\r\n playPauseBtn.classList.remove('bg-emerald-600');\r\n playPauseBtn.classList.add('bg-amber-500', 'text-black');\r\n playPauseBtn.innerHTML = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>';\r\n startAnimation();\r\n } else {\r\n playPauseBtn.classList.remove('bg-amber-500', 'text-black');\r\n playPauseBtn.classList.add('bg-emerald-600', 'text-white');\r\n playPauseBtn.innerHTML = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>';\r\n if (animationId) cancelAnimationFrame(animationId);\r\n }\r\n });\r\n\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u062d\u0642\u0646 (\u0625\u0639\u0627\u062f\u0629 \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a)\r\n resetBtn.addEventListener('click', () => {\r\n initParticles(particleCount);\r\n \/\/ \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u062a\u0648\u0642\u0641\u0629\u060c \u0646\u0639\u064a\u062f \u062a\u0634\u063a\u064a\u0644\u0647\u0627 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0623\u0648 \u0646\u062a\u0631\u0643\u0647\u0627 \u0643\u0645\u0627 \u0647\u064a\r\n if (!isPlaying) {\r\n \/\/ \u0646\u0631\u0633\u0645 \u0644\u0642\u0637\u0629 \u0648\u0627\u062d\u062f\u0629 \u0644\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0634\u0627\u0634\u0629\r\n draw();\r\n }\r\n });\r\n\r\n \/\/ \u0627\u0644\u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0623\u0648\u0644\u064a\u0629\r\n initParticles(particleCount);\r\n startAnimation();\r\n\r\n \/\/ \u062a\u0646\u0638\u064a\u0641 \u0639\u0646\u062f \u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0635\u0641\u062d\u0629 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)\r\n window.addEventListener('beforeunload', () => {\r\n if (animationId) cancelAnimationFrame(animationId);\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-18423","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18423","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=18423"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18423\/revisions"}],"predecessor-version":[{"id":18424,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18423\/revisions\/18424"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}