diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-12-13 12:32:43 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-12-13 12:32:43 -0500 |
| commit | 14b9e0621b34d34411c1e3eec8ff1d89b6717756 (patch) | |
| tree | ba61a325b45f1ced24b63a3e614ba41f5b032bcb /ext/bg/welcome.html | |
| parent | 5d2edda7534360def79921eb9d38ef72b4f6da04 (diff) | |
Updated welcome page (#1107)
* Make storage controller optional
* Make more elements optional
* Update styles
* Create new welcome page
* Update URL for welcome guide
* Remove old guide
* Fix unused global
Diffstat (limited to 'ext/bg/welcome.html')
| -rw-r--r-- | ext/bg/welcome.html | 372 |
1 files changed, 372 insertions, 0 deletions
diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html new file mode 100644 index 00000000..91b58bc9 --- /dev/null +++ b/ext/bg/welcome.html @@ -0,0 +1,372 @@ +<!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="/mixed/img/icon16.png" sizes="16x16"> + <link rel="icon" type="image/png" href="/mixed/img/icon19.png" sizes="19x19"> + <link rel="icon" type="image/png" href="/mixed/img/icon32.png" sizes="32x32"> + <link rel="icon" type="image/png" href="/mixed/img/icon38.png" sizes="38x38"> + <link rel="icon" type="image/png" href="/mixed/img/icon48.png" sizes="48x48"> + <link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64"> + <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128"> + <link rel="stylesheet" type="text/css" href="/bg/css/settings2.css"> + <style> +.inline-icon { + position: relative; + width: calc(1em * (16 / var(--font-size-default-no-units))); + height: calc(1em * (16 / var(--font-size-default-no-units))); + top: calc(1em * (3 / var(--font-size-default-no-units))); +} +.dictionary-info { + display: flex; + flex-flow: row nowrap; + align-items: center; +} +.dictionary-info-label { + margin-left: 1em; +} + </style> +</head> +<body> + +<!-- Main content --> +<div class="content-outer"><div class="content"> +<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="/mixed/img/yomichan-icon.svg" class="inline-icon" alt=""> <em>Yomichan icon</em> 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="/mixed/img/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the settings 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="/mixed/img/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open a search 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="/mixed/img/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open a page + with some general information 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="settings2.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-button-icon" data-icon="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 the scanning modifier key. + The default key is <kbd>Shift</kbd>, which can be 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="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker icon</em> of an entry in the popup 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="settings2.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 key or button is required for scanning, the popup will hide automatically.</div> + </div> + <div class="settings-item-right"> + <label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults" data-transform="setVisibility" data-ancestor-distance="-1" data-relative-selector="#auto-hide-search-popup-options" data-visbility-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">When no key or button is required for scanning, the delay before scanning occurs.</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"> + <div class="settings-item-group"> + <div class="settings-item-group-item"> + <div class="settings-item-group-item-label">Body</div> + <select data-setting="general.popupTheme" class="short-width short-height"> + <option value="default">Light</option> + <option value="dark">Dark</option> + </select> + </div> + <div class="settings-item-group-item"> + <div class="settings-item-group-item-label">Shadow</div> + <select data-setting="general.popupOuterTheme" class="short-width short-height"> + <option value="auto">Auto-detect</option> + <option value="default">Light</option> + <option value="dark">Dark</option> + </select> + </div> + </div> + </div> + </div></div> + <a href="settings2.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner"> + <div class="settings-item-left"> + <div class="settings-item-label">View more settings 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-button-icon" data-icon="right-arrow"></span></span></button> + </div> + </div></a> + </div> + + <div class="footer-padding"></div> + +</div> +</div></div> + + +<!-- Auxiliary content --> +<div class="status-footer-container"><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" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content"> + <div class="modal-header"><div class="modal-title">Dictionaries</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="settings-item"><div class="settings-item-inner"> + <div class="settings-item-left"> + <div class="settings-item-label"> + More dictionary settings are available on the <a href="settings2.html" rel="noopener">Settings</a> page + </div> + </div> + </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"></div> + <div id="dictionary-list-extra" class="dictionary-list"></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" class="modal-container" tabindex="-1" role="dialog"><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" class="modal-container" tabindex="-1" role="dialog"><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> + + +<!-- Dictionary templates --> +<template id="dictionary-template"><div class="settings-item"> + <div class="settings-item-inner"> + <div class="settings-item-left"> + <div class="settings-item-label dictionary-info"> + <label class="toggle"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> + <span class="dictionary-info-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></span> + </div> + </div> + <div class="settings-item-right"> + <button class="icon-button dictionary-menu-button" data-menu="dictionary-menu" data-menu-position="below,left"><span class="icon-button-inner"><span class="icon-button-icon" data-icon="kebab-menu"></span></span></button> + </div> + </div> +</div></template> + +<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> + <button class="popup-menu-item" data-menu-action="delete">Delete</button> +</div></div></template> + + +<!-- Scripts --> +<script src="/mixed/lib/jszip.min.js"></script> + +<script src="/mixed/js/core.js"></script> +<script src="/mixed/js/yomichan.js"></script> +<script src="/mixed/js/comm.js"></script> +<script src="/mixed/js/api.js"></script> + +<script src="/mixed/js/cache-map.js"></script> +<script src="/mixed/js/document-util.js"></script> +<script src="/mixed/js/dom-data-binder.js"></script> +<script src="/mixed/js/html-template-collection.js"></script> +<script src="/mixed/js/object-property-accessor.js"></script> +<script src="/mixed/js/selector-observer.js"></script> +<script src="/mixed/js/task-accumulator.js"></script> + +<script src="/bg/js/database.js"></script> +<script src="/bg/js/dictionary-database.js"></script> +<script src="/bg/js/dictionary-importer.js"></script> +<script src="/bg/js/json-schema.js"></script> +<script src="/bg/js/media-utility.js"></script> + +<script src="/bg/js/settings/dictionary-controller.js"></script> +<script src="/bg/js/settings/dictionary-import-controller.js"></script> +<script src="/bg/js/settings/generic-setting-controller.js"></script> +<script src="/bg/js/settings/modal-controller.js"></script> +<script src="/bg/js/settings/popup-elements.js"></script> +<script src="/bg/js/settings/popup-menu.js"></script> +<script src="/bg/js/settings/scan-inputs-simple-controller.js"></script> +<script src="/bg/js/settings/settings-controller.js"></script> + +<script src="/bg/js/settings2/settings-display-controller.js"></script> + +<script src="/bg/js/welcome-main.js"></script> + +</body> +</html> |