<!DOCTYPE html>
<html lang="en">
<head>
<title>滑动认证</title>
<style>
#dragContainer {position:absolute;top:50%%;left:50%%;transform:translate(-50%%, -50%%);display:inline-block;background:#e8e8e8;width:300px;height:33px;border:2px solid #e8e8e8;}
#dragBg {position:absolute;background-color:#7ac23c;height:100%%;}
#dragText {position:absolute;width:100%%;height:100%%;text-align:center;line-height:33px;user-select:none;-webkit-user-select:none;}
#dragHandler {position:absolute;width:40px;height:100%%;cursor:pointer;box-sizing:border-box;overflow:hidden;}
#dragHandler.dragHandlerBg {background-color:#c0c0c0;}
#dragHandler.dragHandlerBg::before {content:'»';font-size:24px;position:absolute;top:50%%;left:50%%;transform:translate(-50%%, -50%%);color:#7ac23c;}
.dragHandlerOkBg {position:absolute;border-radius:50%%;background-color:#7ac23c;display:flex;justify-content:center;align-items:center;}
.dragHandlerOkBg::before {content:'\2713';font-size:16px;color:white;}
</style>
</head>
<body>
<div>
<div id="dragContainer">
<div id="dragBg"></div>
<div id="dragText"></div>
<div id="dragHandler" class="dragHandlerBg"></div>
</div>
</div>
<script type="text/javascript" src="/slide_check_%s.js"></script>
</body>
</html>