From ec9892ad62f3bd6a1a7c9faf2505bc861a48fddd Mon Sep 17 00:00:00 2001
From: altaf-creator <athaalaa@gmail.com>
Date: Sat, 2 Sep 2023 16:23:18 +0700
Subject: New translation, new physics page

---
 lessons/biologi/reproduction/introduction.html    |   8 +-
 lessons/fisika/atom/atom.html                     |   6 +-
 lessons/fisika/index.html                         |   3 +-
 lessons/fisika/static-electricity/coulomb.html    |  82 ++++++++-
 lessons/fisika/static-electricity/id-coulomb.html | 193 ++++++++++++++++++++++
 lessons/fisika/static-electricity/id-theory.html  |  97 +++++++++++
 lessons/fisika/static-electricity/theory.html     |  96 +++++++++++
 7 files changed, 473 insertions(+), 12 deletions(-)
 create mode 100644 lessons/fisika/static-electricity/id-coulomb.html
 create mode 100644 lessons/fisika/static-electricity/id-theory.html
 create mode 100644 lessons/fisika/static-electricity/theory.html

(limited to 'lessons')

diff --git a/lessons/biologi/reproduction/introduction.html b/lessons/biologi/reproduction/introduction.html
index 3d43cf4..0e77caa 100644
--- a/lessons/biologi/reproduction/introduction.html
+++ b/lessons/biologi/reproduction/introduction.html
@@ -41,10 +41,6 @@
         </div>
     </div>
 
-    <div class="chip-container" id="chip-container">
-        <div class="chip"><span>✅ Verified</span></div>
-    </div>
-
     <div class="banner-container" id="banner">
         <div class="banner-bg" id="img-supplies"></div>
         <div class="gradient-bg"></div>
@@ -54,6 +50,10 @@
         </div>
     </div>
 
+    <div class="chip-container" id="chip-container">
+        <div class="chip"><span>✅ Verified</span></div>
+    </div>
+
     <div id="main">
         <section>
             <div class="highlight">
diff --git a/lessons/fisika/atom/atom.html b/lessons/fisika/atom/atom.html
index a856bf5..ef70b0b 100644
--- a/lessons/fisika/atom/atom.html
+++ b/lessons/fisika/atom/atom.html
@@ -66,9 +66,11 @@
             <h1 id="symbol">Symbol of An Atom</h1>
             <div class="flex flex-center" style="width: 100%;">
                 <img src="/assets/images/atoms/oxygen_symbol.svg" alt=""
-                    style="flex: 1 200px; margin: 30px; min-width: 0px; max-width: 600px;">
+                    style="flex: 1 200px; margin: 30px; min-width: 0px; 
+                    max-width: clamp(100px, 600px, 100%);">
                 <img src="/assets/images/atoms/symbol.svg" alt=""
-                    style="flex: 1 200px; margin: 30px; min-width: 0px; max-width: 600px;">
+                    style="flex: 1 200px; margin: 30px; min-width: 0px; 
+                    max-width: clamp(100px, 600px, 100%);">
             </div>
             <p class="subtitle">(picture on the left) An example of an atom symbol, (picture on the right) The format of
                 an atom symbol (FOR INDONESIA)</p>
diff --git a/lessons/fisika/index.html b/lessons/fisika/index.html
index 0abe235..13c6986 100644
--- a/lessons/fisika/index.html
+++ b/lessons/fisika/index.html
@@ -56,7 +56,8 @@
             <p><a href="atom/atom.html" class="link">Atom: Introduction</a></p>
             <p><a href="atom/electron-config.html" class="link">Electron Configuration</a></p>
             <h1 id="bab2">Chapter 2 - Static Electricity</h1>
-            <p><a href="static-electricity/coulomb.html" class="link">Coulomb's Law</a></p>
+            <p><a href="static-electricity/coulomb.html" class="link">Lesson 1: Coulomb's Law</a></p>
+            <p><a href="static-electricity/theory.html" class="link">Lesson 2: Static Electricity Theory - Electroscope and Electric Field</a></p>
         </section>
     </div>
     
