Update index.html

index.html

@@ -85,29 +85,21 @@
             color: #2c3e50;
             border: 1px solid #ddd;
         }
-        details {
-            border: 1px solid #aaa;
-            border-radius: 4px;
-            padding: .5em .5em 0;
-            margin-top: 20px;
-        }
-        summary {
-            font-weight: bold;
-            margin: -.5em -.5em 0;
-            padding: .5em;
-            cursor: pointer;
-            background-color: #f1f1f1;
-        }
-        details[open] {
-            padding: .5em;
+        .derivation-section {
+            border: 1px solid #3498db;
+            border-radius: 8px;
+            margin-top: 25px;
+            padding: 15px;
         }
-        details[open] summary {
-            border-bottom: 1px solid #aaa;
-            margin-bottom: .5em;
+        .derivation-section h3 {
+            color: #3498db;
+            border: none;
+            margin-top: 0;
         }
         .derivation-step {
             text-align: left;
-            padding-left: 1em;
+            padding: 5px 0;
+            margin-bottom: 10px;
         }
     </style>
 </head>
@@ -202,35 +194,57 @@
             臨界角 (Critical Angle):
             $$ \theta_c = \sin^{-1}\left(\frac{V_1}{V_2}\right) $$
         </div>
-        <p>折射波的總傳播時間，是它在第一層走的兩段斜線路徑、加上在第二層介面水平路徑的時間總和。</p>
-        <img src="1000030050.jpg" alt="折射波路徑的三段式分解">
+        <p>折射波的總傳播時間，是它在第一層走的兩段斜線路徑、加上在第二層介面水平路徑的時間總和。現在，就讓我們跟著下面的圖示與步驟，一步步推導出來吧！</p>
         
-        <details>
-            <summary>點此展開：折射波走時公式的詳細推導</summary>
+        <div class="derivation-section">
+            <h3>公式解剖室：折射波走時推導</h3>
+            <p>我們的目標是計算出折射波從震源到接收器，總共花了多少時間 $T(X)$。請隨時對照下方的路徑分解圖。</p>
+            <img src="1000030050.jpg" alt="折射波路徑的三段式分解">
+
+            <div class="derivation-step">
+                <h4>步驟 1：將總時間分解為三段</h4>
+                <p>總時間 $T_t$ 是三段路徑時間的總和：$T_1$ (向下傳播) + $T_2$ (沿介面傳播) + $T_3$ (向上傳播)。</p>
+                <div class="formula-box">$$ T_t = T_1 + T_2 + T_3 $$</div>
+            </div>
+
+            <div class="derivation-step">
+                <h4>步驟 2：計算各段時間</h4>
+                <p>時間 = 距離 / 速度。從圖中的幾何關係，我們可以得到：</p>
+                <p><b>$T_1$ 和 $T_3$ 的時間</b>：這兩段路徑相同，長度為 $\frac{h}{\cos\theta_c}$，且都在速度為 $V_1$ 的第一層中傳播。</p>
+                <div class="formula-box">$$ T_1 = T_3 = \frac{h}{V_1 \cos\theta_c} $$</div>
+                <p><b>$T_2$ 的時間</b>：這段路徑的水平長度，是總長度 $X$ 減去 $T_1$ 和 $T_3$ 在水平方向上的投影長度 ($h \tan\theta_c$)。它在速度為 $V_2$ 的第二層中傳播。</p>
+                <div class="formula-box">$$ T_2 = \frac{X - 2h \tan\theta_c}{V_2} $$</div>
+            </div>
+
+            <div class="derivation-step">
+                <h4>步驟 3：將各段時間相加</h4>
+                <p>將上面得到的 $T_1$, $T_2$, $T_3$ 代入總時間公式中。</p>
+                <div class="formula-box">$$ T_t = \left(\frac{h}{V_1 \cos\theta_c}\right) + \left(\frac{X - 2h \tan\theta_c}{V_2}\right) + \left(\frac{h}{V_1 \cos\theta_c}\right) $$</div>
+                <p>整理一下，合併 $T_1$ 和 $T_3$，並把 $T_2$ 拆開：</p>
+                <div class="formula-box">$$ T_t = \frac{2h}{V_1 \cos\theta_c} + \frac{X}{V_2} - \frac{2h \tan\theta_c}{V_2} $$</div>
+            </div>
+            
             <div class="derivation-step">
-                <p>總走時 $T_t$ 等於三段路徑時間 $T_1$, $T_2$, $T_3$ 的總和：</p>
-                <p>$T_t = T_1 + T_2 + T_3$</p>
-                <p>1. 根據幾何關係，$T_1$ 和 $T_3$ 的路徑長度均為 $\frac{h}{\cos\theta_c}$，所以時間為：</p>
-                <p>$T_1 = T_3 = \frac{h}{V_1 \cos\theta_c}$</p>
-                <p>2. $T_2$ 的水平路徑長度為 $X - 2(h \tan\theta_c)$，所以時間為：</p>
-                <p>$T_2 = \frac{X - 2h \tan\theta_c}{V_2}$</p>
-                <p>3. 將三者相加：</p>
-                <p>$T_t = \frac{2h}{V_1 \cos\theta_c} + \frac{X - 2h \tan\theta_c}{V_2} = \frac{2h}{V_1 \cos\theta_c} - \frac{2h \sin\theta_c}{V_2 \cos\theta_c} + \frac{X}{V_2}$</p>
-                <p>4. 提出公因式 $ \frac{2h}{V_1 \cos\theta_c} $：</p>
-                <p>$T_t = \frac{2h}{V_1 \cos\theta_c} \left(1 - \frac{V_1}{V_2}\sin\theta_c\right) + \frac{X}{V_2}$</p>
-                <p>5. 根據司乃耳定律，在臨界角時 $\frac{V_1}{V_2} = \sin\theta_c$，代入上式：</p>
-                <p>$T_t = \frac{2h}{V_1 \cos\theta_c} (1 - \sin^2\theta_c) + \frac{X}{V_2}$</p>
-                <p>6. 利用三角恆等式 $1 - \sin^2\theta_c = \cos^2\theta_c$：</p>
-                <p>$T_t = \frac{2h}{V_1 \cos\theta_c} (\cos^2\theta_c) + \frac{X}{V_2}$</p>
-                <p>7. 化簡得到最終結果：</p>
-                <p>$T_t = \frac{2h\cos\theta_c}{V_1} + \frac{X}{V_2}$</p>
+                <h4>步驟 4：代入三角函數與司乃耳定律</h4>
+                <p>我們利用 $\tan\theta_c = \frac{\sin\theta_c}{\cos\theta_c}$，並將公式重新整理，提出公因式。</p>
+                <div class="formula-box">$$ T_t = \frac{2h}{V_1 \cos\theta_c} \left(1 - \frac{V_1}{V_2}\sin\theta_c\right) + \frac{X}{V_2} $$</div>
+                <p>接著，最關鍵的一步：使用臨界角的司乃耳定律 $\sin\theta_c = \frac{V_1}{V_2}$ 代入括號中。</p>
+                <div class="formula-box">$$ T_t = \frac{2h}{V_1 \cos\theta_c} (1 - \sin^2\theta_c) + \frac{X}{V_2} $$</div>
             </div>
-        </details>
 
-        <p>這個漂亮的線性公式告訴我們，折射波的走時圖也是一條直線，斜率是 $1/V_2$，並且在Y軸上產生一個截距，我們稱為「截時 $t_i$」。</p>
+            <div class="derivation-step">
+                <h4>步驟 5：最終化簡</h4>
+                <p>我們都知道三角恆等式 $1 - \sin^2\theta_c = \cos^2\theta_c$。用它來替換括號中的內容。</p>
+                <div class="formula-box">$$ T_t = \frac{2h}{V_1 \cos\theta_c} (\cos^2\theta_c) + \frac{X}{V_2} $$</div>
+                <p>消掉一個 $\cos\theta_c$，就得到了我們最終的、漂亮的線性方程式！</p>
+                <div class="formula-box">$$ T_t = \frac{2h\cos\theta_c}{V_1} + \frac{X}{V_2} $$</div>
+            </div>
+        </div>
+
+        <p>這個最終公式告訴我們，折射波的走時圖是一條直線，斜率是 $1/V_2$，並且在Y軸上產生一個截距，我們稱為「截時 $t_i$」。</p>
         <div class="formula-box">
-            折射波走時 (Refracted Wave Travel Time):
-            $$ T(X) = \frac{X}{V_2} + \frac{2h\cos\theta_c}{V_1} $$
+            截時 (Intercept Time):
+            $$ t_i = \frac{2h\cos\theta_c}{V_1} $$
         </div>
         <p>這個截時 $t_i$ 的大小，就和第一層的厚度 $h$ 有關！</p>
         <img src="1000030054.jpg" alt="直達波與折射波的完整走時曲線圖">