add settings and uthmani option

src/components/Ayah.js

@@ -1,57 +1,116 @@
 const Ayah = (props) => {
-
-    if (props.page[props.index][1].includes("بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ")) {
-        const entryString = "بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ";
-        const entryArray = entryString.split(" ");
-        const letter = entryArray.splice(3 + 1, entryArray.length - (3 + 1) );
-        if (letter[0] === "ٱلرَّحِيمِ") {
-            entryArray.push(letter);
+    if (props.option === "indopak") {
+        if (props.page[props.index][1].includes("بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ")) {
+            const entryString = "بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ";
+            const entryArray = entryString.split(" ");
+            const letter = entryArray.splice(3 + 1, entryArray.length - (3 + 1) );
+            if (letter[0] === "ٱلرَّحِيمِ") {
+                entryArray.push(letter);
+            }
+            const letterstogether = letter.join(" ");
+            const generateFirstAyah = () => {
+                if (letterstogether === "") {
+                    return "";
+                }
+                else {
+                    return <> <span>{letterstogether} </span> <span dangerouslySetInnerHTML={{__html: "<span>&#62720;</span>"}}></span> </>;
+                }
+            }
+            return (
+                <>
+                    <hr className="headAyahTop" />
+                    <div className="flex justify-center">
+                        <p className="font-bold text-5xl max-lg:text-2xl surah">❁ {props.page[props.index][2]} ❁</p>
+                    </div>
+                    <hr className="headAyahTop headAyahBottom"/>
+                    <div className="flex justify-center">
+                        <p className=" font-semibold text-5xl max-lg:text-2xl">❁ {entryArray.join(" ")} ۝ ❁</p>
+                    </div>
+                    <hr className="headAyahBottom"/>
+                    <span>{generateFirstAyah()}</span>
+                </>
+            )
         }
-        const letterstogether = letter.join(" ");
-        const generateFirstAyah = () => {
-            if (letterstogether === "") {
-                return "";
+        else if (props.page[props.index][0] === 1) {
+            return(
+            <>
+                    <hr className="headAyahTop" />
+                    <div className="flex justify-center">
+                        <p className="font-bold text-5xl max-lg:text-2xl surah">❁ {props.page[props.index][2]} ❁</p>
+                    </div>
+                    <hr className="headAyahTop headAyahBottom"/>
+                    <div className="flex justify-center">
+                        <p className=" font-semibold text-5xl max-lg:text-2xl">❁ بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ ۝ ❁</p>
+                    </div>
+                    <hr className="headAyahBottom"/>
+                    <span className="tran">{props.page[props.index][1]} </span>
+                    <span className="tran" dangerouslySetInnerHTML={{__html: `<span>&#${62719 + 1};</span>`}}></span>
+            </>)
+        }
+        return (
+            <>
+            <span className="tran"> {props.page[props.index][1]} </span>
+            <span className="tran" dangerouslySetInnerHTML={{__html: `<span>&#${62719 + props.number};</span>`}}></span>
+            </>
+        );
+    }
+    else if (props.option === "uthmani") {
+        if (props.page[props.index][1].includes("بِسْمِ ٱللَّهِ ٱلرَّحْمَـٰنِ ٱلرَّحِيمِ")) {
+            const entryString = "بِسْمِ ٱللَّهِ ٱلرَّحْمَـٰنِ ٱلرَّحِيمِ";
+            const entryArray = entryString.split(" ");
+            const letter = entryArray.splice(3 + 1, entryArray.length - (3 + 1) );
+            if (letter[0] === "ٱلرَّحِيمِ") {
+                entryArray.push(letter);
             }
-            else {
-                return <> <span>{letterstogether} </span> <span dangerouslySetInnerHTML={{__html: "<span>&#62720;</span>"}}></span> </>;
+            const letterstogether = letter.join(" ");
+            const generateFirstAyah = () => {
+                if (letterstogether === "") {
+                    return "";
+                }
+                else {
+                    return <> <span>{letterstogether} </span> <span dangerouslySetInnerHTML={{__html: "<span>&#62720;</span>"}}></span> </>;
+                }
             }
+            return (
+                <>
+                    <hr className="headAyahTop" />
+                    <div className="flex justify-center">
+                        <p className="font-bold text-5xl max-lg:text-2xl surah">❁ {props.page[props.index][2]} ❁</p>
+                    </div>
+                    <hr className="headAyahTop headAyahBottom"/>
+                    <div className="flex justify-center">
+                        <p className=" font-semibold text-5xl max-lg:text-2xl">❁ {entryArray.join(" ")} ۝ ❁</p>
+                    </div>
+                    <hr className="headAyahBottom"/>
+                    <span>{generateFirstAyah()}</span>
+                </>
+            )
+        }
+        else if (props.page[props.index][0] === 1) {
+            return(
+            <>
+                    <hr className="headAyahTop" />
+                    <div className="flex justify-center">
+                        <p className="font-bold text-5xl max-lg:text-2xl surah">❁ {props.page[props.index][2]} ❁</p>
+                    </div>
+                    <hr className="headAyahTop headAyahBottom"/>
+                    <div className="flex justify-center">
+                        <p className=" font-semibold text-5xl max-lg:text-2xl">❁ بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ ۝ ❁</p>
+                    </div>
+                    <hr className="headAyahBottom"/>
+                    <span className="tran">{props.page[props.index][1]} </span>
+                    <span className="tran" dangerouslySetInnerHTML={{__html: `<span>&#${64511 + 1};</span>`}}></span>
+            </>)
         }
         return (
             <>
-                <hr className="headAyahTop" />
-                <div className="flex justify-center">
-                    <p className="font-bold text-5xl max-lg:text-2xl surah">❁ {props.page[props.index][2]} ❁</p>
-                </div>
-                <hr className="headAyahTop headAyahBottom"/>
-                <div className="flex justify-center">
-                    <p className=" font-semibold text-5xl max-lg:text-2xl">❁ {entryArray.join(" ")} ۝ ❁</p>
-                </div>
-                <hr className="headAyahBottom"/>
-                <span>{generateFirstAyah()}</span>
+            <span className="tran"> {props.page[props.index][1]} </span>
+            <span className="tran" dangerouslySetInnerHTML={{__html: `<span>&#${64511 + props.number};</span>`}}></span>
             </>
-        )
+        );
     }
-    else if (props.page[props.index][0] === 1) {
-        return(
-        <>
-                <hr className="headAyahTop" />
-                <div className="flex justify-center">
-                    <p className="font-bold text-5xl max-lg:text-2xl surah">❁ {props.page[props.index][2]} ❁</p>
-                </div>
-                <hr className="headAyahTop headAyahBottom"/>
-                <div className="flex justify-center">
-                    <p className=" font-semibold text-5xl max-lg:text-2xl">❁ بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ ۝ ❁</p>
-                </div>
-                <hr className="headAyahBottom"/>
-                <span className="tran">{props.page[props.index][1]} </span>
-                <span className="tran" dangerouslySetInnerHTML={{__html: `<span>&#${62719 + 1};</span>`}}></span>
-        </>)
+    else {
+        return null;
     }
-    return (
-        <>
-        <span className="tran"> {props.page[props.index][1]} </span>
-        <span className="tran" dangerouslySetInnerHTML={{__html: `<span>&#${62719 + props.number};</span>`}}></span>
-        </>
-    );
 }
 export default Ayah;

src/components/Book.js

@@ -1,5 +1,6 @@
 import Page from "./Page";
 import Cover from "./Cover";
+import SettingsPage from "./settings";
 import TableOfContents from "./tableOfContents/TableOfContents";
 import swal from 'sweetalert'
 import MobileTurnPage from "./mobileTurnPage";
@@ -26,6 +27,13 @@ function Book(props) {
             </div>
         )
     }
+    if (props.pg === -3){
+        return (
+            <div className="tran w-full items-center bg-slate-300 text-5xl max-lg:text-3xl text-right p-4 pb-8 rounded border-4 border-slate-400 shadow-lg">
+                <SettingsPage localStorage={localStorage}/>
+            </div>
+        )
+    }
     if (props.pg === 604) {
         return (
             <div className="tran">
@@ -62,7 +70,7 @@ function Book(props) {
                     <MobileTurnPage turnPage={"back"} setPg={props.setPg} pg={props.pg}/>
                 </div>
 
-                <Page pg={props.pg} />
+                <Page pg={props.pg} localStorage={localStorage}/>
             </div>
         );
     }
@@ -79,7 +87,7 @@ function Book(props) {
                     <button onClick={setBookMark} className="w-1/4 p-2 text-right hover:-translate-y-1 hover:scale-110 transition ease-in-out hover:text-green-800 font-bold">Bookmark</button>
                 </div>
 
-                <Page pg={props.pg} />
+                <Page pg={props.pg} localStorage={localStorage} />
             </div>
         );
     }

src/components/Cover.js

@@ -26,6 +26,9 @@ const Cover = (props) => {
 
         }
     }
+    const gotosettings = () => {
+        return props.setPg(-3);
+    }
     return (
         <div className="cover bg-green-900 p-5 rounded-xl shadow-lg flex justify-center flex-col h-3/4 border-4 border-green-950">
             <h1 className="title font-bold text-9xl max-lg:text-8xl text-center text-yellow-300">Quran</h1>
@@ -34,6 +37,7 @@ const Cover = (props) => {
             <h5 className="text-center text-xl text-yellow-700 ntext">Text from <a className='underline' href="https://www.quran.com/">Quran.com</a> API</h5>
             <div className="flex justify-center flex-col mt-14">
                 <button type="button" onClick={Start} className=" border-4 mt-1 border-yellow-900 bg-yellow-600 duration-150 hover:text-slate-800 hover:bg-yellow-300 hover:-translate-y-1 hover:scale-110 transition ease-in-out p-2 rounded-md text-center text-slate-200 text-xl font-bold active:bg-yellow-400 ntext">Start Reading</button>
+                <button type="button" onClick={gotosettings} className=" border-4 mt-1 border-yellow-900 bg-yellow-600 duration-150 hover:text-slate-800 hover:bg-yellow-300 hover:-translate-y-1 hover:scale-110 transition ease-in-out p-2 rounded-md text-center text-slate-200 text-xl font-bold active:bg-yellow-400 ntext">Settings</button>
                 <button type="button" onClick={StartFromTOB} className=" border-4 mt-1 border-yellow-900 bg-yellow-600 duration-150 hover:text-slate-800 hover:bg-yellow-300 hover:-translate-y-1 hover:scale-110 transition ease-in-out p-2 rounded-md text-center text-slate-200 text-xl font-bold active:bg-yellow-400 ntext">Table Of Contents</button>
                 <button type="button" onClick={Bookmark} className=" border-4 mt-1 border-yellow-900 bg-yellow-600 duration-150 hover:text-slate-800 hover:bg-yellow-300 hover:-translate-y-1 hover:scale-110 transition ease-in-out p-2 rounded-md text-center text-slate-200 text-xl font-bold active:bg-yellow-400 ntext">Read From Bookmark</button>
                 <button type="button" onClick={clearLocalStorage} className=" border-4 mt-1 border-yellow-900 bg-yellow-600 duration-150 hover:text-slate-800 hover:bg-yellow-300 hover:-translate-y-1 hover:scale-110 transition ease-in-out p-2 rounded-md text-center text-slate-200 text-xl font-bold active:bg-yellow-400 ntext">Clear Bookmarks</button>

src/components/Page.js

@@ -1,5 +1,4 @@
 import Ayah from "./Ayah";
-import Cover from "./Cover";
 function Page(props) {
     if (props.pg < -1 || props.pg > 605) {
         return (
@@ -8,34 +7,50 @@ function Page(props) {
             </div>
         )
     }
-    else if (props.pg === -1) {
+    let page = null
+    if (props.localStorage.getItem("quranFont") === "indopak") {
+        page = require(`../models/indopak/page-${props.pg}.json`);
+        const generateAyahs = () => {
+            return page.map((item, index) => {
+                return <Ayah page={page} option="indopak" index={index} number={page[index][0]} key={index}/>;
+            });
+        }
         return (
-            <div>
-                <Cover />
+            <div className="indopak transition ease-in-out duration-300 ayah p-90 wideletters leading-loose">
+                {generateAyahs()}
             </div>
         )
     }
-    const page = require("../models/page-" + props.pg);
-    const generateAyahs = () => {
-        return page.map((item, index) => {
-            return <Ayah page={page} index={index} number={page[index][0]} key={index}/>;
-        });
+    else if (props.localStorage.getItem("quranFont") === "uthmani") {
+        page = require(`../models/uthmani/page-${props.pg}.json`);
+        const generateAyahs = () => {
+            return page.map((item, index) => {
+                return <Ayah page={page} option="uthmani" index={index} number={page[index][0]} key={index}/>;
+            });
+        }
+        return (
+            <div className="uthmani transition ease-in-out duration-300 ayah p-90 wideletters leading-loose">
+                {generateAyahs()}
+            </div>
+        )
     }
-    if (props.pg === 0 || props.pg === 1) {
+    else {
+        page = require(`../models/indopak/page-${props.pg}.json`);
+
+        const generateAyahs = () => {
+            return page.map((item, index) => {
+                return <Ayah page={page} option="indopak" index={index} number={page[index][0]} key={index}/>;
+            });
+        }
         return (
-            <div className="ayahs transition ease-in-out duration-300 ayah p-90 wideletters leading-loose">
+            <div className="indopak transition ease-in-out duration-300 ayah p-90 wideletters leading-loose">
                 {generateAyahs()}
-                <br/>
-                <br/>
-                <br/>
-                <br/>
             </div>
         )
     }
-    return (
-        <div className="ayahs transition ease-in-out duration-300 ayah p-90 wideletters leading-loose">
-            {generateAyahs()}
-        </div>
-    )
+
+
+
+
 }
 export default Page;

src/components/settings.js

@@ -0,0 +1,24 @@
+
+const SettingsPage = (props) => {
+
+    const saveSettings = (e) => {
+        props.localStorage.setItem("quranFont", e);
+    }
+
+    return (
+        <div className="flex justify-center flex-col h-3/4 text-center">
+            <h1 className="p-5 title font-bold contents text-center">Settings</h1>
+            <form>
+                <label className="ntext text-3xl">Quran Font: </label>
+                <select onChange={(e) => saveSettings(e.target.value)} className="selection ntext p-1 rounded-md text-3xl bg-slate-300 border-slate-800 border-none">
+                    <option value="indopak" className="bg-slate-400 text-slate-800">Indopak</option>
+                    <option value="uthmani" className="bg-slate-400 text-slate-800">Uthmani Hafezi</option>
+                </select>
+                <br/>
+            </form>
+
+        </div>
+    )
+}
+
+export default SettingsPage;

src/index.css

@@ -26,6 +26,16 @@
   font-family: "AD";
   src: url("../public/fonts/ArchitectsDaughter-Regular.woff2") format("woff2");
 }
+@font-face {
+  font-family: "uthmani";
+  src: url("../public/fonts/uthmani.woff2") format("woff2");
+}
+.selection {
+  -webkit-appearance: none;
+}
+.save {
+  direction: rtl;
+}
 /* 
 body {
   margin: 0;
@@ -48,11 +58,15 @@ body {
 .book {
   height: 100%;
 }
-.ayahs {
+.indopak {
   font-family: "IndoPak", sans-serif;
   direction: rtl;
 
 }
+.uthmani {
+  font-family: "uthmani", sans-serif;
+  direction: rtl;
+}
 .tran {
   animation-name: transition;
   animation-duration: 1.5s;