diff --git a/lessons/fisika/static-electricity/coulomb.html b/lessons/fisika/static-electricity/coulomb.html
index 4c6db89..47ec781 100644
--- a/lessons/fisika/static-electricity/coulomb.html
+++ b/lessons/fisika/static-electricity/coulomb.html
@@ -13,6 +13,8 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
     <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.css" integrity="sha384-pRsDYiLLocCzWnUN/YEr9TBTTaZOUi5x8adKfqi6Qt44lDaFkoP++x1j2ohSMtdf" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.js" integrity="sha384-tMzugJpfLv7v0f+KXzNMqNCC6sVzLMM3sCnZDgzy0lcO/0h3sAkEBg/URFcV0JpE" crossorigin="anonymous"></script>
 </head>
 
 <body>
@@ -52,8 +54,11 @@
         </div>
     </div>
     
-    <div class="chip-container" id="chip-container">
-        <div class="chip"><span>❓ Unchecked by Professionals</span></div>
+    <div class="top-chips-container" id="chip-container">
+        <div class="chip-container">
+            <div class="chip"><span>❓ Unchecked by Professionals</span></div>
+        </div>
+        <div><a href="id-coulomb.html" class="button"><i class="fa-solid fa-language"></i> View in Indonesia</a></div>
     </div>
     
     <div id="main">
@@ -84,7 +89,7 @@
             <ol></ol>
             <ol>
                 <li>
-                    <p>&nbsp;</p>
+                    <p>Find F.</p>
                     <img src="/assets/images/atoms/coulomb1.svg" alt=""><br>
                     <h2>Given:</h2>
                     <p>
@@ -104,8 +109,75 @@
                 </li>
                 <hr>
                 <li>
-                    <p>&nbsp;</p>
-                </li>         
+                    <p>Find F.</p>
+                    <img src="/assets/images/atoms/coulomb2.svg" alt=""><br>
+                    <h2>Given:</h2>
+                    <span id="m2"></span>
+                    <h2>Solution:</h2>
+                    <span id="m1"></span>
+                </li>
+                <script defer>
+                    const m1 = document.getElementById("m1");
+                    const m2 = document.getElementById("m2");
+
+                    katex.render(String.raw`
+                    \begin{aligned}
+                    F &= k\dfrac{Q_1Q_2}{r^2}\\
+                    &= 9 \times 10^9\dfrac{6 \times 10^{-6} \cdot 12 \times 10^{-6}}{9 \times 10^{-2}}\\
+                    &= \dfrac{10^9 \cdot 6 \times 10^{-6} \cdot 12 \times 10^{-6}}{10^{-2}} = \dfrac{6 \cdot 12 \cdot 10^9 \cdot 10^{-6} \cdot 10^{-6}}{10^{-2}}\\
+                    &= \dfrac{72 \cdot 10^{-3}}{10^{-2}}\\
+                    &= 72 \times 10^{-1}
+                    \end{aligned}
+                    `, m1, {
+                        throwOnError: true
+                    });
+                    katex.render(String.raw`
+                    \begin{aligned}
+                    r &= 30 \textnormal{ cm} = 0,3 \textnormal{ m} = 3 \times 10^{-1}\\
+                    r^2 &= (3 \times 10^{-1})^2 = 9 \times 10^{-2}\\
+                    Q_1 &= 6 \textnormal{ MC}\\
+                    Q_2 &= 12 \textnormal{ MC}
+                    \end{aligned}
+                    `, m2, {
+                        throwOnError: false
+                    });
+                </script>
+                <hr>
+                <li>
+                    <p>If F = 9 &times; 10<sup>9</sup>, Find r.</p>
+                    <img src="/assets/images/atoms/coulomb3.svg" alt=""><br>
+                    <h2>Given:</h2>
+                    <span id="m3"></span>
+                    <h2>Solution:</h2>
+                    <span id="m4"></span>
+                </li>
+                <script defer>
+                    const m3 = document.getElementById("m3");
+                    const m4 = document.getElementById("m4")
+
+                    katex.render(String.raw`
+                    \begin{aligned}
+                    F &= k\dfrac{Q_1Q_2}{r^2}\\
+                    9 \times 10^9 &= 9 \times 10^9\dfrac{4 \times 10^{-3} \cdot 4 \times 10^{-3}}{r^2}\\
+                    9 \times 10^9 r^2 &= 9 \times 10^9 \cdot 4 \times 10^{-3} \cdot 4 \times 10^{-3}\\
+                    r^2 &= 4 \times 10^{-3} \cdot 4 \times 10^{-3}\\
+                    &= 16 \times 10^{-6}\\
+                    r &= \sqrt{16 \times 10^{-6}}\\
+                    &= 4 \times 10^{-3}
+                    \end{aligned}
+                    `, m4, {
+                        throwOnError: true
+                    });
+                    katex.render(String.raw`
+                    \begin{aligned}
+                    Q_1 &= 4 \textnormal{ mC}\\
+                    Q_2 &= 4 \textnormal{ mC}\\
+                    F &= 9 \times 10^9 \textnormal{ N}
+                    \end{aligned}
+                    `, m3, {
+                        throwOnError: false
+                    });
+                </script>
             </ol>
             <h1 id="references">References</h1>
             <ol>
