├── public
    ├── _redirects
    ├── favicon.ico
    └── image
    │   ├── allah.webp
    │   ├── quran.webp
    │   ├── hadits.webp
    │   ├── lighter.webp
    │   ├── muhammad.webp
    │   ├── muslim.webp
    │   ├── prayer.webp
    │   ├── praying.webp
    │   └── tasbih.webp
├── src
    ├── playground.js
    ├── style.css
    ├── main.js
    ├── components
    │   ├── home
    │   │   ├── Footer.vue
    │   │   ├── CardMenu.vue
    │   │   ├── Main.vue
    │   │   ├── Header.vue
    │   │   └── PrayerSchedule.vue
    │   ├── reusable
    │   │   ├── DefaultContainer.vue
    │   │   ├── NotFoundComponent.vue
    │   │   ├── ScrollOnTop.vue
    │   │   ├── HeaderPage.vue
    │   │   └── Accordion.vue
    │   └── quran
    │   │   ├── TafsirSurah.vue
    │   │   ├── ListCardSurah.vue
    │   │   └── ListCardAyat.vue
    ├── pages
    │   ├── Home.vue
    │   ├── NotFound.vue
    │   ├── Quran.vue
    │   ├── DailyPrayer.vue
    │   ├── TahlilReading.vue
    │   ├── Bookmark.vue
    │   ├── TheHadith.vue
    │   ├── DetailSurah.vue
    │   └── TheHadithDetail.vue
    ├── App.vue
    ├── router
    │   └── index.js
    └── assets
    │   └── search-not-found.svg
├── .vscode
    └── extensions.json
├── postcss.config.js
├── vite.config.js
├── index.html
├── tailwind.config.js
├── .gitignore
├── package.json
└── README.md


/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200


--------------------------------------------------------------------------------
/src/playground.js:
--------------------------------------------------------------------------------
1 | // abu-dawud => Abu Dawud
2 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/image/allah.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/allah.webp


--------------------------------------------------------------------------------
/public/image/quran.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/quran.webp


--------------------------------------------------------------------------------
/public/image/hadits.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/hadits.webp


--------------------------------------------------------------------------------
/public/image/lighter.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/lighter.webp


--------------------------------------------------------------------------------
/public/image/muhammad.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/muhammad.webp


--------------------------------------------------------------------------------
/public/image/muslim.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/muslim.webp


--------------------------------------------------------------------------------
/public/image/prayer.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/prayer.webp


--------------------------------------------------------------------------------
/public/image/praying.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/praying.webp


--------------------------------------------------------------------------------
/public/image/tasbih.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sastra12/islamic-app/HEAD/public/image/tasbih.webp


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | import router from "./router/index"
 5 | 
 6 | import "./style.css"
 7 | 
 8 | const app = createApp(App)
 9 | 
10 | app.use(router)
11 | app.mount('#app')
12 | 


--------------------------------------------------------------------------------
/src/components/home/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="mt-8 flex justify-center items-center dark:text-white">
 3 |     <p>© 2023. All rights reserved</p>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {};
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/src/components/home/CardMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="bg-gradient-to-r from-emerald-700 to-teal-500 rounded-md p-3 sm:p-1"
 4 |   >
 5 |     <slot></slot>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {};
11 | </script>
12 | 
13 | <style>
14 | </style>


--------------------------------------------------------------------------------
/src/components/reusable/DefaultContainer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="px-8 pt-6 pb-4 max-w-xl mx-auto max-h-max bg-[#f7f7f7] dark:bg-slate-900"
 4 |   >
 5 |     <slot></slot>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {};
11 | </script>
12 | 
13 | <style scoped></style>
14 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [vue()],
 9 |   resolve: {
10 |     alias: {
11 |       '@': fileURLToPath(new URL('./src', import.meta.url))
12 |     }
13 |   }
14 | })
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Islamic App</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <div id="app"></div>
12 |     <script type="module" src="/src/main.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{vue,js,ts,jsx,tsx}",
 6 |   ],
 7 |   darkMode: 'class',
 8 |   theme: {
 9 |     fontFamily: {
10 |       'sans': ['Poppins', 'sans-serif'],
11 |     },
12 |     screens: {
13 |       header: '320px'
14 |     },
15 |     extend: {},
16 |   },
17 |   plugins: [],
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/src/components/reusable/NotFoundComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex flex-col not-found">
 3 |     <img src="@/assets/search-not-found.svg" alt="" class="w-[350px] mx-auto" />
 4 |     <h4 class="mx-auto font-sans font-bold text-xl mt-4 text-red-500">
 5 |       Uppss... Search Not Found
 6 |     </h4>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style scoped>
11 | .not-found {
12 |   transform: translateY(-20px);
13 | }
14 | </style>
15 | 


--------------------------------------------------------------------------------
/src/pages/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <default-container>
 3 |     <Header />
 4 |     <Main />
 5 |   </default-container>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Header from "../components/home/Header.vue";
