├── .gitignore
├── .vscode
    └── settings.json
├── 1_Mining_Front.html
├── 2_Mining_Back.html
├── 3_Mining_Styling.css
├── Mining_temp.apkg
├── README.md
└── images
    ├── kanken.png
    ├── mining_template.gif
    ├── popup.png
    ├── search.png
    ├── sentence_back.png
    ├── sentence_front.png
    ├── vocab_back.png
    └── vocab_front.png


/.gitignore:
--------------------------------------------------------------------------------
1 | test.*
2 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.formatOnSave": true
3 | }
4 | 


--------------------------------------------------------------------------------
/1_Mining_Front.html:
--------------------------------------------------------------------------------
 1 | <!---------- Header ------------->
 2 | <header style="visibility: hidden"></header>
 3 | 
 4 | <main>
 5 |   <!--------- Vocab card ---------->
 6 |   {{^*IsSentenceCard}}
 7 |   <div lang="ja" class="vocab">{{Expression}}</div>
 8 |   {{#Hint}}
 9 |   <div id="hint">{{Hint}}</div>
10 |   {{/Hint}} {{/*IsSentenceCard}}
11 | 
12 |   <!------- Sentence card --------->
13 |   {{#*IsSentenceCard}}
14 |   <div lang="ja" class="sentence">
15 |     {{#SentenceFurigana}} {{kanji:SentenceFurigana}} {{/SentenceFurigana}}
16 |     {{^SentenceFurigana}} {{kanji:Sentence}} {{/SentenceFurigana}}
17 |   </div>
18 |   {{#Hint}}
19 |   <div id="hint">{{Hint}}</div>
20 |   {{/Hint}} {{/*IsSentenceCard}}
21 | </main>
22 | 


--------------------------------------------------------------------------------
/2_Mining_Back.html:
--------------------------------------------------------------------------------
  1 | <!---------- Header ------------->
  2 | <header>
  3 |   <div class="top-container">
  4 |     <p class="stars"></p>
  5 |     {{FreqSort}}
  6 |   </div>
  7 | </header>
  8 | 
  9 | <main>
 10 |   <div class="template">
 11 |     <!--------- Vocab card ---------->
 12 |     {{^*IsSentenceCard}}
 13 |     <div lang="ja" class="show-furigana vocab">
 14 |       {{#ExpressionFurigana}}{{furigana:ExpressionFurigana}}{{/ExpressionFurigana}}
 15 |       {{^ExpressionFurigana}}{{Expression}}{{/ExpressionFurigana}}
 16 |     </div>
 17 |     {{#Hint}}
 18 |     <div id="hint">{{Hint}}</div>
 19 |     {{/Hint}}
 20 |     <hr class="divider" />
 21 |     <div lang="ja" class="info">
 22 |       {{ExpressionAudio}} {{SentenceAudio}}
 23 |       <div class="pitch">
 24 |         <div style="margin-right: -15px; display: inline">
 25 |           {{#ExpressionFurigana}}{{kana:ExpressionFurigana}}{{/ExpressionFurigana}}
 26 |           {{^ExpressionFurigana}}{{ExpressionReading}}{{/ExpressionFurigana}}
 27 |         </div>
 28 |       </div>
 29 |       {{#PitchPosition}}
 30 |       <span id="pitch-tags" class="tags"> {{PitchPosition}} </span>
 31 |       {{/PitchPosition}} 【{{Expression}}】
 32 |     </div>
 33 |     <div lang="ja" class="main-def popup">
 34 |       <div class="definition">{{MainDefinition}}</div>
 35 |       <div class="def-info"></div>
 36 |     </div>
 37 |     <br />
 38 |     <div class="image">{{Image}}</div>
 39 |     <div lang="ja" class="small-sentence">
 40 |       {{#SentenceFurigana}} {{furigana:SentenceFurigana}} {{/SentenceFurigana}}
 41 |       {{^SentenceFurigana}} {{furigana:Sentence}} {{/SentenceFurigana}}
 42 |     </div>
 43 |     {{#Translation}}
 44 |     <div class="translation" lang="en">{{hint:Translation}}</div>
 45 |     {{/Translation}} {{/*IsSentenceCard}}
 46 | 
 47 |     <!------- Sentence card --------->
 48 |     {{#*IsSentenceCard}}
 49 |     <div lang="ja" class="sentence">
 50 |       {{#SentenceFurigana}} {{furigana:SentenceFurigana}} {{/SentenceFurigana}}
 51 |       {{^SentenceFurigana}} {{furigana:Sentence}} {{/SentenceFurigana}}
 52 |     </div>
 53 |     {{#Hint}}
 54 |     <div id="hint">{{Hint}}</div>
 55 |     {{/Hint}} {{#Translation}}
 56 |     <div class="translation" lang="en">{{hint:Translation}}</div>
 57 |     {{/Translation}}
 58 |     <hr class="divider" />
 59 |     <div lang="ja" class="info">
 60 |       {{ExpressionAudio}} {{SentenceAudio}}
 61 |       <div class="pitch">
 62 |         <div style="margin-right: -15px; display: inline">
 63 |           {{#ExpressionFurigana}}{{kana:ExpressionFurigana}}{{/ExpressionFurigana}}
 64 |           {{^ExpressionFurigana}}{{ExpressionReading}}{{/ExpressionFurigana}}
 65 |         </div>
 66 |       </div>
 67 |       {{#PitchPosition}}
 68 |       <span id="pitch-tags" class="tags"> {{PitchPosition}} </span>
 69 |       {{/PitchPosition}} 【{{Expression}}】
 70 |     </div>
 71 |     <div lang="ja" class="main-def popup">
 72 |       <div class="definition">{{MainDefinition}}</div>
 73 |       <div class="def-info"></div>
 74 |     </div>
 75 |     <br />
 76 |     <div class="image">{{Image}}</div>
 77 |     {{/*IsSentenceCard}}
 78 | 
 79 |     <!------- Image modal --------->
 80 |     <div class="modal-bg"></div>
 81 |     <div class="img-popup"></div>
 82 |   </div>
 83 | 
 84 |   <div class="extras">
 85 |     {{#MiscInfo}}
 86 |     <div style="text-align: center">
 87 |       <div lang="ja">
 88 |         <details>
 89 |           <summary>Misc. info</summary>
 90 |           <div class="misc-info popup">
 91 |             === Details ===
 92 |             <br />
 93 |             {{MiscInfo}} {{#Frequency}}
 94 |             <br />
 95 |             == Frequency == {{Frequency}} {{/Frequency}}
 96 |           </div>
 97 |         </details>
 98 |       </div>
 99 |     </div>
100 |     {{/MiscInfo}} {{#FullDefinition}}
101 |     <div style="text-align: center">
102 |       <div lang="ja">
103 |         <details>
104 |           <summary>Full definition</summary>
105 |           <div class="full-def popup">{{FullDefinition}}</div>
106 |         </details>
107 |       </div>
108 |     </div>
109 |     {{/FullDefinition}}
110 |   </div>
111 | </main>
112 | 
113 | <!----------- Footer ------------->
114 | <footer>
115 |   <div class="bot-container">
116 |     {{#Tags}}
117 |     <div lang="ja" class="tags-container">
118 |       <div class="tags">{{Tags}}</div>
119 |     </div>
120 |     {{/Tags}}
121 |     <input type="checkbox" class="extras-toggle" />
122 |   </div>
123 | </footer>
124 | 
125 | <!----------- Scripts ------------>
126 | <script>
127 |   function isOdaka(pitchNumber) {
128 |     const kana = `{{kana:ExpressionFurigana}}` || `{{ExpressionReading}}`;
129 |     return (
130 |       kana !== null &&
131 |       kana.replace(/[ャュョゃゅょ]/g, "").length === pitchNumber
132 |     );
133 |   }
134 | 
135 |   function getPitchType(pitchPosition) {
136 |     if (pitchPosition === 0) {
137 |       return "heiban";
138 |     } else if (pitchPosition === 1) {
139 |       return "atamadaka";
140 |     } else if (pitchPosition > 1) {
141 |       return isOdaka(pitchPosition) ? "odaka" : "nakadaka";
142 |     }
143 |   }
144 | 
145 |   function paintTargetWord() {
146 |     const pitchPositions = `{{PitchPosition}}`.match(/^\d+|\d+\b|\d+(?=\w)/g);
147 |     if (pitchPositions === null) return;
148 | 
149 |     const pitchPosition = Number(pitchPositions[0]);
150 |     const sentences = Array.from(
151 |       document.querySelectorAll(".sentence, .small-sentence")
152 |     );
153 |     for (const sentence of sentences) {
154 |       for (const targetWord of sentence.getElementsByTagName("b")) {
155 |         targetWord.classList.add(getPitchType(pitchPosition));
156 |       }
157 |     }
158 | 
159 |     const vocabElement = document.querySelector(".vocab");
160 |     if (vocabElement !== null) {
161 |       vocabElement.classList.add(getPitchType(pitchPosition));
162 |     }
163 |   }
164 | 
165 |   function tweakHTML() {
166 |     // Modify translation button label
167 |     const tlButton = document.querySelector(".translation > a.hint");
168 |     if (tlButton) {
169 |       tlButton.innerText = "Show Translation";
170 |     }
171 | 
172 |     // Split tags
173 |     const tagsContainer = document.querySelector(".tags-container");
174 |     const tags = `{{Tags}}`.split(" ");
175 |     if (tagsContainer) {
176 |       tagsContainer.innerHTML = "";
177 |       for (tag of tags) {
178 |         const tagElem = document.createElement("div");
179 |         tagElem.className = "tags";
180 |         tagElem.innerText = tag;
181 |         tagsContainer.appendChild(tagElem);
182 |       }
183 |     }
184 | 
185 |     // Get stars
186 |     const freq = Number(`{{FreqSort}}`);
187 |     const stars = document.querySelector(".stars");
188 |     if (freq > 0 && freq < 1500) stars.innerText = "★★★★★";
189 |     else if (freq >= 1500 && freq < 5000) stars.innerText = "★★★★";
190 |     else if (freq >= 5000 && freq < 15000) stars.innerText = "★★★";
191 |     else if (freq >= 15000 && freq < 30000) stars.innerText = "★★";
192 |     else if (freq >= 30000 && freq < 60000) stars.innerText = "★";
193 |     else stars.innerText = "";
194 | 
195 |     if (freq === 0) document.querySelector(".top-container").innerHTML = "";
196 | 
197 |     // Toggle extras display
198 |     const checkBox = document.querySelector(".extras-toggle");
199 |     const extras = document.querySelector(".extras");
200 |     checkBox.addEventListener("change", (e) => {
201 |       extras.style.display = checkBox.checked ? "block" : "none";
202 |     });
203 |     extras.style.display = checkBox.checked ? "block" : "none";
204 |   }
205 | 
206 |   function groupMoras(kana) {
207 |     let currentChar = "";
208 |     let nextChar = "";
209 |     const groupedMoras = [];
210 |     const check = ["ャ", "ュ", "ョ", "ゃ", "ゅ", "ょ"];
211 | 
212 |     for (let i = 0; i < kana.length; i++) {
213 |       currentChar = kana[i];
214 |       nextChar = i < kana.length - 1 && kana[i + 1];
215 |       if (check.includes(nextChar)) {
216 |         groupedMoras.push(currentChar + nextChar);
217 |         i += 1;
218 |       } else {
219 |         groupedMoras.push(currentChar);
220 |       }
221 |     }
222 |     return groupedMoras;
223 |   }
224 | 
225 |   function getPitchPattern(pitchPosition) {
226 |     // 0 = low
227 |     // 1 = high
228 |     // 2 = high to low
229 | 
230 |     const kana = `{{kana:ExpressionFurigana}}` || `{{ExpressionReading}}`;
231 |     const moras = groupMoras(kana);
232 |     let pattern = [];
233 | 
234 |     if (pitchPosition === 0) {
235 |       // 平板
236 |       pattern = [
237 |         ...Array(moras[0].length).fill("0"),
238 |         ...Array(kana.length - moras[0].length).fill("1"),
239 |       ];
240 |     } else if (pitchPosition === 1) {
241 |       // 頭高
242 |       pattern = [
243 |         ...(moras[0].length === 2 ? ["1", "2"] : ["2"]),
244 |         ...Array(kana.length - moras[0].length).fill("0"),
245 |       ];
246 |     } else if (pitchPosition > 1) {
247 |       if (isOdaka(pitchPosition)) {
248 |         // 尾高
249 |         pattern = [
250 |           ...Array(moras[0].length).fill("0"),
251 |           ...Array(kana.length - moras[0].length - 1).fill("1"),
252 |           "2",
253 |         ];
254 |       } else {
255 |         // 中高
256 |         let afterDrop = false;
257 |         for (let i = 0; i < moras.length; i++) {
258 |           if (i === 0) {
259 |             pattern = Array(moras[0].length).fill("0");
260 |           } else if (i + 1 === pitchPosition) {
261 |             pattern =
262 |               moras[i].length === 2
263 |                 ? [...pattern, "1", "2"]
264 |                 : [...pattern, "2"];
265 |             afterDrop = true;
266 |           } else if (afterDrop) {
267 |             pattern = [...pattern, ...Array(moras[i].length).fill("0")];
268 |           } else {
269 |             pattern = [...pattern, ...Array(moras[i].length).fill("1")];
270 |           }
271 |         }
272 |       }
273 |     }
274 |     return pattern;
275 |   }
276 | 
277 |   function constructPitch() {
278 |     const kana = `{{kana:ExpressionFurigana}}` || `{{ExpressionReading}}`;
279 |     const pitch = document.querySelector(".pitch");
280 |     const pitchTags = document.querySelector("#pitch-tags");
281 |     const pitchPositions = `{{PitchPosition}}`.match(/^\d+|\d+\b|\d+(?=\w)/g);
282 | 
283 |     if (!pitchPositions) {
284 |       pitch.innerHTML = `<div style="margin-right: -15px; display: inline;">${kana}</div>`;
285 |       return;
286 |     }
287 | 
288 |     const createPitchSpan = (pitchClass, pitchChar) => {
289 |       const pitchSpan = document.createElement("span");
290 |       const charSpan = document.createElement("span");
291 |       const lineSpan = document.createElement("span");
292 | 
293 |       pitchSpan.classList.add(pitchClass);
294 |       charSpan.classList.add("pitch-char");
295 |       charSpan.innerText = pitchChar;
296 |       lineSpan.classList.add("pitch-line");
297 | 
298 |       pitchSpan.appendChild(charSpan);
299 |       pitchSpan.appendChild(lineSpan);
300 | 
301 |       return pitchSpan;
302 |     };
303 | 
304 |     pitch.innerHTML = "";
305 |     pitchTags.innerHTML = "";
306 |     pitchTags.style.display = "inline-block";
307 |     let uniquePitchPositions = [...new Set(pitchPositions)];
308 | 
309 |     const pitchList = document.createElement("ul");
310 |     const pitchTagList = document.createElement("ul");
311 | 
312 |     for (let pitchPosition of uniquePitchPositions) {
313 |       const pitchTag = document.createElement("li");
314 |       pitchTag.textContent = pitchPosition;
315 | 
316 |       const pattern = getPitchPattern(Number(pitchPosition));
317 | 
318 |       const pitchItem = document.createElement("li");
319 |       pitchItem.classList.add("pitch-item");
320 |       pitchItem.classList.add(getPitchType(Number(pitchPosition)));
321 | 
322 |       for (let i = 0; i < kana.length; i++) {
323 |         if (pattern[i] === "0")
324 |           pitchItem.appendChild(createPitchSpan("pitch-low", kana[i]));
325 |         else if (pattern[i] === "1")
326 |           pitchItem.appendChild(createPitchSpan("pitch-high", kana[i]));
327 |         else if (pattern[i] === "2")
328 |           pitchItem.appendChild(createPitchSpan("pitch-to-drop", kana[i]));
329 |         else
330 |           console.error(
331 |             "pattern[i] found undefined value. pattern is",
332 |             pattern
333 |           );
334 |       }
335 |       pitchTagList.appendChild(pitchTag);
336 |       pitchList.appendChild(pitchItem);
337 |     }
338 | 
339 |     pitch.appendChild(pitchList);
340 |     pitchTags.appendChild(pitchTagList);
341 |   }
342 | 
343 |   function createJmdictDef(jmdictEntries) {
344 |     const jmdictDefContainer = document.createElement("div");
345 |     jmdictDefContainer.classList.add("jmdict-def");
346 | 
347 |     let newHtml = jmdictEntries
348 |       .map((dictEntry) => {
349 |         const ul = dictEntry.querySelector("ul");
350 |         if (ul !== null) {
351 |           return jmdictEntries.length > 1
352 |             ? `<li>${ul.outerHTML}</li>`
353 |             : ul.outerHTML;
354 |         } else {
355 |           const innerText = Array.from(dictEntry.childNodes)
356 |             .filter((node) => node.nodeType === Node.TEXT_NODE)
357 |             .map((node) => node.textContent.trim())
358 |             .join(" ");
359 |           return jmdictEntries.length > 1 ? `<li>${innerText}</li>` : innerText;
360 |         }
361 |       })
362 |       .join("");
363 |     if (jmdictEntries.length > 1) {
364 |       newHtml = `<ol>${newHtml}</ol>`;
365 |     }
366 |     jmdictDefContainer.innerHTML = newHtml;
367 |     return jmdictDefContainer;
368 |   }
369 | 
370 |   function cleanMonoDef(element) {
371 |     let cleanedElement = element.cloneNode(true);
372 | 
373 |     const hide = (selector) => {
374 |       const target = cleanedElement.querySelector(selector);
375 |       if (target) target.style.display = "none";
376 |     };
377 | 
378 |     const containsText = (text) => cleanedElement.innerHTML.includes(text);
379 | 
380 |     // Remove headword
381 |     hide("span[data-sc-name='見出部']");
382 |     hide("span[data-sc-name='子見出部']");
383 |     hide("span[data-sc-name='句見出部']");
384 |     if (
385 |       cleanedElement.querySelector(
386 |         "span+div[data-sc-name='definition'], span+div[data-sc-name='意味']"
387 |       )
388 |     ) {
389 |       hide(":scope > span > span");
390 |     } else if (containsText("日本語文法辞典(全集)")) {
391 |       const regex = /\[意味\]<br>(.*?)<br>/;
392 |       const matchResult = cleanedElement.innerHTML.match(regex);
393 |       cleanedElement.innerHTML = matchResult[1];
394 |     } else if (containsText("JLPT文法解説まとめ")) {
395 |       const regex = /\[意味\]<br>(.*?)<br><br>/;
396 |       const matchResult = cleanedElement.innerHTML.match(regex);
397 |       cleanedElement.innerHTML = matchResult[1];
398 |     } else {
399 |       const regex = /(<i>.*?<\/i>)(.*?)(<br>)/;
400 |       cleanedElement.innerHTML = cleanedElement.innerHTML.replace(regex, "");
401 |     }
402 | 
403 |     // Remove dict name
404 |     hide(":scope > i:first-child");
405 | 
406 |     // Pixiv
407 |     hide("span[data-sc-pixiv='nav-header']");
408 |     hide('*[data-sc-pixiv="related-tags"]');
409 |     hide('*[data-sc-pixiv="children"]');
410 |     hide('*[data-sc-pixiv="continue-reading"]');
411 | 
412 |     // Remove images
413 |     const minImageWidthEm = 130;
414 |     cleanedElement.querySelectorAll("a > span > img").forEach((img) => {
415 |       const anchor = img.closest("a");
416 |       const width = parseFloat(img.parentNode.style.width.replace("em", ""));
417 |       if (width > minImageWidthEm) {
418 |         anchor.remove();
419 |       } else {
420 |         anchor.removeAttribute("href");
421 |       }
422 |     });
423 | 
424 |     // Remove extra newlines, etc.
425 |     cleanedElement.innerHTML = cleanedElement.innerHTML
426 |       .replace(/(<br>\s*)+/gi, "<br>")
427 |       .replace(/^<br\s*\/?>|<br\s*\/?>$/g, "")
428 |       .replace("筆順：", "");
429 |     Array.from(cleanedElement.children).forEach((e) => {
430 |       e.innerHTML = e.innerHTML.replace(/^<br\s*\/?>|<br\s*\/?>$/g, "");
431 |     });
432 | 
433 |     return cleanedElement;
434 |   }
435 | 
436 |   function createMonoDef(dictEntry) {
437 |     const monoDefContainer = document.createElement("div");
438 |     monoDefContainer.classList.add("mono-def");
439 | 
440 |     const textContainer = document.createElement("div");
441 |     textContainer.classList.add("text-container");
442 |     const imagesContainer = document.createElement("div");
443 |     imagesContainer.classList.add("images-container");
444 | 
445 |     const minImageWidthEm = 131;
446 |     dictEntry.querySelectorAll("a > span > img").forEach((img) => {
447 |       let width = parseFloat(img.parentNode.style.width.replace("em", ""));
448 |       if (width > minImageWidthEm) {
449 |         const image = document.createElement("img");
450 |         const anchor = img.closest("a");
451 |         image.src = img.src;
452 |         imagesContainer.appendChild(image);
453 |       }
454 |     });
455 | 
456 |     const ul = dictEntry.querySelector(":scope > ul");
457 |     const cleanedElement = cleanMonoDef(
458 |       ul !== null ? ul.querySelector("li") : dictEntry
459 |     );
460 |     textContainer.innerHTML = cleanedElement.innerHTML;
461 | 
462 |     monoDefContainer.appendChild(textContainer);
463 |     monoDefContainer.appendChild(imagesContainer);
464 |     return monoDefContainer;
465 |   }
466 | 
467 |   function createDefinition(dictName) {
468 |     if (isJidoujisho || dictName.toLowerCase().includes("maindefinition")) {
469 |       return dictEntries[dictName];
470 |     } else if (dictName.toLowerCase().includes("jmdict")) {
471 |       let jmdictEntries = [];
472 |       Object.entries(dictEntries).forEach(([name, entry]) => {
473 |         if (name.toLowerCase().includes("jmdict") && !name.includes("forms")) {
474 |           jmdictEntries.push(entry);
475 |         }
476 |       });
477 |       return createJmdictDef(jmdictEntries);
478 |     } else {
479 |       return createMonoDef(dictEntries[dictName]);
480 |     }
481 |   }
482 | 
483 |   function initializeDef(priorityDicts, ignoredDicts) {
484 |     isJidoujisho = `{{Tags}}`.includes("Yuuna");
485 |     const fullDefContainer = document.querySelector(".full-def");
486 |     const definitionContainer = document.querySelector(
487 |       ".main-def > .definition"
488 |     );
489 |     const liEntries = fullDefContainer.querySelectorAll(
490 |       ":scope > div > ol > li"
491 |     );
492 |     const allEntries =
493 |       liEntries.length > 0
494 |         ? liEntries
495 |         : [fullDefContainer.querySelector("div")];
496 | 
497 |     dictEntries = Array.from(allEntries).reduce((entries, entry) => {
498 |       let dictName;
499 |       if (entry?.querySelector(":scope > i:first-child")) {
500 |         dictName = entry.querySelector(":scope > i:first-child").innerText;
501 |       } else if (isJidoujisho) {
502 |         dictName = "Jidoujisho";
503 |       } else {
504 |         dictName = "FullDefinition";
505 |       }
506 | 
507 |       let newName = dictName;
508 |       let ctr = 2;
509 | 
510 |       if (ignoredDicts.some((name) => newName.includes(name))) {
511 |         // skip
512 |       } else if (newName === "Jidoujisho") {
513 |         const jidoujishoEntries = `{{FullDefinition}}`.split("<br><br>");
514 |         jidoujishoEntries.forEach((entry) => {
515 |           const match = /(?<!\S)【(.*?)】<br>/.exec(entry);
516 |           if (match) {
517 |             dictName = `(${match[1]})`;
518 |             newName = `(${match[1]})`;
519 |             entry = entry.replace(`【${match[1]}】<br>`, "");
520 |           }
521 | 
522 |           const match2 = /^(.*?)<br>/.exec(entry);
523 |           if (
524 |             match2 &&
525 |             `{{ExpressionReading}}`
526 |               .split("")
527 |               .every((char) => match2[1].includes(char))
528 |           ) {
529 |             entry = entry.replace(/.*?<br>/i, "");
530 |           }
531 | 
532 |           while (Object.keys(entries).includes(newName)) {
533 |             newName = `${dictName}-${ctr}`;
534 |             ctr += 1;
535 |           }
536 |           const jidouDiv = document.createElement("div");
537 |           jidouDiv.innerHTML = entry;
538 |           jidouDiv.classList.add("mono-def");
539 |           entries[newName] = jidouDiv;
540 |         });
541 |       } else if (newName === "FullDefinition") {
542 |         const fullDefDiv = document.createElement("div");
543 |         fullDefDiv.innerHTML = `{{FullDefinition}}`;
544 |         entries[newName] = fullDefDiv;
545 |       } else {
546 |         while (Object.keys(entries).includes(newName)) {
547 |           newName = `${dictName}-${ctr}`;
548 |           ctr += 1;
549 |         }
550 |         entries[newName] = entry;
551 |       }
552 | 
553 |       return entries;
554 |     }, {});
555 | 
556 |     if (`{{MainDefinition}}`) {
557 |       const mainDefDiv = document.createElement("div");
558 |       mainDefDiv.innerHTML = `{{MainDefinition}}`;
559 |       dictEntries["MainDefinition"] = mainDefDiv;
560 |     }
561 | 
562 |     dictNames = Object.keys(dictEntries);
563 |     if (
564 |       !isJidoujisho &&
565 |       dictNames.toString().toLowerCase().includes("jmdict")
566 |     ) {
567 |       dictNames = dictNames.filter(
568 |         (name) => !name.toLowerCase().includes("jmdict")
569 |       );
570 |       dictNames.unshift("(JMdict)");
571 |     }
572 | 
573 |     if (priorityDicts) {
574 |       dictNames = dictNames.sort((a, b) => {
575 |         const indexA = priorityDicts.findIndex((item) =>
576 |           a.toLowerCase().includes(item.toLowerCase())
577 |         );
578 |         const indexB = priorityDicts.findIndex((item) =>
579 |           b.toLowerCase().includes(item.toLowerCase())
580 |         );
581 | 
582 |         if (indexA === -1 && indexB === -1) return 0;
583 |         else if (indexA === -1) return 1;
584 |         else if (indexB === -1) return -1;
585 | 
586 |         return indexA - indexB;
587 |       });
588 |     }
589 |     definitionContainer.innerHTML = "";
590 |     definitionContainer.appendChild(createDefinition(dictNames[0]));
591 |   }
592 | 
593 |   function toggleDef(index) {
594 |     const definitionContainer = document.querySelector(
595 |       ".main-def > .definition"
596 |     );
597 | 
598 |     const indexDisplay = document.querySelector(".def-info");
599 |     indexDisplay.style.opacity = 1;
600 | 
601 |     currentIndex = index % dictNames.length;
602 |     while (currentIndex < 0) currentIndex += dictNames.length;
603 | 
604 |     indexDisplay.innerText = `${dictNames[currentIndex]} ${currentIndex + 1}/${
605 |       dictNames.length
606 |     }`;
607 | 
608 |     definitionContainer.innerHTML = "";
609 |     definitionContainer.appendChild(createDefinition(dictNames[currentIndex]));
610 |   }
611 | 
612 |   function setUpDefToggle() {
613 |     const mainDefContainer = document.querySelector(".main-def");
614 | 
615 |     const leftEdge = document.createElement("div");
616 |     const rightEdge = document.createElement("div");
617 |     leftEdge.classList.add("left-edge");
618 |     rightEdge.classList.add("right-edge");
619 |     mainDefContainer.appendChild(leftEdge);
620 |     mainDefContainer.appendChild(rightEdge);
621 | 
622 |     let index = 0;
623 | 
624 |     leftEdge.addEventListener("click", (e) => {
625 |       index -= 1;
626 |       toggleDef(index);
627 |     });
628 | 
629 |     rightEdge.addEventListener("click", (e) => {
630 |       index += 1;
631 |       toggleDef(index);
632 |     });
633 | 
634 |     document.addEventListener("keydown", (e) => {
635 |       if (e.key === "ArrowLeft") index -= 1;
636 |       else if (e.key === "ArrowRight") index += 1;
637 | 
638 |       toggleDef(index);
639 |     });
640 |   }
641 | 
642 |   function setUpImageModal() {
643 |     const modalBg = document.querySelector(".modal-bg");
644 |     const imgPopup = document.querySelector(".img-popup");
645 |     const image = document.querySelector(".image img");
646 | 
647 |     if (!image) return;
648 | 
649 |     image.addEventListener("click", () => {
650 |       const imgPopupContainer = document.createElement("div");
651 |       const imgPopupImg = document.createElement("img");
652 | 
653 |       imgPopupContainer.classList.add("img-popup-container");
654 |       imgPopupImg.src = image.src;
655 |       imgPopupImg.classList.add("img-popup-img");
656 | 
657 |       if (image.height > image.width) {
658 |         imgPopupContainer.style.height = "calc(100% - 20px)";
659 |         imgPopupContainer.style.width = "max-content";
660 |       }
661 |       imgPopup.innerHTML = "";
662 |       imgPopup.appendChild(imgPopupContainer);
663 |       imgPopupContainer.appendChild(imgPopupImg);
664 | 
665 |       document.body.classList.add("img-popup");
666 |       modalBg.style.display = "block";
667 |       imgPopupContainer.style.display = "flex";
668 |     });
669 | 
670 |     modalBg.addEventListener("click", () => {
671 |       document.body.classList.remove("img-popup");
672 |       modalBg.style.display = "none";
673 |       imgPopup.innerHTML = "";
674 |     });
675 |   }
676 | 
677 |   function initialize() {
678 |     // Global vars
679 |     let isJidoujisho;
680 |     let dictEntries;
681 |     let dictNames;
682 | 
683 |     tweakHTML();
684 |     paintTargetWord();
685 |     constructPitch();
686 |     setUpImageModal();
687 |     setUpDefToggle();
688 | 
689 |     let priorityDicts = [
690 |       "MainDefinition",
691 |       "jmdict",
692 |       "jitendex",
693 |       "日本語文法辞典(全集)",
694 |       "JLPT文法解説まとめ",
695 |       "三省堂国語辞典",
696 |       "明鏡国語辞典",
697 |       "デジタル大辞泉",
698 |       "大辞林",
699 |       "新明解国語辞典",
700 |       "実用日本語表現辞典",
701 |       "pixiv",
702 |       "旺文社国語辞典",
703 |       "広辞苑",
704 |       "新選国語辞典",
705 |       "使い方の分かる",
706 |     ];
707 | 
708 |     let ignoredDicts = ["Nico/Pixiv", "子", "句", "造", "JMDict Surface Forms"];
709 |     initializeDef(priorityDicts, ignoredDicts);
710 |   }
711 | 
712 |   initialize();
713 | </script>
714 | 


--------------------------------------------------------------------------------
/3_Mining_Styling.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&display=swap");
  2 | 
  3 | :root {
  4 |   /* Color theme */
  5 |   --dark-mode-bg-color: #1e1e2a;
  6 |   --dark-mode-fg-color: #dadada;
  7 |   --light-mode-bg-color: #fffaf0;
  8 |   --light-mode-fg-color: #333333;
  9 | 
 10 |   /* Pitch colors */
 11 |   --dark-mode-heiban: #39bae6;
 12 |   --dark-mode-atamadaka: #ec464f;
 13 |   --dark-mode-nakadaka: #ff8f40;
 14 |   --dark-mode-odaka: #6cbf43;
 15 |   --light-mode-heiban: #1aa0ce;
 16 |   --light-mode-atamadaka: #e92a35;
 17 |   --light-mode-nakadaka: #ff6b03;
 18 |   --light-mode-odaka: #61ad3b;
 19 | 
 20 |   /* PC Font sizes */
 21 |   --pc-main-font-size: 16px;
 22 |   --pc-main-def-size: 18px;
 23 |   --pc-vocab-font-size: 45px;
 24 |   --pc-sentence-font-size: 30px;
 25 |   --pc-back-sentence-font-size: 20px;
 26 | 
 27 |   /* Mobile font sizes */
 28 |   --mobile-main-font-size: 16px;
 29 |   --mobile-main-def-size: 16px;
 30 |   --mobile-vocab-font-size: 40px;
 31 |   --mobile-sentence-font-size: 32px;
 32 |   --mobile-back-sentence-font-size: 20px;
 33 | 
 34 |   /* Miscellaneous */
 35 |   --font-serif: "Noto Serif JP", serif;
 36 |   --font-sans: "Noto Sans JP", sans-serif;
 37 |   --max-width: 800px;
 38 | 
 39 |   font-size: var(--main-font-size);
 40 | }
 41 | 
 42 | .card.nightMode {
 43 |   --bg-color: var(--dark-mode-bg-color);
 44 |   --fg-color: var(--dark-mode-fg-color);
 45 |   --heiban: var(--dark-mode-heiban, initial);
 46 |   --atamadaka: var(--dark-mode-atamadaka, initial);
 47 |   --nakadaka: var(--dark-mode-nakadaka, initial);
 48 |   --odaka: var(--dark-mode-odaka, initial);
 49 | 
 50 |   --bg-elevated: rgba(255, 255, 255, 0.03);
 51 |   --bg-inset: rgba(255, 255, 255, 0.03);
 52 |   --fg-subtle: rgba(255, 255, 255, 0.3);
 53 |   --bold: #7d8590;
 54 | }
 55 | 
 56 | .card:not(.nightMode) {
 57 |   --bg-color: var(--light-mode-bg-color);
 58 |   --fg-color: var(--light-mode-fg-color);
 59 |   --heiban: var(--light-mode-heiban, initial);
 60 |   --atamadaka: var(--light-mode-atamadaka, initial);
 61 |   --nakadaka: var(--light-mode-nakadaka, initial);
 62 |   --odaka: var(--light-mode-odaka, initial);
 63 | 
 64 |   --bg-elevated: rgba(0, 0, 0, 0.03);
 65 |   --bg-inset: rgba(0, 0, 0, 0.06);
 66 |   --fg-subtle: rgba(0, 0, 0, 0.6);
 67 |   --bold: #999999;
 68 | }
 69 | 
 70 | .card {
 71 |   /* Remove this rule to adapt to system theme */
 72 |   background-color: var(--bg-color) !important;
 73 |   color: var(--fg-color) !important;
 74 | }
 75 | 
 76 | html.win,
 77 | html.mac,
 78 | html.linux:not(.android) {
 79 |   --main-font-size: var(--pc-main-font-size);
 80 |   --main-def-size: var(--pc-main-def-size);
 81 |   --vocab-font-size: var(--pc-vocab-font-size);
 82 |   --sentence-font-size: var(--pc-sentence-font-size);
 83 |   --back-sentence-font-size: var(--pc-back-sentence-font-size);
 84 | }
 85 | 
 86 | html.mobile {
 87 |   --main-font-size: var(--mobile-main-font-size);
 88 |   --main-def-size: var(--mobile-main-def-size);
 89 |   --vocab-font-size: var(--mobile-vocab-font-size);
 90 |   --sentence-font-size: var(--mobile-sentence-font-size);
 91 |   --back-sentence-font-size: var(--mobile-back-sentence-font-size);
 92 | }
 93 | 
 94 | #qa {
 95 |   display: flex;
 96 |   align-items: stretch;
 97 |   flex-direction: column;
 98 |   min-height: calc(100vh - 40px);
 99 |   font-family: var(--font-serif);
100 |   font-size: var(--main-font-size);
101 |   text-align: center;
102 | }
103 | 
104 | /* ------- Mobile css ------- */
105 | @media (max-width: 512px) {
106 |   .mono-def {
107 |     flex-direction: column;
108 |   }
109 |   .images-container {
110 |     justify-content: space-around;
111 |     flex-direction: row !important;
112 |     max-width: 100% !important;
113 |     width: 100%;
114 |     flex-wrap: wrap;
115 |   }
116 |   .images-container img {
117 |     width: 44%;
118 |   }
119 |   .def-info {
120 |     top: -1.5rem !important;
121 |   }
122 |   .replay-button {
123 |     vertical-align: middle !important;
124 |   }
125 | }
126 | 
127 | /* ----- Front elements ----- */
128 | 
129 | .vocab {
130 |   font-size: var(--vocab-font-size);
131 | }
132 | .sentence {
133 |   font-size: var(--sentence-font-size);
134 |   display: inline-block;
135 | }
136 | #hint {
137 |   margin-top: -5px;
138 | }
139 | 
140 | /* ----- Back elements ----- */
141 | 
142 | /* Header */
143 | header {
144 |   color: var(--fg-subtle);
145 |   height: 40px;
146 |   text-align: right;
147 |   width: 100%;
148 |   font-size: 1rem;
149 | }
150 | .top-container {
151 |   max-width: calc(var(--max-width) + 20px);
152 |   margin: 0px auto;
153 |   width: calc(100% - 20px);
154 | }
155 | .stars {
156 |   margin: 0;
157 |   margin-bottom: -3px;
158 | }
159 | 
160 | /* Info (audio, reading) */
161 | .info {
162 |   font-size: 1.75rem;
163 | }
164 | 
165 | /* Replay button */
166 | .replay-button {
167 |   vertical-align: baseline;
168 | }
169 | .replay-button svg {
170 |   width: 1em;
171 |   height: auto;
172 | }
173 | 
174 | /* Pitch */
175 | .pitch {
176 |   display: inline;
177 | }
178 | #pitch-tags {
179 |   color: var(--bg-color);
180 |   font-family: var(--font-serif);
181 |   background-color: var(--fg-color);
182 |   display: none;
183 |   vertical-align: top;
184 |   padding: 1px 3px;
185 |   margin-right: -5px;
186 | }
187 | /* When multiple pitch */
188 | .pitch ul,
189 | #pitch-tags ul {
190 |   list-style: none;
191 |   display: inline;
192 |   margin: 0;
193 |   padding: 0;
194 | }
195 | .pitch li,
196 | #pitch-tags li {
197 |   display: inline;
198 | }
199 | .pitch ul > li:not(:last-child)::after,
200 | #pitch-tags ul > li:not(:last-child)::after {
201 |   content: "・";
202 | }
203 | .pitch ul > li:not(:last-child)::after {
204 |   color: var(--fg-color);
205 | }
206 | #pitch-tags ul > li:not(:last-child)::after {
207 |   color: var(--bg-color);
208 | }
209 | 
210 | /* Definition container */
211 | .main-def {
212 |   max-width: var(--max-width);
213 |   font-size: var(--main-def-size);
214 |   line-height: 1.75em;
215 |   margin: 25px 0px;
216 |   width: calc(100% - 20px);
217 |   position: relative;
218 | }
219 | 
220 | /* Definition info display */
221 | .def-info {
222 |   position: absolute;
223 |   top: -2rem;
224 |   right: 10px;
225 |   font-size: 0.9rem;
226 |   color: var(--fg-subtle);
227 |   opacity: 0;
228 |   pointer-events: none;
229 | }
230 | 
231 | /* MainDefinition */
232 | .definition {
233 |   text-align: left;
234 |   display: inline-block;
235 | }
236 | 
237 | /* When monolingual definition */
238 | .mono-def {
239 |   text-align: left;
240 |   display: inline-flex;
241 |   gap: 1rem;
242 |   line-height: initial;
243 |   width: fit-content;
244 |   max-width: 100%;
245 | }
246 | .text-container {
247 |   flex-grow: 1;
248 |   max-width: 100%;
249 | }
250 | .images-container {
251 |   display: flex;
252 |   flex-direction: column;
253 |   gap: 0.5rem;
254 |   max-width: 30%;
255 | }
256 | .images-container img {
257 |   max-width: 200px;
258 |   height: auto;
259 | }
260 | .images-container:empty {
261 |   display: none;
262 | }
263 | 
264 | /* When JMDict definition */
265 | .definition > .jmdict-def {
266 |   text-align: center !important;
267 |   margin: auto;
268 | }
269 | .definition .jmdict-def ul {
270 |   list-style: none;
271 |   display: inline;
272 |   padding: 0;
273 | }
274 | .definition .jmdict-def ul > li {
275 |   display: inline;
276 | }
277 | .definition .jmdict-def ul > li:not(:last-child)::after {
278 |   content: "; ";
279 | }
280 | .definition .jmdict-def ol {
281 |   margin: 0;
282 |   max-width: var(--max-width);
283 |   display: inline-block;
284 |   text-align: left;
285 | }
286 | 
287 | /* Image */
288 | .image img {
289 |   max-height: 200px;
290 |   width: auto;
291 |   border-radius: 8px;
292 |   cursor: pointer;
293 | }
294 | 
295 | /* Back sentence */
296 | .small-sentence {
297 |   font-size: var(--back-sentence-font-size);
298 |   display: inline-block;
299 |   width: calc(100% - 20px);
300 |   max-width: var(--max-width);
301 | }
302 | 
303 | /* Translation button */
304 | a.hint {
305 |   font-family: var(--font-sans);
306 |   color: var(--fg-subtle);
307 |   width: fit-content;
308 |   font-size: 0.8rem;
309 |   display: block;
310 |   border-radius: 8px;
311 |   padding: 5px 10px;
312 |   margin: 0 auto;
313 |   text-decoration: none;
314 | }
315 | a.hint:hover {
316 |   color: var(--fg-color);
317 | }
318 | 
319 | /* Footer */
320 | footer {
321 |   margin-top: auto;
322 |   width: 100%;
323 | }
324 | .bot-container {
325 |   display: flex;
326 |   justify-content: flex-end;
327 |   max-width: calc(var(--max-width) + 20px);
328 |   margin: 0px auto;
329 |   width: calc(100% - 20px);
330 | }
331 | .tags-container {
332 |   flex-grow: 1;
333 | }
334 | .tags {
335 |   font-family: var(--font-sans);
336 |   background-color: var(--bg-elevated);
337 |   color: var(--fg-color);
338 |   display: inline-block;
339 |   padding: 1px 5px;
340 |   cursor: pointer;
341 |   border-radius: 5px;
342 |   font-size: 0.7rem;
343 |   line-height: 0.8rem;
344 |   margin: auto 3px;
345 |   text-overflow: ellipsis;
346 |   overflow: hidden;
347 |   max-width: 60dvw;
348 |   white-space: nowrap;
349 | }
350 | 
351 | .extras-toggle {
352 |   width: 12px;
353 | }
354 | 
355 | /* ----- Extras ----- */
356 | 
357 | /* Hide extra info by default */
358 | .extras {
359 |   display: none;
360 | }
361 | 
362 | /* Popup CSS */
363 | .popup {
364 |   font-family: var(--font-sans);
365 |   background-color: var(--bg-elevated);
366 |   display: inline-block;
367 |   border-radius: 8px;
368 |   padding: 10px;
369 |   max-width: min(var(--max-width), calc(100% - 20px));
370 | }
371 | 
372 | /* Misc. info */
373 | .misc-info ul {
374 |   margin: 0;
375 | }
376 | 
377 | /* Full definition */
378 | .full-def {
379 |   font-family: var(--font-sans);
380 |   text-align: left;
381 |   display: inline-flex;
382 | }
383 | .full-def ol {
384 |   margin: 0;
385 | }
386 | 
387 | /* ----- Misc ----- */
388 | 
389 | /* Furigana */
390 | .show-furigana > ruby rt {
391 |   opacity: 1;
392 | }
393 | ruby rt {
394 |   user-select: none;
395 |   opacity: 0;
396 | }
397 | ruby:hover rt {
398 |   opacity: 1;
399 | }
400 | 
401 | /* Bold */
402 | b {
403 |   color: var(--bold);
404 |   font-weight: 400;
405 | }
406 | b > ruby rt {
407 |   opacity: 1;
408 | }
409 | 
410 | /* Dropdown */
411 | details {
412 |   font-family: var(--font-sans);
413 |   margin: 5px 0px;
414 | }
415 | summary {
416 |   user-select: none;
417 |   cursor: pointer;
418 |   width: fit-content;
419 |   margin: 0px auto;
420 | }
421 | 
422 | /* Pitch graphs css */
423 | .pitch-char {
424 |   color: var(--fg-color);
425 | }
426 | .pitch-low {
427 |   position: relative;
428 | }
429 | .pitch-high {
430 |   position: relative;
431 | }
432 | .pitch-high > .pitch-line {
433 |   display: block;
434 |   position: absolute;
435 |   top: 0.1em;
436 |   left: 0;
437 |   right: 0;
438 |   height: 0;
439 |   border-top-width: 0.1em;
440 |   border-top-style: solid;
441 | }
442 | .pitch-to-drop {
443 |   position: relative;
444 |   padding-right: 0.1em;
445 |   margin-right: 0.1em;
446 | }
447 | .pitch-to-drop > .pitch-line {
448 |   display: block;
449 |   position: absolute;
450 |   top: 0.1em;
451 |   left: 0;
452 |   right: 0;
453 |   border-top-width: 0.1em;
454 |   border-top-style: solid;
455 |   right: -0.1em;
456 |   height: 0.4em;
457 |   border-right-width: 0.1em;
458 |   border-right-style: solid;
459 | }
460 | 
461 | /* Pitch coloring */
462 | .heiban {
463 |   color: var(--heiban);
464 | }
465 | .atamadaka {
466 |   color: var(--atamadaka);
467 | }
468 | .nakadaka {
469 |   color: var(--nakadaka);
470 | }
471 | .odaka {
472 |   color: var(--odaka);
473 | }
474 | 
475 | /* Definition toggle css */
476 | .left-edge,
477 | .right-edge {
478 |   position: absolute;
479 |   top: 0;
480 |   width: 50px;
481 |   height: 100%;
482 |   cursor: pointer;
483 |   opacity: 0.4;
484 | }
485 | .left-edge {
486 |   left: 0;
487 |   border-radius: 8px 0px 0px 8px;
488 | }
489 | .right-edge {
490 |   right: 0;
491 |   border-radius: 0px 8px 8px 0px;
492 | }
493 | .left-edge:hover,
494 | .right-edge:hover {
495 |   background-color: var(--bg-inset);
496 |   cursor: pointer;
497 | }
498 | 
499 | /* Image modal css */
500 | .modal-bg {
501 |   position: fixed;
502 |   display: none;
503 |   top: 0;
504 |   right: 0;
505 |   bottom: 0;
506 |   left: 0;
507 |   background-color: rgba(0, 0, 0, 0.8);
508 |   z-index: 1000;
509 |   cursor: pointer;
510 | }
511 | .img-popup-container {
512 |   position: absolute;
513 |   top: 50%;
514 |   left: 50%;
515 |   transform: translate(-50%, -50%);
516 |   width: min(calc(100% - 20px), calc(var(--max-width) + 200px));
517 |   display: none;
518 |   z-index: 1001;
519 |   overflow: hidden;
520 | }
521 | .img-popup-img {
522 |   width: 100%;
523 | }
524 | 


