Compare commits
No commits in common. "6cc7f043dac9e7d8ad0f093bb4a77f1560eae406" and "dc3ef2bc9f854cfc9285b83fa693f20f884665c5" have entirely different histories.
6cc7f043da
...
dc3ef2bc9f
|
@ -1,52 +0,0 @@
|
||||||
|
|
||||||
#slider {
|
|
||||||
margin: 20px auto;
|
|
||||||
width: 200px;
|
|
||||||
height: 40px;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #dae2d0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: center;
|
|
||||||
user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#slider_bg {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #7AC23C;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#label {
|
|
||||||
width: 46px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 38px;
|
|
||||||
line-height: 38px;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
background: #fff;
|
|
||||||
z-index: 3;
|
|
||||||
cursor: move;
|
|
||||||
color: #ff9e77;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
#labelTip {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 13px;
|
|
||||||
font-family: 'Microsoft Yahei', serif;
|
|
||||||
color: #787878;
|
|
||||||
line-height: 38px;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
File diff suppressed because one or more lines are too long
|
@ -1,200 +0,0 @@
|
||||||
/**
|
|
||||||
* jquery plugin -- jquery.slideunlock.js
|
|
||||||
* Description: a slideunlock plugin based on jQuery
|
|
||||||
* Version: 1.1
|
|
||||||
* Author: Dong Yuhao
|
|
||||||
* created: March 27, 2016
|
|
||||||
*/
|
|
||||||
|
|
||||||
;(function ($,window,document,undefined) {
|
|
||||||
function SliderUnlock(elm, options, success){
|
|
||||||
var me = this;
|
|
||||||
var $elm = me.checkElm(elm) ? $(elm) : $;
|
|
||||||
success = me.checkFn(success) ? success : function(){};
|
|
||||||
|
|
||||||
var opts = {
|
|
||||||
successLabelTip: "Successfully Verified",
|
|
||||||
duration: 200,
|
|
||||||
swipestart: false,
|
|
||||||
min: 0,
|
|
||||||
max: $elm.width(),
|
|
||||||
index: 0,
|
|
||||||
isOk: false,
|
|
||||||
lableIndex: 0
|
|
||||||
};
|
|
||||||
|
|
||||||
opts = $.extend(opts, options||{});
|
|
||||||
|
|
||||||
//$elm
|
|
||||||
me.elm = $elm;
|
|
||||||
//opts
|
|
||||||
me.opts = opts;
|
|
||||||
//是否开始滑动
|
|
||||||
me.swipestart = opts.swipestart;
|
|
||||||
//最小值
|
|
||||||
me.min = opts.min;
|
|
||||||
//最大值
|
|
||||||
me.max = opts.max;
|
|
||||||
//当前滑动条所处的位置
|
|
||||||
me.index = opts.index;
|
|
||||||
//是否滑动成功
|
|
||||||
me.isOk = opts.isOk;
|
|
||||||
//滑块宽度
|
|
||||||
me.labelWidth = me.elm.find('#label').width();
|
|
||||||
//滑块背景
|
|
||||||
me.sliderBg = me.elm.find('#slider_bg');
|
|
||||||
//鼠标在滑动按钮的位置
|
|
||||||
me.lableIndex = opts.lableIndex;
|
|
||||||
//success
|
|
||||||
me.success = success;
|
|
||||||
}
|
|
||||||
|
|
||||||
SliderUnlock.prototype.init = function () {
|
|
||||||
var me = this;
|
|
||||||
|
|
||||||
me.updateView();
|
|
||||||
me.elm.find("#label").on("mousedown", function (event) {
|
|
||||||
var e = event || window.event;
|
|
||||||
me.lableIndex = e.clientX - this.offsetLeft;
|
|
||||||
me.handerIn();
|
|
||||||
}).on("mousemove", function (event) {
|
|
||||||
me.handerMove(event);
|
|
||||||
}).on("mouseup", function (event) {
|
|
||||||
me.handerOut();
|
|
||||||
}).on("mouseout", function (event) {
|
|
||||||
me.handerOut();
|
|
||||||
}).on("touchstart", function (event) {
|
|
||||||
var e = event || window.event;
|
|
||||||
me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
|
|
||||||
me.handerIn();
|
|
||||||
}).on("touchmove", function (event) {
|
|
||||||
me.handerMove(event, "mobile");
|
|
||||||
}).on("touchend", function (event) {
|
|
||||||
me.handerOut();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
SliderUnlock.prototype.getIsOk = function() {
|
|
||||||
return this.isOk;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 鼠标/手指接触滑动按钮
|
|
||||||
*/
|
|
||||||
SliderUnlock.prototype.handerIn = function () {
|
|
||||||
var me = this;
|
|
||||||
me.swipestart = true;
|
|
||||||
me.min = 0;
|
|
||||||
me.max = me.elm.width();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 鼠标/手指移出
|
|
||||||
*/
|
|
||||||
SliderUnlock.prototype.handerOut = function () {
|
|
||||||
var me = this;
|
|
||||||
//停止
|
|
||||||
me.swipestart = false;
|
|
||||||
//me.move();
|
|
||||||
if (me.index < me.max) {
|
|
||||||
me.reset();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 鼠标/手指移动
|
|
||||||
* @param event
|
|
||||||
* @param type
|
|
||||||
*/
|
|
||||||
SliderUnlock.prototype.handerMove = function (event, type) {
|
|
||||||
var me = this;
|
|
||||||
if (me.swipestart) {
|
|
||||||
event.preventDefault();
|
|
||||||
event = event || window.event;
|
|
||||||
if (type == "mobile") {
|
|
||||||
me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
|
|
||||||
} else {
|
|
||||||
me.index = event.clientX - me.lableIndex;
|
|
||||||
}
|
|
||||||
me.move();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 鼠标/手指移动过程
|
|
||||||
*/
|
|
||||||
SliderUnlock.prototype.move = function () {
|
|
||||||
var me = this;
|
|
||||||
if ((me.index + me.labelWidth) >= me.max) {
|
|
||||||
me.index = me.max - me.labelWidth -2;
|
|
||||||
//停止
|
|
||||||
me.swipestart = false;
|
|
||||||
//解锁
|
|
||||||
me.isOk = true;
|
|
||||||
}
|
|
||||||
if (me.index < 0) {
|
|
||||||
me.index = me.min;
|
|
||||||
//未解锁
|
|
||||||
me.isOk = false;
|
|
||||||
}
|
|
||||||
if (me.index+me.labelWidth+2 == me.max && me.max > 0 && me.isOk) {
|
|
||||||
//解锁默认操作
|
|
||||||
$('#label').unbind().next('#labelTip').
|
|
||||||
text(me.opts.successLabelTip).css({'color': '#fff'});
|
|
||||||
|
|
||||||
me.success();
|
|
||||||
}
|
|
||||||
me.updateView();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 更新视图
|
|
||||||
*/
|
|
||||||
SliderUnlock.prototype.updateView = function () {
|
|
||||||
var me = this;
|
|
||||||
|
|
||||||
me.sliderBg.css('width', me.index);
|
|
||||||
me.elm.find("#label").css("left", me.index + "px")
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 重置slide的起点
|
|
||||||
*/
|
|
||||||
SliderUnlock.prototype.reset = function () {
|
|
||||||
var me = this;
|
|
||||||
|
|
||||||
me.index = 0;
|
|
||||||
me.sliderBg .animate({'width':0},me.opts.duration);
|
|
||||||
me.elm.find("#label").animate({left: me.index}, me.opts.duration)
|
|
||||||
.next("#lableTip").animate({opacity: 1}, me.opts.duration);
|
|
||||||
me.updateView();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 检测元素是否存在
|
|
||||||
* @param elm
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
SliderUnlock.prototype.checkElm = function (elm) {
|
|
||||||
if($(elm).length > 0){
|
|
||||||
return true;
|
|
||||||
}else{
|
|
||||||
throw "this element does not exist.";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 检测传入参数是否是function
|
|
||||||
* @param fn
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
SliderUnlock.prototype.checkFn = function (fn) {
|
|
||||||
if(typeof fn === "function"){
|
|
||||||
return true;
|
|
||||||
}else{
|
|
||||||
throw "the param is not a function.";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window['SliderUnlock'] = SliderUnlock;
|
|
||||||
})(jQuery, window, document);
|
|
|
@ -1,33 +1,17 @@
|
||||||
{% block body %}
|
{% block body %}
|
||||||
{% if session['logged_in'] %}
|
{% if session['logged_in'] %}
|
||||||
|
|
||||||
You're logged in already! <a href="/logout">Logout</a>.
|
You're logged in already! <a href="/logout">Logout</a>.
|
||||||
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
|
||||||
<link rel="stylesheet" href="static/css/login_service.css">
|
<link rel="stylesheet" href="static/css/login_service.css">
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
|
|
||||||
<link href="static/css/slide-unlock.css" rel="stylesheet">
|
|
||||||
<script src="static/js/jquery.js"></script>
|
<script src="static/js/jquery.js"></script>
|
||||||
<script src="static/js/jquery.slideunlock.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
var slider
|
|
||||||
let username,password,password2
|
|
||||||
$(document).ready(function() {
|
|
||||||
slider = new SliderUnlock("#slider", {
|
|
||||||
successLabelTip: "验证成功"
|
|
||||||
}, function() {
|
|
||||||
|
|
||||||
});
|
|
||||||
slider.init(); // 初始化滑块解锁功能
|
|
||||||
});
|
|
||||||
|
|
||||||
function signup() {
|
function signup() {
|
||||||
// 发起 AJAX 请求来处理注册
|
let username = $("#username").val();
|
||||||
username = $("#username").val().trim();
|
let password = $("#password").val();
|
||||||
password = $("#password").val().trim();
|
let password2 = $("#password2").val();
|
||||||
password2 = $("#password2").val().trim();
|
|
||||||
|
|
||||||
// 基本表单验证
|
|
||||||
if (username === "" || password === "" || password2 === ""){
|
if (username === "" || password === "" || password2 === ""){
|
||||||
alert('输入不能为空!');
|
alert('输入不能为空!');
|
||||||
return false;
|
return false;
|
||||||
|
@ -44,15 +28,8 @@
|
||||||
alert('密码过于简单。(密码长度至少4位)');
|
alert('密码过于简单。(密码长度至少4位)');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
is_ok = slider.getIsOk();
|
$.post("/signup", {'username': username, 'password': password},
|
||||||
if(!is_ok){
|
function (response) {
|
||||||
alert('没有滑动验证');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
$.post("/signup", {
|
|
||||||
'username': username,
|
|
||||||
'password': password
|
|
||||||
}, function(response) {
|
|
||||||
if (response.status === '0') {
|
if (response.status === '0') {
|
||||||
alert('用户名'+username+'已经被注册。');
|
alert('用户名'+username+'已经被注册。');
|
||||||
window.location.href = "/signup";
|
window.location.href = "/signup";
|
||||||
|
@ -60,7 +37,7 @@
|
||||||
alert('用户名密码验证失败。');
|
alert('用户名密码验证失败。');
|
||||||
window.location.href = "/signup";
|
window.location.href = "/signup";
|
||||||
} else if (response.status === '2') {
|
} else if (response.status === '2') {
|
||||||
var f = confirm("恭喜,你已成功注册,你的用户名是" + username + '.\n点击“确认”开始使用,或点击“取消”返回首页');
|
let f = confirm("恭喜,你已成功注册,你的用户名是"+username+'.\n点击“确认”开始使用,或点击“取消”返回首页');
|
||||||
if (f) {
|
if (f) {
|
||||||
window.location.href = '/'+username+'/userpage';
|
window.location.href = '/'+username+'/userpage';
|
||||||
} else {
|
} else {
|
||||||
|
@ -69,39 +46,27 @@
|
||||||
} else if (response.status === '3') {
|
} else if (response.status === '3') {
|
||||||
alert(response.warn);
|
alert(response.warn);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
)
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<p>{{ get_flashed_messages()[0] | safe }}</p>
|
<p>{{ get_flashed_messages()[0] | safe }}</p>
|
||||||
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<section class="signin-heading">
|
<section class="signin-heading">
|
||||||
<h1>Sign up</h1>
|
<h1>Sign up</h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<form>
|
<p><input type="username" id="username" placeholder="输入用户名" class="username"></p>
|
||||||
<p><input type="text" id="username" placeholder="输入用户名" class="username"></p>
|
|
||||||
<p><input type="password" id="password" placeholder="输入密码" class="password"></p>
|
<p><input type="password" id="password" placeholder="输入密码" class="password"></p>
|
||||||
<p><input type="password" id="password2" placeholder="确认密码" class="password" ></p>
|
<p><input type="password" id="password2" placeholder="确认密码" class="password" ></p>
|
||||||
|
|
||||||
<div id="slider">
|
|
||||||
<div id="slider_bg"></div>
|
|
||||||
<span id="label">>></span> <span id="labelTip">-----滑动验证你是不是人类</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="button" class="btn" onclick="signup()">注册</button>
|
<button type="button" class="btn" onclick="signup()">注册</button>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
</div>
|
||||||
// Bind click event to the signup button
|
|
||||||
$(".btn").click(function() {
|
|
||||||
// Trigger slider unlock
|
|
||||||
var slider = new SliderUnlock("#slider");
|
|
||||||
slider.isOk();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
@ -169,6 +169,7 @@
|
||||||
<input id="selected-words2" type="hidden" value="{{ words }}">
|
<input id="selected-words2" type="hidden" value="{{ words }}">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
<label id="selected-words3" type="hidden"></label>
|
||||||
{{ yml['footer'] | safe }}
|
{{ yml['footer'] | safe }}
|
||||||
{% if yml['js']['bottom'] %}
|
{% if yml['js']['bottom'] %}
|
||||||
{% for js in yml['js']['bottom'] %}
|
{% for js in yml['js']['bottom'] %}
|
||||||
|
@ -226,6 +227,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function load_next_article() {
|
function load_next_article() {
|
||||||
$("#load_next_article").prop("disabled", true)
|
$("#load_next_article").prop("disabled", true)
|
||||||
$.ajax({
|
$.ajax({
|
||||||
|
@ -261,7 +263,6 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function update(today_article) {
|
function update(today_article) {
|
||||||
$('#user_level').html(today_article['user_level']);
|
$('#user_level').html(today_article['user_level']);
|
||||||
$('#text_level').html(today_article["text_level"]);
|
$('#text_level').html(today_article["text_level"]);
|
||||||
|
|
Loading…
Reference in New Issue