\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a - \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0643\u0627\u0645\u0644\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 <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\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: 1rem;\r\n }\r\n .content-container {\r\n max-width: 100%;\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: 1.5rem;\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 @media (min-width: 1280px) {\r\n .content-container { max-width: 96rem; padding: 2rem; }\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: 1.5rem 0;\r\n padding: 1rem;\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n .direction-ltr { direction: ltr; text-align: left; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0646\u064a \u0639\u0634\u0631 - \u0627\u0644\u0645\u0633\u0627\u0631 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a<\/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;\">\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;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\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\/05\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0645\u062c\u0627\u0644_\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\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\/05\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0645\u062c\u0627\u0644_\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\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 <div class=\"space-y-6 text-right\">\r\n <div dir=\"rtl\" class=\"font-sans text-slate-100 space-y-12 leading-relaxed w-full pb-20\">\r\n <header class=\"bg-gradient-to-br from-indigo-900 to-slate-900 border border-indigo-700\/50 rounded-3xl p-8 shadow-2xl relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-full h-full opacity-10\" style=\"background-image: radial-gradient(circle at center, #6366f1 1px, transparent 1px); background-size: 20px 20px;\"><\/div>\r\n <div class=\"relative z-10\">\r\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-cyan-300 mb-4\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h2>\r\n <p class=\"text-lg text-indigo-200\/80 font-light italic\">Electric Field and Gauss's Law<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border-r-4 border-indigo-500 shadow-lg\">\r\n <p class=\"text-slate-300 leading-relaxed text-lg\">\r\n <strong class=\"text-indigo-400\">\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629:<\/strong>\r\n \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u0634\u062d\u0648\u0646 \u064a\u0648\u0644\u0651\u062f \u0641\u064a \u0627\u0644\u062d\u064a\u0632 \u0627\u0644\u0645\u062d\u064a\u0637 \u0628\u0647 \u0645\u062c\u0627\u0644\u0627\u064b \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0627\u064b\u060c \u0648\u064a\u0638\u0647\u0631 \u062a\u0623\u062b\u064a\u0631 \u0647\u0630\u0627 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0644\u0649 \u0634\u0643\u0644 \u0642\u0648\u0629 \u062a\u0624\u062b\u0631 \u0641\u064a \u0623\u064a \u0634\u062d\u0646\u0629 \u0623\u062e\u0631\u0649 \u062a\u0648\u0636\u0639 \u062f\u0627\u062e\u0644\u0647. \u0639\u0646\u062f \u0634\u062d\u0646 \u0645\u0648\u0635\u0644\u060c \u062a\u0633\u062a\u0642\u0631 \u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0639\u0644\u0649 \u0633\u0637\u062d\u0647 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u060c \u0648\u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0646\u0627\u062a\u062c \u0639\u0646 \u062a\u0648\u0632\u064a\u0639\u0627\u062a \u0645\u062a\u0635\u0644\u0629 \u0645\u0646 \u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0646\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633.\r\n <\/p>\r\n <\/div>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-indigo-400 rounded-full\"><\/span>\r\n \u0623\u0648\u0644\u0627\u064b: \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a (Electric Field Lines)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-6\">\r\n <p class=\"text-slate-300 text-l md:text-base leading-relaxed\">\r\n \u0644\u0641\u0647\u0645 \u0648\u062a\u0635\u0648\u0631 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0645\u0641\u0647\u0648\u0645 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a. \u0647\u0630\u0647 \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0648\u0647\u0645\u064a\u0629 \u062a\u064f\u0631\u0633\u0645 \u0628\u062d\u064a\u062b \u062a\u062f\u0644 \u0639\u0644\u0649 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0645\u0642\u062f\u0627\u0631\u0647:\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 space-y-2\">\r\n <h4 class=\"text-indigo-300 font-bold flex items-center gap-2 text-l\"><span class=\"w-1.5 h-1.5 rounded-full bg-indigo-500\"><\/span> 1. \u0627\u0644\u0627\u062a\u062c\u0627\u0647<\/h4>\r\n <p class=\"text-l text-slate-400 leading-relaxed\">\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0646\u062f \u0623\u064a \u0646\u0642\u0637\u0629 \u0647\u0648 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u0645\u0627\u0633 \u0644\u062e\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0646\u062f \u062a\u0644\u0643 \u0627\u0644\u0646\u0642\u0637\u0629. \u0627\u0644\u0645\u062c\u0627\u0644 \u064a\u062a\u062c\u0647 \u062f\u0627\u0626\u0645\u0627\u064b <strong class=\"text-indigo-200\">\u0645\u0628\u062a\u0639\u062f\u0627\u064b \u0639\u0646 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u0648\u062c\u0628\u0629<\/strong> \u0648\u0645\u062a\u062c\u0647\u0627\u064b \u0646\u062d\u0648 \u0627\u0644\u0633\u0627\u0644\u0628\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 space-y-2\">\r\n <h4 class=\"text-indigo-300 font-bold flex items-center gap-2 text-l\"><span class=\"w-1.5 h-1.5 rounded-full bg-indigo-500\"><\/span> 2. \u0627\u0644\u0645\u0642\u062f\u0627\u0631 (\u0627\u0644\u0634\u062f\u0629)<\/h4>\r\n <p class=\"text-l text-slate-400 leading-relaxed\">\u0643\u0644\u0645\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u062e\u0637\u0648\u0637 \u0645\u062a\u0642\u0627\u0631\u0628\u0629\u060c \u0643\u0627\u0646 \u0627\u0644\u0645\u062c\u0627\u0644 \u0623\u0642\u0648\u0649. \u0648\u0643\u0644\u0645\u0627 \u062a\u0628\u0627\u0639\u062f\u062a\u060c \u0643\u0627\u0646 \u0627\u0644\u0645\u062c\u0627\u0644 \u0623\u0636\u0639\u0641.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 bg-slate-800\/80 rounded-2xl border border-indigo-500\/10\">\r\n <h4 class=\"text-l font-bold text-slate-200 mb-4 text-center italic\">\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u062c\u0627\u0644\u0627\u062a \u0645\u0646 \u062d\u064a\u062b \u0627\u0644\u0627\u0646\u062a\u0638\u0627\u0645:<\/h4>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"p-4 bg-black\/30 rounded-xl border border-indigo-500\/5\">\r\n <span class=\"text-indigo-300 font-bold text-l block mb-1\">\u0645\u062c\u0627\u0644 \u063a\u064a\u0631 \u0645\u0646\u062a\u0638\u0645 (Non-uniform):<\/span>\r\n <p class=\"text-l text-slate-400\">\u0645\u062b\u0644 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0646\u0627\u0634\u0626 \u0639\u0646 \u0634\u062d\u0646\u0629 \u0646\u0642\u0637\u064a\u0629\u060c \u062d\u064a\u062b \u064a\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0645\u0646 \u0646\u0642\u0637\u0629 \u0644\u0623\u062e\u0631\u0649.<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-black\/30 rounded-xl border border-indigo-500\/5\">\r\n <span class=\"text-indigo-300 font-bold text-l block mb-1\">\u0645\u062c\u0627\u0644 \u0645\u0646\u062a\u0638\u0645 (Uniform):<\/span>\r\n <p class=\"text-l text-slate-400\">\u064a\u0645\u0643\u0646 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u064a\u0647 \u0628\u064a\u0646 \u0635\u0641\u064a\u062d\u062a\u064a\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u062a\u064a\u0646 \u0645\u0634\u062d\u0648\u0646\u062a\u064a\u0646\u060c \u062d\u064a\u062b \u062a\u0643\u0648\u0646 \u0627\u0644\u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629 \u0648\u0645\u062a\u0648\u0627\u0632\u064a\u0629 \u0648\u0645\u062a\u0628\u0627\u0639\u062f\u0629 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-8\">\r\n <h5 class=\"text-l font-bold text-slate-500 mb-3 text-center uppercase tracking-widest italic\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644<\/h5>\r\n <div id=\"electric-field-sim-root\" class=\"simulation-container\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-cyan-400 rounded-full\"><\/span>\r\n \u062b\u0627\u0646\u064a\u0627\u064b: \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a (Electric Flux)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-6\">\r\n <p class=\"text-slate-300 text-l md:text-base leading-relaxed\">\r\n \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0647\u0648 \u0645\u0642\u064a\u0627\u0633 \u0644\u0639\u062f\u062f \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u062a\u064a \u062a\u062e\u062a\u0631\u0642 \u0633\u0637\u062d\u0627\u064b \u0645\u0639\u064a\u0646\u0627\u064b. \u0648\u0647\u0648 \u0645\u0641\u0647\u0648\u0645 \u0623\u0633\u0627\u0633\u064a \u0644\u0641\u0647\u0645 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633.\r\n <\/p>\r\n <div class=\"bg-black\/30 p-6 rounded-2xl border border-cyan-500\/10 space-y-4 shadow-inner relative overflow-hidden\">\r\n <div class=\"absolute -right-4 -top-4 w-24 h-24 bg-cyan-500\/5 rounded-full blur-2xl\"><\/div>\r\n <p class=\"text-l text-cyan-300 font-bold\">\u0627\u0644\u0635\u064a\u063a\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 (\u0644\u0633\u0637\u062d \u0645\u0633\u062a\u0648\u064d \u0641\u064a \u0645\u062c\u0627\u0644 \u0645\u0646\u062a\u0638\u0645):<\/p>\r\n <div class=\"text-center font-mono text-2xl text-cyan-100 py-3 direction-ltr\">\u03a6 = E \u00b7 A \u00b7 cos(\u03b8)<\/div>\r\n <div class=\"grid grid-cols-1 l:grid-cols-3 gap-2 text-[11px] text-slate-400 mt-2 border-t border-white\/5 pt-3\">\r\n <p><span class=\"text-cyan-100 font-mono\">E<\/span>: \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0645\u062c\u0627\u0644.<\/p>\r\n <p><span class=\"text-cyan-100 font-mono\">A<\/span>: \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0633\u0637\u062d.<\/p>\r\n <p><span class=\"text-cyan-100 font-mono\">\u03b8<\/span>: \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0645\u0639 \u0627\u0644\u0639\u0645\u0648\u062f\u064a.<\/p>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 pt-2 text-center\"><strong>\u0648\u062d\u062f\u0629 \u0627\u0644\u0642\u064a\u0627\u0633:<\/strong> <span class=\"font-mono text-cyan-200\">N.m\u00b2\/C<\/span><\/p>\r\n <\/div>\r\n <div class=\"mt-8 space-y-4\">\r\n <h4 class=\"text-cyan-300 font-bold text-lg border-b border-cyan-500\/20 pb-2 inline-block\">\u0627\u0644\u062a\u062f\u0641\u0642 \u0639\u0628\u0631 \u0633\u0637\u062d \u0645\u063a\u0644\u0642 (\u0645\u0642\u062f\u0645\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633):<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed mb-4\">\r\n \u064a\u064f\u0639\u0631\u0641 \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0645\u063a\u0644\u0642 (\u0645\u062b\u0644 \u0627\u0644\u0643\u0631\u0629 \u0623\u0648 \u0627\u0644\u0645\u0643\u0639\u0628) \u0628\u0623\u0646\u0647 \u0633\u0637\u062d \u064a\u062d\u062c\u0632 \u062d\u062c\u0645\u0627\u064b \u0641\u064a \u0627\u0644\u0641\u0631\u0627\u063a \u0648\u064a\u0641\u0635\u0644 \u0628\u064a\u0646 \u0627\u0644\u062f\u0627\u062e\u0644 \u0648\u0627\u0644\u062e\u0627\u0631\u062c. \u064a\u0639\u062a\u0645\u062f \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0647\u0630\u0627 \u0627\u0644\u0633\u0637\u062d \u0639\u0644\u0649 \u0627\u062a\u062c\u0627\u0647 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u0645\u0633\u0627\u062d\u062a\u0647.\r\n <\/p>\r\n <div class=\"my-6 bg-black\/40 p-5 rounded-3xl border border-white\/5 shadow-inner\">\r\n <p class=\"text-l text-cyan-300 font-bold text-center mb-4\">\u0627\u0644\u0635\u064a\u063a\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 (\u0644\u0644\u062a\u062f\u0641\u0642 \u0639\u0628\u0631 \u0633\u0637\u062d \u0645\u063a\u0644\u0642):<\/p>\r\n <div class=\"flex flex-col items-center justify-center space-y-3\">\r\n <div class=\"font-mono text-xl md:text-2xl text-cyan-100 flex items-center justify-center gap-2 direction-ltr flex-wrap\">\r\n <span class=\"font-bold text-cyan-300\">\u03a6<sub>net<\/sub><\/span>\r\n <span class=\"text-slate-400\">=<\/span>\r\n <span class=\"text-3xl text-indigo-400 leading-none flex items-center\">\u222e<\/span>\r\n <span class=\"font-bold\">E \u00b7 dA<\/span>\r\n <span class=\"text-slate-400\">=<\/span>\r\n <span class=\"text-3xl text-indigo-400 leading-none flex items-center\">\u222e<\/span>\r\n <span class=\"font-bold\">E dA cos(\u03b8)<\/span>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 text-[10px] text-slate-400 mt-3 pt-3 border-t border-white\/5 w-full max-w-md\">\r\n <p><span class=\"font-mono text-indigo-400 text-lg leading-none\">\u222e<\/span> : \u0631\u0645\u0632 \u0627\u0644\u062a\u0643\u0627\u0645\u0644 \u0627\u0644\u0633\u0637\u062d\u064a \u0627\u0644\u0645\u063a\u0644\u0642.<\/p>\r\n <p><span class=\"font-mono text-cyan-200\">dA<\/span> : \u0645\u062a\u0651\u062c\u0647 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (\u0627\u0644\u0639\u0645\u0648\u062f\u064a \u0646\u062d\u0648 \u0627\u0644\u062e\u0627\u0631\u062c).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"p-4 bg-slate-800\/60 rounded-2xl border border-emerald-500\/30 flex flex-col items-center text-center space-y-3 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-emerald-500\/5 group-hover:bg-emerald-500\/10 transition-colors\"><\/div>\r\n <div class=\"w-12 h-12 rounded-full border-2 border-emerald-500\/50 flex items-center justify-center bg-emerald-500\/10 relative z-10 text-emerald-400 text-xl font-bold\">+<\/div>\r\n <h5 class=\"text-emerald-300 font-bold text-l relative z-10\">\u062a\u062f\u0641\u0642 \u0645\u0648\u062c\u0628 (+)<\/h5>\r\n <p class=\"text-[11px] text-slate-400 relative z-10 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 <strong class=\"text-slate-200\">\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062e\u0627\u0631\u062c\u0629<\/strong> \u0645\u0646 \u0627\u0644\u0633\u0637\u062d. (\u0645\u062b\u0627\u0644: \u0634\u062d\u0646\u0629 \u0645\u0648\u062c\u0628\u0629 \u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u0627\u0644\u062f\u0627\u062e\u0644).<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-slate-800\/60 rounded-2xl border border-rose-500\/30 flex flex-col items-center text-center space-y-3 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-rose-500\/5 group-hover:bg-rose-500\/10 transition-colors\"><\/div>\r\n <div class=\"w-12 h-12 rounded-full border-2 border-rose-500\/50 flex items-center justify-center bg-rose-500\/10 relative z-10 text-rose-400 text-xl font-bold\">-<\/div>\r\n <h5 class=\"text-rose-300 font-bold text-l relative z-10\">\u062a\u062f\u0641\u0642 \u0633\u0627\u0644\u0628 (-)<\/h5>\r\n <p class=\"text-[11px] text-slate-400 relative z-10 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 <strong class=\"text-slate-200\">\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062f\u0627\u062e\u0644\u0629<\/strong> \u0625\u0644\u0649 \u0627\u0644\u0633\u0637\u062d. (\u0645\u062b\u0627\u0644: \u0634\u062d\u0646\u0629 \u0633\u0627\u0644\u0628\u0629 \u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u0627\u0644\u062f\u0627\u062e\u0644).<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-slate-800\/60 rounded-2xl border border-slate-500\/30 flex flex-col items-center text-center space-y-3 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-slate-500\/5 group-hover:bg-slate-500\/10 transition-colors\"><\/div>\r\n <div class=\"w-12 h-12 rounded-full border-2 border-slate-500\/50 flex items-center justify-center bg-slate-500\/10 relative z-10 text-slate-300 text-xl font-bold\">0<\/div>\r\n <h5 class=\"text-slate-300 font-bold text-l relative z-10\">\u062a\u062f\u0641\u0642 \u0635\u0641\u0631\u064a (0)<\/h5>\r\n <p class=\"text-[11px] text-slate-400 relative z-10 leading-relaxed\">\u0639\u062f\u062f \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u062f\u0627\u062e\u0644\u0629 <strong>\u064a\u0633\u0627\u0648\u064a<\/strong> \u0639\u062f\u062f \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u062e\u0627\u0631\u062c\u0629. (\u0645\u062b\u0627\u0644: \u0633\u0637\u062d \u0641\u064a \u0645\u062c\u0627\u0644 \u062e\u0627\u0631\u062c\u064a \u062f\u0648\u0646 \u0634\u062d\u0646\u0627\u062a \u062f\u0627\u062e\u0644\u0647).<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-cyan-500\/10 p-3 rounded-xl border border-cyan-500\/20 text-cyan-200 text-l italic text-center mt-2 shadow-inner\">\r\n \"\u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0633\u0637\u062d \u0645\u063a\u0644\u0642 \u0645\u0648\u0636\u0648\u0639 \u0641\u064a \u0645\u062c\u0627\u0644 \u0645\u0646\u062a\u0638\u0645 \u064a\u0633\u0627\u0648\u064a \u062f\u0627\u0626\u0645\u0627\u064b \u0635\u0641\u0631\u0627\u064b\u060c \u0644\u0623\u0646 \u0643\u0644 \u062e\u0637 \u064a\u062f\u062e\u0644 \u0645\u0646 \u062c\u0647\u0629 \u0633\u064a\u062e\u0631\u062c \u062d\u062a\u0645\u0627\u064b \u0645\u0646 \u0627\u0644\u062c\u0647\u0629 \u0627\u0644\u0645\u0642\u0627\u0628\u0644\u0629.\"\r\n <\/div>\r\n <div class=\"mt-8 bg-slate-900\/40 border border-slate-700 rounded-2xl overflow-hidden shadow-lg\">\r\n <div class=\"bg-cyan-900\/30 px-5 py-3 border-b border-cyan-500\/20 flex items-center gap-3\">\r\n <span class=\"bg-cyan-500\/20 text-cyan-400 w-6 h-6 flex justify-center items-center rounded-lg text-lg\">*<\/span>\r\n <h4 class=\"font-bold text-cyan-300 text-l\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a (1) : \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h4>\r\n <\/div>\r\n <div class=\"p-5 space-y-6\">\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-800\/80 p-3 rounded-xl border border-white\/5 border-r-2 border-r-cyan-500\">\r\n \u0645\u062c\u0627\u0644 \u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0645\u0646\u062a\u0638\u0645 \u0634\u062f\u062a\u0647 <span class=\"text-cyan-400 font-mono\" dir=\"ltr\">E = 4 \u00d7 10\u00b3 N\/C<\/span> \u064a\u062e\u062a\u0631\u0642 \u0633\u0637\u062d\u0627\u064b \u0645\u0633\u062a\u0648\u064a\u0627\u064b \u0645\u0633\u0627\u062d\u062a\u0647 <span class=\"text-cyan-400 font-mono\" dir=\"ltr\">A = 0.05 m\u00b2<\/span>. \u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u062e\u0644\u0627\u0644\u0647 \u0641\u064a \u0627\u0644\u062d\u0627\u0644\u062a\u064a\u0646:\r\n <\/p>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-cyan-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">\u0623<\/span>\r\n <p class=\"text-[13px] text-cyan-100 font-bold\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0645\u062a\u062c\u0647 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (\u0627\u0644\u0639\u0645\u0648\u062f\u064a \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d) \u0645\u0648\u0627\u0632\u064a\u0627\u064b \u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-3 relative overflow-hidden\">\r\n <div class=\"absolute left-0 top-0 w-1 h-full bg-emerald-500\/50\"><\/div>\r\n <p class=\"text-slate-400\">\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0628\u064a\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0645\u062a\u062c\u0647 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0647\u064a <span class=\"font-mono text-emerald-300\">\u03b8 = 0\u00b0<\/span>.<\/p>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-max min-w-[220px] shadow-inner\" dir=\"ltr\">\r\n <div>\u03a6 = E \u00b7 A \u00b7 cos(\u03b8)<\/div>\r\n <div class=\"text-slate-500 text-l\">cos(0\u00b0) = 1<\/div>\r\n <div>\u03a6 = (4 \u00d7 10\u00b3) \u00d7 0.05 \u00d7 1<\/div>\r\n <div class=\"text-cyan-400 font-bold pt-2 border-t border-cyan-500\/20 text-base\">\u03a6 = 200 N\u00b7m\u00b2\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-cyan-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">\u0628<\/span>\r\n <p class=\"text-[13px] text-cyan-100 font-bold\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0645\u062a\u062c\u0647 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u064a\u0645\u064a\u0644 \u0628\u0632\u0627\u0648\u064a\u0629 <span class=\"font-mono text-cyan-300\">60\u00b0<\/span> \u0639\u0646 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-3 relative overflow-hidden\">\r\n <div class=\"absolute left-0 top-0 w-1 h-full bg-rose-500\/50\"><\/div>\r\n <p class=\"text-slate-400\">\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u0639\u0637\u0627\u0629 \u0647\u064a <span class=\"font-mono text-rose-300\">\u03b8 = 60\u00b0<\/span> (\u0627\u0644\u062a\u062f\u0641\u0642 \u064a\u0642\u0644 \u0628\u0633\u0628\u0628 \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u064a\u0644\u0627\u0646).<\/p>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-max min-w-[220px] shadow-inner\" dir=\"ltr\">\r\n <div>\u03a6 = E \u00b7 A \u00b7 cos(60\u00b0)<\/div>\r\n <div class=\"text-slate-500 text-l\">cos(60\u00b0) = 0.5<\/div>\r\n <div>\u03a6 = (4 \u00d7 10\u00b3) \u00d7 0.05 \u00d7 0.5<\/div>\r\n <div class=\"text-cyan-400 font-bold pt-2 border-t border-cyan-500\/20 text-base\">\u03a6 = 100 N\u00b7m\u00b2\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"electric-flux-sim-root\" class=\"simulation-container\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-rose-400 rounded-full\"><\/span>\r\n \u062b\u0627\u0644\u062b\u0627\u064b: \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633 (Gauss's Law)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-6\">\r\n <div class=\"space-y-4\">\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u064a\u064f\u0639\u062f <strong>\u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633<\/strong> \u0645\u0646 \u0623\u0647\u0645 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 (\u0648\u0647\u0648 \u0623\u062d\u062f \u0645\u0639\u0627\u062f\u0644\u0627\u062a \u0645\u0627\u0643\u0633\u0648\u064a\u0644 \u0627\u0644\u0623\u0631\u0628\u0639)\u060c \u062d\u064a\u062b \u064a\u0631\u0628\u0637 \u0628\u0637\u0631\u064a\u0642\u0629 \u0631\u0627\u0626\u0639\u0629 \u0628\u064a\u0646 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0623\u064a \u0633\u0637\u062d \u0645\u063a\u0644\u0642 (\u064a\u064f\u0633\u0645\u0649 <strong>\u0633\u0637\u062d \u063a\u0627\u0648\u0633<\/strong>) \u0648\u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0627\u0644\u0635\u0627\u0641\u064a\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u062f\u0627\u062e\u0644 \u0645\u0642\u0631\u0647.\r\n <\/p>\r\n <p class=\"text-l text-slate-400 leading-relaxed border-r-2 border-rose-500\/50 pr-3\">\r\n <strong class=\"text-rose-300\">\u0633\u0637\u062d \u063a\u0627\u0648\u0633 (Gaussian Surface):<\/strong> \u0647\u0648 \u0633\u0637\u062d \u0647\u0646\u062f\u0633\u064a <strong>\u0648\u0647\u0645\u064a \u0648\u0645\u063a\u0644\u0642<\/strong> (\u0645\u062b\u0644 \u0643\u0631\u0629\u060c \u0623\u0633\u0637\u0648\u0627\u0646\u0629\u060c \u0623\u0648 \u0623\u064a \u0634\u0643\u0644 \u0645\u0646\u062a\u0638\u0645) \u064a\u062a\u0645 \u062a\u062e\u064a\u0644\u0647 \u0641\u064a \u0627\u0644\u0641\u0631\u0627\u063a \u0644\u064a\u062d\u064a\u0637 \u0628\u062a\u0648\u0632\u064a\u0639 \u0644\u0644\u0634\u062d\u0646\u0627\u062a \u0628\u0647\u062f\u0641 \u0627\u0633\u062a\u063a\u0644\u0627\u0644 \u0627\u0644\u062a\u0645\u0627\u062b\u0644 \u0648\u062a\u0633\u0647\u064a\u0644 \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-rose-900\/10 p-6 rounded-2xl border border-rose-500\/20 shadow-xl relative overflow-hidden\">\r\n <div class=\"absolute inset-0 bg-gradient-to-l from-rose-500\/5 to-transparent\"><\/div>\r\n <p class=\"text-white font-medium italic mb-6 leading-relaxed underline decoration-rose-500\/30 underline-offset-4 relative z-10 text-center text-l md:text-base\">\r\n \"\u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0633\u0637\u062d \u0645\u063a\u0644\u0642 \u064a\u0639\u062a\u0645\u062f \u062d\u0635\u0631\u064a\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u062f\u0627\u062e\u0644\u0647\u060c \u0648\u064a\u0633\u0627\u0648\u064a \u062a\u0644\u0643 \u0627\u0644\u0634\u062d\u0646\u0629 \u0645\u0642\u0633\u0648\u0645\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0645\u0627\u062d\u064a\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0644\u0644\u0648\u0633\u0637\".\r\n <\/p>\r\n <div class=\"flex justify-center relative z-10\">\r\n <div dir=\"ltr\" class=\"bg-black\/60 p-4 rounded-xl font-mono text-center text-rose-200 text-xl md:text-2xl shadow-inner\">\r\n \u222e E \u00b7 dA = \u03a3q<sub>in<\/sub> \/ \u03b5<sub>0<\/sub>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"col-span-1 md:col-span-2 p-5 bg-slate-700\/30 rounded-2xl border border-slate-600\/50 space-y-4\">\r\n <h4 class=\"text-rose-300 font-bold text-l border-b border-white\/5 pb-2\">\u0645\u0641\u0627\u0647\u064a\u0645 \u062c\u0648\u0647\u0631\u064a\u0629 \u0641\u064a \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633:<\/h4>\r\n <ul class=\"text-l text-slate-300 space-y-3 leading-loose\">\r\n <li class=\"flex items-start gap-2\">\r\n <div class=\"min-w-4 pt-1\"><span class=\"w-1.5 h-1.5 rounded-full bg-rose-400 inline-block\"><\/span><\/div>\r\n <span><strong>\u0627\u0644\u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u062c\u0628\u0631\u064a:<\/strong> \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u062a\u0639\u0646\u064a \u0627\u0644\u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u062c\u0628\u0631\u064a (\u0628\u0625\u0634\u0627\u0631\u0627\u062a\u0647\u0627). \u0625\u0630\u0627 \u0643\u0627\u0646 \u062f\u0627\u062e\u0644 \u0627\u0644\u0633\u0637\u062d \u062b\u0646\u0627\u0626\u064a \u0642\u0637\u0628 (+q \u0648 -q)\u060c \u0641\u0625\u0646 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 = \u0635\u0641\u0631\u060c \u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0644\u064a = \u0635\u0641\u0631.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <div class=\"min-w-4 pt-1\"><span class=\"w-1.5 h-1.5 rounded-full bg-rose-400 inline-block\"><\/span><\/div>\r\n <span><strong>\u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629:<\/strong> \u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u0642\u0639 <em>\u062e\u0627\u0631\u062c<\/em> \u0633\u0637\u062d \u063a\u0627\u0648\u0633 <strong>\u0644\u0627 \u062a\u0633\u0627\u0647\u0645 \u0625\u0637\u0644\u0627\u0642\u0627\u064b<\/strong> \u0641\u064a \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0644\u064a (\u0644\u0623\u0646 \u062e\u0637\u0648\u0637 \u0645\u062c\u0627\u0644\u0647\u0627 \u062a\u062f\u062e\u0644 \u0645\u0646 \u062c\u0647\u0629 \u0648\u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u0623\u062e\u0631\u0649).<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <div class=\"min-w-4 pt-1\"><span class=\"w-1.5 h-1.5 rounded-full bg-rose-400 inline-block\"><\/span><\/div>\r\n <span><strong>\u0634\u0643\u0644 \u0627\u0644\u0633\u0637\u062d:<\/strong> \u0627\u0644\u062a\u062f\u0641\u0642 \u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0634\u0643\u0644 \u0623\u0648 \u062d\u062c\u0645 \u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0645\u0627\u062f\u0627\u0645 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629!<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"col-span-1 p-5 bg-slate-700\/30 rounded-2xl border border-slate-600\/50 flex flex-col justify-center items-center text-center space-y-4\">\r\n <div>\r\n <h4 class=\"text-rose-300 font-bold text-[13px] mb-2\">\u062b\u0627\u0628\u062a \u0627\u0644\u0633\u0645\u0627\u062d\u064a\u0629 \u0644\u0644\u0641\u0631\u0627\u063a:<\/h4>\r\n <div dir=\"ltr\" class=\"font-mono text-l text-rose-100 bg-black\/30 p-2 rounded-lg\">8.85 \u00d7 10<sup>-12<\/sup> <br\/> <span class=\"text-[10px] text-slate-400\">C\u00b2 \/ (N\u00b7m\u00b2)<\/span><\/div>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/5 w-full\">\r\n <h4 class=\"text-rose-300 font-bold text-[11px] mb-1\">\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u0647\u0645:<\/h4>\r\n <p class=\"text-[10px] text-slate-400 leading-tight\">\u0647\u0630\u0627 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0623\u062f\u0627\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u0648\u0628\u062f\u064a\u0644\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u0643\u0648\u0644\u0648\u0645 \u0644\u062d\u0633\u0627\u0628 \u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 (E) \u0644\u0644\u0623\u062c\u0633\u0627\u0645 \u0630\u0627\u062a \u0627\u0644\u062a\u0645\u0627\u062b\u0644 \u0627\u0644\u0639\u0627\u0644\u064a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-8 bg-slate-900\/40 border border-slate-700 rounded-2xl overflow-hidden shadow-lg\">\r\n <div class=\"bg-rose-900\/30 px-5 py-3 border-b border-rose-500\/20 flex items-center gap-3\">\r\n <span class=\"bg-rose-500\/20 text-rose-400 w-6 h-6 flex justify-center items-center rounded-lg text-lg\">*<\/span>\r\n <h4 class=\"font-bold text-rose-300 text-l\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a (2) : \u062d\u0633\u0627\u0628 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0648\u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633<\/h4>\r\n <\/div>\r\n <div class=\"p-5 space-y-6\">\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-800\/80 p-3 rounded-xl border border-white\/5 border-r-2 border-r-rose-500\">\r\n \u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0648\u0647\u0645\u064a \u0645\u063a\u0644\u0642 \u064a\u062d\u0635\u0631 \u062b\u0644\u0627\u062b \u0634\u062d\u0646\u0627\u062a: <span class=\"text-rose-400 font-mono\" dir=\"ltr\">q\u2081 = +5 \u03bcC<\/span>\u060c <span class=\"text-rose-400 font-mono\" dir=\"ltr\">q\u2082 = -2 \u03bcC<\/span>\u060c <span class=\"text-rose-400 font-mono\" dir=\"ltr\">q\u2083 = +4 \u03bcC<\/span>. \u0648\u0634\u062d\u0646\u0629 \u0631\u0627\u0628\u0639\u0629 <span class=\"text-rose-400 font-mono\" dir=\"ltr\">q\u2084 = -8 \u03bcC<\/span> \u062e\u0627\u0631\u062c \u0627\u0644\u0633\u0637\u062d. \u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0644\u064a.\r\n <\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 text-[13px] space-y-3\">\r\n <ol class=\"list-decimal text-slate-300 space-y-2 pr-4 font-bold text-l\">\r\n <li>\u0646\u062a\u062c\u0627\u0647\u0644 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 \u0644\u0623\u0646\u0647\u0627 \u062e\u0627\u0631\u062c \u0627\u0644\u0633\u0637\u062d.<\/li>\r\n <li>\u0646\u062d\u0633\u0628 \u0627\u0644\u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u062c\u0628\u0631\u064a \u0644\u0644\u0634\u062d\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629:<\/li>\r\n <\/ol>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-full shadow-inner mt-4\" dir=\"ltr\">\r\n <div>\u03a3q<sub>in<\/sub> = q\u2081 + q\u2082 + q\u2083<\/div>\r\n <div>\u03a3q<sub>in<\/sub> = (+5) + (-2) + (+4) = <span class=\"text-emerald-400 font-bold\">+7 \u03bcC<\/span><\/div>\r\n <div class=\"text-slate-500 text-l border-b border-slate-700 pb-2 mb-2\">\u03a3q<sub>in<\/sub> = 7 \u00d7 10\u207b\u2076 C<\/div>\r\n <div>\u03a6<sub>net<\/sub> = \u03a3q<sub>in<\/sub> \/ \u03b5<sub>0<\/sub><\/div>\r\n <div>\u03a6<sub>net<\/sub> = (7 \u00d7 10\u207b\u2076) \/ (8.85 \u00d7 10\u207b\u00b9\u00b2)<\/div>\r\n <div class=\"text-rose-400 font-bold pt-2 border-t border-rose-500\/20 text-base\">\u03a6<sub>net<\/sub> \u2248 7.9 \u00d7 10\u2075 N\u00b7m\u00b2\/C<\/div>\r\n <\/div>\r\n <p class=\"text-l text-emerald-200\/80 text-center mt-4\">\u0628\u0645\u0627 \u0623\u0646 \u0627\u0644\u062a\u062f\u0641\u0642 \u0645\u0648\u062c\u0628 (+)\u060c \u0646\u0633\u062a\u0646\u062a\u062c \u0623\u0646 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0647\u064a \u062e\u0637\u0648\u0637 \u0645\u062c\u0627\u0644 <strong>\u062a\u062e\u0631\u062c<\/strong> \u0645\u0646 \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0645\u063a\u0644\u0642.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"gauss-law-sim-root\" class=\"simulation-container\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-emerald-400 rounded-full\"><\/span>\r\n \u0631\u0627\u0628\u0639\u0627\u064b: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633 (\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062c\u0627\u0644)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-8\">\r\n <div class=\"bg-indigo-900\/10 p-5 rounded-2xl border border-indigo-500\/20 flex flex-col md:flex-row gap-6 items-center shadow-md\">\r\n <div class=\"flex-1 space-y-3 border-r-2 border-indigo-500\/50 pr-4\">\r\n <h4 class=\"text-indigo-300 font-bold flex items-center gap-2 text-l\">\u0645\u0641\u0647\u0648\u0645 \u0623\u0633\u0627\u0633\u064a: \u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629 \u0644\u0644\u0634\u062d\u0646\u0629<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\u0639\u0646\u062f\u0645\u0627 \u062a\u062a\u0648\u0632\u0639 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 (Q) \u0628\u0627\u0646\u062a\u0638\u0627\u0645 \u0639\u0644\u0649 \u0645\u0633\u0627\u062d\u0629 \u0633\u0637\u062d \u0645\u0648\u0635\u0644 \u0623\u0648 \u0642\u0634\u0631\u0629 (A)\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629 \u0644\u0644\u062a\u0639\u0628\u064a\u0631 \u0639\u0646 \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0634\u062d\u0646\u0629 \u0641\u064a \u0643\u0644 \u0648\u062d\u062f\u0629 \u0645\u0633\u0627\u062d\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/50 p-4 rounded-xl flex flex-col items-center justify-center min-w-[160px] shadow-inner space-y-2 border border-white\/5\">\r\n <div class=\"font-mono text-xl text-indigo-400 font-bold direction-ltr\">\u03c3 = Q \/ A<\/div>\r\n <div class=\"text-[10px] text-slate-400 font-sans tracking-wide\">\u0627\u0644\u0648\u062d\u062f\u0629: C \/ m\u00b2<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 pt-2\">\r\n <div class=\"flex items-center gap-3 border-b border-emerald-500\/20 pb-3\">\r\n <span class=\"w-10 h-10 rounded-xl bg-emerald-500\/20 text-emerald-400 flex items-center justify-center font-bold text-lg shadow-[0_0_15px_rgba(16,185,129,0.2)]\">1<\/span>\r\n <h4 class=\"text-xl font-bold text-white\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0645\u0648\u0635\u0644 \u0643\u0631\u0648\u064a \u0645\u0634\u062d\u0648\u0646 (\u0646\u0635\u0641 \u0642\u0637\u0631\u0647 R)<\/h4>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-900\/50 p-4 rounded-xl border-r-4 border-emerald-500\">\r\n \u0641\u064a \u062d\u0627\u0644\u0629 \u0627\u0644\u0627\u062a\u0632\u0627\u0646 \u0627\u0644\u0643\u0647\u0631\u0648\u0633\u062a\u0627\u062a\u064a\u0643\u064a\u060c \u062a\u062a\u0646\u0627\u0641\u0631 \u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0644\u062a\u0633\u062a\u0642\u0631 <strong>\u062c\u0645\u064a\u0639\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u062e\u0627\u0631\u062c\u064a<\/strong> \u0644\u0644\u0645\u0648\u0635\u0644. \u0646\u062a\u064a\u062c\u0629 \u0644\u0630\u0644\u0643\u060c \u064a\u0646\u0639\u062f\u0645 \u0627\u0644\u0645\u062c\u0627\u0644 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0635\u0644\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u062a\u0635\u0631\u0641 \u0627\u0644\u0645\u0648\u0635\u0644 \u062e\u0627\u0631\u062c\u064a\u0627\u064b \u0648\u0643\u0623\u0646 \u0634\u062d\u0646\u062a\u0647 \u062a\u0631\u0643\u0632\u062a \u0641\u064a \u0645\u0631\u0643\u0632\u0647.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n <div class=\"p-5 bg-slate-800\/80 rounded-2xl border border-rose-500\/30 text-center space-y-4 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-rose-500\/5 to-transparent\"><\/div>\r\n <div class=\"relative z-10 space-y-4\">\r\n <span class=\"text-l text-rose-300 font-bold bg-rose-500\/10 px-4 py-2 rounded-full inline-block shadow-l\">\u0627\u0644\u0646\u0642\u0637\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0635\u0644 (r < R)<\/span>\r\n <div class=\"font-mono text-4xl text-white font-bold drop-shadow-md py-2\">E = <span class=\"text-rose-400\">0<\/span><\/div>\r\n <div class=\"text-left font-mono text-[11px] text-slate-300 bg-black\/40 p-4 rounded-xl mx-auto w-fit space-y-2 border border-white\/5 shadow-inner leading-relaxed\">\r\n <div>\u222e E \u00b7 dA = q<sub>in<\/sub> \/ \u03b5<sub>0<\/sub><\/div>\r\n <div class=\"border-b border-slate-700\/80 pb-2 text-rose-300\">q<sub>in<\/sub> = 0<\/div>\r\n <div class=\"text-white pt-1\">E = <span class=\"text-rose-400\">0<\/span><\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-400 leading-relaxed px-2\">\u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0628\u0627\u0644\u062f\u0627\u062e\u0644 \u0644\u0627 \u064a\u062d\u0635\u0631 \u0623\u064a \u0634\u062d\u0646\u0629\u060c \u0644\u0623\u0646 \u0643\u0644 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0633\u062a\u0642\u0631\u062a \u0639\u0644\u0649 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-5 bg-slate-800\/80 rounded-2xl border border-emerald-500\/30 text-center space-y-4 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-emerald-500\/5 to-transparent\"><\/div>\r\n <div class=\"relative z-10 space-y-4\">\r\n <span class=\"text-l text-emerald-300 font-bold bg-emerald-500\/10 px-4 py-2 rounded-full inline-block shadow-l\">\u0627\u0644\u0646\u0642\u0637\u0629 \u062e\u0627\u0631\u062c \u0627\u0644\u0645\u0648\u0635\u0644 (r >= R)<\/span>\r\n <div class=\"font-mono text-4xl text-emerald-400 font-bold drop-shadow-md py-2\">kQ \/ r\u00b2<\/div>\r\n <div class=\"text-left font-mono text-[11px] text-slate-300 bg-black\/40 p-4 rounded-xl mx-auto w-fit space-y-2 border border-white\/5 shadow-inner leading-relaxed\">\r\n <div>E (4\u03c0r\u00b2) = Q \/ \u03b5<sub>0<\/sub><\/div>\r\n <div class=\"border-b border-slate-700\/80 pb-2 text-emerald-300\">k = 1 \/ (4\u03c0\u03b5<sub>0<\/sub>)<\/div>\r\n <div class=\"text-white pt-1\">E = <span class=\"text-emerald-400\">kQ \/ r\u00b2<\/span><\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-400 leading-relaxed px-2\">\u062e\u0627\u0631\u062c \u0627\u0644\u0645\u0648\u0635\u0644\u060c \u064a\u0642\u0644 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0643\u0633\u064a\u0627\u064b \u0645\u0639 \u0645\u0631\u0628\u0639 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646\u062a \u0634\u062d\u0646\u0629 \u0646\u0642\u0637\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0631\u0643\u0632.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/10 p-4 md:p-5 rounded-2xl border border-indigo-500\/20 text-l flex flex-col md:flex-row items-center gap-4 relative overflow-hidden shadow-md\">\r\n <div class=\"bg-indigo-500\/20 px-3 py-2 rounded-lg text-indigo-300 font-bold text-l whitespace-nowrap shadow-l border border-indigo-500\/30 relative z-10\">* \u0631\u0628\u0637 \u0645\u0639 \u0627\u0644\u0643\u062b\u0627\u0641\u0629<\/div>\r\n <p class=\"text-l text-slate-300 leading-relaxed flex-1 relative z-10\">\u0628\u0645\u0627 \u0623\u0646 \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0643\u0631\u0629 A = 4\u03c0R\u00b2\u060c \u0641\u0625\u0646 Q = \u03c3(4\u03c0R\u00b2)\u060c \u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0639\u0644\u0649 \u0633\u0637\u062d \u0627\u0644\u0645\u0648\u0635\u0644 \u0645\u0628\u0627\u0634\u0631\u0629 (r = R):<\/p>\r\n <div class=\"font-mono text-xl text-white font-bold bg-black\/50 px-5 py-3 rounded-xl shadow-inner border border-white\/10 whitespace-nowrap relative z-10\">E = <span class=\"text-indigo-400\">\u03c3 \/ \u03b5<sub>0<\/sub><\/span><\/div>\r\n <\/div>\r\n <div class=\"mt-8 bg-slate-900\/40 border border-slate-700 rounded-2xl overflow-hidden shadow-lg\">\r\n <div class=\"bg-indigo-900\/30 px-5 py-3 border-b border-indigo-500\/20 flex items-center gap-3\">\r\n <span class=\"bg-indigo-500\/20 text-indigo-400 w-6 h-6 flex justify-center items-center rounded-lg text-lg\">*<\/span>\r\n <h4 class=\"font-bold text-indigo-300 text-l\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a \u0644\u0644\u062a\u062f\u0631\u064a\u0628<\/h4>\r\n <\/div>\r\n <div class=\"p-5 space-y-6\">\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-800\/80 p-3 rounded-xl border border-white\/5 border-r-2 border-r-indigo-500\">\r\n \u0645\u0648\u0635\u0644 \u0643\u0631\u0648\u064a \u0645\u0639\u0632\u0648\u0644 \u0646\u0635\u0641 \u0642\u0637\u0631\u0647 <span class=\"text-emerald-400 font-mono\" dir=\"ltr\">R = 10 cm<\/span> \u064a\u062d\u0645\u0644 \u0634\u062d\u0646\u0629 \u0645\u0648\u062c\u0628\u0629 <span class=\"text-emerald-400 font-mono\" dir=\"ltr\">Q = +4 \u03bcC<\/span>. \u0623\u0648\u062c\u062f:\r\n <\/p>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-emerald-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">1<\/span>\r\n <p class=\"text-[13px] text-emerald-100 font-bold\">\u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0646\u062f \u0646\u0642\u0637\u0629 \u062a\u0628\u0639\u062f <span class=\"font-mono text-emerald-300\">5 cm<\/span> \u0639\u0646 \u0627\u0644\u0645\u0631\u0643\u0632.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-2\">\r\n <div class=\"absolute left-0 top-0 w-1 h-full bg-rose-500\/50\"><\/div>\r\n <p class=\"text-slate-400\">\u0627\u0644\u0646\u0642\u0637\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0635\u0644 (r < R)\u060c \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 = \u0635\u0641\u0631.<\/p>\r\n <div class=\"font-mono text-rose-400 font-bold text-base\" dir=\"ltr\">E = 0 N\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-emerald-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">2<\/span>\r\n <p class=\"text-[13px] text-emerald-100 font-bold\">\u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0646\u062f \u0646\u0642\u0637\u0629 \u062a\u0628\u0639\u062f <span class=\"font-mono text-emerald-300\">20 cm<\/span> \u0639\u0646 \u0627\u0644\u0645\u0631\u0643\u0632.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-3\">\r\n <p class=\"text-slate-400\">\u0627\u0644\u0646\u0642\u0637\u0629 \u062e\u0627\u0631\u062c \u0627\u0644\u0645\u0648\u0635\u0644 (r > R)\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0643\u0648\u0644\u0648\u0645 (r = 0.2 m):<\/p>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-max min-w-[250px] shadow-inner\" dir=\"ltr\">\r\n <div>E = (k \u00d7 Q) \/ r\u00b2<\/div>\r\n <div>E = (9\u00d710\u2079 \u00d7 4\u00d710\u207b\u2076) \/ (0.2)\u00b2<\/div>\r\n <div class=\"text-emerald-400 font-bold pt-2 border-t border-emerald-500\/20 text-base\">E = 9 \u00d7 10\u2075 N\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-emerald-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">3<\/span>\r\n <p class=\"text-[13px] text-emerald-100 font-bold\">\u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629 \u0644\u0644\u0634\u062d\u0646\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-3\">\r\n <p class=\"text-slate-400\">\u0645\u0633\u0627\u062d\u0629 \u0633\u0637\u062d \u0627\u0644\u0643\u0631\u0629 A = 4\u03c0R\u00b2 \u062d\u064a\u062b R = 0.1 m:<\/p>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-max min-w-[250px] shadow-inner\" dir=\"ltr\">\r\n <div>\u03c3 = Q \/ (4\u03c0R\u00b2)<\/div>\r\n <div class=\"text-slate-500 text-l\">A = 4 \u00d7 3.14 \u00d7 (0.1)\u00b2 \u2248 0.1256 m\u00b2<\/div>\r\n <div>\u03c3 = (4\u00d710\u207b\u2076) \/ 0.1256<\/div>\r\n <div class=\"text-indigo-400 font-bold pt-2 border-t border-indigo-500\/20 text-base\">\u03c3 = 3.18 \u00d7 10\u207b\u2075 C\/m\u00b2<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 pt-6 border-t border-slate-700\/50 mt-8\">\r\n <div class=\"flex items-center gap-3 border-b border-emerald-500\/20 pb-3\">\r\n <span class=\"w-10 h-10 rounded-xl bg-emerald-500\/20 text-emerald-400 flex items-center justify-center font-bold text-lg shadow-[0_0_15px_rgba(16,185,129,0.2)]\">2<\/span>\r\n <h4 class=\"text-xl font-bold text-white\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0642\u0634\u0631\u0629 (\u0635\u0641\u064a\u062d\u0629) \u0645\u0633\u062a\u0648\u064a\u0629 \u0644\u0627 \u0646\u0647\u0627\u0626\u064a\u0629<\/h4>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-900\/50 p-4 rounded-xl border-r-4 border-emerald-500 shadow-inner\">\r\n \u0639\u0646\u062f\u0645\u0627 \u062a\u062a\u0648\u0632\u0639 \u0627\u0644\u0634\u062d\u0646\u0629 \u0628\u0627\u0646\u062a\u0638\u0627\u0645 \u0639\u0644\u0649 \u0642\u0634\u0631\u0629 \u0648\u0627\u0633\u0639\u0629 \u062c\u062f\u0627\u064b (\u0644\u0627 \u0646\u0647\u0627\u0626\u064a\u0629)\u060c \u0641\u0625\u0646 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062a\u062e\u0631\u062c \u0639\u0645\u0648\u062f\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d\u064a\u0646 \u0641\u064a \u0643\u0644\u0627 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u064a\u0646. \u0644\u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0647\u0630\u0627 \u0627\u0644\u0645\u062c\u0627\u0644 \u0646\u0633\u062a\u062e\u062f\u0645 <strong>\u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0623\u0633\u0637\u0648\u0627\u0646\u064a<\/strong> \u064a\u062e\u062a\u0631\u0642 \u0627\u0644\u0642\u0634\u0631\u0629.\r\n <\/p>\r\n <div class=\"bg-slate-800\/40 rounded-2xl border border-slate-600\/50 overflow-hidden shadow-lg\">\r\n <div class=\"bg-slate-800 border-b border-slate-600\/50 px-5 py-3 flex items-center gap-2\">\r\n <span class=\"text-emerald-400\">#<\/span>\r\n <h5 class=\"text-emerald-300 font-bold text-l\">\u0627\u0644\u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0627\u0644\u0631\u064a\u0627\u0636\u064a (\u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629)<\/h5>\r\n <\/div>\r\n <div class=\"p-5 flex flex-col lg:flex-row gap-6 items-stretch\">\r\n <div class=\"flex-1 w-full space-y-4\">\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-emerald-500\/10 text-emerald-400 flex items-center justify-center font-mono font-bold text-l border border-emerald-500\/20\">1<\/div>\r\n <div class=\"space-y-2\">\r\n <p class=\"text-[13px] text-slate-300\">\u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0627\u0644\u0623\u0633\u0637\u0648\u0627\u0646\u064a. \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062a\u062e\u062a\u0631\u0642 \u0641\u0642\u0637 \u0627\u0644\u0642\u0627\u0639\u062f\u062a\u064a\u0646.<\/p>\r\n <div class=\"font-mono text-emerald-300 bg-black\/40 px-3 py-2 rounded-lg border border-black inline-block text-l shadow-inner\" dir=\"ltr\">\u03a6<sub>net<\/sub> = EA + EA = <span class=\"font-bold text-white\">2EA<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-emerald-500\/10 text-emerald-400 flex items-center justify-center font-mono font-bold text-l border border-emerald-500\/20\">2<\/div>\r\n <div class=\"space-y-2\">\r\n <p class=\"text-[13px] text-slate-300\">\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0623\u0633\u0637\u0648\u0627\u0646\u0629.<\/p>\r\n <div class=\"font-mono text-emerald-300 bg-black\/40 px-3 py-2 rounded-lg border border-black inline-block text-l shadow-inner\" dir=\"ltr\">q<sub>in<\/sub> = <span class=\"font-bold text-white\">\u03c3 \u00b7 A<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-emerald-500\/10 text-emerald-400 flex items-center justify-center font-mono font-bold text-l border border-emerald-500\/20\">3<\/div>\r\n <div class=\"space-y-2 w-full\">\r\n <p class=\"text-[13px] text-slate-300\">\u062a\u0637\u0628\u064a\u0642 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633 \u0648\u0627\u062e\u062a\u0635\u0627\u0631 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (A).<\/p>\r\n <div class=\"font-mono text-slate-300 bg-black\/40 p-3 rounded-lg border border-black inline-block text-l shadow-inner space-y-1 w-full max-w-[280px]\" dir=\"ltr\">\r\n <div>\u222e E \u00b7 dA = q<sub>in<\/sub> \/ \u03b5<sub>0<\/sub><\/div>\r\n <div class=\"text-emerald-400 border-t border-slate-700 pt-2 mt-2 font-bold\">2E<span class=\"text-rose-400\/70 line-through\">A<\/span> = \u03c3<span class=\"text-rose-400\/70 line-through\">A<\/span> \/ \u03b5<sub>0<\/sub><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full lg:w-1\/3 min-w-[280px]\">\r\n <div class=\"bg-gradient-to-br from-emerald-900\/40 to-black\/60 p-6 flex flex-col justify-center items-center rounded-2xl border border-emerald-500\/30 shadow-2xl space-y-4 relative overflow-hidden h-full\">\r\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(16,185,129,0.15),transparent_70%)]\"><\/div>\r\n <span class=\"text-l text-emerald-300\/70 uppercase tracking-widest relative z-10 font-bold bg-emerald-500\/10 px-3 py-1 rounded-full border border-emerald-500\/20 shadow-l\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629<\/span>\r\n <div class=\"text-center font-mono text-4xl text-white font-bold direction-ltr relative z-10 drop-shadow-lg py-2\">E = <span class=\"text-emerald-400\">\u03c3 \/ (2\u03b5<sub>0<\/sub>)<\/span><\/div>\r\n <div class=\"w-12 h-1 bg-emerald-500\/30 rounded-full relative z-10 my-2\"><\/div>\r\n <p class=\"text-[12px] text-emerald-100\/90 text-center relative z-10 leading-relaxed bg-black\/30 p-4 rounded-xl border border-emerald-500\/20 shadow-inner\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0647\u0646\u0627 <strong>\u0645\u0646\u062a\u0638\u0645<\/strong> \u062a\u0645\u0627\u0645\u0627\u064b\u060c \u062b\u0627\u0628\u062a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0648\u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0639\u0646 \u0627\u0644\u0635\u0641\u064a\u062d\u0629!<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 pt-6 border-t border-slate-700\/50 mt-8\">\r\n <div class=\"flex items-center gap-3 border-b border-rose-500\/20 pb-3\">\r\n <span class=\"w-10 h-10 rounded-xl bg-rose-500\/20 text-rose-400 flex items-center justify-center font-bold text-lg shadow-[0_0_15px_rgba(244,63,94,0.2)]\">3<\/span>\r\n <h4 class=\"text-xl font-bold text-white\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0628\u064a\u0646 \u0635\u0641\u064a\u062d\u062a\u064a\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u062a\u064a\u0646 \u0645\u0634\u062d\u0648\u0646\u062a\u064a\u0646 \u0648\u0645\u062e\u062a\u0644\u0641\u062a\u064a\u0646<\/h4>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-900\/50 p-4 rounded-xl border-r-4 border-rose-500 shadow-inner\">\r\n \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 \u0627\u0644\u062a\u0631\u062a\u064a\u0628 (\u0641\u064a \u0627\u0644\u0645\u0643\u062b\u0641\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0648\u064a\u0629) \u0644\u062a\u0648\u0644\u064a\u062f <strong>\u0645\u062c\u0627\u0644 \u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0645\u0646\u062a\u0638\u0645 \u062c\u062f\u0627\u064b \u0648\u0645\u0636\u0628\u0648\u0637<\/strong>. \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u0627\u0646 \u062a\u0645\u062a\u0644\u0643\u0627\u0646 \u0646\u0641\u0633 \u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629 \u0648\u0644\u0643\u0646 \u0628\u0625\u0634\u0627\u0631\u062a\u064a\u0646 \u0645\u062e\u062a\u0644\u0641\u062a\u064a\u0646 (+ \u0648 -).\r\n <\/p>\r\n <div class=\"bg-slate-800\/40 rounded-2xl border border-slate-600\/50 overflow-hidden shadow-lg\">\r\n <div class=\"bg-slate-800 border-b border-slate-600\/50 px-5 py-3 flex items-center gap-2\">\r\n <span class=\"text-rose-400\">#<\/span>\r\n <h5 class=\"text-rose-300 font-bold text-l\">\u0627\u0644\u062a\u0641\u0633\u064a\u0631 \u0627\u0644\u0627\u0633\u062a\u0646\u062a\u0627\u062c\u064a (\u0645\u0628\u062f\u0623 \u0627\u0644\u062a\u0631\u0627\u0643\u0628)<\/h5>\r\n <\/div>\r\n <div class=\"p-5 flex flex-col lg:flex-row gap-6 items-stretch\">\r\n <div class=\"flex-1 w-full space-y-4\">\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-rose-500\/10 text-rose-400 flex items-center justify-center font-bold text-lg border border-rose-500\/20\">x<\/div>\r\n <div class=\"space-y-2 w-full\">\r\n <p class=\"text-[13px] text-slate-300 font-bold border-b border-rose-500\/20 pb-1 mb-1 inline-block\">\u062e\u0627\u0631\u062c \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646 (\u0627\u0644\u0645\u0646\u0637\u0642\u062a\u064a\u0646 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u062a\u064a\u0646):<\/p>\r\n <p class=\"text-[12.5px] text-slate-400\">\u0627\u0644\u0645\u062c\u0627\u0644\u0627\u0646 \u0645\u062a\u0639\u0627\u0643\u0633\u0627\u0646 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0648\u0645\u062a\u0633\u0627\u0648\u064a\u0627\u0646 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631\u060c \u0641\u064a\u0644\u063a\u064a\u0627\u0646 \u0628\u0639\u0636\u0647\u0645\u0627.<\/p>\r\n <div class=\"font-mono text-rose-300 bg-black\/40 p-3 rounded-lg border border-white\/5 inline-block text-l shadow-inner w-full max-w-[320px]\" dir=\"ltr\">E<sub>out<\/sub> = E<sub>(+)<\/sub> - E<sub>(-)<\/sub> = <span class=\"font-bold text-white\">0<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-emerald-500\/10 text-emerald-400 flex items-center justify-center font-bold text-xl border border-emerald-500\/20\">+<\/div>\r\n <div class=\"space-y-2 w-full\">\r\n <p class=\"text-[13px] text-slate-300 font-bold border-b border-emerald-500\/20 pb-1 mb-1 inline-block\">\u0628\u064a\u0646 \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646 (\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u064a\u0629):<\/p>\r\n <p class=\"text-[12.5px] text-slate-400\">\u064a\u062a\u062c\u0647 \u0627\u0644\u0645\u062c\u0627\u0644\u0627\u0646 \u0641\u064a \u0646\u0641\u0633 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u060c \u0641\u0646\u0642\u0648\u0645 <strong>\u0628\u062c\u0645\u0639<\/strong> \u0627\u0644\u0645\u0642\u062f\u0627\u0631\u064a\u0646.<\/p>\r\n <div class=\"font-mono text-slate-300 bg-black\/40 p-3 rounded-lg border border-white\/5 inline-block text-l shadow-inner space-y-1 w-full max-w-[320px]\" dir=\"ltr\">\r\n <div>E<sub>net<\/sub> = E<sub>(+)<\/sub> + E<sub>(-)<\/sub><\/div>\r\n <div class=\"text-emerald-400 border-t border-slate-700 pt-2 mt-2 font-bold leading-relaxed\">E<sub>net<\/sub> = [\u03c3\/2\u03b5<sub>0<\/sub>] + [\u03c3\/2\u03b5<sub>0<\/sub>] = <span class=\"text-white\">\u03c3 \/ \u03b5<sub>0<\/sub><\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full lg:w-1\/3 min-w-[280px]\">\r\n <div class=\"bg-gradient-to-br from-rose-900\/40 to-black\/60 p-6 flex flex-col justify-center items-center rounded-2xl border border-rose-500\/30 shadow-2xl space-y-4 relative overflow-hidden h-full\">\r\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(244,63,94,0.15),transparent_70%)]\"><\/div>\r\n <span class=\"text-l text-rose-300\/70 uppercase tracking-widest relative z-10 font-bold bg-rose-500\/10 px-3 py-1 rounded-full border border-rose-500\/20 shadow-l\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629<\/span>\r\n <div class=\"space-y-1 relative z-10 w-full text-center py-2\">\r\n <p class=\"text-[11px] text-slate-400 mb-2\">\u0627\u0644\u0645\u062c\u0627\u0644 <span class=\"text-rose-300 font-bold\">\u0628\u064a\u0646<\/span> \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646:<\/p>\r\n <div class=\"font-mono text-4xl text-white font-bold direction-ltr drop-shadow-lg\">E = <span class=\"text-rose-400\">\u03c3 \/ \u03b5<sub>0<\/sub><\/span><\/div>\r\n <\/div>\r\n <div class=\"w-full border-t border-rose-500\/20 relative z-10 mt-auto pt-4\">\r\n <div class=\"flex justify-between items-center bg-black\/40 px-4 py-2.5 rounded-xl border border-rose-500\/10 shadow-inner\">\r\n <span class=\"text-[11.5px] text-slate-400\">\u0627\u0644\u0645\u062c\u0627\u0644 <span class=\"text-slate-300 font-bold\">\u062e\u0627\u0631\u062c\u0647\u0645\u0627<\/span>:<\/span>\r\n <div class=\"font-mono text-lg text-rose-400 font-bold\" dir=\"ltr\">E<sub>out<\/sub> = 0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-8 bg-slate-800\/60 rounded-2xl border border-rose-500\/20 overflow-hidden shadow-lg group hover:border-rose-500\/40 transition-colors\">\r\n <div class=\"bg-rose-500\/10 px-5 py-3 border-b border-rose-500\/20 flex items-center justify-between\">\r\n <h5 class=\"text-rose-300 font-bold text-l flex items-center gap-2\"># \u0645\u062b\u0627\u0644 \u0645\u062d\u0644\u0648\u0644: \u0627\u0644\u0645\u0643\u062b\u0641 \u0627\u0644\u0645\u0633\u062a\u0648\u064a<\/h5>\r\n <\/div>\r\n <div class=\"p-5 space-y-5\">\r\n <div class=\"text-l text-slate-300 bg-black\/20 p-4 rounded-xl border border-white\/5\">\r\n \u0635\u0641\u064a\u062d\u062a\u0627\u0646 \u0645\u0639\u062f\u0646\u064a\u062a\u0627\u0646 \u0645\u0633\u0627\u062d\u0629 \u0643\u0644 \u0645\u0646\u0647\u0645\u0627 <span class=\"font-mono text-rose-300\">A = 0.2 m\u00b2<\/span>. \u0634\u062d\u0646\u062a\u0627\u0647\u0645\u0627 <span class=\"font-mono text-rose-300\">Q = 8.85 \u00b5C<\/span> \u0645\u062e\u062a\u0644\u0641\u062a\u0627\u0646. \u0627\u062d\u0633\u0628 \u0627\u0644\u0645\u062c\u0627\u0644 \u0628\u064a\u0646\u0647\u0645\u0627 \u0648\u062e\u0627\u0631\u062c\u0647\u0645\u0627.\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"space-y-2 bg-slate-800\/80 p-4 rounded-xl border border-rose-500\/10\">\r\n <span class=\"text-[11px] font-bold text-rose-400 uppercase tracking-wider block\">\u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u0623\u0648\u0644\u0649<\/span>\r\n <p class=\"text-l text-slate-400\">\u062d\u0633\u0627\u0628 \u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629:<\/p>\r\n <div class=\"font-mono text-l text-rose-200 bg-black\/40 p-2 rounded block\" dir=\"ltr\">\u03c3 = Q\/A = 44.25\u00d710\u207b\u2076 C\/m\u00b2<\/div>\r\n <\/div>\r\n <div class=\"space-y-2 bg-slate-800\/80 p-4 rounded-xl border border-emerald-500\/10\">\r\n <span class=\"text-[11px] font-bold text-emerald-400 uppercase tracking-wider block\">\u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629<\/span>\r\n <p class=\"text-l text-slate-400\">\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062c\u0627\u0644 \u0628\u064a\u0646 \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646:<\/p>\r\n <div class=\"font-mono text-l text-emerald-200 bg-black\/40 p-2 rounded block\" dir=\"ltr\">E = \u03c3\/\u03b5\u2080 = 5\u00d710\u2076 N\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-rose-500\/10 text-rose-300\/80 p-3 rounded-lg text-l flex items-center justify-between border border-rose-500\/20\">\r\n <div><strong class=\"text-rose-300\">\u062e\u0627\u0631\u062c \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646:<\/strong> \u0627\u0644\u0645\u062c\u0627\u0644 \u064a\u0644\u063a\u064a \u0628\u0639\u0636\u0647!<\/div>\r\n <div class=\"font-mono font-bold text-rose-400\" dir=\"ltr\">E<sub>out<\/sub> = 0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-blue-400 rounded-full\"><\/span>\r\n \u062e\u0627\u0645\u0633\u0627\u064b: \u062d\u0631\u0643\u0629 \u062c\u0633\u064a\u0645 \u0645\u0634\u062d\u0648\u0646 \u0641\u064a \u0645\u062c\u0627\u0644 \u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0645\u0646\u062a\u0638\u0645\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-8\">\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\u0639\u0646\u062f\u0645\u0627 \u064a\u0648\u0636\u0639 \u062c\u0633\u064a\u0645 \u0645\u0634\u062d\u0648\u0646 \u0641\u064a \u0645\u062c\u0627\u0644 \u0645\u0646\u062a\u0638\u0645\u060c \u0641\u0625\u0646\u0647 \u064a\u062a\u0623\u062b\u0631 \u0628\u0642\u0648\u0629 \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u062b\u0627\u0628\u062a\u0629 \u062a\u0624\u062f\u064a \u0625\u0644\u0649 \u062a\u0633\u0627\u0631\u0639 \u062b\u0627\u0628\u062a \u0648\u0641\u0642 \u0642\u0627\u0646\u0648\u0646 \u0646\u064a\u0648\u062a\u0646 \u0627\u0644\u062b\u0627\u0646\u064a.<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"p-5 bg-blue-900\/10 rounded-2xl border border-blue-500\/20 text-center space-y-2\">\r\n <h5 class=\"text-l text-slate-400 uppercase\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629:<\/h5>\r\n <div class=\"font-mono text-2xl text-white\">F<sub>E<\/sub> = qE<\/div>\r\n <p class=\"text-[10px] text-slate-500 italic\">(\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0645\u0639 \u0627\u0644\u0645\u062c\u0627\u0644 \u0644\u0644\u0645\u0648\u062c\u0628\u0629 \u0648\u0639\u0643\u0633\u0647 \u0644\u0644\u0633\u0627\u0644\u0628\u0629)<\/p>\r\n <\/div>\r\n <div class=\"p-5 bg-blue-900\/10 rounded-2xl border border-blue-500\/20 text-center space-y-2\">\r\n <h5 class=\"text-l text-slate-400 uppercase\">\u0627\u0644\u062a\u0633\u0627\u0631\u0639:<\/h5>\r\n <div class=\"font-mono text-2xl text-white\">a = qE \/ m<\/div>\r\n <p class=\"text-[10px] text-slate-500 italic\">(\u0628\u0625\u0647\u0645\u0627\u0644 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0648\u0632\u0646)<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-6 rounded-2xl border border-white\/5 space-y-4\">\r\n <h4 class=\"text-l text-blue-300 font-bold mb-3 border-b border-white\/10 pb-2 flex items-center gap-2\"># \u0648\u0635\u0641 \u0627\u0644\u062d\u0631\u0643\u0629 (\u0645\u0639\u0627\u062f\u0644\u0627\u062a \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a):<\/h4>\r\n <div class=\"grid grid-cols-1 l:grid-cols-3 gap-3\">\r\n <div class=\"bg-slate-800\/80 p-3 rounded-lg text-center font-mono text-l text-slate-300 direction-ltr\">v_f = v_i + at<\/div>\r\n <div class=\"bg-slate-800\/80 p-3 rounded-lg text-center font-mono text-l text-slate-300 direction-ltr\">\u0394x = v_i t + \u00bdat\u00b2<\/div>\r\n <div class=\"bg-slate-800\/80 p-3 rounded-lg text-center font-mono text-l text-slate-300 direction-ltr\">v_f\u00b2 = v_i\u00b2 + 2a\u0394x<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"parallel-plate-motion-sim-root\" class=\"simulation-container\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6 mt-12\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-zinc-400 rounded-full\"><\/span>\r\n \u0623\u0645\u062b\u0644\u0629 \u0645\u062d\u0644\u0648\u0644\u0629 \u0647\u0627\u0645\u0629 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628\r\n <\/h3>\r\n <div class=\"space-y-6\">\r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-cyan-500\/20 hover:border-cyan-500\/50 transition-colors shadow-lg\">\r\n <h4 class=\"text-base font-bold text-cyan-300 mb-3 flex items-center gap-2 border-b border-cyan-500\/10 pb-3\"><span class=\"w-6 h-6 rounded-full bg-cyan-500\/20 flex items-center justify-center text-l\">1<\/span> \u0645\u062b\u0627\u0644 1 (\u0635 88): \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0639\u0628\u0631 \u0642\u0631\u0635<\/h4>\r\n <div class=\"space-y-4\">\r\n <p class=\"text-l text-slate-300\">\u0642\u0631\u0635 (r=0.1 m)\u060c \u0645\u062c\u0627\u0644 (E=2000 N\/C)\u060c \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0633\u0637\u062d \u0648\u0627\u0644\u0645\u062c\u0627\u0644 30\u00b0.<\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-cyan-500\/10 space-y-2\">\r\n <ul class=\"text-l text-slate-400 space-y-2\">\r\n <li>A = \u03c0r\u00b2 = 3.14\u00d7(0.1)\u00b2 = 0.0314 m\u00b2<\/li>\r\n <li>\u03b8 = 90-30 = 60\u00b0<\/li>\r\n <li>\u03a6 = 2000\u00d70.0314\u00d7cos(60\u00b0) = 31.4 N.m\u00b2\/C<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-emerald-500\/20 hover:border-emerald-500\/50 transition-colors shadow-lg\">\r\n <h4 class=\"text-base font-bold text-emerald-300 mb-3 flex items-center gap-2 border-b border-emerald-500\/10 pb-3\"><span class=\"w-6 h-6 rounded-full bg-emerald-500\/20 flex items-center justify-center text-l\">5<\/span> \u0645\u062b\u0627\u0644 5 (\u0635 97): \u0627\u062a\u0632\u0627\u0646 \u0643\u0631\u0629 \u0641\u0648\u0642 \u0642\u0634\u0631\u0629 \u0645\u0634\u062d\u0648\u0646\u0629<\/h4>\r\n <div class=\"space-y-4 text-l text-slate-300\">\r\n <p>\u0627\u0644\u0627\u062a\u0632\u0627\u0646 \u0627\u0644\u0633\u0643\u0648\u0646\u064a \u064a\u0642\u062a\u0636\u064a \u062a\u0648\u0627\u0632\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0627\u0644\u0635\u0627\u0639\u062f\u0629 \u0645\u0639 \u0648\u0632\u0646 \u0627\u0644\u0643\u0631\u0629:<\/p>\r\n <div class=\"bg-black\/40 p-4 rounded-xl font-mono text-emerald-200 text-center space-y-2 direction-ltr\">\r\n <div>F<sub>E<\/sub> = F<sub>g<\/sub><\/div>\r\n <div>q \u00b7 E = m \u00b7 g<\/div>\r\n <div class=\"text-[10px] text-slate-500 mt-2 border-t border-white\/5 pt-2\">\u062d\u064a\u062b E \u0647\u0648 \u0645\u062c\u0627\u0644 \u0627\u0644\u0642\u0634\u0631\u0629: \u03c3\/(2\u03b5\u2080)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-8 mt-12\">\r\n <div class=\"bg-slate-800\/40 p-6 md:p-8 rounded-[2rem] border border-slate-700\/80 shadow-2xl w-full relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-indigo-500\/5 blur-3xl rounded-full pointer-events-none\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-64 h-64 bg-blue-500\/5 blur-3xl rounded-full pointer-events-none\"><\/div>\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-3 mb-8 border-b border-indigo-500\/20 pb-4 relative z-10\"># \u0627\u0644\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629 \u0644\u0644\u062f\u0631\u0633<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 relative z-10\">\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 hover:border-indigo-500\/30 transition-colors flex flex-col gap-3 shadow-inner\">\r\n <h4 class=\"text-indigo-300 font-bold text-l\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0627\u0644\u062a\u062f\u0641\u0642<\/h4>\r\n <ul class=\"space-y-2 text-l text-slate-400 leading-relaxed list-disc list-inside marker:text-indigo-500\/50\">\r\n <li>\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062a\u0646\u0628\u0639 \u0645\u0646 \u0627\u0644\u0645\u0648\u062c\u0628\u0629 \u0648\u062a\u0646\u062a\u0647\u064a \u0641\u064a \u0627\u0644\u0633\u0627\u0644\u0628\u0629.<\/li>\r\n <li>\u0627\u0644\u062a\u062f\u0641\u0642 \u03a6 = E\u00b7A\u00b7cos(\u03b8) \u0645\u0642\u064a\u0627\u0633 \u0644\u0639\u062f\u062f \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062e\u062a\u0631\u0642\u0629.<\/li>\r\n <li>\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u03b8 \u0628\u064a\u0646 \u062e\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0627\u0644\u0639\u0645\u0648\u062f\u064a \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 hover:border-emerald-500\/30 transition-colors flex flex-col gap-3 shadow-inner\">\r\n <h4 class=\"text-emerald-300 font-bold text-l\">\u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633<\/h4>\r\n <ul class=\"space-y-2 text-l text-slate-400 leading-relaxed list-disc list-inside marker:text-emerald-500\/50\">\r\n <li>\u222eE\u00b7dA = \u03a3q_in\/\u03b5\u2080<\/li>\r\n <li>\u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0627\u0644\u062a\u062f\u0641\u0642 \u0639\u0644\u0649 \u0634\u0643\u0644 \u0648\u062d\u062c\u0645 \u0633\u0637\u062d \u063a\u0627\u0648\u0633.<\/li>\r\n <li>\u0627\u0644\u0634\u062d\u0646\u0627\u062a \u062e\u0627\u0631\u062c \u0627\u0644\u0633\u0637\u062d \u0644\u0627 \u062a\u0633\u0627\u0647\u0645 \u0641\u064a \u0627\u0644\u062a\u062f\u0641\u0642.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 hover:border-rose-500\/30 transition-colors flex flex-col gap-3 shadow-inner md:col-span-2 lg:col-span-1\">\r\n <h4 class=\"text-rose-300 font-bold text-l\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0642\u0648\u0627\u0646\u064a\u0646<\/h4>\r\n <ul class=\"space-y-2 text-l text-slate-400 leading-relaxed list-disc list-inside marker:text-rose-500\/50\">\r\n <li>\u0627\u0644\u0645\u062c\u0627\u0644 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0635\u0644 \u0627\u0644\u0645\u0634\u062d\u0648\u0646 = \u0635\u0641\u0631.<\/li>\r\n <li>\u0645\u062c\u0627\u0644 \u0635\u0641\u064a\u062d\u0629 \u0644\u0627 \u0646\u0647\u0627\u0626\u064a\u0629: E = \u03c3\/2\u03b5\u2080 (\u062b\u0627\u0628\u062a).<\/li>\r\n <li>\u0645\u062c\u0627\u0644 \u0628\u064a\u0646 \u0635\u0641\u064a\u062d\u062a\u064a\u0646: E = \u03c3\/\u03b5\u2080 (\u0645\u0646\u062a\u0638\u0645).<\/li>\r\n <li>\u062a\u0633\u0627\u0631\u0639 \u062c\u0633\u064a\u0645: a = qE\/m.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gradient-to-br from-amber-900\/20 to-amber-900\/5 p-6 md:p-8 rounded-[2rem] border border-amber-500\/20 shadow-2xl w-full\">\r\n <h3 class=\"text-2xl font-bold text-amber-400 flex items-center gap-3 mb-8 border-b border-amber-500\/20 pb-4\"># \u0623\u0633\u0631\u0627\u0631 \u0648\u062e\u062f\u0639 \u0627\u0645\u062a\u062d\u0627\u0646\u064a\u0629 (\u0645\u0647\u0645 \u062c\u062f\u0627\u064b!)<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div class=\"flex items-start gap-4 bg-black\/20 p-5 rounded-2xl border border-amber-500\/10 group hover:border-amber-500\/30 transition-colors\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-500\/10 flex items-center justify-center text-amber-400 flex-shrink-0 group-hover:scale-110 transition-transform\">!<\/div>\r\n <div class=\"space-y-1.5\">\r\n <h5 class=\"text-amber-300 text-l font-bold\">\u062e\u062f\u0639\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0645\u0633\u062a\u0648\u064a<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0645\u062c\u0627\u0644 \u064a\u0648\u0627\u0632\u064a \u0627\u0644\u0633\u0637\u062d\u060c \u0641\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0645\u0639 \u0627\u0644\u0639\u0645\u0648\u062f\u064a 90\u00b0 \u0648\u0627\u0644\u062a\u062f\u0641\u0642 = \u0635\u0641\u0631.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 bg-black\/20 p-5 rounded-2xl border border-amber-500\/10 group hover:border-amber-500\/30 transition-colors\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-500\/10 flex items-center justify-center text-amber-400 flex-shrink-0 group-hover:scale-110 transition-transform\">!<\/div>\r\n <div class=\"space-y-1.5\">\r\n <h5 class=\"text-amber-300 text-l font-bold\">\u0627\u0644\u062c\u0633\u064a\u0645 \u0627\u0644\u0633\u0627\u0644\u0628 \u064a\u0639\u0627\u0643\u0633 \u0627\u0644\u062a\u064a\u0627\u0631<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0627\u0644\u062c\u0633\u064a\u0645 \u0627\u0644\u0645\u0648\u062c\u0628 \u064a\u062a\u062d\u0631\u0643 \u0645\u0639 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644\u060c \u0648\u0627\u0644\u0633\u0627\u0644\u0628 \u064a\u0646\u062d\u0631\u0641 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 bg-black\/20 p-5 rounded-2xl border border-amber-500\/10 group hover:border-amber-500\/30 transition-colors\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-500\/10 flex items-center justify-center text-amber-400 flex-shrink-0 group-hover:scale-110 transition-transform\">!<\/div>\r\n <div class=\"space-y-1.5\">\r\n <h5 class=\"text-amber-300 text-l font-bold\">\u0627\u0644\u062a\u0646\u0627\u0633\u0628 \u0627\u0644\u062a\u0631\u0628\u064a\u0639\u064a \u0627\u0644\u0639\u0643\u0633\u064a<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0646\u0627\u062a\u062c \u0639\u0646 \u0634\u062d\u0646\u0629 \u0646\u0642\u0637\u064a\u0629 \u064a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u0627\u064b \u0645\u0639 \u0645\u0631\u0628\u0639 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 1\/r\u00b2. \u062a\u0636\u0627\u0639\u0641 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u064a\u0642\u0644\u0644 \u0627\u0644\u0645\u062c\u0627\u0644 \u0644\u0644\u0631\u0628\u0639.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 bg-black\/20 p-5 rounded-2xl border border-amber-500\/10 group hover:border-amber-500\/30 transition-colors\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-500\/10 flex items-center justify-center text-amber-400 flex-shrink-0 group-hover:scale-110 transition-transform\">!<\/div>\r\n <div class=\"space-y-1.5\">\r\n <h5 class=\"text-amber-300 text-l font-bold\">\u0639\u0635\u064a\u0627\u0646 \u0627\u0644\u0633\u0627\u0644\u0628 \u0641\u064a \u0627\u0644\u0642\u0627\u0646\u0648\u0646<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0639\u0646\u062f \u062d\u0633\u0627\u0628 \u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u0623\u0648 \u0627\u0644\u0642\u0648\u0629\u060c \u0644\u0627 \u0646\u0639\u0648\u0636 \u0627\u0644\u0633\u0627\u0644\u0628 \u0648\u0646\u0633\u062a\u062e\u062f\u0645\u0647 \u0641\u0642\u0637 \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0627\u062a\u062c\u0627\u0647.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useMemo, useEffect, useRef } = React;\r\n\r\n const ElectricFieldSimulation = () => {\r\n const [scenario, setScenario] = useState(4);\r\n const width = 800; const height = 400;\r\n const charges = useMemo(() => {\r\n const cx = width\/2; const cy = height\/2;\r\n switch(scenario) {\r\n case 0: return [{q:1,x:cx,y:cy}];\r\n case 1: return [{q:-1,x:cx,y:cy}];\r\n case 2: return [{q:1,x:cx-120,y:cy},{q:1,x:cx+120,y:cy}];\r\n case 3: return [{q:1,x:cx-120,y:cy},{q:-1,x:cx+120,y:cy}];\r\n case 4:\r\n const plates=[]; const nc=24; const sp=10;\r\n const sy=cy-(nc*sp)\/2;\r\n for(let i=0;i<=nc;i++){plates.push({q:0.12,x:cx-150,y:sy+i*sp,isPlate:true});plates.push({q:-0.12,x:cx+150,y:sy+i*sp,isPlate:true});}\r\n return plates;\r\n default: return [];\r\n }\r\n }, [scenario]);\r\n\r\n const vectors = useMemo(() => {\r\n const step=25; const al=14; const vecs=[];\r\n for(let x=step\/2;x<width;x+=step){for(let y=step\/2;y<height;y+=step){\r\n let Ex=0,Ey=0,inside=false;\r\n for(let c of charges){let dx=x-c.x,dy=y-c.y,r2=dx*dx+dy*dy,r=Math.sqrt(r2);if(!c.isPlate&&r<20)inside=true;if(c.isPlate&&Math.abs(dx)<10&&Math.abs(y-height\/2)<130)inside=true;if(r2===0)continue;let E=c.q\/r2;Ex+=E*(dx\/r);Ey+=E*(dy\/r);}\r\n if(inside)continue;let mag=Math.sqrt(Ex*Ex+Ey*Ey);if(mag===0)continue;\r\n let nx=Ex\/mag,ny=Ey\/mag,l=Math.min(Math.max(Math.sqrt(mag)*90,0.15),1.0);\r\n const p1x=x-nx*(al\/2),p1y=y-ny*(al\/2),p2x=x+nx*(al\/2),p2y=y+ny*(al\/2);\r\n const a1x=p2x-nx*4-ny*3,a1y=p2y-ny*4+nx*3,a2x=p2x-nx*4+ny*3,a2y=p2y-ny*4-nx*3;\r\n vecs.push({p1x,p1y,p2x,p2y,a1x,a1y,a2x,a2y,scaledMag:l,mag});\r\n }}\r\n return vecs;\r\n }, [charges]);\r\n\r\n return (\r\n <div className=\"bg-slate-900 rounded-3xl p-6 border border-slate-700 flex flex-col items-center justify-center shadow-inner mb-6 w-full\" dir=\"rtl\">\r\n <div className=\"w-full flex flex-col md:flex-row justify-between items-center mb-6 gap-4 border-b border-slate-800 pb-4\">\r\n <h3 className=\"text-white text-xl font-bold flex items-center gap-2\"><span className=\"w-2 h-6 bg-cyan-400 rounded-full\"><\/span>\u0645\u062d\u0627\u0643\u0627\u0629 \u062d\u0642\u0644 \u0627\u0644\u0645\u062a\u062c\u0647\u0627\u062a \u0644\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h3>\r\n <p className=\"text-l text-slate-400 max-w-l\">\u064a\u0639\u0631\u0636 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0634\u062f\u062a\u0647 (\u0639\u0628\u0631 \u0627\u0644\u0633\u0637\u0648\u0639) \u0639\u0646\u062f \u0643\u0644 \u0646\u0642\u0637\u0629 \u0641\u064a \u0627\u0644\u0641\u0631\u0627\u063a.<\/p>\r\n <\/div>\r\n <div className=\"flex bg-black\/40 rounded-2xl p-1.5 border border-white\/10 mb-6 flex-wrap justify-center w-full gap-1.5 shadow-lg\">\r\n {['\u0634\u062d\u0646\u0629 \u0645\u0648\u062c\u0628\u0629','\u0634\u062d\u0646\u0629 \u0633\u0627\u0644\u0628\u0629','\u0634\u062d\u0646\u062a\u0627\u0646 \u0645\u0648\u062c\u0628\u062a\u0627\u0646','\u062b\u0646\u0627\u0626\u064a \u0642\u0637\u0628 (+ \u0648 -)','\u0635\u0641\u064a\u062d\u062a\u0627\u0646 \u0645\u062e\u062a\u0644\u0641\u062a\u0627 \u0627\u0644\u0634\u062d\u0646\u0629'].map((l,i)=>(\r\n <button key={i} onClick={()=>setScenario(i)} className={`px-4 py-2.5 rounded-xl transition-all duration-300 font-bold text-l md:text-l flex-1 ${scenario===i?'bg-indigo-500 text-white shadow-[0_0_15px_rgba(99,102,241,0.5)]':'text-slate-400 hover:text-white hover:bg-slate-800'}`}>{l}<\/button>\r\n ))}\r\n <\/div>\r\n <div className=\"w-full relative rounded-2xl overflow-hidden border border-slate-700\/50 bg-slate-800 shadow-2xl\">\r\n <svg viewBox={`0 0 ${width} ${height}`} className=\"w-full h-auto block select-none max-h-[500px]\">\r\n <g>{vectors.map((v,i)=>(<g key={i} style={{opacity:v.scaledMag}} className=\"transition-opacity duration-300\"><line x1={v.p1x} y1={v.p1y} x2={v.p2x} y2={v.p2y} stroke={v.scaledMag>0.8?\"#22d3ee\":\"#94a3b8\"} strokeWidth={v.scaledMag>0.8?\"2\":\"1.5\"} \/><polygon points={`${v.p2x},${v.p2y} ${v.a1x},${v.a1y} ${v.a2x},${v.a2y}`} fill={v.scaledMag>0.8?\"#22d3ee\":\"#94a3b8\"} \/><\/g>))}<\/g>\r\n <g>{charges.filter(c=>!c.isPlate).map((c,i)=>(<g key={i}><circle cx={c.x} cy={c.y} r=\"40\" fill={c.q>0?'rgba(244,63,94,0.15)':'rgba(14,165,233,0.15)'} className=\"animate-pulse\" \/><circle cx={c.x} cy={c.y} r=\"25\" fill={c.q>0?'rgba(244,63,94,0.3)':'rgba(14,165,233,0.3)'} \/><circle cx={c.x} cy={c.y} r=\"16\" fill={c.q>0?'#f43f5e':'#0ea5e9'} stroke={c.q>0?'#fda4af':'#7dd3fc'} strokeWidth=\"2.5\" \/><text x={c.x} y={c.y+1} fill=\"#fff\" fontSize=\"22\" fontFamily=\"sans-serif\" textAnchor=\"middle\" dominantBaseline=\"central\" fontWeight=\"bold\">{c.q>0?'+':'-'}<\/text><\/g>))}<\/g>\r\n {scenario===4&&(<g><rect x={width\/2-155} y={height\/2-125} width=\"10\" height=\"250\" fill=\"rgba(244,63,94,0.6)\" stroke=\"#f43f5e\" strokeWidth=\"2\" rx=\"4\" \/><text x={width\/2-170} y={height\/2} fill=\"#fda4af\" fontSize=\"24\" fontWeight=\"bold\" transform={`rotate(-90 ${width\/2-170} ${height\/2})`} textAnchor=\"middle\">+++++++++<\/text><rect x={width\/2+145} y={height\/2-125} width=\"10\" height=\"250\" fill=\"rgba(14,165,233,0.6)\" stroke=\"#0ea5e9\" strokeWidth=\"2\" rx=\"4\" \/><text x={width\/2+175} y={height\/2} fill=\"#7dd3fc\" fontSize=\"24\" fontWeight=\"bold\" transform={`rotate(-90 ${width\/2+175} ${height\/2})`} textAnchor=\"middle\">---------<\/text><\/g>)}\r\n <\/svg>\r\n <div className=\"absolute bottom-4 right-4 bg-black\/60 p-3.5 rounded-xl border border-white\/10 backdrop-blur-md shadow-2xl\">\r\n <div className=\"text-[11px] text-slate-300 flex items-center gap-3 mb-2 font-bold\"><div className=\"flex gap-1\"><span className=\"w-4 h-[2px] bg-cyan-400 shadow-[0_0_8px_#22d3ee] block\"><\/span><\/div>\u0645\u062c\u0627\u0644 \u0642\u0648\u064a<\/div>\r\n <div className=\"text-[11px] text-slate-500 flex items-center gap-3 font-bold\"><div className=\"flex gap-1\"><span className=\"w-4 h-[1.5px] bg-slate-500 block\"><\/span><\/div>\u0645\u062c\u0627\u0644 \u0636\u0639\u064a\u0641<\/div>\r\n {scenario===4&&<div className=\"mt-3 pt-3 border-t border-white\/10 text-[10px] text-cyan-200 italic\">* \u0627\u0644\u0645\u062a\u062c\u0647\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646 \u0645\u0646\u062a\u0638\u0645\u0629\u060c \u0648\u062a\u0646\u062d\u0646\u064a \u0639\u0646\u062f \u0627\u0644\u0623\u0637\u0631\u0627\u0641.<\/div>}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const ElectricFlulimulation = () => {\r\n const [shape, setShape] = useState('plane');\r\n const [angle, setAngle] = useState(45);\r\n const [eStrength, setEStrength] = useState(3);\r\n const [areaMult, setAreaMult] = useState(2);\r\n const rad=(angle*Math.PI)\/180;const S_base=80;const S=S_base*Math.sqrt(areaMult);const R=S\/2;\r\n const cx=350;const cy=250;\r\n const project=(x,y,z)=>({x:cx+x*0.9-y*0.5,y:cy-z*0.9+y*0.35});\r\n const nx=Math.cos(rad);const ny=Math.sin(rad);\r\n const cornerVars=[{u:1,v:1},{u:-1,v:1},{u:-1,v:-1},{u:1,v:-1}];\r\n const corners=cornerVars.map(c=>{const u=c.u*R,v=c.v*R;return {x:u*(-Math.sin(rad)),y:u*Math.cos(rad),z:v};});\r\n const planePath=corners.map((c,i)=>{const p=project(c.x,c.y,c.z);return `${i===0?'M':'L'} ${p.x} ${p.y}`;}).join(\" \")+\" Z\";\r\n const planeGridLines=[];\r\n for(let v=-R;v<=R;v+=R\/2){planeGridLines.push({p1:project(R*(-Math.sin(rad)),R*Math.cos(rad),v),p2:project(-R*(-Math.sin(rad)),-R*Math.cos(rad),v)});}\r\n for(let u=-R;u<=R;u+=R\/2){planeGridLines.push({p1:project(u*(-Math.sin(rad)),u*Math.cos(rad),-R),p2:project(u*(-Math.sin(rad)),u*Math.cos(rad),R)});}\r\n const normalOrigin=project(0,0,0);const normalEnd=project(nx*140,ny*140,0);\r\n const eRefEnd=project(140,0,0);const arcRadius=45;const arcPoints=[];\r\n for(let a=0;a<=angle;a+=5){const ra=(a*Math.PI)\/180;const pt=project(Math.cos(ra)*arcRadius,Math.sin(ra)*arcRadius,0);arcPoints.push(`${a===0?'M':'L'} ${pt.x} ${pt.y}`);}\r\n const ptLast=project(Math.cos(rad)*arcRadius,Math.sin(rad)*arcRadius,0);if(angle>0)arcPoints.push(`L ${ptLast.x} ${ptLast.y}`);\r\n const arcPath=arcPoints.join(\" \");const labelRad=((angle\/2)*Math.PI)\/180;\r\n const arcLabelPt=project(Math.cos(labelRad)*(arcRadius+20),Math.sin(labelRad)*(arcRadius+20),0);\r\n const numLines1D=eStrength*2+1;const totalSpan=220;const yVals=[],zVals=[];\r\n for(let i=0;i<numLines1D;i++){const val=-totalSpan\/2+(totalSpan\/Math.max(1,numLines1D-1))*i;yVals.push(val);zVals.push(val);}\r\n let passingCount=0;const fieldLines=[];\r\n yVals.forEach(y=>{zVals.forEach(z=>{let isHit=false,x_in=null,x_out=null,singleX=null;\r\n if(shape==='plane'){if(Math.abs(Math.cos(rad))<0.0001){if(Math.abs(y)<0.0001&&Math.abs(z)<=R){isHit=true;singleX=0;}}else{const u=y\/Math.cos(rad);if(Math.abs(u)<=R*1.01&&Math.abs(z)<=R*1.01){isHit=true;singleX=-y*Math.tan(rad);}}}\r\n else if(shape==='sphere'){const r2=R*R,d2=y*y+z*z;if(d2<=r2){isHit=true;const xo=Math.sqrt(r2-d2);x_in=-xo;x_out=xo;}}\r\n else if(shape==='cube'){if(Math.abs(z)<=R){const EPS=0.0001;let t1_min,t1_max,t2_min,t2_max;if(Math.abs(Math.cos(rad))<EPS){t1_min=-Infinity;t1_max=Infinity;}else{const b1=(-R-y*Math.sin(rad))\/Math.cos(rad),b2=(R-y*Math.sin(rad))\/Math.cos(rad);t1_min=Math.min(b1,b2);t1_max=Math.max(b1,b2);}if(Math.abs(Math.sin(rad))<EPS){t2_min=-Infinity;t2_max=Infinity;}else{const b3=(y*Math.cos(rad)-R)\/Math.sin(rad),b4=(y*Math.cos(rad)+R)\/Math.sin(rad);t2_min=Math.min(b3,b4);t2_max=Math.max(b3,b4);}const min_x=Math.max(t1_min,t2_min),max_x=Math.min(t1_max,t2_max);if(min_x<=max_x){isHit=true;x_in=min_x;x_out=max_x;}}}\r\n if(isHit)passingCount++;fieldLines.push({id:`${y}-${z}`,y,z,isHit,start:project(-360,y,z),end:project(360,y,z),ptIn:isHit&&x_in!==null?project(x_in,y,z):null,ptOut:isHit&&x_out!==null?project(x_out,y,z):null,ptSingle:isHit&&singleX!==null?project(singleX,y,z):null});\r\n });});\r\n const totalLines=yVals.length*zVals.length;\r\n const linesBehind=fieldLines.filter(l=>l.y>0);const linesFront=fieldLines.filter(l=>l.y<=0);\r\n const isClosed=shape==='cube'||shape==='sphere';let fluxValStr=\"0.0\";\r\n if(!isClosed){const v=eStrength*areaMult*Math.cos(rad);fluxValStr=(v>0?\"+\":\"\")+v.toFixed(1);}\r\n const FlowLineRenderer=({lines})=>(<g>{lines.map(line=>{let activeColor=\"#22d3ee\";if(shape==='plane'&&angle>90)activeColor=\"#f43f5e\";const color=line.isHit?activeColor:\"#334155\",sw=line.isHit?2:1.5;const ax=line.end.x-line.start.x,ay=line.end.y-line.start.y,mag=Math.sqrt(ax*ax+ay*ay),nvx=ax\/mag,nvy=ay\/mag;return(<g key={line.id} style={{transition:'all 0.3s ease'}}><line x1={line.start.x} y1={line.start.y} x2={line.end.x} y2={line.end.y} stroke={color} strokeWidth={sw} opacity={line.isHit?1:0.4} \/>{[0.25,0.5,0.75].map(ratio=>{let axp=line.start.x+ax*ratio,ayp=line.start.y+ay*ratio;return <polygon key={`arr-${ratio}`} points={`${axp},${ayp} ${axp-nvx*10-nvy*4},${ayp-nvy*10+nvx*4} ${axp-nvx*10+nvy*4},${ayp-nvy*10-nvx*4}`} fill={color} opacity={line.isHit?1:0.4} \/>;})}{line.ptSingle&&<circle cx={line.ptSingle.x} cy={line.ptSingle.y} r=\"2.5\" fill=\"#fff\" \/>}{line.ptIn&&<circle cx={line.ptIn.x} cy={line.ptIn.y} r=\"3\" fill=\"#f43f5e\" \/>}{line.ptOut&&<circle cx={line.ptOut.x} cy={line.ptOut.y} r=\"3\" fill=\"#34d399\" \/>}<\/g>);})}<\/g>);\r\n\r\n return (\r\n <div className=\"bg-slate-900 rounded-3xl border border-slate-700\/50 shadow-2xl overflow-hidden font-sans select-none\" dir=\"rtl\">\r\n <div className=\"bg-slate-800\/50 p-4 border-b border-slate-700 flex justify-between items-center\">\r\n <div className=\"flex items-center gap-3\"><div className=\"p-2 bg-indigo-500\/20 rounded-lg\"><span className=\"text-indigo-400 text-lg\">#<\/span><\/div><div><h4 className=\"text-l font-bold text-white\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0639\u0628\u0631 \u0627\u0644\u0623\u0633\u0637\u062d<\/h4><p className=\"text-[10px] text-slate-400 italic\">\u0633\u0637\u062d \u0645\u0641\u062a\u0648\u062d \u0648\u0645\u063a\u0644\u0642 \u0645\u0639 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u0646\u062a\u0638\u0645<\/p><\/div><\/div>\r\n <button onClick={()=>{setShape('plane');setAngle(0);setEStrength(3);setAreaMult(2);}} className=\"p-1.5 hover:bg-white\/5 border border-transparent hover:border-slate-700 rounded-lg transition-all text-slate-400 hover:text-white flex items-center gap-2 text-l\"><span>\u0627\u0639\u0627\u062f\u0629<\/span> \u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0635\u0641\u0631<\/button>\r\n <\/div>\r\n <div className=\"flex flex-col lg:flex-row p-6 gap-6\">\r\n <div className=\"flex-1 relative bg-[#0b1120] rounded-3xl border border-white\/5 overflow-hidden shadow-inner flex items-center justify-center min-h-[450px]\">\r\n <div className=\"absolute top-4 left-4 z-10\"><div className=\"text-[10px] text-slate-400 font-bold mb-2\">\u0627\u062e\u062a\u0631 \u0634\u0643\u0644 \u0627\u0644\u0633\u0637\u062d<\/div><div className=\"flex bg-slate-800\/80 backdrop-blur-md rounded-xl border border-slate-700 overflow-hidden shadow-lg p-1\">{[{id:'plane',label:'\u0645\u0633\u062a\u0648\u064a'},{id:'cube',label:'\u0645\u0643\u0639\u0628'},{id:'sphere',label:'\u0643\u0631\u0629'}].map(s=>(<button key={s.id} onClick={()=>{setShape(s.id);if(s.id==='sphere')setAngle(0);else setAngle(45);}} className={`px-3 py-1.5 text-l font-bold rounded-lg transition-colors border ${shape===s.id?'bg-cyan-500\/20 text-cyan-300 border-cyan-500\/30':'text-slate-400 hover:bg-white\/5 border-transparent'}`}>{s.label}<\/button>))}<\/div><\/div>\r\n <svg viewBox=\"0 0 700 500\" className=\"w-full h-full max-w-full drop-shadow-2xl\">\r\n <FlowLineRenderer lines={linesBehind} \/>\r\n <g className=\"transition-all duration-300 origin-center\">\r\n {shape==='plane'&&<g><path d={planePath} fill=\"rgba(34,211,238,0.15)\" stroke=\"#22d3ee\" strokeWidth=\"2\" \/>{planeGridLines.map((line,i)=><line key={i} x1={line.p1.x} y1={line.p1.y} x2={line.p2.x} y2={line.p2.y} stroke=\"#67e8f9\" strokeWidth=\"1\" strokeOpacity=\"0.3\" \/>)}<\/g>}\r\n {shape==='cube'&&<g><path d={`M ${project(-R,-R,-R).x} ${project(-R,-R,-R).y} L ${project(R,-R,-R).x} ${project(R,-R,-R).y} L ${project(R,R,-R).x} ${project(R,R,-R).y} L ${project(-R,R,-R).x} ${project(-R,R,-R).y} Z`} fill=\"rgba(168,85,247,0.15)\" stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><path d={`M ${project(-R,-R,R).x} ${project(-R,-R,R).y} L ${project(R,-R,R).x} ${project(R,-R,R).y} L ${project(R,R,R).x} ${project(R,R,R).y} L ${project(-R,R,R).x} ${project(-R,R,R).y} Z`} fill=\"rgba(168,85,247,0.25)\" stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><line x1={project(-R,-R,-R).x} y1={project(-R,-R,-R).y} x2={project(-R,-R,R).x} y2={project(-R,-R,R).y} stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><line x1={project(R,-R,-R).x} y1={project(R,-R,-R).y} x2={project(R,-R,R).x} y2={project(R,-R,R).y} stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><line x1={project(R,R,-R).x} y1={project(R,R,-R).y} x2={project(R,R,R).x} y2={project(R,R,R).y} stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><line x1={project(-R,R,-R).x} y1={project(-R,R,-R).y} x2={project(-R,R,R).x} y2={project(-R,R,R).y} stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><\/g>}\r\n {shape==='sphere'&&<circle cx={cx} cy={cy} r={R*0.9} fill=\"rgba(16,185,129,0.15)\" stroke=\"#10b981\" strokeWidth=\"3\" \/>}\r\n <\/g>\r\n <FlowLineRenderer lines={linesFront} \/>\r\n <g className=\"transition-all duration-300\">\r\n <line x1={normalOrigin.x} y1={normalOrigin.y} x2={eRefEnd.x} y2={eRefEnd.y} stroke=\"#22d3ee\" strokeWidth=\"1.5\" strokeDasharray=\"4 4\" \/><text x={eRefEnd.x+5} y={eRefEnd.y} fill=\"#22d3ee\" fontSize=\"12\" fontWeight=\"bold\">\u0627\u0644\u0645\u062c\u0627\u0644 (E)<\/text>\r\n {angle>0&&<g><path d={`${arcPath} L ${normalOrigin.x} ${normalOrigin.y} Z`} fill=\"rgba(250,204,21,0.1)\" \/><path d={arcPath} fill=\"none\" stroke=\"#facc15\" strokeWidth=\"2\" strokeDasharray=\"3 3\"\/><text x={arcLabelPt.x} y={arcLabelPt.y} fill=\"#facc15\" fontSize=\"14\" fontWeight=\"bold\" dominantBaseline=\"middle\" textAnchor=\"middle\">\u03b8={angle}\u00b0<\/text><\/g>}\r\n <line x1={normalOrigin.x} y1={normalOrigin.y} x2={normalEnd.x} y2={normalEnd.y} stroke=\"#f43f5e\" strokeWidth=\"3\" \/><text x={normalEnd.x} y={normalEnd.y-15} fill=\"#fff\" fontSize=\"14\" fontWeight=\"bold\">{shape==='plane'?'\u0627\u0644\u0639\u0645\u0648\u062f\u064a \u0644\u0644\u0645\u0633\u062a\u0648\u064a':'\u062f\u0648\u0631\u0627\u0646 \u0627\u0644\u0645\u062c\u0633\u0645'}<\/text>\r\n <\/g>\r\n <\/svg>\r\n <div className=\"absolute bottom-4 left-4 flex flex-col gap-2 pointer-events-none bg-slate-900\/90 border border-slate-700\/50 p-4 rounded-xl backdrop-blur-md shadow-xl text-l\">\r\n {shape==='plane'?<><div className=\"flex items-center gap-2 font-bold text-slate-200\"><span className=\"w-3 h-3 rounded-full bg-cyan-400\"><\/span> \u0646\u0642\u0627\u0637\u0639 \u0627\u0644\u062a\u062e\u0631\u064a\u0645<\/div><div className=\"flex items-center gap-2 text-slate-400\"><span className=\"w-3 h-[2px] bg-slate-500\"><\/span> \u062e\u0637\u0648\u0637 \u0644\u0645 \u062a\u062e\u062a\u0631\u0642<\/div><\/>:<><div className=\"flex items-center gap-2 font-bold text-rose-400\"><span className=\"w-3 h-3 rounded-full bg-rose-500\"><\/span> \u0646\u0642\u0627\u0637 \u0627\u0644\u062f\u062e\u0648\u0644<\/div><div className=\"flex items-center gap-2 font-bold text-emerald-400\"><span className=\"w-3 h-3 rounded-full bg-emerald-500\"><\/span> \u0646\u0642\u0627\u0637 \u0627\u0644\u062e\u0631\u0648\u062c<\/div><\/>}\r\n <\/div>\r\n <\/div>\r\n <div className=\"w-full lg:w-[320px] flex flex-col gap-4 text-right\">\r\n <div className=\"bg-slate-800\/40 p-4 rounded-3xl border border-white\/5 space-y-4 shadow-xl\">\r\n <div className=\"text-[12px] font-bold text-slate-300 border-b border-slate-700\/50 pb-2\">\u0639\u0648\u0627\u0645\u0644 \u0627\u0644\u062a\u062f\u0641\u0642<\/div>\r\n <div className=\"space-y-2\"><div className=\"flex justify-between items-center text-l\"><label className=\"font-bold text-cyan-300\">\u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 (E)<\/label><span className=\"font-mono text-cyan-400\">{eStrength} N\/C<\/span><\/div><input type=\"range\" className=\"w-full h-1.5 bg-slate-700 rounded-lg accent-cyan-400\" min=\"1\" max=\"5\" step=\"1\" value={eStrength} onChange={(e)=>setEStrength(parseInt(e.target.value))} \/><\/div>\r\n <div className=\"space-y-2\"><div className=\"flex justify-between items-center text-l\"><label className=\"font-bold text-indigo-300\">{isClosed?'\u062d\u062c\u0645 \u0627\u0644\u0645\u062c\u0633\u0645':'\u0627\u0644\u0645\u0633\u0627\u062d\u0629 (A)'}<\/label><span className=\"font-mono text-indigo-400\">{areaMult}x<\/span><\/div><input type=\"range\" className=\"w-full h-1.5 bg-slate-700 rounded-lg accent-indigo-400\" min=\"1\" max=\"4\" step=\"1\" value={areaMult} onChange={(e)=>setAreaMult(parseInt(e.target.value))} \/><\/div>\r\n <div className=\"space-y-2 pt-2 border-t border-slate-700\/50\"><div className=\"flex justify-between items-center text-l\"><label className=\"font-bold text-yellow-400\">\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/label><span className=\"font-mono text-yellow-400\">{angle}\u00b0<\/span><\/div><input type=\"range\" className=\"w-full h-1.5 bg-slate-700 rounded-lg accent-yellow-400 disabled:opacity-50\" min=\"0\" max=\"180\" step=\"1\" value={angle} onChange={(e)=>setAngle(parseInt(e.target.value))} disabled={shape==='sphere'} \/><\/div>\r\n <\/div>\r\n <div className=\"bg-slate-800\/40 p-4 rounded-3xl border border-white\/5 space-y-4 shadow-xl\">\r\n <h5 className=\"text-[12px] font-bold text-slate-300\">\u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629<\/h5>\r\n <div className=\"bg-black\/40 p-3 rounded-2xl border border-white\/5 font-mono text-center space-y-3\">\r\n {!isClosed?<div className=\"flex items-center justify-center gap-1.5 text-[13px] text-slate-300 flex-wrap\"><span className=\"text-white font-bold\">\u03a6<\/span>=<span className=\"text-cyan-400\">{eStrength}<\/span>\u00d7<span className=\"text-indigo-400\">{areaMult}<\/span>\u00d7<span className=\"text-yellow-400\">cos({angle}\u00b0)<\/span><\/div>:<div className=\"flex items-center justify-center gap-1.5 text-[12px] text-slate-300\"><span className=\"text-emerald-400\">\u03a6_out (+{passingCount})<\/span>+<span className=\"text-rose-400\">\u03a6_in (-{passingCount})<\/span><\/div>}\r\n <div className=\"text-2xl font-bold flex items-center justify-center gap-2\"><span className=\"text-slate-400 text-[11px]\">Net =<\/span><span className={isClosed?\"text-slate-200\":(parseFloat(fluxValStr)<0?\"text-rose-400\":\"text-emerald-400\")}>{fluxValStr}<\/span><\/div>\r\n <\/div>\r\n <div className=\"grid grid-cols-2 gap-2\"><div className=\"bg-slate-900\/50 p-2 rounded-xl border border-slate-700 text-center\"><div className=\"text-[9px] text-slate-500\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u062e\u0637\u0648\u0637<\/div><div className=\"text-l font-mono font-bold text-slate-300\">{totalLines}<\/div><\/div><div className=\"bg-cyan-500\/10 p-2 rounded-xl border border-cyan-500\/20 text-center\"><div className=\"text-[9px] text-cyan-500\">{isClosed?'\u062e\u0637\u0648\u0637 \u062a\u0639\u0628\u0631':'\u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062e\u062a\u0631\u0642\u0629'}<\/div><div className=\"text-l font-mono font-bold text-cyan-400\">{passingCount}<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const GaussLawSimulation = () => {\r\n const [charges, setCharges] = useState([{id:1,x:50,y:50,q:2},{id:2,x:20,y:80,q:-1},{id:3,x:70,y:55,q:-3}]);\r\n const [nextQ, setNextQ] = useState(3);\r\n const addCharge=(e)=>{const rect=e.currentTarget.getBoundingClientRect();const x=((e.clientX-rect.left)\/rect.width)*100;const y=((e.clientY-rect.top)\/rect.height)*100;if(nextQ!==0)setCharges(prev=>[...prev,{id:Date.now(),x,y,q:nextQ}]);};\r\n const removeCharge=(id)=>setCharges(prev=>prev.filter(c=>c.id!==id));\r\n const clearAll=()=>setCharges([]);\r\n const sphereR=30,cxG=50,cyG=50;\r\n const q_in=charges.reduce((acc,c)=>{const dist=Math.sqrt((c.x-cxG)**2+(c.y-cyG)**2);return dist<=sphereR?acc+c.q:acc;},0);\r\n const totalCharges=charges.length;\r\n\r\n return (\r\n <div className=\"bg-slate-900\/80 rounded-3xl border border-slate-700\/50 shadow-2xl p-6 flex flex-col lg:flex-row gap-8 font-sans select-none\" dir=\"rtl\">\r\n <div className=\"flex-1 relative bg-[#0b1120] rounded-3xl border border-white\/5 overflow-hidden shadow-inner flex flex-col items-center justify-center min-h-[400px]\">\r\n <div className=\"absolute top-4 left-4 right-4 flex justify-between items-start z-10 pointer-events-none\">\r\n <div className=\"bg-rose-500\/10 border border-rose-500\/20 px-4 py-2 rounded-2xl backdrop-blur-md shadow-xl\"><p className=\"text-[11px] text-rose-300 font-bold\">\u03a3q_in<\/p><p className=\"text-2xl font-mono font-bold text-white\">{q_in>0?<span className=\"text-emerald-400\">+<\/span>:q_in<0?<span className=\"text-indigo-400\">-<\/span>:null}{Math.abs(q_in)} <span className=\"text-l\">\u03bcC<\/span><\/p><\/div>\r\n <button onClick={clearAll} className=\"pointer-events-auto bg-slate-800\/80 hover:bg-slate-700 border border-slate-600 text-slate-300 px-4 py-2 rounded-xl flex items-center gap-2 text-l font-bold\"><span>\u0627\u0639\u0627\u062f\u0629<\/span> \u062a\u0635\u0641\u064a\u0631<\/button>\r\n <\/div>\r\n <svg viewBox=\"0 0 100 100\" className=\"w-full h-full cursor-crosshair drop-shadow-2xl\" onClick={addCharge}>\r\n <defs><pattern id=\"gauss_g\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"rgba(255,255,255,0.03)\" strokeWidth=\"0.5\"\/><\/pattern><\/defs>\r\n <rect width=\"100\" height=\"100\" fill=\"url(#gauss_g)\" \/>\r\n <circle cx={cxG} cy={cyG} r={sphereR} fill=\"rgba(244,63,94,0.05)\" stroke=\"#f43f5e\" strokeWidth=\"0.8\" strokeDasharray=\"2,2\" \/>\r\n <text x={cxG} y={cyG-sphereR-3} textAnchor=\"middle\" fill=\"#f43f5e\" className=\"text-[4px] font-bold\">\u0633\u0637\u062d \u063a\u0627\u0648\u0633<\/text>\r\n {charges.map(c=>{const dist=Math.sqrt((c.x-cxG)**2+(c.y-cyG)**2);const isInside=dist<=sphereR;const color=c.q>0?\"#10b981\":\"#818cf8\";return(<g key={c.id} onContextMenu={(e)=>{e.preventDefault();removeCharge(c.id);}}>{isInside&&<circle cx={c.x} cy={c.y} r=\"6\" fill={color} opacity=\"0.15\" className=\"animate-pulse\" \/>}<circle cx={c.x} cy={c.y} r=\"3.5\" fill={color} className=\"cursor-pointer hover:scale-110\" stroke=\"#fff\" strokeWidth=\"0.5\" onClick={(e)=>{e.stopPropagation();removeCharge(c.id);}} \/><text x={c.x} y={c.y+1} textAnchor=\"middle\" fill=\"#fff\" className=\"text-[3.5px] font-bold font-mono\">{c.q>0?'+':''}{c.q}<\/text>{!isInside&&<circle cx={c.x} cy={c.y} r=\"8\" fill=\"none\" stroke=\"#475569\" strokeWidth=\"0.3\" strokeDasharray=\"1,1\" \/>}<\/g>);})}\r\n <\/svg>\r\n <div className=\"absolute bottom-4 text-center pointer-events-none\"><div className=\"inline-flex items-center gap-1.5 bg-black\/60 border border-white\/10 px-4 py-2 rounded-full text-[11px] font-bold text-slate-300\"><span>#<\/span>\u0627\u0646\u0642\u0631 \u0644\u0625\u0636\u0627\u0641\u0629 \u0634\u062d\u0646\u0629\u060c \u0627\u0636\u063a\u0637 \u0639\u0644\u064a\u0647\u0627 \u0644\u062d\u0630\u0641\u0647\u0627<\/div><\/div>\r\n <\/div>\r\n <div className=\"w-full lg:w-[340px] flex flex-col gap-5\">\r\n <div className=\"bg-slate-800\/60 p-5 rounded-3xl border border-white\/5 space-y-5 shadow-xl\">\r\n <h4 className=\"text-l font-bold text-cyan-300 border-b border-cyan-500\/20 pb-2\">\u0623\u062f\u0627\u0629 \u0625\u062f\u0631\u0627\u062c \u0627\u0644\u0634\u062d\u0646\u0627\u062a<\/h4>\r\n <div className=\"space-y-4\"><div className=\"flex justify-between items-center text-l\"><label className=\"text-slate-300 font-bold\">\u0642\u064a\u0645\u0629 \u0627\u0644\u0634\u062d\u0646\u0629 (q)<\/label><span className={`font-mono font-bold px-3 py-1 rounded-lg text-l ${nextQ>0?'bg-emerald-500\/20 text-emerald-400 border-emerald-500\/30':'bg-indigo-500\/20 text-indigo-300 border-indigo-500\/30'}`}>{nextQ>0?`+${nextQ}`:nextQ} \u03bcC<\/span><\/div><input type=\"range\" min=\"-5\" max=\"5\" step=\"1\" value={nextQ} onChange={(e)=>{const v=parseInt(e.target.value);if(v!==0)setNextQ(v);}} className={`w-full h-2 rounded-lg ${nextQ>0?'accent-emerald-400':'accent-indigo-400'}`} \/><\/div>\r\n <div className=\"grid grid-cols-2 gap-3 pt-4 border-t border-white\/5\"><div className=\"bg-black\/30 p-3 rounded-2xl border border-white\/5 text-center\"><div className=\"text-[10px] text-slate-400\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0634\u062d\u0646\u0627\u062a<\/div><div className=\"text-xl font-mono font-bold text-slate-200\">{totalCharges}<\/div><\/div><div className={`p-3 rounded-2xl border text-center ${q_in===0?'bg-black\/30':q_in>0?'bg-emerald-500\/10 border-emerald-500\/20':'bg-indigo-500\/10 border-indigo-500\/20'}`}><div className=\"text-[10px] text-slate-300\">\u0627\u0644\u0645\u062c\u0645\u0648\u0639<\/div><div className={`text-xl font-mono font-bold ${q_in===0?'text-slate-400':q_in>0?'text-emerald-400':'text-indigo-400'}`}>{q_in>0?'+':''}{q_in}<\/div><\/div><\/div>\r\n <\/div>\r\n <div className=\"bg-slate-800\/60 p-5 rounded-3xl border border-white\/5 space-y-4 shadow-xl\">\r\n <h4 className=\"text-l font-bold text-rose-300 border-b border-rose-500\/20 pb-2\">\u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0627\u0644\u062a\u062f\u0641\u0642<\/h4>\r\n <div className={`p-4 rounded-2xl border flex flex-col items-center justify-center min-h-[90px] text-center ${q_in===0?'bg-black\/40 border-slate-700':q_in>0?'bg-emerald-900\/20 border-emerald-500\/30':'bg-indigo-900\/20 border-indigo-500\/30'}`}>\r\n {q_in===0?<div className=\"text-slate-200 font-bold text-lg\">\u0635\u0627\u0641\u064a \u0627\u0644\u062a\u062f\u0641\u0642 = 0<\/div>:q_in>0?<div className=\"text-emerald-400 font-bold text-lg\">\u062a\u062f\u0641\u0642 \u0644\u0644\u062e\u0627\u0631\u062c (+)<\/div>:<div className=\"text-indigo-400 font-bold text-lg\">\u062a\u062f\u0641\u0642 \u0644\u0644\u062f\u0627\u062e\u0644 (-)<\/div>}\r\n <\/div>\r\n <div className=\"bg-black\/40 p-4 rounded-2xl border border-white\/5\"><div className=\"flex justify-between text-[11px] text-slate-400\"><span>\u03a6 = \u03a3q_in\/\u03b5\u2080<\/span><\/div><div className=\"flex justify-center font-mono text-lg bg-slate-900\/50 p-2.5 rounded-xl border border-slate-700 mt-2\" dir=\"ltr\"><span className={`${q_in===0?'text-slate-500':q_in>0?'text-emerald-400':'text-indigo-400'} font-bold`}>{q_in===0?\"0.00\":`${q_in>0?'+':'-'}${Math.abs((q_in\/8.85)*10).toFixed(2)}\u00d710\u2075`}<\/span><span className=\"text-[10px] text-slate-500 ml-2\">N\u00b7m\u00b2\/C<\/span><\/div><\/div>\r\n <\/div>\r\n <div className=\"bg-cyan-500\/10 p-4 rounded-2xl border border-cyan-500\/20 mt-auto\"><h5 className=\"text-[11px] font-bold text-cyan-400\">\u0644\u0645\u0627\u0630\u0627 \u0646\u062a\u062c\u0627\u0647\u0644 \u0627\u0644\u062e\u0627\u0631\u062c\u061f<\/h5><p className=\"text-[10px] text-cyan-100\/70\">\u0627\u0644\u0634\u062d\u0646\u0627\u062a \u062e\u0627\u0631\u062c \u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u062a\u062f\u062e\u0644 \u0645\u0646 \u062c\u0647\u0629 \u0648\u062a\u062e\u0631\u062c \u0645\u0646 \u0623\u062e\u0631\u0649\u060c \u0645\u062d\u0635\u0644\u062a\u0647\u0627 \u0635\u0641\u0631.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const ParallelPlateMotionSimulation = () => {\r\n const [particleType, setParticleType] = useState('proton');\r\n const [fieldStrength, setFieldStrength] = useState(100);\r\n const [initialVelX, setInitialVelX] = useState(2);\r\n const [isPlaying, setIsPlaying] = useState(false);\r\n const [pos, setPos] = useState({x:5,y:50});\r\n const [vel, setVel] = useState({x:2,y:0});\r\n const [time, setTime] = useState(0);\r\n const [trail, setTrail] = useState([]);\r\n const requestRef = useRef(null);\r\n const lastTimeRef = useRef(null);\r\n const massRatio = particleType==='proton'?2.5:0.5;\r\n const charge = particleType==='proton'?1:-1;\r\n const acceleration = (charge*fieldStrength)\/(massRatio*1000);\r\n\r\n useEffect(()=>{if(!isPlaying&&time===0)setVel(v=>({...v,x:initialVelX}));},[initialVelX,isPlaying,time]);\r\n\r\n useEffect(()=>{if(!isPlaying){lastTimeRef.current=undefined;return;}let shouldStop=false;const animate=(timeNow)=>{if(lastTimeRef.current!==undefined){const dt=(timeNow-lastTimeRef.current)\/16;setPos(prev=>{const newY=prev.y+vel.y*dt+0.5*acceleration*dt*dt;const newX=prev.x+vel.x*dt;if(newY<=20||newY>=80||newX>=95){shouldStop=true;return prev;}setTrail(t=>[...t,{x:newX,y:newY}]);setVel(v=>({...v,y:v.y+acceleration*dt}));return {x:newX,y:newY};});if(!shouldStop)setTime(t=>t+dt);}if(!shouldStop){lastTimeRef.current=timeNow;requestRef.current=requestAnimationFrame(animate);}else setIsPlaying(false);};requestRef.current=requestAnimationFrame(animate);return()=>{if(requestRef.current)cancelAnimationFrame(requestRef.current);};},[isPlaying,acceleration,vel.x,vel.y]);\r\n\r\n const handleReset=()=>{setIsPlaying(false);setPos({x:5,y:50});setVel({x:initialVelX,y:0});setTime(0);setTrail([]);};\r\n const trailPath=trail.length>0?`M 5,50 L ${trail.map(p=>`${p.x},${p.y}`).join(' L ')}`:'';\r\n\r\n return (\r\n <div className=\"bg-slate-900 border border-slate-700\/80 rounded-3xl overflow-hidden shadow-2xl flex flex-col font-sans\" dir=\"rtl\">\r\n <div className=\"bg-slate-800\/80 border-b border-white\/5 p-4 flex flex-col l:flex-row gap-4 justify-between items-center\">\r\n <div className=\"flex items-center gap-3\"><div className=\"w-10 h-10 rounded-xl bg-blue-500\/20 text-blue-400 flex items-center justify-center\"><span>#<\/span><\/div><div><h3 className=\"font-bold text-white text-l\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u0633\u0627\u0631 \u062c\u0633\u064a\u0645 \u0645\u0634\u062d\u0648\u0646<\/h3><p className=\"text-[11px] text-slate-400\">\u062a\u0627\u0628\u0639 \u062d\u0631\u0643\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646 \u0648\u0627\u0644\u0628\u0631\u0648\u062a\u0648\u0646<\/p><\/div><\/div>\r\n <div className=\"flex gap-2\"><button onClick={()=>{setParticleType('proton');handleReset();}} className={`px-4 py-2 rounded-xl text-l font-bold transition-all border ${particleType==='proton'?'bg-rose-500\/20 text-rose-400 border-rose-500\/30':'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}>\u0628\u0631\u0648\u062a\u0648\u0646 (+)<\/button><button onClick={()=>{setParticleType('electron');handleReset();}} className={`px-4 py-2 rounded-xl text-l font-bold transition-all border ${particleType==='electron'?'bg-blue-500\/20 text-blue-400 border-blue-500\/30':'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}>\u0625\u0644\u0643\u062a\u0631\u0648\u0646 (-)<\/button><\/div>\r\n <\/div>\r\n <div className=\"relative w-full aspect-[2\/1] min-h-[250px] bg-[#0B1120] overflow-hidden flex items-center justify-center\">\r\n <div className=\"absolute inset-0 opacity-[0.03]\" style={{backgroundImage:'linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px)',backgroundSize:'20px 20px'}}><\/div>\r\n <div className=\"absolute top-0 left-0 w-full h-[20%] bg-gradient-to-b from-rose-500\/10 to-rose-500\/5 border-b border-rose-500\/30 flex\"><div className=\"w-full text-center mt-2 font-bold text-rose-500\/30 tracking-[0.5em] text-l\">++++++++++++<\/div><\/div>\r\n <div className=\"absolute bottom-0 left-0 w-full h-[20%] bg-gradient-to-t from-blue-500\/10 to-blue-500\/5 border-t border-blue-500\/30 flex items-end\"><div className=\"w-full text-center mb-2 font-bold text-blue-500\/30 tracking-[0.5em] text-l\">------------<\/div><\/div>\r\n <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" className=\"absolute inset-0 w-full h-full pointer-events-none\">\r\n <defs><marker id=\"fa_pp\" markerWidth=\"4\" markerHeight=\"4\" refX=\"2\" refY=\"2\" orient=\"auto\"><path d=\"M0,0 L4,2 L0,4 Z\" fill=\"rgba(244,63,94,0.3)\"\/><\/marker><\/defs>\r\n <g style={{opacity:0.1+(fieldStrength\/200)*0.5}}>{[10,20,30,40,50,60,70,80,90].map(x=><line key={x} x1={x} y1=\"22\" x2={x} y2=\"76\" stroke=\"rgba(244,63,94,0.3)\" strokeWidth=\"0.4\" markerEnd=\"url(#fa_pp)\"\/>)}<\/g>\r\n {trailPath&&<path d={trailPath} fill=\"none\" stroke={particleType==='proton'?'#f43f5e':'#3b82f6'} strokeWidth=\"1\" strokeDasharray=\"2,1\" className=\"opacity-60\"\/>}\r\n <\/svg>\r\n <div className={`absolute w-5 h-5 rounded-full shadow-lg flex items-center justify-center text-[10px] font-bold text-white z-20 pointer-events-none ${particleType==='proton'?'bg-rose-500':'bg-blue-500'}`} style={{left:`${pos.x}%`,top:`${pos.y}%`,transform:'translate(-50%,-50%)'}}>{particleType==='proton'?'+':'-'}<\/div>\r\n <div className=\"absolute bottom-[22%] left-4 bg-slate-900\/80 backdrop-blur-l border border-white\/10 rounded-xl p-3 flex flex-col gap-1 text-[10px] text-slate-300 font-mono pointer-events-none shadow-xl min-w-[120px] direction-ltr text-left\"><div className=\"flex justify-between\"><span>X:<\/span><span className=\"text-white\">{pos.x.toFixed(1)}<\/span><\/div><div className=\"flex justify-between\"><span>Vy:<\/span><span className=\"text-white\">{(vel.y*10).toFixed(1)}<\/span><\/div><div className=\"flex justify-between border-t border-white\/10 pt-1 mt-1\"><span>Time:<\/span><span className=\"text-emerald-400\">{(time\/10).toFixed(2)}s<\/span><\/div><\/div>\r\n <\/div>\r\n <div className=\"bg-slate-800 p-5 grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n <div className=\"flex flex-col justify-center items-center gap-3 border-b md:border-b-0 md:border-l border-white\/5 pb-5 md:pb-0\">\r\n <div className=\"flex gap-3\"><button onClick={handleReset} className=\"w-12 h-12 flex items-center justify-center bg-slate-700\/50 hover:bg-slate-700 text-slate-300 rounded-full\"><span>\u0627\u0639\u0627\u062f\u0629<\/span><\/button><button onClick={()=>setIsPlaying(!isPlaying)} className={`w-12 h-12 flex items-center justify-center rounded-full border shadow-lg ${isPlaying?'bg-amber-500\/20 text-amber-500':'bg-emerald-500\/20 text-emerald-400'}`}>{isPlaying?<span>\u0627\u064a\u0642\u0627\u0641<\/span>:<span>\u062a\u0634\u063a\u064a\u0644<\/span>}<\/button><\/div>\r\n <span className=\"text-l font-bold text-slate-400\">{isPlaying?'\u0625\u064a\u0642\u0627\u0641':'\u062a\u0634\u063a\u064a\u0644'}<\/span>\r\n <\/div>\r\n <div className=\"col-span-1 md:col-span-2 grid grid-cols-1 l:grid-cols-2 gap-5\">\r\n <div className=\"space-y-3 bg-slate-900\/50 p-4 rounded-2xl border border-white\/5\"><div className=\"flex justify-between\"><label className=\"text-l text-slate-300 font-bold\">\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0623\u0641\u0642\u064a\u0629<\/label><span className=\"text-l font-mono text-blue-400 bg-blue-500\/10 px-2 py-0.5 rounded\" dir=\"ltr\">{initialVelX}.0 m\/s<\/span><\/div><input type=\"range\" min=\"1\" max=\"5\" step=\"0.5\" value={initialVelX} onChange={(e)=>{setInitialVelX(parseFloat(e.target.value));handleReset();}} className=\"w-full accent-blue-500 h-1.5 rounded-lg\"\/><\/div>\r\n <div className=\"space-y-3 bg-slate-900\/50 p-4 rounded-2xl border border-white\/5\"><div className=\"flex justify-between\"><label className=\"text-l text-slate-300 font-bold\">\u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 (E)<\/label><span className=\"text-l font-mono text-rose-400 bg-rose-500\/10 px-2 py-0.5 rounded\" dir=\"ltr\">{fieldStrength} N\/C<\/span><\/div><input type=\"range\" min=\"10\" max=\"250\" step=\"10\" value={fieldStrength} onChange={(e)=>{setFieldStrength(parseInt(e.target.value));handleReset();}} className=\"w-full accent-rose-500 h-1.5 rounded-lg\"\/><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n ReactDOM.render(<ElectricFieldSimulation \/>, document.getElementById('electric-field-sim-root'));\r\n ReactDOM.render(<ElectricFlulimulation \/>, document.getElementById('electric-flux-sim-root'));\r\n ReactDOM.render(<GaussLawSimulation \/>, document.getElementById('gauss-law-sim-root'));\r\n ReactDOM.render(<ParallelPlateMotionSimulation \/>, document.getElementById('parallel-plate-motion-sim-root'));\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-18728","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18728","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=18728"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18728\/revisions"}],"predecessor-version":[{"id":18729,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18728\/revisions\/18729"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\r\n\r\n \r\n \r\n \u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a - \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0643\u0627\u0645\u0644\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 <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\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: 1rem;\r\n }\r\n .content-container {\r\n max-width: 100%;\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: 1.5rem;\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 @media (min-width: 1280px) {\r\n .content-container { max-width: 96rem; padding: 2rem; }\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: 1.5rem 0;\r\n padding: 1rem;\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: 1rem;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n .direction-ltr { direction: ltr; text-align: left; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"content-container\">\r\n <div style=\"border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold text-white mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h1>\r\n <p class=\"text-indigo-300\">\u0627\u0644\u062b\u0627\u0646\u0648\u064a - \u0627\u0644\u0635\u0641 \u0627\u0644\u062b\u0627\u0646\u064a \u0639\u0634\u0631 - \u0627\u0644\u0645\u0633\u0627\u0631 \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a<\/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;\">\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;\">\u0623. \u0639\u0628\u062f\u0627\u0644\u0641\u062a\u0627\u062d \u0645\u0637\u0631<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\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\/05\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0645\u062c\u0627\u0644_\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\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\/05\/\u0627\u0644\u062f\u0631\u0633_\u0627\u0644\u0623\u0648\u0644__\u0627\u0644\u0645\u062c\u0627\u0644_\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\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 <div class=\"space-y-6 text-right\">\r\n <div dir=\"rtl\" class=\"font-sans text-slate-100 space-y-12 leading-relaxed w-full pb-20\">\r\n <header class=\"bg-gradient-to-br from-indigo-900 to-slate-900 border border-indigo-700\/50 rounded-3xl p-8 shadow-2xl relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-full h-full opacity-10\" style=\"background-image: radial-gradient(circle at center, #6366f1 1px, transparent 1px); background-size: 20px 20px;\"><\/div>\r\n <div class=\"relative z-10\">\r\n <h2 class=\"text-3xl md:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-cyan-300 mb-4\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h2>\r\n <p class=\"text-lg text-indigo-200\/80 font-light italic\">Electric Field and Gauss's Law<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"bg-slate-800\/50 p-6 rounded-2xl border-r-4 border-indigo-500 shadow-lg\">\r\n <p class=\"text-slate-300 leading-relaxed text-lg\">\r\n <strong class=\"text-indigo-400\">\u0627\u0644\u0641\u0643\u0631\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u0629:<\/strong>\r\n \u0627\u0644\u062c\u0633\u0645 \u0627\u0644\u0645\u0634\u062d\u0648\u0646 \u064a\u0648\u0644\u0651\u062f \u0641\u064a \u0627\u0644\u062d\u064a\u0632 \u0627\u0644\u0645\u062d\u064a\u0637 \u0628\u0647 \u0645\u062c\u0627\u0644\u0627\u064b \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0627\u064b\u060c \u0648\u064a\u0638\u0647\u0631 \u062a\u0623\u062b\u064a\u0631 \u0647\u0630\u0627 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0644\u0649 \u0634\u0643\u0644 \u0642\u0648\u0629 \u062a\u0624\u062b\u0631 \u0641\u064a \u0623\u064a \u0634\u062d\u0646\u0629 \u0623\u062e\u0631\u0649 \u062a\u0648\u0636\u0639 \u062f\u0627\u062e\u0644\u0647. \u0639\u0646\u062f \u0634\u062d\u0646 \u0645\u0648\u0635\u0644\u060c \u062a\u0633\u062a\u0642\u0631 \u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0639\u0644\u0649 \u0633\u0637\u062d\u0647 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u060c \u0648\u0644\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0646\u0627\u062a\u062c \u0639\u0646 \u062a\u0648\u0632\u064a\u0639\u0627\u062a \u0645\u062a\u0635\u0644\u0629 \u0645\u0646 \u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0646\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633.\r\n <\/p>\r\n <\/div>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-indigo-400 rounded-full\"><\/span>\r\n \u0623\u0648\u0644\u0627\u064b: \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a (Electric Field Lines)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-6\">\r\n <p class=\"text-slate-300 text-l md:text-base leading-relaxed\">\r\n \u0644\u0641\u0647\u0645 \u0648\u062a\u0635\u0648\u0631 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0645\u0641\u0647\u0648\u0645 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a. \u0647\u0630\u0647 \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0648\u0647\u0645\u064a\u0629 \u062a\u064f\u0631\u0633\u0645 \u0628\u062d\u064a\u062b \u062a\u062f\u0644 \u0639\u0644\u0649 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0645\u0642\u062f\u0627\u0631\u0647:\r\n <\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 space-y-2\">\r\n <h4 class=\"text-indigo-300 font-bold flex items-center gap-2 text-l\"><span class=\"w-1.5 h-1.5 rounded-full bg-indigo-500\"><\/span> 1. \u0627\u0644\u0627\u062a\u062c\u0627\u0647<\/h4>\r\n <p class=\"text-l text-slate-400 leading-relaxed\">\u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0646\u062f \u0623\u064a \u0646\u0642\u0637\u0629 \u0647\u0648 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u0645\u0627\u0633 \u0644\u062e\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0646\u062f \u062a\u0644\u0643 \u0627\u0644\u0646\u0642\u0637\u0629. \u0627\u0644\u0645\u062c\u0627\u0644 \u064a\u062a\u062c\u0647 \u062f\u0627\u0626\u0645\u0627\u064b <strong class=\"text-indigo-200\">\u0645\u0628\u062a\u0639\u062f\u0627\u064b \u0639\u0646 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u0648\u062c\u0628\u0629<\/strong> \u0648\u0645\u062a\u062c\u0647\u0627\u064b \u0646\u062d\u0648 \u0627\u0644\u0633\u0627\u0644\u0628\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 space-y-2\">\r\n <h4 class=\"text-indigo-300 font-bold flex items-center gap-2 text-l\"><span class=\"w-1.5 h-1.5 rounded-full bg-indigo-500\"><\/span> 2. \u0627\u0644\u0645\u0642\u062f\u0627\u0631 (\u0627\u0644\u0634\u062f\u0629)<\/h4>\r\n <p class=\"text-l text-slate-400 leading-relaxed\">\u0643\u0644\u0645\u0627 \u0643\u0627\u0646\u062a \u0627\u0644\u062e\u0637\u0648\u0637 \u0645\u062a\u0642\u0627\u0631\u0628\u0629\u060c \u0643\u0627\u0646 \u0627\u0644\u0645\u062c\u0627\u0644 \u0623\u0642\u0648\u0649. \u0648\u0643\u0644\u0645\u0627 \u062a\u0628\u0627\u0639\u062f\u062a\u060c \u0643\u0627\u0646 \u0627\u0644\u0645\u062c\u0627\u0644 \u0623\u0636\u0639\u0641.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-6 bg-slate-800\/80 rounded-2xl border border-indigo-500\/10\">\r\n <h4 class=\"text-l font-bold text-slate-200 mb-4 text-center italic\">\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u062c\u0627\u0644\u0627\u062a \u0645\u0646 \u062d\u064a\u062b \u0627\u0644\u0627\u0646\u062a\u0638\u0627\u0645:<\/h4>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"p-4 bg-black\/30 rounded-xl border border-indigo-500\/5\">\r\n <span class=\"text-indigo-300 font-bold text-l block mb-1\">\u0645\u062c\u0627\u0644 \u063a\u064a\u0631 \u0645\u0646\u062a\u0638\u0645 (Non-uniform):<\/span>\r\n <p class=\"text-l text-slate-400\">\u0645\u062b\u0644 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0646\u0627\u0634\u0626 \u0639\u0646 \u0634\u062d\u0646\u0629 \u0646\u0642\u0637\u064a\u0629\u060c \u062d\u064a\u062b \u064a\u062a\u063a\u064a\u0631 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0645\u0646 \u0646\u0642\u0637\u0629 \u0644\u0623\u062e\u0631\u0649.<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-black\/30 rounded-xl border border-indigo-500\/5\">\r\n <span class=\"text-indigo-300 font-bold text-l block mb-1\">\u0645\u062c\u0627\u0644 \u0645\u0646\u062a\u0638\u0645 (Uniform):<\/span>\r\n <p class=\"text-l text-slate-400\">\u064a\u0645\u0643\u0646 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u064a\u0647 \u0628\u064a\u0646 \u0635\u0641\u064a\u062d\u062a\u064a\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u062a\u064a\u0646 \u0645\u0634\u062d\u0648\u0646\u062a\u064a\u0646\u060c \u062d\u064a\u062b \u062a\u0643\u0648\u0646 \u0627\u0644\u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629 \u0648\u0645\u062a\u0648\u0627\u0632\u064a\u0629 \u0648\u0645\u062a\u0628\u0627\u0639\u062f\u0629 \u0628\u0627\u0644\u062a\u0633\u0627\u0648\u064a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-8\">\r\n <h5 class=\"text-l font-bold text-slate-500 mb-3 text-center uppercase tracking-widest italic\">\u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644<\/h5>\r\n <div id=\"electric-field-sim-root\" class=\"simulation-container\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-cyan-400 rounded-full\"><\/span>\r\n \u062b\u0627\u0646\u064a\u0627\u064b: \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a (Electric Flux)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-6\">\r\n <p class=\"text-slate-300 text-l md:text-base leading-relaxed\">\r\n \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0647\u0648 \u0645\u0642\u064a\u0627\u0633 \u0644\u0639\u062f\u062f \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u062a\u064a \u062a\u062e\u062a\u0631\u0642 \u0633\u0637\u062d\u0627\u064b \u0645\u0639\u064a\u0646\u0627\u064b. \u0648\u0647\u0648 \u0645\u0641\u0647\u0648\u0645 \u0623\u0633\u0627\u0633\u064a \u0644\u0641\u0647\u0645 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633.\r\n <\/p>\r\n <div class=\"bg-black\/30 p-6 rounded-2xl border border-cyan-500\/10 space-y-4 shadow-inner relative overflow-hidden\">\r\n <div class=\"absolute -right-4 -top-4 w-24 h-24 bg-cyan-500\/5 rounded-full blur-2xl\"><\/div>\r\n <p class=\"text-l text-cyan-300 font-bold\">\u0627\u0644\u0635\u064a\u063a\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 (\u0644\u0633\u0637\u062d \u0645\u0633\u062a\u0648\u064d \u0641\u064a \u0645\u062c\u0627\u0644 \u0645\u0646\u062a\u0638\u0645):<\/p>\r\n <div class=\"text-center font-mono text-2xl text-cyan-100 py-3 direction-ltr\">\u03a6 = E \u00b7 A \u00b7 cos(\u03b8)<\/div>\r\n <div class=\"grid grid-cols-1 l:grid-cols-3 gap-2 text-[11px] text-slate-400 mt-2 border-t border-white\/5 pt-3\">\r\n <p><span class=\"text-cyan-100 font-mono\">E<\/span>: \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0645\u062c\u0627\u0644.<\/p>\r\n <p><span class=\"text-cyan-100 font-mono\">A<\/span>: \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0633\u0637\u062d.<\/p>\r\n <p><span class=\"text-cyan-100 font-mono\">\u03b8<\/span>: \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0645\u0639 \u0627\u0644\u0639\u0645\u0648\u062f\u064a.<\/p>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 pt-2 text-center\"><strong>\u0648\u062d\u062f\u0629 \u0627\u0644\u0642\u064a\u0627\u0633:<\/strong> <span class=\"font-mono text-cyan-200\">N.m\u00b2\/C<\/span><\/p>\r\n <\/div>\r\n <div class=\"mt-8 space-y-4\">\r\n <h4 class=\"text-cyan-300 font-bold text-lg border-b border-cyan-500\/20 pb-2 inline-block\">\u0627\u0644\u062a\u062f\u0641\u0642 \u0639\u0628\u0631 \u0633\u0637\u062d \u0645\u063a\u0644\u0642 (\u0645\u0642\u062f\u0645\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633):<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed mb-4\">\r\n \u064a\u064f\u0639\u0631\u0641 \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0645\u063a\u0644\u0642 (\u0645\u062b\u0644 \u0627\u0644\u0643\u0631\u0629 \u0623\u0648 \u0627\u0644\u0645\u0643\u0639\u0628) \u0628\u0623\u0646\u0647 \u0633\u0637\u062d \u064a\u062d\u062c\u0632 \u062d\u062c\u0645\u0627\u064b \u0641\u064a \u0627\u0644\u0641\u0631\u0627\u063a \u0648\u064a\u0641\u0635\u0644 \u0628\u064a\u0646 \u0627\u0644\u062f\u0627\u062e\u0644 \u0648\u0627\u0644\u062e\u0627\u0631\u062c. \u064a\u0639\u062a\u0645\u062f \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0647\u0630\u0627 \u0627\u0644\u0633\u0637\u062d \u0639\u0644\u0649 \u0627\u062a\u062c\u0627\u0647 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u0645\u0633\u0627\u062d\u062a\u0647.\r\n <\/p>\r\n <div class=\"my-6 bg-black\/40 p-5 rounded-3xl border border-white\/5 shadow-inner\">\r\n <p class=\"text-l text-cyan-300 font-bold text-center mb-4\">\u0627\u0644\u0635\u064a\u063a\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629 \u0627\u0644\u0639\u0627\u0645\u0629 (\u0644\u0644\u062a\u062f\u0641\u0642 \u0639\u0628\u0631 \u0633\u0637\u062d \u0645\u063a\u0644\u0642):<\/p>\r\n <div class=\"flex flex-col items-center justify-center space-y-3\">\r\n <div class=\"font-mono text-xl md:text-2xl text-cyan-100 flex items-center justify-center gap-2 direction-ltr flex-wrap\">\r\n <span class=\"font-bold text-cyan-300\">\u03a6<sub>net<\/sub><\/span>\r\n <span class=\"text-slate-400\">=<\/span>\r\n <span class=\"text-3xl text-indigo-400 leading-none flex items-center\">\u222e<\/span>\r\n <span class=\"font-bold\">E \u00b7 dA<\/span>\r\n <span class=\"text-slate-400\">=<\/span>\r\n <span class=\"text-3xl text-indigo-400 leading-none flex items-center\">\u222e<\/span>\r\n <span class=\"font-bold\">E dA cos(\u03b8)<\/span>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 text-[10px] text-slate-400 mt-3 pt-3 border-t border-white\/5 w-full max-w-md\">\r\n <p><span class=\"font-mono text-indigo-400 text-lg leading-none\">\u222e<\/span> : \u0631\u0645\u0632 \u0627\u0644\u062a\u0643\u0627\u0645\u0644 \u0627\u0644\u0633\u0637\u062d\u064a \u0627\u0644\u0645\u063a\u0644\u0642.<\/p>\r\n <p><span class=\"font-mono text-cyan-200\">dA<\/span> : \u0645\u062a\u0651\u062c\u0647 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (\u0627\u0644\u0639\u0645\u0648\u062f\u064a \u0646\u062d\u0648 \u0627\u0644\u062e\u0627\u0631\u062c).<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"p-4 bg-slate-800\/60 rounded-2xl border border-emerald-500\/30 flex flex-col items-center text-center space-y-3 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-emerald-500\/5 group-hover:bg-emerald-500\/10 transition-colors\"><\/div>\r\n <div class=\"w-12 h-12 rounded-full border-2 border-emerald-500\/50 flex items-center justify-center bg-emerald-500\/10 relative z-10 text-emerald-400 text-xl font-bold\">+<\/div>\r\n <h5 class=\"text-emerald-300 font-bold text-l relative z-10\">\u062a\u062f\u0641\u0642 \u0645\u0648\u062c\u0628 (+)<\/h5>\r\n <p class=\"text-[11px] text-slate-400 relative z-10 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 <strong class=\"text-slate-200\">\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062e\u0627\u0631\u062c\u0629<\/strong> \u0645\u0646 \u0627\u0644\u0633\u0637\u062d. (\u0645\u062b\u0627\u0644: \u0634\u062d\u0646\u0629 \u0645\u0648\u062c\u0628\u0629 \u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u0627\u0644\u062f\u0627\u062e\u0644).<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-slate-800\/60 rounded-2xl border border-rose-500\/30 flex flex-col items-center text-center space-y-3 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-rose-500\/5 group-hover:bg-rose-500\/10 transition-colors\"><\/div>\r\n <div class=\"w-12 h-12 rounded-full border-2 border-rose-500\/50 flex items-center justify-center bg-rose-500\/10 relative z-10 text-rose-400 text-xl font-bold\">-<\/div>\r\n <h5 class=\"text-rose-300 font-bold text-l relative z-10\">\u062a\u062f\u0641\u0642 \u0633\u0627\u0644\u0628 (-)<\/h5>\r\n <p class=\"text-[11px] text-slate-400 relative z-10 leading-relaxed\">\u064a\u062d\u062f\u062b \u0639\u0646\u062f\u0645\u0627 \u062a\u0643\u0648\u0646 <strong class=\"text-slate-200\">\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062f\u0627\u062e\u0644\u0629<\/strong> \u0625\u0644\u0649 \u0627\u0644\u0633\u0637\u062d. (\u0645\u062b\u0627\u0644: \u0634\u062d\u0646\u0629 \u0633\u0627\u0644\u0628\u0629 \u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u0627\u0644\u062f\u0627\u062e\u0644).<\/p>\r\n <\/div>\r\n <div class=\"p-4 bg-slate-800\/60 rounded-2xl border border-slate-500\/30 flex flex-col items-center text-center space-y-3 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-slate-500\/5 group-hover:bg-slate-500\/10 transition-colors\"><\/div>\r\n <div class=\"w-12 h-12 rounded-full border-2 border-slate-500\/50 flex items-center justify-center bg-slate-500\/10 relative z-10 text-slate-300 text-xl font-bold\">0<\/div>\r\n <h5 class=\"text-slate-300 font-bold text-l relative z-10\">\u062a\u062f\u0641\u0642 \u0635\u0641\u0631\u064a (0)<\/h5>\r\n <p class=\"text-[11px] text-slate-400 relative z-10 leading-relaxed\">\u0639\u062f\u062f \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u062f\u0627\u062e\u0644\u0629 <strong>\u064a\u0633\u0627\u0648\u064a<\/strong> \u0639\u062f\u062f \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u062e\u0627\u0631\u062c\u0629. (\u0645\u062b\u0627\u0644: \u0633\u0637\u062d \u0641\u064a \u0645\u062c\u0627\u0644 \u062e\u0627\u0631\u062c\u064a \u062f\u0648\u0646 \u0634\u062d\u0646\u0627\u062a \u062f\u0627\u062e\u0644\u0647).<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-cyan-500\/10 p-3 rounded-xl border border-cyan-500\/20 text-cyan-200 text-l italic text-center mt-2 shadow-inner\">\r\n \"\u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0633\u0637\u062d \u0645\u063a\u0644\u0642 \u0645\u0648\u0636\u0648\u0639 \u0641\u064a \u0645\u062c\u0627\u0644 \u0645\u0646\u062a\u0638\u0645 \u064a\u0633\u0627\u0648\u064a \u062f\u0627\u0626\u0645\u0627\u064b \u0635\u0641\u0631\u0627\u064b\u060c \u0644\u0623\u0646 \u0643\u0644 \u062e\u0637 \u064a\u062f\u062e\u0644 \u0645\u0646 \u062c\u0647\u0629 \u0633\u064a\u062e\u0631\u062c \u062d\u062a\u0645\u0627\u064b \u0645\u0646 \u0627\u0644\u062c\u0647\u0629 \u0627\u0644\u0645\u0642\u0627\u0628\u0644\u0629.\"\r\n <\/div>\r\n <div class=\"mt-8 bg-slate-900\/40 border border-slate-700 rounded-2xl overflow-hidden shadow-lg\">\r\n <div class=\"bg-cyan-900\/30 px-5 py-3 border-b border-cyan-500\/20 flex items-center gap-3\">\r\n <span class=\"bg-cyan-500\/20 text-cyan-400 w-6 h-6 flex justify-center items-center rounded-lg text-lg\">*<\/span>\r\n <h4 class=\"font-bold text-cyan-300 text-l\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a (1) : \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h4>\r\n <\/div>\r\n <div class=\"p-5 space-y-6\">\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-800\/80 p-3 rounded-xl border border-white\/5 border-r-2 border-r-cyan-500\">\r\n \u0645\u062c\u0627\u0644 \u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0645\u0646\u062a\u0638\u0645 \u0634\u062f\u062a\u0647 <span class=\"text-cyan-400 font-mono\" dir=\"ltr\">E = 4 \u00d7 10\u00b3 N\/C<\/span> \u064a\u062e\u062a\u0631\u0642 \u0633\u0637\u062d\u0627\u064b \u0645\u0633\u062a\u0648\u064a\u0627\u064b \u0645\u0633\u0627\u062d\u062a\u0647 <span class=\"text-cyan-400 font-mono\" dir=\"ltr\">A = 0.05 m\u00b2<\/span>. \u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u062e\u0644\u0627\u0644\u0647 \u0641\u064a \u0627\u0644\u062d\u0627\u0644\u062a\u064a\u0646:\r\n <\/p>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-cyan-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">\u0623<\/span>\r\n <p class=\"text-[13px] text-cyan-100 font-bold\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0645\u062a\u062c\u0647 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (\u0627\u0644\u0639\u0645\u0648\u062f\u064a \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d) \u0645\u0648\u0627\u0632\u064a\u0627\u064b \u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-3 relative overflow-hidden\">\r\n <div class=\"absolute left-0 top-0 w-1 h-full bg-emerald-500\/50\"><\/div>\r\n <p class=\"text-slate-400\">\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0628\u064a\u0646 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0645\u062a\u062c\u0647 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0647\u064a <span class=\"font-mono text-emerald-300\">\u03b8 = 0\u00b0<\/span>.<\/p>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-max min-w-[220px] shadow-inner\" dir=\"ltr\">\r\n <div>\u03a6 = E \u00b7 A \u00b7 cos(\u03b8)<\/div>\r\n <div class=\"text-slate-500 text-l\">cos(0\u00b0) = 1<\/div>\r\n <div>\u03a6 = (4 \u00d7 10\u00b3) \u00d7 0.05 \u00d7 1<\/div>\r\n <div class=\"text-cyan-400 font-bold pt-2 border-t border-cyan-500\/20 text-base\">\u03a6 = 200 N\u00b7m\u00b2\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-cyan-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">\u0628<\/span>\r\n <p class=\"text-[13px] text-cyan-100 font-bold\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0645\u062a\u062c\u0647 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u064a\u0645\u064a\u0644 \u0628\u0632\u0627\u0648\u064a\u0629 <span class=\"font-mono text-cyan-300\">60\u00b0<\/span> \u0639\u0646 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-3 relative overflow-hidden\">\r\n <div class=\"absolute left-0 top-0 w-1 h-full bg-rose-500\/50\"><\/div>\r\n <p class=\"text-slate-400\">\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u0639\u0637\u0627\u0629 \u0647\u064a <span class=\"font-mono text-rose-300\">\u03b8 = 60\u00b0<\/span> (\u0627\u0644\u062a\u062f\u0641\u0642 \u064a\u0642\u0644 \u0628\u0633\u0628\u0628 \u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u0645\u064a\u0644\u0627\u0646).<\/p>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-max min-w-[220px] shadow-inner\" dir=\"ltr\">\r\n <div>\u03a6 = E \u00b7 A \u00b7 cos(60\u00b0)<\/div>\r\n <div class=\"text-slate-500 text-l\">cos(60\u00b0) = 0.5<\/div>\r\n <div>\u03a6 = (4 \u00d7 10\u00b3) \u00d7 0.05 \u00d7 0.5<\/div>\r\n <div class=\"text-cyan-400 font-bold pt-2 border-t border-cyan-500\/20 text-base\">\u03a6 = 100 N\u00b7m\u00b2\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"electric-flux-sim-root\" class=\"simulation-container\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-rose-400 rounded-full\"><\/span>\r\n \u062b\u0627\u0644\u062b\u0627\u064b: \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633 (Gauss's Law)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-6\">\r\n <div class=\"space-y-4\">\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\r\n \u064a\u064f\u0639\u062f <strong>\u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633<\/strong> \u0645\u0646 \u0623\u0647\u0645 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u0641\u064a\u0632\u064a\u0627\u0621 (\u0648\u0647\u0648 \u0623\u062d\u062f \u0645\u0639\u0627\u062f\u0644\u0627\u062a \u0645\u0627\u0643\u0633\u0648\u064a\u0644 \u0627\u0644\u0623\u0631\u0628\u0639)\u060c \u062d\u064a\u062b \u064a\u0631\u0628\u0637 \u0628\u0637\u0631\u064a\u0642\u0629 \u0631\u0627\u0626\u0639\u0629 \u0628\u064a\u0646 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0623\u064a \u0633\u0637\u062d \u0645\u063a\u0644\u0642 (\u064a\u064f\u0633\u0645\u0649 <strong>\u0633\u0637\u062d \u063a\u0627\u0648\u0633<\/strong>) \u0648\u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0627\u0644\u0635\u0627\u0641\u064a\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u062f\u0627\u062e\u0644 \u0645\u0642\u0631\u0647.\r\n <\/p>\r\n <p class=\"text-l text-slate-400 leading-relaxed border-r-2 border-rose-500\/50 pr-3\">\r\n <strong class=\"text-rose-300\">\u0633\u0637\u062d \u063a\u0627\u0648\u0633 (Gaussian Surface):<\/strong> \u0647\u0648 \u0633\u0637\u062d \u0647\u0646\u062f\u0633\u064a <strong>\u0648\u0647\u0645\u064a \u0648\u0645\u063a\u0644\u0642<\/strong> (\u0645\u062b\u0644 \u0643\u0631\u0629\u060c \u0623\u0633\u0637\u0648\u0627\u0646\u0629\u060c \u0623\u0648 \u0623\u064a \u0634\u0643\u0644 \u0645\u0646\u062a\u0638\u0645) \u064a\u062a\u0645 \u062a\u062e\u064a\u0644\u0647 \u0641\u064a \u0627\u0644\u0641\u0631\u0627\u063a \u0644\u064a\u062d\u064a\u0637 \u0628\u062a\u0648\u0632\u064a\u0639 \u0644\u0644\u0634\u062d\u0646\u0627\u062a \u0628\u0647\u062f\u0641 \u0627\u0633\u062a\u063a\u0644\u0627\u0644 \u0627\u0644\u062a\u0645\u0627\u062b\u0644 \u0648\u062a\u0633\u0647\u064a\u0644 \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a.\r\n <\/p>\r\n <\/div>\r\n <div class=\"bg-rose-900\/10 p-6 rounded-2xl border border-rose-500\/20 shadow-xl relative overflow-hidden\">\r\n <div class=\"absolute inset-0 bg-gradient-to-l from-rose-500\/5 to-transparent\"><\/div>\r\n <p class=\"text-white font-medium italic mb-6 leading-relaxed underline decoration-rose-500\/30 underline-offset-4 relative z-10 text-center text-l md:text-base\">\r\n \"\u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0633\u0637\u062d \u0645\u063a\u0644\u0642 \u064a\u0639\u062a\u0645\u062f \u062d\u0635\u0631\u064a\u0627\u064b \u0639\u0644\u0649 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0628\u062f\u0627\u062e\u0644\u0647\u060c \u0648\u064a\u0633\u0627\u0648\u064a \u062a\u0644\u0643 \u0627\u0644\u0634\u062d\u0646\u0629 \u0645\u0642\u0633\u0648\u0645\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0645\u0627\u062d\u064a\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0644\u0644\u0648\u0633\u0637\".\r\n <\/p>\r\n <div class=\"flex justify-center relative z-10\">\r\n <div dir=\"ltr\" class=\"bg-black\/60 p-4 rounded-xl font-mono text-center text-rose-200 text-xl md:text-2xl shadow-inner\">\r\n \u222e E \u00b7 dA = \u03a3q<sub>in<\/sub> \/ \u03b5<sub>0<\/sub>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"col-span-1 md:col-span-2 p-5 bg-slate-700\/30 rounded-2xl border border-slate-600\/50 space-y-4\">\r\n <h4 class=\"text-rose-300 font-bold text-l border-b border-white\/5 pb-2\">\u0645\u0641\u0627\u0647\u064a\u0645 \u062c\u0648\u0647\u0631\u064a\u0629 \u0641\u064a \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633:<\/h4>\r\n <ul class=\"text-l text-slate-300 space-y-3 leading-loose\">\r\n <li class=\"flex items-start gap-2\">\r\n <div class=\"min-w-4 pt-1\"><span class=\"w-1.5 h-1.5 rounded-full bg-rose-400 inline-block\"><\/span><\/div>\r\n <span><strong>\u0627\u0644\u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u062c\u0628\u0631\u064a:<\/strong> \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u062a\u0639\u0646\u064a \u0627\u0644\u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u062c\u0628\u0631\u064a (\u0628\u0625\u0634\u0627\u0631\u0627\u062a\u0647\u0627). \u0625\u0630\u0627 \u0643\u0627\u0646 \u062f\u0627\u062e\u0644 \u0627\u0644\u0633\u0637\u062d \u062b\u0646\u0627\u0626\u064a \u0642\u0637\u0628 (+q \u0648 -q)\u060c \u0641\u0625\u0646 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 = \u0635\u0641\u0631\u060c \u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0644\u064a = \u0635\u0641\u0631.<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <div class=\"min-w-4 pt-1\"><span class=\"w-1.5 h-1.5 rounded-full bg-rose-400 inline-block\"><\/span><\/div>\r\n <span><strong>\u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629:<\/strong> \u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0627\u0644\u062a\u064a \u062a\u0642\u0639 <em>\u062e\u0627\u0631\u062c<\/em> \u0633\u0637\u062d \u063a\u0627\u0648\u0633 <strong>\u0644\u0627 \u062a\u0633\u0627\u0647\u0645 \u0625\u0637\u0644\u0627\u0642\u0627\u064b<\/strong> \u0641\u064a \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0644\u064a (\u0644\u0623\u0646 \u062e\u0637\u0648\u0637 \u0645\u062c\u0627\u0644\u0647\u0627 \u062a\u062f\u062e\u0644 \u0645\u0646 \u062c\u0647\u0629 \u0648\u062a\u062e\u0631\u062c \u0645\u0646 \u0627\u0644\u0623\u062e\u0631\u0649).<\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <div class=\"min-w-4 pt-1\"><span class=\"w-1.5 h-1.5 rounded-full bg-rose-400 inline-block\"><\/span><\/div>\r\n <span><strong>\u0634\u0643\u0644 \u0627\u0644\u0633\u0637\u062d:<\/strong> \u0627\u0644\u062a\u062f\u0641\u0642 \u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0634\u0643\u0644 \u0623\u0648 \u062d\u062c\u0645 \u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0645\u0627\u062f\u0627\u0645 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629!<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"col-span-1 p-5 bg-slate-700\/30 rounded-2xl border border-slate-600\/50 flex flex-col justify-center items-center text-center space-y-4\">\r\n <div>\r\n <h4 class=\"text-rose-300 font-bold text-[13px] mb-2\">\u062b\u0627\u0628\u062a \u0627\u0644\u0633\u0645\u0627\u062d\u064a\u0629 \u0644\u0644\u0641\u0631\u0627\u063a:<\/h4>\r\n <div dir=\"ltr\" class=\"font-mono text-l text-rose-100 bg-black\/30 p-2 rounded-lg\">8.85 \u00d7 10<sup>-12<\/sup> <br\/> <span class=\"text-[10px] text-slate-400\">C\u00b2 \/ (N\u00b7m\u00b2)<\/span><\/div>\r\n <\/div>\r\n <div class=\"pt-2 border-t border-white\/5 w-full\">\r\n <h4 class=\"text-rose-300 font-bold text-[11px] mb-1\">\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u0647\u0645:<\/h4>\r\n <p class=\"text-[10px] text-slate-400 leading-tight\">\u0647\u0630\u0627 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0623\u062f\u0627\u0629 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u0648\u0628\u062f\u064a\u0644\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u0643\u0648\u0644\u0648\u0645 \u0644\u062d\u0633\u0627\u0628 \u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 (E) \u0644\u0644\u0623\u062c\u0633\u0627\u0645 \u0630\u0627\u062a \u0627\u0644\u062a\u0645\u0627\u062b\u0644 \u0627\u0644\u0639\u0627\u0644\u064a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-8 bg-slate-900\/40 border border-slate-700 rounded-2xl overflow-hidden shadow-lg\">\r\n <div class=\"bg-rose-900\/30 px-5 py-3 border-b border-rose-500\/20 flex items-center gap-3\">\r\n <span class=\"bg-rose-500\/20 text-rose-400 w-6 h-6 flex justify-center items-center rounded-lg text-lg\">*<\/span>\r\n <h4 class=\"font-bold text-rose-300 text-l\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a (2) : \u062d\u0633\u0627\u0628 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u0648\u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633<\/h4>\r\n <\/div>\r\n <div class=\"p-5 space-y-6\">\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-800\/80 p-3 rounded-xl border border-white\/5 border-r-2 border-r-rose-500\">\r\n \u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0648\u0647\u0645\u064a \u0645\u063a\u0644\u0642 \u064a\u062d\u0635\u0631 \u062b\u0644\u0627\u062b \u0634\u062d\u0646\u0627\u062a: <span class=\"text-rose-400 font-mono\" dir=\"ltr\">q\u2081 = +5 \u03bcC<\/span>\u060c <span class=\"text-rose-400 font-mono\" dir=\"ltr\">q\u2082 = -2 \u03bcC<\/span>\u060c <span class=\"text-rose-400 font-mono\" dir=\"ltr\">q\u2083 = +4 \u03bcC<\/span>. \u0648\u0634\u062d\u0646\u0629 \u0631\u0627\u0628\u0639\u0629 <span class=\"text-rose-400 font-mono\" dir=\"ltr\">q\u2084 = -8 \u03bcC<\/span> \u062e\u0627\u0631\u062c \u0627\u0644\u0633\u0637\u062d. \u0627\u062d\u0633\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0644\u064a.\r\n <\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 text-[13px] space-y-3\">\r\n <ol class=\"list-decimal text-slate-300 space-y-2 pr-4 font-bold text-l\">\r\n <li>\u0646\u062a\u062c\u0627\u0647\u0644 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0631\u0627\u0628\u0639\u0629 \u0644\u0623\u0646\u0647\u0627 \u062e\u0627\u0631\u062c \u0627\u0644\u0633\u0637\u062d.<\/li>\r\n <li>\u0646\u062d\u0633\u0628 \u0627\u0644\u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u062c\u0628\u0631\u064a \u0644\u0644\u0634\u062d\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629:<\/li>\r\n <\/ol>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-full shadow-inner mt-4\" dir=\"ltr\">\r\n <div>\u03a3q<sub>in<\/sub> = q\u2081 + q\u2082 + q\u2083<\/div>\r\n <div>\u03a3q<sub>in<\/sub> = (+5) + (-2) + (+4) = <span class=\"text-emerald-400 font-bold\">+7 \u03bcC<\/span><\/div>\r\n <div class=\"text-slate-500 text-l border-b border-slate-700 pb-2 mb-2\">\u03a3q<sub>in<\/sub> = 7 \u00d7 10\u207b\u2076 C<\/div>\r\n <div>\u03a6<sub>net<\/sub> = \u03a3q<sub>in<\/sub> \/ \u03b5<sub>0<\/sub><\/div>\r\n <div>\u03a6<sub>net<\/sub> = (7 \u00d7 10\u207b\u2076) \/ (8.85 \u00d7 10\u207b\u00b9\u00b2)<\/div>\r\n <div class=\"text-rose-400 font-bold pt-2 border-t border-rose-500\/20 text-base\">\u03a6<sub>net<\/sub> \u2248 7.9 \u00d7 10\u2075 N\u00b7m\u00b2\/C<\/div>\r\n <\/div>\r\n <p class=\"text-l text-emerald-200\/80 text-center mt-4\">\u0628\u0645\u0627 \u0623\u0646 \u0627\u0644\u062a\u062f\u0641\u0642 \u0645\u0648\u062c\u0628 (+)\u060c \u0646\u0633\u062a\u0646\u062a\u062c \u0623\u0646 \u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0647\u064a \u062e\u0637\u0648\u0637 \u0645\u062c\u0627\u0644 <strong>\u062a\u062e\u0631\u062c<\/strong> \u0645\u0646 \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0645\u063a\u0644\u0642.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"gauss-law-sim-root\" class=\"simulation-container\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-emerald-400 rounded-full\"><\/span>\r\n \u0631\u0627\u0628\u0639\u0627\u064b: \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633 (\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062c\u0627\u0644)\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-8\">\r\n <div class=\"bg-indigo-900\/10 p-5 rounded-2xl border border-indigo-500\/20 flex flex-col md:flex-row gap-6 items-center shadow-md\">\r\n <div class=\"flex-1 space-y-3 border-r-2 border-indigo-500\/50 pr-4\">\r\n <h4 class=\"text-indigo-300 font-bold flex items-center gap-2 text-l\">\u0645\u0641\u0647\u0648\u0645 \u0623\u0633\u0627\u0633\u064a: \u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629 \u0644\u0644\u0634\u062d\u0646\u0629<\/h4>\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\u0639\u0646\u062f\u0645\u0627 \u062a\u062a\u0648\u0632\u0639 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0643\u0644\u064a\u0629 (Q) \u0628\u0627\u0646\u062a\u0638\u0627\u0645 \u0639\u0644\u0649 \u0645\u0633\u0627\u062d\u0629 \u0633\u0637\u062d \u0645\u0648\u0635\u0644 \u0623\u0648 \u0642\u0634\u0631\u0629 (A)\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629 \u0644\u0644\u062a\u0639\u0628\u064a\u0631 \u0639\u0646 \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0634\u062d\u0646\u0629 \u0641\u064a \u0643\u0644 \u0648\u062d\u062f\u0629 \u0645\u0633\u0627\u062d\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/50 p-4 rounded-xl flex flex-col items-center justify-center min-w-[160px] shadow-inner space-y-2 border border-white\/5\">\r\n <div class=\"font-mono text-xl text-indigo-400 font-bold direction-ltr\">\u03c3 = Q \/ A<\/div>\r\n <div class=\"text-[10px] text-slate-400 font-sans tracking-wide\">\u0627\u0644\u0648\u062d\u062f\u0629: C \/ m\u00b2<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 pt-2\">\r\n <div class=\"flex items-center gap-3 border-b border-emerald-500\/20 pb-3\">\r\n <span class=\"w-10 h-10 rounded-xl bg-emerald-500\/20 text-emerald-400 flex items-center justify-center font-bold text-lg shadow-[0_0_15px_rgba(16,185,129,0.2)]\">1<\/span>\r\n <h4 class=\"text-xl font-bold text-white\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0645\u0648\u0635\u0644 \u0643\u0631\u0648\u064a \u0645\u0634\u062d\u0648\u0646 (\u0646\u0635\u0641 \u0642\u0637\u0631\u0647 R)<\/h4>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-900\/50 p-4 rounded-xl border-r-4 border-emerald-500\">\r\n \u0641\u064a \u062d\u0627\u0644\u0629 \u0627\u0644\u0627\u062a\u0632\u0627\u0646 \u0627\u0644\u0643\u0647\u0631\u0648\u0633\u062a\u0627\u062a\u064a\u0643\u064a\u060c \u062a\u062a\u0646\u0627\u0641\u0631 \u0627\u0644\u0634\u062d\u0646\u0627\u062a \u0644\u062a\u0633\u062a\u0642\u0631 <strong>\u062c\u0645\u064a\u0639\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d \u0627\u0644\u062e\u0627\u0631\u062c\u064a<\/strong> \u0644\u0644\u0645\u0648\u0635\u0644. \u0646\u062a\u064a\u062c\u0629 \u0644\u0630\u0644\u0643\u060c \u064a\u0646\u0639\u062f\u0645 \u0627\u0644\u0645\u062c\u0627\u0644 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0635\u0644\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u062a\u0635\u0631\u0641 \u0627\u0644\u0645\u0648\u0635\u0644 \u062e\u0627\u0631\u062c\u064a\u0627\u064b \u0648\u0643\u0623\u0646 \u0634\u062d\u0646\u062a\u0647 \u062a\u0631\u0643\u0632\u062a \u0641\u064a \u0645\u0631\u0643\u0632\u0647.\r\n <\/p>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-5\">\r\n <div class=\"p-5 bg-slate-800\/80 rounded-2xl border border-rose-500\/30 text-center space-y-4 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-rose-500\/5 to-transparent\"><\/div>\r\n <div class=\"relative z-10 space-y-4\">\r\n <span class=\"text-l text-rose-300 font-bold bg-rose-500\/10 px-4 py-2 rounded-full inline-block shadow-l\">\u0627\u0644\u0646\u0642\u0637\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0635\u0644 (r < R)<\/span>\r\n <div class=\"font-mono text-4xl text-white font-bold drop-shadow-md py-2\">E = <span class=\"text-rose-400\">0<\/span><\/div>\r\n <div class=\"text-left font-mono text-[11px] text-slate-300 bg-black\/40 p-4 rounded-xl mx-auto w-fit space-y-2 border border-white\/5 shadow-inner leading-relaxed\">\r\n <div>\u222e E \u00b7 dA = q<sub>in<\/sub> \/ \u03b5<sub>0<\/sub><\/div>\r\n <div class=\"border-b border-slate-700\/80 pb-2 text-rose-300\">q<sub>in<\/sub> = 0<\/div>\r\n <div class=\"text-white pt-1\">E = <span class=\"text-rose-400\">0<\/span><\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-400 leading-relaxed px-2\">\u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0628\u0627\u0644\u062f\u0627\u062e\u0644 \u0644\u0627 \u064a\u062d\u0635\u0631 \u0623\u064a \u0634\u062d\u0646\u0629\u060c \u0644\u0623\u0646 \u0643\u0644 \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0633\u062a\u0642\u0631\u062a \u0639\u0644\u0649 \u0627\u0644\u0642\u0634\u0631\u0629 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-5 bg-slate-800\/80 rounded-2xl border border-emerald-500\/30 text-center space-y-4 relative overflow-hidden group\">\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-emerald-500\/5 to-transparent\"><\/div>\r\n <div class=\"relative z-10 space-y-4\">\r\n <span class=\"text-l text-emerald-300 font-bold bg-emerald-500\/10 px-4 py-2 rounded-full inline-block shadow-l\">\u0627\u0644\u0646\u0642\u0637\u0629 \u062e\u0627\u0631\u062c \u0627\u0644\u0645\u0648\u0635\u0644 (r >= R)<\/span>\r\n <div class=\"font-mono text-4xl text-emerald-400 font-bold drop-shadow-md py-2\">kQ \/ r\u00b2<\/div>\r\n <div class=\"text-left font-mono text-[11px] text-slate-300 bg-black\/40 p-4 rounded-xl mx-auto w-fit space-y-2 border border-white\/5 shadow-inner leading-relaxed\">\r\n <div>E (4\u03c0r\u00b2) = Q \/ \u03b5<sub>0<\/sub><\/div>\r\n <div class=\"border-b border-slate-700\/80 pb-2 text-emerald-300\">k = 1 \/ (4\u03c0\u03b5<sub>0<\/sub>)<\/div>\r\n <div class=\"text-white pt-1\">E = <span class=\"text-emerald-400\">kQ \/ r\u00b2<\/span><\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-400 leading-relaxed px-2\">\u062e\u0627\u0631\u062c \u0627\u0644\u0645\u0648\u0635\u0644\u060c \u064a\u0642\u0644 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0643\u0633\u064a\u0627\u064b \u0645\u0639 \u0645\u0631\u0628\u0639 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646\u062a \u0634\u062d\u0646\u0629 \u0646\u0642\u0637\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0631\u0643\u0632.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-indigo-900\/10 p-4 md:p-5 rounded-2xl border border-indigo-500\/20 text-l flex flex-col md:flex-row items-center gap-4 relative overflow-hidden shadow-md\">\r\n <div class=\"bg-indigo-500\/20 px-3 py-2 rounded-lg text-indigo-300 font-bold text-l whitespace-nowrap shadow-l border border-indigo-500\/30 relative z-10\">* \u0631\u0628\u0637 \u0645\u0639 \u0627\u0644\u0643\u062b\u0627\u0641\u0629<\/div>\r\n <p class=\"text-l text-slate-300 leading-relaxed flex-1 relative z-10\">\u0628\u0645\u0627 \u0623\u0646 \u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0643\u0631\u0629 A = 4\u03c0R\u00b2\u060c \u0641\u0625\u0646 Q = \u03c3(4\u03c0R\u00b2)\u060c \u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0639\u0644\u0649 \u0633\u0637\u062d \u0627\u0644\u0645\u0648\u0635\u0644 \u0645\u0628\u0627\u0634\u0631\u0629 (r = R):<\/p>\r\n <div class=\"font-mono text-xl text-white font-bold bg-black\/50 px-5 py-3 rounded-xl shadow-inner border border-white\/10 whitespace-nowrap relative z-10\">E = <span class=\"text-indigo-400\">\u03c3 \/ \u03b5<sub>0<\/sub><\/span><\/div>\r\n <\/div>\r\n <div class=\"mt-8 bg-slate-900\/40 border border-slate-700 rounded-2xl overflow-hidden shadow-lg\">\r\n <div class=\"bg-indigo-900\/30 px-5 py-3 border-b border-indigo-500\/20 flex items-center gap-3\">\r\n <span class=\"bg-indigo-500\/20 text-indigo-400 w-6 h-6 flex justify-center items-center rounded-lg text-lg\">*<\/span>\r\n <h4 class=\"font-bold text-indigo-300 text-l\">\u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a \u0644\u0644\u062a\u062f\u0631\u064a\u0628<\/h4>\r\n <\/div>\r\n <div class=\"p-5 space-y-6\">\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-800\/80 p-3 rounded-xl border border-white\/5 border-r-2 border-r-indigo-500\">\r\n \u0645\u0648\u0635\u0644 \u0643\u0631\u0648\u064a \u0645\u0639\u0632\u0648\u0644 \u0646\u0635\u0641 \u0642\u0637\u0631\u0647 <span class=\"text-emerald-400 font-mono\" dir=\"ltr\">R = 10 cm<\/span> \u064a\u062d\u0645\u0644 \u0634\u062d\u0646\u0629 \u0645\u0648\u062c\u0628\u0629 <span class=\"text-emerald-400 font-mono\" dir=\"ltr\">Q = +4 \u03bcC<\/span>. \u0623\u0648\u062c\u062f:\r\n <\/p>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-emerald-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">1<\/span>\r\n <p class=\"text-[13px] text-emerald-100 font-bold\">\u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0646\u062f \u0646\u0642\u0637\u0629 \u062a\u0628\u0639\u062f <span class=\"font-mono text-emerald-300\">5 cm<\/span> \u0639\u0646 \u0627\u0644\u0645\u0631\u0643\u0632.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-2\">\r\n <div class=\"absolute left-0 top-0 w-1 h-full bg-rose-500\/50\"><\/div>\r\n <p class=\"text-slate-400\">\u0627\u0644\u0646\u0642\u0637\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0635\u0644 (r < R)\u060c \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 = \u0635\u0641\u0631.<\/p>\r\n <div class=\"font-mono text-rose-400 font-bold text-base\" dir=\"ltr\">E = 0 N\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-emerald-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">2<\/span>\r\n <p class=\"text-[13px] text-emerald-100 font-bold\">\u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u0639\u0646\u062f \u0646\u0642\u0637\u0629 \u062a\u0628\u0639\u062f <span class=\"font-mono text-emerald-300\">20 cm<\/span> \u0639\u0646 \u0627\u0644\u0645\u0631\u0643\u0632.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-3\">\r\n <p class=\"text-slate-400\">\u0627\u0644\u0646\u0642\u0637\u0629 \u062e\u0627\u0631\u062c \u0627\u0644\u0645\u0648\u0635\u0644 (r > R)\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0643\u0648\u0644\u0648\u0645 (r = 0.2 m):<\/p>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-max min-w-[250px] shadow-inner\" dir=\"ltr\">\r\n <div>E = (k \u00d7 Q) \/ r\u00b2<\/div>\r\n <div>E = (9\u00d710\u2079 \u00d7 4\u00d710\u207b\u2076) \/ (0.2)\u00b2<\/div>\r\n <div class=\"text-emerald-400 font-bold pt-2 border-t border-emerald-500\/20 text-base\">E = 9 \u00d7 10\u2075 N\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-3\">\r\n <div class=\"flex items-start gap-2\">\r\n <span class=\"text-l font-bold text-slate-900 bg-emerald-400 flex justify-center items-center w-5 h-5 rounded-full mt-0.5\">3<\/span>\r\n <p class=\"text-[13px] text-emerald-100 font-bold\">\u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629 \u0644\u0644\u0634\u062d\u0646\u0629.<\/p>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-white\/5 mr-7 text-[13px] space-y-3\">\r\n <p class=\"text-slate-400\">\u0645\u0633\u0627\u062d\u0629 \u0633\u0637\u062d \u0627\u0644\u0643\u0631\u0629 A = 4\u03c0R\u00b2 \u062d\u064a\u062b R = 0.1 m:<\/p>\r\n <div class=\"font-mono text-slate-300 bg-slate-900\/80 p-3.5 rounded-lg border border-slate-700 text-left space-y-2 block w-max min-w-[250px] shadow-inner\" dir=\"ltr\">\r\n <div>\u03c3 = Q \/ (4\u03c0R\u00b2)<\/div>\r\n <div class=\"text-slate-500 text-l\">A = 4 \u00d7 3.14 \u00d7 (0.1)\u00b2 \u2248 0.1256 m\u00b2<\/div>\r\n <div>\u03c3 = (4\u00d710\u207b\u2076) \/ 0.1256<\/div>\r\n <div class=\"text-indigo-400 font-bold pt-2 border-t border-indigo-500\/20 text-base\">\u03c3 = 3.18 \u00d7 10\u207b\u2075 C\/m\u00b2<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 pt-6 border-t border-slate-700\/50 mt-8\">\r\n <div class=\"flex items-center gap-3 border-b border-emerald-500\/20 pb-3\">\r\n <span class=\"w-10 h-10 rounded-xl bg-emerald-500\/20 text-emerald-400 flex items-center justify-center font-bold text-lg shadow-[0_0_15px_rgba(16,185,129,0.2)]\">2<\/span>\r\n <h4 class=\"text-xl font-bold text-white\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0644\u0642\u0634\u0631\u0629 (\u0635\u0641\u064a\u062d\u0629) \u0645\u0633\u062a\u0648\u064a\u0629 \u0644\u0627 \u0646\u0647\u0627\u0626\u064a\u0629<\/h4>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-900\/50 p-4 rounded-xl border-r-4 border-emerald-500 shadow-inner\">\r\n \u0639\u0646\u062f\u0645\u0627 \u062a\u062a\u0648\u0632\u0639 \u0627\u0644\u0634\u062d\u0646\u0629 \u0628\u0627\u0646\u062a\u0638\u0627\u0645 \u0639\u0644\u0649 \u0642\u0634\u0631\u0629 \u0648\u0627\u0633\u0639\u0629 \u062c\u062f\u0627\u064b (\u0644\u0627 \u0646\u0647\u0627\u0626\u064a\u0629)\u060c \u0641\u0625\u0646 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062a\u062e\u0631\u062c \u0639\u0645\u0648\u062f\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d\u064a\u0646 \u0641\u064a \u0643\u0644\u0627 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u064a\u0646. \u0644\u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0647\u0630\u0627 \u0627\u0644\u0645\u062c\u0627\u0644 \u0646\u0633\u062a\u062e\u062f\u0645 <strong>\u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0623\u0633\u0637\u0648\u0627\u0646\u064a<\/strong> \u064a\u062e\u062a\u0631\u0642 \u0627\u0644\u0642\u0634\u0631\u0629.\r\n <\/p>\r\n <div class=\"bg-slate-800\/40 rounded-2xl border border-slate-600\/50 overflow-hidden shadow-lg\">\r\n <div class=\"bg-slate-800 border-b border-slate-600\/50 px-5 py-3 flex items-center gap-2\">\r\n <span class=\"text-emerald-400\">#<\/span>\r\n <h5 class=\"text-emerald-300 font-bold text-l\">\u0627\u0644\u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0627\u0644\u0631\u064a\u0627\u0636\u064a (\u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629)<\/h5>\r\n <\/div>\r\n <div class=\"p-5 flex flex-col lg:flex-row gap-6 items-stretch\">\r\n <div class=\"flex-1 w-full space-y-4\">\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-emerald-500\/10 text-emerald-400 flex items-center justify-center font-mono font-bold text-l border border-emerald-500\/20\">1<\/div>\r\n <div class=\"space-y-2\">\r\n <p class=\"text-[13px] text-slate-300\">\u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0644\u064a \u0639\u0628\u0631 \u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u0627\u0644\u0623\u0633\u0637\u0648\u0627\u0646\u064a. \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062a\u062e\u062a\u0631\u0642 \u0641\u0642\u0637 \u0627\u0644\u0642\u0627\u0639\u062f\u062a\u064a\u0646.<\/p>\r\n <div class=\"font-mono text-emerald-300 bg-black\/40 px-3 py-2 rounded-lg border border-black inline-block text-l shadow-inner\" dir=\"ltr\">\u03a6<sub>net<\/sub> = EA + EA = <span class=\"font-bold text-white\">2EA<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-emerald-500\/10 text-emerald-400 flex items-center justify-center font-mono font-bold text-l border border-emerald-500\/20\">2<\/div>\r\n <div class=\"space-y-2\">\r\n <p class=\"text-[13px] text-slate-300\">\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0634\u062d\u0646\u0629 \u0627\u0644\u0645\u062d\u0635\u0648\u0631\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0623\u0633\u0637\u0648\u0627\u0646\u0629.<\/p>\r\n <div class=\"font-mono text-emerald-300 bg-black\/40 px-3 py-2 rounded-lg border border-black inline-block text-l shadow-inner\" dir=\"ltr\">q<sub>in<\/sub> = <span class=\"font-bold text-white\">\u03c3 \u00b7 A<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-emerald-500\/10 text-emerald-400 flex items-center justify-center font-mono font-bold text-l border border-emerald-500\/20\">3<\/div>\r\n <div class=\"space-y-2 w-full\">\r\n <p class=\"text-[13px] text-slate-300\">\u062a\u0637\u0628\u064a\u0642 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633 \u0648\u0627\u062e\u062a\u0635\u0627\u0631 \u0627\u0644\u0645\u0633\u0627\u062d\u0629 (A).<\/p>\r\n <div class=\"font-mono text-slate-300 bg-black\/40 p-3 rounded-lg border border-black inline-block text-l shadow-inner space-y-1 w-full max-w-[280px]\" dir=\"ltr\">\r\n <div>\u222e E \u00b7 dA = q<sub>in<\/sub> \/ \u03b5<sub>0<\/sub><\/div>\r\n <div class=\"text-emerald-400 border-t border-slate-700 pt-2 mt-2 font-bold\">2E<span class=\"text-rose-400\/70 line-through\">A<\/span> = \u03c3<span class=\"text-rose-400\/70 line-through\">A<\/span> \/ \u03b5<sub>0<\/sub><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full lg:w-1\/3 min-w-[280px]\">\r\n <div class=\"bg-gradient-to-br from-emerald-900\/40 to-black\/60 p-6 flex flex-col justify-center items-center rounded-2xl border border-emerald-500\/30 shadow-2xl space-y-4 relative overflow-hidden h-full\">\r\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(16,185,129,0.15),transparent_70%)]\"><\/div>\r\n <span class=\"text-l text-emerald-300\/70 uppercase tracking-widest relative z-10 font-bold bg-emerald-500\/10 px-3 py-1 rounded-full border border-emerald-500\/20 shadow-l\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629<\/span>\r\n <div class=\"text-center font-mono text-4xl text-white font-bold direction-ltr relative z-10 drop-shadow-lg py-2\">E = <span class=\"text-emerald-400\">\u03c3 \/ (2\u03b5<sub>0<\/sub>)<\/span><\/div>\r\n <div class=\"w-12 h-1 bg-emerald-500\/30 rounded-full relative z-10 my-2\"><\/div>\r\n <p class=\"text-[12px] text-emerald-100\/90 text-center relative z-10 leading-relaxed bg-black\/30 p-4 rounded-xl border border-emerald-500\/20 shadow-inner\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0647\u0646\u0627 <strong>\u0645\u0646\u062a\u0638\u0645<\/strong> \u062a\u0645\u0627\u0645\u0627\u064b\u060c \u062b\u0627\u0628\u062a \u0627\u0644\u0645\u0642\u062f\u0627\u0631 \u0648\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0648\u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0639\u0646 \u0627\u0644\u0635\u0641\u064a\u062d\u0629!<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-6 pt-6 border-t border-slate-700\/50 mt-8\">\r\n <div class=\"flex items-center gap-3 border-b border-rose-500\/20 pb-3\">\r\n <span class=\"w-10 h-10 rounded-xl bg-rose-500\/20 text-rose-400 flex items-center justify-center font-bold text-lg shadow-[0_0_15px_rgba(244,63,94,0.2)]\">3<\/span>\r\n <h4 class=\"text-xl font-bold text-white\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0628\u064a\u0646 \u0635\u0641\u064a\u062d\u062a\u064a\u0646 \u0645\u062a\u0648\u0627\u0632\u064a\u062a\u064a\u0646 \u0645\u0634\u062d\u0648\u0646\u062a\u064a\u0646 \u0648\u0645\u062e\u062a\u0644\u0641\u062a\u064a\u0646<\/h4>\r\n <\/div>\r\n <p class=\"text-l text-slate-300 leading-relaxed bg-slate-900\/50 p-4 rounded-xl border-r-4 border-rose-500 shadow-inner\">\r\n \u064a\u064f\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 \u0627\u0644\u062a\u0631\u062a\u064a\u0628 (\u0641\u064a \u0627\u0644\u0645\u0643\u062b\u0641\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u0648\u064a\u0629) \u0644\u062a\u0648\u0644\u064a\u062f <strong>\u0645\u062c\u0627\u0644 \u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0645\u0646\u062a\u0638\u0645 \u062c\u062f\u0627\u064b \u0648\u0645\u0636\u0628\u0648\u0637<\/strong>. \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u0627\u0646 \u062a\u0645\u062a\u0644\u0643\u0627\u0646 \u0646\u0641\u0633 \u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629 \u0648\u0644\u0643\u0646 \u0628\u0625\u0634\u0627\u0631\u062a\u064a\u0646 \u0645\u062e\u062a\u0644\u0641\u062a\u064a\u0646 (+ \u0648 -).\r\n <\/p>\r\n <div class=\"bg-slate-800\/40 rounded-2xl border border-slate-600\/50 overflow-hidden shadow-lg\">\r\n <div class=\"bg-slate-800 border-b border-slate-600\/50 px-5 py-3 flex items-center gap-2\">\r\n <span class=\"text-rose-400\">#<\/span>\r\n <h5 class=\"text-rose-300 font-bold text-l\">\u0627\u0644\u062a\u0641\u0633\u064a\u0631 \u0627\u0644\u0627\u0633\u062a\u0646\u062a\u0627\u062c\u064a (\u0645\u0628\u062f\u0623 \u0627\u0644\u062a\u0631\u0627\u0643\u0628)<\/h5>\r\n <\/div>\r\n <div class=\"p-5 flex flex-col lg:flex-row gap-6 items-stretch\">\r\n <div class=\"flex-1 w-full space-y-4\">\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-rose-500\/10 text-rose-400 flex items-center justify-center font-bold text-lg border border-rose-500\/20\">x<\/div>\r\n <div class=\"space-y-2 w-full\">\r\n <p class=\"text-[13px] text-slate-300 font-bold border-b border-rose-500\/20 pb-1 mb-1 inline-block\">\u062e\u0627\u0631\u062c \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646 (\u0627\u0644\u0645\u0646\u0637\u0642\u062a\u064a\u0646 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u062a\u064a\u0646):<\/p>\r\n <p class=\"text-[12.5px] text-slate-400\">\u0627\u0644\u0645\u062c\u0627\u0644\u0627\u0646 \u0645\u062a\u0639\u0627\u0643\u0633\u0627\u0646 \u0641\u064a \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0648\u0645\u062a\u0633\u0627\u0648\u064a\u0627\u0646 \u0641\u064a \u0627\u0644\u0645\u0642\u062f\u0627\u0631\u060c \u0641\u064a\u0644\u063a\u064a\u0627\u0646 \u0628\u0639\u0636\u0647\u0645\u0627.<\/p>\r\n <div class=\"font-mono text-rose-300 bg-black\/40 p-3 rounded-lg border border-white\/5 inline-block text-l shadow-inner w-full max-w-[320px]\" dir=\"ltr\">E<sub>out<\/sub> = E<sub>(+)<\/sub> - E<sub>(-)<\/sub> = <span class=\"font-bold text-white\">0<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 p-3 rounded-xl bg-slate-800\/60 border border-white\/5\">\r\n <div class=\"min-w-[32px] h-8 rounded-lg bg-emerald-500\/10 text-emerald-400 flex items-center justify-center font-bold text-xl border border-emerald-500\/20\">+<\/div>\r\n <div class=\"space-y-2 w-full\">\r\n <p class=\"text-[13px] text-slate-300 font-bold border-b border-emerald-500\/20 pb-1 mb-1 inline-block\">\u0628\u064a\u0646 \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646 (\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0645\u0631\u0643\u0632\u064a\u0629):<\/p>\r\n <p class=\"text-[12.5px] text-slate-400\">\u064a\u062a\u062c\u0647 \u0627\u0644\u0645\u062c\u0627\u0644\u0627\u0646 \u0641\u064a \u0646\u0641\u0633 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u060c \u0641\u0646\u0642\u0648\u0645 <strong>\u0628\u062c\u0645\u0639<\/strong> \u0627\u0644\u0645\u0642\u062f\u0627\u0631\u064a\u0646.<\/p>\r\n <div class=\"font-mono text-slate-300 bg-black\/40 p-3 rounded-lg border border-white\/5 inline-block text-l shadow-inner space-y-1 w-full max-w-[320px]\" dir=\"ltr\">\r\n <div>E<sub>net<\/sub> = E<sub>(+)<\/sub> + E<sub>(-)<\/sub><\/div>\r\n <div class=\"text-emerald-400 border-t border-slate-700 pt-2 mt-2 font-bold leading-relaxed\">E<sub>net<\/sub> = [\u03c3\/2\u03b5<sub>0<\/sub>] + [\u03c3\/2\u03b5<sub>0<\/sub>] = <span class=\"text-white\">\u03c3 \/ \u03b5<sub>0<\/sub><\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full lg:w-1\/3 min-w-[280px]\">\r\n <div class=\"bg-gradient-to-br from-rose-900\/40 to-black\/60 p-6 flex flex-col justify-center items-center rounded-2xl border border-rose-500\/30 shadow-2xl space-y-4 relative overflow-hidden h-full\">\r\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(244,63,94,0.15),transparent_70%)]\"><\/div>\r\n <span class=\"text-l text-rose-300\/70 uppercase tracking-widest relative z-10 font-bold bg-rose-500\/10 px-3 py-1 rounded-full border border-rose-500\/20 shadow-l\">\u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629<\/span>\r\n <div class=\"space-y-1 relative z-10 w-full text-center py-2\">\r\n <p class=\"text-[11px] text-slate-400 mb-2\">\u0627\u0644\u0645\u062c\u0627\u0644 <span class=\"text-rose-300 font-bold\">\u0628\u064a\u0646<\/span> \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646:<\/p>\r\n <div class=\"font-mono text-4xl text-white font-bold direction-ltr drop-shadow-lg\">E = <span class=\"text-rose-400\">\u03c3 \/ \u03b5<sub>0<\/sub><\/span><\/div>\r\n <\/div>\r\n <div class=\"w-full border-t border-rose-500\/20 relative z-10 mt-auto pt-4\">\r\n <div class=\"flex justify-between items-center bg-black\/40 px-4 py-2.5 rounded-xl border border-rose-500\/10 shadow-inner\">\r\n <span class=\"text-[11.5px] text-slate-400\">\u0627\u0644\u0645\u062c\u0627\u0644 <span class=\"text-slate-300 font-bold\">\u062e\u0627\u0631\u062c\u0647\u0645\u0627<\/span>:<\/span>\r\n <div class=\"font-mono text-lg text-rose-400 font-bold\" dir=\"ltr\">E<sub>out<\/sub> = 0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-8 bg-slate-800\/60 rounded-2xl border border-rose-500\/20 overflow-hidden shadow-lg group hover:border-rose-500\/40 transition-colors\">\r\n <div class=\"bg-rose-500\/10 px-5 py-3 border-b border-rose-500\/20 flex items-center justify-between\">\r\n <h5 class=\"text-rose-300 font-bold text-l flex items-center gap-2\"># \u0645\u062b\u0627\u0644 \u0645\u062d\u0644\u0648\u0644: \u0627\u0644\u0645\u0643\u062b\u0641 \u0627\u0644\u0645\u0633\u062a\u0648\u064a<\/h5>\r\n <\/div>\r\n <div class=\"p-5 space-y-5\">\r\n <div class=\"text-l text-slate-300 bg-black\/20 p-4 rounded-xl border border-white\/5\">\r\n \u0635\u0641\u064a\u062d\u062a\u0627\u0646 \u0645\u0639\u062f\u0646\u064a\u062a\u0627\u0646 \u0645\u0633\u0627\u062d\u0629 \u0643\u0644 \u0645\u0646\u0647\u0645\u0627 <span class=\"font-mono text-rose-300\">A = 0.2 m\u00b2<\/span>. \u0634\u062d\u0646\u062a\u0627\u0647\u0645\u0627 <span class=\"font-mono text-rose-300\">Q = 8.85 \u00b5C<\/span> \u0645\u062e\u062a\u0644\u0641\u062a\u0627\u0646. \u0627\u062d\u0633\u0628 \u0627\u0644\u0645\u062c\u0627\u0644 \u0628\u064a\u0646\u0647\u0645\u0627 \u0648\u062e\u0627\u0631\u062c\u0647\u0645\u0627.\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"space-y-2 bg-slate-800\/80 p-4 rounded-xl border border-rose-500\/10\">\r\n <span class=\"text-[11px] font-bold text-rose-400 uppercase tracking-wider block\">\u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u0623\u0648\u0644\u0649<\/span>\r\n <p class=\"text-l text-slate-400\">\u062d\u0633\u0627\u0628 \u0627\u0644\u0643\u062b\u0627\u0641\u0629 \u0627\u0644\u0633\u0637\u062d\u064a\u0629:<\/p>\r\n <div class=\"font-mono text-l text-rose-200 bg-black\/40 p-2 rounded block\" dir=\"ltr\">\u03c3 = Q\/A = 44.25\u00d710\u207b\u2076 C\/m\u00b2<\/div>\r\n <\/div>\r\n <div class=\"space-y-2 bg-slate-800\/80 p-4 rounded-xl border border-emerald-500\/10\">\r\n <span class=\"text-[11px] font-bold text-emerald-400 uppercase tracking-wider block\">\u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629<\/span>\r\n <p class=\"text-l text-slate-400\">\u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u062c\u0627\u0644 \u0628\u064a\u0646 \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646:<\/p>\r\n <div class=\"font-mono text-l text-emerald-200 bg-black\/40 p-2 rounded block\" dir=\"ltr\">E = \u03c3\/\u03b5\u2080 = 5\u00d710\u2076 N\/C<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-rose-500\/10 text-rose-300\/80 p-3 rounded-lg text-l flex items-center justify-between border border-rose-500\/20\">\r\n <div><strong class=\"text-rose-300\">\u062e\u0627\u0631\u062c \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646:<\/strong> \u0627\u0644\u0645\u062c\u0627\u0644 \u064a\u0644\u063a\u064a \u0628\u0639\u0636\u0647!<\/div>\r\n <div class=\"font-mono font-bold text-rose-400\" dir=\"ltr\">E<sub>out<\/sub> = 0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-blue-400 rounded-full\"><\/span>\r\n \u062e\u0627\u0645\u0633\u0627\u064b: \u062d\u0631\u0643\u0629 \u062c\u0633\u064a\u0645 \u0645\u0634\u062d\u0648\u0646 \u0641\u064a \u0645\u062c\u0627\u0644 \u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0645\u0646\u062a\u0638\u0645\r\n <\/h3>\r\n <div class=\"bg-slate-800\/40 p-6 rounded-3xl border border-slate-700 shadow-inner space-y-8\">\r\n <p class=\"text-l text-slate-300 leading-relaxed\">\u0639\u0646\u062f\u0645\u0627 \u064a\u0648\u0636\u0639 \u062c\u0633\u064a\u0645 \u0645\u0634\u062d\u0648\u0646 \u0641\u064a \u0645\u062c\u0627\u0644 \u0645\u0646\u062a\u0638\u0645\u060c \u0641\u0625\u0646\u0647 \u064a\u062a\u0623\u062b\u0631 \u0628\u0642\u0648\u0629 \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u062b\u0627\u0628\u062a\u0629 \u062a\u0624\u062f\u064a \u0625\u0644\u0649 \u062a\u0633\u0627\u0631\u0639 \u062b\u0627\u0628\u062a \u0648\u0641\u0642 \u0642\u0627\u0646\u0648\u0646 \u0646\u064a\u0648\u062a\u0646 \u0627\u0644\u062b\u0627\u0646\u064a.<\/p>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"p-5 bg-blue-900\/10 rounded-2xl border border-blue-500\/20 text-center space-y-2\">\r\n <h5 class=\"text-l text-slate-400 uppercase\">\u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629:<\/h5>\r\n <div class=\"font-mono text-2xl text-white\">F<sub>E<\/sub> = qE<\/div>\r\n <p class=\"text-[10px] text-slate-500 italic\">(\u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0645\u0639 \u0627\u0644\u0645\u062c\u0627\u0644 \u0644\u0644\u0645\u0648\u062c\u0628\u0629 \u0648\u0639\u0643\u0633\u0647 \u0644\u0644\u0633\u0627\u0644\u0628\u0629)<\/p>\r\n <\/div>\r\n <div class=\"p-5 bg-blue-900\/10 rounded-2xl border border-blue-500\/20 text-center space-y-2\">\r\n <h5 class=\"text-l text-slate-400 uppercase\">\u0627\u0644\u062a\u0633\u0627\u0631\u0639:<\/h5>\r\n <div class=\"font-mono text-2xl text-white\">a = qE \/ m<\/div>\r\n <p class=\"text-[10px] text-slate-500 italic\">(\u0628\u0625\u0647\u0645\u0627\u0644 \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0648\u0632\u0646)<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-black\/30 p-6 rounded-2xl border border-white\/5 space-y-4\">\r\n <h4 class=\"text-l text-blue-300 font-bold mb-3 border-b border-white\/10 pb-2 flex items-center gap-2\"># \u0648\u0635\u0641 \u0627\u0644\u062d\u0631\u0643\u0629 (\u0645\u0639\u0627\u062f\u0644\u0627\u062a \u0627\u0644\u062a\u0633\u0627\u0631\u0639 \u0627\u0644\u062b\u0627\u0628\u062a):<\/h4>\r\n <div class=\"grid grid-cols-1 l:grid-cols-3 gap-3\">\r\n <div class=\"bg-slate-800\/80 p-3 rounded-lg text-center font-mono text-l text-slate-300 direction-ltr\">v_f = v_i + at<\/div>\r\n <div class=\"bg-slate-800\/80 p-3 rounded-lg text-center font-mono text-l text-slate-300 direction-ltr\">\u0394x = v_i t + \u00bdat\u00b2<\/div>\r\n <div class=\"bg-slate-800\/80 p-3 rounded-lg text-center font-mono text-l text-slate-300 direction-ltr\">v_f\u00b2 = v_i\u00b2 + 2a\u0394x<\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"parallel-plate-motion-sim-root\" class=\"simulation-container\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-6 mt-12\">\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-2\">\r\n <span class=\"w-2 h-8 bg-zinc-400 rounded-full\"><\/span>\r\n \u0623\u0645\u062b\u0644\u0629 \u0645\u062d\u0644\u0648\u0644\u0629 \u0647\u0627\u0645\u0629 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0628\r\n <\/h3>\r\n <div class=\"space-y-6\">\r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-cyan-500\/20 hover:border-cyan-500\/50 transition-colors shadow-lg\">\r\n <h4 class=\"text-base font-bold text-cyan-300 mb-3 flex items-center gap-2 border-b border-cyan-500\/10 pb-3\"><span class=\"w-6 h-6 rounded-full bg-cyan-500\/20 flex items-center justify-center text-l\">1<\/span> \u0645\u062b\u0627\u0644 1 (\u0635 88): \u062d\u0633\u0627\u0628 \u0627\u0644\u062a\u062f\u0641\u0642 \u0639\u0628\u0631 \u0642\u0631\u0635<\/h4>\r\n <div class=\"space-y-4\">\r\n <p class=\"text-l text-slate-300\">\u0642\u0631\u0635 (r=0.1 m)\u060c \u0645\u062c\u0627\u0644 (E=2000 N\/C)\u060c \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0633\u0637\u062d \u0648\u0627\u0644\u0645\u062c\u0627\u0644 30\u00b0.<\/p>\r\n <div class=\"bg-black\/30 p-4 rounded-xl border border-cyan-500\/10 space-y-2\">\r\n <ul class=\"text-l text-slate-400 space-y-2\">\r\n <li>A = \u03c0r\u00b2 = 3.14\u00d7(0.1)\u00b2 = 0.0314 m\u00b2<\/li>\r\n <li>\u03b8 = 90-30 = 60\u00b0<\/li>\r\n <li>\u03a6 = 2000\u00d70.0314\u00d7cos(60\u00b0) = 31.4 N.m\u00b2\/C<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-gradient-to-b from-slate-800 to-slate-900\/40 p-6 rounded-2xl border border-emerald-500\/20 hover:border-emerald-500\/50 transition-colors shadow-lg\">\r\n <h4 class=\"text-base font-bold text-emerald-300 mb-3 flex items-center gap-2 border-b border-emerald-500\/10 pb-3\"><span class=\"w-6 h-6 rounded-full bg-emerald-500\/20 flex items-center justify-center text-l\">5<\/span> \u0645\u062b\u0627\u0644 5 (\u0635 97): \u0627\u062a\u0632\u0627\u0646 \u0643\u0631\u0629 \u0641\u0648\u0642 \u0642\u0634\u0631\u0629 \u0645\u0634\u062d\u0648\u0646\u0629<\/h4>\r\n <div class=\"space-y-4 text-l text-slate-300\">\r\n <p>\u0627\u0644\u0627\u062a\u0632\u0627\u0646 \u0627\u0644\u0633\u0643\u0648\u0646\u064a \u064a\u0642\u062a\u0636\u064a \u062a\u0648\u0627\u0632\u0646 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629 \u0627\u0644\u0635\u0627\u0639\u062f\u0629 \u0645\u0639 \u0648\u0632\u0646 \u0627\u0644\u0643\u0631\u0629:<\/p>\r\n <div class=\"bg-black\/40 p-4 rounded-xl font-mono text-emerald-200 text-center space-y-2 direction-ltr\">\r\n <div>F<sub>E<\/sub> = F<sub>g<\/sub><\/div>\r\n <div>q \u00b7 E = m \u00b7 g<\/div>\r\n <div class=\"text-[10px] text-slate-500 mt-2 border-t border-white\/5 pt-2\">\u062d\u064a\u062b E \u0647\u0648 \u0645\u062c\u0627\u0644 \u0627\u0644\u0642\u0634\u0631\u0629: \u03c3\/(2\u03b5\u2080)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"space-y-8 mt-12\">\r\n <div class=\"bg-slate-800\/40 p-6 md:p-8 rounded-[2rem] border border-slate-700\/80 shadow-2xl w-full relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-indigo-500\/5 blur-3xl rounded-full pointer-events-none\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-64 h-64 bg-blue-500\/5 blur-3xl rounded-full pointer-events-none\"><\/div>\r\n <h3 class=\"text-2xl font-bold text-white flex items-center gap-3 mb-8 border-b border-indigo-500\/20 pb-4 relative z-10\"># \u0627\u0644\u062e\u0644\u0627\u0635\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629 \u0644\u0644\u062f\u0631\u0633<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 relative z-10\">\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 hover:border-indigo-500\/30 transition-colors flex flex-col gap-3 shadow-inner\">\r\n <h4 class=\"text-indigo-300 font-bold text-l\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0627\u0644\u062a\u062f\u0641\u0642<\/h4>\r\n <ul class=\"space-y-2 text-l text-slate-400 leading-relaxed list-disc list-inside marker:text-indigo-500\/50\">\r\n <li>\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u062a\u0646\u0628\u0639 \u0645\u0646 \u0627\u0644\u0645\u0648\u062c\u0628\u0629 \u0648\u062a\u0646\u062a\u0647\u064a \u0641\u064a \u0627\u0644\u0633\u0627\u0644\u0628\u0629.<\/li>\r\n <li>\u0627\u0644\u062a\u062f\u0641\u0642 \u03a6 = E\u00b7A\u00b7cos(\u03b8) \u0645\u0642\u064a\u0627\u0633 \u0644\u0639\u062f\u062f \u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062e\u062a\u0631\u0642\u0629.<\/li>\r\n <li>\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u03b8 \u0628\u064a\u0646 \u062e\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0627\u0644\u0639\u0645\u0648\u062f\u064a \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u062d.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 hover:border-emerald-500\/30 transition-colors flex flex-col gap-3 shadow-inner\">\r\n <h4 class=\"text-emerald-300 font-bold text-l\">\u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0648\u0633<\/h4>\r\n <ul class=\"space-y-2 text-l text-slate-400 leading-relaxed list-disc list-inside marker:text-emerald-500\/50\">\r\n <li>\u222eE\u00b7dA = \u03a3q_in\/\u03b5\u2080<\/li>\r\n <li>\u0644\u0627 \u064a\u0639\u062a\u0645\u062f \u0627\u0644\u062a\u062f\u0641\u0642 \u0639\u0644\u0649 \u0634\u0643\u0644 \u0648\u062d\u062c\u0645 \u0633\u0637\u062d \u063a\u0627\u0648\u0633.<\/li>\r\n <li>\u0627\u0644\u0634\u062d\u0646\u0627\u062a \u062e\u0627\u0631\u062c \u0627\u0644\u0633\u0637\u062d \u0644\u0627 \u062a\u0633\u0627\u0647\u0645 \u0641\u064a \u0627\u0644\u062a\u062f\u0641\u0642.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-slate-900\/60 p-5 rounded-2xl border border-white\/5 hover:border-rose-500\/30 transition-colors flex flex-col gap-3 shadow-inner md:col-span-2 lg:col-span-1\">\r\n <h4 class=\"text-rose-300 font-bold text-l\">\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u0642\u0648\u0627\u0646\u064a\u0646<\/h4>\r\n <ul class=\"space-y-2 text-l text-slate-400 leading-relaxed list-disc list-inside marker:text-rose-500\/50\">\r\n <li>\u0627\u0644\u0645\u062c\u0627\u0644 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0648\u0635\u0644 \u0627\u0644\u0645\u0634\u062d\u0648\u0646 = \u0635\u0641\u0631.<\/li>\r\n <li>\u0645\u062c\u0627\u0644 \u0635\u0641\u064a\u062d\u0629 \u0644\u0627 \u0646\u0647\u0627\u0626\u064a\u0629: E = \u03c3\/2\u03b5\u2080 (\u062b\u0627\u0628\u062a).<\/li>\r\n <li>\u0645\u062c\u0627\u0644 \u0628\u064a\u0646 \u0635\u0641\u064a\u062d\u062a\u064a\u0646: E = \u03c3\/\u03b5\u2080 (\u0645\u0646\u062a\u0638\u0645).<\/li>\r\n <li>\u062a\u0633\u0627\u0631\u0639 \u062c\u0633\u064a\u0645: a = qE\/m.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gradient-to-br from-amber-900\/20 to-amber-900\/5 p-6 md:p-8 rounded-[2rem] border border-amber-500\/20 shadow-2xl w-full\">\r\n <h3 class=\"text-2xl font-bold text-amber-400 flex items-center gap-3 mb-8 border-b border-amber-500\/20 pb-4\"># \u0623\u0633\u0631\u0627\u0631 \u0648\u062e\u062f\u0639 \u0627\u0645\u062a\u062d\u0627\u0646\u064a\u0629 (\u0645\u0647\u0645 \u062c\u062f\u0627\u064b!)<\/h3>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\r\n <div class=\"flex items-start gap-4 bg-black\/20 p-5 rounded-2xl border border-amber-500\/10 group hover:border-amber-500\/30 transition-colors\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-500\/10 flex items-center justify-center text-amber-400 flex-shrink-0 group-hover:scale-110 transition-transform\">!<\/div>\r\n <div class=\"space-y-1.5\">\r\n <h5 class=\"text-amber-300 text-l font-bold\">\u062e\u062f\u0639\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0627\u0644\u0633\u0637\u062d \u0627\u0644\u0645\u0633\u062a\u0648\u064a<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0645\u062c\u0627\u0644 \u064a\u0648\u0627\u0632\u064a \u0627\u0644\u0633\u0637\u062d\u060c \u0641\u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0645\u0639 \u0627\u0644\u0639\u0645\u0648\u062f\u064a 90\u00b0 \u0648\u0627\u0644\u062a\u062f\u0641\u0642 = \u0635\u0641\u0631.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 bg-black\/20 p-5 rounded-2xl border border-amber-500\/10 group hover:border-amber-500\/30 transition-colors\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-500\/10 flex items-center justify-center text-amber-400 flex-shrink-0 group-hover:scale-110 transition-transform\">!<\/div>\r\n <div class=\"space-y-1.5\">\r\n <h5 class=\"text-amber-300 text-l font-bold\">\u0627\u0644\u062c\u0633\u064a\u0645 \u0627\u0644\u0633\u0627\u0644\u0628 \u064a\u0639\u0627\u0643\u0633 \u0627\u0644\u062a\u064a\u0627\u0631<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0627\u0644\u062c\u0633\u064a\u0645 \u0627\u0644\u0645\u0648\u062c\u0628 \u064a\u062a\u062d\u0631\u0643 \u0645\u0639 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644\u060c \u0648\u0627\u0644\u0633\u0627\u0644\u0628 \u064a\u0646\u062d\u0631\u0641 \u0639\u0643\u0633 \u0627\u062a\u062c\u0627\u0647 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 bg-black\/20 p-5 rounded-2xl border border-amber-500\/10 group hover:border-amber-500\/30 transition-colors\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-500\/10 flex items-center justify-center text-amber-400 flex-shrink-0 group-hover:scale-110 transition-transform\">!<\/div>\r\n <div class=\"space-y-1.5\">\r\n <h5 class=\"text-amber-300 text-l font-bold\">\u0627\u0644\u062a\u0646\u0627\u0633\u0628 \u0627\u0644\u062a\u0631\u0628\u064a\u0639\u064a \u0627\u0644\u0639\u0643\u0633\u064a<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0646\u0627\u062a\u062c \u0639\u0646 \u0634\u062d\u0646\u0629 \u0646\u0642\u0637\u064a\u0629 \u064a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u0627\u064b \u0645\u0639 \u0645\u0631\u0628\u0639 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 1\/r\u00b2. \u062a\u0636\u0627\u0639\u0641 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u064a\u0642\u0644\u0644 \u0627\u0644\u0645\u062c\u0627\u0644 \u0644\u0644\u0631\u0628\u0639.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4 bg-black\/20 p-5 rounded-2xl border border-amber-500\/10 group hover:border-amber-500\/30 transition-colors\">\r\n <div class=\"w-10 h-10 rounded-full bg-amber-500\/10 flex items-center justify-center text-amber-400 flex-shrink-0 group-hover:scale-110 transition-transform\">!<\/div>\r\n <div class=\"space-y-1.5\">\r\n <h5 class=\"text-amber-300 text-l font-bold\">\u0639\u0635\u064a\u0627\u0646 \u0627\u0644\u0633\u0627\u0644\u0628 \u0641\u064a \u0627\u0644\u0642\u0627\u0646\u0648\u0646<\/h5>\r\n <p class=\"text-l text-slate-400\">\u0639\u0646\u062f \u062d\u0633\u0627\u0628 \u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 \u0623\u0648 \u0627\u0644\u0642\u0648\u0629\u060c \u0644\u0627 \u0646\u0639\u0648\u0636 \u0627\u0644\u0633\u0627\u0644\u0628 \u0648\u0646\u0633\u062a\u062e\u062f\u0645\u0647 \u0641\u0642\u0637 \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0627\u062a\u062c\u0627\u0647.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useMemo, useEffect, useRef } = React;\r\n\r\n const ElectricFieldSimulation = () => {\r\n const [scenario, setScenario] = useState(4);\r\n const width = 800; const height = 400;\r\n const charges = useMemo(() => {\r\n const cx = width\/2; const cy = height\/2;\r\n switch(scenario) {\r\n case 0: return [{q:1,x:cx,y:cy}];\r\n case 1: return [{q:-1,x:cx,y:cy}];\r\n case 2: return [{q:1,x:cx-120,y:cy},{q:1,x:cx+120,y:cy}];\r\n case 3: return [{q:1,x:cx-120,y:cy},{q:-1,x:cx+120,y:cy}];\r\n case 4:\r\n const plates=[]; const nc=24; const sp=10;\r\n const sy=cy-(nc*sp)\/2;\r\n for(let i=0;i<=nc;i++){plates.push({q:0.12,x:cx-150,y:sy+i*sp,isPlate:true});plates.push({q:-0.12,x:cx+150,y:sy+i*sp,isPlate:true});}\r\n return plates;\r\n default: return [];\r\n }\r\n }, [scenario]);\r\n\r\n const vectors = useMemo(() => {\r\n const step=25; const al=14; const vecs=[];\r\n for(let x=step\/2;x<width;x+=step){for(let y=step\/2;y<height;y+=step){\r\n let Ex=0,Ey=0,inside=false;\r\n for(let c of charges){let dx=x-c.x,dy=y-c.y,r2=dx*dx+dy*dy,r=Math.sqrt(r2);if(!c.isPlate&&r<20)inside=true;if(c.isPlate&&Math.abs(dx)<10&&Math.abs(y-height\/2)<130)inside=true;if(r2===0)continue;let E=c.q\/r2;Ex+=E*(dx\/r);Ey+=E*(dy\/r);}\r\n if(inside)continue;let mag=Math.sqrt(Ex*Ex+Ey*Ey);if(mag===0)continue;\r\n let nx=Ex\/mag,ny=Ey\/mag,l=Math.min(Math.max(Math.sqrt(mag)*90,0.15),1.0);\r\n const p1x=x-nx*(al\/2),p1y=y-ny*(al\/2),p2x=x+nx*(al\/2),p2y=y+ny*(al\/2);\r\n const a1x=p2x-nx*4-ny*3,a1y=p2y-ny*4+nx*3,a2x=p2x-nx*4+ny*3,a2y=p2y-ny*4-nx*3;\r\n vecs.push({p1x,p1y,p2x,p2y,a1x,a1y,a2x,a2y,scaledMag:l,mag});\r\n }}\r\n return vecs;\r\n }, [charges]);\r\n\r\n return (\r\n <div className=\"bg-slate-900 rounded-3xl p-6 border border-slate-700 flex flex-col items-center justify-center shadow-inner mb-6 w-full\" dir=\"rtl\">\r\n <div className=\"w-full flex flex-col md:flex-row justify-between items-center mb-6 gap-4 border-b border-slate-800 pb-4\">\r\n <h3 className=\"text-white text-xl font-bold flex items-center gap-2\"><span className=\"w-2 h-6 bg-cyan-400 rounded-full\"><\/span>\u0645\u062d\u0627\u0643\u0627\u0629 \u062d\u0642\u0644 \u0627\u0644\u0645\u062a\u062c\u0647\u0627\u062a \u0644\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a<\/h3>\r\n <p className=\"text-l text-slate-400 max-w-l\">\u064a\u0639\u0631\u0636 \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u0645\u062c\u0627\u0644 \u0648\u0634\u062f\u062a\u0647 (\u0639\u0628\u0631 \u0627\u0644\u0633\u0637\u0648\u0639) \u0639\u0646\u062f \u0643\u0644 \u0646\u0642\u0637\u0629 \u0641\u064a \u0627\u0644\u0641\u0631\u0627\u063a.<\/p>\r\n <\/div>\r\n <div className=\"flex bg-black\/40 rounded-2xl p-1.5 border border-white\/10 mb-6 flex-wrap justify-center w-full gap-1.5 shadow-lg\">\r\n {['\u0634\u062d\u0646\u0629 \u0645\u0648\u062c\u0628\u0629','\u0634\u062d\u0646\u0629 \u0633\u0627\u0644\u0628\u0629','\u0634\u062d\u0646\u062a\u0627\u0646 \u0645\u0648\u062c\u0628\u062a\u0627\u0646','\u062b\u0646\u0627\u0626\u064a \u0642\u0637\u0628 (+ \u0648 -)','\u0635\u0641\u064a\u062d\u062a\u0627\u0646 \u0645\u062e\u062a\u0644\u0641\u062a\u0627 \u0627\u0644\u0634\u062d\u0646\u0629'].map((l,i)=>(\r\n <button key={i} onClick={()=>setScenario(i)} className={`px-4 py-2.5 rounded-xl transition-all duration-300 font-bold text-l md:text-l flex-1 ${scenario===i?'bg-indigo-500 text-white shadow-[0_0_15px_rgba(99,102,241,0.5)]':'text-slate-400 hover:text-white hover:bg-slate-800'}`}>{l}<\/button>\r\n ))}\r\n <\/div>\r\n <div className=\"w-full relative rounded-2xl overflow-hidden border border-slate-700\/50 bg-slate-800 shadow-2xl\">\r\n <svg viewBox={`0 0 ${width} ${height}`} className=\"w-full h-auto block select-none max-h-[500px]\">\r\n <g>{vectors.map((v,i)=>(<g key={i} style={{opacity:v.scaledMag}} className=\"transition-opacity duration-300\"><line x1={v.p1x} y1={v.p1y} x2={v.p2x} y2={v.p2y} stroke={v.scaledMag>0.8?\"#22d3ee\":\"#94a3b8\"} strokeWidth={v.scaledMag>0.8?\"2\":\"1.5\"} \/><polygon points={`${v.p2x},${v.p2y} ${v.a1x},${v.a1y} ${v.a2x},${v.a2y}`} fill={v.scaledMag>0.8?\"#22d3ee\":\"#94a3b8\"} \/><\/g>))}<\/g>\r\n <g>{charges.filter(c=>!c.isPlate).map((c,i)=>(<g key={i}><circle cx={c.x} cy={c.y} r=\"40\" fill={c.q>0?'rgba(244,63,94,0.15)':'rgba(14,165,233,0.15)'} className=\"animate-pulse\" \/><circle cx={c.x} cy={c.y} r=\"25\" fill={c.q>0?'rgba(244,63,94,0.3)':'rgba(14,165,233,0.3)'} \/><circle cx={c.x} cy={c.y} r=\"16\" fill={c.q>0?'#f43f5e':'#0ea5e9'} stroke={c.q>0?'#fda4af':'#7dd3fc'} strokeWidth=\"2.5\" \/><text x={c.x} y={c.y+1} fill=\"#fff\" fontSize=\"22\" fontFamily=\"sans-serif\" textAnchor=\"middle\" dominantBaseline=\"central\" fontWeight=\"bold\">{c.q>0?'+':'-'}<\/text><\/g>))}<\/g>\r\n {scenario===4&&(<g><rect x={width\/2-155} y={height\/2-125} width=\"10\" height=\"250\" fill=\"rgba(244,63,94,0.6)\" stroke=\"#f43f5e\" strokeWidth=\"2\" rx=\"4\" \/><text x={width\/2-170} y={height\/2} fill=\"#fda4af\" fontSize=\"24\" fontWeight=\"bold\" transform={`rotate(-90 ${width\/2-170} ${height\/2})`} textAnchor=\"middle\">+++++++++<\/text><rect x={width\/2+145} y={height\/2-125} width=\"10\" height=\"250\" fill=\"rgba(14,165,233,0.6)\" stroke=\"#0ea5e9\" strokeWidth=\"2\" rx=\"4\" \/><text x={width\/2+175} y={height\/2} fill=\"#7dd3fc\" fontSize=\"24\" fontWeight=\"bold\" transform={`rotate(-90 ${width\/2+175} ${height\/2})`} textAnchor=\"middle\">---------<\/text><\/g>)}\r\n <\/svg>\r\n <div className=\"absolute bottom-4 right-4 bg-black\/60 p-3.5 rounded-xl border border-white\/10 backdrop-blur-md shadow-2xl\">\r\n <div className=\"text-[11px] text-slate-300 flex items-center gap-3 mb-2 font-bold\"><div className=\"flex gap-1\"><span className=\"w-4 h-[2px] bg-cyan-400 shadow-[0_0_8px_#22d3ee] block\"><\/span><\/div>\u0645\u062c\u0627\u0644 \u0642\u0648\u064a<\/div>\r\n <div className=\"text-[11px] text-slate-500 flex items-center gap-3 font-bold\"><div className=\"flex gap-1\"><span className=\"w-4 h-[1.5px] bg-slate-500 block\"><\/span><\/div>\u0645\u062c\u0627\u0644 \u0636\u0639\u064a\u0641<\/div>\r\n {scenario===4&&<div className=\"mt-3 pt-3 border-t border-white\/10 text-[10px] text-cyan-200 italic\">* \u0627\u0644\u0645\u062a\u062c\u0647\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u0635\u0641\u064a\u062d\u062a\u064a\u0646 \u0645\u0646\u062a\u0638\u0645\u0629\u060c \u0648\u062a\u0646\u062d\u0646\u064a \u0639\u0646\u062f \u0627\u0644\u0623\u0637\u0631\u0627\u0641.<\/div>}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const ElectricFlulimulation = () => {\r\n const [shape, setShape] = useState('plane');\r\n const [angle, setAngle] = useState(45);\r\n const [eStrength, setEStrength] = useState(3);\r\n const [areaMult, setAreaMult] = useState(2);\r\n const rad=(angle*Math.PI)\/180;const S_base=80;const S=S_base*Math.sqrt(areaMult);const R=S\/2;\r\n const cx=350;const cy=250;\r\n const project=(x,y,z)=>({x:cx+x*0.9-y*0.5,y:cy-z*0.9+y*0.35});\r\n const nx=Math.cos(rad);const ny=Math.sin(rad);\r\n const cornerVars=[{u:1,v:1},{u:-1,v:1},{u:-1,v:-1},{u:1,v:-1}];\r\n const corners=cornerVars.map(c=>{const u=c.u*R,v=c.v*R;return {x:u*(-Math.sin(rad)),y:u*Math.cos(rad),z:v};});\r\n const planePath=corners.map((c,i)=>{const p=project(c.x,c.y,c.z);return `${i===0?'M':'L'} ${p.x} ${p.y}`;}).join(\" \")+\" Z\";\r\n const planeGridLines=[];\r\n for(let v=-R;v<=R;v+=R\/2){planeGridLines.push({p1:project(R*(-Math.sin(rad)),R*Math.cos(rad),v),p2:project(-R*(-Math.sin(rad)),-R*Math.cos(rad),v)});}\r\n for(let u=-R;u<=R;u+=R\/2){planeGridLines.push({p1:project(u*(-Math.sin(rad)),u*Math.cos(rad),-R),p2:project(u*(-Math.sin(rad)),u*Math.cos(rad),R)});}\r\n const normalOrigin=project(0,0,0);const normalEnd=project(nx*140,ny*140,0);\r\n const eRefEnd=project(140,0,0);const arcRadius=45;const arcPoints=[];\r\n for(let a=0;a<=angle;a+=5){const ra=(a*Math.PI)\/180;const pt=project(Math.cos(ra)*arcRadius,Math.sin(ra)*arcRadius,0);arcPoints.push(`${a===0?'M':'L'} ${pt.x} ${pt.y}`);}\r\n const ptLast=project(Math.cos(rad)*arcRadius,Math.sin(rad)*arcRadius,0);if(angle>0)arcPoints.push(`L ${ptLast.x} ${ptLast.y}`);\r\n const arcPath=arcPoints.join(\" \");const labelRad=((angle\/2)*Math.PI)\/180;\r\n const arcLabelPt=project(Math.cos(labelRad)*(arcRadius+20),Math.sin(labelRad)*(arcRadius+20),0);\r\n const numLines1D=eStrength*2+1;const totalSpan=220;const yVals=[],zVals=[];\r\n for(let i=0;i<numLines1D;i++){const val=-totalSpan\/2+(totalSpan\/Math.max(1,numLines1D-1))*i;yVals.push(val);zVals.push(val);}\r\n let passingCount=0;const fieldLines=[];\r\n yVals.forEach(y=>{zVals.forEach(z=>{let isHit=false,x_in=null,x_out=null,singleX=null;\r\n if(shape==='plane'){if(Math.abs(Math.cos(rad))<0.0001){if(Math.abs(y)<0.0001&&Math.abs(z)<=R){isHit=true;singleX=0;}}else{const u=y\/Math.cos(rad);if(Math.abs(u)<=R*1.01&&Math.abs(z)<=R*1.01){isHit=true;singleX=-y*Math.tan(rad);}}}\r\n else if(shape==='sphere'){const r2=R*R,d2=y*y+z*z;if(d2<=r2){isHit=true;const xo=Math.sqrt(r2-d2);x_in=-xo;x_out=xo;}}\r\n else if(shape==='cube'){if(Math.abs(z)<=R){const EPS=0.0001;let t1_min,t1_max,t2_min,t2_max;if(Math.abs(Math.cos(rad))<EPS){t1_min=-Infinity;t1_max=Infinity;}else{const b1=(-R-y*Math.sin(rad))\/Math.cos(rad),b2=(R-y*Math.sin(rad))\/Math.cos(rad);t1_min=Math.min(b1,b2);t1_max=Math.max(b1,b2);}if(Math.abs(Math.sin(rad))<EPS){t2_min=-Infinity;t2_max=Infinity;}else{const b3=(y*Math.cos(rad)-R)\/Math.sin(rad),b4=(y*Math.cos(rad)+R)\/Math.sin(rad);t2_min=Math.min(b3,b4);t2_max=Math.max(b3,b4);}const min_x=Math.max(t1_min,t2_min),max_x=Math.min(t1_max,t2_max);if(min_x<=max_x){isHit=true;x_in=min_x;x_out=max_x;}}}\r\n if(isHit)passingCount++;fieldLines.push({id:`${y}-${z}`,y,z,isHit,start:project(-360,y,z),end:project(360,y,z),ptIn:isHit&&x_in!==null?project(x_in,y,z):null,ptOut:isHit&&x_out!==null?project(x_out,y,z):null,ptSingle:isHit&&singleX!==null?project(singleX,y,z):null});\r\n });});\r\n const totalLines=yVals.length*zVals.length;\r\n const linesBehind=fieldLines.filter(l=>l.y>0);const linesFront=fieldLines.filter(l=>l.y<=0);\r\n const isClosed=shape==='cube'||shape==='sphere';let fluxValStr=\"0.0\";\r\n if(!isClosed){const v=eStrength*areaMult*Math.cos(rad);fluxValStr=(v>0?\"+\":\"\")+v.toFixed(1);}\r\n const FlowLineRenderer=({lines})=>(<g>{lines.map(line=>{let activeColor=\"#22d3ee\";if(shape==='plane'&&angle>90)activeColor=\"#f43f5e\";const color=line.isHit?activeColor:\"#334155\",sw=line.isHit?2:1.5;const ax=line.end.x-line.start.x,ay=line.end.y-line.start.y,mag=Math.sqrt(ax*ax+ay*ay),nvx=ax\/mag,nvy=ay\/mag;return(<g key={line.id} style={{transition:'all 0.3s ease'}}><line x1={line.start.x} y1={line.start.y} x2={line.end.x} y2={line.end.y} stroke={color} strokeWidth={sw} opacity={line.isHit?1:0.4} \/>{[0.25,0.5,0.75].map(ratio=>{let axp=line.start.x+ax*ratio,ayp=line.start.y+ay*ratio;return <polygon key={`arr-${ratio}`} points={`${axp},${ayp} ${axp-nvx*10-nvy*4},${ayp-nvy*10+nvx*4} ${axp-nvx*10+nvy*4},${ayp-nvy*10-nvx*4}`} fill={color} opacity={line.isHit?1:0.4} \/>;})}{line.ptSingle&&<circle cx={line.ptSingle.x} cy={line.ptSingle.y} r=\"2.5\" fill=\"#fff\" \/>}{line.ptIn&&<circle cx={line.ptIn.x} cy={line.ptIn.y} r=\"3\" fill=\"#f43f5e\" \/>}{line.ptOut&&<circle cx={line.ptOut.x} cy={line.ptOut.y} r=\"3\" fill=\"#34d399\" \/>}<\/g>);})}<\/g>);\r\n\r\n return (\r\n <div className=\"bg-slate-900 rounded-3xl border border-slate-700\/50 shadow-2xl overflow-hidden font-sans select-none\" dir=\"rtl\">\r\n <div className=\"bg-slate-800\/50 p-4 border-b border-slate-700 flex justify-between items-center\">\r\n <div className=\"flex items-center gap-3\"><div className=\"p-2 bg-indigo-500\/20 rounded-lg\"><span className=\"text-indigo-400 text-lg\">#<\/span><\/div><div><h4 className=\"text-l font-bold text-white\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0627\u0644\u062a\u062f\u0641\u0642 \u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0626\u064a \u0639\u0628\u0631 \u0627\u0644\u0623\u0633\u0637\u062d<\/h4><p className=\"text-[10px] text-slate-400 italic\">\u0633\u0637\u062d \u0645\u0641\u062a\u0648\u062d \u0648\u0645\u063a\u0644\u0642 \u0645\u0639 \u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062c\u0627\u0644 \u0627\u0644\u0645\u0646\u062a\u0638\u0645<\/p><\/div><\/div>\r\n <button onClick={()=>{setShape('plane');setAngle(0);setEStrength(3);setAreaMult(2);}} className=\"p-1.5 hover:bg-white\/5 border border-transparent hover:border-slate-700 rounded-lg transition-all text-slate-400 hover:text-white flex items-center gap-2 text-l\"><span>\u0627\u0639\u0627\u062f\u0629<\/span> \u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0644\u0635\u0641\u0631<\/button>\r\n <\/div>\r\n <div className=\"flex flex-col lg:flex-row p-6 gap-6\">\r\n <div className=\"flex-1 relative bg-[#0b1120] rounded-3xl border border-white\/5 overflow-hidden shadow-inner flex items-center justify-center min-h-[450px]\">\r\n <div className=\"absolute top-4 left-4 z-10\"><div className=\"text-[10px] text-slate-400 font-bold mb-2\">\u0627\u062e\u062a\u0631 \u0634\u0643\u0644 \u0627\u0644\u0633\u0637\u062d<\/div><div className=\"flex bg-slate-800\/80 backdrop-blur-md rounded-xl border border-slate-700 overflow-hidden shadow-lg p-1\">{[{id:'plane',label:'\u0645\u0633\u062a\u0648\u064a'},{id:'cube',label:'\u0645\u0643\u0639\u0628'},{id:'sphere',label:'\u0643\u0631\u0629'}].map(s=>(<button key={s.id} onClick={()=>{setShape(s.id);if(s.id==='sphere')setAngle(0);else setAngle(45);}} className={`px-3 py-1.5 text-l font-bold rounded-lg transition-colors border ${shape===s.id?'bg-cyan-500\/20 text-cyan-300 border-cyan-500\/30':'text-slate-400 hover:bg-white\/5 border-transparent'}`}>{s.label}<\/button>))}<\/div><\/div>\r\n <svg viewBox=\"0 0 700 500\" className=\"w-full h-full max-w-full drop-shadow-2xl\">\r\n <FlowLineRenderer lines={linesBehind} \/>\r\n <g className=\"transition-all duration-300 origin-center\">\r\n {shape==='plane'&&<g><path d={planePath} fill=\"rgba(34,211,238,0.15)\" stroke=\"#22d3ee\" strokeWidth=\"2\" \/>{planeGridLines.map((line,i)=><line key={i} x1={line.p1.x} y1={line.p1.y} x2={line.p2.x} y2={line.p2.y} stroke=\"#67e8f9\" strokeWidth=\"1\" strokeOpacity=\"0.3\" \/>)}<\/g>}\r\n {shape==='cube'&&<g><path d={`M ${project(-R,-R,-R).x} ${project(-R,-R,-R).y} L ${project(R,-R,-R).x} ${project(R,-R,-R).y} L ${project(R,R,-R).x} ${project(R,R,-R).y} L ${project(-R,R,-R).x} ${project(-R,R,-R).y} Z`} fill=\"rgba(168,85,247,0.15)\" stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><path d={`M ${project(-R,-R,R).x} ${project(-R,-R,R).y} L ${project(R,-R,R).x} ${project(R,-R,R).y} L ${project(R,R,R).x} ${project(R,R,R).y} L ${project(-R,R,R).x} ${project(-R,R,R).y} Z`} fill=\"rgba(168,85,247,0.25)\" stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><line x1={project(-R,-R,-R).x} y1={project(-R,-R,-R).y} x2={project(-R,-R,R).x} y2={project(-R,-R,R).y} stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><line x1={project(R,-R,-R).x} y1={project(R,-R,-R).y} x2={project(R,-R,R).x} y2={project(R,-R,R).y} stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><line x1={project(R,R,-R).x} y1={project(R,R,-R).y} x2={project(R,R,R).x} y2={project(R,R,R).y} stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><line x1={project(-R,R,-R).x} y1={project(-R,R,-R).y} x2={project(-R,R,R).x} y2={project(-R,R,R).y} stroke=\"#a855f7\" strokeWidth=\"2.5\" \/><\/g>}\r\n {shape==='sphere'&&<circle cx={cx} cy={cy} r={R*0.9} fill=\"rgba(16,185,129,0.15)\" stroke=\"#10b981\" strokeWidth=\"3\" \/>}\r\n <\/g>\r\n <FlowLineRenderer lines={linesFront} \/>\r\n <g className=\"transition-all duration-300\">\r\n <line x1={normalOrigin.x} y1={normalOrigin.y} x2={eRefEnd.x} y2={eRefEnd.y} stroke=\"#22d3ee\" strokeWidth=\"1.5\" strokeDasharray=\"4 4\" \/><text x={eRefEnd.x+5} y={eRefEnd.y} fill=\"#22d3ee\" fontSize=\"12\" fontWeight=\"bold\">\u0627\u0644\u0645\u062c\u0627\u0644 (E)<\/text>\r\n {angle>0&&<g><path d={`${arcPath} L ${normalOrigin.x} ${normalOrigin.y} Z`} fill=\"rgba(250,204,21,0.1)\" \/><path d={arcPath} fill=\"none\" stroke=\"#facc15\" strokeWidth=\"2\" strokeDasharray=\"3 3\"\/><text x={arcLabelPt.x} y={arcLabelPt.y} fill=\"#facc15\" fontSize=\"14\" fontWeight=\"bold\" dominantBaseline=\"middle\" textAnchor=\"middle\">\u03b8={angle}\u00b0<\/text><\/g>}\r\n <line x1={normalOrigin.x} y1={normalOrigin.y} x2={normalEnd.x} y2={normalEnd.y} stroke=\"#f43f5e\" strokeWidth=\"3\" \/><text x={normalEnd.x} y={normalEnd.y-15} fill=\"#fff\" fontSize=\"14\" fontWeight=\"bold\">{shape==='plane'?'\u0627\u0644\u0639\u0645\u0648\u062f\u064a \u0644\u0644\u0645\u0633\u062a\u0648\u064a':'\u062f\u0648\u0631\u0627\u0646 \u0627\u0644\u0645\u062c\u0633\u0645'}<\/text>\r\n <\/g>\r\n <\/svg>\r\n <div className=\"absolute bottom-4 left-4 flex flex-col gap-2 pointer-events-none bg-slate-900\/90 border border-slate-700\/50 p-4 rounded-xl backdrop-blur-md shadow-xl text-l\">\r\n {shape==='plane'?<><div className=\"flex items-center gap-2 font-bold text-slate-200\"><span className=\"w-3 h-3 rounded-full bg-cyan-400\"><\/span> \u0646\u0642\u0627\u0637\u0639 \u0627\u0644\u062a\u062e\u0631\u064a\u0645<\/div><div className=\"flex items-center gap-2 text-slate-400\"><span className=\"w-3 h-[2px] bg-slate-500\"><\/span> \u062e\u0637\u0648\u0637 \u0644\u0645 \u062a\u062e\u062a\u0631\u0642<\/div><\/>:<><div className=\"flex items-center gap-2 font-bold text-rose-400\"><span className=\"w-3 h-3 rounded-full bg-rose-500\"><\/span> \u0646\u0642\u0627\u0637 \u0627\u0644\u062f\u062e\u0648\u0644<\/div><div className=\"flex items-center gap-2 font-bold text-emerald-400\"><span className=\"w-3 h-3 rounded-full bg-emerald-500\"><\/span> \u0646\u0642\u0627\u0637 \u0627\u0644\u062e\u0631\u0648\u062c<\/div><\/>}\r\n <\/div>\r\n <\/div>\r\n <div className=\"w-full lg:w-[320px] flex flex-col gap-4 text-right\">\r\n <div className=\"bg-slate-800\/40 p-4 rounded-3xl border border-white\/5 space-y-4 shadow-xl\">\r\n <div className=\"text-[12px] font-bold text-slate-300 border-b border-slate-700\/50 pb-2\">\u0639\u0648\u0627\u0645\u0644 \u0627\u0644\u062a\u062f\u0641\u0642<\/div>\r\n <div className=\"space-y-2\"><div className=\"flex justify-between items-center text-l\"><label className=\"font-bold text-cyan-300\">\u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 (E)<\/label><span className=\"font-mono text-cyan-400\">{eStrength} N\/C<\/span><\/div><input type=\"range\" className=\"w-full h-1.5 bg-slate-700 rounded-lg accent-cyan-400\" min=\"1\" max=\"5\" step=\"1\" value={eStrength} onChange={(e)=>setEStrength(parseInt(e.target.value))} \/><\/div>\r\n <div className=\"space-y-2\"><div className=\"flex justify-between items-center text-l\"><label className=\"font-bold text-indigo-300\">{isClosed?'\u062d\u062c\u0645 \u0627\u0644\u0645\u062c\u0633\u0645':'\u0627\u0644\u0645\u0633\u0627\u062d\u0629 (A)'}<\/label><span className=\"font-mono text-indigo-400\">{areaMult}x<\/span><\/div><input type=\"range\" className=\"w-full h-1.5 bg-slate-700 rounded-lg accent-indigo-400\" min=\"1\" max=\"4\" step=\"1\" value={areaMult} onChange={(e)=>setAreaMult(parseInt(e.target.value))} \/><\/div>\r\n <div className=\"space-y-2 pt-2 border-t border-slate-700\/50\"><div className=\"flex justify-between items-center text-l\"><label className=\"font-bold text-yellow-400\">\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u062f\u0648\u0631\u0627\u0646<\/label><span className=\"font-mono text-yellow-400\">{angle}\u00b0<\/span><\/div><input type=\"range\" className=\"w-full h-1.5 bg-slate-700 rounded-lg accent-yellow-400 disabled:opacity-50\" min=\"0\" max=\"180\" step=\"1\" value={angle} onChange={(e)=>setAngle(parseInt(e.target.value))} disabled={shape==='sphere'} \/><\/div>\r\n <\/div>\r\n <div className=\"bg-slate-800\/40 p-4 rounded-3xl border border-white\/5 space-y-4 shadow-xl\">\r\n <h5 className=\"text-[12px] font-bold text-slate-300\">\u0627\u0644\u0645\u062d\u0635\u0644\u0629 \u0627\u0644\u0631\u064a\u0627\u0636\u064a\u0629<\/h5>\r\n <div className=\"bg-black\/40 p-3 rounded-2xl border border-white\/5 font-mono text-center space-y-3\">\r\n {!isClosed?<div className=\"flex items-center justify-center gap-1.5 text-[13px] text-slate-300 flex-wrap\"><span className=\"text-white font-bold\">\u03a6<\/span>=<span className=\"text-cyan-400\">{eStrength}<\/span>\u00d7<span className=\"text-indigo-400\">{areaMult}<\/span>\u00d7<span className=\"text-yellow-400\">cos({angle}\u00b0)<\/span><\/div>:<div className=\"flex items-center justify-center gap-1.5 text-[12px] text-slate-300\"><span className=\"text-emerald-400\">\u03a6_out (+{passingCount})<\/span>+<span className=\"text-rose-400\">\u03a6_in (-{passingCount})<\/span><\/div>}\r\n <div className=\"text-2xl font-bold flex items-center justify-center gap-2\"><span className=\"text-slate-400 text-[11px]\">Net =<\/span><span className={isClosed?\"text-slate-200\":(parseFloat(fluxValStr)<0?\"text-rose-400\":\"text-emerald-400\")}>{fluxValStr}<\/span><\/div>\r\n <\/div>\r\n <div className=\"grid grid-cols-2 gap-2\"><div className=\"bg-slate-900\/50 p-2 rounded-xl border border-slate-700 text-center\"><div className=\"text-[9px] text-slate-500\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u062e\u0637\u0648\u0637<\/div><div className=\"text-l font-mono font-bold text-slate-300\">{totalLines}<\/div><\/div><div className=\"bg-cyan-500\/10 p-2 rounded-xl border border-cyan-500\/20 text-center\"><div className=\"text-[9px] text-cyan-500\">{isClosed?'\u062e\u0637\u0648\u0637 \u062a\u0639\u0628\u0631':'\u0627\u0644\u062e\u0637\u0648\u0637 \u0627\u0644\u0645\u062e\u062a\u0631\u0642\u0629'}<\/div><div className=\"text-l font-mono font-bold text-cyan-400\">{passingCount}<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const GaussLawSimulation = () => {\r\n const [charges, setCharges] = useState([{id:1,x:50,y:50,q:2},{id:2,x:20,y:80,q:-1},{id:3,x:70,y:55,q:-3}]);\r\n const [nextQ, setNextQ] = useState(3);\r\n const addCharge=(e)=>{const rect=e.currentTarget.getBoundingClientRect();const x=((e.clientX-rect.left)\/rect.width)*100;const y=((e.clientY-rect.top)\/rect.height)*100;if(nextQ!==0)setCharges(prev=>[...prev,{id:Date.now(),x,y,q:nextQ}]);};\r\n const removeCharge=(id)=>setCharges(prev=>prev.filter(c=>c.id!==id));\r\n const clearAll=()=>setCharges([]);\r\n const sphereR=30,cxG=50,cyG=50;\r\n const q_in=charges.reduce((acc,c)=>{const dist=Math.sqrt((c.x-cxG)**2+(c.y-cyG)**2);return dist<=sphereR?acc+c.q:acc;},0);\r\n const totalCharges=charges.length;\r\n\r\n return (\r\n <div className=\"bg-slate-900\/80 rounded-3xl border border-slate-700\/50 shadow-2xl p-6 flex flex-col lg:flex-row gap-8 font-sans select-none\" dir=\"rtl\">\r\n <div className=\"flex-1 relative bg-[#0b1120] rounded-3xl border border-white\/5 overflow-hidden shadow-inner flex flex-col items-center justify-center min-h-[400px]\">\r\n <div className=\"absolute top-4 left-4 right-4 flex justify-between items-start z-10 pointer-events-none\">\r\n <div className=\"bg-rose-500\/10 border border-rose-500\/20 px-4 py-2 rounded-2xl backdrop-blur-md shadow-xl\"><p className=\"text-[11px] text-rose-300 font-bold\">\u03a3q_in<\/p><p className=\"text-2xl font-mono font-bold text-white\">{q_in>0?<span className=\"text-emerald-400\">+<\/span>:q_in<0?<span className=\"text-indigo-400\">-<\/span>:null}{Math.abs(q_in)} <span className=\"text-l\">\u03bcC<\/span><\/p><\/div>\r\n <button onClick={clearAll} className=\"pointer-events-auto bg-slate-800\/80 hover:bg-slate-700 border border-slate-600 text-slate-300 px-4 py-2 rounded-xl flex items-center gap-2 text-l font-bold\"><span>\u0627\u0639\u0627\u062f\u0629<\/span> \u062a\u0635\u0641\u064a\u0631<\/button>\r\n <\/div>\r\n <svg viewBox=\"0 0 100 100\" className=\"w-full h-full cursor-crosshair drop-shadow-2xl\" onClick={addCharge}>\r\n <defs><pattern id=\"gauss_g\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"rgba(255,255,255,0.03)\" strokeWidth=\"0.5\"\/><\/pattern><\/defs>\r\n <rect width=\"100\" height=\"100\" fill=\"url(#gauss_g)\" \/>\r\n <circle cx={cxG} cy={cyG} r={sphereR} fill=\"rgba(244,63,94,0.05)\" stroke=\"#f43f5e\" strokeWidth=\"0.8\" strokeDasharray=\"2,2\" \/>\r\n <text x={cxG} y={cyG-sphereR-3} textAnchor=\"middle\" fill=\"#f43f5e\" className=\"text-[4px] font-bold\">\u0633\u0637\u062d \u063a\u0627\u0648\u0633<\/text>\r\n {charges.map(c=>{const dist=Math.sqrt((c.x-cxG)**2+(c.y-cyG)**2);const isInside=dist<=sphereR;const color=c.q>0?\"#10b981\":\"#818cf8\";return(<g key={c.id} onContextMenu={(e)=>{e.preventDefault();removeCharge(c.id);}}>{isInside&&<circle cx={c.x} cy={c.y} r=\"6\" fill={color} opacity=\"0.15\" className=\"animate-pulse\" \/>}<circle cx={c.x} cy={c.y} r=\"3.5\" fill={color} className=\"cursor-pointer hover:scale-110\" stroke=\"#fff\" strokeWidth=\"0.5\" onClick={(e)=>{e.stopPropagation();removeCharge(c.id);}} \/><text x={c.x} y={c.y+1} textAnchor=\"middle\" fill=\"#fff\" className=\"text-[3.5px] font-bold font-mono\">{c.q>0?'+':''}{c.q}<\/text>{!isInside&&<circle cx={c.x} cy={c.y} r=\"8\" fill=\"none\" stroke=\"#475569\" strokeWidth=\"0.3\" strokeDasharray=\"1,1\" \/>}<\/g>);})}\r\n <\/svg>\r\n <div className=\"absolute bottom-4 text-center pointer-events-none\"><div className=\"inline-flex items-center gap-1.5 bg-black\/60 border border-white\/10 px-4 py-2 rounded-full text-[11px] font-bold text-slate-300\"><span>#<\/span>\u0627\u0646\u0642\u0631 \u0644\u0625\u0636\u0627\u0641\u0629 \u0634\u062d\u0646\u0629\u060c \u0627\u0636\u063a\u0637 \u0639\u0644\u064a\u0647\u0627 \u0644\u062d\u0630\u0641\u0647\u0627<\/div><\/div>\r\n <\/div>\r\n <div className=\"w-full lg:w-[340px] flex flex-col gap-5\">\r\n <div className=\"bg-slate-800\/60 p-5 rounded-3xl border border-white\/5 space-y-5 shadow-xl\">\r\n <h4 className=\"text-l font-bold text-cyan-300 border-b border-cyan-500\/20 pb-2\">\u0623\u062f\u0627\u0629 \u0625\u062f\u0631\u0627\u062c \u0627\u0644\u0634\u062d\u0646\u0627\u062a<\/h4>\r\n <div className=\"space-y-4\"><div className=\"flex justify-between items-center text-l\"><label className=\"text-slate-300 font-bold\">\u0642\u064a\u0645\u0629 \u0627\u0644\u0634\u062d\u0646\u0629 (q)<\/label><span className={`font-mono font-bold px-3 py-1 rounded-lg text-l ${nextQ>0?'bg-emerald-500\/20 text-emerald-400 border-emerald-500\/30':'bg-indigo-500\/20 text-indigo-300 border-indigo-500\/30'}`}>{nextQ>0?`+${nextQ}`:nextQ} \u03bcC<\/span><\/div><input type=\"range\" min=\"-5\" max=\"5\" step=\"1\" value={nextQ} onChange={(e)=>{const v=parseInt(e.target.value);if(v!==0)setNextQ(v);}} className={`w-full h-2 rounded-lg ${nextQ>0?'accent-emerald-400':'accent-indigo-400'}`} \/><\/div>\r\n <div className=\"grid grid-cols-2 gap-3 pt-4 border-t border-white\/5\"><div className=\"bg-black\/30 p-3 rounded-2xl border border-white\/5 text-center\"><div className=\"text-[10px] text-slate-400\">\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0634\u062d\u0646\u0627\u062a<\/div><div className=\"text-xl font-mono font-bold text-slate-200\">{totalCharges}<\/div><\/div><div className={`p-3 rounded-2xl border text-center ${q_in===0?'bg-black\/30':q_in>0?'bg-emerald-500\/10 border-emerald-500\/20':'bg-indigo-500\/10 border-indigo-500\/20'}`}><div className=\"text-[10px] text-slate-300\">\u0627\u0644\u0645\u062c\u0645\u0648\u0639<\/div><div className={`text-xl font-mono font-bold ${q_in===0?'text-slate-400':q_in>0?'text-emerald-400':'text-indigo-400'}`}>{q_in>0?'+':''}{q_in}<\/div><\/div><\/div>\r\n <\/div>\r\n <div className=\"bg-slate-800\/60 p-5 rounded-3xl border border-white\/5 space-y-4 shadow-xl\">\r\n <h4 className=\"text-l font-bold text-rose-300 border-b border-rose-500\/20 pb-2\">\u0627\u0633\u062a\u0646\u062a\u0627\u062c \u0627\u0644\u062a\u062f\u0641\u0642<\/h4>\r\n <div className={`p-4 rounded-2xl border flex flex-col items-center justify-center min-h-[90px] text-center ${q_in===0?'bg-black\/40 border-slate-700':q_in>0?'bg-emerald-900\/20 border-emerald-500\/30':'bg-indigo-900\/20 border-indigo-500\/30'}`}>\r\n {q_in===0?<div className=\"text-slate-200 font-bold text-lg\">\u0635\u0627\u0641\u064a \u0627\u0644\u062a\u062f\u0641\u0642 = 0<\/div>:q_in>0?<div className=\"text-emerald-400 font-bold text-lg\">\u062a\u062f\u0641\u0642 \u0644\u0644\u062e\u0627\u0631\u062c (+)<\/div>:<div className=\"text-indigo-400 font-bold text-lg\">\u062a\u062f\u0641\u0642 \u0644\u0644\u062f\u0627\u062e\u0644 (-)<\/div>}\r\n <\/div>\r\n <div className=\"bg-black\/40 p-4 rounded-2xl border border-white\/5\"><div className=\"flex justify-between text-[11px] text-slate-400\"><span>\u03a6 = \u03a3q_in\/\u03b5\u2080<\/span><\/div><div className=\"flex justify-center font-mono text-lg bg-slate-900\/50 p-2.5 rounded-xl border border-slate-700 mt-2\" dir=\"ltr\"><span className={`${q_in===0?'text-slate-500':q_in>0?'text-emerald-400':'text-indigo-400'} font-bold`}>{q_in===0?\"0.00\":`${q_in>0?'+':'-'}${Math.abs((q_in\/8.85)*10).toFixed(2)}\u00d710\u2075`}<\/span><span className=\"text-[10px] text-slate-500 ml-2\">N\u00b7m\u00b2\/C<\/span><\/div><\/div>\r\n <\/div>\r\n <div className=\"bg-cyan-500\/10 p-4 rounded-2xl border border-cyan-500\/20 mt-auto\"><h5 className=\"text-[11px] font-bold text-cyan-400\">\u0644\u0645\u0627\u0630\u0627 \u0646\u062a\u062c\u0627\u0647\u0644 \u0627\u0644\u062e\u0627\u0631\u062c\u061f<\/h5><p className=\"text-[10px] text-cyan-100\/70\">\u0627\u0644\u0634\u062d\u0646\u0627\u062a \u062e\u0627\u0631\u062c \u0633\u0637\u062d \u063a\u0627\u0648\u0633 \u062a\u062f\u062e\u0644 \u0645\u0646 \u062c\u0647\u0629 \u0648\u062a\u062e\u0631\u062c \u0645\u0646 \u0623\u062e\u0631\u0649\u060c \u0645\u062d\u0635\u0644\u062a\u0647\u0627 \u0635\u0641\u0631.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const ParallelPlateMotionSimulation = () => {\r\n const [particleType, setParticleType] = useState('proton');\r\n const [fieldStrength, setFieldStrength] = useState(100);\r\n const [initialVelX, setInitialVelX] = useState(2);\r\n const [isPlaying, setIsPlaying] = useState(false);\r\n const [pos, setPos] = useState({x:5,y:50});\r\n const [vel, setVel] = useState({x:2,y:0});\r\n const [time, setTime] = useState(0);\r\n const [trail, setTrail] = useState([]);\r\n const requestRef = useRef(null);\r\n const lastTimeRef = useRef(null);\r\n const massRatio = particleType==='proton'?2.5:0.5;\r\n const charge = particleType==='proton'?1:-1;\r\n const acceleration = (charge*fieldStrength)\/(massRatio*1000);\r\n\r\n useEffect(()=>{if(!isPlaying&&time===0)setVel(v=>({...v,x:initialVelX}));},[initialVelX,isPlaying,time]);\r\n\r\n useEffect(()=>{if(!isPlaying){lastTimeRef.current=undefined;return;}let shouldStop=false;const animate=(timeNow)=>{if(lastTimeRef.current!==undefined){const dt=(timeNow-lastTimeRef.current)\/16;setPos(prev=>{const newY=prev.y+vel.y*dt+0.5*acceleration*dt*dt;const newX=prev.x+vel.x*dt;if(newY<=20||newY>=80||newX>=95){shouldStop=true;return prev;}setTrail(t=>[...t,{x:newX,y:newY}]);setVel(v=>({...v,y:v.y+acceleration*dt}));return {x:newX,y:newY};});if(!shouldStop)setTime(t=>t+dt);}if(!shouldStop){lastTimeRef.current=timeNow;requestRef.current=requestAnimationFrame(animate);}else setIsPlaying(false);};requestRef.current=requestAnimationFrame(animate);return()=>{if(requestRef.current)cancelAnimationFrame(requestRef.current);};},[isPlaying,acceleration,vel.x,vel.y]);\r\n\r\n const handleReset=()=>{setIsPlaying(false);setPos({x:5,y:50});setVel({x:initialVelX,y:0});setTime(0);setTrail([]);};\r\n const trailPath=trail.length>0?`M 5,50 L ${trail.map(p=>`${p.x},${p.y}`).join(' L ')}`:'';\r\n\r\n return (\r\n <div className=\"bg-slate-900 border border-slate-700\/80 rounded-3xl overflow-hidden shadow-2xl flex flex-col font-sans\" dir=\"rtl\">\r\n <div className=\"bg-slate-800\/80 border-b border-white\/5 p-4 flex flex-col l:flex-row gap-4 justify-between items-center\">\r\n <div className=\"flex items-center gap-3\"><div className=\"w-10 h-10 rounded-xl bg-blue-500\/20 text-blue-400 flex items-center justify-center\"><span>#<\/span><\/div><div><h3 className=\"font-bold text-white text-l\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0645\u0633\u0627\u0631 \u062c\u0633\u064a\u0645 \u0645\u0634\u062d\u0648\u0646<\/h3><p className=\"text-[11px] text-slate-400\">\u062a\u0627\u0628\u0639 \u062d\u0631\u0643\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646 \u0648\u0627\u0644\u0628\u0631\u0648\u062a\u0648\u0646<\/p><\/div><\/div>\r\n <div className=\"flex gap-2\"><button onClick={()=>{setParticleType('proton');handleReset();}} className={`px-4 py-2 rounded-xl text-l font-bold transition-all border ${particleType==='proton'?'bg-rose-500\/20 text-rose-400 border-rose-500\/30':'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}>\u0628\u0631\u0648\u062a\u0648\u0646 (+)<\/button><button onClick={()=>{setParticleType('electron');handleReset();}} className={`px-4 py-2 rounded-xl text-l font-bold transition-all border ${particleType==='electron'?'bg-blue-500\/20 text-blue-400 border-blue-500\/30':'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}>\u0625\u0644\u0643\u062a\u0631\u0648\u0646 (-)<\/button><\/div>\r\n <\/div>\r\n <div className=\"relative w-full aspect-[2\/1] min-h-[250px] bg-[#0B1120] overflow-hidden flex items-center justify-center\">\r\n <div className=\"absolute inset-0 opacity-[0.03]\" style={{backgroundImage:'linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px)',backgroundSize:'20px 20px'}}><\/div>\r\n <div className=\"absolute top-0 left-0 w-full h-[20%] bg-gradient-to-b from-rose-500\/10 to-rose-500\/5 border-b border-rose-500\/30 flex\"><div className=\"w-full text-center mt-2 font-bold text-rose-500\/30 tracking-[0.5em] text-l\">++++++++++++<\/div><\/div>\r\n <div className=\"absolute bottom-0 left-0 w-full h-[20%] bg-gradient-to-t from-blue-500\/10 to-blue-500\/5 border-t border-blue-500\/30 flex items-end\"><div className=\"w-full text-center mb-2 font-bold text-blue-500\/30 tracking-[0.5em] text-l\">------------<\/div><\/div>\r\n <svg viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" className=\"absolute inset-0 w-full h-full pointer-events-none\">\r\n <defs><marker id=\"fa_pp\" markerWidth=\"4\" markerHeight=\"4\" refX=\"2\" refY=\"2\" orient=\"auto\"><path d=\"M0,0 L4,2 L0,4 Z\" fill=\"rgba(244,63,94,0.3)\"\/><\/marker><\/defs>\r\n <g style={{opacity:0.1+(fieldStrength\/200)*0.5}}>{[10,20,30,40,50,60,70,80,90].map(x=><line key={x} x1={x} y1=\"22\" x2={x} y2=\"76\" stroke=\"rgba(244,63,94,0.3)\" strokeWidth=\"0.4\" markerEnd=\"url(#fa_pp)\"\/>)}<\/g>\r\n {trailPath&&<path d={trailPath} fill=\"none\" stroke={particleType==='proton'?'#f43f5e':'#3b82f6'} strokeWidth=\"1\" strokeDasharray=\"2,1\" className=\"opacity-60\"\/>}\r\n <\/svg>\r\n <div className={`absolute w-5 h-5 rounded-full shadow-lg flex items-center justify-center text-[10px] font-bold text-white z-20 pointer-events-none ${particleType==='proton'?'bg-rose-500':'bg-blue-500'}`} style={{left:`${pos.x}%`,top:`${pos.y}%`,transform:'translate(-50%,-50%)'}}>{particleType==='proton'?'+':'-'}<\/div>\r\n <div className=\"absolute bottom-[22%] left-4 bg-slate-900\/80 backdrop-blur-l border border-white\/10 rounded-xl p-3 flex flex-col gap-1 text-[10px] text-slate-300 font-mono pointer-events-none shadow-xl min-w-[120px] direction-ltr text-left\"><div className=\"flex justify-between\"><span>X:<\/span><span className=\"text-white\">{pos.x.toFixed(1)}<\/span><\/div><div className=\"flex justify-between\"><span>Vy:<\/span><span className=\"text-white\">{(vel.y*10).toFixed(1)}<\/span><\/div><div className=\"flex justify-between border-t border-white\/10 pt-1 mt-1\"><span>Time:<\/span><span className=\"text-emerald-400\">{(time\/10).toFixed(2)}s<\/span><\/div><\/div>\r\n <\/div>\r\n <div className=\"bg-slate-800 p-5 grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n <div className=\"flex flex-col justify-center items-center gap-3 border-b md:border-b-0 md:border-l border-white\/5 pb-5 md:pb-0\">\r\n <div className=\"flex gap-3\"><button onClick={handleReset} className=\"w-12 h-12 flex items-center justify-center bg-slate-700\/50 hover:bg-slate-700 text-slate-300 rounded-full\"><span>\u0627\u0639\u0627\u062f\u0629<\/span><\/button><button onClick={()=>setIsPlaying(!isPlaying)} className={`w-12 h-12 flex items-center justify-center rounded-full border shadow-lg ${isPlaying?'bg-amber-500\/20 text-amber-500':'bg-emerald-500\/20 text-emerald-400'}`}>{isPlaying?<span>\u0627\u064a\u0642\u0627\u0641<\/span>:<span>\u062a\u0634\u063a\u064a\u0644<\/span>}<\/button><\/div>\r\n <span className=\"text-l font-bold text-slate-400\">{isPlaying?'\u0625\u064a\u0642\u0627\u0641':'\u062a\u0634\u063a\u064a\u0644'}<\/span>\r\n <\/div>\r\n <div className=\"col-span-1 md:col-span-2 grid grid-cols-1 l:grid-cols-2 gap-5\">\r\n <div className=\"space-y-3 bg-slate-900\/50 p-4 rounded-2xl border border-white\/5\"><div className=\"flex justify-between\"><label className=\"text-l text-slate-300 font-bold\">\u0627\u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0623\u0641\u0642\u064a\u0629<\/label><span className=\"text-l font-mono text-blue-400 bg-blue-500\/10 px-2 py-0.5 rounded\" dir=\"ltr\">{initialVelX}.0 m\/s<\/span><\/div><input type=\"range\" min=\"1\" max=\"5\" step=\"0.5\" value={initialVelX} onChange={(e)=>{setInitialVelX(parseFloat(e.target.value));handleReset();}} className=\"w-full accent-blue-500 h-1.5 rounded-lg\"\/><\/div>\r\n <div className=\"space-y-3 bg-slate-900\/50 p-4 rounded-2xl border border-white\/5\"><div className=\"flex justify-between\"><label className=\"text-l text-slate-300 font-bold\">\u0634\u062f\u0629 \u0627\u0644\u0645\u062c\u0627\u0644 (E)<\/label><span className=\"text-l font-mono text-rose-400 bg-rose-500\/10 px-2 py-0.5 rounded\" dir=\"ltr\">{fieldStrength} N\/C<\/span><\/div><input type=\"range\" min=\"10\" max=\"250\" step=\"10\" value={fieldStrength} onChange={(e)=>{setFieldStrength(parseInt(e.target.value));handleReset();}} className=\"w-full accent-rose-500 h-1.5 rounded-lg\"\/><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n ReactDOM.render(<ElectricFieldSimulation \/>, document.getElementById('electric-field-sim-root'));\r\n ReactDOM.render(<ElectricFlulimulation \/>, document.getElementById('electric-flux-sim-root'));\r\n ReactDOM.render(<GaussLawSimulation \/>, document.getElementById('gauss-law-sim-root'));\r\n ReactDOM.render(<ParallelPlateMotionSimulation \/>, document.getElementById('parallel-plate-motion-sim-root'));\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-18728","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18728","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=18728"}],"version-history":[{"count":1,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18728\/revisions"}],"predecessor-version":[{"id":18729,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/18728\/revisions\/18729"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=18728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}