This repository has been archived by the owner on Jan 25, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mword.html
194 lines (193 loc) · 5.52 KB
/
mword.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
---
title: 背单词
comments: false
---
<!-- 下载源代码的朋友请删除上面的几行 -->
<!-- 主要方法在/js/mword.js -->
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="/css/component.css" />
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
var currentUser = MW.User.current()
$(function() {
if(currentUser) {
$("#用户信息").html("您已登录：<a href='/mword/mword-user.html'>" + currentUser.get("username") + "</a>")
}
else {
$("#用户信息").html("请<a href='/mword/mword-login.html'>登录</a> 或<a href=''>刷新</a> 否则本次默写数据无效")
}
})
</script>
<script type="text/javascript" src="/js/mword.js"></script>
<style type="text/css">
.bton {
padding:0.6rem 0.9rem;
font-size: 0.9rem;
color: rgba(0,0,0,0.7);
background-color: rgba(0,0,0,0.08);
outline:none;
border-color: rgba(0,0,0,0.2);
border-style: solid;
border-width: 1px;
border-radius: 0.3rem;
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.bton:hover {
color: rgba(0,0,0,0.8);
text-decoration: none;
background-color: rgba(0,0,0,0.2);
border-color: rgba(0,0,0,0.3);
}
@media (prefers-color-scheme: dark) {
.bton, .darkBton {
background-color: rgba(50,50,50,50.08);
border-color: rgba(255,255,255,0.2);
}
.bton:hover, .darkBton:hover {
color: rgba(255,255,255,0.4);
text-decoration: none;
background-color: rgba(0,0,0,0.2);
}
}
.play {
background: url('/images/youdao-img.png') no-repeat;
background-position: -119px 3px;
border: none;
width: 16px;
height: 25px;
outline: none;
}
.play:hover {
background-position: -90px 3px;
}
.myInput {
height: 33px;
width: 100%;
font-size: 20px;
transition: 0.5s;
outline: none;
text-align: center;
border-bottom: 2px solid #EEEEEE;
border-top: none;
border-left: none;
border-right: none;
background-color: rgba(0, 0, 0, 0);
}
.myInput:focus {
border-bottom: 3px solid #30FF30;
}
.input-wrong {
height: 33px;
width: 100%;
font-size: 20px;
transition: 0.5s;
outline: none;
text-align: center;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #FF0000;
background-color: rgba(0, 0, 0, 0);
}
.select {
outline: none;
text-align: center;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #FF7070;
background-color: rgba(0, 0, 0, 0);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>
<div style="text-align: center; padding:2rem 1rem;">
<p id="用户信息"></p>
<div>
<select class="select" id="单元" style="margin-bottom: 2px">
<option value="7b_u1">Unit 1</option>
<option value="7b_u2">Unit 2</option>
<option value="7b_u3">Unit 3</option>
<option value="7b_u4">Unit 4</option>
<option value="7b_u5">Unit 5</option>
<option value="7b_u6">Unit 6</option>
<option value="7b_u7">Unit 7</option>
<option value="7b_u8">Unit 8</option>
<option value="test">测试</option>
</select>
</div>
<div>
<span id="顶部">Loading...</span>
</div>
<div>
<input id="播放" class="play" type="button" />
</div>
<div style="margin-bottom: 15px;">
<span id="文左上" style="float: left">就快好了！ ヾ(≧▽≦*)o</span>
<span id="文右上" style="float: right">0/0</span>
</div>
<div>
<input class="myInput" type="text" id="输入" autocomplete="off" />
</div>
<div style="margin-top: 5px;">
<button type="button" id="按钮左" style="margin-right: 5px;" class="bton">Please</button>
<button type="button" id="按钮右" style="margin-left: 5px;" class="bton">wait...</button>
</div>
<div style="margin-bottom: 15px;">
<span id="文左下" style="float: left">0</span>
</div>
</div>
<hr />
<div style="text-align: center; padding:2rem 1rem;">
<div>
<span>默写选项</span>
</div>
<div>
<span><font color="red">设置一次即重默一次</font></span>
</div>
<div style="margin-top: 20px;">
<span class="input input--akira">
<input class="input__field input__field--akira" type="number" id="选项自定义提示" οnkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" />
<label class="input__label input__label--akira" for="input-helpdiy">
<span class="input__label-content input__label-content--akira">提示字数（留空为全部提示）</span>
</label>
</span>
</div>
</div>
<script type="text/javascript" src="/js/classie.js"></script>
<script type="text/javascript">
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '')
}
})
}
[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' )
}
// events:
inputEl.addEventListener( 'focus', onInputFocus )
inputEl.addEventListener( 'blur', onInputBlur )
} )
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' )
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' )
}
}
})()
</script>