-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (89 loc) · 5.4 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
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>القرآن الكريم - حفظ وتسميع بالكتابة</title>
<meta name="description" content="حفظ وتسميع القرآن الكريم بالكتابة. الإستماع إلى القرآن الكريم" />
<link rel="stylesheet" href="css/bootstrap.rtl.min.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>
</head>
<body>
<div class="container" style="margin-top: 80px" id="QuranApp">
<div class="card">
<div class="card-header bg-dark text-white fixed-top">
<div class="container">
<div class="row">
<div class="col-md-1 d-sm-none d-md-block">
سورة
</div>
<div class="col-md-4 col-sm-6">
<select class="form-control" @change="SuraChanged()" v-model='CurrentSuraId' id="Sura">
<option v-for="s in SuraInfo" :value="s.id">{{ s.name }}</option>
</select>
</div>
<div class="col-md-2 d-sm-none d-md-block">
<button class="btn btn-primary" @click="ToggleAyat()">
اظهار/اخفاء الآيات
</button>
</div>
<div class="col-md-2 d-sm-none d-md-block">
<button class="btn" @click="ListenToSurah()"
v-bind:class="IsPlayingSura ? 'btn-danger':'btn-success'">
<span v-if="IsPlayingSura">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-stop-fill" viewBox="0 0 16 16">
<path
d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5z" />
</svg>
</span>
<span v-else>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-play-fill" viewBox="0 0 16 16">
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg>
</span>
الاستماع للسورة
</button>
</div>
</div>
</div>
</div>
<div class="mb50 d-block d-sm-none"></div>
<div class="card-body">
<div v-for="aya in CurrentSuraText" class="mb-3">
<div class="AyaText" v-if="ShowAyat">{{ aya.text }}</div>
<div class="input-group">
<span class="input-group-text text-white border-2" @click="PlayAya(aya.aya)" id="PlayAya"
title="استماع"
v-bind:class="(AyatStatus[aya.aya - 1] || CurrentPlayingAya == aya.aya) ? 'border-success bg-success' : 'border-danger bg-danger'">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="30" fill="currentColor"
class="bi bi-file-play" viewBox="0 0 16 16">
<path
d="M6 10.117V5.883a.5.5 0 0 1 .757-.429l3.528 2.117a.5.5 0 0 1 0 .858l-3.528 2.117a.5.5 0 0 1-.757-.43z" />
<path
d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z" />
</svg>
</span>
<input class="form-control form-control-lg border-2 p-3 AyaBox"
v-bind:class="AyatStatus[aya.aya - 1] ? 'border-success' : 'border-danger'"
v-on:keydown="HandleTypeing(aya.aya, $event)" v-on:input="HandleTypeing(aya.aya, $event)"
v-model="UserText[aya.aya - 1]" />
<span class="input-group-text AyaNum text-white border-2"
v-bind:class="AyatStatus[aya.aya - 1] ? 'border-success bg-success' : 'border-danger bg-danger'">
<strong>{{ aya.aya }}</span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/vue.global.js" type="text/javascript"></script>
<script src="QuranJson/Sura.js" type="text/javascript"></script>
<script src="QuranJson/SuraText.js" type="text/javascript"></script>
<script src="js/QuranApp.js?v=5" type="text/javascript"></script>
</body>
</html>