-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
794 lines (733 loc) · 50 KB
/
index.html
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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-173562145-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-173562145-1');
</script>
<title>行列輸入法：超厲害中文輸入法你絕對後悔太晚認識 | FISH UP 行列查碼</title>
<link rel="canonical" href="https://array30.misterfishup.com/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For google -->
<meta name="author" content="Mister FISH UP">
<meta name="description" content="找超級好學、免費、同時輸入速度又超快的中文輸入法？有，而且只有行列輸入法。這裡十分鐘不到讓你了解！">
<meta name="keywords" content="行列,行列輸入法,行列輸入法練習,中文輸入法,行列查碼">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="行列輸入法：超厲害中文輸入法你絕對後悔太晚認識 | FISH UP 行列查碼">
<meta itemprop="description" content="找超級好學、免費、同時輸入速度又超快的中文輸入法？有，而且只有行列輸入法。這裡十分鐘不到讓你了解！">
<meta itemprop="image" content="https://array30.misterfishup.com/img/fish-up-dictionary-of-array.png">
<!-- For facebook Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="行列輸入法：超厲害中文輸入法你絕對後悔太晚認識 | FISH UP 行列查碼">
<meta property="og:description" content="找超級好學、免費、同時輸入速度又超快的中文輸入法？有，而且只有行列輸入法。這裡十分鐘不到讓你了解！">
<meta property="og:url" content="https://array30.misterfishup.com/">
<meta property="og:image" content="https://array30.misterfishup.com/img/fish-up-dictionary-of-array.png">
<meta property="og:site_name" content="FISH UP 行列查碼">
<meta property="fb:admins" content="106035361278242">
<!-- For twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@misterfishup">
<meta name="twitter:title" content="行列輸入法：超厲害中文輸入法你絕對後悔太晚認識 | FISH UP 行列查碼">
<meta name="twitter:description" content="找超級好學、免費、同時輸入速度又超快的中文輸入法？有，而且只有行列輸入法。這裡十分鐘不到讓你了解！">
<meta name="twitter:creator" content="@misterfishup">
<meta name="twitter:image" content="https://array30.misterfishup.com/img/fish-up-dictionary-of-array.png">
<!-- icon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- css -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Noto+Serif+TC&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/w3.css">
<link rel="stylesheet" href="/css/virtual-keyboard.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<!-- loading overlay -->
<div id="loading-overlay" style="background-color: white; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1000;"></div>
<!-- app -->
<div id='app' v-cloak data-local='tw' data-page-name=''>
<!-- Navbar -->
<app-nav-bar></app-nav-bar>
<!-- Header -->
<header>
<div id='site-name'>
<span class="w3-xxlarge">{{ appContent.title[local] }}</span>
<br>
<br class="w3-hide-large">
<span class="w3-large">{{ appContent.subtitle[local] }}</span>
</div>
<!-- game area (only on large screens)-->
<div id='game_area' class="w3-hide-small w3-hide-medium">
<!-- game instructions block-->
<div id='game_instructions-wrapper' class="not-visible">
<!-- game instructions close button -->
<button id='game_instructions-close'><i class="fa fa-times" aria-hidden="true"></i></button>
<!-- game instructions -->
<div id='game_instructions'>
<!-- game title -->
<h2 class="bold-center" style="margin-top: 24px;">{{ appContent.game.title[local] }}</h2>
<h5 class="w3-center">🎮 {{ appContent.game.subtitle[local] }} 🎮</h5>
<!-- game description -->
<hr style="width: 570px; margin: 25px auto 15px;">
<h5 class="w3-center" v-html='appContent.game.description1[local]'></h5>
<hr style="width: 570px; margin: 15px auto 25px;">
<p class="w3-large w3-center" style="margin: 4em auto; width: 85%" v-html='appContent.game.description2[local]'></p>
<!-- egg hunt title -->
<h4 id='egg_hunt-title' class="bold-center">{{ appContent.game.eggHuntTitle[local] }}</h4>
<!-- hints for easter eggs -->
<div id="hint_for_easter_eggs">
<div id='hint_for_easter_eggs-backlight'>
<span class="easter-egg-hint">🔑 {{ appContent.game.hint.title[local] }}</span>
<span class="w3-hide">
{{ appContent.game.hint.backlight1[local] }}<br>
<span class="easter-egg-hint">🔑 {{ appContent.game.hint.backlight2[local] }}</span>
<span class="w3-hide">{{ appContent.game.hint.backlight3[local] }}</span>
</span>
</div>
<div id='hint_for_easter_eggs-mode' class="w3-hide">
{{ appContent.game.hint.mysteriousMode1[local] }}<br>
<span class="easter-egg-hint">🔑 {{ appContent.game.hint.mysteriousMode2[local] }}</span>
<!-- Hey, you're NOT supposed to be reading these descriptions -->
<!-- Try finding them ON YOUR OWN! You'll be well guided! -->
<span class="w3-hide">
{{ appContent.game.hint.mysteriousMode3[local] }}<br>
<span class="easter-egg-hint">🔑 {{ appContent.game.hint.mysteriousMode4[local] }}</span>
<span class="w3-hide" v-html='appContent.game.hint.mysteriousMode5[local]'></span>
</span>
</div>
<div id='hint_for_easter_eggs-special' class="w3-hide">
{{ appContent.game.hint.special1[local] }}<br>
<span class="easter-egg-hint">🔑 {{ appContent.game.hint.special2[local] }}</span>
<!-- Hey, you're NOT supposed to be reading these descriptions -->
<!-- Try finding them ON YOUR OWN! You'll be well guided! -->
<span class="w3-hide">{{ appContent.game.hint.special3[local] }}</span>
</div>
</div>
<!-- congrats messages -->
<div id="congrats_messages-block" class="fade-in w3-hide">
<h4 class="bold-center">{{ appContent.game.congrats.title[local] }}</h4>
<h6>{{ appContent.game.congrats.reward[local] }}</h6>
<h6 v-html='appContent.game.congrats.unlock[local]'></h6>
</div>
<!-- easter egg collection (preview & detail)-->
<div id="egg_collection-preview"></div>
<div id="egg_collection-detail"></div>
<!-- all other commands -->
<!-- Hey, you're NOT supposed to be reading these descriptions -->
<!-- Try finding them ON YOUR OWN! You'll be well guided! -->
<div id='all_other_commands' class="fade-in w3-hide">
<h3 class="bold-center">{{ appContent.game.allOtherCommands.title[local] }}</h3>
<h5 class="w3-center">Version 2.0 (2021/1/1)</h5>
<div class="game-centered_description">
<p v-html='appContent.game.allOtherCommands.par1[local]'></p>
<p v-html='appContent.game.allOtherCommands.par2[local]'></p>
<p v-html='appContent.game.allOtherCommands.par3[local]'></p>
</div>
<!-- social media -->
<div class="w3-center" style="margin: 1em auto 4em;">
<img class="social-share facebook-share" tabindex="0">
<img class="social-share twitter-share" tabindex="0">
<img class="social-share line-share" tabindex="0">
<img class="social-share telegram-share" tabindex="0">
<img class="social-share linkedIn-share" tabindex="0">
</div>
<!-- other pressed key styles -->
<h4 class="bold-center">{{ appContent.game.otherPressedKeyStyle[local] }}</h4>
<p class="game-centered_description">
<!-- other pressed key styles (preview & detail) -->
<div id="other_pressed_key_style-preview"></div>
<div id="other_pressed_key_style-detail"></div>
<!-- style sets -->
<h4 class="bold-center">{{ appContent.game.styleWholeKeyboard[local] }}</h4>
<div id="instructions-style_set" class="game-centered_description"></div>
<!-- style sets (table) -->
<table id="table-style_set"></table>
</div>
<!-- game comments -->
<div class="game-comment">
<hr>
<p>{{ appContent.game.mouseKeyboard[local] }}</p>
<p>{{ appContent.game.comment[local] }}</p>
</div>
<!-- current keyboard style name -->
<div id="keyboard_style_name" class="w3-center" style="margin-top: 40px;"></div>
<!-- copyright -->
<div class="w3-center" style="margin: 10px auto 24px;">Copyright © {{ appContent.year }} {{ appContent.title[local] }}</div>
</div>
</div>
<!-- congrats messages (modal) -->
<div id='congrats_messages-modal_bg' class="fade-in w3-hide">
<div id='congrats_messages-modal-block' class="fade-in w3-hide">
<button id='congrats_messages-modal-close' class="fade-in w3-hide"><i class="fa fa-times" aria-hidden="true"></i></button>
<h1>{{ appContent.game.congrats.modalTitle[local] }}</h1>
<h3>{{ appContent.game.congrats.modalSubtitle[local] }}</h3>
<h5>{{ appContent.game.congrats.modalReward[local] }}</h5>
<p>{{ appContent.game.congrats.modalShare[local] }}</p>
</div>
</div>
<!-- virtual keyboard -->
<div id="keyboard">
<div id="key_area">
<!-- first row -->
<div class="kb-row">
<div class="backquote n_key" name='backquote'>
<div class="kb-keycap"></div>
</div>
<div class="digit1 n_key" name='digit1'>
<div class="kb-keycap"><span>1</span></div>
</div>
<div class="digit2 n_key" name='digit2'>
<div class="kb-keycap"><span>2</span></div>
</div>
<div class="digit3 n_key" name='digit3'>
<div class="kb-keycap"><span>3</span></div>
</div>
<div class="digit4 n_key" name='digit4'>
<div class="kb-keycap"><span>4</span></div>
</div>
<div class="digit5 n_key" name='digit5'>
<div class="kb-keycap"><span>5</span></div>
</div>
<div class="digit6 n_key" name='digit6'>
<div class="kb-keycap"><span>6</span></div>
</div>
<div class="digit7 n_key" name='digit7'>
<div class="kb-keycap"><span>7</span></div>
</div>
<div class="digit8 n_key" name='digit8'>
<div class="kb-keycap"><span>8</span></div>
</div>
<div class="digit9 n_key" name='digit9'>
<div class="kb-keycap"><span>9</span></div>
</div>
<div class="digit0 n_key" name='digit0'>
<div class="kb-keycap"><span>0</span></div>
</div>
<div class="minus n_key" name='minus'>
<div class="kb-keycap"></div>
</div>
<div class="equal n_key" name='equal'>
<div class="kb-keycap"></div>
</div>
<div class="backspace" name='backspace'>
<div class="kb-keycap">⟵</div>
</div>
<br clear="both">
</div>
<!-- second row -->
<div class="kb-row">
<div class="tab f_key" name='tab'>
<div class="kb-keycap"></div>
</div>
<div class="keyq n_key" name='keyq'>
<div class="kb-keycap"><span>二</span></div>
</div>
<div class="keyw n_key" name='keyw'>
<div class="kb-keycap"><span>○</span></div>
</div>
<div class="keye n_key" name='keye'>
<div class="kb-keycap"><span>二</span></div>
</div>
<div class="keyr n_key" name='keyr'>
<div class="kb-keycap"><span>五</span></div>
</div>
<div class="keyt n_key" name='keyt'>
<div class="kb-keycap"></div>
</div>
<div class="keyy n_key" name='keyy'>
<div class="kb-keycap"><span>新</span></div>
</div>
<div class="keyu n_key" name='keyu'>
<div class="kb-keycap"><span>年</span></div>
</div>
<div class="keyi n_key" name='keyi'>
<div class="kb-keycap"><span>快</span></div>
</div>
<div class="keyo n_key" name='keyo'>
<div class="kb-keycap"><span>樂</span></div>
</div>
<div class="keyp n_key" name='keyp'>
<div class="kb-keycap"><span>！</span></div>
</div>
<div class="bracketleft n_key" name='bracketleft'>
<div class="kb-keycap"></div>
</div>
<div class="bracketright n_key" name='bracketright'>
<div class="kb-keycap"></div>
</div>
<div class="backslash n_key" name='backslash'>
<div class="kb-keycap"></div>
</div>
<br clear="both">
</div>
<!-- third row -->
<div class="kb-row">
<div class="capslock f_key" name='capslock'>
<div class="kb-keycap"></div>
</div>
<div class="keya n_key" name='keya'>
<div class="kb-keycap"><span>: )</span></div>
</div>
<div class="keys n_key" name='keys'>
<div class="kb-keycap"></div>
</div>
<div class="keyd n_key" name='keyd'>
<div class="kb-keycap"><span>N</span></div>
</div>
<div class="keyf n_key" name='keyf'>
<div class="kb-keycap"><span>E</span></div>
</div>
<div class="keyg n_key" name='keyg'>
<div class="kb-keycap"><span>W</span></div>
</div>
<div class="keyh n_key" name='keyh'>
<div class="kb-keycap"></div>
</div>
<div class="keyj n_key" name='keyj'>
<div class="kb-keycap"><span>Y</span></div>
</div>
<div class="keyk n_key" name='keyk'>
<div class="kb-keycap"><span>E</span></div>
</div>
<div class="keyl n_key" name='keyl'>
<div class="kb-keycap"><span>A</span></div>
</div>
<div class="semicolon n_key" name='semicolon'>
<div class="kb-keycap"><span>R</span></div>
</div>
<div class="quote n_key" name='quote'>
<div class="kb-keycap"></div>
</div>
<div class="enter enter_key" name='enter'>
<div class="kb-keycap"></div>
</div>
<br clear="both">
</div>
<!-- fourth row -->
<div class="kb-row">
<div class="shiftleft f_key" name='shiftleft'>
<div class="kb-keycap"></div>
</div>
<div class="keyz n_key" name='keyz'>
<div class="kb-keycap"><span>B</span></div>
</div>
<div class="keyx n_key" name='keyx'>
<div class="kb-keycap"><span>O</span></div>
</div>
<div class="keyc n_key" name='keyc'>
<div class="kb-keycap"><span>N</span></div>
</div>
<div class="keyv n_key" name='keyv'>
<div class="kb-keycap"><span>N</span></div>
</div>
<div class="keyb n_key" name='keyb'>
<div class="kb-keycap"><span>E</span></div>
</div>
<div class="keyn n_key" name='keyn'>
<div class="kb-keycap"><span>A</span></div>
</div>
<div class="keym n_key" name='keym'>
<div class="kb-keycap"><span>N</span></div>
</div>
<div class="comma n_key" name='comma'>
<div class="kb-keycap"><span>N</span></div>
</div>
<div class="period n_key" name='period'>
<div class="kb-keycap"><span>É</span></div>
</div>
<div class="slash n_key" name='slash'>
<div class="kb-keycap"><span>E</span></div>
</div>
<div class="shiftright f_key" name='shiftright'>
<div class="kb-keycap"></div>
</div>
<br clear="both">
</div>
<!-- last row -->
<div class="kb-row">
<div class="key-dictionary s_key" name='dictionary'>
<a href="dictionary.html">
<div class="kb-keycap"><span>{{ appContent.sKeyDictionary[local] }}</span></div>
</a>
</div>
<div class="key-typing s_key" name='typing'>
<a href="typing.html">
<div class="kb-keycap"><span>{{ appContent.sKeyTyping[local] }}</span></div>
</a>
</div>
<div class="space space_bar" name='space'>
<div class="kb-keycap"></div>
</div>
<div class="key-array s_key" name='intro'>
<a href="#introduction">
<div class="kb-keycap"><span>{{ appContent.sKeyArray[local] }}</span></div>
</a>
</div>
<br clear="both">
</div>
</div>
</div>
<!-- icon for game instructions and notification -->
<div id='game_instructions-open'>
<i class="fa fa-gamepad fa-fw fa-2x" aria-hidden="true" id="game_instructions-icon"></i><i class="fa fa-exclamation" aria-hidden="true" id="game-notification"></i>
</div>
<!-- game output field -->
<div id='game-output_field'></div>
<div style="clear: both;"></div>
<!-- Try these examples -->
<h4 class="bold-center w3-text-white" :class="{ 'w3-wide': local == 'tw'}">
{{ appContent.tryTheseExamples[local] }} （<span id='code_examples-toggle'><i class="fa fa-eye-slash w3-hide" aria-hidden="true"></i><i class="fa fa-eye" aria-hidden="true"></i> <span>{{ appContent.examplesShow[local] }}</span><span class="w3-hide">{{ appContent.examplesHide[local] }}</span></span>）
</h4>
<!-- examples -->
<div id='code_examples-block' class="w3-hide">
<div id='code_examples-wrapper'>
<div id='code_examples-left'></div>
<div id='code_examples-right'></div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<!-- two blocks (only on medium, small screens)-->
<div class="w3-row-padding w3-hide-large w3-text-white">
<div class="w3-col m12 s12 w3-center">
<div class="w3-padding-large w3-margin-bottom">
<p>{{ appContent.callToAction.dontKnowArray[local] }}</p>
<a href="#introduction" class="w3-btn w3-round-xxlarge w3-indigo w3-opacity-min w3-hover-opacity-off w3-margin-bottom"> <i class="fa fa-angle-double-right"></i> {{ appContent.callToAction.learnMore[local] }} <i class="fa fa-angle-double-left"></i> </a>
</div>
</div>
<div class="w3-col m12 s12 w3-center">
<div class=" w3-padding-large w3-margin-bottom">
<p>{{ appContent.callToAction.popularFeatures[local] }}</p>
<p><a href="dictionary.html" class="w3-btn w3-indigo w3-opacity-min w3-margin-bottom w3-hover-opacity-off w3-round-xxlarge"> {{ appContent.callToAction.dictionary[local] }} </a>
<a href="typing.html" class="w3-btn w3-indigo w3-opacity-min w3-margin-bottom w3-hover-opacity-off w3-round-xxlarge"> {{ appContent.callToAction.typing[local] }} </a>
</p>
</div>
</div>
<div class="w3-center" style="margin: 5px 16px 32px;">{{ appContent.callToAction.onTheComputer[local] }}</div>
</div>
</header>
<!-- Introduction -->
<div id="introduction">
<h2 class="w3-wide w3-text-gray">{{ appContent.array[local] }}</h2>
<p class="w3-justify" v-html='appContent.arrayDescription.par1[local]'></p>
<p class="w3-justify" v-html='appContent.arrayDescription.par2[local]'></p>
<p class="w3-justify" v-html='appContent.arrayDescription.par3[local]'></p>
</div>
<!-- Statistics -->
<div class="w3-container w3-row w3-center w3-dark-gray w3-padding-48">
<div class="w3-quarter">
<span class="w3-xxlarge">215.5</span>
<br>{{ appContent.cpm[local] }}
</div>
<div class="w3-quarter">
<span class="w3-xxlarge">$ 0</span>
<br>{{ appContent.cost[local] }}
</div>
<div class="w3-quarter">
<span class="w3-xxlarge">70,000+</span>
<br>{{ appContent.numberCharacters[local] }}
</div>
<div class="w3-quarter">
<span class="w3-xxlarge"> < 4 </span>
<br>{{ appContent.averageKeystroke[local] }}
</div>
</div>
<!-- Advantages -->
<div class="w3-center w3-padding-48 w3-content" style="max-width:1000px;">
<p class="w3-large"><span class="w3-padding w3-opacity w3-hover-opacity-off w3-text-dark-gray w3-bottombar w3-hover-border-deep-orange">{{ appContent.array[local] }}</span></p>
<h2 :class="{ 'w3-wide': local == 'tw' }" style="margin-top: 0px; padding: 16px;">{{ appContent.bestIME[local] }}</h2>
<div v-if='local == "en"' style="font-size: x-large; margin: 20vh 0;">Section in development 😌</div>
<div v-if='local == "fr"' style="font-size: x-large; margin: 20vh 0;">Section en cours de développement 😌</div>
<div class="w3-row-padding" v-if='local == "tw"'>
<div class="w3-col l4 w3-margin-bottom">
<ul class="w3-ul w3-hoverable w3-border w3-center w3-hover-shadow">
<li class="w3-brown w3-padding">
<h3>價錢與軟體上</h3>
</li>
<li class="w3-padding-16">各作業系統上皆有免費、開源版本*<sup>1</sup></li>
<li class="w3-padding-16">支援 Mac、Linux、iOS、Android</li>
<li class="w3-padding-16"> Windows 內建*<sup>1</sup></li>
<li class="w3-padding-16">學習資源免費</li>
<li class="w3-padding-16">
<h2 class="w3-wide">$ 0</h2>
<span class="w3-opacity">安裝、學習、使用行列的價錢</span>
</li>
<li class="w3-light-grey w3-padding-24 w3-opacity w3-small">
註 1：快速的輸入法如大新倉頡、嘸蝦米皆有版權問題，需付費使用，且在公共電腦不可使用！
</li>
</ul>
</div>
<div class="w3-col l4 w3-margin-bottom">
<ul class="w3-ul w3-hoverable w3-border w3-center w3-hover-shadow">
<li class="w3-brown w3-padding">
<h3>學習上</h3>
</li>
<li class="w3-padding-16">字形輸入法中最容易學之一*<sup>2</sup></li>
<li class="w3-padding-16">完全不用記鍵位，一開始就可盲打</li>
<li class="w3-padding-16">僅需 10 分鐘就能學會核心概念*<sup>3</sup></li>
<li class="w3-padding-16">僅需 2 小時就能拆碼多數的中文字*<sup>3</sup></li>
<li class="w3-padding-16">
<h2 class="w3-wide">10 min.</h2>
<span class="w3-opacity">學會核心概念所需時間</span>
</li>
<li class="w3-light-grey w3-padding-24 w3-opacity w3-small">
註 2：例如相較大新倉頡、倉頡、速成、五筆等<br>
註 3：例如透過本站的「行列教學」
</li>
</ul>
</div>
<div class="w3-col l4 w3-margin-bottom">
<ul class="w3-ul w3-hoverable w3-border w3-center w3-hover-shadow">
<li class="w3-brown w3-padding">
<h3>拆碼上</h3>
</li>
<li class="w3-padding-16">字根分佈與取碼最科學的輸入法*<sup>4</sup></li>
<li class="w3-padding-16">依書寫拆字，會寫就會打</li>
<li class="w3-padding-16">一般字最多僅 4 碼，且拆碼快速又科學</li>
<li class="w3-padding-16">支援萬用碼、支援容錯*<sup>5</sup></li>
<li class="w3-padding-16">
<h2 class="w3-wide">< 4</h2>
<span class="w3-opacity">字的平均取碼數</span>
</li>
<li class="w3-light-grey w3-padding-24 w3-opacity w3-small">
註 4：幾乎跟任何字根輸入法比，故易學不易忘！<br>
註 5：例如倉頡的一個缺點是容錯率太低
</li>
</ul>
</div>
</div>
<div class="w3-row-padding" v-if='local == "tw"'>
<div class="w3-col l2 w3-margin-bottom w3-hide-medium w3-hide-small"> </div>
<div class="w3-col l4 w3-margin-bottom">
<ul class="w3-ul w3-hoverable w3-border w3-center w3-hover-shadow">
<li class="w3-brown w3-padding">
<h3>輸入上</h3>
</li>
<li class="w3-padding-16">常用字具有特別碼、一級簡碼*<sup>6</sup></li>
<li class="w3-padding-16">輕鬆輸入全形標點符號</li>
<li class="w3-padding-16">輕鬆輸入特殊符號、注音符號</li>
<li class="w3-padding-16">許多常用字和難字無須完整拆字<br>便出現在選字欄中*<sup>6, 7</sup></li>
<li class="w3-padding-16">
<h2 class="w3-wide"><span class="keycap title-single">單</span> <span class="keycap title-special">特</span> <span class="keycap title-shortcode1">一</span></h2>
<span class="w3-opacity">具不同簡碼來增快打字速度</span>
</li>
<li class="w3-light-grey w3-padding-24 w3-opacity w3-small">
註 6：加快打字速度  註 7：減輕拆碼的苦惱
</li>
</ul>
</div>
<div class="w3-col l4 w3-margin-bottom">
<ul class="w3-ul w3-hoverable w3-border w3-center w3-hover-shadow">
<li class="w3-brown w3-padding">
<h3>打字速度上</h3>
</li>
<li class="w3-padding-16">免費中文輸入法速度最快的輸入法</li>
<li class="w3-padding-16">打字速度輕易破每分鐘 100 字*<sup>8</sup></li>
<li class="w3-padding-16">最快紀錄達每分鐘 215.5 字</li>
<li class="w3-padding-16">透過持續練習<br>每分鐘 150 字以上絕非難事</li>
<li class="w3-padding-16">
<h2 class="w3-wide">215.5</h2>
<span class="w3-opacity">每分鐘字最高紀錄</span>
</li>
<li class="w3-light-grey w3-padding-24 w3-opacity w3-small">
註 8：透過持續 6 個月到一年左右的練習
</li>
</ul>
</div>
<div class="w3-col l2 w3-margin-bottom w3-hide-medium w3-hide-small"> </div>
</div>
</div>
<!-- call to action -->
<div class="w3-padding-large w3-padding-24 w3-center w3-sand w3-large">
<h3>{{ appContent.callToAction.actNow[local] }}</h3>
<a href="tutorial.html" class="btn--call-to-action w3-blue">{{ appContent.callToAction.startTutorial[local] }}</a>
<br>
<a href="https://www.facebook.com/groups/517104371955479/" target="_blank" class="btn--call-to-action w3-indigo"><i class="fa fa-facebook w3-large" aria-hidden='true'></i> {{ appContent.callToAction.community[local] }}</a>
</div>
<!-- FAQ -->
<div class="w3-container w3-content w3-padding-64 w3-section" style="max-width:900px; font-size: large;" id="FAQ" v-if='local == "tw"'>
<h2 class="w3-wide w3-center">常見問題節選</h2>
<p class="w3-opacity w3-center">初次接觸行列常有的疑惑</p>
<div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">我已經能用注音或拼音打字了，為甚麼還要學行列？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">您當然可以不用學，但如果您想學字形輸入法、或是想學一個好學且輸入快速的輸入法，或純粹只是想學一種新的輸入法，那麼行列輸入法絕對是您的首選！</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">我已經有多種語言鍵盤了，行列能夠快速中英切換嗎？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">可以！</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">行列和嘸蝦米哪個比較好？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">都很好！以打字速度、學習曲線上來說沒有一個明顯勝過對方。但如同上表所寫，嘸蝦米須付費，並且在公用電腦（例如公家機關）基本上無法使用。</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">行列和大易哪個比較好？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">打字速度上，一般來說行列較大易快。學習曲線上好像沒太多案例比較。另外，大易目前僅能輸入兩萬到三萬字，並且相較行列，大易的維護社群似乎稍微小一些。結論：兩個都可以學學看，但如果要先選一個，推薦選行列。</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">如何使用各作業系統上的行列輸入法？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">請參考<a href="download.html" target="_blank" class="w3-hover-text-red">下載</a>。另外，Windows 系統雖已內建行列輸入法，但有其他更好用的行列輸入法如新行列 30、DIME 行列，如果您使用 Windows 系統請一定要試試！</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">手機上也能使用行列嗎？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">可以。除了行列 30 還有行列 10 可以使用！詳情請見<a href="download.html" target="_blank" class="w3-hover-text-red">下載</a>。</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">不知道某個字怎麼輸入怎麼辦？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">您可以使用本站的「<a href="dictionary.html" target="_blank" class="w3-hover-text-red">FISH UP 行列查碼</a>」來查詢。</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">有可以練習行列輸入法的資源嗎？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">有的！您可以使用本站的「<a href="typing.html" target="_blank" class="w3-hover-text-red">FISH UP 打字練習</a>」，不僅在打字時提供行列邊碼提示，您還能自製題目來練習。</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">為什麼說行列不用記鍵位，還有一開始就可盲打？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">
鍵盤英文字母區塊上面有一排數字鍵，從左至右分別是 1 到 9 以及 0 ，一共十顆數字鍵。每顆數字鍵下方有三顆鍵，例如數字鍵 <span class="keycap keycap-number">5</span> 下方的三顆鍵是 <span class="keycap keycap-letter">t</span>、<span class="keycap keycap-letter">g</span>、<span class="keycap keycap-letter">b</span>，行列輸入法分別稱之為「5 上」、「5 中」以及「5 下」，並記做 <span class="keycap keycap-letter">5↑</span>、<span class="keycap keycap-letter">5-</span>、<span class="keycap keycap-letter">5↓</span>。
<p>我們將十顆數字鍵下方的這 30 顆鍵稱作<b>行列 30 鍵</b>。每顆鍵依照 10 個數字（行）以及「上、中、下」（列）來定位，這就是<b>行列輸入法</b>或<b>行列 30</b> 這兩個名稱的由來。行列輸入法用這些以「行、列」定位的按鍵來輸入文字，這就是為什麼行列輸入法不用像英打或多數中文輸入法需要記鍵位。</p>
<p>例如中文字「繼」的行列編碼為 2 下 <span class="radical-plus">+</span> 2 下 <span class="radical-plus">+</span> 2 下 <span class="radical-plus">+</span> 2 中，您不必記任何鍵位也不用看鍵盤就可以輸入這四個鍵！</p>
</div>
</div>
<div class="w3-row w3-padding w3-text-gray w3-hover-text-deep-orange">
<div class="w3-col" style="width: 2em;">問：</div>
<div class="w3-rest">為什麼叫行列？為什麼叫行列 30？</div>
</div>
<div class="w3-row w3-padding w3-margin-bottom">
<div class="w3-col" style="width: 2em;">答：</div>
<div class="w3-rest">
正上方的回答有答案！<br>
<p>另外，行列早期的編碼設計，除了使用現在的 30 顆鍵，還使用了上排的 10 顆數字鍵，一共 40 顆鍵，稱為「行列 40」。而現在所謂的行列輸入法，一般都是指行列 30，是行列 40 改良後的設計。</p>
</div>
</div>
<div class="w3-center w3-padding-24">
<p class="w3-center">以上為常見問題節選，是特別給第一次接觸行列的讀者。想看更多常見問題，請到「常見問題」的完整頁面（頁面建構中）。</p>
<a href="faq.html" target="_blank" class="w3-button w3-deep-purple w3-hover-orange">更多常見問題</a>
</div>
</div>
</div>
<!-- call to action -->
<div class="w3-padding-large w3-center w3-card w3-sand w3-hover-shadow" style="width: 75%; margin: auto;" v-if='local == "tw"'>
<h3>還在等什麼？馬上加入行列輸入法的行列！</h3>
<a href="tutorial.html" class="w3-btn w3-blue w3-padding-large w3-round-xxlarge w3-margin">點我開始行列教學</a>
<a href="https://www.facebook.com/groups/517104371955479/" target="_blank" class="w3-btn w3-indigo w3-padding-large w3-round-xxlarge w3-margin"><i class="fa fa-facebook w3-large" aria-hidden='true'></i> 加入行列社群</a>
</div>
<!-- dictionary -->
<div class="w3-container w3-dark-grey" style="padding:80px 16px; margin-top: 48px;" v-if='local == "tw"'>
<div class="w3-row-padding">
<div class="w3-half">
<h2>{{ appContent.dictionary.title[local] }}</h2>
<p>{{ appContent.dictionary.description[local] }}</p>
<ul>
<li>支援多字查碼，一次最多可查詢 500 字</li>
<li>標註單鍵碼、特別碼、一級簡碼、二級簡碼與符號</li>
<li>標註簡碼、符號的數字鍵以及普通編碼的重碼位置</li>
<li>按鍵顯示能自由且即時地切換為英文鍵或行列 30 鍵</li>
<li>支援行動裝置瀏覽，手機、平板、筆電、桌電都能良好顯示</li>
<li>查碼支援至中日韓統一表意文字擴充區 D，總數超過七萬四千字</li>
</ul>
還有更多功能…等您來使用！
<p class="w3-margin-bottom"><a href="dictionary.html" target="_blank" class="w3-btn w3-red w3-opacity-min w3-hover-opacity-off w3-padding-large w3-round-xxlarge"> 查碼去 </a></p>
</div>
<div class="w3-half">
<img class="download-image w3-round-large w3-margin-top" :src='appContent.dictionary.imgPath[local]' alt="FISH UP 行列查碼" title="FISH UP 行列查碼" style="max-width: 90%;">
</div>
</div>
</div>
<!-- typing practice -->
<div class="w3-container w3-light-grey" style="padding:80px 16px" v-if='local == "tw"'>
<div class="w3-row-padding">
<div class="w3-col m6">
<img class="download-image w3-round-large w3-margin-bottom" src="/img/typing-practice.png" alt="FISH UP 行列打字練習" title="FISH UP 行列打字練習" style="max-width: 90%;">
</div>
<div class="w3-col m6">
<h2>FISH UP 行列打字練習</h2>
<p>線上最有效的行列輸入法打字練習</p>
<ul>
<li>即時性附上最完整的行列提示</li>
<li>追蹤錯字並附上行列編碼</li>
<li>眾多內建題庫讓您快速進步</li>
<li>推出免費客製化題目功能</li>
<li>可設定題目字元逆序或隨機打亂</li>
<li>按鍵顯示能自由且即時地切換為英文鍵或行列 30 鍵</li>
<li>行列提示支援至中日韓統一表意文字擴充區 D，總數超過七萬四千字</li>
</ul>
您還在等什麼，趕快來試試！
<p><a href="typing.html" target="_blank" class="w3-btn w3-red w3-opacity-min w3-hover-opacity-off w3-padding-large w3-round-xxlarge"> 打字去 </a></p>
</div>
</div>
</div>
<div id="contact-support">
<div>
{{ appContent.shareOn[local] }}
<img class="social-share facebook-share" tabindex="0">
<img class="social-share twitter-share" tabindex="0">
<img class="social-share line-share" tabindex="0">
<img class="social-share telegram-share" tabindex="0">
<img class="social-share linkedIn-share" tabindex="0">
</div>
<p v-html='appContent.contactMe[local]' style="font-size: 1.1em;"></p>
<a href="https://www.buymeacoffee.com/misterfishup" target="_blank" style="text-align: center; display: block; margin: 32px;"><img src="/img/buy-me-a-cake-brown.png" :alt='appContent.buyMeACake[local]' :title='appContent.buyMeACake[local]' class="buy-me-a-coffee"></a>
</div>
<!-- Footer -->
<app-footer></app-footer>
<!-- back to top button -->
<button type="button" id="to_top" class="toTop-arrow"></button>
</div>
<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<!-- <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script> -->
<script type="text/javascript" src="/app/local.js"></script>
<script type="text/javascript" src="/data/object-key-short-code-i.js"></script>
<script type="text/javascript" src="/data/object-key-short-code-ii.js"></script>
<script type="text/javascript" src="/app/index.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="/js/object-drop-coincident-code.js"></script>
<script type="text/javascript" src="/js/keyboard.js"></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>