华清大学特普通奖学金初选报名系统
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.

500 lines
16 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6. <link rel="icon" type="image/png" href="/img/ord/icon-128.png" />
  7. <link href="https://fonts.yecdn.com/css2?family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">
  8. <link href="https://fonts.yecdn.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
  9. <meta property="og:title" content="华清大学特普通奖学金 报名页面" />
  10. <meta property="og:description" content="华清大学特普通奖学金" />
  11. <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  12. <title>华清大学特普通奖 报名页面</title>
  13. <script>
  14. if(navigator.userAgent.search('MicroMessenger') !== -1)
  15. location.href = `https://closed.social/tools/safe_jump/?go=${encodeURIComponent(location.href)}&t=${encodeURIComponent('华清大学特普通奖学金')}`;
  16. </script>
  17. <style>
  18. body,
  19. pre {
  20. font-family: 'Noto Sans SC', sans-serif;
  21. }
  22. h1,
  23. h2,
  24. h3,
  25. h4,
  26. h5,
  27. h6,
  28. .sort-by{
  29. font-family: 'Noto Serif SC', serif;
  30. font-weight: 300;
  31. }
  32. .sort-by b {
  33. font-weight: 700;
  34. }
  35. a,
  36. a:hover,
  37. .btn-link,
  38. .btn-link:hover {
  39. color: inherit;
  40. text-decoration: underline;
  41. }
  42. nav .page-link {
  43. color: #000;
  44. }
  45. nav .page-item.active .page-link {
  46. background-color: #000;
  47. border-color: #000;
  48. }
  49. .btn-lg {
  50. font-size: 2em;
  51. font-family: 'Noto Serif SC', serif;
  52. }
  53. .verify-box {
  54. padding: 20px;
  55. background-color: #8884;
  56. margin: 20px;
  57. }
  58. .step2-info{
  59. background-color: #eee9;
  60. padding: 10px;
  61. overflow: hidden;
  62. }
  63. {% if step2 %}
  64. @media screen and (max-width: 600px) {
  65. .part1 {
  66. display: none;
  67. }
  68. }
  69. {% endif %}
  70. .part1 {
  71. max-width: 500px;
  72. float: left;
  73. padding-right: 10px;
  74. position: relative;
  75. }
  76. .part2 {
  77. min-width: 200px;
  78. overflow: hidden;
  79. padding-left: 25px;
  80. }
  81. .qbox {
  82. border: 2px black solid;
  83. background: white;
  84. padding: 5px;
  85. color: black;
  86. margin: 5px 5px 40px;
  87. }
  88. .qbox.qbox-grey {
  89. background: #eee;
  90. }
  91. .new .qbox {
  92. background: black;
  93. color: white;
  94. }
  95. .judge .qbox {
  96. background: white;
  97. color: black;
  98. padding: 5px 15px;
  99. }
  100. .twin.new .qbox input,
  101. .twin.new .qbox textarea {
  102. border-bottom: 2px solid;
  103. background: black;
  104. color: white;
  105. }
  106. .verify-box input {
  107. background: #0000;
  108. padding: 0;
  109. }
  110. .verify-box input,
  111. .twin .qbox input,
  112. .twin .qbox textarea {
  113. border: none;
  114. border-bottom: 1px solid;
  115. border-radius: 0;
  116. }
  117. .qbox .inner {
  118. margin: 15px 0 20px 15px;
  119. white-space: pre-wrap;
  120. }
  121. .like {
  122. fill: #fff;
  123. }
  124. .liked {
  125. fill: #000;
  126. }
  127. .timeago {
  128. font-size: 0.5em;
  129. margin-right: 10px;
  130. }
  131. .display_name {
  132. margin: 0;
  133. }
  134. .card-body {
  135. padding: 0.75em;
  136. }
  137. .behind {
  138. z-index: 98;
  139. cursor: pointer;
  140. transform: translateY(5px) scale(0.98);
  141. transform-origin: top;
  142. transition-property: transform;
  143. transition-duration: 0.5s;
  144. }
  145. .front {
  146. z-index: 99;
  147. transition-property: transform;
  148. transition-duration: 0.5s;
  149. }
  150. .judge {
  151. position: absolute;
  152. top: 0;
  153. right: 0;
  154. margin: 0 0 30px 20px;
  155. width: 90%;
  156. }
  157. .twin {
  158. overflow: hidden;
  159. }
  160. .new {
  161. position: relative;
  162. margin: 30px 20px 30px 0;
  163. }
  164. .twin-collapse {
  165. max-height: 360px;
  166. }
  167. .show-mask {
  168. display: block;
  169. position: absolute;
  170. top: 20px;
  171. right: 35px;
  172. text-align: center;
  173. padding-top: 330px;
  174. width: 100%;
  175. z-index: 999;
  176. }
  177. .footer {
  178. background: black;
  179. color: white;
  180. text-align: center;
  181. font-size: 80%;
  182. border-top: solid 1px white;
  183. }
  184. .footer p {
  185. margin: 10px 0 0;
  186. float: bottom;
  187. }
  188. @keyframes loop {
  189. 0% {
  190. transform: translateX(100%);
  191. }
  192. 100% {
  193. transform: translateX(-50%);
  194. }
  195. }
  196. </style>
  197. </head>
  198. <body style="background: #fff url('/img/ord/bg.jpg') repeat-x fixed center top / 650px">
  199. <div class="container" style="overflow: hidden;min-height: 100vh">
  200. <div style='padding:15px'>
  201. <img src="/img/ord/logo.png" width="200px" />
  202. </div>
  203. {% if step2 %}
  204. <div class="step2-info mb-3">
  205. <button type="button" class="close" aria-label="Close">
  206. <span>&times;</span>
  207. </button>
  208. <p>现已进入“答辩”阶段。入围的选手会在闭社平台上发布更详细的陈述,并与观众在评论区互动。前往 <a href="https://thu.closed.social/tags/%E7%89%B9%E6%99%AE%E9%80%9A%E5%A5%96%E7%AD%94%E8%BE%A9">thu.closed.social/tags/特普通奖答辩</a> 围观。<br>
  209. (闭社需使用清华邮箱注册)</p>
  210. <ul>
  211. {% for id, url in step2.get('cand', []) %}
  212. <li style="animation: {{id*37 % 23 + 5}}s loop linear infinite;"><a href="{{url}}">{{id}}号选手</a></li>
  213. {% endfor %}
  214. </ul>
  215. </div>
  216. {% endif %}
  217. <div class="part1">
  218. {% if not verified %}
  219. <form action="verify" method="post" class="verify-box">
  220. <p>完成简易验证后,你可以提交报名、获取评委群、点赞以及发布匿名评论<sub>(火热开发中)</sub>)</p>
  221. <hr>
  222. {% for v in vs %}
  223. <div class="form-group row">
  224. <label for="{{v.name}}" class="col-sm-8 col-form-label">{{v.ques}}</label>
  225. <div class="col-sm-4">
  226. <input type="text" class="form-control" name="{{v.name}}" placeholder="{{v.hint}}" required="required">
  227. </div>
  228. </div>
  229. {% endfor %}
  230. <button type="submit" class="btn btn-link btn-lg">提交</button>
  231. </form>
  232. {% else %}
  233. <div id="new" class="new twin front">
  234. <form action="new" method="post">
  235. <div class="form-group qbox">
  236. <h1 style="margin: -14px -13px 20px">自荐提名</h1>
  237. <textarea class="form-control" name="text" rows="5" maxlength="4000" placeholder="{{text1}}" required="required"></textarea>
  238. <hr />
  239. <textarea class="form-control" name="privateText" rows="4" maxlength="1000" placeholder="{{text2}}"></textarea>
  240. <hr />
  241. <div class="form-group row">
  242. <label for="url" class="col-sm-3 col-form-label">补充材料</label>
  243. <div class="col-sm-9">
  244. <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]+)?)">
  245. </div>
  246. </div>
  247. <button type="submit" class="btn btn-link btn-lg">报名</button>
  248. </div>
  249. </form>
  250. <div style="font-size:80%;">
  251. <ul>
  252. <li>如需附上补充材料,请使用清华云盘。为了避免泄露姓名推荐使用<a href="/safeShare" target="_blank">safeShare</a>。其他云盘是不被接受的。</li>
  253. <li>需要回答几个简单的问题以初步验证学生身份,入围后的线上答辩环节将于<a href="https://thu.closed.social/">闭社</a>平台进行(需清华邮箱注册)以正式验证身份。</li>
  254. <li>获得五个赞并留下联系方式(如微信号、手机号或邮箱)者被视为正式提名,会有工作人员与之联系并发放奖品。</li>
  255. <li>点击倒三角按钮展开评论,发布评论请前往<a href="https://thu.closed.social/">闭社</a></li>
  256. <li>如需删除报名,请联系工作人员(微信:ordinary_thuer)。</li>
  257. </ul>
  258. </div>
  259. </div>
  260. <div class="judge twin behind">
  261. <form action="judge" method="post">
  262. <div class="form-group qbox">
  263. <h1 style="text-align:right;margin:-12px -20px 16px">成为评委</h1>
  264. <div style="font-size:80%">
  265. <p>为了更好地选出十位普通人的代表,为了更好地展现大众的声音,我们希望招募更多的评委。</p>
  266. <p>成为评委的条件:</p>
  267. <ul>
  268. <li>是华清大学在读学生</li>
  269. <li>没有报名参选</li>
  270. <li>愿意对报名者进行评分</li>
  271. </ul>
  272. <p>我们原则上不拒绝任何的评委报名。</p>
  273. <p>目前在三个平台上建了三个评委群,分别是闭聊(Matrix),Telegram,微信。前两个消息自动同步,加入哪个都是等价的,微信群与另外两个群不连通。(注意Telegram墙内不可直接访问。闭聊由闭社提供,使用闭社帐号登陆,如使用其他服务器上的Matrix帐号加群需要验证华清身份。)</p>
  274. <p>选择想加入的群,完成验证,进入评委群。如果不愿意加群,也可以私信主办方保持沟通和上传打分结果。</p>
  275. </div>
  276. <div style="text-align:center">
  277. <div class="form-check form-check-inline">
  278. <input class="form-check-input" type="radio" name="groupType" value="mx" required>
  279. <label class="form-check-label" for="mx">闭聊</label>
  280. </div>
  281. <div class="form-check form-check-inline">
  282. <input class="form-check-input" type="radio" name="groupType" value="tg" required>
  283. <label class="form-check-label" for="tg">Telegram</label>
  284. </div>
  285. <div class="form-check form-check-inline">
  286. <input class="form-check-input" type="radio" name="groupType" value="wx" required>
  287. <label class="form-check-label" for="wx">微信</label>
  288. </div>
  289. </div>
  290. <button type="submit" class="btn btn-link btn-lg">进群</button>
  291. </div>
  292. </form>
  293. </div>
  294. {% endif %}
  295. </div>
  296. <div class="part2" id="part2">
  297. <div style="display:flex;justify-content:space-between;align-items: flex-end">
  298. <h1>已有报名</h1>
  299. <span style="margin:8px" class="sort-by">
  300. {% if final_list %}
  301. <a href="?sort_by={{sort_by}}&final_list=#part2">全部</a> | <b>仅入围</b>
  302. {% else %}
  303. <b>全部</b> | <a href="?sort_by={{sort_by}}&final_list=1#part2">仅入围</a>
  304. {% endif %}
  305. <br>
  306. {% if sort_by == 'likeNum' %}
  307. <a href="?sort_by=time&final_list={{final_list}}#part2">按时间</a> | <b>按赞数</b>
  308. {% else %}
  309. <b>按时间</b> | <a href="?sort_by=likeNum&final_list={{final_list}}#part2">按赞数</a>
  310. {% endif %}
  311. </span>
  312. </div>
  313. {% for c in pagination.items %}
  314. <div class="qbox {{'qbox-grey' if step2.get('end') and c.id > step2['end'] else ''}}">
  315. <small>No. {{c.id}}</small>
  316. <pre class="inner">{{c.content}}</pre>
  317. {% if showPrivate %}
  318. <hr />
  319. <pre class="inner">{{c.private}}</pre>
  320. <hr />
  321. {% endif %}
  322. {% if c.url %}
  323. <p class="inner"><a href="{{c.url}}" target="_black">补充材料</a></p>
  324. {% endif %}
  325. <div style="text-align:right;margin: 27px 0 -5px">
  326. <time class="timeago" datetime="{{c.time}}"></time>
  327. <a href="##" class="btn btn-link" id="like-{{c.toot}}" onClick="like('{{c.toot}}')" style="text-decoration: none;">
  328. <svg viewBox="-20 0 552 512" height="16" class="{{c.liked}}">
  329. <path stroke="#000" stroke-width="30" d="M474.644,74.27C449.391,45.616,414.358,29.836,376,29.836c-53.948,0-88.103,32.22-107.255,59.25
  330. c-4.969,7.014-9.196,14.047-12.745,20.665c-3.549-6.618-7.775-13.651-12.745-20.665c-19.152-27.03-53.307-59.25-107.255-59.25
  331. c-38.358,0-73.391,15.781-98.645,44.435C13.267,101.605,0,138.213,0,177.351c0,42.603,16.633,82.228,52.345,124.7
  332. c31.917,37.96,77.834,77.088,131.005,122.397c19.813,16.884,40.302,34.344,62.115,53.429l0.655,0.574
  333. c2.828,2.476,6.354,3.713,9.88,3.713s7.052-1.238,9.88-3.713l0.655-0.574c21.813-19.085,42.302-36.544,62.118-53.431
  334. c53.168-45.306,99.085-84.434,131.002-122.395C495.367,259.578,512,219.954,512,177.351
  335. C512,138.213,498.733,101.605,474.644,74.27z" />
  336. </svg>
  337. <span>
  338. {{c.likeNum}}
  339. </span>
  340. </a>
  341. <a class="btn btn-link request-answer" data-toggle="collapse" href="#collapse-{{c.toot}}" role="button" aria-expanded="false" aria-controls="collapse-{{c.toot}}">
  342. <svg fill="#000" viewBox="0 24 24 20" height="16">
  343. <path d="m0 24 l12 18 l12 -18 z"></path>
  344. </svg>
  345. </a>
  346. </div>
  347. <div class="collapse" id="collapse-{{c.toot}}">
  348. <div class="card card-body">
  349. 加载中...
  350. </div>
  351. </div>
  352. </div>
  353. {% endfor %}
  354. <nav>
  355. <ul class="pagination">
  356. {%- for page in pagination.iter_pages(left_edge=2, left_current=1, right_current=3, right_edge=2) %}
  357. {% if page %}
  358. {% if page != pagination.page %}
  359. <li class="page-item"><a class="page-link" href="{{ url_for('can_list', page=page, per_page=pagination.per_page, key=key, sort_by=sort_by) }}">{{ page }}</a></li>
  360. {% else %}
  361. <li class="page-item active">
  362. <a class="page-link" href="#">{{ page }}<span class="sr-only">(current)</span></a>
  363. </li>
  364. {% endif %}
  365. {% else %}
  366. <li class="page-item"><span class=ellipsis>...</span></li>
  367. {% endif %}
  368. {%- endfor %}
  369. </ul>
  370. </nav>
  371. </div>
  372. </div>
  373. <div class="footer">
  374. <p>
  375. <a href="//closed.social" target="_blank">闭社</a>提供技术支持
  376. </p>
  377. <p> 🄯 2020 Copyleft: closed.social</p>
  378. </div>
  379. </body>
  380. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  381. <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  382. <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/jquery.timeago.min.js"></script>
  383. <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/locales/jquery.timeago.zh-CN.js"></script>
  384. <script>
  385. function like(toot) {
  386. if ($(`#like-${toot} svg`).hasClass("liked")) {
  387. alert('赞都赞了,别撤回嘛');
  388. return;
  389. }
  390. $.ajax({
  391. type: 'POST',
  392. url: toot + '/like',
  393. success: (result, status, xhr) => {
  394. console.log(result + ' : ' + status);
  395. $(`#like-${toot} span`).text(result);
  396. $(`#like-${toot} svg`).toggleClass("like liked");
  397. },
  398. error: (xhr, status, error) => {
  399. alert(error + ': ' + xhr.responseText);
  400. }
  401. });
  402. }
  403. $(document).ready(function(){
  404. $('.timeago').timeago();
  405. $('.close').click((e) => {
  406. $(e.currentTarget).parent().remove();
  407. });
  408. $('.twin').click((e) => {
  409. if($(e.currentTarget).hasClass('front'))
  410. return;
  411. let behind_box = $('.behind');
  412. let front_box = $('.front');
  413. behind_box.toggleClass('behind front');
  414. front_box.toggleClass('front behind');
  415. });
  416. $('.collapse').on('show.bs.collapse', (e) => {
  417. let self = e.target;
  418. let toot = self.id.split('-')[1];
  419. $.ajax({
  420. type: 'GET',
  421. url: toot + '/comments',
  422. success: (result, status, xhr) => {
  423. if (result.replies.length) {
  424. $(self).empty();
  425. result.replies.forEach((rp) => {
  426. $(self).append(`<div class="card card-body"><p class="display_name"><a href="${rp.url}">${rp.disp}</a>:</p><pre class="inner">${rp.content}</pre><time class="timeago" datetime="${rp.time}"></time></div>`)
  427. });
  428. $(self).find('.timeago').timeago();
  429. } else {
  430. $(self).empty();
  431. $(self).append(`<div class="card card-body"><p>(暂无评论) <sub><a target="_blank" href="{{base_toot_url}}${toot}">发表第一条评论</sub></p></div>`)
  432. }
  433. },
  434. error: (xhr, status, error) => {
  435. console.log(error, status, xhr.status, xhr.responseText);
  436. $(self).empty();
  437. $(self).append(`<div class="card card-body"><p style="color:red">${xhr.status} ${xhr.responseText}</p></div>`);
  438. if (xhr.status == 404)
  439. setTimeout(() => {
  440. $(self).parent().remove()
  441. }, 3000);
  442. }
  443. });
  444. });
  445. });
  446. </script>
  447. </html>