yomichan/ext/welcome.html
toasted-nutbread 0d82c52a76
HTML page script refactoring (#2162)
* Move some common functionality

* Move setupEnvironmentInfo into ExtensionContentController

* Move background/environment.js to extension/environment.js
2022-05-28 21:57:25 -04:00

426 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&hellip;</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 be hidden.</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">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 tabindex="0" 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 tabindex="0" 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 tabindex="0" class="more-toggle" data-parent-distance="3">Hide&hellip;</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 of 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 tabindex="0" 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 tabindex="0" class="more-toggle" data-parent-distance="3">Hide&hellip;</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&hellip;</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&hellip;</button>
<button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></div></template>
<!-- Scripts -->
<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/extension/environment.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-importer-media-loader.js"></script>
<script src="/js/language/dictionary-worker.js"></script>
<script src="/js/pages/common/extension-content-controller.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>