├── anti-bot-verification
    ├── img
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   ├── 5.jpg
    │   ├── 6.jpg
    │   └── 7.jpg
    ├── config.php
    ├── initialize.php
    ├── verify.php
    ├── utility.php
    ├── get-image.php
    ├── anti-bot-style.css
    └── anti-bot-js.js
├── .idea
    └── vcs.xml
├── README.md
├── index.php
└── LICENSE


/anti-bot-verification/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plbin97/Antiboter-php-html-Chinese/HEAD/anti-bot-verification/img/1.jpg


--------------------------------------------------------------------------------
/anti-bot-verification/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plbin97/Antiboter-php-html-Chinese/HEAD/anti-bot-verification/img/2.jpg


--------------------------------------------------------------------------------
/anti-bot-verification/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plbin97/Antiboter-php-html-Chinese/HEAD/anti-bot-verification/img/3.jpg


--------------------------------------------------------------------------------
/anti-bot-verification/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plbin97/Antiboter-php-html-Chinese/HEAD/anti-bot-verification/img/4.jpg


--------------------------------------------------------------------------------
/anti-bot-verification/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plbin97/Antiboter-php-html-Chinese/HEAD/anti-bot-verification/img/5.jpg


--------------------------------------------------------------------------------
/anti-bot-verification/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plbin97/Antiboter-php-html-Chinese/HEAD/anti-bot-verification/img/6.jpg


--------------------------------------------------------------------------------
/anti-bot-verification/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/plbin97/Antiboter-php-html-Chinese/HEAD/anti-bot-verification/img/7.jpg


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/anti-bot-verification/config.php:
--------------------------------------------------------------------------------
1 | <?php
2 | /*
3 |  * This file is used for some configuration.
4 |  * */
5 | 
6 | // $error_allow is the error range which is accepted from the x and y coordinates which are sent from client. From 0 - 150
7 | $error_allow = 10;


--------------------------------------------------------------------------------
/anti-bot-verification/initialize.php:
--------------------------------------------------------------------------------
1 | <?php
2 | /*
3 |  * This page is used for initializing the verification.
4 |  * If someone visit this page, the verification would be initialized. 
5 |  * */
6 | require "utility.php";
7 | session_start();
8 | $_SESSION["anti_bot_verification"] = new Verification();
9 | $_SESSION["anti_bot_verified"] = false;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Antiboter PHP-HTML版本
 2 | <p>Antiboter是一个界面漂亮且方便使用的PHP后台的图片人机验证</p>
 3 | <p>Antiboter不依赖于任何前端框架 (不需要导入jQure，react或者bootstrap)</p>
 4 | <p>原生JS搭建的前端</p>
 5 | <p>支持PC键鼠以及移动端的触控屏验证</p>
 6 | 
 7 | # 演示
 8 | <p>https://www.teenet.me/verification</p>
 9 | 
10 | # 后端环境
11 | <p>php 5 +</p>
12 | <p>php-gd</p>
13 | 
14 | # 如何使用
15 | <p>首先，下载Release里面的ZIP包. </p>
16 | <p>然后，复制里面的东西到你的PHP路径里</p>
17 | <p>按照主页index.php文件里面的指引，复制其中的代码到你的页面上</p>
18 | 
19 | # 在你的PHP后端：
20 | <p>Antiboter会使用一个Session变量 $_SESSION["anti_bot_verified"]</p>
21 | <p>这个变量是一个布朗型的变量（true和false）。用户请求的数据提交到后台之后，如果这个变量为true，那么人机验证通过。反之，如果为false，说明人机验证未通过。</p>
22 | <p>例子: </p>
23 | <pre>
24 |     <code>
25 |           session_start();
26 |           if(isset($_SESSION["anti_bot_verified"])) {
27 |               if($_SESSION["anti_bot_verified"]) {
28 |                   echo "Verified";
29 |               } else {
30 |                   echo "Not verified";
31 |               }
32 |           }
33 |     </code>
34 | </pre>
35 | 
36 | # 关于显示的图片
37 | <p>你可以放你自己的jpg图片在文件夹：anti-bot-verification/img/</p>
38 | <p>在这个文件夹的图片中，文件名必须是以这种格式：1.jpg, 2.jpg, 3.jpg 等等</p>
39 | <p>图片的大小必须是宽300px，高200px (300*200)</p>
40 | 
41 | # 注意
42 | <p>不要使用任何以anti_bot开头的变量名</p>
43 | 


--------------------------------------------------------------------------------
/anti-bot-verification/verify.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 |  * This file is used for make verification.
 4 |  *
 5 |  * To verify the verification, the user must send 2 parameters and visit this page.
 6 |  *
 7 |  * First parameter "x" is the x-coordinate position of small box in large picture, usually range: 1 - 250
 8 |  * Second parameter "y" is the y-coordinate position of small box in large picture, range: 1 - 150
 9 |  *
10 |  * For example: xxx/verify.php?x=10.1&y=10.1
11 |  *
12 |  * The page display 1 means verified successful.
13 |  * The page display 0 means verified failed, and has already generate a new set of verification.
14 |  * */
15 | 
16 | // Parameter identification
17 | if (!isset($_GET["x"]) || !isset($_GET["y"])) {
18 |     die("No parameters");
19 | }
20 | if (strlen($_GET["x"]) > 20 || strlen($_GET["y"]) > 20) {
21 |     die("Parameters are too long");
22 | }
23 | if (!is_numeric($_GET["x"]) || !is_numeric($_GET["y"])) {
24 |     die("Parameters should be numbers");
25 | }
26 | 
27 | // ----------------
28 | 
29 | require "utility.php";
30 | session_start();
31 | if ($_SESSION["anti_bot_verification"] -> verify((double)$_GET["x"],(double)$_GET["y"])) {
32 |     $_SESSION["anti_bot_verified"] = true;
33 |     echo "1";
34 | }else{
35 |     $_SESSION["anti_bot_verification"] = new Verification();
36 |     $_SESSION["anti_bot_verified"] = false;
37 |     echo "0";
38 | }


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Anti-bot-verification</title>
 6 |     <!--------------------------------------------------------------------->
 7 |     <!-- 这里导入两个文件  -->
 8 |     <link href="anti-bot-verification/anti-bot-style.css" rel="stylesheet"/>
 9 |     <script type="text/javascript" src="anti-bot-verification/anti-bot-js.js"></script>
10 |     <!--------------------------------------------------------------------->
11 | </head>
12 | <script>
13 | </script>
14 | <body>
15 | <!--------------------------------------------------------------------->
16 | <!--
17 | 千万不要放置两个图像验证在同一个页面上
18 | 
19 | 如果你想要不同大小的图像验证界面，请把标签修改成：
20 | 
21 | <div id="anti_bot_frame" class="anti-bot-frame-verylarge">
22 | <div id="anti_bot_frame" class="anti-bot-frame-large">
23 | <div id="anti_bot_frame" class="anti-bot-frame-medium">
24 | <div id="anti_bot_frame" class="anti-bot-frame-small">
25 | <div id="anti_bot_frame" class="anti-bot-frame-verysmall">
26 | 
27 | 如果你想要自定义大小的话，请务必把宽高比例设置为310:240。
28 | -->
29 | 
30 | <div id="anti_bot_frame" class="anti-bot-frame-large"></div>
31 | 
32 | <!--------------------------------------------------------------------->
33 | </body>
34 | 
35 | 
36 | 
37 | <!--------------------------------------------------------------------->
38 | <!-- 在界面尾部，运行JS -->
39 | <script>anti_bot_verification_ini("anti-bot-verification");</script>
40 | <!-- 其参数 "anti-bot-verification" 是这个页面到后台目录的路径，必要时修改 -->
41 | <!--------------------------------------------------------------------->
42 | </html>
43 | 


