add splash screen, Privacy Policy, and transition

Rauliqbal · Dec 2, 2022 · db39bcc · db39bcc · vercel · Dec 2, 2022
1 parent f8e5553
commit db39bcc
Show file tree

Hide file tree

Showing 14 changed files with 548 additions and 443 deletions.
diff --git a/package.json b/package.json
@@ -1,34 +1,34 @@
 {
-  "name": "my-mushaf",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@vueuse/core": "^9.3.0",
-    "axios": "^0.27.2",
-    "core-js": "^3.8.3",
-    "register-service-worker": "^1.7.2",
-    "vue": "^3.2.13",
-    "vue-router": "^4.0.3"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-pwa": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "autoprefixer": "^10.4.12",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "postcss": "^8.4.17",
-    "tailwindcss": "^3.1.8"
-  },
-  "_id": "e-quran@0.1.0",
-  "readme": "ERROR: No README data found!"
+   "name": "my-mushaf",
+   "version": "1.0.1",
+   "private": true,
+   "scripts": {
+      "dev": "vue-cli-service serve",
+      "build": "vue-cli-service build",
+      "lint": "vue-cli-service lint"
+   },
+   "dependencies": {
+      "@vueuse/core": "^9.3.0",
+      "axios": "^0.27.2",
+      "core-js": "^3.8.3",
+      "register-service-worker": "^1.7.2",
+      "vue": "^3.2.13",
+      "vue-router": "^4.0.3"
+   },
+   "devDependencies": {
+      "@babel/core": "^7.12.16",
+      "@babel/eslint-parser": "^7.12.16",
+      "@vue/cli-plugin-babel": "~5.0.0",
+      "@vue/cli-plugin-eslint": "~5.0.0",
+      "@vue/cli-plugin-pwa": "~5.0.0",
+      "@vue/cli-plugin-router": "~5.0.0",
+      "@vue/cli-service": "~5.0.0",
+      "autoprefixer": "^10.4.12",
+      "eslint": "^7.32.0",
+      "eslint-plugin-vue": "^8.0.3",
+      "postcss": "^8.4.17",
+      "tailwindcss": "^3.1.8"
+   },
+   "_id": "e-quran@0.1.0",
+   "readme": "ERROR: No README data found!"
 }
diff --git a/public/index.html b/public/index.html
@@ -1,23 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="../public/favicon.ico">
-    <link rel="shortcut icon" href="../public/favicon.ico" type="image/x-icon">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
-    <meta name="description" content="Aplikasi Al-Qur'an Digital Bahasa Indonesia.">
+   <head>
+      <meta charset="utf-8" />
+      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+      <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+      <meta name="keywords" content="My Mushaf, Al Quran digital indonesia, al-quran digital" />
+      <link rel="icon" href="../public/favicon.ico" />
+      <link rel="shortcut icon" href="../public/favicon.ico" type="image/x-icon" />
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
+      <meta name="description" content="My Mushaf - Aplikasi Al-Qur'an Digital Bahasa Indonesia." />
 
-    <title>Al- Qur'an Digital | Bahasa Indonesia</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app" class="bg-[#DEF5F6] "></div>
-    <!-- built files will be auto injected -->
-  </body>
+      <title>My Mushaf - Al Qur'an Digital Indonesia</title>
+   </head>
+   <body>
+      <noscript>
+         <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      </noscript>
+      <div id="app"></div>
+      <!-- built files will be auto injected -->
+   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,32 +1,32 @@
 {
-    "name": "My Mushaf",
-    "short_name": "My Mushaf Indonesia",
-    "theme_color": "#3EA642",
-    "icons": [
-        {
-            "src": "./img/icons/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "./img/icons/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        },
-        {
-            "src": "./img/icons/android-chrome-maskable-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png",
-            "purpose": "maskable"
-        },
-        {
-            "src": "./img/icons/android-chrome-maskable-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png",
-            "purpose": "maskable"
-        }
-    ],
-    "start_url": ".",
-    "display": "standalone",
-    "background_color": "#FFAAA0"
-}
+   "name": "My Mushaf",
+   "short_name": "My Mushaf Indonesia",
+   "theme_color": "#3EA642",
+   "icons": [
+      {
+         "src": "./img/icons/android-chrome-192x192.png",
+         "sizes": "192x192",
+         "type": "image/png"
+      },
+      {
+         "src": "./img/icons/android-chrome-512x512.png",
+         "sizes": "512x512",
+         "type": "image/png"
+      },
+      {
+         "src": "./img/icons/android-chrome-maskable-192x192.png",
+         "sizes": "192x192",
+         "type": "image/png",
+         "purpose": "maskable"
+      },
+      {
+         "src": "./img/icons/android-chrome-maskable-512x512.png",
+         "sizes": "512x512",
+         "type": "image/png",
+         "purpose": "maskable"
+      }
+   ],
+   "start_url": ".",
+   "display": "standalone",
+   "background_color": "#3EA642"
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,18 @@
 <template>
-  <div class="md:container mx-auto">
-    <!-- <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav> -->
-    <router-view />
-  </div>
+   <router-view v-slot="{ Component }">
+      <transition name="fade" mode="out-in">
+         <component :is="Component"></component>
+      </transition>
+   </router-view>
 </template>
+
+<style type="text/css">
+.fade-enter-active,
+.fade-leave-active {
+   transition: opacity 0.5s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+   opacity: 0;
+}
+</style>
diff --git a/src/assets/logo-splash.png b/src/assets/logo-splash.png
diff --git a/src/components/ListSurat.vue b/src/components/ListSurat.vue
@@ -1,44 +1,46 @@
 <template>
