Update index.html

index.html

@@ -580,7 +580,7 @@ <h2>Muslim Hadith Details</h2>
   </div>
 
   <div class="section-transition" style="margin-top: 10px; margin-bottom: 10px;" id="hadith-examples">
-    <h2>To Name a Few...</h2>
+    <h2>To Name a Few More...</h2>
     <p>The above activity allowed for us to get a glimpse of the linguistic patterns, and even uncover some miracles on
       our own. Note, the verses signifying miracles (colored in gold) were just some examples. Feel free to use the
       treemap to find more! <br><br><b style="color:#03ac00;">Although the above activity provides plenty of insight
@@ -592,6 +592,79 @@ <h2>To Name a Few...</h2>
 
   <div class="tooltip" id="tooltip"></div>
 
+
+  <section class="miracle-section">
+    <div class="verse-content">
+      <h2>The Day Count Miracle</h2>
+      <p class="arabic">يَوْم</p>
+      <p><strong style="color:#03ac00;">Perfect Calendar Alignment:</strong> The word "day" (يَوْم/yawm) in its singular
+        form appears exactly 365 times in the Quran - matching precisely with the number of days in a solar year.</p>
+      <p>This remarkable correlation between the frequency of the word and the Earth's orbital period around the sun was
+        discovered only recently with computer analysis.</p>
+    </div>
+    <div class="animation-container">
+      <img src="images/sun.gif" alt="Day Count Pattern" style="width: 400px; height: 400px;">
+    </div>
+  </section>
+
+  <section class="miracle-section">
+    <div class="animation-container">
+      <img src="images/sea.gif" alt="Land Sea Ratio" style="width: 300px; height: 300px;">
+    </div>
+    <div class="verse-content">
+      <h2>The Land and Sea Ratio</h2>
+      <p class="arabic">بَحْر - بَرّ</p>
+      <p><strong style="color:#03ac00;">Geographic Precision:</strong> The word "sea" appears 32 times and "land"
+        appears 13 times. The ratio (32:45 or 71.11% sea to 28.89% land) exactly matches Earth's actual surface ratio of
+        water to land mass.</p>
+      <p>This precise ratio was only confirmed by satellite imagery and modern geographic measurements in recent
+        decades.</p>
+    </div>
+  </section>
+
+  <section class="miracle-section">
+    <div class="verse-content">
+      <h2>Life and Death Balance</h2>
+      <p class="arabic">حَيَاة - مَوْت</p>
+      <p><strong style="color:#03ac00;">Perfect Symmetry:</strong> The words "life" (حَيَاة) and "death" (مَوْت) each
+        appear exactly 145 times in the Quran, reflecting the universal truth that every life has its corresponding
+        death.</p>
+      <p>This equal frequency emphasizes the Quranic theme of life and death being two sides of the same coin.</p>
+    </div>
+    <div class="animation-container">
+      <img src="images/death.png" alt="Life Death Balance">
+    </div>
+  </section>
+
+  <section class="miracle-section">
+    <div class="animation-container">
+      <img src="images/gender.png" alt="Gender Equality" style="width: 300px; height: 300px;">
+    </div>
+    <div class="verse-content">
+      <h2>Gender Equality in Words</h2>
+      <p class="arabic">رَجُل - اِمْرَأَة</p>
+      <p><strong style="color:#03ac00;">Divine Balance:</strong> The word for "man" (رَجُل) and "woman" (اِمْرَأَة) each
+        appear exactly 24 times in the Quran, indicating equality in their spiritual status and religious obligations.
+      </p>
+      <p>This equal representation emphasizes the Quranic principle of spiritual equality between genders.</p>
+    </div>
+  </section>
+
+  <section class="miracle-section">
+    <div class="verse-content">
+      <h2>The Middle Verse Miracle</h2>
+      <p class="arabic">وَكَذَٰلِكَ جَعَلْنَاكُمْ أُمَّةً وَسَطًا</p>
+      <p><strong style="color:#03ac00;">Mathematical Precision:</strong> In Surah Al-Baqarah, which has 286 verses, the
+        exact middle verse (143) contains the word "middle" (وَسَطًا), declaring "Thus We have made you a middle
+        nation."</p>
+      <p>This perfect alignment of content and position creates a remarkable self-referential miracle.</p>
+    </div>
+    <div class="animation-container">
+      <img src="images/middle.png" alt="Middle Verse" style="width: 300px; height: 300px;">
+    </div>
+  </section>
+
+
   <script>
     document.addEventListener("DOMContentLoaded", () => {
       const notableBukhariHadiths = [1, 2, 3];