history API added

css/index.css

@@ -304,24 +304,7 @@ body {
     font-family: 'Quicksand';
     display: flex;
     flex-direction: column;
-}
-
-#banner-image-div {
-    position: absolute;
     background-color: rgb(40, 40, 40);
-    left: 0;
-    right: 0;
-    margin: auto;
-    margin-top: 69px;
-    font-family: 'Quicksand';
-    display: flex;
-    flex-direction: column;
-    z-index: -1;
-    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
-}
-
-.banner-image {
-    opacity: 0.5;
 }
 
 #anime-title {

ico/about.txt

@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Cute Font
+- Font Author: COPYRIGHT  2004-2017 by TypoDesign Lab. Inc. All rights reserved. Font designed by TypoDesign Lab. Inc.
+- Font Source: https://fonts.gstatic.com/s/cutefont/v22/Noaw6Uny2oWPbSHMrY6vmJNVNC9hkw.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))

ico/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

index.html

@@ -4,6 +4,10 @@
     <title>
         Anime見る
     </title>
+    <link rel="apple-touch-icon" sizes="180x180" href="ico\apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="ico\favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="ico\favicon-16x16.png">
+    <link rel="manifest" href="ico\site.webmanifest">
 </head>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -56,7 +60,6 @@ <h2 id="anime-title-eng"></h2>
                 <h2 id="anime-title-jap"></h2>
                 <div id="genre-div"></div>
             </div>
-            <div id="banner-image-div"></div>
             <div id="anime-outermost-details-div">
                 <div id="anime-details-main-div">
                     <img src="" id="anime-image">

js/index.js

@@ -9,14 +9,18 @@ function router() {
     const route = routes[path];
 
     if (route) {
+        if (history.state && history.state.localStorageState) {
+            for (const key in history.state.localStorageState) {
+                localStorage.setItem(key, history.state.localStorageState[key]);
+            }
+        }
         route();
     }
     else {
         document.getElementById('anime-div').innerHTML = '404 Page Not Found';
     }
 }
-
-window.addEventListener('hashchange', router);
+window.addEventListener('popstate', router);
 window.addEventListener('load', router);
 
 
@@ -42,7 +46,6 @@ function localStorageFunc(str) {
     localStorage.setItem("favourites", str.favourites);
     localStorage.setItem("score", str.averageScore);
     localStorage.setItem("id", str.id);
-    // localStorage.setItem("banner image", str.bannerImage);
 
     const sourceMap = {
         "ORIGINAL": "Original",
@@ -168,7 +171,14 @@ function localStorageFunc(str) {
     str.format = format[str.format] || str.format;
     localStorage.setItem("format", str.format);
 
-    window.location.href = "#/anime_about";
+    const localStorageState = {};
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        localStorageState[key] = localStorage.getItem(key);
+    }
+
+    history.pushState({ localStorageState }, null, '#/anime_about');
+    router();
 }
 
 function nullfunc(str) {
@@ -893,19 +903,6 @@ function animeAboutDiv() {
     animeHomePageDiv.style.display = "none";
     animeAboutDetailsDiv.style.display = "block";
 
-    // const bannerImageDiv = document.getElementById("banner-image-div");
-    // const bannerImage = document.createElement("img");
-    // bannerImage.classList.add("banner-image");
-    // bannerImage.src = localStorage.getItem("banner image");
-
-    // if (bannerImage.src === "http://127.0.0.1:5500/null") {
-    //     localStorage.removeItem("banner image");
-    //     bannerImageDiv.style.display = "none";
-    // }
-    // else {
-    //     bannerImageDiv.appendChild(bannerImage);
-    // }
-
     const animeImage = document.getElementById("anime-image");
     animeImage.src = localStorage.getItem("image");