aboutsummaryrefslogtreecommitdiff
path: root/ext/welcome.html
blob: f219268633a3fc83f3487f5218e45ae087ca2393 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!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. Further configuration is available on the <a href="/permissions.html" rel="noopener">Permissions 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="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 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>

    <!-- 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>