-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (114 loc) · 7.21 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
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-76685804-6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-76685804-6');
</script>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<meta name="referrer" content="origin">
<link rel="shortcut icon" href="https://res.cloudinary.com/slowmersion/image/upload/v1547146138/favicon.ico" type="image/x-icon">
<link rel="icon" href="https://res.cloudinary.com/slowmersion/image/upload/v1547146138/favicon.ico" type="image/x-icon">
</head>
<style>
body {
padding: 2rem;
}
form {
max-width: 20rem;
textarea {
min-height: 14rem;
}
}
</style>
<body>
<div style="text-align:center;">
<link rel="stylesheet" href="/assets/css/style.css?v=804fb9bdb945fb8ad5027f94f1509e2a592f3bde">
<image src="https://res.cloudinary.com/slowmersion/image/upload/c_scale,w_256/v1547055108/pinyin-fade.png" />
<p>
<h1 style="color:#838383;">Gently Wean Yourself From Pinyin</h1>
</p>
<form style="display:inline-block;" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="KAZ9T9LL434PU" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>
</div>
<div>
<p>On Chinese webpages see the pinyin for only the characters/words you don't know. Tap to see the
definition. Pinwean will keep track of what you know and what you don't know.</p>
<p>Works on PC, MacOS, iOS, Android, etc. All browsers. If a web page doesn't work, try pasting the url into the url field at <a href="https://www.proxysite.com/">ProxySite.com/</a> then activating the bookmarklet.</p>
<p><a href="#install">Install</a> | <a href="#contact">Contact</a></p>
<h2 id="use">How to use the Pinwean bookmarklet</h2>
<ol>
<li>Go to any webpage written in Chinese.</li>
<li>Click the Pinwean bookmark and wait. Unless...</li>
<li>...if you want to only read a portion of the page, select the Chinese text you want to convert and then
click the Pinwean bookmark and wait.</li>
<li>When the conversion is finished you just start reading. If you don't know a character/word then just
click to see the pinyin. If you still don't know the word after revealing the pinyin, then click it
again to see the definition.</li>
<li>You should read Chinese everyday to increase your vocabulary and assimilate the grammar.</li>
<li>Note: If you want to follow a link, please click on the word "(link)" beside the original link. This
allows you to click on the original link to see the pinyin or definition.</li>
</ol>
<h3 id="install">How to install the Pinwean <a target="_blank" href="https://www.howtogeek.com/189358/beginner-geek-how-to-use-bookmarklets-on-any-device/">bookmarklet</a></h3>
<ol>
<li>Bookmark the web page you are on right now. (Best to save the bookmark somewhere it is easy to find. We
are going to edit it later.)</li>
<li>Fill out this form to get your customized javascript code:</li>
<li>Email: <input type="email" id='email' autocomplete="off" required></li>
<li>Username: <input type="text" id='username' autocomplete="off" required></li>
<!-- <li>Code will appear here:<BR><textarea id='code'></textarea></li> -->
<li><input type="checkbox" id="alwaysShowPinyin"> Warning: Only check this box if you want to always see the pinyin and not gradually remove the pinyin as you learn more words.</li>
<li><button class='btn' id='submit'>Generate bookmark code</button></li>
<!-- <li>If you see code in the box above it has already been copied to your clipboard.</li> -->
<li><button class='btn' id='copy' data-clipboard-text="" disabled> Copy to clipboard</li>
<li>Now, find the bookmark you saved and edit it. (Here's how to edit a bookmark in <a href="https://support.google.com/chrome/answer/188842">Chrome</a>,
<a href="https://itstillworks.com/manage-safari-bookmarks-iphone-16680.html">Safari</a>, <a href="https://support.mozilla.org/en-US/kb/bookmarks-firefox">Firefox</a></li>
<li>Paste the javascript code into the address or URL field, replacing the whole pinwean.com and everything
else with the
code in your clipboard or in the box above. Save the bookmark.</li>
<li><a href="#use">Use it to read Chinese</a>. Here is a good website to try. <a target="_blank" href="https://www.jw.org/cmn-hans/">JW.org</a></li>
</ol>
</div>
<div id="contact" style="text-align:center;">
<p><a href="https://github.com/webmagnets/pinwean/issues">Report problems</a></p>
<h2>Contact</h2>
<form style="display:inline-block;" method="POST" action="https://formspree.io/[email protected]">
<input type="email" name="email" placeholder="Your email"><BR>
<textarea name="message" placeholder="Your message"></textarea><BR>
<button type="submit">Send</button>
</form>
</div>
<script>
new ClipboardJS('.btn');
$(document).on('click','#submit',function(){
let username = document.getElementById('username').value;
let email = document.getElementById('email').value;
let alwaysShowPinyin = document.getElementById('alwaysShowPinyin').checked
if (username !== "" && email !== ""){
let code =
'javascript:(function(un,pw,py,u,i){smpinyin=py;smusername=un;smpassword=pw;var d=document;if(!d.getElementById(i)){var s=d.createElement("script");s.src="https://dl.dropboxusercontent.com/s/6g09dguwgfdr1oq/slowmersion.js";s.id="slowmersion";d.body.appendChild(s);}}("' +
username + '","' + email + '",'+ alwaysShowPinyin +'));';
//let textAreaCode = document.getElementById('code')
//textAreaCode.value = code;
//debugger
//let form = document.getElementById("codeRequest")
//textAreaCode.select();
//document.execCommand('copy');
$('#copy').attr('data-clipboard-text',code).prop('disabled',false).css('background-color','green')
//$('#submit').text('Click to copy').attr('id','copy')
//alert(
// "Ok, the javascript code has been copied to your clipboard. Go edit the bookmark and paste the code in, replacing everything in the address or URL field."
//);
} else {
alert('Please make sure you entered your email and chose a username. Try again :-)')
}
});
</script>
</body>