From 4c8b0870be9f1ee92cc28d627e1e3498b393f3cb Mon Sep 17 00:00:00 2001
From: Yusuf Morsi <ymorsi7@gmail.com>
Date: Sun, 10 Nov 2024 13:08:44 -0800
Subject: [PATCH] Update index.html

---
 index.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 230f897..75122d1 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,13 @@
       margin-top: 1em;
       text-align: center;
     }
+    #bismillah {
+      margin-top: 20px;
+      text-align: center;
+    }
+    #bismillah img {
+      width: 200px;
+    }
     #logo {
       position: absolute;
       top: 10px;
@@ -139,7 +146,6 @@
       margin-bottom: 20px;
       color: #fff;
     }
-
     a{
       color: #039900;
     }
@@ -151,7 +157,11 @@
     <div class="tooltip">YM - Home</div>
   </div>
 
-  <h1 style = "color: rgb(3, 174, 0);">Quranic Ayat Interactive Exploration</h1>
+  <div id="bismillah">
+    <img src="bismillah.png" alt="Bismillah">
+  </div>
+
+  <h1 style="color: rgb(3, 174, 0);">Quranic Ayat Interactive Exploration</h1>
   <p>Learn about different ayat and insights in the Holy Quran. Search by verse / keyword!</p>
   <p><b>Notable Verses highlighted in gold!</b></p>
   
@@ -168,9 +178,8 @@ <h3>Verse Details</h3>
     </div>
   </div>
 
-
   <section id="writeup">
-    <h2  style = "color: #03ac00;">About the Project</h2>
+    <h2 style="color: #03ac00;">About the Project</h2>
     <h3>Rationale for Design Decisions</h3>
     <p>I picked this visualiation so that users can have a cool and aesthetically-appealing way of seeing the entire Quran in one image. A treemap was implementd so that we could with ease see the hierarchy of the data (i.e. Surahs/Chapters by size). Every Surah has a color so that we have contrast with different ones, especially if they are next to each other in the treemap. We've also highlighted notable/meaningful verses in gold so the user can identify and click on it with ease. At the end, a zooming/pan functionality was implemented after realizing it was harder to click on individual Ayat/Verses in the smaller Surahs. Implementing that with the thinner borders was able to solve that issue. A search bar was also implememted so that the user can filter by keyword. For example, if they'd like to only see verses with the word 'love,' it will grey out all the Ayat in that treemap that don't have that word. We also get the full verse on a side-panel when a user clicks on one.</p>
 
@@ -179,7 +188,6 @@ <h3>Development Process Overview</h3>
 
   </section>
 
-
   <div class="footer">
     Created for DSC 209R | Interactive Visualization: The Holy Quran
   </div>