|
|
- <!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 href="https://fonts.yecdn.com/css2?family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">
- <link href="https://fonts.yecdn.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
- <link rel="stylesheet" href="./static/index.css">
- <title>闭播</title>
- </head>
-
- <body>
- <div class="container" style="overflow: hidden;min-height: 100vh">
- <div style='padding:15px;margin-bottom:50px'>
- <h1>Simple is Better Than Complex</h1>
- </div>
-
- <div class="part1">
- <div id="new" class="new front">
- <div class="qbox">
- <h2 style="margin: -12px -7px 20px">房间列表</h2>
- <ul>
- {% for cid, title, is_private, user, token, user_cnt in ch_list %}
- <li class="mb-2">
- <b class="mr-3">{{title}}</b>
- <span class="u-cnt">{{user_cnt}}人在线</span>
- {% if is_private and not _cid %}
- 【非公开】
- {% else %}
- 第一发言者: <a href="{{user.url}}" target="_blank"><img class="rounded-circle" src="{{user.avat}}" width="20"></a>
- <form class="join-form" id="form-{{cid}}">
- <input type="hidden" name="channel" value="{{cid}}">
- <input type="hidden" name="token" value="{{token}}">
- <button type="submit" class="btn btn-link mb-2 join-btn">加入</button>
- <button type="button" class="btn btn-link mb-2 leave-btn">离开</button>
- </form>
- {% endif %}
- {% if user.id == me.id and not _cid %}
- <a href="?cid={{cid}}"><small>分享链接</small></a>
- {% endif %}
- </li>
- {% endfor %}
- </ul>
- {% if _cid %}
- <p><small>分享目前的网址给其他人，他们就可以加入房间了。<br>注意，这是加入非公开房间的唯一方式。<br><a href="?cid=">返回完整列表</a></small></p>
- {% endif %}
- <hr>
- <hr>
- <hr>
- <form class="form-inline" action="new" method='POST'>
- <input type="text" class="form-control mb-3 mr-sm-2" name="title" placeholder="房间名" maxlength="50" required>
- <div class="input-group mb-3 mr-sm-2">
- <input type="text" class="form-control" name="cid" placeholder="房间id，留空自动生成" pattern="[a-zA-Z0-9_\.\-]{0,63}">
- </div>
- <div class="form-check mr-sm-2">
- <input class="form-check-input" type="checkbox" name="private">
- <label class="form-check-label" for="inlineFormCheck">非公开</label>
- </div>
- <button type="submit" class="btn btn-link mb-2 btn-lg">新建!</button>
- </form>
- </div>
- </div>
- </div>
-
- <div class="part2" id="part2">
- <h2>圆桌会议成员</h2>
- <div class="qbox" id="local-player">
- <p>我 (
- <a href="{{me.url}}" target="_blank">
- <img class="rounded-circle" src="{{me.avat}}" width="20">
- </a>
- {{me.disp}} @{{me.acct}}
- )
- <a href="logout" class="logout-link">退出重新登录</a>
- </p>
- <div id="local-volume">
- <label>发言音量:</label>
- 0%
- <input type="range" id="local-volume-range" min="0" max="30" step="0.1" value="10" list="Z">
- <datalist id="Z">
- <option>10</option>
- <option>0</option>
- <option>30</option>
- </datalist>
- 300%
- </div>
- <progress value="0" max="1"></progress>
- <form class="form-inline mt-3 send-message" action="">
- <input type="text" class="form-control mb-1 mr-sm-2" name="text" placeholder="发送文字" required="">
- <button type="submit" class="btn btn-link mb-2">发送</button>
- </form>
- </div>
- <div id="remote-playerlist">
- </div>
- <h5>文字区</h5>
- <div class="qbox" id="chat-box">
- </div>
- </div>
-
- </div>
- <div class="footer">
- <p> 🄯 2021 Copyleft: closed.social</p>
- </div>
- <script type="text/javascript">
- window._APPID = "{{app_id}}";
- window._RTM_TOKEN = "{{rtm_token}}";
- window._MY_NAME = "{{me.acct}}";
- window._UID = {{me.id}};
- </script>
- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
- <script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.4.0.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/agora-rtm-sdk@1.4.3/index.js"></script>
- <script src="./static/index.js"></script>
- </body>
- </html>
|
