Update index.html

index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Main Akeli Thi - Book</title>
 
-  <!-- Bootstrap 5 -->
+  <!-- Bootstrap -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
 
   <!-- Google Fonts -->
@@ -30,7 +30,6 @@
       padding: 3rem 2rem;
     }
 
-    /* Title Page */
     .title-name {
       font-size: 3rem;
       font-weight: bold;
@@ -56,52 +55,11 @@
       border-radius: 5px;
     }
 
-    /* Dedication Page */
-    .dedication-section {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
-      text-align: center;
-    }
-
-    .dedication-box {
-      max-width: 750px;
-      background-color: #ffffff;
-      padding: 3rem;
-      border-radius: 1.5rem;
-      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
-    }
-
-    .dedication-title {
-      font-size: 2.5rem;
-      font-weight: bold;
-      color: #8a5b44;
-      margin-bottom: 1.5rem;
-    }
-
-    .dedication-text {
-      font-size: 1.3rem;
-      line-height: 2.2rem;
-      color: #4a3e3e;
-    }
-
-    /* Story Page - Full Width */
-    #story {
-      min-height: 100vh;
-      padding: 0;
-      margin: 0;
-      width: 100%;
-      display: block;
-      text-align: start;
-    }
-
     .section-header {
       font-size: 2rem;
-      padding: 2rem;
       font-weight: bold;
+      margin-bottom: 2rem;
       color: #8a5b44;
-      text-align: center;
     }
 
     .story-text {
@@ -112,7 +70,10 @@
       padding: 2rem 4rem;
       background: #ffffff;
       color: #333;
-      direction: rtl; /* Urdu text direction */
+      direction: rtl;
+      max-width: 900px;
+      border-radius: 1rem;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
     }
 
     @media (max-width: 768px) {
@@ -122,38 +83,29 @@
       }
     }
 
-    /* Thanks & Contact Sections */
-    .thanks-section {
+    .toc-section {
       background-color: #f9f5f0;
-      padding: 4rem 2rem;
-      text-align: center;
+      padding: 3rem 2rem;
     }
 
-    .thanks-section h2 {
+    .toc-section h2 {
       font-size: 2.5rem;
       color: #8a5b44;
       margin-bottom: 1.5rem;
     }
 
-    .thanks-section p {
+    .toc-section p {
       font-size: 1.3rem;
-      line-height: 2.2rem;
-      color: #4a3e3e;
-    }
-
-    .thanks-section .author-name {
-      font-size: 1.1rem;
-      color: #777;
-      margin-top: 2rem;
+      margin: 0.5rem 0;
     }
 
-    .thanks-section a {
+    .toc-section a {
       color: #8a5b44;
-      font-weight: bold;
       text-decoration: none;
+      font-weight: bold;
     }
 
-    .thanks-section a:hover {
+    .toc-section a:hover {
       text-decoration: underline;
     }
   </style>
@@ -165,79 +117,64 @@
     <div>
       <div class="title-name">Main Akeli Thi</div>
       <div class="line-separator"></div>
-      <div class="subtitle">Untold Story of Sidra</div>
+      <div class="subtitle">Untold Stories by Mohsin Kamil</div>
       <div class="author-name">By Mohsin Kamil</div>
     </div>
   </section>
 
-  <!-- 💌 Dedication Page -->
-<section id="dedication" class="dedication-section">
-  <div class="dedication-box">
-    <div class="dedication-text">
-      Dedicated to my best friend, <strong>Damii</strong> —<br /><br />
-      who has always stood by me,<br />
-      inspired me, impressed me,<br />
-      and become my reason to smile.<br /><br />
-      Sometimes, you're like a child I care for.<br />
-      Other times, like a big brother I look up to.<br />
-      But always — you bring a light,<br />
-      a positive vibe I feel without words.
-    </div>
-    <div class="author-name mt-4">— Mohsin Kamil</div>
-  </div>
-</section>
-
-
-  <!-- 📖 Story Page -->
-  <section id="story">
-    <div class="section-header">The Story</div>
-    <div class="story-text" id="storyContent">
-      Loading story...
-    </div>
+  <!-- 📚 Table of Contents -->
+  <section id="contents" class="toc-section">
+    <h2>Table of Contents</h2>
+    <p><a href="#story1">1. Main Akeli Thi</a></p>
+    <p><a href="#story2">2. اللہ جی، سوری... بھول چوک معاف</a></p>
+    <p><a href="#story3">3. تو ہم ساتھ ہوں</a></p>
   </section>
 
-  <!-- 🌟 Special Thanks -->
-  <section id="special-thanks" class="thanks-section">
-    <h2>Special Thanks</h2>
-    <p>
-      To my sister, <strong>"T"</strong> —<br />
-      Thank you for believing in me when I didn’t believe in myself.<br />
-      Your unwavering support gave me the strength to publish this.<br />
-      This book exists because you never let me give up.
-    </p>
-    <div class="author-name">— Mohsin Kamil</div>
+  <!-- 📖 Story 1 -->
+  <section id="story1">
+    <div class="section-header">Main Akeli Thi</div>
+    <div class="story-text" id="storyContent1">Loading story...</div>
   </section>
 
-  <!-- 🙏 Thank You Page -->
-  <section id="thankyou" class="thanks-section">
-    <h2>Thank You</h2>
-    <p>
-      Thank you for taking the time to read <strong>Main Akeli Thi</strong>.<br /><br />
-      This story holds a special place in my heart, and I hope it resonated with you.<br />
-      Your support and encouragement mean the world to me.<br /><br />
-      Stay kind. Stay connected.
-    </p>
-    <div class="author-name">— Mohsin Kamil</div>
+  <!-- 📖 Story 2 -->
+  <section id="story2">
+    <div class="section-header">اللہ جی، سوری... بھول چوک معاف</div>
+    <div class="story-text" id="storyContent2">Loading story...</div>
   </section>
 
-  <!-- 📬 Contact the Author -->
-  <section id="contact" class="thanks-section">
-    <h2>Contact the Author</h2>
-    <p>
-      For feedback, questions, or just to say hello, you can reach me at:<br /><br />
-      📧 <a href="mailto:Mohsinkamil11@gmail.com">Mohsinkamil11@gmail.com</a>
-    </p>
+  <!-- 📖 Story 3 -->
+  <section id="story3">
+    <div class="section-header">تو ہم ساتھ ہوں</div>
+    <div class="story-text" id="storyContent3">Loading story...</div>
   </section>
 
-  <!-- Load story.txt -->
+  <!-- Load Stories via JS -->
   <script>
-    fetch("story.txt")
+    fetch("story1.txt")
+      .then(res => res.ok ? res.text() : Promise.reject())
+      .then(text => {
+        document.getElementById("storyContent1").textContent = text;
+      })
+      .catch(() => {
+        document.getElementById("storyContent1").textContent = "Failed to load story 1.";
+      });
+
+    fetch("story2.txt")
+      .then(res => res.ok ? res.text() : Promise.reject())
+      .then(text => {
+        document.getElementById("storyContent2").textContent = text;
+      })
+      .catch(() => {
+        document.getElementById("storyContent2").textContent = "Failed to load story 2.";
+      });
+
+    fetch("story3.txt")
       .then(res => res.ok ? res.text() : Promise.reject())
       .then(text => {
-        document.getElementById("storyContent").textContent = text;
+        document.getElementById("storyContent3").textContent = text;
       })
       .catch(() => {
-        document.getElementById("storyContent").textContent = "Failed to load story content.";
+        document.getElementById("storyContent3").textContent = "Failed to load story 3.";
       });
   </script>