diff --git a/lessons/fisika/static-electricity/id-coulomb.html b/lessons/fisika/static-electricity/id-coulomb.html
new file mode 100644
index 0000000..a820526
--- /dev/null
+++ b/lessons/fisika/static-electricity/id-coulomb.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="icon" href="/assets/images/master.svg">
+    <title>Al Azhar 9th Grade Lesson Notes</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.css" integrity="sha384-pRsDYiLLocCzWnUN/YEr9TBTTaZOUi5x8adKfqi6Qt44lDaFkoP++x1j2ohSMtdf" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.js" integrity="sha384-tMzugJpfLv7v0f+KXzNMqNCC6sVzLMM3sCnZDgzy0lcO/0h3sAkEBg/URFcV0JpE" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <div class="fixed-top-btn-container" id="topbtn">
+        <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a>
+        <a href="../" class="fixed-top-btn back-btn"><i class="fa-solid fa-chevron-left"></i></a>
+    </div>
+    <div id="console"></div>
+    <div id="sidebar">
+        <div>
+            <a href="/index.html">
+                <img src="/assets/images/master.svg" alt="" class="sidebar-logo">
+            </a>
+
+            <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        </div>
+
+        <div>
+            <a href="/about/author.html" class="sidebar-link link">About the Author</a>
+            <a href="/about/school.html" class="sidebar-link link">About School</a>
+            <a href="/lessons" class="sidebar-link link">Lessons</a>
+
+
+            <hr class="divider">
+            <div id="toc">
+                <h4>Table of Contents</h4>
+            </div>
+        </div>
+    </div>
+
+    <div class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <div class="gradient-bg"></div>
+        <div class="banner-text-container">
+            <h1 class="banner-text" id="banner-txt">Coulomb's Law</h1>
+            <h3 class="banner-text" id="banner-txt">Chapter 2</h3>
+        </div>
+    </div>
+    
+    <div class="top-chips-container" id="chip-container">
+        <div class="chip-container">
+            <div class="chip"><span>❓ Belum dicek oleh Profesional</span></div>
+        </div>
+        <div><a href="coulomb.html" class="button"><i class="fa-solid fa-language"></i> Lihat dalam Bahasa Inggris</a></div>
+    </div>
+    
+    <div id="main">
+        <section>
+            <h1 id="definition">Pengertian</h1>
+            <p><b>Hukum Coulomb adalah hukum yang menjelaskan hubungan antara dua muatan listrik.</b></p>
+            <p>Hukum ini menyatakan: "Apabila terdapat dua buah titik muatan maka akan timbul gaya di antara keduanya, yang besarnya sebanding dengan perkalian nilai kedua muatan dan berbanding terbalik dengan kuadrat jarak antar keduanya."<sup>[<a href="#reference-1" class="link-compact">1</a>]</sup></p>
+            <h1 id="formula">Rumus</h1>
+            <span>F = k <span class="frac"><sup>Q<sub>1</sub> &times; Q<sub>2</sub></sup><span>&frasl;</span><sub>r<sup>2</sup></span></span>
+            <p>
+                dimana,<br>
+                <ul>
+                    <li><b>F</b> = Gaya (Newton)</li>
+                    <li><b>r</b> = Jarak (Meter)</li>
+                    <li><b>Q<sub>1</sub></b> = Muatan 1 (Coulomb)</li>
+                    <li><b>Q<sup>2</sup></b> = Muatan 2 (Coulomb)</li>
+                    <li><b>K</b> = Konstanta Coulomb = <strong>9 &times; 10<sup>9</sup></strong> <span style="color: gray; font-size: 1rem;">Nm<sup>2</sup> / C<sup>2</sup></span></li>
+                </ul>
+            </p>
+            <h1 id="units">Pengubahan Satuan Coulomb</h1>
+            <ol>
+                <li>n <b>mC</b> (<strong>milli</strong>Coulomb) = n * 10<sup>-3</sup> C</li>
+                <li>n <b>MC</b> (<strong>Micro</strong>Coulomb) = n * 10<sup>-6</sup> C <i>(Bentuk alternatif: μC)</i></li>
+                <li>n <b>nC</b> (<strong>nano</strong>Coulomb) = n * 10<sup>-9</sup> C</li>
+                <li>n <b>Å</b> (<strong>Ångström</strong>) = n * 10<sup>-10</sup> C</li>
+            </ol>
+            <h1 id="example">Contoh & Latihan</h1>
+            <ol></ol>
+            <ol>
+                <li>
+                    <p>Temukan F.</p>
+                    <img src="/assets/images/atoms/coulomb1.svg" alt=""><br>
+                    <h2>Diketahui:</h2>
+                    <p>
+                        <strong>r</strong> = 30 cm = 0,3 m = <b>3 &times; 10<sup>-1</sup> m</b><br>
+                        <strong>Q<sub>1</sub></strong> = 2 MC = <b>2 &times; 10<sup>-6</sup></b><br>
+                        <strong>Q<sub>2</sub></strong> = 3 MC = <b>3 &times; 10<sup>-6</sup></b><br>
+                    </p>
+                    <h2>Cara:</h2>
+                    <p>
+                        <span>F = k <span class="frac"><sup>Q<sub>1</sub> &times; Q<sub>2</sub></sup><span>&frasl;</span><sub>r<sup>2</sup></span></span><br>
+                            
+                        <span>F = 9 &times; 10<sup>9</sup><span class="frac"><sup>2 &times; 10<sup>-6</sup> &#8231; 3 &times; 10<sup>-6</sup></sup><span>&frasl;</span><sub>(3 &times; 10<sup>-1</sup>)<sup>2</sup></span></span> = <span class="frac"><sup>9 &times; 10<sup>9</sup> &#8231; 2 &times; 10<sup>-6</sup> &#8231; 3 &times; 10<sup>-6</sup></sup><span>&frasl;</span><sub>9 &times; 10<sup>-2</sup></span></span><br>
+                                
+                        = <span class="frac"><sup>10<sup>9</sup> &#8231; 2 &times; 10<sup>-6</sup> &#8231; 3 &times; 10<sup>-6</sup></sup><span>&frasl;</span><sub>10<sup>-2</sup></span></span> = <span class="frac"><sup>10<sup>-3</sup> &times; 6</sup><span>&frasl;</span><sub>10<sup>-2</sup></span></span><br>
+                                    = <strong>6 &times; 10<sup>-1</sup></strong>
+                    </p>
+                </li>
+                <hr>
+                <li>
+                    <p>Temukan F.</p>
+                    <img src="/assets/images/atoms/coulomb2.svg" alt=""><br>
+                    <h2>Diketahui:</h2>
+                    <span id="m2"></span>
+                    <h2>Cara:</h2>
+                    <span id="m1"></span>
+                </li>
+                <script defer>
+                    const m1 = document.getElementById("m1");
+                    const m2 = document.getElementById("m2");
+
+                    katex.render(String.raw`
+                    \begin{aligned}
+                    F &= k\dfrac{Q_1Q_2}{r^2}\\
+                    &= 9 \times 10^9\dfrac{6 \times 10^{-6} \cdot 12 \times 10^{-6}}{9 \times 10^{-2}}\\
+                    &= \dfrac{10^9 \cdot 6 \times 10^{-6} \cdot 12 \times 10^{-6}}{10^{-2}} = \dfrac{6 \cdot 12 \cdot 10^9 \cdot 10^{-6} \cdot 10^{-6}}{10^{-2}}\\
+                    &= \dfrac{72 \cdot 10^{-3}}{10^{-2}}\\
+                    &= 72 \times 10^{-1}
+                    \end{aligned}
+                    `, m1, {
+                        throwOnError: true
+                    });
+                    katex.render(String.raw`
+                    \begin{aligned}
+                    r &= 30 \textnormal{ cm} = 0,3 \textnormal{ m} = 3 \times 10^{-1}\\
+                    r^2 &= (3 \times 10^{-1})^2 = 9 \times 10^{-2}\\
+                    Q_1 &= 6 \textnormal{ MC}\\
+                    Q_2 &= 12 \textnormal{ MC}
+                    \end{aligned}
+                    `, m2, {
+                        throwOnError: false
+                    });
+                </script>
+                <hr>
+                <li>
+                    <p>Jika F = 9 &times; 10<sup>9</sup>, temukan r.</p>
+                    <img src="/assets/images/atoms/coulomb3.svg" alt=""><br>
+                    <h2>Diketahui:</h2>
+                    <span id="m3"></span>
+                    <h2>Cara:</h2>
+                    <span id="m4"></span>
+                </li>
+                <script defer>
+                    const m3 = document.getElementById("m3");
+                    const m4 = document.getElementById("m4")
+
+                    katex.render(String.raw`
+                    \begin{aligned}
+                    F &= k\dfrac{Q_1Q_2}{r^2}\\
+                    9 \times 10^9 &= 9 \times 10^9\dfrac{4 \times 10^{-3} \cdot 4 \times 10^{-3}}{r^2}\\
+                    9 \times 10^9 r^2 &= 9 \times 10^9 \cdot 4 \times 10^{-3} \cdot 4 \times 10^{-3}\\
+                    r^2 &= 4 \times 10^{-3} \cdot 4 \times 10^{-3}\\
+                    &= 16 \times 10^{-6}\\
+                    r &= \sqrt{16 \times 10^{-6}}\\
+                    &= 4 \times 10^{-3}
+                    \end{aligned}
+                    `, m4, {
+                        throwOnError: true
+                    });
+                    katex.render(String.raw`
+                    \begin{aligned}
+                    Q_1 &= 4 \textnormal{ mC}\\
+                    Q_2 &= 4 \textnormal{ mC}\\
+                    F &= 9 \times 10^9 \textnormal{ N}
+                    \end{aligned}
+                    `, m3, {
+                        throwOnError: false
+                    });
+                </script>
+            </ol>
+            <h1 id="references">Referensi</h1>
+            <ol>
+                <li id="reference-1">Andrew Duffy, <i><a href="http://physics.bu.edu/~duffy/PY106/Charge.html" class="link">"Electric charge and Coulomb's law"</a></i></li>
+            </ol>
+        </section>
+    </div>
+
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lessons/fisika/static-electricity/id-theory.html b/lessons/fisika/static-electricity/id-theory.html
new file mode 100644
index 0000000..32e54bd
--- /dev/null
+++ b/lessons/fisika/static-electricity/id-theory.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="icon" href="/assets/images/master.svg">
+    <title>Al Azhar 9th Grade Lesson Notes</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.css" integrity="sha384-pRsDYiLLocCzWnUN/YEr9TBTTaZOUi5x8adKfqi6Qt44lDaFkoP++x1j2ohSMtdf" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.js" integrity="sha384-tMzugJpfLv7v0f+KXzNMqNCC6sVzLMM3sCnZDgzy0lcO/0h3sAkEBg/URFcV0JpE" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <div class="fixed-top-btn-container" id="topbtn">
+        <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a>
+        <a href="../" class="fixed-top-btn back-btn"><i class="fa-solid fa-chevron-left"></i></a>
+    </div>
+    <div id="console"></div>
+    <div id="sidebar">
+        <div>
+            <a href="/index.html">
+                <img src="/assets/images/master.svg" alt="" class="sidebar-logo">
+            </a>
+
+            <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        </div>
+
+        <div>
+            <a href="/about/author.html" class="sidebar-link link">About the Author</a>
+            <a href="/about/school.html" class="sidebar-link link">About School</a>
+            <a href="/lessons" class="sidebar-link link">Lessons</a>
+
+
+            <hr class="divider">
+            <div id="toc">
+                <h4>Table of Contents</h4>
+            </div>
+        </div>
+    </div>
+
+    <div class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <div class="gradient-bg"></div>
+        <div class="banner-text-container">
+            <h1 class="banner-text" id="banner-txt">Teori Listrik Statis: Elektroskop dan Medan Listrik</h1>
+            <h3 class="banner-text" id="banner-txt">Diterjemahkan ke Bahasa Indonesia</h3>
+        </div>
+    </div>
+    
+    <div class="top-chips-container" id="chip-container">
+        <div class="chip-container">
+            <div class="chip"><span>🔍 Belum Selesai</span></div>
+        </div>
+        <div><a href="theory.html" class="button"><i class="fa-solid fa-language"></i> Lihat dalam Bahasa Inggris</a></div>
+    </div>
+    
+    
+    <div id="main">
+        <section>
+            <h1 id="electroscope">Electroscope</h1>
+            <h2 id="electroscope--definition">What is an Electroscope?</h2>
+            <p>An electroscope is a scientific instrument to detect a presence of an electric charge, and / or a type of an electric charge.</p>
+            <h2 id="electroscope--neutral">Neutral Electroscope</h2>
+            <img src="/assets/images/electroscope/electroscope_neutral_normal.svg" alt="" style="max-width: 160px;"><br>
+            <span class="subtitle">A neutral electroscope.</span>
+            <p>An electroscope can be <b>Neutral</b>, <b>Positive</b>, or <b>Negative</b>. This part explains about a netural electroscope. If an object is brought closer to the ball;</p>
+            <ol>
+                <li>If the object is neutral, nothing will happen.</li>
+                <li>&nbsp;
+                    <div class="flex">
+                        <img src="/assets/images/electroscope/electroscope_neutral_active-positive.svg" alt="" style="max-width: 180px;" class="flex-element">
+                        <p class="flex-element">If the object is positively charged, the electrons will move upwards (to the ball), and the protons will move downwards (to the golden leaves). These will result in the golden leaves to seperate further. (see image)</p>
+                    </div>
+                </li>
+                <li>&nbsp;
+                    <div class="flex">
+                        <img src="/assets/images/electroscope/electroscope_neutral_active-negative.svg" alt="" style="max-width: 180px;" class="flex-element">
+                        <p class="flex-element">If the object is negatively charged, the protons will move upwards (to the ball), and the electrons will move downwards (to the golden leaves). These will result in the golden leaves to seperate further. (see image)</p>
+                    </div>
+                </li>
+            </ol>
+            <h2 id="electroscope--positive">Positive Electroscope</h2>
+        </section>
+    </div>
+
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lessons/fisika/static-electricity/theory.html b/lessons/fisika/static-electricity/theory.html
new file mode 100644
index 0000000..af5ba31
--- /dev/null
+++ b/lessons/fisika/static-electricity/theory.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <link rel="icon" href="/assets/images/master.svg">
+    <title>Al Azhar 9th Grade Lesson Notes</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.css" integrity="sha384-pRsDYiLLocCzWnUN/YEr9TBTTaZOUi5x8adKfqi6Qt44lDaFkoP++x1j2ohSMtdf" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.js" integrity="sha384-tMzugJpfLv7v0f+KXzNMqNCC6sVzLMM3sCnZDgzy0lcO/0h3sAkEBg/URFcV0JpE" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <div class="fixed-top-btn-container" id="topbtn">
+        <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a>
+        <a href="../" class="fixed-top-btn back-btn"><i class="fa-solid fa-chevron-left"></i></a>
+    </div>
+    <div id="console"></div>
+    <div id="sidebar">
+        <div>
+            <a href="/index.html">
+                <img src="/assets/images/master.svg" alt="" class="sidebar-logo">
+            </a>
+
+            <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3>
+        </div>
+
+        <div>
+            <a href="/about/author.html" class="sidebar-link link">About the Author</a>
+            <a href="/about/school.html" class="sidebar-link link">About School</a>
+            <a href="/lessons" class="sidebar-link link">Lessons</a>
+
+
+            <hr class="divider">
+            <div id="toc">
+                <h4>Table of Contents</h4>
+            </div>
+        </div>
+    </div>
+
+    <div class="banner-container" id="banner">
+        <div class="banner-bg" id="img-supplies"></div>
+        <div class="gradient-bg"></div>
+        <div class="banner-text-container">
+            <h1 class="banner-text" id="banner-txt">Static Electricity Theory: Electroscope and Electric Field</h1>
+            <h3 class="banner-text" id="banner-txt">Chapter 2</h3>
+        </div>
+    </div>
+    
+    <div class="top-chips-container" id="chip-container">
+        <div class="chip-container">
+            <div class="chip"><span>🔍 Unfinished</span></div>
+        </div>
+        <div><a href="id-theory.html" class="button"><i class="fa-solid fa-language"></i> View in Indonesia</a></div>
+    </div>
+    
+    <div id="main">
+        <section>
+            <h1 id="electroscope">Electroscope</h1>
+            <h2 id="electroscope--definition">What is an Electroscope?</h2>
+            <p>An electroscope is a scientific instrument to detect a presence of an electric charge, and / or a type of an electric charge.</p>
+            <h2 id="electroscope--neutral">Neutral Electroscope</h2>
+            <img src="/assets/images/electroscope/electroscope_neutral_normal.svg" alt="" style="max-width: 160px;"><br>
+            <span class="subtitle">A neutral electroscope.</span>
+            <p>An electroscope can be <b>Neutral</b>, <b>Positive</b>, or <b>Negative</b>. This part explains about a netural electroscope. If an object is brought closer to the ball;</p>
+            <ol>
+                <li>If the object is neutral, nothing will happen.</li>
+                <li>&nbsp;
+                    <div class="flex">
+                        <img src="/assets/images/electroscope/electroscope_neutral_active-positive.svg" alt="" style="max-width: 180px;" class="flex-element">
+                        <p class="flex-element">If the object is positively charged, the electrons will move upwards (to the ball), and the protons will move downwards (to the golden leaves). These will result in the golden leaves to seperate further. (see image)</p>
+                    </div>
+                </li>
+                <li>&nbsp;
+                    <div class="flex">
+                        <img src="/assets/images/electroscope/electroscope_neutral_active-negative.svg" alt="" style="max-width: 180px;" class="flex-element">
+                        <p class="flex-element">If the object is negatively charged, the protons will move upwards (to the ball), and the electrons will move downwards (to the golden leaves). These will result in the golden leaves to seperate further. (see image)</p>
+                    </div>
+                </li>
+            </ol>
+            <h2 id="electroscope--positive">Positive Electroscope</h2>
+        </section>
+    </div>
+
+    <script src="/scripts/toc.js"></script>
+    <script src="/scripts/sidebar.js"></script>
+</body>
+
+</html>
\ No newline at end of file
-- 
cgit v1.2.3