-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
143 lines (128 loc) · 5.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cree SRO ⇔ syllabics converter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" media="all">
<script src="./main.js"></script>
<meta property="og:title" content="Cree SRO/syllabics converter">
<meta name="twitter:card" content="summary">
<meta name="description" content="Convert between Western Cree syllabics and SRO (Standard Roman Orthography)">
<meta property="og:description" content="Convert between Western Cree syllabics and SRO (Standard Roman Orthography)">
<meta property="og:url" content="https://syllabics.app/">
<meta property="og:image" content="img/favicon-512.png">
<meta name="author" content="Eddie Antonio Santos">
<meta name="twitter:creator" content="@_eddieantonio">
<meta name="keywords" content="syllabics, nêhiyawêwin, nīhithawīwin, nêhinawêwin, Cree, SRO, convert, transliterate">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="icon" type="image/png" href="img/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="img/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="img/favicon-96.png" sizes="96x96">
<link rel="apple-touch-icon" href="img/favicon-16.png" sizes="16x16">
<link rel="apple-touch-icon" href="img/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="img/favicon-96.png" sizes="96x96">
<meta name="theme-color" content="#f6f8fa">
<link rel="manifest" href="manifest.webmanifest" type="application/json">
</head>
<body>
<main>
<h1>Cree <span class="hide-phone">SRO ⇔ </span>syllabics converter</h1>
<form>
<div class="box box-sro">
<label for="sro"> SRO </label>
<textarea id="sro" name="sro" placeholder="tânisi. Type Cree (SRO) here!" autocorrect="off" autocapitalize="off" autofocus lang="cr" autocomplete="off" spellcheck="false"></textarea>
</div>
<div class="box box-sro">
<label for="syl"> Syllabics </label>
<textarea id="syl" name="syl" placeholder="ᑖᓂᓯ᙮ Type syllabics here!" lang="cr" autocomplete="off" spellcheck="false"></textarea>
</div>
<div class="button-bar">
<button data-cy="clear-button" name="clear" type="button">Clear all text</button>
</div>
<details id="settings">
<summary data-cy="settings-drop-down">
Settings
</summary>
<div class="extra-controls">
<fieldset>
<label>
<input type="radio" name="macrons" value="false" checked data-cy="option-circumflexes">
Produce circumflexes (âêîô)
</label>
<label>
<input type="radio" name="macrons" value="true" data-cy="option-macrons">
Produce macrons (āēīō)
</label>
</fieldset>
<fieldset>
<label>
<input type="radio" name="final-hk" value="x" checked data-cy="option-final-x">
use <strong>ᕽ</strong> at end of words
</label>
<label>
<input type="radio" name="final-hk" value="hk" data-cy="option-final-hk">
use <strong>ᐦᐠ</strong> at end of words
</label>
</fieldset>
<fieldset>
<label>
<input type="checkbox" name="double-vowels" checked data-cy="option-double-vowels">
Type a vowel twice to type a long vowel (aa → â)
</label>
</fieldset>
</div>
</details>
</form>
</main>
<aside>
<h2> What is this? </h2>
<p> This is a <strong>standard Roman orthography (SRO)</strong>
to <strong>syllabics</strong> converter for <strong>Western Cree</strong>
(Western Swampy Cree (N-dialect), Woods Cree (Th-dialect), and Plains Cree
(Y-dialect)).
<h2> How to use the converter </h2>
<p> Type the text you want to convert in the appropriately labelled box, and
the result will appear in the other box instantly!
<p> The converter is <strong>bidirectional</strong>: it can go from SRO to
syllabics and back again.
<p> Typing a vowel <strong>twice</strong> in SRO (e.g., ee, ii, oo, aa)
will convert it into a long vowel (ê, î, ô, â). You can turn this off in
the <a href="#settings">settings</a>.
<p> You can use circumflexes (âêîô) or macrons (āēīō). When
converting from syllabics to SRO, you can choose which to produce in the
<a href="#settings">settings</a>.
</aside>
<footer>
<ul class="meta">
<li>
<a href="https://www.npmjs.com/package/cree-sro-syllabics">
cree-sro-syllabics v<span id="library-version">YYYY.MM.DD</span>
</a>
<li>
Made with ❤︎ by <a href="https://github.com/eddieantonio">Eddie Antonio Santos</a>
<li>
<a href="https://github.com/eddieantonio/syllabics.app">Open source</a>
</p>
</footer>
<script>
if ('serviceWorker' in navigator) {
if (window.location.hostname === 'localhost') {
console.log("NOTE: skipping service worker registration in development");
navigator.serviceWorker.getRegistrations().then(function (registrations) {
registrations.forEach(function (registration) {
console.log("unregisterting service worker", registration);
registration.unregister();
});
});
} else {
navigator.serviceWorker.register('service-worker' /*
Use a reduntant str concatation to fool Parcel.
It will try to find a static ./service-worker.js
that DOES NOT exist, but it autogenerated by an extension.
*/ + '.js');
}
}
</script>
</body>
</html>