-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
90 lines (87 loc) · 9.27 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
<!DOCTYPE html>
<html class="overflow-hidden h-full" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Amiri&family=Nunito:wght@900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="./dist/css/output.css" rel="stylesheet">
<title>PowQuran</title>
<meta name="author" content="Abi Noval Fauzi">
<meta name="description" class="web-desc" content="PowQuran adalah Al-Quran online yang bisa di akses di handphone ataupun laptop dengan mudah, mengaji dan dengarkan ayat-ayat suci dimanapun kamu berada!">
<meta name="keywords" content="al-quran, quran, islam, muslim, surah, ayat" />
<link rel="canonical" href="https://abinoval.github.io/PowQuran/">
<link rel="manifest" href="manifest.json">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://abinoval.github.io/PowQuran/">
<meta property="og:title" content="PowQuran">
<meta property="og:description" class="web-desc" content="PowQuran adalah Al-Quran online yang bisa di akses di handphone ataupun laptop dengan mudah, mengaji dan dengarkan ayat-ayat suci dimanapun kamu berada!">
<meta property="og:image" content="./PowQuran.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://abinoval.github.io/PowQuran/">
<meta property="twitter:title" content="PowQuran">
<meta property="twitter:description" class="web-desc" content="PowQuran adalah Al-Quran online yang bisa di akses di handphone ataupun laptop dengan mudah, mengaji dan dengarkan ayat-ayat suci dimanapun kamu berada!">
<meta property="twitter:image" content="./PowQuran.png">
</head>
<body class="overflow-hidden h-full">
<div class="overflow-hidden h-screen relative">
<div class="px-8 py-2 flex justify-between items-center border-b fixed top-0 inset-x-0 bg-white z-50">
<a href="#" class="text-xl font-black font-['nunito'] md:order-1 order-2 text-gray-800"><span class="inline-block text-blue-600">Pow</span>Quran</a>
<div class="md:flex gap-2 order-2 items-center hidden">
<form method="" class="search" action="">
<input class="border py-1.5 px-3 rounded-md focus:outline-none ring ring-transparent ring-offset-2 focus:ring-blue-600 font-['poppins'] search-input" placeholder="Cari surat.." type="search">
</form>
<button onclick="return alert('Segera! Belum ada waktu :)')" class="bg-blue-600 p-2 rounded-md focus:outline-none ring ring-transparent ring-offset-2 focus:ring-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg>
</button>
<a href="https://github.com/abinoval/PowQuran" target="_blank" class="block bg-blue-600 p-2 rounded-md focus:outline-none ring ring-transparent ring-offset-2 focus:ring-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path></svg>
</a>
</div>
<button id="sidebar-toggle" class="order-1 bg-blue-600 p-2 rounded-md focus:outline-none ring ring-transparent ring-offset-2 focus:ring-blue-600 md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
</button>
</div>
<div class="flex relative h-full z-10 overflow-hidden">
<div id="sidebar" class="min-w-[280px] w-[280px] max-w-full md:translate-x-0 -translate-x-72 px-8 bg-white mt-14 py-6 font-['poppins'] space-y-1 border-r fixed bottom-0 top-0 overflow-x-auto transition-all duration-300 z-10">
<div class="flex gap-2 items-center flex-wrap md:hidden">
<button onclick="return alert('Segera! Belum ada waktu :)')" class="bg-blue-600 p-2 rounded-md focus:outline-none ring ring-transparent ring-offset-2 focus:ring-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg>
</button>
<a href="https://github.com/abinoval/PowQuran" target="_blank" class="block bg-blue-600 p-2 rounded-md focus:outline-none ring ring-transparent ring-offset-2 focus:ring-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: rgba(255, 255, 255, 1);"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path></svg>
</a>
<form class="search">
<input class="border py-1.5 px-3 rounded-md focus:outline-none ring ring-transparent ring-offset-2 focus:ring-blue-600 font-['poppins'] w-full mb-5" placeholder="Cari surat.." type="search">
</form>
</div>
<div id="surah-list" class="space-y-1">
<p class="font-['poppins'] font-medium text-lg text-center">Tunggu sebentar...</p>
</div>
</div>
<div class="px-8 mt-14 py-6 w-full md:ml-[280px] flex flex-col justify-between overflow-y-auto h-[calc(100vh-39px-0.5rem)] z-[5]">
<div>
<div class="space-y-2 mb-4" id="surah-header">
<h1 class="font-['poppins'] text-2xl font-bold text-gray-800"></h1>
<p class="font-['poppins'] text-gray-600"></p>
</div>
<div id="ayah-list" class="space-y-8">
<p class="font-['poppins'] font-medium text-lg text-center">Tunggu sebentar...</p>
</div>
</div>
<footer class="flex items-center gap-1 border-t mt-10 pt-4 font-['poppins'] text-sm">
Made with
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);">
<path d="M12 4.595a5.904 5.904 0 0 0-3.996-1.558 5.942 5.942 0 0 0-4.213 1.758c-2.353 2.363-2.352 6.059.002 8.412l7.332 7.332c.17.299.498.492.875.492a.99.99 0 0 0 .792-.409l7.415-7.415c2.354-2.354 2.354-6.049-.002-8.416a5.938 5.938 0 0 0-4.209-1.754A5.906 5.906 0 0 0 12 4.595zm6.791 1.61c1.563 1.571 1.564 4.025.002 5.588L12 18.586l-6.793-6.793c-1.562-1.563-1.561-4.017-.002-5.584.76-.756 1.754-1.172 2.799-1.172s2.035.416 2.789 1.17l.5.5a.999.999 0 0 0 1.414 0l.5-.5c1.512-1.509 4.074-1.505 5.584-.002z"></path>
</svg>
by Abi Noval Fauzi
</footer>
</div>
</div>
</div>
<script src="./dist/js/main.js"></script>
</body>
</html>