| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Main Akeli Thi - Book</title> |
|
|
| |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> |
|
|
| |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Noto+Nastaliq+Urdu&display=swap" rel="stylesheet" /> |
|
|
| <style> |
| body { |
| margin: 0; |
| background: linear-gradient(to bottom right, #fdfaf6, #f3f0eb); |
| font-family: 'Playfair Display', serif; |
| color: #4a3e3e; |
| scroll-behavior: smooth; |
| } |
| |
| section { |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| padding: 3rem 2rem; |
| } |
| |
| |
| .title-name { |
| font-size: 3rem; |
| font-weight: bold; |
| color: #8a5b44; |
| } |
| |
| .subtitle { |
| font-size: 1.5rem; |
| color: #6c5f5b; |
| } |
| |
| .author-name { |
| font-size: 1.1rem; |
| color: #777; |
| margin-top: 2rem; |
| } |
| |
| .line-separator { |
| width: 80px; |
| height: 3px; |
| background-color: #8a5b44; |
| margin: 1.5rem auto; |
| border-radius: 5px; |
| } |
| |
| |
| .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-text { |
| font-family: 'Noto Nastaliq Urdu', serif; |
| font-size: 1.4rem; |
| text-align: justify; |
| white-space: pre-line; |
| max-width: 850px; |
| padding: 2rem; |
| background: #fff; |
| border-radius: 1rem; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.08); |
| } |
| |
| .section-header { |
| font-size: 2rem; |
| margin-bottom: 2rem; |
| font-weight: bold; |
| color: #8a5b44; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <section id="title"> |
| <div> |
| <div class="title-name">Main Akeli Thi</div> |
| <div class="line-separator"></div> |
| <div class="subtitle">Untold Story of Sidra</div> |
| <div class="author-name">By Mohsin Kamil</div> |
| </div> |
| </section> |
|
|
| |
| <section id="dedication" class="dedication-section"> |
| <div class="dedication-box"> |
| <div class="dedication-title">Dedication</div> |
| <div class="dedication-text"> |
| To my best friend, <strong>Damii</strong> —<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> |
|
|
| |
| <section id="story"> |
| <div> |
| <div class="section-header">The Story</div> |
| <div class="story-text" id="storyContent"> |
| Loading story... |
| </div> |
| </div> |
| </section> |
|
|
| |
| <script> |
| fetch("story.txt") |
| .then(res => res.ok ? res.text() : "Unable to load story.") |
| .then(text => { |
| document.getElementById("storyContent").textContent = text; |
| }) |
| .catch(() => { |
| document.getElementById("storyContent").textContent = "Failed to load story content."; |
| }); |
| </script> |
|
|
| </body> |
| </html> |
