-
Notifications
You must be signed in to change notification settings - Fork 10
/
popup.html
120 lines (117 loc) · 4.21 KB
/
popup.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
<!DOCTYPE html>
<html>
<head lang="my">
<meta charset="UTF-8">
<title>MUA Web Unicode Converter</title>
<script src="popup.js"></script>
<script src="canvas2image.js"></script>
<style type="text/css">
.doc {
width: 604px;
margin: 0 auto;
}
canvas {
display: block;
border: 2px solid #888;
border-radius: 10px;
display: none;
}
.btn {
padding: 10px auto;
height: 30px;
margin: 10px 10px 10px 230px;
background-color: #34A7C1; color: #FFFFFF;
border: 2px solid #999999; border-radius: 10px;
cursor: pointer;
}
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
textarea { font-size: 12px; width: 335px; height: 150px; padding:7px;}
body {
width: 350px;
margin: 0 auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
p#message {
background-color: #dff0d8;
text-align: center;
border-radius: 23px;
}
</style>
</head>
<body>
<P style="text-align: right;">
<button id="close" style="width:60px; hight:60px; background: transparent; border: 0; text-align: right;">X</button>
</P>
<h2>MUA Web Unicode Converter</h2>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="muaonoffswitch" checked>
<label class="onoffswitch-label" for="muaonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<p>This extension will check web content and convert to Unicode encoded text if they are Zawgyi. </p>
<div class="doc">
<textarea id="myTextarea" placeholder="ဒီဂျစ်တယ်ခေတ်တွင် နိုင်ငံတကာသုံးစံနှုန်းများကို သုံးစွဲခြင်းဖြင့် ဘာသာစကားများကို ထိန်းသိမ်းကာကွယ်ပါ။" style="width:320px; height:70px; border: 1px solid #037; border-radius: 10px;" ></textarea>
<br>
<button id="fillText" class="btn">Text to image</button>
<br>
<canvas width="330" height="70" id="cvs"></canvas>
</div>
<div id="imgs">
</div>
<p>
PowerBY: <b>Myanmar Unicode Area</b> | <a href="http://facebook.com/groups/mmUnicode" target="blank_"> fb.com/groups/mmUnicode</a>
</p>
<script src="popup.js"></script>
</body>
</html>