-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (101 loc) · 3.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>Document</title>
<link rel="stylesheet" href="./assets/styles/style.css" />
<script src="./assets/scripts/bundle.js" defer></script>
</head>
<body>
<div class="backdrop"></div>
<div class="loader"></div>
<template class="search-template">
<div class="search-result">
<div class="text"><p></p></div>
<div class="audio">
<audio controls src="">
Your browser does not surpport the <code>audio</code>element.
</audio>
</div>
<div class="extra-info">
<p>Revlation--<span class="revelation"></span></p>
<p>Hizb--<span class="juzh"></span></p>
<p>Sajada--<span class="sajadah"></span></p>
<p>EnglishName--<span class="en-name"></span></p>
</div>
</div>
</template>
<template class="login">
<div class="login-box">
<div class="login-wrapper">
<label class="login-name" for="name">NAME:</label>
<input
class="login-input"
placeholder="Enter your name"
type="text"
name=""
id=""
/>
<p class="quran-fact">
“Read the Quran, for verily it will come on the Day of Standing as
an intercessor for its companions.” (Muslim) Imagine the day we are
enveloped with fear, shock and anxiety with our canopy being the
sun, exposing scorching heat. Imagine feeling restless, awaiting our
book of deeds, nervous as to which hand it will be placed upon. Yet,
imagine, the Noble Book who we took as a companion in the dunya,
intercedes, adamant we attain Jannah.
</p>
<button class="login-btn">login</button>
</div>
</div>
</template>
<template class="previous">
<div class="previous-search">
<p class="ayah number"></p>
<p class="english-result"></p>
</div>
</template>
<nav>
<label class="welcome-greeting" for=""
>Assalamun 'alaykum, <span></span>.</label
>
<div class="menu">
<label class="menu-label">
<img
src="./assets/images/menu-symbol-of-three-parallel-lines-svgrepo-com.svg"
alt=""
/></label>
<ul>
<li><button class="by-suraah">Search by Suraah</button></li>
<li><button class="by-ayah">Search by Ayah</button></li>
<li><button class="by-hib">Search by Hizb</button></li>
<li><button class="by-juz">Search by Ju'z</button></li>
</ul>
</div>
</nav>
<div class="container">
<div class="search-container">
<input
placeholder="Ayah format: 262 or 2:255"
class="search-input"
type="text"
/>
<button class="search-btn">Search</button>
</div>
<div class="welcome-text">
<p>
“Verily the one who recites the Quran beautifully, smoothly, and
precisely, he will be in the company of the noble and obedient angels.
And as for the one who recites with difficulty, stammering or
stumbling through its verses, then he will have TWICE that reward.”
(Sahih Al-Bukhari)
</p>
</div>
</div>
</body>
</html>