427 lines
24 KiB
HTML
427 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Welcome to Yomichan!</title>
|
|
<link rel="icon" type="image/png" href="/images/icon16.png" sizes="16x16">
|
|
<link rel="icon" type="image/png" href="/images/icon19.png" sizes="19x19">
|
|
<link rel="icon" type="image/png" href="/images/icon32.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="/images/icon38.png" sizes="38x38">
|
|
<link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48">
|
|
<link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64">
|
|
<link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
|
|
<link rel="stylesheet" type="text/css" href="/css/material.css">
|
|
<link rel="stylesheet" type="text/css" href="/css/settings.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Main content -->
|
|
<div class="content-outer"><div class="content">
|
|
<div class="content-left"></div>
|
|
<div class="content-center">
|
|
|
|
<span tabindex="-1" id="content-scroll-focus"></span>
|
|
|
|
<h1>Welcome to Yomichan!</h1>
|
|
|
|
<h2>Here are some basics to get started</h2>
|
|
<div class="settings-group">
|
|
<div class="settings-item">
|
|
<div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
Clicking the <img src="/images/yomichan-icon.svg" class="inline-icon" alt=""> <em>Yomichan</em> button in the browser bar will open the quick-actions popup.
|
|
</div></div></div>
|
|
<div class="settings-item-children settings-item-children-group">
|
|
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
The <img src="/images/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="/settings.html" target="_blank" rel="noopener">Settings</a> page.
|
|
</div></div></div></div>
|
|
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
The <img src="/images/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/search.html" target="_blank" rel="noopener">Search</a> page,
|
|
enabling text and terms to be looked up using the installed dictionaries.
|
|
This can even be used in offline mode!
|
|
</div></div></div></div>
|
|
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
The <img src="/images/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/info.html" target="_blank" rel="noopener">Information</a> page,
|
|
which has some helpful information and links about Yomichan.
|
|
</div></div></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item">
|
|
<div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
Yomichan requires one or more dictionaries to be installed in order to look up terms, kanji, and other information.
|
|
Several downloadable dictionaries can be found on the <a href="https://foosoft.net/projects/yomichan/#dictionaries" target="_blank" rel="noopener noreferrer">Yomichan homepage</a>,
|
|
allowing you to choose the dictionaries most relevant for you.
|
|
Dictionaries can be configured using the button below,
|
|
or later from the the <a href="/settings.html" rel="noopener">Settings</a> page.
|
|
</div></div></div>
|
|
<div class="settings-item-children settings-item-children-group">
|
|
<div class="settings-item settings-item-button" data-modal-action="show,dictionaries"><div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">Install or remove dictionaries…</div>
|
|
</div>
|
|
<div class="settings-item-right open-panel-button-container">
|
|
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
|
|
</div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item">
|
|
<div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key.
|
|
The default key is <kbd>Shift</kbd>, which can be disabled or configured below.
|
|
</div></div></div>
|
|
<div class="settings-item-children settings-item-children-group">
|
|
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
Clicking the <img src="/images/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results
|
|
will play an audio clip of a term's pronunciation using an online dictionary, if available.
|
|
</div></div></div></div>
|
|
<div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
Clicking on a kanji character in a term's definition will show additional information about that character.
|
|
<span class="light">(Requires a kanji dictionary to be installed.)</span>
|
|
</div></div></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item">
|
|
<div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
|
|
This startup notification can be turned off using the options below, or later from the <a href="/settings.html" rel="noopener">Settings</a> page.
|
|
</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Basic customization</h2>
|
|
<div class="settings-group">
|
|
<div class="settings-item"><div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">Show this welcome guide on browser startup</div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<label class="toggle"><input type="checkbox" data-setting="general.showGuide"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
|
</div>
|
|
</div></div>
|
|
<div class="settings-item">
|
|
<div class="settings-item-inner settings-item-inner-wrappable">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">Scan modifier key</div>
|
|
<div class="settings-item-description">Hold a key while moving the cursor to scan text.</div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<select id="main-scan-modifier-key"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item"><div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">Scan using middle mouse button</div>
|
|
<div class="settings-item-description">Hold the middle mouse button while moving the cursor to scan text.</div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<label class="toggle"><input type="checkbox" id="middle-mouse-button-scan"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
|
</div>
|
|
</div></div>
|
|
<div class="settings-item">
|
|
<div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">Auto-hide search popup</div>
|
|
<div class="settings-item-description">When no definitions are found after scanning text, the popup will automatically hide.</div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults"
|
|
data-transform='{
|
|
"type": "setVisibility",
|
|
"selector": "#auto-hide-search-popup-options",
|
|
"condition": {"op": "===", "value": true}
|
|
}'
|
|
><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>
|
|
<div class="settings-item"><div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">Popup auto-hide delay <span class="light">(in milliseconds)</span></div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<input type="number" data-setting="scanning.hideDelay" min="0">
|
|
</div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item"><div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">Scan delay <span class="light">(in milliseconds)</span></div>
|
|
<div class="settings-item-description">Change the delay before scanning occurs when no modifier key is required.</div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<input type="number" data-setting="scanning.delay" min="0">
|
|
</div>
|
|
</div></div>
|
|
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">Theme</div>
|
|
<div class="settings-item-description">Adjust the style of the popup.</div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<select data-setting="general.popupTheme" class="short-width">
|
|
<option value="default">Light</option>
|
|
<option value="dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
</div></div>
|
|
<a href="/settings.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">More customization options are available on the Settings page</div>
|
|
</div>
|
|
<div class="settings-item-right open-panel-button-container">
|
|
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
|
|
</div>
|
|
</div></a>
|
|
</div>
|
|
|
|
<div class="footer-padding"></div>
|
|
|
|
</div>
|
|
<div class="content-right"></div>
|
|
</div></div>
|
|
|
|
|
|
<!-- Auxiliary content -->
|
|
<div class="status-footer-container" hidden><div class="status-footer-container2">
|
|
<div class="status-footer">
|
|
<div class="status-footer-header"><div class="status-footer-header-label">Tasks in progress:</div><a class="status-footer-header-close">Close</a></div>
|
|
<div class="status-footer-item dictionary-delete-progress" hidden>
|
|
<div class="progress-labels"><div class="progress-info"></div><div class="progress-status"></div></div>
|
|
<div class="progress-bar-track"><div class="progress-bar danger"></div></div>
|
|
</div>
|
|
<div class="status-footer-item dictionary-import-progress" hidden>
|
|
<div class="progress-labels"><div class="progress-info"></div><div class="progress-status"></div></div>
|
|
<div class="progress-bar-track"><div class="progress-bar"></div></div>
|
|
</div>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div id="popup-menus"></div>
|
|
|
|
|
|
<!-- Dictionary modals -->
|
|
<div id="dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
|
|
<div class="modal-header">
|
|
<div class="modal-title">Dictionaries</div>
|
|
<div class="modal-header-button-container">
|
|
<div class="modal-header-button-group">
|
|
<button class="icon-button modal-header-button" data-modal-action="expand"><span class="icon-button-inner"><span class="icon" data-icon="expand"></span></span></button>
|
|
<button class="icon-button modal-header-button" data-modal-action="collapse"><span class="icon-button-inner"><span class="icon" data-icon="collapse"></span></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="settings-item">
|
|
<div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">
|
|
Enable support for prefix wildcard searches
|
|
<a class="more-toggle more-only" data-parent-distance="4">(?)</a>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<label class="toggle"><input type="checkbox" data-setting="global.database.prefixWildcardsSupported" data-scope="global"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item-children more" hidden>
|
|
<p>
|
|
In order for dictionaries to support searches using prefix wildcards on the search page,
|
|
some additional data must be stored in the database.
|
|
Enabling this option will include this extra data for any new dictionaries that are imported.
|
|
</p>
|
|
<p class="warning-text">
|
|
This option will not change any dictionaries that are already imported;
|
|
they must be re-imported for the option to take effect.
|
|
</p>
|
|
<p>
|
|
<a class="more-toggle" data-parent-distance="3">Hide…</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="warning-text margin-above no-dictionaries-installed-warning" hidden>
|
|
No dictionaries have been installed yet.
|
|
Visit the <a href="https://foosoft.net/projects/yomichan/#dictionaries" target="_blank" rel="noopener noreferrer">Yomichan homepage</a>
|
|
for a list free dictionaries or click the <em>Import</em> button below to select a dictionary file to import.
|
|
</div>
|
|
<div id="dictionary-error" class="danger-text margin-above" hidden></div>
|
|
<div id="dictionary-list" class="dictionary-list generic-list" data-count="0">
|
|
<div class="dictionary-item-top"></div>
|
|
<label class="dictionary-item-top toggle dictionary-item-enabled-toggle-container"><input type="checkbox" id="all-dictionaries-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
|
<div class="dictionary-item-top dictionary-item-title-container">All</div>
|
|
<div class="dictionary-item-top">Priority</div>
|
|
<div class="dictionary-item-top dictionary-item-button-height"></div>
|
|
</div>
|
|
|
|
<div hidden><input type="file" id="dictionary-import-file-input" accept=".zip,application/zip" multiple></div>
|
|
</div>
|
|
<div class="modal-body-addon dictionary-delete-progress" hidden>
|
|
<div class="progress-labels"><div class="progress-info"></div><div class="progress-status"></div></div>
|
|
<div class="progress-bar-track"><div class="progress-bar danger"></div></div>
|
|
</div>
|
|
<div class="modal-body-addon dictionary-import-progress" hidden>
|
|
<div class="progress-labels"><div class="progress-info"></div><div class="progress-status"></div></div>
|
|
<div class="progress-bar-track"><div class="progress-bar"></div></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="low-emphasis danger dictionary-database-mutating-input" id="dictionary-delete-all-button">Delete All</button>
|
|
<button class="low-emphasis dictionary-database-mutating-input" id="dictionary-import-file-button">Import</button>
|
|
<button data-modal-action="hide">Close</button>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div id="dictionary-confirm-delete-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
|
|
<div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete the dictionary:</p>
|
|
<p><strong id="dictionary-confirm-delete-name"></strong>?</p>
|
|
<p class="danger-text">This action cannot be undone.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="low-emphasis" data-modal-action="hide">Cancel</button>
|
|
<button class="danger" data-modal-action="hide" id="dictionary-confirm-delete-button">Delete</button>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div id="dictionary-confirm-delete-all-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
|
|
<div class="modal-header"><div class="modal-title">Confirm Dictionary Deletion</div></div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete <strong>all dictionaries</strong>?</p>
|
|
<p class="danger-text">This action cannot be undone.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="low-emphasis" data-modal-action="hide">Cancel</button>
|
|
<button class="danger" data-modal-action="hide" id="dictionary-confirm-delete-all-button">Delete</button>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div id="dictionary-details-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
|
|
<div class="modal-header">
|
|
<div class="modal-title"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="settings-item dictionary-outdated-notification" hidden><div class="settings-item-children danger-text">
|
|
This dictionary is outdated and may not support new extension features.
|
|
Re-import the dictionary to enable support for the latest features.
|
|
</div></div>
|
|
<div class="settings-item">
|
|
<div class="settings-item-inner">
|
|
<div class="settings-item-left">
|
|
<div class="settings-item-label">
|
|
Prefix wildcard searches supported
|
|
<a class="more-toggle more-only" data-parent-distance="4">(?)</a>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item-right">
|
|
<label class="toggle"><input type="checkbox" class="dictionary-prefix-wildcard-searches-supported" disabled><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item-children more" hidden>
|
|
<p class="warning-text">
|
|
Changing this value requires the dictionary to be re-imported.
|
|
</p>
|
|
<p><a class="more-toggle" data-parent-distance="3">Hide…</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="settings-item"><div class="settings-item-children">
|
|
<div class="dictionary-details-table"></div>
|
|
<div class="dictionary-counts"></div>
|
|
</div></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button data-modal-action="hide">Close</button>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div id="dictionary-move-location-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small">
|
|
<div class="modal-header"><div class="modal-title">Move Dictionary Options</div></div>
|
|
<div class="modal-body">
|
|
<p>Input the location the dictionary <strong class="dictionary-title"></strong> should be moved to:</p>
|
|
<div class="margin-above">
|
|
<input type="number" id="dictionary-move-location" min="1" step="1">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="low-emphasis" data-modal-action="hide">Cancel</button>
|
|
<button data-modal-action="hide" id="dictionary-move-button">Move</button>
|
|
</div>
|
|
</div></div>
|
|
|
|
|
|
<!-- Dictionary templates -->
|
|
<template id="dictionary-template">
|
|
<div class="dictionary-list-index generic-list-index-prefix"></div>
|
|
<label class="toggle dictionary-item-enabled-toggle-container"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
|
<div class="dictionary-item-title-container">
|
|
<span>
|
|
<strong class="dictionary-title"></strong> <span class="light dictionary-version"></span>
|
|
</span>
|
|
<button class="dictionary-outdated-button" hidden>
|
|
<div class="badge warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div>
|
|
</button>
|
|
<button class="dictionary-integrity-button" hidden>
|
|
<div class="badge info-badge badge-small-icon"><span class="icon" data-icon="checkmark"></span></div>
|
|
</button>
|
|
</div>
|
|
<input type="number" step="1" class="short-height dictionary-priority">
|
|
<button class="icon-button dictionary-menu-button" data-menu="dictionary-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button>
|
|
</template>
|
|
|
|
<template id="dictionary-details-entry-template"><div class="dictionary-details-entry">
|
|
<span class="dictionary-details-entry-label"></span>
|
|
<span class="dictionary-details-entry-info"></span>
|
|
</div></template>
|
|
|
|
<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
|
|
<button class="popup-menu-item" data-menu-action="showDetails">Details…</button>
|
|
<button class="popup-menu-item" data-menu-action="moveUp">Move up</button>
|
|
<button class="popup-menu-item" data-menu-action="moveDown">Move down</button>
|
|
<button class="popup-menu-item" data-menu-action="moveTo">Move to…</button>
|
|
<button class="popup-menu-item" data-menu-action="delete">Delete</button>
|
|
</div></div></div></template>
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script src="/lib/jszip.min.js"></script>
|
|
|
|
<script src="/js/core.js"></script>
|
|
|
|
<script src="/js/yomichan.js"></script>
|
|
|
|
<script src="/js/comm/api.js"></script>
|
|
<script src="/js/comm/cross-frame-api.js"></script>
|
|
<script src="/js/data/anki-util.js"></script>
|
|
<script src="/js/data/database.js"></script>
|
|
<script src="/js/data/json-schema.js"></script>
|
|
<script src="/js/data/permissions-util.js"></script>
|
|
<script src="/js/dom/document-focus-controller.js"></script>
|
|
<script src="/js/dom/document-util.js"></script>
|
|
<script src="/js/dom/dom-data-binder.js"></script>
|
|
<script src="/js/dom/html-template-collection.js"></script>
|
|
<script src="/js/dom/panel-element.js"></script>
|
|
<script src="/js/dom/popup-menu.js"></script>
|
|
<script src="/js/dom/selector-observer.js"></script>
|
|
<script src="/js/general/cache-map.js"></script>
|
|
<script src="/js/general/object-property-accessor.js"></script>
|
|
<script src="/js/general/task-accumulator.js"></script>
|
|
<script src="/js/input/hotkey-util.js"></script>
|
|
<script src="/js/language/dictionary-database.js"></script>
|
|
<script src="/js/language/dictionary-importer.js"></script>
|
|
<script src="/js/media/media-util.js"></script>
|
|
<script src="/js/pages/settings/dictionary-controller.js"></script>
|
|
<script src="/js/pages/settings/dictionary-import-controller.js"></script>
|
|
<script src="/js/pages/settings/generic-setting-controller.js"></script>
|
|
<script src="/js/pages/settings/modal.js"></script>
|
|
<script src="/js/pages/settings/modal-controller.js"></script>
|
|
<script src="/js/pages/settings/scan-inputs-simple-controller.js"></script>
|
|
<script src="/js/pages/settings/settings-controller.js"></script>
|
|
<script src="/js/pages/settings/settings-display-controller.js"></script>
|
|
<script src="/js/pages/settings/status-footer.js"></script>
|
|
|
|
<script src="/js/pages/welcome-main.js"></script>
|
|
|
|
</body>
|
|
</html>
|