ZaneYork
/
chinese-wordle-tool
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
chinese-wordle-tool/templates/index.html

138 lines
6.5 KiB
HTML
Raw Normal View History

添加前端
2022-02-10 15:00:59 +08:00
<html>
<head>
<title>Chinese Wordle Tools</title>
样式调整
2022-02-10 18:08:47 +08:00
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
交互优化
2022-02-11 09:54:17 +08:00
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
手机端简单适配
2022-02-10 17:47:46 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
添加前端
2022-02-10 15:00:59 +08:00
</head>
<body>
样式调整
2022-02-10 18:08:47 +08:00
<form id="para" class="form-horizontal container">
<div class="form-group row">
<label class="col-sm-2 col-form-label">模式</label>
添加前端
2022-02-10 15:00:59 +08:00
<div class="col-sm-8">
样式调整
2022-02-10 18:08:47 +08:00
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="mode" id="mode0" value="0" checked>
添加简单搜索模式
2022-02-11 09:19:18 +08:00
<label class="form-check-label" for="mode0">拼音1</label>
交互优化
2022-02-11 09:54:17 +08:00
</div>
<div class="form-check form-check-inline">
样式调整
2022-02-10 18:08:47 +08:00
<input class="form-check-input" type="radio" name="mode" id="mode1" value="1">
添加简单搜索模式
2022-02-11 09:19:18 +08:00
<label class="form-check-label" for="mode1">拼音2</label>
交互优化
2022-02-11 09:54:17 +08:00
</div>
<div class="form-check form-check-inline">
样式调整
2022-02-10 18:08:47 +08:00
<input class="form-check-input" type="radio" name="mode" id="mode2" value="2">
添加简单搜索模式
2022-02-11 09:19:18 +08:00
<label class="form-check-label" for="mode2">汉兜1</label>
交互优化
2022-02-11 09:54:17 +08:00
</div>
<div class="form-check form-check-inline">
样式调整
2022-02-10 18:08:47 +08:00
<input class="form-check-input" type="radio" name="mode" id="mode3" value="3">
添加简单搜索模式
2022-02-11 09:19:18 +08:00
<label class="form-check-label" for="mode3">汉兜2</label>
交互优化
2022-02-11 09:54:17 +08:00
</div>
<div class="form-check form-check-inline">
添加简单搜索模式
2022-02-11 09:19:18 +08:00
<input class="form-check-input" type="radio" name="mode" id="mode4" value="4">
<label class="form-check-label" for="mode4">文字正则</label>
交互优化
2022-02-11 09:54:17 +08:00
</div>
<div class="form-check form-check-inline">
添加简单搜索模式
2022-02-11 09:19:18 +08:00
<input class="form-check-input" type="radio" name="mode" id="mode5" value="5">
<label class="form-check-label" for="mode5">拼音正则</label>
交互优化
2022-02-11 09:54:17 +08:00
</div>
添加前端
2022-02-10 15:00:59 +08:00
</div>
</div>
样式调整
2022-02-10 18:08:47 +08:00
<div class="form-group row">
<label for="parameter" class="col-sm-2 col-form-label">参数</label>
添加前端
2022-02-10 15:00:59 +08:00
<div class="col-sm-8">
<input type="text" id="parameter" name="parameter" class="form-control" placeholder="4234">
</div>
</div>
样式调整
2022-02-10 18:08:47 +08:00
<div class="form-group row">
<label for="result" class="col-sm-2 col-form-label">结果</label>
添加前端
2022-02-10 15:00:59 +08:00
<div class="col-sm-8">
<textarea id="result" class="form-control" rows="6" readonly></textarea>
</div>
</div>
样式调整
2022-02-10 18:08:47 +08:00
<div class="form-group row">
<div class="col-sm-10">
<button id="submit" type="button" class="btn btn-primary form-control">提交</button>
添加前端
2022-02-10 15:00:59 +08:00
</div>
</div>
</form>
调整说明文本位置
2022-02-11 16:59:03 +08:00
<div class="container alert alert-secondary" role="alert">
<h4 class="alert-heading">使用说明</h4>
<hr>
<p>英文逗号分割输入和命中结果,多次尝试使用分号分割;0: 未命中,1: 部分命中, 2: 精确命中</p>
<hr>
<p>参数说明: </p>
minor fix
2022-02-11 17:04:01 +08:00
<p>拼音1： 4个数字，表示每个字的拼音位数</p>
<p>拼音2： 输入尝试状态和结果</p>
<p>汉兜1： 4个数字，表示每个字的拼音声调</p>
<p>汉兜2： 输入尝试状态和结果, 命中结果输入顺序(拼音声母韵母,汉字位置,汉字声调)</p>
调整说明文本位置
2022-02-11 16:59:03 +08:00
</div>
样式调整
2022-02-10 18:08:47 +08:00
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
minor fix
2022-02-10 18:11:57 +08:00
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
交互优化
2022-02-11 09:54:17 +08:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
添加前端
2022-02-10 15:00:59 +08:00
<script>
$(document).ready(function () {
$('input[name=mode]').on('click', function (e) {
switch ($(e.currentTarget).val()) {
case '0':
$("#parameter").attr('placeholder', '4324')
break
case '1':
$("#parameter").attr('placeholder', 'bai tou er xin,012 010 10 001')
break
case '2':
$("#parameter").attr('placeholder', '2134')
break
case '3':
优化交互，重构代码
2022-02-11 16:53:31 +08:00
$("#parameter").attr('placeholder', '各执一词,00 11 12 22 0010 1022')
添加前端
2022-02-10 15:00:59 +08:00
break
添加简单搜索模式
2022-02-11 09:19:18 +08:00
case '4':
$("#parameter").attr('placeholder', '^..之急$')
break
case '5':
$("#parameter").attr('placeholder', '^.+zhi ji$')
break
添加前端
2022-02-10 15:00:59 +08:00
}
$("#parameter").val('')
})
$('#submit').on('click', function () {
交互优化
2022-02-11 09:54:17 +08:00
$.ajax({
url: '/predict',
data: { mode: $("input[name='mode']:checked").val(), parameter: $('#parameter').val() },
success: function (result,) {
if (result && result.status === 0) {
text = result.result.map(function (item) {
return item.word + '\t' + item.pinyin
}).join('\n')
if (!text) {
$('#result').val('无匹配结果')
}
else {
$('#result').val(text)
}
修复BUG
2022-02-11 09:04:52 +08:00
}
交互优化
2022-02-11 09:54:17 +08:00
else {
$('#result').val(result.message)
修复BUG
2022-02-11 09:04:52 +08:00
}
交互优化
2022-02-11 09:54:17 +08:00
},
优化交互，重构代码
2022-02-11 16:53:31 +08:00
error: function () {
交互优化
2022-02-11 09:54:17 +08:00
$('#result').val('出错了，请检查参数')
添加前端
2022-02-10 15:00:59 +08:00
}
交互优化
2022-02-11 09:54:17 +08:00
});
添加前端
2022-02-10 15:00:59 +08:00
})
});
</script>
</body>
</html>