--------------------------------------------------------------------------------
/anti-bot-verification/utility.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 |  * The utility.php stores the useful utility functions and class which would be called.
 4 |  * */
 5 | require "config.php";
 6 | function getFilesNumber ($dir) {
 7 |     /*
 8 |      * Function getFilesNumber() is used for counting how much files under a folder.
 9 |      * Parameter $directory: The directory of that folder
10 |      * Return: Number of files under that directory.
11 |      * */
12 |     $file_count = 0;
13 |     $files = glob($dir . "/*");
14 |     if ($files){
15 |         $file_count = count($files);
16 |     }
17 |     return $file_count;
18 | }
19 | 
20 | class Verification {
21 |     /*
22 |      * Class Verification is used for storing the verification information.
23 |      * The objects of this class usually would be stored in Session variable.
24 |      *
25 |      * The construction function would automatically generate the verification randomly.
26 |      *
27 |      * */
28 |     private $img;
29 |     private $x;
30 |     private $y;
31 |     private $verified;
32 | 
33 |     public function __construct() {
34 |         $this -> img = rand(1,getFilesNumber("img"));
35 |         $this -> x = rand(0,250);
36 |         $this -> y = rand(0,150);
37 |         $this -> verified = false;
38 |     }
39 |     public function getPositionX() {
40 |         /*
41 |          * function getPositionX(): Get the small box horizontal location in x-axis, from 0 - 250;
42 |          * return integer value.
43 |          * */
44 |         return $this -> x;
45 |     }
46 |     public function getPositionY() {
47 |         /*
48 |          * function getPositionY(): Get the small box vertical location in y-axis, from 0 - 150;
49 |          * return integer value.
50 |          * */
51 |         return $this -> y;
52 |     }
53 |     public function getImg() {
54 |         /*
55 |          * function getImg(): Get the image file name, and those file names are numbers;
56 |          * return integer value.
57 |          * */
58 |         return $this -> img;
59 |     }
60 |     public function isVerified() {
61 |         /*
62 |          * function isVerified(): get the verification status.
63 |          *
64 |          * return true if the verification is passed.
65 |          *
66 |          * Usually, you can also use $_SESSION["anti_bot_verified"] value to know if the verification is passed.
67 |          * Means:
68 |          *     isVerified() == $_SESSION["anti_bot_verified"]
69 |          * */
70 |         return $this -> verified;
71 |     }
72 |     public function verify($inputX,$inputY) {
73 |         /*
74 |          * function verify(): verify the X and Y position from users and return the result.
75 |          *
76 |          * para $inputX: X-coordinate of the small box. Range: 1 - 250
77 |          *
78 |          * para $inputY: verify the Y-coordinate of the small box. Range: 1 - 150
79 |          *
80 |          * return true means that the user is verified and is not a robot
81 |          *
82 |          * return false means that the verification is not passed, and the program automatically generate a new set of verification.
83 |          *
84 |          * The error range which is accepted can be configured in config.php
85 |          * */
86 |         $error = $GLOBALS["error_allow"];
87 |         if ($inputX < ($this -> x + $error) && $inputX > ($this -> x - $error) && $inputY < ($this -> y + $error) && $inputY > ($this -> y - $error)) {
88 |             $this -> verified = true;
89 |             return true;
90 |         } else {
91 |             return false;
92 |         }
93 |     }
94 | }
95 | 


--------------------------------------------------------------------------------
/anti-bot-verification/get-image.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /*
  3 |  * Page get-image.php can generate the images which is needed.
  4 |  * There are three kinds of image which can be generated, the large image(300*200) with small box(50*50), large original image, and the small image(50*50).
  5 |  * The large image(300*200) is the image with a small box(50*50)
  6 |  * The large original image is the image directly from the folder
  7 |  * The small image is the image which is appeared in the small box in the large image.
  8 |  *
  9 |  * With Get parameter "get-image.php?type=large_picture", this page would generate the large image with box.
 10 |  * With Get parameter "get-image.php?type=original_picture", this page would generate the large original image.
 11 |  * With Get parameter "get-image.php?type=small_picture", this page would generate the small image.
 12 |  * */
 13 | 
 14 | 
 15 | // parameter identification
 16 | if (!isset($_GET["type"])) {
 17 |     die("No parameter");
 18 | }
 19 | if (strlen($_GET["type"]) > 20) {
 20 |     die("Parameter is too long");
 21 | }
 22 | 
 23 | // -----------------------------
 24 | 
 25 | require "utility.php";
 26 | 
 27 | // Start Session
 28 | session_start();
 29 | // Make sure that php-gd has already installed
 30 | if (!function_exists("imagecreatefromjpeg")) {
 31 |     die("Required php-gd");
 32 | }
 33 | 
 34 | // Make sure that session variable existed
 35 | if (!isset($_SESSION["anti_bot_verification"])) {
 36 |     die("Session expired");
 37 | }
 38 | 
 39 | // Get the X and Y coordinate  from Session variables
 40 | $position_x_1 = $_SESSION["anti_bot_verification"] -> getPositionX();
 41 | $position_y_1 = $_SESSION["anti_bot_verification"] -> getPositionY();
 42 | 
 43 | // Calculate the diagonal coordinate for that square
 44 | $position_x_2 = $position_x_1 + 50;
 45 | $position_y_2 = $position_y_1 + 50;
 46 | 
 47 | // Get the image from local file. The image must be 300*200 size.
 48 | $img_path = "img/" . $_SESSION["anti_bot_verification"] -> getImg() . ".jpg";
 49 | $img = imagecreatefromjpeg($img_path) or die("No such image in that folder");
 50 | $image_size = getimagesize($img_path);
 51 | 
 52 | // Make sure that image size must be 300*200
 53 | if ($image_size[0] != 300 || $image_size[1] != 200) {
 54 |     die("image size must be 300*200");
 55 | }
 56 | 
 57 | if ($_GET["type"] == "large_picture") {  // Generate large image with box
 58 | 
 59 | 
 60 |     // Draw the square with shadow
 61 |     $i = 57;
 62 |     while ($i < 127) {
 63 |         imagerectangle($img, $position_x_1, $position_y_1, $position_x_2, $position_y_2, imagecolorallocatealpha($img, 0, 0, 0, $i));
 64 |         $position_x_1 = $position_x_1 + 1;
 65 |         $position_y_1 = $position_y_1 + 1;
 66 |         $position_x_2 = $position_x_2 - 1;
 67 |         $position_y_2 = $position_y_2 - 1;
 68 |         $i = $i + 10;
 69 |     }
 70 | 
 71 | 
 72 |     // Set header in type jpg
 73 |     header("Content-type: image/jpg");
 74 | 
 75 |     // Generate image
 76 |     imagejpeg($img);
 77 | 
 78 |     // Release memory
 79 |     imagedestroy($img);
 80 | 
 81 | }else if($_GET["type"] == "small_picture"){ // Generate small image
 82 | 
 83 |     // Create a small image with height 50 and width 50
 84 |     $img_small = imagecreatetruecolor(50,50);
 85 | 
 86 |     // Copy one part of the large image (the image with size 300*200) to small part of image
 87 |     imagecopy($img_small,$img,0,0,$position_x_1,$position_y_1,50,50);
 88 | 
 89 |     // Change brightness of the picture
 90 |     imagefilter($img_small, IMG_FILTER_BRIGHTNESS, 1000);
 91 | 
 92 |     $position_1= 0;
 93 |     $position_2 = 50;
 94 | 
 95 |     // Adding some blur in to small picture
 96 |     for ($i = 50; $i < 120; $i = $i + 6) {
 97 |         imagerectangle($img_small, $position_1, $position_1, $position_2, $position_2, imagecolorallocatealpha($img_small, 255, 255, 255, $i));
 98 |         $position_1 = $position_1 + 1;
 99 |         $position_2 = $position_2 - 1;
100 |     }
101 | 
102 |     // Set header in type jpg
103 |     header("Content-type: image/jpg");
104 | 
105 |     // Generate image
106 |     imagejpeg($img_small);
107 | 
108 |     // Release memory
109 |     imagedestroy($img_small);
110 |     imagedestroy($img);
111 | } else if($_GET["type"] == "original_picture") {  // Generate original image
112 |     // Set header in type jpg
113 |     header("Content-type: image/jpg");
114 | 
115 |     // Generate image
116 |     imagejpeg($img);
117 | 
118 |     // Release memory
119 |     imagedestroy($img);
120 | } else {
121 | 
122 |     // If there is no parameter matched
123 |     // Destroy the image
124 |     imagedestroy($img);
125 |     echo "Invalid parameters";
126 | }