10 | import Main from "../components/home/Main.vue";
11 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
12 | export default {
13 |   components: { Header, Main, DefaultContainer },
14 | };
15 | </script>
16 | 
17 | <style></style>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "islamic-app",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "@vueuse/core": "^9.13.0",
12 |     "axios": "^1.3.4",
13 |     "moment": "^2.29.4",
14 |     "vue": "^3.2.47",
15 |     "vue-router": "^4.1.6"
16 |   },
17 |   "devDependencies": {
18 |     "@vitejs/plugin-vue": "^4.0.0",
19 |     "autoprefixer": "^10.4.14",
20 |     "postcss": "^8.4.21",
21 |     "tailwindcss": "^3.2.7",
22 |     "vite": "^4.1.4"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <router-view v-slot="{ Component }">
 4 |       <transition name="route">
 5 |         <component :is="Component" />
 6 |       </transition>
 7 |     </router-view>
 8 |   </div>
 9 | </template>
10 | <script>
11 | export default {};
12 | </script>
13 | <style>
14 | .route-enter-from {
15 |   opacity: 0;
16 |   transform: translateX(100px);
17 | }
18 | 
19 | .route-enter-active {
20 |   transition: all 0.3s ease-out;
21 | }
22 | 
23 | .route-leave-to {
24 |   opacity: 0;
25 |   transform: translateX(-100px);
26 | }
27 | 
28 | .route-leave-active {
29 |   transition: all 0.3s ease-in;
30 | }
31 | 
32 | html.dark {
33 |   color-scheme: dark;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/pages/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <default-container>
 3 |     <div class="h-screen">
 4 |       <Header />
 5 |       <div class="flex flex-col not-found">
 6 |         <img
 7 |           src="@/assets/search-not-found.svg"
 8 |           alt=""
 9 |           class="w-[350px] mx-auto"
10 |         />
11 |         <h4 class="mx-auto font-sans font-bold text-xl mt-4 text-red-500">
12 |           Uppss... Search Not Found
13 |         </h4>
14 |       </div>
15 |     </div>
16 |   </default-container>
17 | </template>
18 | 
19 | <style scoped>
20 | .not-found {
21 |   transform: translateY(-20px);
22 | }
23 | </style>
24 | 
25 | <script>
26 | import Header from "../components/home/Header.vue";
27 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
28 | export default {
29 |   components: { Header, DefaultContainer },
30 | };
31 | </script>
32 | 
33 | <style></style>
34 | 


--------------------------------------------------------------------------------
/src/components/reusable/ScrollOnTop.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     @click="scrollTop"
 4 |     class="w-10 h-10 bottom-4 right-10 fixed z-50 rounded-full bg-teal-500 flex justify-center items-center"
 5 |   >
 6 |     <svg
 7 |       xmlns="http://www.w3.org/2000/svg"
 8 |       viewBox="0 0 384 512"
 9 |       class="w-5 h-5 svg-color"
10 |     >
11 |       <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
12 |       <path
13 |         fill="white"
14 |         d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
15 |       />
16 |     </svg>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   emits: ["scrollOnTop"],
23 |   setup(props, ctx) {
24 |     const scrollTop = () => {
25 |       ctx.emit("scrollOnTop");
26 |     };
27 | 
28 |     return { scrollTop };
29 |   },
30 | };
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/pages/Quran.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <default-container>
 4 |       <HeaderPage />
 5 | 
 6 |       <ListCardSurah />
 7 |     </default-container>
 8 | 
 9 |     <!-- Scoll on top -->
10 |     <ScrollOnTop @scrollOnTop="handleEvent" />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import { onMounted } from "vue";
16 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
17 | import ListCardSurah from "../components/quran/ListCardSurah.vue";
18 | import ScrollOnTop from "../components/reusable/ScrollOnTop.vue";
19 | import HeaderPage from "../components/reusable/HeaderPage.vue";
20 | import { useDark } from "@vueuse/core";
21 | 
22 | export default {
23 |   components: { DefaultContainer, ListCardSurah, ScrollOnTop, HeaderPage },
24 |   setup() {
25 |     const isDark = useDark();
26 |     const handleEvent = () => {
27 |       window.scrollTo({
28 |         top: 0,
29 |         left: 0,
30 |         behavior: "smooth",
31 |       });
32 |     };
33 |     onMounted(() => {
34 |       isDark.value;
35 |     });
36 | 
37 |     return { handleEvent };
38 |   },
39 | };
40 | </script>
41 | 
42 | <style scoped></style>
43 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from "vue-router";
 2 | 
 3 | import Home from "../pages/Home.vue";
 4 | 
 5 | const routes = [
 6 |   {
 7 |     path: "/",
 8 |     component: Home,
 9 |     props: true,
10 |   },
11 |   // Card Menu
12 |   { path: "/quran", component: () => import("../pages/Quran.vue") },
13 |   { path: "/surat/:id", component: () => import("../pages/DetailSurah.vue") },
14 |   { path: "/doa-harian", component: () => import("../pages/DailyPrayer.vue") },
15 |   {
16 |     path: "/bacaan-tahlil",
17 |     component: () => import("../pages/TahlilReading.vue"),
18 |   },
19 |   {
20 |     path: "/hadith",
21 |     component: () => import("../pages/TheHadith.vue"),
22 |   },
23 |   {
24 |     path: "/hadith/:slug",
25 |     name: "HadithResult",
26 |     component: () => import("../pages/TheHadithDetail.vue"),
27 |   },
28 |   {
29 |     path: "/bookmark",
30 |     component: () => import("../pages/Bookmark.vue"),
31 |   },
32 |   {
33 |     path: "/:pathMatch(.*)*",
34 |     component: () => import("../pages/NotFound.vue"),
35 |   },
36 | ];
37 | 
38 | const router = createRouter({
39 |   history: createWebHistory(),
40 |   routes,
41 | });
42 | 
43 | export default router;
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # islamic-app
 2 | 
 3 | Islamic web application is a website that has several features such as the Quran, prayer schedules various locations in indonesia, Asmaul Husna, Daily Prayers, Hadith and Tahlil Readings. I created this simple website using Vue.JS and Tailwind CSS as well as utilizing public APIs
 4 | 
 5 | ## Project Screenshots:
 6 | 
 7 | ![ss islamic app 1](https://user-images.githubusercontent.com/54954176/230027238-1f77e60e-81ae-46fe-b914-2a0cdc44ba1a.png)
 8 | 
 9 | ![ss islamic app 2](https://user-images.githubusercontent.com/54954176/230027351-0a228365-dcbb-4073-8550-ba9218c1bfd8.png)
10 | 
11 | ![ss islamic app 3](https://user-images.githubusercontent.com/54954176/230027400-e90fb715-936a-4dea-9c74-6a3152d2ad24.png)
12 | 
13 | ## Technology used
14 | <ul>
15 |   <li><a href="https://vuejs.org/">Vue.js</a></li>
16 |   <li><a href="https://tailwindcss.com/">Tailwind CSS</a></li>
17 |   <li><a href="https://router.vuejs.org/">Vue Router</a></li>
18 | </ul>
19 | 
20 | ## Project Setup
21 | 
22 | ```sh
23 | npm install
24 | ```
25 | 
26 | ### Compile and Hot-Reload for Development
27 | 
28 | ```sh
29 | npm run dev
30 | ```
31 | 
32 | ### Compile and Minify for Production
33 | 
34 | ```sh
35 | npm run build
36 | ```
37 | 


--------------------------------------------------------------------------------
/src/components/reusable/HeaderPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-gradient-to-r from-emerald-700 to-teal-500 rounded-md mb-2">
 3 |     <div class="p-3 flex items-center justify-between">
 4 |       <router-link to="/">
 5 |         <svg
 6 |           xmlns="http://www.w3.org/2000/svg"
 7 |           fill="none"
 8 |           viewBox="0 0 24 24"
 9 |           stroke-width="1.5"
10 |           stroke="currentColor"
11 |           class="w-5 h-14 text-white"
12 |         >
13 |           <path
14 |             stroke-linecap="round"
15 |             stroke-linejoin="round"
16 |             d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
17 |           />
18 |         </svg>
19 |       </router-link>
20 |       <h3 class="font-sans text-white mx-auto">{{ dynamicHeaderPage }}</h3>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | import { computed } from "vue";
27 | import { useRoute } from "vue-router";
28 | export default {
29 |   setup() {
30 |     const route = useRoute();
31 | 
32 |     const dynamicHeaderPage = computed(() => {
33 |       if (route.path == "/quran") {
34 |         return "Quran Web";
35 |       } else if (route.path == "/doa-harian") {
36 |         return "Doa Harian";
37 |       } else if (route.path == "/hadith") {
38 |         return "Hadith";
39 |       } else if (route.path == "/bacaan-tahlil") {
40 |         return "Bacaan Tahlil";
41 |       } else if (route.path == "/bookmark") {
42 |         return "Bookmark";
43 |       }
44 |     });
45 | 
46 |     return { dynamicHeaderPage };
47 |   },
48 | };
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/components/reusable/Accordion.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="bg-white py-4 px-3 mb-3 rounded-md cursor-pointer dark:bg-slate-800"
 4 |   >
 5 |     <p class="text-teal-500 font-light">{{ selectedProp.data.title }}</p>
 6 |     <p class="text-right text-xl text-slate-500 mt-2 font-bold">
 7 |       {{ selectedProp.data.arabic }}
 8 |     </p>
 9 |     <svg
10 |       @click="isOpen = !isOpen"
11 |       xmlns="http://www.w3.org/2000/svg"
12 |       fill="none"
13 |       viewBox="0 0 24 24"
14 |       stroke-width="1.5"
15 |       stroke="currentColor"
16 |       class="w-4 h-4 text-slate-400"
17 |       :class="isOpen ? 'rotate-180 duration-500' : 'rotate-(-180) duration-500'"
18 |     >
19 |       <path
20 |         stroke-linecap="round"
21 |         stroke-linejoin="round"
22 |         d="M19.5 8.25l-7.5 7.5-7.5-7.5"
23 |       />
24 |     </svg>
25 | 
26 |     <p
27 |       class="mt-2 text-slate-400 text-sm"
28 |       :class="isOpen ? 'd-block' : 'hidden'"
29 |     >
30 |       <slot></slot>
31 |     </p>
32 |   </div>
33 | </template>
34 | 
35 | <script>
36 | import { reactive, ref } from "vue";
37 | export default {
38 |   props: {
39 |     doa: {
40 |       type: Object,
41 |     },
42 |     tahlil: {
43 |       type: Object,
44 |     },
45 |   },
46 |   setup(props) {
47 |     const isOpen = ref(false);
48 |     const selectedProp = reactive({
49 |       data: null,
50 |     });
51 | 
52 |     // update data
53 |     selectedProp.data = props.doa ? props.doa : props.tahlil;
54 | 
55 |     return {
56 |       selectedProp,
57 |       isOpen,
58 |     };
59 |   },
60 | };
61 | </script>
62 | 
63 | <style scoped>
64 | </style>


--------------------------------------------------------------------------------
/src/components/home/Main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex pt-3 justify-between items-center">
 3 |     <h1 class="font-semibold dark:text-white">Baca Al-Qur'an</h1>
 4 |     <router-link to="/bookmark">
 5 |       <div class="bg-teal-500 rounded-md p-1 cursor-pointer hover:bg-teal-700">
 6 |         <p class="text-xs flex text-white">Bookmark</p>
 7 |       </div>
 8 |     </router-link>
 9 |   </div>
10 | 
11 |   <div class="grid grid-cols-2 min-[435px]:grid-cols-4 gap-4 mt-4">
12 |     <router-link to="/quran">
13 |       <card-menu>
14 |         <img
15 |           src="/image/quran.webp"
16 |           alt=""
17 |           class="w-7 h-7 text-center mx-auto"
18 |         />
19 |         <p class="text-[12px] mt-2 text-white text-center">Al Quran</p>
20 |       </card-menu>
21 |     </router-link>
22 | 
23 |     <router-link to="/hadith">
24 |       <card-menu
25 |         ><img
26 |           src="/image/hadits.webp"
27 |           alt=""
28 |           class="w-7 h-7 text-center mx-auto"
29 |         />
30 |         <p class="text-[12px] mt-2 text-white text-center">Hadis</p>
31 |       </card-menu>
32 |     </router-link>
33 | 
34 |     <router-link to="/doa-harian">
35 |       <card-menu
36 |         ><img
37 |           src="/image/praying.webp"
38 |           alt=""
39 |           class="w-7 h-7 text-center mx-auto"
40 |         />
41 |         <p class="text-[12px] mt-2 text-white text-center">Doa Harian</p>
42 |       </card-menu>
43 |     </router-link>
44 | 
45 |     <router-link to="/bacaan-tahlil">
46 |       <card-menu
47 |         ><img
48 |           src="/image/tasbih.webp"
49 |           alt=""
50 |           class="w-7 h-7 text-center mx-auto"
51 |         />
52 |         <p class="text-[12px] mt-2 text-white text-center">Bacaan Tahlil</p>
53 |       </card-menu>
54 |     </router-link>
55 |   </div>
56 | 
57 |   <!-- Waktu Sholat -->
58 |   <PrayerSchedule />
59 | 
60 |   <!-- Footer -->
61 |   <Footer />
62 | </template>
63 | 
64 | <script>
65 | import PrayerSchedule from "./PrayerSchedule.vue";
66 | import Footer from "./Footer.vue";
67 | import CardMenu from "./CardMenu.vue";
68 | 
69 | export default {
70 |   components: { CardMenu, PrayerSchedule, Footer },
71 | };
72 | </script>
73 | 
74 | <style></style>
75 | 


--------------------------------------------------------------------------------
/src/pages/DailyPrayer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <default-container>
 4 |       <div
 5 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 rounded-md mb-2"
 6 |       >
 7 |         <div class="p-3 flex items-center justify-between">
 8 |           <router-link to="/">
 9 |             <svg
10 |               xmlns="http://www.w3.org/2000/svg"
11 |               fill="none"
12 |               viewBox="0 0 24 24"
13 |               stroke-width="1.5"
14 |               stroke="currentColor"
15 |               class="w-5 h-14 text-white"
16 |             >
17 |               <path
18 |                 stroke-linecap="round"
19 |                 stroke-linejoin="round"
20 |                 d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
21 |               />
22 |             </svg>
23 |           </router-link>
24 |           <h3 class="font-sans text-white mx-auto">Doa Harian</h3>
25 |         </div>
26 |       </div>
27 | 
28 |       <!-- Accordion -->
29 |       <Accordion v-for="(doa, i) in allDoa" :key="i" :doa="doa">
30 |         {{ doa.translation }}
31 |       </Accordion>
32 |     </default-container>
33 | 
34 |     <!-- Scoll on top -->
35 |     <ScrollOnTop @scrollOnTop="handleEvent" />
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 | import Accordion from "../components/reusable/Accordion.vue";
41 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
42 | import ScrollOnTop from "../components/reusable/ScrollOnTop.vue";
43 | import axios from "axios";
44 | import { onMounted, ref } from "vue";
45 | import { useDark } from "@vueuse/core";
46 | 
47 | export default {
48 |   components: { DefaultContainer, Accordion, ScrollOnTop },
49 | 
50 |   setup() {
51 |     const allDoa = ref([]);
52 |     const isDark = useDark();
53 |     const handleEvent = () => {
54 |       window.scrollTo({
55 |         top: 0,
56 |         left: 0,
57 |         behavior: "smooth",
58 |       });
59 |     };
60 |     const getDoa = async () => {
61 |       try {
62 |         const response = await axios.get(
63 |           "https://islamic-api-zhirrr.vercel.app/api/doaharian"
64 |         );
65 |         let { data } = response.data;
66 |         allDoa.value = data;
67 |       } catch (error) {
68 |         console.log(error);
69 |       }
70 |     };
71 | 
72 |     onMounted(() => {
73 |       getDoa();
74 |       isDark.value;
75 |     });
76 | 
77 |     return {
78 |       allDoa,
79 |       handleEvent,
80 |     };
81 |   },
82 | };
83 | </script>
84 | 


--------------------------------------------------------------------------------
/src/pages/TahlilReading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <default-container>
 4 |       <div
 5 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 rounded-md mb-2"
 6 |       >
 7 |         <div class="p-3 flex items-center justify-between">
 8 |           <router-link to="/">
 9 |             <svg
10 |               xmlns="http://www.w3.org/2000/svg"
11 |               fill="none"
12 |               viewBox="0 0 24 24"
13 |               stroke-width="1.5"
14 |               stroke="currentColor"
15 |               class="w-5 h-14 text-white"
16 |             >
17 |               <path
18 |                 stroke-linecap="round"
19 |                 stroke-linejoin="round"
20 |                 d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
21 |               />
22 |             </svg>
23 |           </router-link>
24 |           <h3 class="font-sans text-white mx-auto">Bacaan Tahlil</h3>
25 |         </div>
26 |       </div>
27 | 
28 |       <!-- Accordion -->
29 |       <Accordion v-for="tahlil in allTahlil" :key="tahlil.id" :tahlil="tahlil">
30 |         {{ tahlil.translation }}
31 |       </Accordion>
32 |     </default-container>
33 | 
34 |     <!-- Scoll on top -->
35 |     <ScrollOnTop @scrollOnTop="handleEvent" />
36 |   </div>
37 | </template>
38 | <script>
39 | import axios from "axios";
40 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
41 | import ScrollOnTop from "../components/reusable/ScrollOnTop.vue";
42 | import Accordion from "../components/reusable/Accordion.vue";
43 | import { useDark } from "@vueuse/core";
44 | import { onMounted, ref } from "vue";
45 | 
46 | export default {
47 |   components: { DefaultContainer, Accordion, ScrollOnTop },
48 |   setup() {
49 |     const allTahlil = ref([]);
50 |     const isDark = useDark();
51 |     const handleEvent = () => {
52 |       window.scrollTo({
53 |         top: 0,
54 |         left: 0,
55 |         behavior: "smooth",
56 |       });
57 |     };
58 |     const getTahlil = async () => {
59 |       try {
60 |         const response = await axios.get(
61 |           "https://islamic-api-zhirrr.vercel.app/api/tahlil"
62 |         );
63 |         let { data } = response.data;
64 |         allTahlil.value = data;
65 |       } catch (error) {
66 |         console.log(error);
67 |       }
68 |     };
69 | 
70 |     onMounted(() => {
71 |       getTahlil();
72 |       isDark.value;
73 |     });
74 | 
75 |     return {
76 |       allTahlil,
77 |       handleEvent,
78 |     };
79 |   },
80 | };
81 | </script>
82 | 


--------------------------------------------------------------------------------
/src/pages/Bookmark.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <default-container>
 4 |       <HeaderPage />
 5 | 
 6 |       <div class="h-screen">
 7 |         <div
 8 |           class="bg-white py-8 rounded-md px-3 dark:bg-slate-800"
 9 |           v-if="bookmarkdata.idSurah != null"
10 |         >
11 |           <router-link :to="`/surat/${bookmarkdata.idSurah}`">
12 |             <div class="flex">
13 |               <div class="ml-3">
14 |                 <h3 class="text-teal-500">{{ bookmarkdata.namasuratindo }}</h3>
15 |                 <p class="text-[12px] text-slate-400">
16 |                   Ayat ke {{ bookmarkdata.ayat }}
17 |                 </p>
18 |               </div>
19 |               <div class="ml-auto my-auto">
20 |                 <p class="text-2xl text-teal-500">
21 |                   {{ bookmarkdata.namasuratarab }}
22 |                 </p>
23 |               </div>
24 |             </div>
25 |           </router-link>
26 |         </div>
27 |         <!-- jika bookmark kosong -->
28 |         <div
29 |           class="bg-white py-8 rounded-md px-3 dark:bg-slate-800"
30 |           v-if="bookmarkdata.idSurah == null"
31 |         >
32 |           <div class="flex justify-center">
33 |             <div class="ml-3">
34 |               <h3 class="text-teal-500">Bookmark is still empty</h3>
35 |             </div>
36 |           </div>
37 |         </div>
38 |       </div>
39 |     </default-container>
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 | import { onMounted, reactive } from "vue";
45 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
46 | import HeaderPage from "../components/reusable/HeaderPage.vue";
47 | import { useDark } from "@vueuse/core";
48 | 
49 | export default {
50 |   components: { DefaultContainer, HeaderPage },
51 |   setup() {
52 |     const isDark = useDark();
53 |     const bookmarkdata = reactive({
54 |       idSurah: null,
55 |       namasuratindo: "",
56 |       namasuratarab: "",
57 |       ayat: null,
58 |     });
59 | 
60 |     onMounted(() => {
61 |       const bookmark = JSON.parse(localStorage.getItem("bookmark"));
62 |       if (bookmark) {
63 |         (bookmarkdata.namasuratindo = bookmark.namasurahindo),
64 |           (bookmarkdata.namasuratarab = bookmark.namasuraharab),
65 |           (bookmarkdata.ayat = bookmark.no);
66 |         bookmarkdata.idSurah = bookmark.idSurat;
67 |       }
68 |       isDark.value;
69 |     });
70 | 
71 |     return {
72 |       bookmarkdata,
73 |     };
74 |   },
75 | };
76 | </script>
77 | 


--------------------------------------------------------------------------------
/src/components/home/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-gradient-to-r from-emerald-700 to-teal-500 rounded-md h-48">
 3 |     <!-- Logo Atas -->
 4 |     <div class="flex p-3 justify-between">
 5 |       <div class="flex items-center">
 6 |         <p class="font-sans text-white">Islamic App</p>
 7 |         <img class="w-4 h-4 ml-2" src="/image/muslim.webp" alt="" />
 8 |       </div>
 9 | 
10 |       <button @click="toggleDark()">
11 |         <svg
12 |           v-if="isDark"
13 |           xmlns="http://www.w3.org/2000/svg"
14 |           viewBox="0 0 24 24"
15 |           width="24"
16 |           height="24"
17 |           class="text-yellow-400 h-7 w-7 cursor-pointer"
18 |         >
19 |           <path fill="none" d="M0 0h24v24H0z" />
20 |           <path
21 |             d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
22 |             fill="currentColor"
23 |           />
24 |         </svg>
25 |         <!-- bulan -->
26 |         <svg
27 |           v-else
28 |           xmlns="http://www.w3.org/2000/svg"
29 |           viewBox="0 0 24 24"
30 |           width="24"
31 |           height="24"
32 |           class="text-emerald-800 h-7 w-7 cursor-pointer"
33 |         >
34 |           <path fill="none" d="M0 0h24v24H0z" />
35 |           <path
36 |             d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"
37 |             fill="currentColor"
38 |           />
39 |         </svg>
40 |       </button>
41 |     </div>
42 |     <div class="p-3">
43 |       <p class="font-sans text-white text-xl">
44 |         Lebih Seru dan Mudah Dengan
45 |         <span class="font-semibold text-yellow-400">Islamic App</span>
46 |       </p>
47 |       <span class="font-sans text-white text-sm"
48 |         >Akses Dengan Mudah Kapanpun Dan Dimanapun</span
49 |       >
50 |     </div>
51 |   </div>
52 | 
53 |   <div
54 |     class="px-3 py-2 left-0 right-0 mx-auto top-[-12px] min-[435px]:top-[-28px] relative bg-white rounded-md w-11/12 shadow-lg"
55 |   >
56 |     <p class="font-sans text-xs text-slate-600">
57 |       Barang siapa membaca satu huruf dari kitab Allah, maka dibalas satu
58 |       kebaikan dan satu kebaikan dilipat gandakan menjadi sepuluh.
59 |       <span class="font-sans text-sm font-semibold text-slate-600"
60 |         >(H.R.At-Tirmidzi)</span
61 |       >
62 |     </p>
63 |   </div>
64 | </template>
65 | 
66 | <script setup>
67 | import { useDark, useToggle } from "@vueuse/core";
68 | const isDark = useDark();
69 | const toggleDark = useToggle(isDark);
70 | </script>
71 | 
72 | <style></style>
73 | 


--------------------------------------------------------------------------------
/src/components/quran/TafsirSurah.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       class="bg-white py-4 px-3 mb-3 rounded-md dark:bg-slate-800"
 5 |       v-for="tafsir in allTafsir.list"
 6 |       :key="tafsir.ayat"
 7 |     >
 8 |       <div class="">
 9 |         <svg
10 |           class="text-emerald-500 transition duration-[500ms] mx-auto mb-3"
11 |           width="37"
12 |           height="36"
13 |           viewBox="0 0 37 36"
14 |           fill="none"
15 |           xmlns="http://www.w3.org/2000/svg"
16 |         >
17 |           <path
18 |             d="M31.4531 12.6219V5.97656C31.4531 5.39409 30.9809 4.92188 30.3984 4.92188H23.7531L19.1192 0.307336C18.7076 -0.102445 18.0423 -0.102445 17.6307 0.307336L12.9969 4.92188H6.35156C5.76909 4.92188 5.29688 5.39409 5.29688 5.97656V12.6219L0.682336 17.2558C0.272555 17.6674 0.272555 18.3327 0.682336 18.7443L5.29688 23.3781V30.0234C5.29688 30.6059 5.76909 31.0781 6.35156 31.0781H12.9969L17.6307 35.6927C17.8365 35.8976 18.1058 36 18.375 36C18.6442 36 18.9135 35.8976 19.1192 35.6927L23.7531 31.0781H30.3984C30.9809 31.0781 31.4531 30.6059 31.4531 30.0234V23.3781L36.0677 18.7443C36.4774 18.3327 36.4774 17.6674 36.0677 17.2558L31.4531 12.6219ZM29.6511 22.1983C29.4543 22.396 29.3438 22.6635 29.3438 22.9425V28.9688H23.3175C23.0386 28.9688 22.771 29.0793 22.5734 29.2761L18.375 33.4569L14.1767 29.2761C13.979 29.0793 13.7115 28.9688 13.4325 28.9688H7.40625V22.9425C7.40625 22.6636 7.29572 22.396 7.09891 22.1984L2.91813 18L7.09891 13.8017C7.29572 13.604 7.40625 13.3365 7.40625 13.0575V7.03125H13.4325C13.7114 7.03125 13.979 6.92072 14.1766 6.72391L18.375 2.54313L22.5734 6.72391C22.7711 6.92072 23.0386 7.03125 23.3175 7.03125H29.3438V13.0575C29.3438 13.3364 29.4543 13.604 29.6511 13.8016L33.8319 18L29.6511 22.1983Z"
19 |             fill="currentColor"
20 |           />
21 |           <text
22 |             class="text-[10px]"
23 |             x="50%"
24 |             y="60%"
25 |             text-anchor="middle"
26 |             fill="currentColor"
27 |           >
28 |             {{ tafsir.ayat }}
29 |           </text>
30 |         </svg>
31 |         <p class="ml-3 text-[11px] text-slate-400">
32 |           {{ tafsir.teks }}
33 |         </p>
34 |       </div>
35 |     </div>
36 |   </div>
37 | </template>
38 | 
39 | <script>
40 | import axios from "axios";
41 | import { useDark } from "@vueuse/core";
42 | import { onMounted, reactive } from "vue";
43 | import { useRoute } from "vue-router";
44 | 
45 | export default {
46 |   setup() {
47 |     const route = useRoute();
48 |     const isDark = useDark();
49 |     const allTafsir = reactive({
50 |       list: [],
51 |     });
52 | 
53 |     const getTafsirSurah = async () => {
54 |       try {
55 |         const response = await axios.get(
56 |           "https://equran.id/api/v2/tafsir/" + route.params.id
57 |         );
58 |         let { data } = response.data;
59 |         allTafsir.list = data.tafsir;
60 |       } catch (error) {
61 |         console.log(error);
62 |       }
63 |     };
64 | 
65 |     onMounted(() => {
66 |       getTafsirSurah();
67 |       isDark.value;
68 |     });
69 | 
70 |     return {
71 |       allTafsir,
72 |     };
73 |   },
74 | };
75 | </script>
76 | 
77 | <style scoped></style>
78 | 


--------------------------------------------------------------------------------
/src/pages/TheHadith.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <default-container>
 4 |       <HeaderPage />
 5 | 
 6 |       <div class="h-screen">
 7 |         <div
 8 |           v-for="(hadith, index) in hadiths"
 9 |           :key="index"
10 |           class="bg-white py-2 rounded-md px-3 mb-3 dark:bg-slate-800"
11 |         >
12 |           <router-link :to="`hadith/${hadith.slug}`">
13 |             <div class="flex">
14 |               <svg
15 |                 class="text-teal-500 transition duration-[500ms]"
16 |                 width="37"
17 |                 height="36"
18 |                 viewBox="0 0 37 36"
19 |                 fill="none"
20 |                 xmlns="http://www.w3.org/2000/svg"
21 |               >
22 |                 <path
23 |                   d="M31.4531 12.6219V5.97656C31.4531 5.39409 30.9809 4.92188 30.3984 4.92188H23.7531L19.1192 0.307336C18.7076 -0.102445 18.0423 -0.102445 17.6307 0.307336L12.9969 4.92188H6.35156C5.76909 4.92188 5.29688 5.39409 5.29688 5.97656V12.6219L0.682336 17.2558C0.272555 17.6674 0.272555 18.3327 0.682336 18.7443L5.29688 23.3781V30.0234C5.29688 30.6059 5.76909 31.0781 6.35156 31.0781H12.9969L17.6307 35.6927C17.8365 35.8976 18.1058 36 18.375 36C18.6442 36 18.9135 35.8976 19.1192 35.6927L23.7531 31.0781H30.3984C30.9809 31.0781 31.4531 30.6059 31.4531 30.0234V23.3781L36.0677 18.7443C36.4774 18.3327 36.4774 17.6674 36.0677 17.2558L31.4531 12.6219ZM29.6511 22.1983C29.4543 22.396 29.3438 22.6635 29.3438 22.9425V28.9688H23.3175C23.0386 28.9688 22.771 29.0793 22.5734 29.2761L18.375 33.4569L14.1767 29.2761C13.979 29.0793 13.7115 28.9688 13.4325 28.9688H7.40625V22.9425C7.40625 22.6636 7.29572 22.396 7.09891 22.1984L2.91813 18L7.09891 13.8017C7.29572 13.604 7.40625 13.3365 7.40625 13.0575V7.03125H13.4325C13.7114 7.03125 13.979 6.92072 14.1766 6.72391L18.375 2.54313L22.5734 6.72391C22.7711 6.92072 23.0386 7.03125 23.3175 7.03125H29.3438V13.0575C29.3438 13.3364 29.4543 13.604 29.6511 13.8016L33.8319 18L29.6511 22.1983Z"
24 |                   fill="currentColor"
25 |                 />
26 |                 <text
27 |                   class="text-[12px]"
28 |                   x="50%"
29 |                   y="64%"
30 |                   text-anchor="middle"
31 |                   fill="currentColor"
32 |                 >
33 |                   {{ index + 1 }}
34 |                 </text>
35 |               </svg>
36 |               <div class="ml-3 my-auto">
37 |                 <h3 class="text-teal-500">{{ hadith.name }}</h3>
38 |               </div>
39 |               <div class="ml-auto my-auto">
40 |                 <p class="text-xs text-teal-500">Total: {{ hadith.total }}</p>
41 |               </div>
42 |             </div>
43 |           </router-link>
44 |         </div>
45 |       </div>
46 |     </default-container>
47 |   </div>
48 | </template>
49 | 
50 | <script setup>
51 | import axios from "axios";
52 | import { onMounted, ref } from "vue";
53 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
54 | import HeaderPage from "../components/reusable/HeaderPage.vue";
55 | 
56 | const hadiths = ref([]);
57 | 
58 | onMounted(() => {
59 |   getPerawiHadiths();
60 | });
61 | 
62 | const getPerawiHadiths = async () => {
63 |   try {
64 |     const response = await axios.get("https://hadis-api-id.vercel.app/hadith");
65 |     hadiths.value = response.data;
66 |   } catch (error) {
67 |     console.log(error);
68 |   }
69 | };
70 | </script>
71 | 


--------------------------------------------------------------------------------
/src/components/quran/ListCardSurah.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="relative mb-4">
  3 |     <input
  4 |       v-model="search"
  5 |       placeholder="Cari Surah"
  6 |       type="text"
  7 |       class="text-slate-400 rounded-sm w-full px-3 py-2 focus:outline-none focus:ring focus:ring-teal-500 bg-white dark:bg-slate-800"
  8 |     />
  9 |     <svg
 10 |       xmlns="http://www.w3.org/2000/svg"
 11 |       fill="none"
 12 |       viewBox="0 0 24 24"
 13 |       stroke-width="1.5"
 14 |       stroke="currentColor"
 15 |       class="w-6 h-6 text-teal-500 absolute top-2 right-2"
 16 |     >
 17 |       <path
 18 |         stroke-linecap="round"
 19 |         stroke-linejoin="round"
 20 |         d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
 21 |       />
 22 |     </svg>
 23 |   </div>
 24 | 
 25 |   <div :class="searchSurah.length <= 10 ? 'h-screen' : ''">
 26 |     <div
 27 |       class="bg-white py-2 rounded-md px-3 mb-3 dark:bg-slate-800"
 28 |       v-for="surah in searchSurah"
 29 |       :key="surah.nomor"
 30 |     >
 31 |       <router-link :to="`surat/${surah.nomor}`">
 32 |         <div class="flex">
 33 |           <svg
 34 |             class="text-teal-500 transition duration-[500ms]"
 35 |             width="37"
 36 |             height="36"
 37 |             viewBox="0 0 37 36"
 38 |             fill="none"
 39 |             xmlns="http://www.w3.org/2000/svg"
 40 |           >
 41 |             <path
 42 |               d="M31.4531 12.6219V5.97656C31.4531 5.39409 30.9809 4.92188 30.3984 4.92188H23.7531L19.1192 0.307336C18.7076 -0.102445 18.0423 -0.102445 17.6307 0.307336L12.9969 4.92188H6.35156C5.76909 4.92188 5.29688 5.39409 5.29688 5.97656V12.6219L0.682336 17.2558C0.272555 17.6674 0.272555 18.3327 0.682336 18.7443L5.29688 23.3781V30.0234C5.29688 30.6059 5.76909 31.0781 6.35156 31.0781H12.9969L17.6307 35.6927C17.8365 35.8976 18.1058 36 18.375 36C18.6442 36 18.9135 35.8976 19.1192 35.6927L23.7531 31.0781H30.3984C30.9809 31.0781 31.4531 30.6059 31.4531 30.0234V23.3781L36.0677 18.7443C36.4774 18.3327 36.4774 17.6674 36.0677 17.2558L31.4531 12.6219ZM29.6511 22.1983C29.4543 22.396 29.3438 22.6635 29.3438 22.9425V28.9688H23.3175C23.0386 28.9688 22.771 29.0793 22.5734 29.2761L18.375 33.4569L14.1767 29.2761C13.979 29.0793 13.7115 28.9688 13.4325 28.9688H7.40625V22.9425C7.40625 22.6636 7.29572 22.396 7.09891 22.1984L2.91813 18L7.09891 13.8017C7.29572 13.604 7.40625 13.3365 7.40625 13.0575V7.03125H13.4325C13.7114 7.03125 13.979 6.92072 14.1766 6.72391L18.375 2.54313L22.5734 6.72391C22.7711 6.92072 23.0386 7.03125 23.3175 7.03125H29.3438V13.0575C29.3438 13.3364 29.4543 13.604 29.6511 13.8016L33.8319 18L29.6511 22.1983Z"
 43 |               fill="currentColor"
 44 |             />
 45 |             <text
 46 |               class="text-[12px]"
 47 |               x="50%"
 48 |               y="64%"
 49 |               text-anchor="middle"
 50 |               fill="currentColor"
 51 |             >
 52 |               {{ surah.nomor }}
 53 |             </text>
 54 |           </svg>
 55 |           <div class="ml-3">
 56 |             <h3 class="text-teal-500">{{ surah.namaLatin }}</h3>
 57 |             <p class="text-[12px] text-slate-400">
 58 |               {{ convertToTypeSurah(surah.tempatTurun) }},
 59 |               {{ surah.jumlahAyat }} Ayat
 60 |             </p>
 61 |           </div>
 62 |           <div class="ml-auto my-auto">
 63 |             <p class="text-2xl text-teal-500">{{ surah.nama }}</p>
 64 |           </div>
 65 |         </div>
 66 |       </router-link>
 67 |     </div>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import axios from "axios";
 73 | import { computed, onMounted, ref } from "vue";
 74 | export default {
 75 |   setup() {
 76 |     const search = ref("");
 77 |     const surahs = ref([]);
 78 | 
 79 |     const getSurahs = async () => {
 80 |       try {
 81 |         const response = await axios.get("https://equran.id/api/v2/surat");
 82 |         let { data } = response.data;
 83 |         surahs.value = data;
 84 |       } catch (error) {
 85 |         console.log(error);
 86 |       }
 87 |     };
 88 | 
 89 |     // untuk mereturn makkiyah atau madaniyyah
 90 |     const convertToTypeSurah = (place) => {
 91 |       return place == "Mekah" ? "Makkiyah" : "Madaniyyah";
 92 |     };
 93 | 
 94 |     // untuk filter surah
 95 |     const searchSurah = computed(() => {
 96 |       return surahs.value.filter((surah) =>
 97 |         surah.namaLatin.toLowerCase().includes(search.value.toLowerCase())
 98 |       );
 99 |     });
100 | 
101 |     onMounted(() => {
102 |       getSurahs();
103 |     });
104 | 
105 |     return {
106 |       surahs,
107 |       convertToTypeSurah,
108 |       searchSurah,
109 |       search,
110 |     };
111 |   },
112 | };
113 | </script>
114 | 
115 | <style scoped></style>
116 | 


--------------------------------------------------------------------------------
/src/pages/DetailSurah.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <default-container>
  4 |       <div
  5 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 rounded-md mb-2 py-1 px-2"
  6 |       >
  7 |         <div class="flex items-center justify-between">
  8 |           <router-link to="/quran">
  9 |             <svg
 10 |               xmlns="http://www.w3.org/2000/svg"
 11 |               fill="none"
 12 |               viewBox="0 0 24 24"
 13 |               stroke-width="1.5"
 14 |               stroke="currentColor"
 15 |               class="w-5 h-14 text-white"
 16 |             >
 17 |               <path
 18 |                 stroke-linecap="round"
 19 |                 stroke-linejoin="round"
 20 |                 d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
 21 |               />
 22 |             </svg>
 23 |           </router-link>
 24 |           <h3 class="font-sans text-2xl text-white mx-auto">
 25 |             {{ detailsurah.nama }}
 26 |           </h3>
 27 |         </div>
 28 |         <div class="m-1">
 29 |           <p class="text-white mb-2">
 30 |             {{ detailsurah.namaLatin }} - {{ detailsurah.jumlahAyat }} Ayat
 31 |           </p>
 32 | 
 33 |           <h4 class="text-[28px] text-white text-center mt-2">
 34 |             بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ
 35 |           </h4>
 36 |           <audio
 37 |             class="w-4/5 h-8 mt-4 mb-4 mx-auto"
 38 |             :src="audio"
 39 |             controls
 40 |           ></audio>
 41 |         </div>
 42 |       </div>
 43 |       <div class="inline-flex rounded-md shadow-sm w-full" role="group">
 44 |         <button
 45 |           @click="showSurah()"
 46 |           type="button"
 47 |           class="w-1/2 px-4 py-2 text-sm font-medium text-teal-500 border-r dark:bg-slate-800 bg-white"
 48 |           :class="colorDefaultButton.ListAyat ? colorDefaultButton.class : ''"
 49 |         >
 50 |           Surah
 51 |         </button>
 52 |         <button
 53 |           @click="showTafsir()"
 54 |           type="button"
 55 |           class="w-1/2 px-4 py-2 text-sm font-medium text-teal-500 dark:bg-slate-800 bg-white"
 56 |           :class="
 57 |             colorDefaultButton.TafsirSurah ? colorDefaultButton.class : ''
 58 |           "
 59 |         >
 60 |           Tafsir
 61 |         </button>
 62 |       </div>
 63 | 
 64 |       <div class="mt-4">
 65 |         <keep-alive>
 66 |           <component
 67 |             :is="currentTab"
 68 |             :ayats="detailsurah.ayat"
 69 |             :namasurah="detailsurah.nama"
 70 |             :namalatinsurah="detailsurah.namaLatin"
 71 |           />
 72 |         </keep-alive>
 73 |       </div>
 74 |     </default-container>
 75 | 
 76 |     <!-- Scoll on top -->
 77 |     <ScrollOnTop @scrollOnTop="handleEvent" />
 78 |   </div>
 79 | </template>
 80 | 
 81 | <script>
 82 | import axios from "axios";
 83 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
 84 | import ListCardAyat from "../components/quran/ListCardAyat.vue";
 85 | import TafsirSurah from "../components/quran/TafsirSurah.vue";
 86 | import ScrollOnTop from "../components/reusable/ScrollOnTop.vue";
 87 | import { onMounted, reactive, ref } from "vue";
 88 | import { useRoute } from "vue-router";
 89 | import { useDark } from "@vueuse/core";
 90 | 
 91 | export default {
 92 |   components: { DefaultContainer, ListCardAyat, TafsirSurah, ScrollOnTop },
 93 | 
 94 |   setup() {
 95 |     const route = useRoute();
 96 |     const audio = ref("");
 97 |     const detailsurah = ref([]);
 98 |     const currentTab = ref("ListCardAyat");
 99 |     const isDark = useDark();
100 |     const colorDefaultButton = reactive({
101 |       class: "bg-gradient-to-r from-emerald-700 to-teal-500 text-white",
102 |       ListAyat: true,
103 |       TafsirSurah: false,
104 |     });
105 | 
106 |     const handleEvent = () => {
107 |       window.scrollTo({
108 |         top: 0,
109 |         left: 0,
110 |         behavior: "smooth",
111 |       });
112 |     };
113 | 
114 |     // mendapatkan detail surat
115 |     const getDetailSurah = async () => {
116 |       try {
117 |         const response = await axios.get(
118 |           "https://equran.id/api/v2/surat/" + route.params.id
119 |         );
120 |         let { data } = response.data;
121 |         detailsurah.value = data;
122 |         audio.value = detailsurah.value.audioFull["05"];
123 |       } catch (error) {
124 |         console.log(error);
125 |       }
126 |     };
127 | 
128 |     const showSurah = () => {
129 |       currentTab.value = "ListCardAyat";
130 |       colorDefaultButton.TafsirSurah = false;
131 |       colorDefaultButton.ListAyat = true;
132 |     };
133 | 
134 |     const showTafsir = () => {
135 |       currentTab.value = "TafsirSurah";
136 |       colorDefaultButton.ListAyat = false;
137 |       colorDefaultButton.TafsirSurah = true;
138 |     };
139 | 
140 |     onMounted(() => {
141 |       getDetailSurah();
142 |       isDark.value;
143 |     });
144 | 
145 |     return {
146 |       detailsurah,
147 |       audio,
148 |       currentTab,
149 |       showSurah,
150 |       showTafsir,
151 |       colorDefaultButton,
152 |       handleEvent,
153 |     };
154 |   },
155 | };
156 | </script>
157 | 
158 | <style scoped></style>
159 | 


--------------------------------------------------------------------------------
/src/components/quran/ListCardAyat.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="bg-white py-4 px-3 mb-3 rounded-md dark:bg-slate-800"
  4 |     v-for="(ayat, index) in ayats"
  5 |     :key="ayat.nomorAyat"
  6 |   >
  7 |     <div class="">
  8 |       <svg
  9 |         class="text-teal-500 transition duration-[500ms] mx-auto mb-2"
 10 |         width="37"
 11 |         height="36"
 12 |         viewBox="0 0 37 36"
 13 |         fill="none"
 14 |         xmlns="http://www.w3.org/2000/svg"
 15 |       >
 16 |         <path
 17 |           d="M31.4531 12.6219V5.97656C31.4531 5.39409 30.9809 4.92188 30.3984 4.92188H23.7531L19.1192 0.307336C18.7076 -0.102445 18.0423 -0.102445 17.6307 0.307336L12.9969 4.92188H6.35156C5.76909 4.92188 5.29688 5.39409 5.29688 5.97656V12.6219L0.682336 17.2558C0.272555 17.6674 0.272555 18.3327 0.682336 18.7443L5.29688 23.3781V30.0234C5.29688 30.6059 5.76909 31.0781 6.35156 31.0781H12.9969L17.6307 35.6927C17.8365 35.8976 18.1058 36 18.375 36C18.6442 36 18.9135 35.8976 19.1192 35.6927L23.7531 31.0781H30.3984C30.9809 31.0781 31.4531 30.6059 31.4531 30.0234V23.3781L36.0677 18.7443C36.4774 18.3327 36.4774 17.6674 36.0677 17.2558L31.4531 12.6219ZM29.6511 22.1983C29.4543 22.396 29.3438 22.6635 29.3438 22.9425V28.9688H23.3175C23.0386 28.9688 22.771 29.0793 22.5734 29.2761L18.375 33.4569L14.1767 29.2761C13.979 29.0793 13.7115 28.9688 13.4325 28.9688H7.40625V22.9425C7.40625 22.6636 7.29572 22.396 7.09891 22.1984L2.91813 18L7.09891 13.8017C7.29572 13.604 7.40625 13.3365 7.40625 13.0575V7.03125H13.4325C13.7114 7.03125 13.979 6.92072 14.1766 6.72391L18.375 2.54313L22.5734 6.72391C22.7711 6.92072 23.0386 7.03125 23.3175 7.03125H29.3438V13.0575C29.3438 13.3364 29.4543 13.604 29.6511 13.8016L33.8319 18L29.6511 22.1983Z"
 18 |           fill="currentColor"
 19 |         />
 20 |         <text
 21 |           class="text-[10px]"
 22 |           x="50%"
 23 |           y="60%"
 24 |           text-anchor="middle"
 25 |           fill="currentColor"
 26 |         >
 27 |           {{ ayat.nomorAyat }}
 28 |         </text>
 29 |       </svg>
 30 | 
 31 |       <div class="ml-auto my-auto">
 32 |         <p class="text-2xl text-teal-500 text-right">{{ ayat.teksArab }}</p>
 33 |       </div>
 34 |     </div>
 35 |     <p class="mt-5 text-slate-400">{{ ayat.teksIndonesia }}</p>
 36 | 
 37 |     <!-- Bookmark -->
 38 |     <div
 39 |       @click="saveAyat($event, ayat, index)"
 40 |       class="text-[9px] text-teal-500 font-semibold w-max p-2 border border-teal-500 rounded-md flex items-center cursor-pointer mt-2"
 41 |       :class="checkLocalStorage(index)"
 42 |     >
 43 |       Bookmark
 44 |     </div>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import { useRoute } from "vue-router";
 50 | import { onMounted, reactive } from "vue";
 51 | export default {
 52 |   props: {
 53 |     ayats: Object,
 54 |     namasurah: String,
 55 |     namalatinsurah: String,
 56 |   },
 57 | 
 58 |   setup(props) {
 59 |     const route = useRoute();
 60 |     const isBookMark = reactive({
 61 |       indexElement: null,
 62 |     });
 63 |     const query = route.params.id;
 64 |     // simpan ayat pada local storage
 65 |     const saveAyat = (event, ayat, index) => {
 66 |       const bookmark = JSON.parse(localStorage.getItem("bookmark"));
 67 |       const bookMarkClicked = event.target;
 68 | 
 69 |       if (bookmark && bookmark.indexElement == index) {
 70 |         bookMarkClicked.classList.remove("selected");
 71 |         isBookMark.indexElement = null;
 72 |         localStorage.removeItem("bookmark");
 73 |       } else if (bookmark && bookmark.indexElement != index) {
 74 |         alert("Can't Add bookmark anymore, please delete previous bookmark");
 75 |       } else {
 76 |         const parent = event.target.parentElement;
 77 |         const parentPos = {
 78 |           top: parent.offsetTop,
 79 |         };
 80 | 
 81 |         bookMarkClicked.classList.add("selected");
 82 |         isBookMark.indexElement = index;
 83 |         localStorage.setItem(
 84 |           "bookmark",
 85 |           JSON.stringify({
 86 |             no: ayat.nomorAyat,
 87 |             namasuraharab: props.namasurah,
 88 |             namasurahindo: props.namalatinsurah,
 89 |             indexElement: index,
 90 |             idSurat: parseInt(query),
 91 |             offsettop: parentPos.top,
 92 |           })
 93 |         );
 94 |       }
 95 |     };
 96 | 
 97 |     // cek bookmark pada local storage
 98 |     const checkLocalStorage = (index) => {
 99 |       const ayat = JSON.parse(localStorage.getItem("bookmark"));
100 |       if (!ayat) {
101 |         return "";
102 |       } else if (ayat.indexElement == index && ayat.idSurat == query) {
103 |         return "selected";
104 |       }
105 |     };
106 | 
107 |     onMounted(() => {
108 |       const bookmark = JSON.parse(localStorage.getItem("bookmark"));
109 |       setTimeout(() => {
110 |         if (bookmark) {
111 |           if (bookmark.idSurat == query) {
112 |             window.scrollTo({
113 |               top: bookmark.offsettop,
114 |               behavior: "smooth",
115 |             });
116 |           }
117 |         }
118 |       }, 1000);
119 |     });
120 | 
121 |     return {
122 |       checkLocalStorage,
123 |       isBookMark,
124 |       saveAyat,
125 |     };
126 |   },
127 | };
128 | </script>
129 | 
130 | <style scoped>
131 | .selected {
132 |   @apply bg-teal-500 text-white;
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/pages/TheHadithDetail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <default-container>
  4 |       <div
  5 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 rounded-md mb-5 py-1 px-2"
  6 |       >
  7 |         <div class="flex items-center justify-between">
  8 |           <router-link to="/hadith">
  9 |             <svg
 10 |               xmlns="http://www.w3.org/2000/svg"
 11 |               fill="none"
 12 |               viewBox="0 0 24 24"
 13 |               stroke-width="1.5"
 14 |               stroke="currentColor"
 15 |               class="w-5 h-14 text-white"
 16 |             >
 17 |               <path
 18 |                 stroke-linecap="round"
 19 |                 stroke-linejoin="round"
 20 |                 d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
 21 |               />
 22 |             </svg>
 23 |           </router-link>
 24 |           <h3 class="font-sans text-lg text-white mx-auto">
 25 |             {{ selectedNamePerawi }}
 26 |           </h3>
 27 |         </div>
 28 |       </div>
 29 | 
 30 |       <div v-if="totalPage != undefined || page == 1" class="max-h-max">
 31 |         <div
 32 |           class="bg-white py-4 px-3 mb-3 rounded-md dark:bg-slate-800"
 33 |           v-for="hadith in hadithsbyPerawi"
 34 |           :key="hadith.number"
 35 |         >
 36 |           <div class="">
 37 |             <div
 38 |               class="py-2 px-3 bg-teal-500 w-1/5 rounded mx-auto mb-3 text-white"
 39 |             >
 40 |               <p class="text-center">{{ hadith.number }}</p>
 41 |             </div>
 42 | 
 43 |             <div class="ml-auto my-auto">
 44 |               <p class="text-2xl text-teal-500 text-right">{{ hadith.arab }}</p>
 45 |             </div>
 46 |           </div>
 47 |           <p class="mt-5 text-slate-400">
 48 |             {{ hadith.id }}
 49 |           </p>
 50 |         </div>
 51 | 
 52 |         <div class="flex flex-row justify-between text-white">
 53 |           <p
 54 |             class="text-center bg-teal-500 p-2 rounded"
 55 |             v-if="totalPage != undefined"
 56 |           >
 57 |             Halaman ke {{ page }}
 58 |           </p>
 59 |           <div class="flex justify-between gap-2">
 60 |             <button
 61 |               :class="hiddenButtonPrevious"
 62 |               class="bg-teal-500 p-2 rounded"
 63 |               @click="previousPage"
 64 |             >
 65 |               Previous
 66 |             </button>
 67 |             <button
 68 |               :class="hiddenButtonNext"
 69 |               class="bg-teal-500 p-2 rounded"
 70 |               @click="nextPage"
 71 |             >
 72 |               Next
 73 |             </button>
 74 |           </div>
 75 |         </div>
 76 |       </div>
 77 |       <div class="h-screen" v-else>
 78 |         <not-found-component></not-found-component>
 79 |       </div>
 80 |     </default-container>
 81 |   </div>
 82 | </template>
 83 | 
 84 | <script setup>
 85 | import DefaultContainer from "../components/reusable/DefaultContainer.vue";
 86 | import NotFoundComponent from "../components/reusable/NotFoundComponent.vue";
 87 | 
 88 | import { computed, onMounted, ref, watch } from "vue";
 89 | 
 90 | import axios from "axios";
 91 | import { useRouter, useRoute } from "vue-router";
 92 | 
 93 | const hadithsbyPerawi = ref([]);
 94 | const totalPage = ref();
 95 | const router = useRouter();
 96 | const route = useRoute();
 97 | const page = ref(Number.parseInt(route.query.page) || 1);
 98 | const slug = ref(route.params);
 99 | 
100 | onMounted(async () => {
101 |   await haditsByPerawi();
102 | });
103 | 
104 | const haditsByPerawi = async () => {
105 |   try {
106 |     const response = await axios.get(
107 |       `https://hadis-api-id.vercel.app/hadith/${slug.value.slug}?page=${page.value}`
108 |     );
109 |     hadithsbyPerawi.value = response.data.items;
110 |     totalPage.value = response.data.pagination.totalPages;
111 |   } catch (error) {
112 |     console.log(error);
113 |   }
114 | };
115 | 
116 | const previousPage = () => {
117 |   if (page.value > 1) {
118 |     page.value--;
119 |     const query = { page: page.value };
120 |     router.push({ name: "HadithResult", query: query });
121 |   }
122 | };
123 | 
124 | const nextPage = () => {
125 |   if (page.value < totalPage.value) {
126 |     page.value++;
127 |     const query = { page: page.value };
128 |     router.push({ name: "HadithResult", query: query });
129 |   }
130 | };
131 | 
132 | const hiddenButtonPrevious = computed(() => {
133 |   return page.value == 1 || totalPage.value == undefined ? "hidden" : "";
134 | });
135 | 
136 | const hiddenButtonNext = computed(() => {
137 |   return page.value == totalPage.value || totalPage.value == undefined
138 |     ? "hidden"
139 |     : "";
140 | });
141 | 
142 | const selectedNamePerawi = computed(() => {
143 |   if (slug.value.slug == "ahmad") {
144 |     return "Ahmad";
145 |   } else if (slug.value.slug == "abu-dawud") {
146 |     return "Abu Dawud";
147 |   } else if (slug.value.slug == "bukhari") {
148 |     return "Bukhari";
149 |   } else if (slug.value.slug == "bukhari") {
150 |     return "Bukhari";
151 |   } else if (slug.value.slug == "darimi") {
152 |     return "Darimi";
153 |   } else if (slug.value.slug == "ibnu-majah") {
154 |     return "Ibnu Majah";
155 |   } else if (slug.value.slug == "malik") {
156 |     return "Malik";
157 |   } else if (slug.value.slug == "muslim") {
158 |     return "Muslim";
159 |   } else if (slug.value.slug == "nasai") {
160 |     return "Nasai";
161 |   } else if (slug.value.slug == "tirmidzi") {
162 |     return "Tirmidzi";
163 |   }
164 | });
165 | 
166 | watch(page, () => {
167 |   haditsByPerawi();
168 |   setTimeout(() => {
169 |     window.scroll({
170 |       top: 0,
171 |       left: 0,
172 |       behavior: "smooth",
173 |     });
174 |   }, 1500);
175 | });
176 | </script>
177 | 


--------------------------------------------------------------------------------
/src/components/home/PrayerSchedule.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mt-12">
  3 |     <div class="flex justify-center items-center">
  4 |       <h3 class="font-semibold dark:text-white">
  5 |         Pilih Waktu Sholat Daerah Anda {{ jadwalSholat.lokasi }}
  6 |         <button class="cursor-pointer" @click.prevent="showModal = !showModal">
  7 |           <svg
  8 |             xmlns="http://www.w3.org/2000/svg"
  9 |             width="16"
 10 |             height="16"
 11 |             fill="currentColor"
 12 |             class="bi bi-caret-down-fill"
 13 |             viewBox="0 0 15 15"
 14 |           >
 15 |             <path
 16 |               d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
 17 |             />
 18 |           </svg>
 19 |         </button>
 20 |       </h3>
 21 |     </div>
 22 | 
 23 |     <div class="mt-1">
 24 |       <h3 class="text-center text-slate-400 font-light">
 25 |         {{ jadwalSholat.jadwal.tanggal }}
 26 |       </h3>
 27 |     </div>
 28 | 
 29 |     <!-- Modal -->
 30 |     <div
 31 |       class="fixed flex justify-center items-center z-40 inset-0"
 32 |       v-if="showModal"
 33 |       @click.self="showModal = false"
 34 |     >
 35 |       <div class="fixed mx-auto w-4/5 h-1/2 max-w-sm overflow-y-auto top-36">
 36 |         <div class="bg-white mx-auto p-3 z-50 dark:bg-slate-800">
 37 |           <header class="flex justify-between">
 38 |             <span class="text-teal-500 font-semibold">Daftar Kota</span>
 39 |             <button
 40 |               class="rounded bg-red-400 text-white py-1 px-2 text-xs"
 41 |               @click="showModal = false"
 42 |             >
 43 |               Close
 44 |             </button>
 45 |           </header>
 46 |           <hr class="mt-2 mb-4 dark:border-teal-500" />
 47 | 
 48 |           <form>
 49 |             <input
 50 |               placeholder="Cari Kota"
 51 |               v-model="search"
 52 |               type="text"
 53 |               class="text-slate-400 border border-teal-500 rounded-sm w-full px-1 py-2 focus:outline-none focus:ring focus:ring-teal-500 bg-white placeholder:text-xs mb-3 dark:bg-slate-800"
 54 |             />
 55 |           </form>
 56 | 
 57 |           <div
 58 |             class="group"
 59 |             v-for="lokasi in filteredCity"
 60 |             :key="lokasi.id"
 61 |             @click.prevent="getDynamicLocation(lokasi.id)"
 62 |           >
 63 |             <div
 64 |               class="group-hover:bg-teal-500 py-2 px-1 rounded mb-1 cursor-pointer"
 65 |             >
 66 |               <p
 67 |                 class="text-xs text-teal-500 group-hover:text-white font-semibold"
 68 |               >
 69 |                 {{ lokasi.lokasi }}
 70 |               </p>
 71 |             </div>
 72 |           </div>
 73 |         </div>
 74 |       </div>
 75 |     </div>
 76 |     <div v-if="showModal" class="fixed z-30 opacity-25 bg-black inset-0"></div>
 77 | 
 78 |     <div class="mt-4 grid grid-cols-4 gap-1">
 79 |       <div
 80 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 p-2 text-center rounded-md"
 81 |       >
 82 |         <p class="text-white text-sm">Imsak</p>
 83 |         <p class="text-white font-semibold">{{ jadwalSholat.jadwal.imsak }}</p>
 84 |       </div>
 85 |       <div
 86 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 p-2 text-center rounded-md"
 87 |       >
 88 |         <p class="text-white text-sm">Subuh</p>
 89 |         <p class="text-white font-semibold">{{ jadwalSholat.jadwal.subuh }}</p>
 90 |       </div>
 91 |       <div
 92 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 p-2 text-center rounded-md"
 93 |       >
 94 |         <p class="text-white text-sm">Terbit</p>
 95 |         <p class="text-white font-semibold">{{ jadwalSholat.jadwal.terbit }}</p>
 96 |       </div>
 97 |       <div
 98 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 p-2 text-center rounded-md"
 99 |       >
100 |         <p class="text-white text-sm">Dhuha</p>
101 |         <p class="text-white font-semibold">{{ jadwalSholat.jadwal.dhuha }}</p>
102 |       </div>
103 |       <div
104 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 p-2 text-center rounded-md"
105 |       >
106 |         <p class="text-white text-sm">Dhuhur</p>
107 |         <p class="text-white font-semibold">{{ jadwalSholat.jadwal.dzuhur }}</p>
108 |       </div>
109 |       <div
110 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 p-2 text-center rounded-md"
111 |       >
112 |         <p class="text-white text-sm">Ashar</p>
113 |         <p class="text-white font-semibold">{{ jadwalSholat.jadwal.ashar }}</p>
114 |       </div>
115 |       <div
116 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 p-2 text-center rounded-md"
117 |       >
118 |         <p class="text-white text-sm">Magrib</p>
119 |         <p class="text-white font-semibold">
120 |           {{ jadwalSholat.jadwal.maghrib }}
121 |         </p>
122 |       </div>
123 |       <div
124 |         class="bg-gradient-to-r from-emerald-700 to-teal-500 p-2 text-center rounded-md"
125 |       >
126 |         <p class="text-white text-sm">Isya</p>
127 |         <p class="text-white font-semibold">{{ jadwalSholat.jadwal.isya }}</p>
128 |       </div>
129 |     </div>
130 |   </div>
131 | </template>
132 | 
133 | <script>
134 | import axios from "axios";
135 | import { onMounted, ref, computed, reactive } from "vue";
136 | import { useDark } from "@vueuse/core";
137 | 
138 | export default {
139 |   setup() {
140 |     const isDark = useDark();
141 |     const showModal = ref(false);
142 |     const search = ref("");
143 |     const jadwalSholat = reactive({
144 |       id: null,
145 |       lokasi: "",
146 |       jadwal: [],
147 |     });
148 |     const allDatalokasi = ref([]);
149 | 
150 |     // method buat get data lokasi
151 |     const getAllLocation = async () => {
152 |       try {
153 |         const response = await axios.get(
154 |           "https://api.myquran.com/v2/sholat/kota/semua"
155 |         );
156 |         allDatalokasi.value = response.data.data;
157 |       } catch (error) {
158 |         console.log(error);
159 |       }
160 |     };
161 | 
162 |     // method mengambil tanggal saat ini dengan format 2023/04/1
163 |     const getDate = () => {
164 |       const current = new Date();
165 |       const date = `${current.getFullYear()}/${
166 |         current.getMonth() + 1
167 |       }/${current.getDate()}`;
168 |       return date;
169 |     };
170 | 
171 |     // method untuk mendapatkan jadwal berdasarkan lokasi dan tgl saat ini
172 |     const getDefaultLocation = async () => {
173 |       const idLocation = JSON.parse(localStorage.getItem("lokasi"));
174 |       if (idLocation) {
175 |         try {
176 |           const response = await axios.get(
177 |             "https://api.myquran.com/v2/sholat/jadwal/" +
178 |               idLocation.id +
179 |               "/" +
180 |               getDate()
181 |           );
182 |           let { data } = response.data;
183 |           jadwalSholat.lokasi = data.lokasi;
184 |           jadwalSholat.jadwal = data.jadwal;
185 |         } catch (error) {
186 |           console.log(error);
187 |         }
188 |       } else {
189 |         // jika tidak ada lokasi id di local storage maka jalankan ini
190 |         try {
191 |           const response = await axios.get(
192 |             "https://api.myquran.com/v2/sholat/jadwal/" +
193 |               "1602" +
194 |               "/" +
195 |               getDate()
196 |           );
197 |           let { data } = response.data;
198 |           jadwalSholat.lokasi = data.lokasi;
199 |           jadwalSholat.jadwal = data.jadwal;
200 |         } catch (error) {
201 |           console.log(error);
202 |         }
203 |       }
204 |     };
205 | 
206 |     // method untuk mendapatkan lokasi dinamis
207 |     const getDynamicLocation = async (id) => {
208 |       try {
209 |         const response = await axios.get(
210 |           "https://api.myquran.com/v2/sholat/jadwal/" + id + "/" + getDate()
211 |         );
212 |         let { data } = response.data;
213 |         jadwalSholat.lokasi = data.lokasi;
214 |         jadwalSholat.jadwal = data.jadwal;
215 |         jadwalSholat.id = data.id;
216 |         showModal.value = false;
217 |         search.value = "";
218 |         localStorage.setItem(
219 |           "lokasi",
220 |           JSON.stringify({
221 |             id: jadwalSholat.id,
222 |           })
223 |         );
224 |       } catch (error) {
225 |         console.log(error);
226 |       }
227 |     };
228 | 
229 |     // untuk filter kota dengan computed
230 |     const filteredCity = computed(() => {
231 |       return allDatalokasi.value.filter((city) =>
232 |         city.lokasi.toLowerCase().includes(search.value.toLowerCase())
233 |       );
234 |     });
235 | 
236 |     onMounted(async () => {
237 |       await getAllLocation();
238 |       await getDefaultLocation();
239 |       isDark.value;
240 |       // console.log(allDatalokasi.value);
241 |     });
242 | 
243 |     return {
244 |       showModal,
245 |       filteredCity,
246 |       search,
247 |       jadwalSholat,
248 |       getDynamicLocation,
249 |     };
250 |   },
251 | };
252 | </script>
253 | 
254 | <style scoped></style>
255 | 


--------------------------------------------------------------------------------
/src/assets/search-not-found.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" standalone="no"?>
  2 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595.279px" height="595.281px" viewBox="0 0 595.279 595.281" enable-background="new 0 0 595.279 595.281" xml:space="preserve">
  3 | <path id="color_x5F_2" fill="#50e3c2" d="M340.382,469.555h-55.42c0.101-0.121,0.159-0.252,0.143-0.389
  4 | 	c-1.611-13.727-2.805-30.848-11.186-42.389c-2.011-2.768-4.534-4.346-7.139-6.479c-4.055-3.32-7.063-7.883-9.571-12.418
  5 | 	c-1.156-2.09-2.199-4.285-3.105-6.551c0.038-0.125-0.01-0.217-0.108-0.283c-2.352-5.979-3.731-12.436-3.607-18.775
  6 | 	c3.722,0.73,7.533,0.988,11.307,1.471l6.765,1.402c10.156,10.285,19.09,21.646,28.189,32.852
  7 | 	c8.752,10.779,17.932,21.146,26.508,32.074C328.012,456.26,333.747,463.592,340.382,469.555z M387.556,329.739
  8 | 	c-4.104-12.418-7.736-26.932-17.373-36.379c-12.821-12.57-30.555-15.746-47.999-16.543c-8.763,20.658-6.817,51.9-33.147,59.42
  9 | 	c-21.34,6.098-25.916-22.66-23.146-37.695c-0.783-0.094-1.583-0.152-2.395-0.189c-3.168,0.129-7.696,0.336-11.212,0.574
 10 | 	c-5.279,0.543-10.51,1.168-14.971,0.646c-2.557-0.301-5.031-0.777-7.409-1.428c-14.148,3.295-21.515,20.248-26.162,32.457
 11 | 	c-4.604,12.096-7.564,24.668-11.677,36.916c-0.099,0.295-0.47,0.531-0.916,0.691c-0.347,1.033-0.696,2.063-1.038,3.086
 12 | 	c-2.381,7.133-4.1,14.398-3.026,21.955c0.031,0.223,0.082,0.434,0.124,0.648c0.354-0.105,0.68-0.166,0.876-0.131
 13 | 	c2.211,0.402,4.356,0.965,6.454,1.643l0.915,0.125l0.662,0.408c14.321,5.098,26.409,15.672,40.478,21.465
 14 | 	c0.309,0.02,0.557,0.104,0.664,0.27c1.58,0.631,3.187,1.199,4.824,1.691c4.133-5.117,7.147-11.256,9.119-17.504
 15 | 	c-2.541-6.449-4.041-13.324-3.652-20.262c-0.663-0.184-1.322-0.383-1.976-0.613c-2.241-0.795-4.296-1.955-6.292-3.236
 16 | 	c-0.278,0.477-0.711,0.955-1.334,1.42c-3.575,2.674-7.332,1.959-11.142,0.117c-3.943-1.906-10.283-5.893-10.749-10.105l-1.028-0.85
 17 | 	l1.247-1.063c0.359-1.018,1.124-2.031,2.419-3.018c-0.427-4.674,3.549-7.486,6.327-10.645c0.318-0.361,0.747-0.594,1.209-0.709
 18 | 	c0.014-1.52,0.513-2.914,1.406-4.188l0.183-0.715h-0.709c-4.561,0.543-9.135,1.385-13.441-0.646
 19 | 	c-4.866-2.293-0.668-5.518,2.231-6.869c5.109-2.381,11.525-3.063,17.04-3.783c4.66-0.609,9.542-1.125,14.218-0.389l1.107-0.023
 20 | 	c0.097-0.18,0.322-0.375,0.737-0.576c3.756-1.818,7.292-2.104,10.978,0.018c3.006,1.729,4.587,5.205,6.708,7.838
 21 | 	c2.366,2.938,4.779,5.842,7.28,8.662c1.178,1.33,2.356,2.668,3.608,3.93c0.462,0.467,0.92,0.943,1.417,1.377
 22 | 	c0.388,0.336,0.556,0.473,0.588,0.518c0.499-0.041,0.926,0.051,1.039,0.313c8.232,5.42,16.021,11.396,23.902,17.244l27.001,17.912
 23 | 	c0.525,0.305,1.049,0.607,1.574,0.912c-0.063-17.639-0.742-35.27-0.768-52.908c-0.002-0.885,2.896-1.326,2.896-0.777
 24 | 	c0.027,18.137,0.75,36.262,0.777,54.396c0,0.256-0.246,0.475-0.59,0.643c7.228,4.246,14.361,8.771,20.57,14.256
 25 | 	c17.865-0.281,35.006-6.73,52.63-9.049C402.143,377.1,395.323,353.247,387.556,329.739z M278.313,358.077l0.258,0.215
 26 | 	c0.297-0.119,0.635-0.199,0.952-0.23C279.337,358.002,278.775,357.79,278.313,358.077z M235.905,378.088
 27 | 	c0.307-0.295,0.529-0.627,0.632-0.98L235.905,378.088z M214.285,344.372c0.31,0.604,0.758,1.094,1.288,1.494l-1.218-2.787
 28 | 	C214.105,343.477,214.047,343.911,214.285,344.372z M225.061,339.258c-1.092,0.217-2.171,0.428-3.232,0.623
 29 | 	c-0.801,0.145-3.908,0.83-5.921,1.922L225.061,339.258z M437.091,460.163c-0.59,0.154-1.217,0.057-1.475-0.445
 30 | 	c-7.979-15.576-20.898-28.967-26.789-45.494c0,12.473-3.477,25.371-8.377,36.297c-2.918,6.506-6.835,13.438-11.935,19.035h52.112
 31 | 	C440.628,469.555,439.518,465.608,437.091,460.163z"></path>
 32 | <path id="color_x5F_1" d="M231.13,271.387c-2.459,1.424-4.729,2.088-7.568,2.277c-0.158,0.01-0.726,0.107-0.805-0.135
 33 | 	c-3.132-9.561,0.277-19.367-0.583-29.141c-0.062-0.695,2.859-1.211,2.897-0.777c0.465,5.281-0.284,10.395-0.656,15.648
 34 | 	c-0.178,2.512-1.508,15.635,4.522,12.139C229.412,271.127,232.319,270.698,231.13,271.387z M267.143,268.094
 35 | 	c-0.297,2.404-0.781,5.533-3.593,6.02c-0.524,0.092-0.827,0.057-0.972-0.049c-6.773-1.482-5.145-11.633,1.545-11.982
 36 | 	C267.323,261.915,267.422,265.825,267.143,268.094z M263.36,272.272c0.11-0.271,0.224-0.543,0.306-0.824
 37 | 	c0.28-0.953,0.499-1.932,0.597-2.922c0.101-1.018,0.394-4.898-1.359-5.016c-0.385-0.027-1.19,1.502-1.352,1.953
 38 | 	c-0.347,0.961-0.573,1.996-0.459,3.023C261.274,270.143,262.009,271.542,263.36,272.272z M256.609,242.209
 39 | 	c-3.812-0.566-7.858-1.318-11.311-3.123c3.392-1.639,6.85-3.133,10.312-4.617c1.886-0.809,0.102-1.234-1.027-0.752
 40 | 	c-4.028,1.727-8.06,3.447-11.989,5.389c-0.122,0.063-0.913,0.518-0.516,0.738c3.843,2.162,8.359,2.975,12.67,3.617
 41 | 	C255.417,243.559,258.104,242.432,256.609,242.209z M244.251,225.954c3.101-1.934,6.612-2.332,10.19-2.365
 42 | 	c0.578-0.004,3.289-1.152,1.891-1.139c-4.97,0.047-10.004,0.793-14.288,3.463C240.844,226.661,243.755,226.262,244.251,225.954z
 43 | 	 M176.125,230.454c0.1-1.365-2.833-0.865-2.918,0.285c-0.452,6.162,0.499,12.039,2.924,17.73c0.497,1.164,3.36,0.307,2.897-0.777
 44 | 	C176.667,242.153,175.684,236.471,176.125,230.454z M169.672,218.34c-1.236,0.145-2.54,1.438-0.504,1.199
 45 | 	c3.757-0.441,7.24,0.838,9.965,3.408c0.598,0.563,3.257-0.518,2.721-1.023C178.475,218.737,174.19,217.807,169.672,218.34z
 46 | 	 M438.261,458.415c0.42,0.816-0.34,1.531-1.17,1.748c-0.59,0.154-1.217,0.057-1.475-0.445
 47 | 	c-7.979-15.576-20.898-28.967-26.789-45.494c0,12.473-3.477,25.371-8.377,36.297c-2.918,6.506-6.835,13.438-11.935,19.035
 48 | 	c-4.938,5.422-10.984,9.596-18.317,10.92c-11.432,2.063-21.355-3.316-29.814-10.92c-6.635-5.963-12.371-13.295-17.228-19.482
 49 | 	c-8.575-10.928-17.755-21.295-26.508-32.074c-9.1-11.205-18.034-22.564-28.189-32.852c-0.05-0.051-0.098-0.104-0.148-0.154
 50 | 	c-0.001,0-0.001-0.002-0.002-0.002c-2.174-0.594-4.387-0.961-6.615-1.244c-3.773-0.484-7.585-0.742-11.307-1.473
 51 | 	c-0.124,6.342,1.256,12.799,3.607,18.775c0.099,0.066,0.146,0.158,0.108,0.283c0.906,2.266,1.949,4.461,3.105,6.551
 52 | 	c2.508,4.535,5.516,9.098,9.571,12.418c2.605,2.133,5.127,3.711,7.139,6.479c8.381,11.541,9.575,28.662,11.186,42.389
 53 | 	c0.016,0.137-0.042,0.268-0.143,0.389c-0.568,0.682-2.68,1.029-2.755,0.389c-0.819-6.975-1.714-13.955-3.215-20.82
 54 | 	c-1.66-7.59-3.637-16.773-8.927-22.789c-2.56-2.912-6.073-4.66-8.68-7.564c-2.752-3.064-5.166-6.451-7.075-10.109
 55 | 	c-0.569-1.09-1.113-2.199-1.63-3.322c-2.06,5.268-4.872,10.328-8.492,14.623c0.047,0.012,0.093,0.025,0.141,0.037
 56 | 	c0.939,0.236-1.634,1.385-2.36,1.201c-1.702-0.43-3.366-0.951-5.003-1.537c-1.334,6.473-3.075,12.898-5.694,18.977
 57 | 	c-5.932,13.76-15.937,26.135-30.535,31.072c-8.479,2.869-18.555,3.988-27.183,0.967c-4.683-1.639-7.637-6.104-9.649-10.461
 58 | 	c-4.183-9.057-5.47-19.283-5.701-29.174c-0.174-7.463,0.07-15.018,1.131-22.416c1.656-11.545,4.844-24.186-5.64-32.549
 59 | 	c-0.01-0.008-0.013-0.018-0.021-0.023c-4.902-2.4-6.109-7.73-6.086-13.568c0.034-8.734,2.13-17.293,6.503-24.885
 60 | 	c2.97-5.154,6.847-10.469,13.228-11.01c0.284-0.023,0.501-0.01,0.671,0.025c0-8.203,0-16.408,0-24.613
 61 | 	c-4.287,0.453-8.66,0.016-12.646-1.594c-7.097-2.863-11.69-9.928-14.256-16.84c-5.875-15.828-6.164-34.594-2.664-51.018
 62 | 	c3.068-14.4,10.377-34.281,28.297-33.211c0.029,0.002,0.05,0.008,0.078,0.01c2,0,3.915,0.291,5.736,0.83
 63 | 	c2.221-0.684,4.651-1,7.322-0.84c0.029,0.002,0.05,0.008,0.078,0.01c7.167-0.004,13.228,3.758,17.923,9.084
 64 | 	c0.718-6.555,5.006-12.611,9.377-17.344c6.131-6.637,13.453-12.584,21.529-16.699c1.31-0.668,2.819-1.375,4.472-2.08
 65 | 	c0.595-0.412,1.096-0.758,1.494-1.029c-1.679-1.826-3.123-4.039-4.21-6.428c-3.126-4.008-6.104-9.516-4.125-14.42
 66 | 	c2.841-7.035,11.849-5.146,15.664-3.979c-0.729-2.98-0.164-6.256,1.22-9.289c0.515-3.969,2.149-8.094,6.343-10.193
 67 | 	c4.431-2.219,8.096-1.473,10.754-0.033c1.334,0.559,2.593,1.51,3.723,2.914c0.455-1.299,1.194-2.564,2.166-3.762
 68 | 	c1.136-3.48,3.421-7.799,7.977-9.73c8.248-3.496,19.132-2.521,19.866,3.738c0.054,0.463,0.103,0.879,0.149,1.275
 69 | 	c0.519,0.854,0.906,1.855,1.159,3c4.992-4.566,12.78-6.443,19.139-3.891c7.123,2.859,8.438,8.816,6.065,14.672
 70 | 	c0,0.168-0.002,0.314-0.006,0.447c1.47-0.23,2.981-0.309,4.496-0.242c2.219-0.18,5.108-0.066,8.344,0.92
 71 | 	c1.813,0.551,3.099,1.846,4.011,3.477c3.524,2.932,3.987,6.318,2.121,9.414c0.037,1.072,0.023,1.99,0,2.635
 72 | 	c3.668,0.785,6.95,2.994,7.922,6.955c1.004,4.088-0.68,7.51-3.629,9.805c4.959,1.566,10.146,5.414,7.322,11.223
 73 | 	c-1.807,3.719-5.26,6.174-9.121,7.385c-1.078,0.602-1.964,0.896-2.682,1.02c1.525,1.418,2.693,3.199,3.02,5.063
 74 | 	c0.985,2.502,0.889,5.918-2.148,10.373c-5.417,7.945-13.018,6.973-17.006,5.721c-0.766-0.006-1.528-0.049-2.282-0.129
 75 | 	c4.791,13.646,5.89,27.797,0.797,41.758c-2.894,7.932-7.782,18.584-16.494,21.615c0.868,0.898,1.828,1.711,2.898,2.439
 76 | 	c0.295-0.148,0.608-0.248,0.884-0.248c3.709,0.004,7.543,0.023,11.429,0.137c0.72-0.566,2.873-0.705,2.667-0.277
 77 | 	c-0.058,0.119-0.109,0.244-0.167,0.365c16.732,0.674,34.175,3.393,46.875,14.418c11.063,9.605,15.132,23.209,19.628,36.664
 78 | 	c8.269,24.75,15.459,49.895,22.271,75.08c0.223,0.822-1.333,1.465-2.262,1.279c-0.599,0.07-1.195,0.15-1.793,0.23
 79 | 	c0.033,0.164,0.063,0.33,0.094,0.494c0.668-0.117,1.333,0.072,1.436,0.715C412.62,424.881,428.89,440.12,438.261,458.415z
 80 | 	 M298.206,267.571c-2.388,0.719-4.969,0.953-7.324,0.947c-1.452-0.004,1.22-1.244,1.863-1.242
 81 | 	c9.998,0.027,13.242-8.828,10.251-17.277c-0.451-1.271-1.009-2.57-1.694-3.793c-3.021-2.756-6.697-4.17-8.988-4.146
 82 | 	c-0.723,0.715-1.374,1.703-1.983,2.863c-0.007,0.014-0.02,0.023-0.028,0.037c0.443,1.006,0.512,2.109-0.004,3.33
 83 | 	c-1.879,4.443-9.223,6.551-4.711,12.068c0.649,0.793-2.13,1.791-2.703,1.09c-3.634-4.445-0.382-7.205,2.792-10.572
 84 | 	c5.473-5.811-3.145-9.252-7.506-12.193c-11.741-7.92-17.435-20.213-20.239-33.549c-2.261,2.297-7.634,7.104-16.208,10.928
 85 | 	c-3.312,1.477-7.719,2.646-12.335,3.563c-7.522,2.344-15.328,3.656-22.841,3.93c0.454,1.277,0.848,2.543,1.175,3.781
 86 | 	c3.21,12.148,4.21,25.273,2.601,37.756c-0.476,3.689-1.22,7.584-2.333,11.4c0.207,0.023,0.361,0.096,0.418,0.229
 87 | 	c7.054,16.295,23.864,23.471,41.049,21.93c12.201-1.096,27.51-5.064,33.22,9.271c0.209,0.523-2.627,1.455-2.897,0.775
 88 | 	c-2.321-5.826-6.345-8.557-11.194-9.689c-1.367,8.275-0.813,17.492,2.492,25.232c4.047,9.479,12.345,15.146,22.274,8.898
 89 | 	c20.135-12.67,17.625-37,26.228-56.422c-2.933-0.096-5.847-0.137-8.722-0.152c0.034,0.016,0.063,0.035,0.099,0.051
 90 | 	c0.315,0.146-1.955,1.342-2.73,0.986C303.473,275.422,300.718,271.971,298.206,267.571z M194.468,350.592
 91 | 	c2.606-8.877,5.294-17.723,9.116-26.199c4.925-10.922,11.906-23.121,23.896-26.982c-8.85-2.969-16.127-8.594-20.689-17.258
 92 | 	c-3.143,8.609-8.436,16.334-17.186,19.771c-2.435,0.957-5.027,1.637-7.662,1.986c0,6.699,0,13.4,0,20.102
 93 | 	c0.042-0.004,0.085-0.008,0.124-0.008c9.907,0.254,11.595,15.957,11.727,23.156c0.003,0.168-0.088,0.318-0.236,0.455
 94 | 	C194.067,347.272,194.354,348.932,194.468,350.592z M309.13,268.803l-3.914,2.855C306.638,271.022,307.945,270.01,309.13,268.803z
 95 | 	 M175.619,201.358c9.716,4.582,16.376,16.162,18.968,25.977c3.21,12.148,4.21,25.273,2.601,37.756
 96 | 	c-0.987,7.656-3.122,16.18-7.343,23.088c-0.026,0.145-0.12,0.285-0.258,0.414c-3.134,4.979-7.382,9.078-13.118,11.332
 97 | 	c-0.161,0.063-0.326,0.119-0.488,0.18c7.575,0.846,15.449-1.711,20.647-7.422c11.069-12.162,12.45-31.555,11.125-47.166
 98 | 	c-0.632-7.445-1.836-14.996-4.359-22.059c-1.144-3.201-2.932-6.75-5.227-10.057c-0.047-0.066-0.093-0.137-0.141-0.205
 99 | 	c-4.62-6.576-11.255-12.137-18.86-11.967c-0.042,0.002-0.076-0.004-0.116-0.004c-0.086,0.01-0.171,0.016-0.253,0.01
100 | 	C177.689,201.168,176.634,201.219,175.619,201.358z M194.618,245.516c-0.632-7.447-1.836-14.996-4.359-22.059
101 | 	c-2.824-7.904-9.56-17.934-18.216-21.17c-3.8,1.508-6.845,4.465-9.277,8.051c0.584,0.027,1.094,0.295,1.125,0.898
102 | 	c1.322,25.34,5.186,56.318,24.248,75.004C194.936,274.331,195.729,258.596,194.618,245.516z M155.768,226.856
103 | 	c-4.443,16.789-5.156,36.182,0.272,52.828c2.634,8.08,7.436,17.227,16.254,19.705c4.247-1.141,8.177-3.387,11.199-6.709
104 | 	c1.162-1.277,2.212-2.637,3.168-4.061c-19.949-18.416-24.16-49.613-25.609-75.482C158.599,217.569,156.906,222.557,155.768,226.856z
105 | 	 M167.937,300.167c-6.785-3-11.214-9.865-13.713-16.598c-5.874-15.828-6.164-34.592-2.664-51.018
106 | 	c2.377-11.158,7.306-25.6,17.739-31.041c-1.067-0.205-2.157-0.305-3.268-0.281c-0.042,0.002-0.076-0.004-0.116-0.004
107 | 	c-0.086,0.01-0.171,0.014-0.253,0.01c-13.637-0.814-20.125,14.652-23.029,25.621c-4.443,16.789-5.156,36.182,0.271,52.828
108 | 	c2.702,8.285,7.668,17.709,16.921,19.9C162.484,300.215,165.234,300.403,167.937,300.167z M170.888,301.559
109 | 	c0,11.941,0,23.883,0,35.826c2.866-0.049,5.712,0.203,8.268,1.049c-0.069-0.096-0.111-0.209-0.111-0.35c0-11.977,0-23.951,0-35.928
110 | 	c-2.509,0.092-5.019-0.146-7.441-0.748C171.366,301.463,171.127,301.512,170.888,301.559z M168.616,373.809
111 | 	c-1.637,0.012-0.919-1.828,0.563-1.994c3.642-0.41,7.48-3.113,7.368-7.035c-0.499,0.23-1.013,0.445-1.563,0.627
112 | 	c-1.135,0.375-2.986-0.1-1.025-0.744c5.446-1.791,7.019-6.992,5.668-11.994c-0.248,0.166-0.494,0.318-0.734,0.457
113 | 	c-1.045,0.598-3.55-0.072-1.848-1.047c5.146-2.943,7.819-9.664,0.446-11.824c-5.593-1.639-11.893-0.795-17.566,0.043
114 | 	c-1.99,0.293-1.132-1.596,0.34-1.814c2.349-0.346,5.004-0.744,7.725-0.957c0-3.281,0-6.564,0-9.848
115 | 	c-0.283,0.215-0.672,0.385-1.093,0.42c-5.6,0.475-9.517,7.705-11.572,12.262c-2.261,5.016-4.084,10.285-4.528,15.809
116 | 	c-0.362,4.504-1.174,10.326,1.049,14.521C154.49,375.684,164.174,378.469,168.616,373.809z M234.356,418.665
117 | 	c-16.109-6.596-29.6-19.488-46.788-23.318c0.746,2.412,2.061,4.547,3.285,6.822c3.78,7.035,6.858,14.402,9.754,21.838
118 | 	c0.462,1.186-2.415,2.016-2.897,0.775c-3.062-7.859-6.324-15.639-10.424-23.02c-1.37-2.469-2.762-4.883-3.099-7.734
119 | 	c-0.804-6.795,0.03-13.387,2.145-19.889c3.055-9.391,7.664-19.486,3.787-29.311c-0.188-0.475,0.167-0.891,0.687-1.143
120 | 	c-0.39-6.613-2.175-18.832-8.863-20.191c0,4.742,0,9.486,0,14.229c0,0.584-1.082,1.043-1.924,1.033
121 | 	c1.005,0.396,1.963,0.885,2.845,1.504c4.183,2.938,2.198,7.328-0.763,10.344c0.011,0.018,0.028,0.031,0.035,0.053
122 | 	c1.837,4.969,0.634,9.551-2.886,12.453c0.089,0.098,0.149,0.219,0.167,0.369c0.574,4.91-3.415,8.342-7.777,9.721
123 | 	c0.063,0.096,0.043,0.223-0.101,0.389c-2.938,3.396-8.102,4.234-12.588,3.803c6.285,7.039,5.538,16.482,4.057,25.74
124 | 	c-1.257,7.855-2.011,15.742-1.958,23.707c0.064,9.82,0.754,20.232,4.408,29.459c1.984,5.012,4.906,11.215,10.417,13.033
125 | 	c9.809,3.238,21.629,1.361,30.454-3.721C223.169,455.915,230.756,436.883,234.356,418.665z M247.547,381.606
126 | 	c-0.663-0.186-1.322-0.383-1.976-0.615c-2.241-0.795-4.296-1.953-6.292-3.236c-0.278,0.477-0.711,0.955-1.334,1.422
127 | 	c-3.575,2.672-7.332,1.959-11.142,0.117c-3.943-1.906-10.283-5.895-10.749-10.105c-0.07-0.635-0.006-1.273,0.219-1.914
128 | 	c0.359-1.018,1.124-2.029,2.419-3.016c-0.427-4.674,3.549-7.488,6.327-10.646c0.318-0.359,0.747-0.592,1.209-0.707
129 | 	c0.014-1.521,0.513-2.916,1.406-4.188c0.203-0.291,0.428-0.572,0.67-0.85c-0.398,0.041-0.797,0.086-1.196,0.133
130 | 	c-4.561,0.543-9.135,1.385-13.441-0.645c-4.866-2.295-0.668-5.52,2.231-6.871c5.109-2.379,11.525-3.063,17.04-3.783
131 | 	c4.66-0.609,9.542-1.125,14.218-0.389c0.351,0.055,0.701,0.115,1.05,0.188c-0.002-0.066,0.018-0.137,0.058-0.209
132 | 	c0.097-0.18,0.322-0.375,0.737-0.576c3.756-1.818,7.292-2.105,10.978,0.016c3.006,1.73,4.587,5.207,6.708,7.84
133 | 	c2.366,2.938,4.779,5.84,7.28,8.662c1.178,1.33,2.356,2.666,3.608,3.93c0.462,0.465,0.92,0.943,1.417,1.375
134 | 	c0.388,0.338,0.556,0.473,0.588,0.518c0.499-0.039,0.926,0.051,1.039,0.313c8.232,5.42,16.021,11.398,23.902,17.244
135 | 	c7.67,5.691,15.427,11.256,23.767,16.053c1.074,0.617,2.153,1.238,3.234,1.861c0.525,0.303,1.049,0.607,1.574,0.912
136 | 	c-0.063-17.641-0.742-35.27-0.768-52.91c-0.002-0.883,2.896-1.324,2.896-0.775c0.027,18.135,0.75,36.262,0.777,54.396
137 | 	c0,0.256-0.246,0.473-0.59,0.643c7.228,4.246,14.361,8.77,20.57,14.256c17.865-0.281,35.006-6.732,52.63-9.051
138 | 	c-6.472-23.896-13.291-47.748-21.059-71.256c-4.104-12.42-7.736-26.932-17.373-36.381c-12.821-12.568-30.556-15.744-47.999-16.541
139 | 	c-8.762,20.656-6.817,51.898-33.147,59.42c-21.34,6.096-25.916-22.66-23.146-37.697c-0.783-0.094-1.583-0.152-2.395-0.188
140 | 	c-3.583-0.158-7.409,0.184-11.212,0.574c-5.279,0.543-10.51,1.168-14.971,0.645c-2.557-0.299-5.031-0.777-7.409-1.428
141 | 	c-14.148,3.295-21.515,20.25-26.162,32.457c-4.604,12.098-7.564,24.67-11.677,36.918c-0.099,0.293-0.47,0.531-0.916,0.689
142 | 	c-0.347,1.035-0.696,2.064-1.038,3.088c-2.381,7.133-4.1,14.398-3.026,21.955c0.031,0.221,0.082,0.434,0.124,0.648
143 | 	c0.354-0.107,0.68-0.166,0.876-0.131c2.211,0.4,4.356,0.963,6.454,1.643c0.528,0.17,1.054,0.348,1.576,0.531
144 | 	c14.321,5.098,26.409,15.674,40.478,21.467c0.309,0.02,0.557,0.104,0.664,0.27c1.58,0.631,3.187,1.197,4.824,1.691
145 | 	c4.133-5.119,7.147-11.256,9.119-17.504C248.658,395.418,247.158,388.543,247.547,381.606z M277.751,359.006
146 | 	c0.067-0.295,0.401-0.543,0.821-0.715c0.297-0.119,0.635-0.199,0.952-0.23c-0.187-0.059-0.749-0.271-1.21,0.018
147 | 	C278.077,358.223,277.866,358.499,277.751,359.006z M399.243,446.917c5.163-13.576,8.502-29.324,5.514-43.797
148 | 	c-15.732,2.504-31.125,7.693-47.073,8.488c4.434,4.17,8.337,8.879,11.346,14.432c0.195,0.359-2.538,1.439-2.897,0.775
149 | 	c-3.215-5.932-7.445-10.889-12.26-15.244c-0.002-0.002-0.004-0.004-0.007-0.006c-8.733-7.896-19.411-13.781-29.622-19.695
150 | 	c-16.121-9.336-30.032-21.664-45.493-31.959c-2.502-0.652-6.48-5.439-6.836-5.84c-2.716-3.064-5.371-6.191-7.927-9.393
151 | 	c-3.504-4.387-6.519-11.424-13.869-7.865c-0.077,0.037-0.156,0.068-0.235,0.096c0.58,0.16,1.156,0.34,1.725,0.551
152 | 	c1.011,0.375-1.624,1.502-2.352,1.23c-7.641-2.832-16.266-1.006-24.197,0.568c-1.092,0.215-2.171,0.428-3.232,0.621
153 | 	c-0.801,0.146-3.908,0.832-5.921,1.922c-0.698,0.379-1.262,0.805-1.554,1.275c-0.248,0.4-0.306,0.832-0.069,1.293
154 | 	c0.31,0.604,0.758,1.096,1.288,1.496c1.51,1.145,3.709,1.523,5.476,1.455c2.907-0.111,5.779-0.578,8.67-0.834
155 | 	c0.187-0.156,0.378-0.313,0.579-0.465c0.54-0.412,1.275-0.613,1.943-0.68c0.195-0.018,1.207,0.014,0.67,0.424
156 | 	c-0.244,0.188-0.475,0.377-0.698,0.57c1.466,0.049-0.419,1.225-1.317,1.338c-1.888,2.277-2.359,4.953-0.934,8.123
157 | 	c0.204,0.455-2.598,1.443-2.897,0.777c-0.245-0.545-0.433-1.074-0.57-1.592c-2.413,2.432-5.279,4.975-4.899,8.598
158 | 	c0.006,0.057-0.001,0.111-0.01,0.166c0.306,0.229,0.315,0.582-0.344,1.016c-5.675,3.74,0.444,9.123,4.3,11.275
159 | 	c2.013,1.125,4.325,2.414,6.565,2.939c1.555,0.367,2.984-0.109,3.799-0.891c0.307-0.295,0.529-0.629,0.632-0.982
160 | 	c0.126-0.436,0.073-0.891-0.201-1.318c-0.614-0.42-1.229-0.84-1.847-1.252c-0.094-0.033-0.172-0.072-0.274-0.104
161 | 	c-0.37-0.113-0.533-0.275-0.565-0.453c-1.741-1.135-3.525-2.189-5.436-3.006c-0.329-0.141,1.933-1.334,2.729-0.996
162 | 	c1.788,0.762,3.48,1.74,5.136,2.801c1.285,0.414,2.376,1.129,3.007,2c3.229,2.193,6.459,4.383,10.137,5.553
163 | 	c0.655-0.104,1.249-0.039,1.231,0.246c-0.002,0.031-0.002,0.064-0.004,0.098c0.136,0.033,0.269,0.076,0.406,0.105
164 | 	c6.404,1.424,13.044,1.316,19.399,2.971c0.329-0.021,0.612,0.029,0.765,0.184c9.793,9.896,18.427,20.799,27.19,31.592
165 | 	c7.793,9.6,16.119,18.738,23.735,28.48c7.013,8.967,13.949,18.467,22.804,25.738c6.627,5.443,15.199,10.965,24.233,9.672
166 | 	C384.505,477.192,394.198,460.184,399.243,446.917z M453.267,207.874c-5.459,7.311-12.637,12.105-20.412,16.611
167 | 	c-6.493,3.766-9.827,8.203-9.73,15.955c0.067,5.432,0.539,10.789-0.483,16.16c-0.157,0.824-3.044,1.328-2.876,0.445
168 | 	c0-0.002,0-0.004,0.001-0.006c-0.49,0.211-1.017,0.383-1.249,0.383c-6.195,0-12.391,0-18.585,0c-0.903,0.549-2.5,0.539-2.336-0.463
169 | 	c1.835-11.229-2.064-23.965,1.903-34.744c2.551-6.928,8.535-9.76,14.488-13.385c8.629-5.252,21.404-17.18,11.803-27.826
170 | 	c-4.902-5.436-18.576-7.807-21.194,1.078c-0.326,1.107-3.079,1.49-2.938,0.395c-7.271,0-14.541,0-21.812,0
171 | 	c-1.429,0-0.767-0.891,0.125-1.373c-2.507-16.033,14.223-26.977,28.073-30.137c13.564-3.094,32.131-1.816,41.473,9.908
172 | 	C459.415,173.303,463.288,194.452,453.267,207.874z M455.589,196.653c1.418-7.98-0.002-16.738-2.935-24.252
173 | 	c-6.262-16.043-19.991-21.973-36.575-21.217c-15.318,0.697-36.388,11.461-33.133,29.615c6.446,0,12.893,0,19.338,0
174 | 	c2.824-5.934,10.499-7.357,16.629-6.039c9.16,1.969,15.742,10.441,11.836,19.984c-2.315,5.658-6.469,9.809-11.523,13.109
175 | 	c-4.161,2.717-9.309,4.785-12.917,8.252c-4.481,4.309-5.353,10.354-5.332,16.332c0.024,7.961,0.813,15.877-0.399,23.783
176 | 	c6.442,0,12.883,0,19.325,0c1.218-8.389-2.44-19.914,3.781-26.676c5.202-5.652,12.907-8.09,18.737-13.033
177 | 	C448.558,211.309,454.136,204.823,455.589,196.653z M401.087,266.926c0,0.125,0,0.252,0,0.377c5.908,0,11.817,0,17.728,0
178 | 	c0.677-0.586,2.671-0.813,2.671-0.377c0,7.188,0,14.377,0,21.563c0,0.867-2.896,1.301-2.896,0.777c0-0.125,0-0.252,0-0.377
179 | 	c-0.024,0.002-0.053,0.006-0.072,0.006c-5.889,0-11.775,0-17.663,0c-0.685,0.582-2.665,0.805-2.665,0.371c0-7.188,0-14.377,0-21.563
180 | 	C398.189,266.836,401.087,266.403,401.087,266.926z M401.087,268.502c0,6.398,0,12.797,0,19.193c5.834,0,11.666,0,17.5,0
181 | 	c0-6.398,0-12.801,0-19.199c-0.023,0.002-0.051,0.006-0.071,0.006C412.706,268.502,406.896,268.502,401.087,268.502z" fill="#01c6ac"></path>
182 | </svg>


--------------------------------------------------------------------------------