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

184 lines
7.8 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
  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. <meta property="og:title" content="华清特奖报名" />
  7. <meta property="og:description" content="华清大学特普通奖学金" />
  8. <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  9. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  10. <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  11. <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/jquery.timeago.min.js"></script>
  12. <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/locales/jquery.timeago.zh-CN.js"></script>
  13. <title>华清特奖报名</title>
  14. <style>
  15. .qbox {
  16. background:#e8e8e8;
  17. padding:5px;
  18. color:black;
  19. box-shadow: 2px 2px 17px 2px rgb(219 219 220);
  20. border-radius: .5rem;
  21. margin: 35px 5px;
  22. }
  23. .qbox .inner {
  24. margin: 15px 0 0 15px;
  25. white-space: pre-wrap;
  26. }
  27. .timeago {
  28. font-size: 0.5em;
  29. text-align: right;
  30. }
  31. .display_name {
  32. margin: 0;
  33. }
  34. .card-body {
  35. padding: 0.75em;
  36. }
  37. .new {
  38. overflow: hidden;
  39. }
  40. .new-collapse {
  41. max-height: 125px;
  42. -webkit-mask-image: linear-gradient(#1a1a1a,transparent);
  43. mask-image: linear-gradient(#1a1a1a,transparent);
  44. }
  45. .show-button {
  46. position: relative;
  47. text-align: center;
  48. margin-top: -125px;
  49. padding-top: 110px;
  50. width: 100%;
  51. }
  52. @keyframes downn {
  53. 0% {
  54. transform: translate(0px, -5px);
  55. }
  56. 50% {
  57. transform: translate(0px, 2px);
  58. }
  59. 100% {
  60. transform: translate(0px, -5px);
  61. }
  62. }
  63. </style>
  64. </head>
  65. <body style="background-color: #001a37;color:#e8e8e8">
  66. <div style="max-width:700px;" class="container">
  67. <div style='padding:20px;text-align:center'>
  68. <h1>华清大学<br/>特普通奖学金</h1>
  69. </div>
  70. <div id="new" class="new new-collapse">
  71. <form action="new" method="post">
  72. <div class="form-group qbox">
  73. <h4>自荐提名</h4>
  74. <textarea class="form-control" name="text" rows="5" maxlength="400" placeholder="一段简单的自我陈述,向大家展示普通的自己。鼓励写写自己未被计入主流评价体系的闪光点,或是独特的经历与坚持。" required="required"></textarea>
  75. <hr/>
  76. <textarea class="form-control" name="privateText" rows="3" maxlength="400" placeholder="可以在这里写一些不想被公开的内容,只有评委们能看到。如果你希望留下联系方式,也可以写在这里。"></textarea>
  77. <hr/>
  78. <div class="form-group row">
  79. <label for="url" class="col-sm-3 col-form-label">补充材料(可选)</label>
  80. <div class="col-sm-9">
  81. <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]+)?)">
  82. </div>
  83. </div>
  84. <hr/>
  85. {% for v in vs %}
  86. <div class="form-group row">
  87. <label for="{{v.name}}" class="col-sm-4 col-form-label">{{v.ques}}</label>
  88. <div class="col-sm-8">
  89. <input type="text" class="form-control" id="{{v.name}}" name="{{v.name}}" placeholder="{{v.hint}}">
  90. </div>
  91. </div>
  92. {% endfor %}
  93. <button type="submit" class="btn btn-primary">报名!</button>
  94. </div>
  95. </form>
  96. <div style="font-size:80%">
  97. <p>提示:</p>
  98. <ol>
  99. <li>初选报名不需要登陆任何帐号,你可以留下联系方式或可验证身份的信息(如公钥/数字签名),也可以不留。</li>
  100. <li>如果需要附上补充材料,请使用清华云盘。为了避免泄露姓名推荐使用<a href="/safeShare" target="_blank">safeShare</a>,我们不接受其他云盘。</li>
  101. <li>下方的评论来自闭社用户。如需删除自己发布的介绍请让任意一位工作人员评论“删除”。</li>
  102. <li>需要回答几个简单的问题以初步验证清华身份。入围后需要用清华邮箱注册闭社以正式验证清华身份。</li>
  103. <li>建议在电脑上操作以免丢失未保存的内容。如果出错(例如验证问题答错了),请回退,多数浏览器都会恢复之前填写的内容。</li>
  104. </ol>
  105. </div>
  106. </div>
  107. <a href="##" onclick="showNew()" style="display:block">
  108. <div class="show-button">
  109. 展开<span style="display: inline-flex; align-items: center;animation: downn 2s infinite;"><svg class="Zi Zi--ArrowDown ContentItem-arrowIcon" fill="currentColor" viewBox="0 0 24 24" width="24" height="24"><path d="M12 13L8.285 9.218a.758.758 0 0 0-1.064 0 .738.738 0 0 0 0 1.052l4.249 4.512a.758.758 0 0 0 1.064 0l4.246-4.512a.738.738 0 0 0 0-1.052.757.757 0 0 0-1.063 0L12.002 13z" fill-rule="evenodd"></path></svg></span>
  110. </div>
  111. </a>
  112. <script>
  113. function showNew() {
  114. $('#new').removeClass('new-collapse');
  115. $('.show-button').hide();
  116. }
  117. </script>
  118. <br/>
  119. <br/>
  120. <h3>已有的报名</h3>
  121. {% for c in cans %}
  122. <div class="qbox">
  123. <pre class="inner">{{c.content}}</pre>
  124. {% if c.url %}
  125. <p class="inner"><a href="{{c.url}}" target="_black">补充材料</a></p>
  126. {% endif %}
  127. <div style="text-align:right">
  128. <time class="timeago" datetime="{{c.time}}"></time>
  129. <a class="btn btn-link request-answer" data-toggle="collapse" href="#collapse-{{c.toot}}" role="button" aria-expanded="false" aria-controls="collapse-{{c.toot}}">
  130. 查看评论
  131. <span><svg fill="#007bff" viewBox="0 0 24 24" width="24" height="24" ><path d="M12 13L8.285 9.218a.758.758 0 0 0-1.064 0 .738.738 0 0 0 0 1.052l4.249 4.512a.758.758 0 0 0 1.064 0l4.246-4.512a.738.738 0 0 0 0-1.052.757.757 0 0 0-1.063 0L12.002 13z" style="animation: downn 1.5s infinite;"></path></svg></span>
  132. </a>
  133. </div>
  134. <div class="collapse" id="collapse-{{c.toot}}">
  135. <div class="card card-body">
  136. 加载中...
  137. </div>
  138. </div>
  139. </div>
  140. {% endfor %}
  141. <script>
  142. $('.timeago').timeago();
  143. $('.collapse').on('show.bs.collapse', (e) => {
  144. let self = e.target;
  145. let toot = self.id.split('-')[1];
  146. $.ajax({
  147. type:'GET',
  148. url:toot,
  149. success:(result,status,xhr) => {
  150. console.log(result+' : '+status);
  151. if(result.replies.length) {
  152. $(self).empty();
  153. result.replies.forEach((rp) => {
  154. $(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>`)
  155. });
  156. console.log($(self).find('.timeago'));
  157. $(self).find('.timeago').timeago();
  158. }else {
  159. $(self).empty();
  160. $(self).append(`<div class="card card-body">(暂无评论)</div>`)
  161. }
  162. },
  163. error:(xhr,status,error) => {
  164. console.log(error, status, xhr.status, xhr.responseText);
  165. $(self).empty();
  166. $(self).append(`<div class="card card-body"><p style="color:red">${xhr.status} ${xhr.responseText}</p></div>`);
  167. if(xhr.status == 404)
  168. setTimeout(()=>{$(self).parent().remove()}, 3000);
  169. }
  170. });
  171. });
  172. </script>
  173. </div>
  174. </body>
  175. </html>