This repository has been archived by the owner on Mar 10, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
194 lines (194 loc) · 5.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像分类问卷调查</title>
<style>
body {
font-size: 2vh;
}
/*
*具有缩放效果的按钮样式，父级需要设置font-size
*可以通过background-color,border-color覆盖得到不同颜色的按钮
**/
button {
padding: .3em .8em;
border: 1px solid #ffb2c5;
/*background: #58a linear-gradient(#77a0bb,#58a);*/
background: rgba(255, 210, 216, 0.7) linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
/*box-shadow: 0 .05em .25em gray;*/
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: black;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
}
input {
padding: .3em .8em;
border: 1px solid #ffb2c5;
/*background: #58a linear-gradient(#77a0bb,#58a);*/
background: rgba(255, 210, 216, 0.7) linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
/*box-shadow: 0 .05em .25em gray;*/
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: black;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
}
div{
text-align:center;
}
.img_box{
padding-bottom:100%;
}
.img_box img{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
height:100%;
margin:auto;
z-index: -1;
max-height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center;
vertical-align: center;
}
.btn_show_foot{
z-index: 1;
position: absolute;
bottom: 16px;
width: 100%;
}
</style>
</head>
<body>
<script>
用户 = "";
function 取信(网址, 处理) {
var 请求 = new XMLHttpRequest(); //第一步：建立所需的对象
请求.open('GET', 网址, true); //第二步：打开连接,将请求参数写在网址中
请求.send(); //第三步：发送请求
请求.onreadystatechange = function () {
if (请求.readyState == 4 && 请求.status == 200) {
处理(请求.responseText);
}
};
}
function 取随机图(){
if(用户 == "") alert("未登录!");
else {
取信("/pick?" + 用户, function rri(t) {
document.getElementById("img_display").src = "/" + t;
});
}
}
function 登录() {
入 = prompt("请输入用户名，错误的用户名无法加载图片","示例");
if(入.length == 2) 用户 = 入;
}
function 编码(文) {
文 = escape(文.toString()).replace(/\+/g, "%2B");
var 配 = 文.match(/(%([0-9A-F]{2}))/gi);
if (配) {
for (var 位 = 0; 位 < 配.length; 位++) {
var 码 = 配[位].substring(1,3);
if (parseInt(码, 16) >= 128) {
文 = 文.replace(配[位], '%u00' + 码);
}
}
}
文 = 文.replace('%25', '%u0025');
return 文;
}
function 六十(六) {
var 长 = 六.length, 串 = new Array(长), 码;
for (var 位 = 0; 位 < 长; 位++) {
码 = 六.charCodeAt(位);
if (48<=码 && 码 < 58) 码 -= 48;
else 码 = (码 & 0xdf) - 65 + 10;
串[位] = 码;
}
return 串.reduce(function(和, 余) {
和 = 16 * 和 + 余;
return 和;
}, 0);
}
function 注册() {
if(用户 == "") {
入 = 编码(prompt("请输入密码"));
入 = 六十(入.substring(2,6) + 入.substring(8, 12));
码 = ((Date.parse(new Date())/1000) ^ 入).toString().padStart(10, "0");
取信("/signup?" + 码, function rr(t) {
if(t != "null" && t != "erro") {
prompt("这是您的用户名，请复制好后妥善保存", t);
用户 = t;
} else alert("密码错误!");
});
}
}
function 投票(类) {
if(用户 != "") {
图 = document.getElementById("img_display").src;
取信("/vote?uuid=" + 用户 + "&img=" + 图.substring(图.lastIndexOf('/')+1, 图.length) + "&class=" + 类, function rv(t) {
alert(t);
取随机图();
});
} else alert("请登录!");
}
隐 = false;
栏 = document.getElementsByTagName("div");
function 显隐() {
隐 = !隐;
栏[0].hidden = 栏[2].hidden = 栏[4].hidden = 隐;
document.getElementById("btn_hide").innerText = 隐?"显示":"隐藏";
}
function 上传() {
document.getElementById("upload_form").action = "upform?uuid=" + 用户;
}
</script>
<div>
<h1>图像分类问卷调查</h1>
<button id = "btn_rand" type="button" onclick="取随机图()">随机</button>
<button id = "btn_lgin" type="button" onclick="登录()">登录</button>
<button id = "btn_regi" type="button" onclick="注册()">注册</button>
</div>
<div>
<br><br>
<button id = "btn_hide" type="button" onclick="显隐()">隐藏</button>
</div>
<div>
<br><br>
<form id="upload_form" method="post" formenctype="multipart/form-data" enctype="multipart/form-data">
<input type="file" name="img">
<input type="submit" onclick="上传()">
</form>
</div>
<div class="img_box">
<img id = "img_display" src="/哎芽篍憑呀"/>
</div>
<div class="btn_show_foot">
<button type="button" onclick="投票('0')">0分</button>
<button type="button" onclick="投票('1')">1分</button>
<button type="button" onclick="投票('2')">2分</button>
<button type="button" onclick="投票('3')">4分</button>
<br><br>
<button type="button" onclick="投票('4')">8分</button>
<button type="button" onclick="投票('5')">16分</button>
<button type="button" onclick="投票('6')">32分</button>
<button type="button" onclick="投票('7')">64分</button>
</div>
</body>
</html>