--------------------------------------------------------------------------------
/Mining_temp.apkg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/Mining_temp.apkg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # JP-study
  2 | 
  3 | - [Anki Mining Template](#anki-mining-template)
  4 |   - [Yomichan fields](#yomichan-fields)
  5 |   - [Other applications/add-ons](#other-applicationsadd-ons)
  6 | - [Yomichan Handlebars templates](#yomichan-handlebars-templates)
  7 | - [Yomichan popup custom CSS](#yomichan-popup-custom-css)
  8 | - [Kanken Deck Template](#kanken-deck-template)
  9 | 
 10 | ## Anki Mining Template
 11 | 
 12 | Anki Mining card template for Japanese.
 13 | 
 14 | [Download](https://github.com/rudnam/JP-study/raw/main/Mining_temp.apkg)
 15 | 
 16 | <p align="center">
 17 |     <img src="./images/vocab_back.png" width="70%" />
 18 |     <img src="./images/sentence_back.png" width="70%" />
 19 |     <img src="./images/mining_template.gif" width="70%" />
 20 | </p>
 21 | 
 22 | ### Yomichan fields
 23 | 
 24 | | Field              | Value                                             |
 25 | | ------------------ | ------------------------------------------------- |
 26 | | Expression         | `{expression}`                                    |
 27 | | ExpressionFurigana | `{furigana-plain}`                                |
 28 | | ExpressionReading  | `{reading}`                                       |
 29 | | ExpressionAudio    | `{audio}`                                         |
 30 | | MainDefinition     | `{popup-selection-text}`                                |
 31 | | Sentence           | `{cloze-prefix}<b>{cloze-body}</b>{cloze-suffix}` |
 32 | | SentenceFurigana   |                                                   |
 33 | | SentenceAudio      |                                                   |
 34 | | FullDefinition     | `{glossary}`                                      |
 35 | | Image              |                                                   |
 36 | | Translation        |                                                   |
 37 | | PitchPosition      | `{pitch-accent-positions}`                        |
 38 | | Hint               |                                                   |
 39 | | Frequency          | `{frequencies}`                                   |
 40 | | FreqSort           |                                                   |
 41 | | MiscInfo           | `{document-title}`                                |
 42 | | ExtraField         |                                                   |
 43 | | \*IsSentenceCard   |                                                   |
 44 | 
 45 | Notes:
 46 | 
 47 | - When the **\*IsSentenceCard** field is filled with any character, card is turned into a sentence card. When empty, it is turned into a vocab card.
 48 | - The **MainDefinition** field is for the displayed definition on the card. When empty, the template displays a definition from the **FullDefinition** field. The preferred dictionaries for the default definition can be changed in the [back template](https://github.com/rudnam/JP-study/blob/da0fcca7242513065a5706b58e089a38baab584e/2_Mining_Back.html#L653-L667).
 49 | - The **PitchPosition** field takes in `{pitch-accent-positions}`. `{pitch-accents}` and `{pitch-accent-graphs}` will **not** work.
 50 | - The **FreqSort** field is for frequency sorting. (See [freq](https://github.com/MarvNC/JP-Resources#sorting-mined-anki-cards-by-frequency))
 51 | - The **Hint** field is for a hint on the front of the card (See [Animecards](https://animecards.site/ankicards/#the-hint-field)).
 52 | - The furigana fields only take in plain furigana. (e.g. 漢字[かんじ] not <ruby>漢字<rt>かんじ</rt></ruby>).
 53 | - The color scheme can be inherited from system by removing [this rule](https://github.com/rudnam/JP-study/blob/485e28eacb3445fa1cbf14714154063482c5bbe1/3_Mining_Styling.css#L70-L74) from the styling template.
 54 | 
 55 | ### Other applications
 56 | 
 57 | More info can be added using other applications.
 58 | 
 59 | - For [mpvacious](https://github.com/Ajatt-Tools/mpvacious), fields can be filled like the following. In `subs2srs.conf`:
 60 | 
 61 |   ```
 62 |   model_name=Mining-JP
 63 | 
 64 |   sentence_field=Sentence
 65 |   secondary_field=Translation
 66 |   audio_field=SentenceAudio
 67 |   image_field=Image
 68 |   miscinfo_field=MiscInfo
 69 | 
 70 |   # The tag(s) added to new notes. Spaces separate multiple tags.
 71 |   note_tag=subs2srs アニメ::%n
 72 |   ```
 73 | 
 74 | - For [jidoujisho](https://github.com/lrorpilla/jidoujisho), fields can be filled like the following:
 75 | 
 76 |   | Field              | Value          |
 77 |   | ------------------ | -------------- |
 78 |   | Expression         | Term           |
 79 |   | ExpressionFurigana | Furigana       |
 80 |   | ExpressionReading  | Reading        |
 81 |   | ExpressionAudio    | Term Audio     |
 82 |   | Sentence           | Sentence       |
 83 |   | SentenceAudio      | Sentence Audio |
 84 |   | FullDefinition     | Meaning        |
 85 |   | Image              | Image          |
 86 |   | FreqSort           | Frequency      |
 87 |   | MiscInfo           | Context        |
 88 | 
 89 |   - [x] Include image/audio HTML tags on export
 90 |   - [x] Use line break tag instead of newline on export
 91 |   - [x] Prepend dictionary name in meaning
 92 | 
 93 | ## Yomichan Handlebars templates
 94 | 
 95 | Custom Yomichan Handlebars templates.
 96 | 
 97 | - `{selection-text-modified}` - Basically the same as the built-in `{selection-text}` but will ignore selected text if it is the same as the target vocab (for Yomichan search page).
 98 | 
 99 |   ```handlebars
100 |   {{~#*inline "selection-text-modified"~}}
101 |     {{~#set "selected"}}{{~> selection-text}}{{/set~}}
102 |     {{~#set "pattern1"~}}
103 |         [
104 |         {{~#regexReplace "(<span class=\"term\">)|(</span>)|(<ruby>)|(</ruby>)|(<rt>)|(</rt>)|[\[\]]" "" "g"~}}
105 |         {{~> cloze-body}}
106 |         {{~/regexReplace~}}
107 |         ]
108 |     {{~/set~}}
109 |     {{~#set "pattern2"~}}
110 |         [
111 |         {{~#regexReplace "(<span class=\"term\">)|(</span>)|(<ruby>)|(</ruby>)|(<rt>)|(</rt>)|[\[\]]" "" "g"~}}
112 |         {{~#getMedia "textFurigana" definition.cloze.body escape=false}}{{~/getMedia~}}
113 |         {{~/regexReplace~}}
114 |         ]
115 |     {{~/set~}}
116 |     {{~#set "diff1"}}{{~#regexReplace (get "pattern1") ""~}}{{~#get "selected"}}{{/get~}}{{~/regexReplace~}}{{/set~}}
117 |     {{~#set "diff2"}}{{~#regexReplace (get "pattern2") ""~}}{{~#get "selected"}}{{/get~}}{{~/regexReplace~}}{{/set~}}
118 | 
119 |     {{~#if (op "&&"
120 |                 (op ">" (property (get "diff1") "length") (op "-" (property (get "selected") "length") (property (get "diff1") "length")))
121 |                 (op ">" (property (get "diff2") "length") (op "-" (property (get "selected") "length") (property (get "diff2") "length")))
122 |             )}}
123 |         {{~> selection-text}}
124 |     {{/if~}}
125 |   {{~/inline~}}
126 |   ```
127 | 
128 | - `{grammar-pt}` - fills out a field when a grammar dictionary has an entry.
129 | 
130 |   ```handlebars
131 |   {{#*inline "grammar-pt"}}
132 |       {{~#set "grammar-dicts" ~}}
133 |           {{~#regexMatch "JLPT文法解説まとめ|日本語文法辞典\(全集\)"~}}
134 |               {{~> glossary}}
135 |           {{~/regexMatch~}}
136 |       {{/set~}}
137 |       {{~#if (op "!==" "" (get "grammar-dicts"))~}}x{{/if}}
138 |   {{/inline}}
139 |   ```
140 | 
141 | - `{context}` - Context tag. e.g. `ラノベ::また、同じ夢を見ていた` if in ttsu, etc. Used with [Field To Tag](https://ankiweb.net/shared/info/1600845494) or [FieldReporter](https://ankiweb.net/shared/info/569864517)
142 | 
143 |   ```handlebars
144 |   {{#*inline "context"}}
145 |       {{~#if (regexMatch "reader\.ttsu\.app" "" definition.url)~}}
146 |           {{~#set "ln-title" ~}}{{~#regexReplace " |　" "_"~}}
147 |               {{~#regexMatch ".+?(?= \| ッツ Ebook Reader)"~}}{{~context.document.title~}}{{~/regexMatch~}}
148 |           {{~/regexReplace~}}{{/set~}}
149 |           ラノベ::{{~get "ln-title"~}}
150 |       {{~else if (regexMatch "mokuro" "" context.document.title)~}}
151 |           {{~#set "manga-title" ~}}{{~#regexReplace " |　" "_"~}}
152 |               {{~#regexMatch ".+?(?= \| mokuro)"~}}{{~context.document.title~}}{{~/regexMatch~}}
153 |           {{~/regexReplace~}}{{/set~}}
154 |           漫画::{{~get "manga-title"~}}
155 |       {{~else if (regexMatch "nhk.or.jp" "" definition.url)~}}
156 |           ニュース::NHKニュース
157 |       {{~else if (regexMatch "news.yahoo.co.jp" "" definition.url)~}}
158 |           ニュース::Yahooニュース
159 |       {{~else if (regexMatch "twitter.com" "" definition.url)~}}
160 |           ツイッター
161 |       {{~else if (regexMatch "youtube.com" "" definition.url)~}}
162 |           {{~#set "youtube-title" ~}}{{~#regexReplace " |　" "_"~}}
163 |               {{~#regexMatch ".+?(?= - YouTube)"~}}{{~context.document.title~}}{{~/regexMatch~}}
164 |           {{~/regexReplace~}}{{/set~}}
165 |           ユーチューブ::{{~get "youtube-title"~}}
166 |       {{~/if~}}
167 |   {{/inline}}
168 |   ```
169 | 
170 | ## Yomichan popup custom CSS
171 | 
172 | Custom CSS for changing the Yomichan popup appearance.
173 | 
174 | <img src="./images/popup.png" width="60%" />
175 | <img src="./images/search.png" width="100%" />
176 | 
177 | <br>
178 | 
179 | Font download links:
180 | 
181 | - Noto Sans JP: [https://fonts.google.com/noto/specimen/Noto+Sans+JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP)
182 | - UD Digi Kyokasho N-R: [https://learnjapanese.moe/font/#windows-10](https://learnjapanese.moe/font/#windows-10)
183 | 
184 | Just copy and paste the following CSS into Yomichan's custom CSS.
185 | 
186 | ```css
187 | body {
188 |   font-family: "Inter", "Noto Sans JP", sans-serif;
189 |   --background-color: #1e1e2a;
190 |   --input-background-color: color-mix(
191 |     in srgb,
192 |     var(--background-color),
193 |     #fff 5%
194 |   );
195 | }
196 | 
197 | .headword {
198 |   font-family: "UD Digi Kyokasho N";
199 | }
200 | 
201 | /* Disable furigana on search page */
202 | rt.query-parser-segment-reading {
203 |   display: none;
204 | }
205 | 
206 | /* Collapse lists of links */
207 | .definition-item:not([data-dictionary="JMdict"])
208 |   .gloss-list:has(.gloss-content > a:only-child) {
209 |   list-style: none;
210 |   display: inline;
211 |   padding-left: 0;
212 | }
213 | .definition-item:not([data-dictionary="JMdict"])
214 |   .gloss-list:has(.gloss-content > a:only-child)
215 |   * {
216 |   display: inline;
217 | }
218 | .definition-item:not([data-dictionary="JMdict"])
219 |   .gloss-item:has(.gloss-content > a:only-child):not(:last-child)::after {
220 |   content: " | ";
221 | }
222 | 
223 | /* Collapse JMnedict entries */
224 | .definition-item[data-dictionary="JMnedict"] .gloss-list {
225 |   list-style: none;
226 |   display: inline;
227 |   padding-left: 0;
228 | }
229 | .definition-item[data-dictionary="JMnedict"] .gloss-list * {
230 |   display: inline;
231 | }
232 | .definition-item[data-dictionary="JMnedict"]
233 |   .gloss-list
234 |   > .gloss-item:not(:last-child)::after {
235 |   content: " | ";
236 | }
237 | 
238 | /* Collapse Jitendex entries */
239 | .definition-item[data-dictionary*="Jitendex"] .gloss-sc-ul {
240 |   list-style: none;
241 |   display: inline;
242 |   padding-left: 0;
243 | }
244 | .definition-item[data-dictionary*="Jitendex"] .gloss-sc-ul > .gloss-sc-li {
245 |   display: inline;
246 | }
247 | .definition-item[data-dictionary*="Jitendex"]
248 |   .gloss-sc-ul
249 |   > .gloss-sc-li:not(:last-child)::after {
250 |   content: "; ";
251 | }
252 | 
253 | /* Make Jitendex example sentences smaller */
254 | .definition-item[data-dictionary*="Jitendex"]
255 |   *[data-sc-content="example-sentence-a"] {
256 |   font-size: 1em !important;
257 | }
258 | 
259 | /* Only show summary for Pixiv */
260 | [data-sc-pixiv="children"],
261 | [data-sc-pixiv="related-tags"],
262 | [data-sc-pixiv="continue-reading"],
263 | [data-sc-pixiv="nav-header"] {
264 |   display: none;
265 | }
266 | 
267 | /* Only show the first 2 frequency lists */
268 | span.frequency-group-item:nth-child(n + 3) {
269 |   display: none;
270 | }
271 | /* Show on hover */
272 | span.frequency-group-item:first-child:has(.tag-label:hover) ~ * {
273 |   display: inline-block;
274 | }
275 | 
276 | /* Only show the first pitch dictionary */
277 | li.pronunciation-group:first-child ~ * {
278 |   display: none;
279 | }
280 | ol.pronunciation-group-list:not([data-count="1"]) {
281 |   list-style: none;
282 |   padding: 0;
283 | }
284 | /* Show on hover */
285 | li.pronunciation-group:first-child:has(.tag:hover) ~ * {
286 |   display: inline-block;
287 | }
288 | 
289 | /* Hide add duplicate */
290 | button.action-button[title="Add duplicate expression (Alt + E)"] {
291 |   display: none;
292 | }
293 | ```
294 | 
295 | ## Kanken Deck Template
296 | 
297 | Anki card template for the [Kanken Deck](https://ankiweb.net/shared/info/759825185).
298 | 
299 | <p align="center">
300 |     <img src="./images/kanken.png" width="70%" />
301 | </p>
302 | 
303 | Font download link: [https://github.com/adobe-fonts/source-han-serif/raw/release/Variable/TTF/SourceHanSerif-VF.ttf](https://github.com/adobe-fonts/source-han-serif/raw/release/Variable/TTF/SourceHanSerif-VF.ttf)
304 | 
305 | Just copy and paste the following templates into Anki.
306 | 
307 | - Front Template
308 | 
309 |   ```html
310 |   <div id="deck" deck_name="{{Deck}}"></div>
311 |   <div id="content">
312 |     Kanken Level: ?
313 |     <div lang="ja" class="sentence">{{SentenceFront}}</div>
314 |     {{#Picture}} {{Picture}}
315 |     <br />
316 |     {{/Picture}} {{KankenAudio}}
317 |     <hr />
318 |     <div id="container">
319 |       <div id="diagram" style="opacity: 0">{{Diagram}}</div>
320 |     </div>
321 |   </div>
322 | 
323 |   <script>
324 |     function makeGrid() {
325 |       const TATEGAKI = true; /* toggle vertical writing */
326 |       const NUMOFBOXES =
327 |         -1; /* specify # of boxes; -1 to change based on word, 0 to hide */
328 |       const MAXBOXSIZE = 140; /* specify max boxsize (in px) */
329 | 
330 |       const boxSize = Math.min(
331 |         document.documentElement.clientWidth / 4.5,
332 |         MAXBOXSIZE
333 |       );
334 |       const container = document.getElementById("container");
335 |       const diagram = document.getElementById("diagram");
336 | 
337 |       for (child of diagram.children) {
338 |         child.style.height = `${boxSize}px`;
339 |         child.style.width = `${boxSize}px`;
340 |       }
341 |       const diagramHTML = container.innerHTML;
342 | 
343 |       let fullSize =
344 |         NUMOFBOXES === -1
345 |           ? boxSize * diagram.childElementCount
346 |           : boxSize * NUMOFBOXES;
347 |       let currSize = boxSize / 2;
348 | 
349 |       container.innerHTML = "";
350 |       if (TATEGAKI) {
351 |         container.style.height = `${fullSize}px`;
352 |         container.style.width = `${boxSize}px`;
353 |         container.innerHTML += `<div class="vert-line" style="height:${fullSize}px;width:${
354 |           boxSize / 2
355 |         }px"></div>`;
356 |         while (currSize < fullSize) {
357 |           container.innerHTML += `<div class="hori-line" style="height:${currSize}px;width:${boxSize}px;"></div>`;
358 |           currSize += boxSize / 2;
359 |         }
360 |         container.innerHTML += diagramHTML;
361 |       } else {
362 |         container.style.height = `${boxSize}px`;
363 |         container.style.width = `${fullSize}px`;
364 |         container.innerHTML += `<div class="hori-line" style="height:${
365 |           boxSize / 2
366 |         }px;width:${fullSize}px"></div>`;
367 |         while (currSize < fullSize) {
368 |           container.innerHTML += `<div class="vert-line" style="height:${boxSize}px;width:${currSize}px;"></div>`;
369 |           currSize += boxSize / 2;
370 |         }
371 |         container.innerHTML += diagramHTML;
372 |       }
373 | 
374 |       if (NUMOFBOXES === 0) {
375 |         container.style.border = "none";
376 |         for (child of container.children) {
377 |           child.style.border = "none";
378 |         }
379 |       }
380 | 
381 |       return;
382 |     }
383 | 
384 |     makeGrid();
385 |   </script>
386 |   ```
387 | 
388 | - Back Template
389 | 
390 |   ```html
391 |   <div id="deck" deck_name="{{Deck}}"></div>
392 |   <div id="content">
393 |     Kanken Level: {{KankenLevel}}
394 |     <div lang="ja" class="sentence">{{SentenceBack}}</div>
395 |     {{#Picture}} {{Picture}}
396 |     <br />
397 |     {{/Picture}} {{KankenAudio}}
398 |     <hr />
399 |     <div id="container">
400 |       <div id="diagram">{{Diagram}}</div>
401 |     </div>
402 |     <div lang="ja" id="extra">
403 |       {{Kana}}【{{Kanji}}】
404 |       <br />
405 |       {{Meaning}}
406 |     </div>
407 |   </div>
408 | 
409 |   <script>
410 |     function makeGrid() {
411 |       const TATEGAKI = true; /* toggle vertical writing */
412 |       const NUMOFBOXES =
413 |         -1; /* specify # of boxes; -1 to change based on word, 0 to hide */
414 |       const MAXBOXSIZE = 140; /* specify max boxsize (in px) */
415 | 
416 |       const boxSize = Math.min(
417 |         document.documentElement.clientWidth / 4.5,
418 |         MAXBOXSIZE
419 |       );
420 |       const container = document.getElementById("container");
421 |       const diagram = document.getElementById("diagram");
422 | 
423 |       for (child of diagram.children) {
424 |         child.style.height = `${boxSize}px`;
425 |         child.style.width = `${boxSize}px`;
426 |       }
427 |       const diagramHTML = container.innerHTML;
428 | 
429 |       let fullSize =
430 |         NUMOFBOXES === -1
431 |           ? boxSize * diagram.childElementCount
432 |           : boxSize * NUMOFBOXES;
433 |       let currSize = boxSize / 2;
434 | 
435 |       container.innerHTML = "";
436 |       if (TATEGAKI) {
437 |         container.style.height = `${fullSize}px`;
438 |         container.style.width = `${boxSize}px`;
439 |         container.innerHTML += `<div class="vert-line" style="height:${fullSize}px;width:${
440 |           boxSize / 2
441 |         }px"></div>`;
442 |         while (currSize < fullSize) {
443 |           container.innerHTML += `<div class="hori-line" style="height:${currSize}px;width:${boxSize}px;"></div>`;
444 |           currSize += boxSize / 2;
445 |         }
446 |         container.innerHTML += diagramHTML;
447 |       } else {
448 |         container.style.height = `${boxSize}px`;
449 |         container.style.width = `${fullSize}px`;
450 |         container.innerHTML += `<div class="hori-line" style="height:${
451 |           boxSize / 2
452 |         }px;width:${fullSize}px"></div>`;
453 |         while (currSize < fullSize) {
454 |           container.innerHTML += `<div class="vert-line" style="height:${boxSize}px;width:${currSize}px;"></div>`;
455 |           currSize += boxSize / 2;
456 |         }
457 |         container.innerHTML += diagramHTML;
458 |       }
459 | 
460 |       if (NUMOFBOXES === 0) {
461 |         container.style.border = "none";
462 |         for (child of container.children) {
463 |           child.style.border = "none";
464 |         }
465 |       }
466 | 
467 |       return;
468 |     }
469 |     makeGrid();
470 |   </script>
471 |   ```
472 | 
473 | - Styling
474 | 
475 |   ```css
476 |   @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&display=swap");
477 | 
478 |   html.win,
479 |   html.mac,
480 |   html.linux:not(.android) {
481 |     --main-font: "Noto Serif JP", serif;
482 |   }
483 | 
484 |   html.mobile {
485 |     --main-font: "Noto Serif JP", serif;
486 |   }
487 | 
488 |   .card.nightMode {
489 |     --main-bg: #1c2127;
490 |     --main-color: #dadada;
491 |     --sub-color: #7d8590;
492 |     --grey: rgba(128, 128, 128, 0.1);
493 |     --accent: #2980f1;
494 |     font-family: var(--main-font);
495 |     background-color: var(--main-bg);
496 |     color: var(--main-color);
497 |     font-size: 20px;
498 |     text-align: center;
499 |   }
500 | 
501 |   #qa {
502 |     display: flex;
503 |     align-items: stretch;
504 |     flex-direction: column;
505 |     min-height: calc(100vh - 40px);
506 |   }
507 | 
508 |   @font-face {
509 |     font-family: "Noto Serif JP";
510 |     src: local("Noto Serif JP"), local("Noto Serif JP Regular"),
511 |       url("_NotoSerifJP.otf");
512 |   }
513 | 
514 |   /* ----- Front elements ----- */
515 |   #content {
516 |     margin-top: 24px;
517 |   }
518 | 
519 |   .sentence {
520 |     font-size: 28px;
521 |   }
522 | 
523 |   /* PC replay button */
524 |   .replay-button {
525 |     margin-top: -5px;
526 |   }
527 |   .replay-button svg {
528 |     width: 30px;
529 |     height: auto;
530 |   }
531 |   .replay-button svg path {
532 |     fill: var(--main-color);
533 |     transition: 0.2s;
534 |   }
535 |   .replay-button svg circle {
536 |     fill: var(--main-bg);
537 |     display: none;
538 |   }
539 |   .replay-button:hover svg path {
540 |     fill: var(--sub-color);
541 |   }
542 | 
543 |   /* Grid */
544 |   #container {
545 |     margin: auto;
546 |     border-style: solid;
547 |     border-color: var(--grey);
548 |     background-color: rgba(255, 255, 255, 0);
549 |   }
550 |   .vert-line {
551 |     position: absolute;
552 |     border-style: none;
553 |     border-right-style: dotted;
554 |     border-color: var(--grey);
555 |   }
556 |   .hori-line {
557 |     position: absolute;
558 |     border-style: none;
559 |     border-bottom-style: dotted;
560 |     border-color: var(--grey);
561 |   }
562 | 
563 |   /* ----- Back elements ----- */
564 | 
565 |   /* Stroke diagram */
566 |   #diagram {
567 |     line-height: 0;
568 |   }
569 |   #diagram > img {
570 |     height: 140px;
571 |     width: 140px;
572 |     position: relative;
573 |     z-index: 100;
574 |   }
575 | 
576 |   /* Extra info */
577 |   #extra {
578 |     opacity: 0;
579 |   }
580 | 
581 |   #extra:hover {
582 |     opacity: 1;
583 |   }
584 | 
585 |   /* ---------- Misc ---------- */
586 | 
587 |   /* Remove default margins */
588 |   * {
589 |     margin: 0px;
590 |     padding: 0px;
591 |   }
592 | 
593 |   /* Images */
594 |   img {
595 |     height: 200px;
596 |     width: auto;
597 |     border-radius: 8px;
598 |   }
599 | 
600 |   /* Underline CSS */
601 |   u {
602 |     text-decoration: none;
603 |     color: var(--accent);
604 |     font-weight: 400;
605 |   }
606 | 
607 |   /* Line margins */
608 |   hr {
609 |     margin-top: 0.5em;
610 |     margin-bottom: 0.5em;
611 |   }
612 |   ```
613 | 


--------------------------------------------------------------------------------
/images/kanken.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/images/kanken.png


--------------------------------------------------------------------------------
/images/mining_template.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/images/mining_template.gif


--------------------------------------------------------------------------------
/images/popup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/images/popup.png


--------------------------------------------------------------------------------
/images/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/images/search.png


--------------------------------------------------------------------------------
/images/sentence_back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/images/sentence_back.png


--------------------------------------------------------------------------------
/images/sentence_front.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/images/sentence_front.png


--------------------------------------------------------------------------------
/images/vocab_back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/images/vocab_back.png


--------------------------------------------------------------------------------
/images/vocab_front.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rudnam/JP-study/3db58ebb455e6cb11fbe2dff77434693fc7a3c60/images/vocab_front.png


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