-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
156 lines (138 loc) · 4.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meitei Mayek Transliteration Tool</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 30px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
font-size: 2em;
margin-bottom: 5px;
color: #333;
}
.description {
text-align: center;
margin-bottom: 20px;
font-size: 16px;
color: #666;
/* Lighter text color for description */
}
.description.normal {
text-align: center;
margin-bottom: 20px;
font-size: 12px;
color: #666;
/* Lighter text color for description */
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
textarea {
width: 100%;
height: 120px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-family: inherit;
resize: vertical;
}
.output {
margin-top: 20px;
}
button {
display: block;
margin: 10px auto;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<header class="header">
<h1>Meitei Mayek Transliteration Tool</h1>
</header>
<div class="container">
<p class="description">This tool transliterates text from English letters to Meitei Mayek.
You can type in Manipuri using English characters, and the output is in <a
href="https://en.wikipedia.org/wiki/Meetei_Mayek_(Unicode_block)">unicode Meitei Mayek</a>.</p>
<p class="description normal">
You can type anything you want in the input box - give it a try! For example, try putting in your name to see how
cool it looks in Meitei Mayek!!
</p>
<label for="inputText">Input Text (type Manipuri using English letters, example as below):</label>
<textarea id="inputText" placeholder="Enter text to transliterate">sidi eisu meitei myek eeb heirni bu .</textarea>
<div class.output>
<label for="outputText">Output Text in Meitei Mayek:</label>
<textarea id="outputText" placeholder="Transliterated Text" readonly>ꯁꯤꯗꯤ ꯑꯩꯁꯨ ꯃꯩꯇꯩ ꯃꯌꯦꯛ ꯏꯕ ꯍꯩꯔꯅꯤ ꯕꯨ ꯫</textarea>
</div>
<div>
<p class="description normal">
You can find the source code at this <a
href="https://github.com/abhisanoujam/meitei_mayek/blob/main/meitei_mayek_transliteration.js">Github
project</a>.
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- See comment below -->
<!-- <script src="meitei_mayek_transliteration.js"></script> -->
<script>
// The below snippet is equivalent to adding the script directly, but adding random query param to avoid
// reloading issues during development and always fetch latest version.
const script = document.createElement('script');
const randomParam = Math.random().toString(36).substring(2, 15); // Generate a random string
script.src = `meitei_mayek_transliteration.js?v=${randomParam}`;
document.head.appendChild(script);
</script>
<script>
$(document).ready(function () {
$("#inputText").on('input keypress', function () {
const inputText = $(this).val();
const mmTransliterator = new MeiteiMayekTransliterator();
const transliteratedText = mmTransliterator.transliterate(inputText);
$('#outputText').val(transliteratedText);
});
$('#transliterateBtn').click(function () {
const inputText = $('#inputText').val();
const mmTransliterator = new MeiteiMayekTransliterator();
const transliteratedText = mmTransliterator.transliterate(inputText);
$('#outputText').val(transliteratedText);
});
});
</script>
<div id="sfcslj2ptm7mu2ck2dw833r9zwpwjxz7hge"></div>
<script type="text/javascript"
src="https://counter4.optistats.ovh/private/counter.js?c=slj2ptm7mu2ck2dw833r9zwpwjxz7hge&down=async"
async></script><noscript><a href="https://www.freecounterstat.com" title="visitor counter widget"><img
src="https://counter4.optistats.ovh/private/freecounterstat.php?c=slj2ptm7mu2ck2dw833r9zwpwjxz7hge" border="0"
title="visitor counter widget" alt="visitor counter widget"></a></noscript>
</body>
</html>