Update index.html

index.html

@@ -7,8 +7,6 @@
 
   <!-- Bootstrap -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
-
-  <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Noto+Nastaliq+Urdu&display=swap" rel="stylesheet" />
 
   <style>
@@ -55,11 +53,52 @@
       border-radius: 5px;
     }
 
+    .toc-section {
+      background-color: #f9f5f0;
+      padding: 3rem 2rem;
+    }
+
+    .toc-section h2 {
+      font-size: 2.5rem;
+      color: #8a5b44;
+      margin-bottom: 1.5rem;
+    }
+
+    .toc-section p {
+      font-size: 1.3rem;
+      margin: 0.5rem 0;
+    }
+
+    .toc-section a {
+      color: #8a5b44;
+      text-decoration: none;
+      font-weight: bold;
+    }
+
+    .toc-section a:hover {
+      text-decoration: underline;
+    }
+
+    .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-text {
+      font-size: 1.3rem;
+      line-height: 2.2rem;
+      color: #4a3e3e;
+    }
+
     .section-header {
       font-size: 2rem;
       font-weight: bold;
       margin-bottom: 2rem;
       color: #8a5b44;
+      text-align: center;
     }
 
     .story-text {
@@ -83,29 +122,37 @@
       }
     }
 
-    .toc-section {
+    .thanks-section {
       background-color: #f9f5f0;
-      padding: 3rem 2rem;
+      padding: 4rem 2rem;
+      text-align: center;
     }
 
-    .toc-section h2 {
+    .thanks-section h2 {
       font-size: 2.5rem;
       color: #8a5b44;
       margin-bottom: 1.5rem;
     }
 
-    .toc-section p {
+    .thanks-section p {
       font-size: 1.3rem;
-      margin: 0.5rem 0;
+      line-height: 2.2rem;
+      color: #4a3e3e;
     }
 
-    .toc-section a {
+    .thanks-section .author-name {
+      font-size: 1.1rem;
+      color: #777;
+      margin-top: 2rem;
+    }
+
+    .thanks-section a {
       color: #8a5b44;
-      text-decoration: none;
       font-weight: bold;
+      text-decoration: none;
     }
 
-    .toc-section a:hover {
+    .thanks-section a:hover {
       text-decoration: underline;
     }
   </style>
@@ -130,6 +177,23 @@
     <p><a href="#story3">3. تو ہم ساتھ ہوں</a></p>
   </section>
 
+  <!-- 💌 Dedicated 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 1 -->
   <section id="story1">
     <div class="section-header">Main Akeli Thi</div>
@@ -148,34 +212,55 @@
     <div class="story-text" id="storyContent3">Loading story...</div>
   </section>
 
-  <!-- Load Stories via JS -->
+  <!-- 🌟 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>
+  </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>
+  </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>
+  </section>
+
+  <!-- Load Stories -->
   <script>
     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.";
-      });
+      .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.";
-      });
+      .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("storyContent3").textContent = text;
-      })
-      .catch(() => {
-        document.getElementById("storyContent3").textContent = "Failed to load story 3.";
-      });
+      .then(text => document.getElementById("storyContent3").textContent = text)
+      .catch(() => document.getElementById("storyContent3").textContent = "Failed to load story 3.");
   </script>
 
 </body>