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.
118 lines
5.2 KiB
118 lines
5.2 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 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>
|