<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Welcome to Yomitan!</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">
    <script src="/js/pages/welcome-main.js" type="module"></script>
</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 Yomitan!</h1>

    <h2><strong>Recommended Permissions &#40;Important&#41;</strong></h2>
    <div class="settings-group">
        <div class="settings-item"><div class="settings-item-inner">
            <div class="settings-item-left">
                <div class="settings-item-label">Enable recommended permissions</div>
                <div class="settings-item-description">This will allow Yomitan to scan text from most sites.</div>
            </div>
            <div class="settings-item-right">
                <label class="toggle"><input type="checkbox" id="recommended-permissions-toggle" data-origin="&lt;all_urls&gt;"><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">Enable optional permissions</div>
                <div class="settings-item-description">This will allow Yomitan to read the clipboard and communicate with external programs.</div>
            </div>
            <div class="settings-item-right">
                <label class="toggle"><input type="checkbox" id="optional-permissions-toggle" data-origin="&lt;all_urls&gt;"><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-description">Further configuration is available on the <a href="/permissions.html" rel="noopener">Permissions page</a> and the web browser's <a tabindex="0" class="extension-settings-link" data-special-url="chrome://extensions/?id={id}">extension settings page</a>.</div>
                <div class="danger-text margin-above" id="permissions-disabled" hidden><strong>Yomitan features will be limited if the recommended permissions are not enabled.</strong></div>
                <div class="success-text margin-above" id="recommended-permissions-enabled" hidden><strong>Essential Yomitan features are available.</strong></div>
                <div class="success-text margin-above" id="full-permissions-enabled" hidden><strong>All Yomitan features are available.</strong></div>
                <div id="recommended-permissions-error" class="margin-above danger-text" hidden></div>
            </div>
        </div></div>
    </div>

    <!-- Notifications -->
    <div class="settings-group settings-group-top-margin warn-custom-templates-notification">
      <div class="settings-item">
        <div class="settings-item-inner settings-item-inner-wrappable"><div class="settings-item-left"><div class="settings-item-label">
              <p>
                There are custom Anki templates in your settings. Note that <a href="https://github.com/themoeway/yomitan/blob/master/docs/yomichan-migration.md#custom-templates" target="_blank" rel="noopener noreferrer">some syntax has changed from previous versions of Yomitan.</a>
                Please ensure that your custom templates are using the updated syntax.
              </p>
          </div></div></div>
      </div>
    </div>

    <!-- Content -->
    <h2>Here are some basics to get started</h2>
    <div class="settings-group">
        <a href="/quick-start-guide.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
            <div class="settings-item-left">
                <div class="settings-item-label">Yomitan Quick Start Guide</div>
            </div>
            <div class="settings-item-right open-panel-button-container">
                <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
            </div>
        </div></a>
    </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">
                    Language
                </div>
                <div class="settings-item-description">
                    Language of the text that is being looked up.
                </div>
            </div>
            <div class="settings-item-right">
                <select id="language-select" data-setting="general.language"></select>
            </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 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="light">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 type="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 type="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 type="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://github.com/themoeway/yomitan/blob/master/docs/dictionaries.md#dictionaries" target="_blank" rel="noopener noreferrer">Yomitan 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 type="button" class="low-emphasis danger dictionary-database-mutating-input" id="dictionary-delete-all-button">Delete All</button>
        <button type="button" class="low-emphasis dictionary-database-mutating-input" id="dictionary-import-file-button">Import</button>
        <button type="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 type="button" class="low-emphasis" data-modal-action="hide">Cancel</button>
        <button type="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 type="button" class="low-emphasis" data-modal-action="hide">Cancel</button>
        <button type="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 dictionary-parts-of-speech-filter-setting" hidden>
            <div class="settings-item-inner">
                <div class="settings-item-left">
                    <div class="settings-item-label">
                        Part of speech filtering
                        <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-parts-of-speech-filter-toggle"><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>
                When deinflecting words, only dictionary entries whose POS matches that expected by the deinflector will be shown.
                <p><a tabindex="0" class="more-toggle" data-parent-distance="3">Hide&hellip;</a></p>
            </div>
        </div>
        <div class="settings-item dictionary-use-deinflections-setting" hidden>
            <div class="settings-item-inner">
                <div class="settings-item-left">
                    <div class="settings-item-label">
                        Use deinflections
                        <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-use-deinflections-toggle"><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>
                Deinflections from this dictionary will be used.
                <p><a tabindex="0" class="more-toggle" data-parent-distance="3">Hide&hellip;</a></p>
            </div>
        </div>
        <hr>
        <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 type="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 type="button" class="low-emphasis" data-modal-action="hide">Cancel</button>
        <button type="button" data-modal-action="hide" id="dictionary-move-button">Move</button>
    </div>
</div></div>

</body>
</html>