TajweedQuran/index.html at main · hadealahmad/TajweedQuran · GitHub

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="ar" dir="rtl" class="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tajweed Quran Reader</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap"
        rel="stylesheet">

    <link href="src/css/output.css" rel="stylesheet">
</head>

<body class="bg-background text-foreground antialiased min-h-screen flex flex-col font-sans">

    <header class="border-b border-border bg-card/80 backdrop-blur sticky top-0 z-50">
        <div class="container mx-auto px-4 h-16 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <h1 id="app-title" class="text-xl font-bold text-primary">Tajweed Quran</h1>

                <div class="hidden md:flex gap-2">
                    <select id="select-surah"
                        class="h-9 px-3 rounded-md border border-input bg-transparent text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
                    </select>
                    <select id="select-page"
                        class="h-9 w-20 px-3 rounded-md border border-input bg-transparent text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
                    </select>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <button id="btn-lang"
                    class="h-9 px-3 rounded-md text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
                    English
                </button>

                <button id="btn-theme"
                    class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="md:hidden border-t border-border px-4 py-2 flex gap-2">
            <select id="select-surah-mobile"
                class="flex-1 h-9 px-3 rounded-md border border-input bg-transparent text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
            </select>
            <select id="select-page-mobile"
                class="w-24 h-9 px-3 rounded-md border border-input bg-transparent text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
            </select>
        </div>
    </header>

    <main class="flex-1 container mx-auto px-4 py-8 pb-32 md:pb-24 flex flex-col items-center">

        <div id="loader" class="hidden">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </div>

        <div id="quran-page"
            class="w-full max-w-4xl bg-card rounded-xl shadow-sm border border-border min-h-[600px] p-6 md:p-10 relative">

            <div
                class="absolute top-4 left-4 right-4 md:flex hidden justify-between text-xs text-muted-foreground uppercase opacity-50">
                <span id="page-info-surah">Al-Fatiha</span>
                <span id="page-info-num">Page 1</span>
            </div>

            <div id="quran-content" class="text-center font-quran text-3xl md:text-4xl quran-leading md:mt-6" dir="rtl">
            </div>

            <button id="nav-prev"
                class="hidden md:flex absolute top-1/2 -right-12 -translate-y-1/2 h-10 w-10 items-center justify-center rounded-full bg-secondary text-secondary-foreground hover:bg-secondary/80">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m9 18 6-6-6-6" />
                </svg>
            </button>
            <button id="nav-next"
                class="hidden md:flex absolute top-1/2 -left-12 -translate-y-1/2 h-10 w-10 items-center justify-center rounded-full bg-secondary text-secondary-foreground hover:bg-secondary/80">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m15 18-6-6 6-6" />
                </svg>
            </button>
        </div>

        <footer class="mt-8 flex justify-center">
            <a href="https://community.itqan.dev/d/144" target="_blank" style="display:inline-flex;border-radius:3px;overflow:hidden;font-size:11px;font-family:monospace;height:20px;line-height:20px;text-decoration:none;"><span style="background:#10b981;color:#fff;padding:0 8px;font-weight:bold;">itqan</span><span style="background:#f1f5f9;color:#0f172a;padding:0 8px;">ناقش</span></a>
        </footer>

    </main>

    <div class="border-t border-border bg-card/80 backdrop-blur sticky bottom-0 z-50">
        <div class="md:hidden border-b border-border px-4 py-2 flex gap-2">
            <button id="nav-prev-mobile"
                class="flex-1 h-10 flex items-center justify-center gap-2 rounded-md bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors">
                <svg class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="m15 18-6-6 6-6" />
                </svg>
                <span class="text-sm font-medium">Previous</span>
            </button>
            <button id="nav-next-mobile"
                class="flex-1 h-10 flex items-center justify-center gap-2 rounded-md bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors">
                <span class="text-sm font-medium">Next</span>
                <svg class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="m9 18 6-6-6-6" />
                </svg>
            </button>
        </div>

        <div class="container mx-auto max-w-4xl flex items-center gap-4 p-4">
            <button id="btn-play"
                class="h-10 w-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition shadow-lg shadow-primary/20">
                <svg id="icon-play" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                    fill="currentColor">
                    <path d="M5 3l14 9-14 9V3z" />
                </svg>
                <svg id="icon-pause" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                    fill="currentColor" class="hidden">
                    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
                </svg>
            </button>

            <div class="flex-1 flex flex-col gap-1">
                <div class="flex justify-between text-xs text-muted-foreground">
                    <span id="player-status">Ready</span>
                    <span id="player-time">00:00 / 00:00</span>
                </div>
                <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden cursor-pointer"
                    id="progress-container">
                    <div id="progress-bar" class="h-full bg-primary transition-all duration-300 w-0"></div>
                </div>
            </div>

            <div class="hidden md:block text-xs font-medium text-foreground">
                <span id="player-reciter">Mishary Alafasy</span>
            </div>

            <audio id="audio-element"></audio>
        </div>
    </div>

    <div id="tajweed-modal-mobile"
        class="md:hidden fixed left-0 right-0 z-40 bg-card border-t-2 border-primary shadow-2xl transform translate-y-full transition-transform duration-300 ease-out"
        style="bottom: var(--player-bar-height, 0px);">
        <div class="p-4">
            <div class="flex items-start justify-between mb-3">
                <div class="flex-1">
                    <h3 id="modal-title" class="text-lg font-bold text-primary mb-1"></h3>
                    <p id="modal-word" class="text-2xl font-quran text-foreground mb-2"></p>
                </div>
                <button id="modal-close"
                    class="h-8 w-8 rounded-full hover:bg-muted flex items-center justify-center -mt-1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <p id="modal-desc" class="text-sm text-muted-foreground mb-3"></p>
            <img id="modal-img" class="w-full h-auto rounded hidden" alt="Tajweed Rule">
        </div>
    </div>

    <div id="tajweed-tooltip"
        class="fixed z-50 hidden max-w-xs p-3 bg-popover text-popover-foreground text-xs rounded-lg shadow-lg border border-border pointer-events-none transition-opacity duration-200">
        <strong id="tooltip-title" class="block text-primary mb-1 text-sm"></strong>
        <p id="tooltip-desc" class="mb-2"></p>
        <img id="tooltip-img" class="w-full h-auto rounded hidden" alt="Tajweed Rule">
    </div>

    <script src="src/js/config.js"></script>
    <script src="src/js/utils/localization.js"></script>
    <script src="src/js/managers/tajweed.js"></script>
    <script src="src/js/core/api.js"></script>
    <script src="src/js/core/player.js"></script>
    <script src="src/js/managers/ui.js"></script>
    <script src="src/js/app.js"></script>
</body>

</html>