--------------------------------------------------------------------------------
/anti-bot-verification/anti-bot-style.css:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------------------*/
  2 | /*Define the interface size*/
  3 | 
  4 | .anti-bot-frame-verylarge {
  5 |     width: 310px;
  6 |     height: 240px;
  7 |     position: relative;
  8 |     margin-left: 100px;
  9 |     margin-top: 100px;
 10 |     font-size: 15px;
 11 | }
 12 | 
 13 | .anti-bot-frame-large {
 14 |     width: 250px;
 15 |     height: 193.55px;
 16 |     position: relative;
 17 |     margin-left: 100px;
 18 |     margin-top: 100px;
 19 |     font-size: 13px;
 20 | }
 21 | 
 22 | .anti-bot-frame-medium {
 23 |     width: 200px;
 24 |     height: 154.84px;
 25 |     position: relative;
 26 |     margin-left: 100px;
 27 |     margin-top: 100px;
 28 | }
 29 | 
 30 | .anti-bot-frame-small {
 31 |     width: 150px;
 32 |     height: 116.13px;
 33 |     position: relative;
 34 |     margin-left: 100px;
 35 |     margin-top: 100px;
 36 | }
 37 | 
 38 | .anti-bot-frame-verysmall {
 39 |     width: 110px;
 40 |     height: 85.16px;
 41 |     position: relative;
 42 |     margin-left: 100px;
 43 |     margin-top: 100px;
 44 | }
 45 | 
 46 | 
 47 | /*-----------------------------------------------*/
 48 | 
 49 | /*Defined the interface's elements size in percentage*/
 50 | 
 51 | #anti_bot_frame {
 52 |     background-color: #FFF;
 53 | }
 54 | 
 55 | #anti_bot_large_picture {
 56 |     width: 96.77%;
 57 |     height: 83.33%;
 58 |     position: absolute;
 59 |     bottom: 2%;
 60 |     left: 1.61%;
 61 |     z-index: 1;
 62 |     display: block;
 63 | }
 64 | 
 65 | #anti_bot_small_picture {
 66 |     width: 16.13%;
 67 |     height: 20.83%;
 68 |     position: absolute;
 69 |     top: 10%;
 70 |     left: 3%;
 71 |     box-shadow: 0 0 4px 2px #555;
 72 |     z-index: 2;
 73 |     display: block;
 74 | }
 75 | 
 76 | #anti_bot_loading_area {
 77 |     position: absolute;
 78 |     height: 100%;
 79 |     width: 100%;
 80 |     z-index: 3;
 81 |     background-color: inherit;
 82 |     opacity: 0;
 83 | }
 84 | 
 85 | #anti_bot_tick_area {
 86 |     position: absolute;
 87 |     height: 100%;
 88 |     width: 100%;
 89 |     z-index: 3;
 90 |     background-color: inherit;
 91 |     opacity: 0;
 92 | }
 93 | 
 94 | /*-----------------------------------------------*/
 95 | 
 96 | /*Defined the loading animation*/
 97 | 
 98 | @keyframes anti_bot_loading_key_frame {
 99 |     0% {
100 |         top: 50%;
101 |         left: 50%;
102 |         width: 0;
103 |         height: 0;
104 |         opacity: 1;
105 |     }
106 |     100% {
107 |         top: 0;
108 |         left: 11.29%;
109 |         width: 77.42%;
110 |         height: 100%;
111 |         opacity: 0;
112 |     }
113 | }
114 | 
115 | .anti_bot_loading_circle div {
116 |     box-sizing: content-box;
117 |     position: absolute;
118 |     border-width: 4px;
119 |     border-style: solid;
120 |     opacity: 1;
121 |     border-radius: 50%;
122 |     animation: anti_bot_loading_key_frame 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
123 | }
124 | 
125 | .anti_bot_loading_circle div:nth-child(1) {
126 |     border-color: #AAA;
127 | }
128 | 
129 | .anti_bot_loading_circle div:nth-child(2) {
130 |     border-color: #777;
131 |     animation-delay: -0.5s;
132 | }
133 | 
134 | .anti_bot_loading_circle {
135 |     width: 100% !important;
136 |     height: 100% !important;
137 |     transform: translate(-100%, -100%) scale(1) translate(100%, 100%);
138 | }
139 | 
140 | /*-----------------------------------------------*/
141 | 
142 | /*Defined the refresh button, which is created by css*/
143 | 
144 | .anti-bot-loading-framework-large {
145 |     position: absolute;
146 |     top: 0;
147 |     left: 11.29%;
148 |     width: 77.42%;
149 |     height: 100%;
150 |     background-color: inherit;
151 |     transition: 0.2s;
152 | }
153 | 
154 | .anti-bot-loading-framework {
155 |     position: absolute;
156 |     top: 2%;
157 |     right: 2%;
158 |     width: 7.74%;
159 |     height: 10%;
160 |     background-color: inherit;
161 |     transition: 0.2s;
162 | }
163 | 
164 | .anti-bot-loading-framework:hover {
165 |     transform: scale(1.2);
166 | }
167 | 
168 | .anti-bot-loading-framework-large:hover {
169 |     transform: scale(1.2);
170 | }
171 | 
172 | .anti-bot-loading-large-circle {
173 |     position: relative;
174 |     top: 15%;
175 |     left: 15%;
176 |     height: 70%;
177 |     width: 70%;
178 |     background-color: #AAA;
179 |     border-radius: 50%;
180 |     z-index: 1;
181 | }
182 | 
183 | .anti-bot-loading-small-circle {
184 |     position: relative;
185 |     top: -45%;
186 |     left: 25%;
187 |     height: 50%;
188 |     width: 50%;
189 |     background-color: inherit;
190 |     z-index: 2;
191 |     border-radius: 50%;
192 | }
193 | 
194 | .anti-bot-loading-cover-1 {
195 |     position: relative;
196 |     top: -87.5%;
197 |     left: 57.25%;
198 |     height: 35%;
199 |     width: 35%;
200 |     border-top-right-radius: 90%;
201 |     background-color: inherit;
202 |     z-index: 3;
203 |     transform: rotate(45deg);
204 | }
205 | 
206 | .anti-bot-loading-arror {
207 |     position: relative;
208 |     background-color: #AAA;
209 |     top: -133%;
210 |     left: 65%;
211 |     height: 25%;
212 |     width: 20%;
213 |     transform: rotate(45deg);
214 |     z-index: 4;
215 | }
216 | 
217 | .anti-bot-loading-cover-2 {
218 |     position: relative;
219 |     background-color: inherit;
220 |     top: -165%;
221 |     left: 78%;
222 |     height: 28%;
223 |     width: 15%;
224 |     z-index: 5;
225 |     transform: rotate(-10.01deg);
226 | }
227 | 
228 | .anti-bot-loading-cover-3 {
229 |     position: relative;
230 |     background-color: inherit;
231 |     top: -177%;
232 |     left: 60%;
233 |     height: 28%;
234 |     width: 15%;
235 |     z-index: 5;
236 |     transform: rotate(-79.99deg);
237 | }
238 | 
239 | /*-----------------------------------------------*/
240 | 
241 | /*Defined the huge tick after verifying*/
242 | 
243 | .anti-bot-tick-framework{
244 |     position: absolute;
245 |     left: 11.29%;
246 |     height: 100%;
247 |     width: 77.42%;
248 |     background-color: #FFF;
249 | }
250 | .anti-bot-tick-left {
251 |     position: absolute;
252 |     height: 30%;
253 |     width: 6%;
254 |     background-color: #28a745;
255 |     z-index: 1;
256 |     top: 40%;
257 |     left: 35%;
258 |     transform: rotate(-45deg);
259 | }
260 | .anti-bot-tick-right {
261 |     position: absolute;
262 |     height: 50%;
263 |     width: 6%;
264 |     background-color: #28a745;
265 |     z-index: 2;
266 |     left: 60%;
267 |     top: 23%;
268 |     transform: rotate(45deg);
269 | }
270 | .anti-bot-tick-cover {
271 |     position: absolute;
272 |     right: 0;
273 |     height: 100%;
274 |     background-color: inherit;
275 |     z-index: 3;
276 |     transition: 1s;
277 |     animation: anti-bot-tick-cover-translate 2s;
278 |     animation-fill-mode: forwards;
279 | }
280 | @keyframes anti-bot-tick-cover-translate {
281 |     0% {
282 |         width: 100%;
283 |     }
284 |     100% {
285 |         width: 0%;
286 |     }
287 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | Mozilla Public License Version 2.0
  2 | ==================================
  3 | 
  4 | 1. Definitions
  5 | --------------
  6 | 
  7 | 1.1. "Contributor"
  8 |     means each individual or legal entity that creates, contributes to
  9 |     the creation of, or owns Covered Software.
 10 | 
 11 | 1.2. "Contributor Version"
 12 |     means the combination of the Contributions of others (if any) used
 13 |     by a Contributor and that particular Contributor's Contribution.
 14 | 
 15 | 1.3. "Contribution"
 16 |     means Covered Software of a particular Contributor.
 17 | 
 18 | 1.4. "Covered Software"
 19 |     means Source Code Form to which the initial Contributor has attached
 20 |     the notice in Exhibit A, the Executable Form of such Source Code
 21 |     Form, and Modifications of such Source Code Form, in each case
 22 |     including portions thereof.
 23 | 
 24 | 1.5. "Incompatible With Secondary Licenses"
 25 |     means
 26 | 
 27 |     (a) that the initial Contributor has attached the notice described
 28 |         in Exhibit B to the Covered Software; or
 29 | 
 30 |     (b) that the Covered Software was made available under the terms of
 31 |         version 1.1 or earlier of the License, but not also under the
 32 |         terms of a Secondary License.
 33 | 
 34 | 1.6. "Executable Form"
 35 |     means any form of the work other than Source Code Form.
 36 | 
 37 | 1.7. "Larger Work"
 38 |     means a work that combines Covered Software with other material, in
 39 |     a separate file or files, that is not Covered Software.
 40 | 
 41 | 1.8. "License"
 42 |     means this document.
 43 | 
 44 | 1.9. "Licensable"
 45 |     means having the right to grant, to the maximum extent possible,
 46 |     whether at the time of the initial grant or subsequently, any and
 47 |     all of the rights conveyed by this License.
 48 | 
 49 | 1.10. "Modifications"
 50 |     means any of the following:
 51 | 
 52 |     (a) any file in Source Code Form that results from an addition to,
 53 |         deletion from, or modification of the contents of Covered
 54 |         Software; or
 55 | 
 56 |     (b) any new file in Source Code Form that contains any Covered
 57 |         Software.
 58 | 
 59 | 1.11. "Patent Claims" of a Contributor
 60 |     means any patent claim(s), including without limitation, method,
 61 |     process, and apparatus claims, in any patent Licensable by such
 62 |     Contributor that would be infringed, but for the grant of the
 63 |     License, by the making, using, selling, offering for sale, having
 64 |     made, import, or transfer of either its Contributions or its
 65 |     Contributor Version.
 66 | 
 67 | 1.12. "Secondary License"
 68 |     means either the GNU General Public License, Version 2.0, the GNU
 69 |     Lesser General Public License, Version 2.1, the GNU Affero General
 70 |     Public License, Version 3.0, or any later versions of those
 71 |     licenses.
 72 | 
 73 | 1.13. "Source Code Form"
 74 |     means the form of the work preferred for making modifications.
 75 | 
 76 | 1.14. "You" (or "Your")
 77 |     means an individual or a legal entity exercising rights under this
 78 |     License. For legal entities, "You" includes any entity that
 79 |     controls, is controlled by, or is under common control with You. For
 80 |     purposes of this definition, "control" means (a) the power, direct
 81 |     or indirect, to cause the direction or management of such entity,
 82 |     whether by contract or otherwise, or (b) ownership of more than
 83 |     fifty percent (50%) of the outstanding shares or beneficial
 84 |     ownership of such entity.
 85 | 
 86 | 2. License Grants and Conditions
 87 | --------------------------------
 88 | 
 89 | 2.1. Grants
 90 | 
 91 | Each Contributor hereby grants You a world-wide, royalty-free,
 92 | non-exclusive license:
 93 | 
 94 | (a) under intellectual property rights (other than patent or trademark)
 95 |     Licensable by such Contributor to use, reproduce, make available,
 96 |     modify, display, perform, distribute, and otherwise exploit its
 97 |     Contributions, either on an unmodified basis, with Modifications, or
 98 |     as part of a Larger Work; and
 99 | 
100 | (b) under Patent Claims of such Contributor to make, use, sell, offer
101 |     for sale, have made, import, and otherwise transfer either its
102 |     Contributions or its Contributor Version.
103 | 
104 | 2.2. Effective Date
105 | 
106 | The licenses granted in Section 2.1 with respect to any Contribution
107 | become effective for each Contribution on the date the Contributor first
108 | distributes such Contribution.
109 | 
110 | 2.3. Limitations on Grant Scope
111 | 
112 | The licenses granted in this Section 2 are the only rights granted under
113 | this License. No additional rights or licenses will be implied from the
114 | distribution or licensing of Covered Software under this License.
115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
116 | Contributor:
117 | 
118 | (a) for any code that a Contributor has removed from Covered Software;
119 |     or
120 | 
121 | (b) for infringements caused by: (i) Your and any other third party's
122 |     modifications of Covered Software, or (ii) the combination of its
123 |     Contributions with other software (except as part of its Contributor
124 |     Version); or
125 | 
126 | (c) under Patent Claims infringed by Covered Software in the absence of
127 |     its Contributions.
128 | 
129 | This License does not grant any rights in the trademarks, service marks,
130 | or logos of any Contributor (except as may be necessary to comply with
131 | the notice requirements in Section 3.4).
132 | 
133 | 2.4. Subsequent Licenses
134 | 
135 | No Contributor makes additional grants as a result of Your choice to
136 | distribute the Covered Software under a subsequent version of this
137 | License (see Section 10.2) or under the terms of a Secondary License (if
138 | permitted under the terms of Section 3.3).
139 | 
140 | 2.5. Representation
141 | 
142 | Each Contributor represents that the Contributor believes its
143 | Contributions are its original creation(s) or it has sufficient rights
144 | to grant the rights to its Contributions conveyed by this License.
145 | 
146 | 2.6. Fair Use
147 | 
148 | This License is not intended to limit any rights You have under
149 | applicable copyright doctrines of fair use, fair dealing, or other
150 | equivalents.
151 | 
152 | 2.7. Conditions
153 | 
154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
155 | in Section 2.1.
156 | 
157 | 3. Responsibilities
158 | -------------------
159 | 
160 | 3.1. Distribution of Source Form
161 | 
162 | All distribution of Covered Software in Source Code Form, including any
163 | Modifications that You create or to which You contribute, must be under
164 | the terms of this License. You must inform recipients that the Source
165 | Code Form of the Covered Software is governed by the terms of this
166 | License, and how they can obtain a copy of this License. You may not
167 | attempt to alter or restrict the recipients' rights in the Source Code
168 | Form.
169 | 
170 | 3.2. Distribution of Executable Form
171 | 
172 | If You distribute Covered Software in Executable Form then:
173 | 
174 | (a) such Covered Software must also be made available in Source Code
175 |     Form, as described in Section 3.1, and You must inform recipients of
176 |     the Executable Form how they can obtain a copy of such Source Code
177 |     Form by reasonable means in a timely manner, at a charge no more
178 |     than the cost of distribution to the recipient; and
179 | 
180 | (b) You may distribute such Executable Form under the terms of this
181 |     License, or sublicense it under different terms, provided that the
182 |     license for the Executable Form does not attempt to limit or alter
183 |     the recipients' rights in the Source Code Form under this License.
184 | 
185 | 3.3. Distribution of a Larger Work
186 | 
187 | You may create and distribute a Larger Work under terms of Your choice,
188 | provided that You also comply with the requirements of this License for
189 | the Covered Software. If the Larger Work is a combination of Covered
190 | Software with a work governed by one or more Secondary Licenses, and the
191 | Covered Software is not Incompatible With Secondary Licenses, this
192 | License permits You to additionally distribute such Covered Software
193 | under the terms of such Secondary License(s), so that the recipient of
194 | the Larger Work may, at their option, further distribute the Covered
195 | Software under the terms of either this License or such Secondary
196 | License(s).
197 | 
198 | 3.4. Notices
199 | 
200 | You may not remove or alter the substance of any license notices
201 | (including copyright notices, patent notices, disclaimers of warranty,
202 | or limitations of liability) contained within the Source Code Form of
203 | the Covered Software, except that You may alter any license notices to
204 | the extent required to remedy known factual inaccuracies.
205 | 
206 | 3.5. Application of Additional Terms
207 | 
208 | You may choose to offer, and to charge a fee for, warranty, support,
209 | indemnity or liability obligations to one or more recipients of Covered
210 | Software. However, You may do so only on Your own behalf, and not on
211 | behalf of any Contributor. You must make it absolutely clear that any
212 | such warranty, support, indemnity, or liability obligation is offered by
213 | You alone, and You hereby agree to indemnify every Contributor for any
214 | liability incurred by such Contributor as a result of warranty, support,
215 | indemnity or liability terms You offer. You may include additional
216 | disclaimers of warranty and limitations of liability specific to any
217 | jurisdiction.
218 | 
219 | 4. Inability to Comply Due to Statute or Regulation
220 | ---------------------------------------------------
221 | 
222 | If it is impossible for You to comply with any of the terms of this
223 | License with respect to some or all of the Covered Software due to
224 | statute, judicial order, or regulation then You must: (a) comply with
225 | the terms of this License to the maximum extent possible; and (b)
226 | describe the limitations and the code they affect. Such description must
227 | be placed in a text file included with all distributions of the Covered
228 | Software under this License. Except to the extent prohibited by statute
229 | or regulation, such description must be sufficiently detailed for a
230 | recipient of ordinary skill to be able to understand it.
231 | 
232 | 5. Termination
233 | --------------
234 | 
235 | 5.1. The rights granted under this License will terminate automatically
236 | if You fail to comply with any of its terms. However, if You become
237 | compliant, then the rights granted under this License from a particular
238 | Contributor are reinstated (a) provisionally, unless and until such
239 | Contributor explicitly and finally terminates Your grants, and (b) on an
240 | ongoing basis, if such Contributor fails to notify You of the
241 | non-compliance by some reasonable means prior to 60 days after You have
242 | come back into compliance. Moreover, Your grants from a particular
243 | Contributor are reinstated on an ongoing basis if such Contributor
244 | notifies You of the non-compliance by some reasonable means, this is the
245 | first time You have received notice of non-compliance with this License
246 | from such Contributor, and You become compliant prior to 30 days after
247 | Your receipt of the notice.
248 | 
249 | 5.2. If You initiate litigation against any entity by asserting a patent
250 | infringement claim (excluding declaratory judgment actions,
251 | counter-claims, and cross-claims) alleging that a Contributor Version
252 | directly or indirectly infringes any patent, then the rights granted to
253 | You by any and all Contributors for the Covered Software under Section
254 | 2.1 of this License shall terminate.
255 | 
256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all
257 | end user license agreements (excluding distributors and resellers) which
258 | have been validly granted by You or Your distributors under this License
259 | prior to termination shall survive termination.
260 | 
261 | ************************************************************************
262 | *                                                                      *
263 | *  6. Disclaimer of Warranty                                           *
264 | *  -------------------------                                           *
265 | *                                                                      *
266 | *  Covered Software is provided under this License on an "as is"       *
267 | *  basis, without warranty of any kind, either expressed, implied, or  *
268 | *  statutory, including, without limitation, warranties that the       *
269 | *  Covered Software is free of defects, merchantable, fit for a        *
270 | *  particular purpose or non-infringing. The entire risk as to the     *
271 | *  quality and performance of the Covered Software is with You.        *
272 | *  Should any Covered Software prove defective in any respect, You     *
273 | *  (not any Contributor) assume the cost of any necessary servicing,   *
274 | *  repair, or correction. This disclaimer of warranty constitutes an   *
275 | *  essential part of this License. No use of any Covered Software is   *
276 | *  authorized under this License except under this disclaimer.         *
277 | *                                                                      *
278 | ************************************************************************
279 | 
280 | ************************************************************************
281 | *                                                                      *
282 | *  7. Limitation of Liability                                          *
283 | *  --------------------------                                          *
284 | *                                                                      *
285 | *  Under no circumstances and under no legal theory, whether tort      *
286 | *  (including negligence), contract, or otherwise, shall any           *
287 | *  Contributor, or anyone who distributes Covered Software as          *
288 | *  permitted above, be liable to You for any direct, indirect,         *
289 | *  special, incidental, or consequential damages of any character      *
290 | *  including, without limitation, damages for lost profits, loss of    *
291 | *  goodwill, work stoppage, computer failure or malfunction, or any    *
292 | *  and all other commercial damages or losses, even if such party      *
293 | *  shall have been informed of the possibility of such damages. This   *
294 | *  limitation of liability shall not apply to liability for death or   *
295 | *  personal injury resulting from such party's negligence to the       *
296 | *  extent applicable law prohibits such limitation. Some               *
297 | *  jurisdictions do not allow the exclusion or limitation of           *
298 | *  incidental or consequential damages, so this exclusion and          *
299 | *  limitation may not apply to You.                                    *
300 | *                                                                      *
301 | ************************************************************************
302 | 
303 | 8. Litigation
304 | -------------
305 | 
306 | Any litigation relating to this License may be brought only in the
307 | courts of a jurisdiction where the defendant maintains its principal
308 | place of business and such litigation shall be governed by laws of that
309 | jurisdiction, without reference to its conflict-of-law provisions.
310 | Nothing in this Section shall prevent a party's ability to bring
311 | cross-claims or counter-claims.
312 | 
313 | 9. Miscellaneous
314 | ----------------
315 | 
316 | This License represents the complete agreement concerning the subject
317 | matter hereof. If any provision of this License is held to be
318 | unenforceable, such provision shall be reformed only to the extent
319 | necessary to make it enforceable. Any law or regulation which provides
320 | that the language of a contract shall be construed against the drafter
321 | shall not be used to construe this License against a Contributor.
322 | 
323 | 10. Versions of the License
324 | ---------------------------
325 | 
326 | 10.1. New Versions
327 | 
328 | Mozilla Foundation is the license steward. Except as provided in Section
329 | 10.3, no one other than the license steward has the right to modify or
330 | publish new versions of this License. Each version will be given a
331 | distinguishing version number.
332 | 
333 | 10.2. Effect of New Versions
334 | 
335 | You may distribute the Covered Software under the terms of the version
336 | of the License under which You originally received the Covered Software,
337 | or under the terms of any subsequent version published by the license
338 | steward.
339 | 
340 | 10.3. Modified Versions
341 | 
342 | If you create software not governed by this License, and you want to
343 | create a new license for such software, you may create and use a
344 | modified version of this License if you rename the license and remove
345 | any references to the name of the license steward (except to note that
346 | such modified license differs from this License).
347 | 
348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary
349 | Licenses
350 | 
351 | If You choose to distribute Source Code Form that is Incompatible With
352 | Secondary Licenses under the terms of this version of the License, the
353 | notice described in Exhibit B of this License must be attached.
354 | 
355 | Exhibit A - Source Code Form License Notice
356 | -------------------------------------------
357 | 
358 |   This Source Code Form is subject to the terms of the Mozilla Public
359 |   License, v. 2.0. If a copy of the MPL was not distributed with this
360 |   file, You can obtain one at http://mozilla.org/MPL/2.0/.
361 | 
362 | If it is not possible or desirable to put the notice in a particular
363 | file, then You may include the notice in a location (such as a LICENSE
364 | file in a relevant directory) where a recipient would be likely to look
365 | for such a notice.
366 | 
367 | You may add additional accurate notices of copyright ownership.
368 | 
369 | Exhibit B - "Incompatible With Secondary Licenses" Notice
370 | ---------------------------------------------------------
371 | 
372 |   This Source Code Form is "Incompatible With Secondary Licenses", as
373 |   defined by the Mozilla Public License, v. 2.0.
374 | 


--------------------------------------------------------------------------------
/anti-bot-verification/anti-bot-js.js:
--------------------------------------------------------------------------------
  1 | function anti_bot_verification_ini(path) {
  2 |     /*
  3 |     Function anti_bot_verification_ini(): initialize the verification.
  4 |     Para path: the path to php back-end folder.
  5 |     * */
  6 |     anti_bot_verification_path = path;
  7 |     var req = new XMLHttpRequest();
  8 |     req.onreadystatechange = function () {
  9 |         if (this.readyState === 4 && this.status === 200) {
 10 |             anti_bot_preload();
 11 |         }
 12 |     };
 13 |     req.open("GET", anti_bot_verification_path + "/initialize.php", true);
 14 |     req.send();
 15 | }
 16 | 
 17 | 
 18 | function anti_bot_preload() {
 19 |     /*
 20 |     Function anti_bot_preload(): preload the pictures and show the pictures.
 21 |     * */
 22 | 
 23 |     // The innerHTML text for reload icon:
 24 |     anti_bot_icon = "<div class=\"anti-bot-loading-large-circle\"></div><div class=\"anti-bot-loading-small-circle\"></div><div class=\"anti-bot-loading-cover-1\"></div><div class=\"anti-bot-loading-arror\"></div><div class=\"anti-bot-loading-cover-2\"></div><div class=\"anti-bot-loading-cover-3\"></div>";
 25 | 
 26 |     // Display loading animation
 27 |     anti_bot_start_loading_status(null);
 28 | 
 29 |     // Prepare the main(large) picture for verification
 30 |     anti_bot_large_picture = new Image();
 31 |     anti_bot_large_picture.src = anti_bot_verification_path + "/get-image.php?type=large_picture";
 32 |     anti_bot_large_picture.setAttribute("id", "anti_bot_large_picture");
 33 |     anti_bot_large_picture.setAttribute("draggable", "false");
 34 |     anti_bot_large_picture.style.boxShadow = "0 0 2px 2px #aaa";
 35 |     anti_bot_large_picture.style.opacity = 0;
 36 |     anti_bot_large_picture.onload = function () {   // Once the main(large) picture is loaded, this function would be executed
 37 |         // Prepare for the small picture
 38 |         anti_bot_small_picture = new Image();
 39 |         anti_bot_small_picture.src = anti_bot_verification_path + "/get-image.php?type=small_picture";
 40 |         anti_bot_small_picture.setAttribute("id", "anti_bot_small_picture");
 41 |         anti_bot_small_picture.setAttribute("draggable", "false");
 42 |         anti_bot_small_picture.setAttribute("unselectable", "on");
 43 |         anti_bot_small_picture.style.opacity = 0;
 44 |         anti_bot_small_picture.onload = function () {   // Once the small picture is loaded, this function would be executed
 45 |             var frame = document.getElementById("anti_bot_frame");
 46 | 
 47 |             // Stop loading animation
 48 |             anti_bot_end_loading_status(function () {   // Once stoped the animation, this function would be executed.
 49 | 
 50 |                 // -----------------------------------------------------------------------
 51 |                 // Build the verification user interface, at the meantime, everthing is transparent in this process
 52 |                 frame.style.boxShadow = "0 0 2px 2px #AAA";
 53 |                 var icon = document.createElement("div");
 54 |                 icon.setAttribute("class", "anti-bot-loading-framework");
 55 |                 icon.setAttribute("id", "anti-bot-loading-framework");
 56 |                 icon.innerHTML = anti_bot_icon;
 57 |                 icon.style.opacity = 0;
 58 |                 icon.setAttribute("onclick", "anti_bot_reload()");
 59 |                 frame.appendChild(icon);
 60 |                 frame.appendChild(anti_bot_large_picture);
 61 |                 frame.appendChild(anti_bot_small_picture);
 62 |                 anti_bot_smallpic_ini_position = {
 63 |                     left: anti_bot_small_picture.offsetLeft,
 64 |                     top: anti_bot_small_picture.offsetTop
 65 |                 };
 66 | 
 67 |                 // Start monitoring the mouse event to small picture
 68 |                 anti_bot_start_mouse_monitor();
 69 |                 anti_bot_start_touchpoint_monitor();
 70 | 
 71 |                 // --------------------------------------------------------------
 72 |                 // Finished building the interface, then the program start to appear the interface (Change opacity)
 73 |                 var frame_opacity = 0;
 74 |                 appear_frame();
 75 | 
 76 |                 function appear_frame() {
 77 |                     frame_opacity = frame_opacity + 0.05;
 78 |                     anti_bot_large_picture.style.opacity = frame_opacity;
 79 |                     anti_bot_small_picture.style.opacity = frame_opacity * 0.7;
 80 |                     icon.style.opacity = frame_opacity;
 81 |                     if (frame_opacity < 1) {
 82 |                         window.requestAnimationFrame(appear_frame);
 83 |                     }
 84 |                 }
 85 | 
 86 |                 // Now, the verification interface is ready to use.
 87 |             });
 88 |         }
 89 |     }
 90 | }
 91 | 
 92 | 
 93 | function anti_bot_start_mouse_monitor() {
 94 |     /*
 95 |     Function anti_bot_start_mouse_monitor(): Start the mouse monitoring for small picture
 96 |     Before calling this function, make sure that the interface of verification is loaded.
 97 |     * */
 98 | 
 99 |     // Make pictures unselectable.
100 |     document.getElementById("anti_bot_frame").onselectstart = function () {
101 |         return false;
102 |     };
103 | 
104 |     document.getElementById("anti_bot_small_picture").onmousedown = function (ev) {
105 |         // Execute if the small picture is clicked
106 |         // ----------------------------------------------
107 |         // Change the shadow of the picture
108 |         var frame = document.getElementById("anti_bot_frame");
109 |         anti_bot_shadow_change(frame, 2, 0, 0.2, "#AAA", function () {
110 |             frame.style.boxShadow = "0 0 0 0";
111 |         });
112 |         var small_pic = document.getElementById("anti_bot_small_picture");
113 |         var large_picture = document.getElementById("anti_bot_large_picture");
114 |         anti_bot_shadow_change(large_picture, 2, 0, 0.2, "#AAA", function () {
115 |             large_picture.style.boxShadow = "0 0 0 0";
116 |         });
117 | 
118 |         // --------------------------------------------
119 |         // get the distance from the small picture borders to the center of the mouse
120 |         var mouse_smallpic_distance_x = ev.clientX - small_pic.offsetLeft;
121 |         var mouse_smallpic_distance_y = ev.clientY - small_pic.offsetTop;
122 | 
123 |         // ---------------------------------------------
124 |         document.onmousemove = function (ev) {
125 |             // Execute if the mouse is moving.
126 |             // The small picture would change its location and tracking on the mouse.
127 |             small_pic.style.top = ev.clientY - mouse_smallpic_distance_y + "px";
128 |             small_pic.style.left = ev.clientX - mouse_smallpic_distance_x + "px";
129 |         };
130 | 
131 |         document.onmouseup = function (ev) {
132 |             // Execute if the mouse is released:
133 |             // --------------------------------------------
134 |             document.onmousemove = null;
135 |             var large_picture_coordinate = anti_bot_getCoordinateByElement(large_picture);
136 | 
137 |             // Start verification if the small picture is placed in the large picture
138 |             if (ev.clientY > large_picture_coordinate.top && ev.clientY < large_picture_coordinate.bottom && ev.clientX > large_picture_coordinate.left && ev.clientX < large_picture_coordinate.right) {
139 |                 // -----------------------------------------------------------
140 |                 // Execute if the small picture is placed inside of large picture
141 | 
142 |                 // Get the coordinate
143 |                 var x_coordinate = ((small_pic.offsetLeft - large_picture.offsetLeft) * 300) / large_picture.offsetWidth;
144 |                 var y_coordinate = ((small_pic.offsetTop - large_picture.offsetTop) * 200) / large_picture.offsetHeight;
145 | 
146 |                 // Send the coordinate to the back-end
147 |                 anti_bot_start_loading_status(function () {
148 |                     anti_bot_verify(x_coordinate, y_coordinate);
149 |                 });
150 |                 // -----------------------------------------------------------
151 |             } else {
152 |                 // ----------------------------------------------------------
153 |                 // Execute if the small picture is not placed inside of large picture
154 | 
155 |                 // Move the small picture to the original position
156 |                 anti_bot_smallpic_moveback_to_original(small_pic, anti_bot_smallpic_ini_position.left, anti_bot_smallpic_ini_position.top);
157 | 
158 |                 // Change back for the shadows
159 |                 anti_bot_shadow_change(frame, 0, 2, 0.1, "#AAA", null);
160 |                 anti_bot_shadow_change(large_picture, 0, 2, 0.1, "#aaa", null);
161 |                 // ----------------------------------------------------------
162 |             }
163 |             document.onmouseup = null;
164 |         };
165 |     };
166 | }
167 | 
168 | function anti_bot_start_touchpoint_monitor() {
169 |     /*
170 |     Function anti_bot_start_touchpoint_monitor(): Start the finger monitoring for small picture.
171 |     This function is similar to anti_bot_start_mouse_monitor(). However, this function is used for touch screen user.
172 | 
173 |     Before calling this function, make sure that the interface of verification is loaded.
174 |     * */
175 |     document.getElementById("anti_bot_small_picture").ontouchstart = function (ev) {
176 | 
177 |         // While the finger is touching on the screen, preventDefault would disable scrolling.  
178 |         ev.preventDefault();
179 | 
180 |         // Execute if the small picture is clicked
181 |         // ----------------------------------------------
182 |         // Change the shadow of the picture
183 |         var frame = document.getElementById("anti_bot_frame");
184 |         anti_bot_shadow_change(frame, 2, 0, 0.2, "#AAA", function () {
185 |             frame.style.boxShadow = "0 0 0 0";
186 |         });
187 |         var small_pic = document.getElementById("anti_bot_small_picture");
188 |         var large_picture = document.getElementById("anti_bot_large_picture");
189 |         anti_bot_shadow_change(large_picture, 2, 0, 0.2, "#AAA", function () {
190 |             large_picture.style.boxShadow = "0 0 0 0";
191 |         });
192 | 
193 |         // --------------------------------------------
194 |         // get the distance from the small picture borders to the center of the finger
195 |         var mouse_smallpic_distance_x = ev.touches[0].clientX - small_pic.offsetLeft;
196 |         var mouse_smallpic_distance_y = ev.touches[0].clientY - small_pic.offsetTop;
197 | 
198 |         // ---------------------------------------------
199 |         document.ontouchmove = function (ev) {
200 |             // Execute if the finger is moving.
201 |             // The small picture would change its location and tracking on the finger.
202 |             small_pic.style.top = ev.touches[0].clientY - mouse_smallpic_distance_y + "px";
203 |             small_pic.style.left = ev.touches[0].clientX - mouse_smallpic_distance_x + "px";
204 |         };
205 | 
206 |         document.ontouchend = function (ev) {
207 |             // Execute if the finger moves out from screen:
208 |             // --------------------------------------------
209 |             document.ontouchmove = null;
210 |             var large_picture_coordinate = anti_bot_getCoordinateByElement(large_picture);
211 | 
212 |             // Start verification if the small picture is placed in the large picture
213 |             if (ev.changedTouches[0].clientY > large_picture_coordinate.top && ev.changedTouches[0].clientY < large_picture_coordinate.bottom && ev.changedTouches[0].clientX > large_picture_coordinate.left && ev.changedTouches[0].clientX < large_picture_coordinate.right) {
214 |                 // -----------------------------------------------------------
215 |                 // Execute if the small picture is placed inside of large picture
216 | 
217 |                 // Get the coordinate
218 |                 var x_coordinate = ((small_pic.offsetLeft - large_picture.offsetLeft) * 300) / large_picture.offsetWidth;
219 |                 var y_coordinate = ((small_pic.offsetTop - large_picture.offsetTop) * 200) / large_picture.offsetHeight;
220 | 
221 |                 // Send the coordinate to the back-end
222 |                 anti_bot_start_loading_status(function () {
223 |                     anti_bot_verify(x_coordinate, y_coordinate);
224 |                 });
225 |                 // -----------------------------------------------------------
226 |             } else {
227 |                 // ----------------------------------------------------------
228 |                 // Execute if the small picture is not placed inside of large picture
229 | 
230 |                 // Move the small picture to the original position
231 |                 anti_bot_smallpic_moveback_to_original(small_pic, anti_bot_smallpic_ini_position.left, anti_bot_smallpic_ini_position.top);
232 | 
233 |                 // Change back for the shadows
234 |                 anti_bot_shadow_change(frame, 0, 2, 0.1, "#AAA", null);
235 |                 anti_bot_shadow_change(large_picture, 0, 2, 0.1, "#aaa", null);
236 |                 // ----------------------------------------------------------
237 |             }
238 |             document.ontouchend = null;
239 |         };
240 |     };
241 | }
242 | 
243 | 
244 | function anti_bot_getCoordinateByElement(picture) {
245 |     /*
246 |     Function anti_bot_getCoordinateByElement(): Get the element's current distance between the border of element to the border of screen.
247 | 
248 |     Parameter picture is the element which you wana to get the distance between the element's border and the screen's border.
249 |     The function would return an object with top, left, right, bottom
250 |     * */
251 |     var picture_top = picture.getBoundingClientRect().top;
252 |     var picture_left = picture.getBoundingClientRect().left;
253 |     var picture_right = picture_left + picture.offsetWidth;
254 |     var picture_bottom = picture_top + picture.offsetHeight;
255 |     return {
256 |         top: picture_top,
257 |         left: picture_left,
258 |         right: picture_right,
259 |         bottom: picture_bottom
260 |     }
261 | }
262 | 
263 | 
264 | function anti_bot_smallpic_moveback_to_original(target_element, end_left, end_top) {
265 |     /*
266 |     Function anti_bot_smallpic_moveback_to_original(): The small picture would move back to the original if this function is called
267 |     * */
268 |     var start_left = target_element.offsetLeft;
269 |     var start_top = target_element.offsetTop;
270 |     var delta_x = 0;
271 |     var delta_y = 0;
272 | 
273 |     // Verify if the picture is on the left or the right toward the original position.
274 |     if (start_left < end_left) {
275 |         // On the left
276 |         delta_x = end_left - start_left;
277 |         window.requestAnimationFrame(move_x_r);
278 | 
279 |         function move_x_r() {
280 |             target_element.style.left = target_element.offsetLeft + delta_x / 5 + "px";
281 |             delta_x = delta_x - delta_x / 5;
282 |             if (delta_x > 0) {
283 |                 window.requestAnimationFrame(move_x_r);
284 |             }
285 |         }
286 |     } else {
287 |         // On the right
288 |         delta_x = start_left - end_left;
289 |         window.requestAnimationFrame(move_x_l);
290 | 
291 |         function move_x_l() {
292 |             target_element.style.left = target_element.offsetLeft - delta_x / 5 + "px";
293 |             delta_x = delta_x - delta_x / 5;
294 |             if (delta_x > 0) {
295 |                 window.requestAnimationFrame(move_x_l);
296 |             }
297 |         }
298 |     }
299 | 
300 |     // Verify if the picture is on the top or the bottom toward the original position.
301 |     if (start_top < end_top) {
302 |         // On the top
303 |         delta_y = end_top - start_top;
304 |         window.requestAnimationFrame(move_y_d);
305 | 
306 |         function move_y_d() {
307 |             target_element.style.top = target_element.offsetTop + delta_y / 5 + "px";
308 |             delta_y = delta_y - delta_y / 5;
309 |             if (delta_y > 0) {
310 |                 window.requestAnimationFrame(move_y_d);
311 |             }
312 |         }
313 |     } else {
314 |         // On the bottom
315 |         delta_y = start_top - end_top;
316 |         window.requestAnimationFrame(move_y_u);
317 | 
318 |         function move_y_u() {
319 |             target_element.style.top = target_element.offsetTop - delta_y / 5 + "px";
320 |             delta_y = delta_y - delta_y / 5;
321 |             if (delta_y > 0) {
322 |                 window.requestAnimationFrame(move_y_u);
323 |             }
324 |         }
325 |     }
326 | }
327 | 
328 | 
329 | function anti_bot_verify(x, y) {
330 |     /*
331 |     Function anti_bot_verify(): verifying the x and y coordinate by sending the data to php back-end
332 |     Parameter x is the x-coordinate of the small box.
333 |     Parameter y is the y-coordingate of the small box.
334 |     * */
335 |     var req = new XMLHttpRequest();
336 |     req.onreadystatechange = function () {
337 |         if (this.readyState === 4 && this.status === 200) {
338 |             var frame = document.getElementById("anti_bot_frame");
339 |             if (this.responseText === "1") {
340 |                 // ----------------------------------------
341 |                 // Execute if verified successful (the user maybe is not a robot)
342 |                 var original_picture = new Image();
343 |                 original_picture.src = anti_bot_verification_path + "/get-image.php?type=original_picture";
344 |                 original_picture.setAttribute("id", "anti_bot_large_picture");
345 |                 original_picture.onload = function () { // Loading the original image(large image without box)
346 | 
347 |                     // Remove all the previous image, and put the original image
348 |                     frame.removeChild(document.getElementById("anti-bot-loading-framework"));
349 |                     frame.removeChild(document.getElementById("anti_bot_large_picture"));
350 |                     frame.appendChild(original_picture);
351 |                     frame.removeChild(document.getElementById("anti_bot_small_picture"));
352 | 
353 |                     // Building a huge tick on the page
354 |                     var tick_area = document.createElement("div");
355 |                     tick_area.setAttribute("id", "anti_bot_tick_area");
356 |                     var tick = document.createElement("div");
357 |                     tick.setAttribute("class", "anti-bot-tick-framework");
358 |                     tick.innerHTML = "<div class=\"anti-bot-tick-left\"></div><div class=\"anti-bot-tick-right\"></div><div class=\"anti-bot-tick-cover\"></div>\n";
359 |                     tick_area.appendChild(tick);
360 |                     frame.appendChild(tick_area);
361 |                     var tick_opacity = 0;
362 |                     appear_tick();
363 | 
364 |                     function appear_tick() {
365 |                         tick_area.style.opacity = tick_opacity;
366 |                         tick_opacity = tick_opacity + 0.05;
367 |                         if (tick_opacity < 1) {
368 |                             window.requestAnimationFrame(appear_tick);
369 |                         }
370 |                     }
371 | 
372 |                     // Stop loading animation
373 |                     anti_bot_end_loading_status(null);
374 |                 }
375 |             } else {
376 |                 // -----------------------------------------------------
377 |                 // Execute if verification failure ( the user maybe is a robot)
378 | 
379 |                 // Move the small picture to the origional location
380 |                 anti_bot_smallpic_moveback_to_original(anti_bot_small_picture, anti_bot_smallpic_ini_position.left, anti_bot_smallpic_ini_position.top);
381 | 
382 |                 // Change the shadow of the pictures
383 |                 anti_bot_shadow_change(frame, 0, 2, 0.1, "#AAA", null);
384 |                 anti_bot_shadow_change(anti_bot_large_picture, 0, 2, 0.1, "#aaa", null);
385 | 
386 |                 // Load the new pictures
387 |                 anti_bot_large_picture.src = anti_bot_verification_path + "/get-image.php?type=large_picture&nothing=" + Math.random();
388 |                 anti_bot_small_picture.src = anti_bot_verification_path + "/get-image.php?type=small_picture&nothing=" + Math.random();
389 |                 anti_bot_large_picture.onload = function () {
390 |                     anti_bot_small_picture.onload = function () {
391 |                         // While pictures are loaded, stop loading animation.
392 |                         anti_bot_end_loading_status(null);
393 |                     };
394 |                 };
395 |             }
396 |         }
397 |     };
398 |     req.open("GET", anti_bot_verification_path + "/verify.php?x=" + x + "&y=" + y, true);
399 |     req.send();
400 | }
401 | 
402 | 
403 | function anti_bot_reload() {
404 |     /*
405 |     Function anti_bot_reload(): used for reload the verification interface.
406 |     * */
407 | 
408 |     var frame_opacity = 1;
409 |     var frame = document.getElementById("anti_bot_frame");
410 |     // Disappearing the interface
411 |     disappear_frame();
412 | 
413 |     function disappear_frame() {
414 |         frame_opacity = frame_opacity - 0.05;
415 |         frame.style.opacity = frame_opacity;
416 |         if (frame_opacity > 0) {
417 |             window.requestAnimationFrame(disappear_frame)
418 |         } else {
419 |             // Remove all the elements of the interface
420 |             frame.innerHTML = "";
421 |             frame.style = "";
422 | 
423 |             // Initialize the interface
424 |             anti_bot_verification_ini(anti_bot_verification_path);
425 |         }
426 |     }
427 | }
428 | 
429 | 
430 | function anti_bot_start_loading_status(complete) {
431 |     /*
432 |     Function anti_bot_start_loading_status(): Start the loading animation.
433 | 
434 |     During the animation, the user is not allow to do anything.
435 | 
436 |     After anti_bot_start_loading_status() is called, if you want to stop animation, call anti_bot_end_loading_status()
437 | 
438 |     10 second after calling the anti_bot_start_loading_status(), if the program still has not called anti_bot_end_loading_status(),
439 |     the animation would stop, and replaced by a refresh sign.
440 | 
441 |     Parameter complete should be an function which carry the action that would be execute after the animation is started.
442 |     If you do not want any action after the animation is started, please put null in parameter.
443 |     * */
444 | 
445 |     // Building the animation
446 |     var loading_area = document.createElement("div");
447 |     loading_area.setAttribute("id", "anti_bot_loading_area");
448 |     var loading = document.createElement("div");
449 |     loading.setAttribute("class", "anti_bot_loading_circle");
450 |     loading.setAttribute("id", "anti_bot_loading");
451 |     loading.appendChild(document.createElement("div"));
452 |     loading.appendChild(document.createElement("div"));
453 |     document.getElementById("anti_bot_frame").appendChild(loading_area);
454 |     loading_area.appendChild(loading);
455 | 
456 |     // Hide the refresh button
457 |     var icon = document.getElementById("anti-bot-loading-framework");
458 |     if (document.getElementById("anti_bot_frame").contains(icon)) {
459 |         icon.style.opacity = 0;
460 |     }
461 |     var opacity = 0;
462 |     // Appearing the animation
463 |     appear_loading();
464 | 
465 |     function appear_loading() {
466 |         opacity = opacity + 0.02;
467 |         loading_area.style.opacity = opacity;
468 |         if (opacity < 0.6) {
469 |             window.requestAnimationFrame(appear_loading);
470 |         } else {
471 |             // Execute if the animation is started.
472 |             setTimeout(function () {
473 |                 // If it is still loading after 10 second, the animation would be replaced by a reload button.
474 |                 loading_area.removeChild(loading);
475 |                 var refresh = document.createElement("div");
476 |                 refresh.setAttribute("class", "anti-bot-loading-framework-large");
477 |                 refresh.innerHTML = anti_bot_icon;
478 |                 refresh.setAttribute("onclick", "anti_bot_reload()");
479 |                 loading_area.appendChild(refresh);
480 |             }, 10000);
481 |             if (complete !== null) {
482 |                 complete();
483 |             }
484 |         }
485 |     }
486 | }
487 | 
488 | function anti_bot_end_loading_status(complete) {
489 |     /*
490 |     After calling the function anti_bot_start_loading_status(), this function is used for stops the animation and allows user control the interface.
491 | 
492 |     Parameter complete should be an function which carry the action that would be execute after the animation is ended.
493 |     If you do not want any action after the animation is started, please put null in parameter.
494 |     * */
495 |     var loading_area = document.getElementById("anti_bot_loading_area");
496 |     var opacity = 0.6;
497 |     var icon = document.getElementById("anti-bot-loading-framework");
498 | 
499 |     // Appear the small refresh button
500 |     if (document.getElementById("anti_bot_frame").contains(icon)) {
501 |         icon.style.opacity = 1;
502 |     }
503 | 
504 |     // Remove loading animation
505 |     disappear_loading();
506 | 
507 |     function disappear_loading() {
508 |         opacity = opacity - 0.02;
509 |         loading_area.style.opacity = opacity;
510 |         if (opacity > 0) {
511 |             window.requestAnimationFrame(disappear_loading);
512 |         } else {
513 |             document.getElementById("anti_bot_frame").removeChild(loading_area);
514 |             if (complete !== null) {
515 |                 complete();
516 |             }
517 |         }
518 |     }
519 | }
520 | 
521 | 
522 | function anti_bot_shadow_change(item, shadow_size_ini, shadow_size_fin, length_change_for_each_frame, color, complete) {
523 |     /*
524 |     Function anti_bot_shadow_change(): used for change the shadow size for an element.
525 | 
526 |     Parameter: item is the element which the shadow is going to be change.
527 |     Parameter: shadow_size_ini is the initial size of the shadow, integer type, in px unit.
528 |     Parameter: shadow_size_fin is the final size of the shadow, integer type, in px unit.
529 |     Parameter: length_change_for_each_frame is the length of shadow changed in each frame, integer type, in px unit.
530 |     Parameter: color is the color of the shadow, string type. For example: "#FFF".
531 |     Parameter: complete is the function which would be execute after the shadow is changed. If you don't need this function, please put null.
532 |     * */
533 | 
534 |     // Store the boolean value into variable.
535 |     var is_increase = shadow_size_ini < shadow_size_fin;
536 | 
537 |     shadow_down();
538 | 
539 |     function shadow_down() {
540 |         item.style.boxShadow = "0px 0px " + shadow_size_ini + "px " + shadow_size_ini + "px " + color;
541 |         if (is_increase) {
542 |             // Execute if the shadow needs to be increase the size.
543 |             shadow_size_ini = shadow_size_ini + length_change_for_each_frame;
544 |             if (shadow_size_ini < shadow_size_fin) {
545 |                 window.requestAnimationFrame(shadow_down);
546 |             } else {
547 |                 if (complete !== null) {
548 |                     complete();
549 |                 }
550 |             }
551 |         } else {
552 |             // Execute if the shadow needs to be decrease the size.
553 |             shadow_size_ini = shadow_size_ini - length_change_for_each_frame;
554 |             if (shadow_size_ini > shadow_size_fin) {
555 |                 window.requestAnimationFrame(shadow_down);
556 |             } else {
557 |                 if (complete !== null) {
558 |                     complete();
559 |                 }
560 |             }
561 |         }
562 |     }
563 | }


--------------------------------------------------------------------------------