Update index.html

index.html

@@ -26,15 +26,34 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
+      background: linear-gradient(120deg, #f8fafc 0%, #e9d8fd 100%);
+      animation: fadeIn 1.2s;
+      position: relative;
+      flex-direction: column;
     }
     .half-title-page h2 {
-      font-size: 3rem;
-      color: #333;
+      font-size: 3.5rem;
+      color: #764ba2;
       margin: 0;
-      padding: 2rem;
-      border-bottom: 2px solid #764ba2;
+      padding: 2rem 1rem 1rem 1rem;
+      font-family: 'Noto Nastaliq Urdu', serif;
+      text-shadow: 0 4px 24px #b794f4, 0 1px 0 #fff;
+      letter-spacing: 2px;
+      position: relative;
+    }
+    .half-title-page .divider {
+      width: 80px;
+      height: 4px;
+      background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
+      border-radius: 2px;
+      margin: 1.5rem auto 0 auto;
     }
+    .half-title-page .motif {
+      font-size: 2.2rem;
+      color: #b794f4;
+      margin-top: 1.2rem;
+    }
+
     .title-page {
       text-align: center;
       min-height: 80vh;
@@ -42,40 +61,88 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      background: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
+      background: linear-gradient(120deg, #fff 0%, #e9d8fd 100%);
       padding: 2rem;
+      border: 2px solid #d6bcfa;
+      border-radius: 32px;
+      box-shadow: 0 8px 32px rgba(118, 75, 162, 0.13);
+      animation: fadeInUp 1.2s;
+      position: relative;
     }
     .title-page h1 {
-      font-size: 3.5rem;
-      color: #333;
+      font-size: 3.2rem;
+      color: #764ba2;
       margin-bottom: 2rem;
+      font-family: 'Noto Nastaliq Urdu', serif;
+      text-shadow: 0 2px 12px #e9d8fd;
+      letter-spacing: 1.5px;
+      animation: fadeIn 1.2s;
     }
     .title-page .author {
-      font-size: 1.8rem;
-      color: #666;
-      margin-bottom: 1rem;
+      font-size: 1.7rem;
+      color: #4b3869;
+      margin-bottom: 1.2rem;
+      font-family: 'Noto Nastaliq Urdu', serif;
+      animation: fadeIn 1.6s;
     }
     .title-page .publisher {
-      font-size: 1.4rem;
-      color: #888;
-      margin-top: 2rem;
+      font-size: 1.2rem;
+      color: #6b46c1;
+      margin-top: 2.5rem;
+      font-family: 'Amiri', serif;
+      letter-spacing: 1px;
+      animation: fadeIn 2s;
+    }
+    .title-page .motif {
+      font-size: 2.2rem;
+      color: #b794f4;
+      margin-bottom: 1.5rem;
     }
+
     .dedication-page {
       text-align: center;
       min-height: 60vh;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
+      background: linear-gradient(120deg, #f8fafc 0%, #e9d8fd 100%);
       font-style: italic;
+      animation: fadeInUp 1.2s;
+      position: relative;
+    }
+    .dedication-page .dedication-box {
+      background: rgba(255,255,255,0.95);
+      border: 2px solid #d6bcfa;
+      border-radius: 24px;
+      box-shadow: 0 4px 24px #b794f4;
+      padding: 2.5rem 2rem 2rem 2rem;
+      max-width: 600px;
+      margin: auto;
+      position: relative;
+      font-family: 'Noto Nastaliq Urdu', serif;
     }
     .dedication-page .dedication-text {
-      font-size: 1.8rem;
-      color: #555;
-      max-width: 80%;
-      line-height: 1.8;
-      padding: 2rem;
-      border-right: 3px solid #764ba2;
+      font-size: 1.6rem;
+      color: #4b3869;
+      line-height: 2.1;
+      margin-top: 1.2rem;
+    }
+    .dedication-page .quote-icon {
+      font-size: 2.5rem;
+      color: #b794f4;
+      position: absolute;
+      top: 1.2rem;
+      left: 1.2rem;
+      opacity: 0.7;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(40px); }
+      to { opacity: 1; transform: translateY(0); }
     }
   </style>
 </head>
@@ -160,11 +227,14 @@
           page.innerHTML = `
             <div class="half-title-page">
               <h2>${chunk.content}</h2>
+              <div class="divider"></div>
+              <div class="motif">★</div>
             </div>`;
         } else if (chunk.type === 'title') {
           const [title, author, publisher] = chunk.content.split('\n').map(line => line.trim());
           page.innerHTML = `
             <div class="title-page">
+              <div class="motif">❦</div>
               <h1>${title}</h1>
               <div class="author">تصنیف: ${author}</div>
               <div class="publisher">${publisher}</div>
@@ -172,7 +242,10 @@
         } else if (chunk.type === 'dedication') {
           page.innerHTML = `
             <div class="dedication-page">
-              <div class="dedication-text">${chunk.content}</div>
+              <div class="dedication-box">
+                <span class="quote-icon">❝</span>
+                <div class="dedication-text">${chunk.content}</div>
+              </div>
             </div>`;
         } else {
           page.innerHTML = parseContent(chunk);