华清大学特普通奖学金初选报名系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

259 lines
9.3 KiB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/png" href="/img/ord/icon-128.png"/>
<link href="https://fonts.loli.net/css2?family=Noto+Serif+SC&display=swap" rel="stylesheet">
<meta property="og:title" content="华清特奖报名" />
<meta property="og:description" content="华清大学特普通奖学金" />
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/jquery.timeago.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/locales/jquery.timeago.zh-CN.js"></script>
<title>华清特奖报名</title>
<style>
h1, h2, h3, h4, h5, h6 {
font-family: 'Noto Serif SC', serif;
}
a, a:hover, .btn-link, .btn-link:hover {
color: inherit;
text-decoration: underline;
}
nav .page-link {
color: #000;
}
nav .page-item.active .page-link {
background-color: #000;
border-color: #000;
}
.btn-lg {
font-size: 2em;
font-family: 'Noto Serif SC', serif;
}
.part1 {
max-width: 500px;
float: left;
padding-right:25px;
}
.part2 {
min-width: 200px;
overflow: hidden;
padding-left:25px;
}
.qbox {
border: 2px black solid;
background: white;
padding:5px;
color:black;
margin: 5px 5px 40px;
}
.qbox-new {
background: black;
color: white;
}
.qbox-new input, .qbox-new textarea {
background: black;
color: white;
border: none;
border-bottom: 2px white solid;
border-radius: 0;
}
.qbox .inner {
margin: 15px 0 0 15px;
white-space: pre-wrap;
}
.timeago {
font-size: 0.5em;
text-align: right;
}
.display_name {
margin: 0;
}
.card-body {
padding: 0.75em;
}
.new {
overflow: hidden;
position: relative;
margin-bottom: 30px;
}
.new-collapse {
max-height: 360px;
}
.show-mask {
display: block;
position: absolute;
top: 0;
text-align: center;
padding-top: 320px;
width: 100%;
}
.footer {
background: black;
color: white;
text-align: center;
font-size: 80%;
border-top: solid 1px white;
}
.footer p {
margin: 10px 0 0;
float: bottom;
}
</style>
</head>
<body style="background: #fff url('/img/ord/bg.jpg') repeat-x fixed center top / 1000px">
<div class="container" style="overflow: hidden;min-height: 100vh">
<div style='padding:15px'>
<img src="/img/ord/logo.png" width="200px" />
</div>
<div class="part1">
<div id="new" class="new new-collapse">
<form action="new" method="post">
<div class="form-group qbox qbox-new">
<h1 style="margin: -14px -10px 20px">自荐提名</h1>
<textarea class="form-control" name="text" rows="5" maxlength="4000" placeholder="
一段自我陈述,
向大家展示普通的自己。" required="required"></textarea>
<hr/>
<textarea class="form-control" name="privateText" rows="3" maxlength="1000" placeholder="不想公开,但想被评委们看到的内容。
如想留下联系方式也可放在这里。
"></textarea>
<hr/>
<div class="form-group row">
<label for="url" class="col-sm-3 col-form-label">补充材料</label>
<div class="col-sm-9">
<input type="url" class="form-control" id="url" name="url" placeholder="清华云盘或safeShare链接,https://开头" pattern="https://(cloud\.tsinghua\.edu\.cn/f/[0-9a-z]+/(\?dl=1)?|closed\.social/safeShare/\d([a-zA-Z]+)?)">
</div>
</div>
<hr/>
{% for v in vs %}
<div class="form-group row">
<label for="{{v.name}}" class="col-sm-4 col-form-label">{{v.ques}}</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="{{v.name}}" name="{{v.name}}" placeholder="{{v.hint}}" required="required">
</div>
</div>
{% endfor %}
<button type="submit" class="btn btn-link btn-lg">报名</button>
</div>
</form>
<div style="font-size:80%;">
<ul>
<li>初选报名不需要登陆任何帐号,你可以留下联系方式或可验证身份的信息(如公钥/数字签名),也可以不留。</li>
<li>如果需要附上补充材料,请使用清华云盘。为了避免泄露姓名推荐使用<a href="/safeShare" target="_blank">safeShare</a>,我们不接受其他云盘。</li>
<li>下方的评论来自闭社用户。如需删除自己发布的介绍请让任意一位工作人员评论“删除”。</li>
<li>需要回答几个简单的问题以初步验证身份。入围后需要使用闭社帐号认领以正式验证身份。</li>
<li>建议在电脑上操作以免丢失未保存的内容。如果出错(例如验证问题答错了),请回退,多数浏览器都会恢复之前填写的内容。</li>
</ul>
</div>
<a href="##" onclick="showNew()" class="show-mask">
<span><svg fill="#fff" viewBox="0 12 24 48" width="24"><path d="m0 24 l12 18 l12 -18 z"></path></svg></span>
</a>
</div>
<script>
function showNew() {
$('#new').removeClass('new-collapse');
$('.show-mask').hide();
}
</script>
</div>
<div class="part2">
<h1>已有报名</h1>
{% for c in pagination.items %}
<div class="qbox">
<pre class="inner">{{c.content}}</pre>
{% if showPrivate %}
<hr/>
<pre class="inner">{{c.private}}</pre>
<hr/>
{% endif %}
{% if c.url %}
<p class="inner"><a href="{{c.url}}" target="_black">补充材料</a></p>
{% endif %}
<div style="text-align:right">
<time class="timeago" datetime="{{c.time}}"></time>
<a class="btn btn-link request-answer" data-toggle="collapse" href="#collapse-{{c.toot}}" role="button" aria-expanded="false" aria-controls="collapse-{{c.toot}}">
<span><svg fill="#000" viewBox="0 12 24 48" width="24"><path d="m0 24 l12 18 l12 -18 z"></path></svg></span>
</a>
</div>
<div class="collapse" id="collapse-{{c.toot}}">
<div class="card card-body">
加载中...
</div>
</div>
</div>
{% endfor %}
<nav>
<ul class="pagination">
{%- for page in pagination.iter_pages() %}
{% if page %}
{% if page != pagination.page %}
<li class="page-item"><a class="page-link" href="{{ url_for('can_list', page=page, per_page=pagination.per_page ) }}">{{ page }}</a></li>
{% else %}
<li class="page-item active">
<a class="page-link" href="#">{{ page }}<span class="sr-only">(current)</span></a>
</li>
{% endif %}
{% else %}
<li class="page-item"><span class=ellipsis></span></li>
{% endif %}
{%- endfor %}
</ul>
</nav>
</div>
</div>
<div class="footer">
<p>
<a href="//closed.social" target="_blank">闭社</a>提供技术支持。本报名系统以AGPL协议开源于<a href="//git.closed.social/closed-social/ordinary" target="_blank">碧茶</a>
</p>
<p> 🄯 2020 Copyleft: closed.social</p>
</div>
</body>
<script>
$('.timeago').timeago();
$('.collapse').on('show.bs.collapse', (e) => {
let self = e.target;
let toot = self.id.split('-')[1];
$.ajax({
type:'GET',
url:toot,
success:(result,status,xhr) => {
console.log(result+' : '+status);
if(result.replies.length) {
$(self).empty();
result.replies.forEach((rp) => {
$(self).append(`<div class="card card-body"><p class="display_name"><a href="${rp.url}">${rp.disp}</a>:</p><pre>${rp.content}</pre><time class="timeago" datetime="${rp.time}"></time></div>`)
});
console.log($(self).find('.timeago'));
$(self).find('.timeago').timeago();
}else {
$(self).empty();
$(self).append(`<div class="card card-body">(暂无评论)</div>`)
}
},
error:(xhr,status,error) => {
console.log(error, status, xhr.status, xhr.responseText);
$(self).empty();
$(self).append(`<div class="card card-body"><p style="color:red">${xhr.status} ${xhr.responseText}</p></div>`);
if(xhr.status == 404)
setTimeout(()=>{$(self).parent().remove()}, 3000);
}
});
});
</script>
</html>