@@ -1,9 +1,9 @@ | |||||
.question-box { | |||||
.box { | |||||
display: block; | display: block; | ||||
background: hsl(0, 0%, 85%); | background: hsl(0, 0%, 85%); | ||||
height: fit-content; | height: fit-content; | ||||
width: fit-content; | width: fit-content; | ||||
padding: 5em 10em; | |||||
padding: 2em 5em; | |||||
margin: 2em auto auto; | margin: 2em auto auto; | ||||
border-radius: .5em; | border-radius: .5em; | ||||
} | } | ||||
@@ -22,3 +22,26 @@ | |||||
min-width: 3.5em; | min-width: 3.5em; | ||||
margin: 0.5em; | margin: 0.5em; | ||||
} | } | ||||
.loading-icon { | |||||
-webkit-animation: spin 2s linear infinite; | |||||
-moz-animation: spin 2s linear infinite; | |||||
animation: spin 2s linear infinite; | |||||
width: 3em; | |||||
height: 3em; | |||||
} | |||||
.center { | |||||
display: block; | |||||
margin: auto; | |||||
text-align: center; | |||||
} | |||||
@keyframes spin { | |||||
from { | |||||
transform: rotate(0deg); | |||||
} | |||||
to { | |||||
transform: rotate(360deg); | |||||
} | |||||
} |
@@ -0,0 +1 @@ | |||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1589981941068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8603" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M816.512 368.192l-55.36 32A285.632 285.632 0 0 1 800 544c0 158.816-129.184 288-288 288-106.368 0-199.264-58.144-249.12-144.16A285.856 285.856 0 0 1 224 544c0-158.816 129.216-288 288-288v96l192-128-192-128v96C317.92 192 160 349.888 160 544c0 64.064 17.504 124 47.52 175.808C268.48 824.96 381.984 896 512 896c194.112 0 352-157.92 352-352 0-64.064-17.472-124-47.488-175.808" fill="#181818" p-id="8604"></path></svg> |
@@ -4,10 +4,10 @@ | |||||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||||
<link rel="stylesheet" href="css/bootstrap.min.css"> | <link rel="stylesheet" href="css/bootstrap.min.css"> | ||||
<link rel="stylesheet" href="css/style.css"> | <link rel="stylesheet" href="css/style.css"> | ||||
<title>Votes</title> | |||||
<title>问卷</title> | |||||
</head> | </head> | ||||
<body> | <body> | ||||
<div class="question-box"> | |||||
<div class="box"> | |||||
<p class="question">你认为 zzzz 是大佬吗?</p> | <p class="question">你认为 zzzz 是大佬吗?</p> | ||||
<div class="answer"> | <div class="answer"> | ||||
<button class="btn btn-outline-success btn-sm" onclick="voteIsDL()">是</button> | <button class="btn btn-outline-success btn-sm" onclick="voteIsDL()">是</button> | ||||
@@ -0,0 +1,20 @@ | |||||
<!DOCTYPE html> | |||||
<html lang="zh"> | |||||
<head> | |||||
<meta charset="UTF-8"> | |||||
<title>投票进行中</title> | |||||
<link rel="stylesheet" href="css/style.css"> | |||||
<link rel="stylesheet" href="css/bootstrap.min.css"> | |||||
</head> | |||||
<body> | |||||
<div class="box"> | |||||
<div class="center"> | |||||
<embed src="img/loading.svg" type="image/svg+xml" class="loading-icon"> | |||||
<p>投票正在进行中...</p> | |||||
</div> | |||||
<p>为了防止刷票,我们需要你的浏览器完成一项计算任务,之后方可进行投票。</p> | |||||
<p>取决于你正在使用的设备的性能,这个过程可能需要十分钟到一个小时不等。在投票完成之前,请不要关闭该页面。</p> | |||||
</div> | |||||
</body> | |||||
</html> |