-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathconverter.html
90 lines (88 loc) · 5.01 KB
/
converter.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
<!doctype html>
<html lang="zh-yue-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>粵拼轉換器 Cantonese Jyutping Converter</title>
<meta
name="description"
content="線上轉粵拼同國際音標 IPA，最快最準。學習粵語方便工具。Cantonese Jyutping Converter, the fastest and most accurate online tool for converting Cantonese text to Jyutping and IPA. A convenient tool for learning Cantonese."
/>
<meta property="og:title" content="粵拼轉換器 Cantonese Jyutping Converter" />
<meta name="keywords" content="Cantonese, Jyutping, IPA, converter, online tool, language learning, 粵語, 粵文, 粵拼, 轉換器, 粵語學習" />
<meta
property="og:description"
content="線上轉粵拼同國際音標 IPA，最快最準。學習粵語方便工具。Cantonese Jyutping Converter, the fastest and most accurate online tool for converting Cantonese text to Jyutping and IPA. A convenient tool for learning Cantonese."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://jyutping.net/converter" />
<meta property="og:image" content="https://jyutping.net/assets/og-image.png" />
<meta name="twitter:title" content="粵語拼音輸入法 Jyutping IME" />
<meta
name="twitter:description"
content="線上轉粵拼同國際音標 IPA，最快最準。學習粵語方便工具。Cantonese Jyutping Converter, the fastest and most accurate online tool for converting Cantonese text to Jyutping and IPA. A convenient tool for learning Cantonese."
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Can_CLID" />
<meta name="twitter:image" content="https://jyutping.net/assets/og-image.png" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E8N1DMVXRF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-E8N1DMVXRF");
</script>
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Chocolate+Classical+Sans&family=Noto+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.30.0/dist/tabler-icons.min.css" />
<script src="./src/converter.ts" type="module"></script>
<script type="importmap">
{
"imports": {
"to-jyutping": "https://unpkg.com/to-jyutping@3.1.1/dist/index.mjs"
}
}
</script>
</head>
<body class="bg-base flex flex-col justify-between min-h-screen">
<div class="flex-grow flex items-center justify-center my-4">
<div class="bg-sky-50 flex flex-col gap-4 p-8 rounded-xs w-full max-w-2xl">
<h1 class="text-4xl text-center">粵拼轉換器</h1>
<button class="btn btn-secondary w-fit btn-sm"><a href="/" class="no-underline lowercase text-gray-50">返去 jyutping.net</a></button>
<div>
<label for="cantonese-input">輸入粵文</label>
<textarea id="cantonese-input" class="border-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
</div>
<div class="relative">
<label for="jyutping-output">輸出粵拼</label>
<output id="jyutping-output"></output>
</div>
<div class="relative">
<label for="ipa-output">輸出國際音標</label>
<output id="ipa-output"></output>
</div>
</div>
</div>
</body>
<footer class="py-8 bg-blue-50">
<div class="container mx-auto text-center text-slate-600">
<div class="flex flex-wrap justify-center gap-4">
<p>粵拼參考網：<a href="https://jyutping.org/jyutping" target="_blank" rel="noopener noreferrer">jyutping.org/jyutping</a></p>
<p>線上粵拼輸入法（適合教學用）：<a href="https://www.typeduck.hk/web/" target="_blank" rel="noopener noreferrer">typeduck.hk/web</a></p>
<p>
注入粵拼瀏覽器擴展：<a href="https://chromewebstore.google.com/detail/inject-jyutping/lfgpgjkjglogbndlkikjgbbfoiofbdjp" target="_blank" rel="noopener noreferrer">Chrome 版</a> |
<a href="https://addons.mozilla.org/firefox/addon/inject-jyutping/" target="_blank" rel="noopener noreferrer">Firefox 版</a>
</p>
<p><a href="/#footer" target="_blank">查看更多資源</a></p>
</div>
<div class="flex flex-wrap justify-center gap-4 mt-4">
<p>本站作者：<a href="https://github.com/CanCLID" target="_blank" rel="noopener noreferrer">粵語計算語言學基礎建設組（CanCLID）</a></p>
</div>
</div>
</footer>
</html>