|
|
- <!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/box.png"/>
- <meta property="og:title" content="{{disp}}的提问箱" />
- <meta property="og:description" content="欢迎向我提问！" />
- <meta property="og:site_name" content="闭社匿名提问箱" />
- <meta property="og:image" content="/img/box.png" />
-
- <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>欢迎向我提问！- {{disp}}的提问箱</title>
- <style>
- .qbox {
- background:#e8e8e8;
- padding:5px;
- color:black;
- box-shadow: 2px 2px 10px 2px rgb(219 219 220);
- border-radius: .5rem;
- margin: 25px 0;
- }
- pre {
- margin: 15px 0 0 15px;
- white-space: pre-wrap;
- }
- .emoji {
- width: 24px;
- }
- .status-media {
- max-width: 100%;
- max-height: 550px;
- margin: 0 auto;
- }
- .timeago {
- font-size: 0.5em;
- text-align: right;
- }
- .display_name {
- margin: 0;
- }
- .card-body {
- padding: 0.75em;
- }
- </style>
- </head>
- <body style="background-color: #001a37;color:#e8e8e8">
- <div style="max-width:700px;" class="container">
- <div style="background-color:rgba(230,230,250,0.5);margin-bottom:80px">
-
- <div align='center' style='background-color:rgba(180,180,250,0.5);padding:10px;color:#ffffff;'>
- <div style="margin:20px">
- <span style='color:#555555;margin:0 10px;'> 闭社匿名提问箱</span>
- <a type="button" class="btn btn-dark btn-sm" href="/askMe">我也要创建</a>
- </div>
- <h2 align='center'>{{disp}}的提问箱</h2>
- <a rel="me" href="{{url}}">
- <div style="text-align:left; margin-bottom:10px;height:25px;font-size:20px" id="acct-info">
- <img src="{{avat}}" width="76">
- <span>@{{acct}}</span>
- </div>
- </a>
- </div>
- </div>
-
- <form action="new" method="post">
- <div class="form-group qbox">
- <label>向 {{disp}} 匿名提问</label>
- <textarea class="form-control" id="question" name="question" rows="5" maxlength="400" placeholder="在此处写下你想问的" required="required"></textarea>
- <button type="submit" class="btn btn-primary">发送提问</button>
- </div>
- </form>
-
- <hr/>
- <h3>对 {{disp}} 的提问({{qs|length}})</h3>
-
- {% for q in qs|reverse %}
- <div class="qbox">
- <pre>{{q.content}}</pre>
- <div style="text-align:right">
- <time class="timeago" datetime="{{q.time}}"></time>
- <a class="btn btn-link request-answer" data-toggle="collapse" href="#collapse-{{q.toot}}" role="button" aria-expanded="false" aria-controls="collapse-{{q.toot}}">
- 查看回复
- <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"></path></svg></span>
- </a>
- </div>
- <div class="collapse" id="collapse-{{q.toot}}">
- <div class="card card-body">
- 加载中...
- </div>
- </div>
- </div>
- {% endfor %}
-
- <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>
- ${rp.images.map((url) => `<image class="status-media" src=${url}>`)}
- <time class="timeago" datetime="${rp.time}"></time>
- </div>
- `);
- });
- $(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>
-
- </div>
-
- <footer style="background-color:#000010;color:white;border-top: 1px solid white;margin-top:80px;padding-top:10px;">
- </footer>
- <script>
- $('footer').load('../../footer.html');
- </script>
- </body>
- </html>
|