-  <router-link @click="reloadPage" v-for="surat in surah" :key="surat.id" :to="'/surat/' + surat.nomor" class="flex items-center justify-between py-3 px-4 bg-white rounded-lg hover:bg-slate-300
-                    transition-all
-                    duration-300
-                    ease-out">
-    <div class="ml-4">
-      <h2 class="text-primary text-lg font-semibold">{{surat.nama_latin}}</h2>
-      <h3 class="text-[12px] text-slate-500 ">{{surat.tempat_turun}} - {{surat.jumlah_ayat}} ayat</h3>
-    </div>
-    <span class="relative flex items-center justify-center">
-        <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M17.0178 2.23325C16.2197 1.3031 14.7803 1.3031 13.9822 2.23325L11.2997 5.35948L7.19225 5.04573C5.97017 4.95238 4.95238 5.97018 5.04573 7.19225L5.35948 11.2997L6.01068 12.0586L5.35948 11.2997L2.23325 13.9822C1.3031 14.7803 1.3031 16.2197 2.23325 17.0178L5.35948 19.7003L5.04573 23.8077C4.95238 25.0298 5.97018 26.0476 7.19225 25.9543L11.2997 25.6405L13.9822 28.7668C14.7803 29.6969 16.2197 29.6969 17.0178 28.7668L19.7003 25.6405L23.8077 25.9543C25.0298 26.0476 26.0476 25.0298 25.9543 23.8077L25.6405 19.7003L28.7668 17.0178C29.6969 16.2197 29.6969 14.7803 28.7668 13.9822L25.6405 11.2997L25.9543 7.19225C26.0476 5.97018 25.0298 4.95238 23.8077 5.04573L19.7003 5.35949L17.0178 2.23325Z" stroke="#3EA642" stroke-width="2"/>
-        </svg>
-        <span class="absolute text-center text-[12px]">{{surat.nomor}}</span>
-    </span>
-  </router-link>
+   <router-link @click="reloadPage" v-for="surat in surah" :key="surat.id" :to="'/surat/' + surat.nomor" class="flex items-center justify-between py-3 px-4 bg-white rounded-lg hover:bg-slate-300 transition-all duration-300 ease-out">
+      <div class="ml-4">
+         <h2 class="text-primary text-lg font-semibold">{{ surat.nama_latin }}</h2>
+         <h3 class="text-[12px] text-slate-500">{{ surat.tempat_turun }} - {{ surat.jumlah_ayat }} ayat</h3>
+      </div>
+      <span class="relative flex items-center justify-center">
+         <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+               d="M17.0178 2.23325C16.2197 1.3031 14.7803 1.3031 13.9822 2.23325L11.2997 5.35948L7.19225 5.04573C5.97017 4.95238 4.95238 5.97018 5.04573 7.19225L5.35948 11.2997L6.01068 12.0586L5.35948 11.2997L2.23325 13.9822C1.3031 14.7803 1.3031 16.2197 2.23325 17.0178L5.35948 19.7003L5.04573 23.8077C4.95238 25.0298 5.97018 26.0476 7.19225 25.9543L11.2997 25.6405L13.9822 28.7668C14.7803 29.6969 16.2197 29.6969 17.0178 28.7668L19.7003 25.6405L23.8077 25.9543C25.0298 26.0476 26.0476 25.0298 25.9543 23.8077L25.6405 19.7003L28.7668 17.0178C29.6969 16.2197 29.6969 14.7803 28.7668 13.9822L25.6405 11.2997L25.9543 7.19225C26.0476 5.97018 25.0298 4.95238 23.8077 5.04573L19.7003 5.35949L17.0178 2.23325Z"
+               stroke="#3EA642"
+               stroke-width="2"
+            />
+         </svg>
+         <span class="absolute text-center text-[12px]">{{ surat.nomor }}</span>
+      </span>
+   </router-link>
 </template>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
-    data() {
-        return {
-            surah: [],
-        }
-    },
-    methods : {
-        setSurah (data) {
-            this.surah = data;
-        },
-        reloadPage() {
-           window.setTimeout(function(){location.reload()},100)
-        },
-        
-    },
-    mounted() {
-        axios
-            .get("https://equran.id/api/surat/")
-            .then((response) => this.setSurah(response.data) )
-            .catch((error) => console.log(error + 'Tidak dapat response'))
-    }
-}
-</script>
+   data() {
+      return {
+         surah: [],
+      };
+   },
+   methods: {
+      setSurah(data) {
+         this.surah = data;
+      },
+      reloadPage() {
+         window.setTimeout(function () {
+            location.reload();
+         }, 100);
+      },
+   },
+   mounted() {
+      axios
+         .get("https://api-mymushaf.herokuapp.com/surah")
+         .then((response) => this.setSurah(response.data))
+         .catch((error) => console.log(error + "Tidak dapat response"));
+   },
+};
+</script>
diff --git a/src/components/ModalStarted.vue b/src/components/ModalStarted.vue
diff --git a/src/components/PageLoader.vue b/src/components/PageLoader.vue
@@ -0,0 +1,22 @@
+<template>
+   <div v-if="!isloaded" class="flex items-center justify-center fixed z-50 top-0 left-0 w-screen h-screen bg-white">
+      <div style="border-top-color: transparent" class="w-16 h-16 border-4 border-primary border-solid rounded-full animate-spin"></div>
+   </div>
+</template>
+
+<script>
+export default {
+   data() {
+      return {
+         isloaded: false,
+      };
+   },
+   mounted() {
+      document.onreadystatechange = () => {
+         if (document.readyState == "complete") {
+            this.isloaded = true;
+         }
+      };
+   },
+};
+</script>