mirror of
https://github.com/LingChair/LingChair-V0.git
synced 2025-12-08 01:55:50 +08:00
318 lines
15 KiB
HTML
318 lines
15 KiB
HTML
<!doctype html>
|
|
<html lang="zh-cmn-Hans">
|
|
<!--
|
|
* 铃之椅 - 把选择权还给用户, 让聊天权掌握在用户手中
|
|
* Copyright 2024 满月叶
|
|
* GitHub: https://github.com/MoonLeeeaf/LingChair-Web-Client
|
|
* 本项目使用 Apache 2.0 协议开源
|
|
*
|
|
* Copyright 2024 MoonLeeeaf
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
-->
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
|
|
<meta name="renderer" content="webkit" />
|
|
<meta name="force-rendering" content="webkit" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
|
<!-- Maybe it can run :D -->
|
|
<script src='https://polyfill.io/v3/polyfill.min.js?features=default%2Cdom4%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2Ces2020%2Ces2021%2Ces2022%2Ces5%2Ces6%2Ces7'></script>
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" />
|
|
<link rel="stylesheet" href="index.css" />
|
|
<link rel="stylesheet" href="chat-message.css" />
|
|
<link rel="stylesheet" href="mdui-prettier.css" />
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/gh/wilddeer/stickyfill@2.1.0/dist/stickyfill.min.js"></script>
|
|
<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
|
|
<link rel="icon" href="res/icon.ico" />
|
|
<title>铃之椅</title>
|
|
</head>
|
|
|
|
<body
|
|
class="mdui-theme-primary-teal mdui-theme-accent-teal mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-layout-auto"
|
|
id="app">
|
|
|
|
<input n-id="textCopierBtn" class="mdui-hidden" />
|
|
|
|
<div id="lingchair-app" style="height: 100%;">
|
|
<!-- 侧滑栏 -->
|
|
<div class="mdui-drawer" id="main-drawer">
|
|
<ul class="mdui-list" mdui-collapse="{accordion: true}">
|
|
<li class="mdui-list-item mdui-ripple">
|
|
<div class="mdui-list-item-avatar">
|
|
<img src="default_head.png" n-id="userHead" onerror="this.src='res/default_head.png'" />
|
|
</div>
|
|
<div class="mdui-list-item-content"><a n-id="helloText">早安</a>, <a n-id="userNick">Unknown</a></div>
|
|
</li>
|
|
<li class="mdui-list-item mdui-ripple" onclick="new mdui.Dialog(viewBinding.dialogSettings.get(0)).open()">
|
|
<i class="mdui-list-item-icon mdui-icon material-icons">settings</i>
|
|
<div class="mdui-list-item-content">设置</div>
|
|
</li>
|
|
<li class="mdui-list-item mdui-ripple" n-id="drawerSignOut">
|
|
<i class="mdui-list-item-icon mdui-icon material-icons">exit_to_app</i>
|
|
<div class="mdui-list-item-content">登出</div>
|
|
</li>
|
|
<div class="mdui-subheader">聊天</div>
|
|
<li class="mdui-collapse-item">
|
|
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple"><i class="mdui-list-item-icon mdui-icon material-icons">contacts</i>
|
|
<div class="mdui-list-item-content">联系人</div><i
|
|
class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
|
|
</div>
|
|
<div class="mdui-collapse-item-body mdui-list" n-id="contactsList">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="mdui-list mdui-hidden">
|
|
|
|
<li class="mdui-subheader">个人</li>
|
|
<li class="mdui-list-item mdui-ripple" onclick="new mdui.Dialog(viewBinding.dialogMyProfile.get(0)).open()">
|
|
<i class="mdui-list-item-icon mdui-icon material-icons">account_circle</i>
|
|
<div class="mdui-list-item-content">资料</div>
|
|
</li>
|
|
<li class="mdui-list-item mdui-ripple" onclick="new mdui.Dialog(viewBinding.dialogMyProfile.get(0)).open()">
|
|
<i class="mdui-list-item-icon mdui-icon material-icons">person_add</i>
|
|
<div class="mdui-list-item-content">新的好友</div>
|
|
</li>
|
|
<li class="mdui-subheader">客户端</li>
|
|
<li class="mdui-list-item mdui-ripple">
|
|
<i class="mdui-list-item-icon mdui-icon material-icons">settings</i>
|
|
<div class="mdui-list-item-content">设置</div>
|
|
</li>
|
|
<li class="mdui-list-item mdui-ripple" n-id="drawerChangeServer">
|
|
<i class="mdui-list-item-icon mdui-icon material-icons">cloud_circle</i>
|
|
<div class="mdui-list-item-content">更换服务器</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 应用栏 -->
|
|
<header class="mdui-appbar mdui-appbar-fixed">
|
|
<!-- Toolbar -->
|
|
<div class="mdui-toolbar mdui-color-theme">
|
|
<a mdui-drawer="{target: '#main-drawer'}" class="mdui-btn mdui-btn-icon mdui-ripple">
|
|
<i class="mdui-icon material-icons">menu</i>
|
|
</a>
|
|
<a class="mdui-typo-title" n-id="appTitle"></a>
|
|
<div class="mdui-toolbar-spacer"></div>
|
|
<a onclick="refreshAll()" n-id="contactsRefresh" class="mdui-btn mdui-btn-icon mdui-ripple">
|
|
<i class="mdui-icon material-icons">refresh</i>
|
|
</a>
|
|
<a onclick="ContactsList.openAddDialog()" n-id="contactsAdd" class="mdui-btn mdui-btn-icon mdui-ripple">
|
|
<i class="mdui-icon material-icons">add</i>
|
|
</a>
|
|
<a class="mdui-btn mdui-btn-icon mdui-ripple" n-id="switchNotifications">
|
|
<i class="mdui-icon material-icons" n-id="switchNotificationsIcon">notifications_off</i>
|
|
</a>
|
|
<a mdui-menu="{target: '#appbar-menu'}" class="mdui-btn mdui-btn-icon mdui-ripple">
|
|
<i class="mdui-icon material-icons">more_vert</i>
|
|
</a>
|
|
<ul class="mdui-menu" id="appbar-menu">
|
|
<li class="mdui-menu-item">
|
|
<a class="mdui-ripple" n-id="menuAbout">关于</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tab 栏 -->
|
|
<div class="mdui-tab mdui-accent-theme mdui-theme-color-auto" style="position: fixed; z-index: 114;width: 100%;"
|
|
mdui-tab n-id="chatTab">
|
|
<!-- 侧滑栏的 z-index 是2000, 在移动端会直接覆盖 -->
|
|
<a href="#page-chat-seesion" n-id="tabChatSeesion" class="mdui-ripple" style="text-transform: none;"></a>
|
|
</div>
|
|
<!-- 滚动到底部咋这么难写... -->
|
|
<div style="display: flex;flex-direction: column;">
|
|
<!-- 写时间居中写到吐了 这样式表不能要了 -->
|
|
<div
|
|
style="margin-top: 50px;overflow: auto;width: 100%;max-width: 100%;height: 100%;max-height: 100%;min-height: 0;flex: 1 1 auto;display: flex;flex-direction: column;"
|
|
n-id="chatPager">
|
|
<div class="mdui-center" style="margin: 15px;"><a href="javascript:;" onclick="ChatMsgAdapter.loadMore()"
|
|
class="mdui-text-color-theme">加载更多</a> | <a href="javascript:;"
|
|
onclick="ChatMsgAdapter.scrollToBottom()" class="mdui-text-color-theme">回到底部</a></div>
|
|
<div n-id="pageChatSeesion" style="flex: 1 1 auto;display: flex;flex-direction: column;position: relative;">
|
|
</div>
|
|
</div>
|
|
<!-- 妈的黑化了 私人玩意这么难整 早知道 z-index 弄死它得了 浪费我时间 我就没试过这么离谱的样式表 第三方库真难写CSS 就应该先写后端的 啊啊啊啊啊啊 -->
|
|
<!-- 不黑化了 因为 stickyfill -->
|
|
<div class="mdui-toolbar mdui-theme-color-auto"
|
|
style="position: sticky;max-width: 100%;margin-bottom: -30px;bottom: 0;z-index: 101;" n-id="inputToolbar">
|
|
<ul class="mdui-menu" id="msg-input-more">
|
|
<li class="mdui-menu-item">
|
|
<a class="mdui-ripple">插入图片</a>
|
|
</li>
|
|
</ul>
|
|
<div class="mdui-textfield" style="width: 100%;max-width: 100%;">
|
|
<textarea class="mdui-textfield-input" type="text" placeholder="(｡･ω･｡)" n-id="inputMsg"></textarea>
|
|
</div>
|
|
<div class="mdui-toolbar-spacer"></div>
|
|
<a n-id="sendMsg" class="mdui-btn mdui-btn-icon mdui-ripple">
|
|
<i class="mdui-icon material-icons">send</i>
|
|
</a>
|
|
<a mdui-menu="{target: '#msg-input-more', position: 'top'}" class="mdui-btn mdui-btn-icon mdui-ripple">
|
|
<i class="mdui-icon material-icons">more_vert</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 登录对话框 -->
|
|
<div class="mdui-dialog" n-id="dialogSignIn">
|
|
<div class="mdui-dialog-title">
|
|
登录到 铃之椅
|
|
</div>
|
|
<div class="mdui-dialog-content" style="margin-left:15px;margin-right:15px;">
|
|
<div class="mdui-textfield" n-id="dialogSignInServerLabel">
|
|
<i class="mdui-icon material-icons">cloud_circle</i>
|
|
<label class="mdui-textfield-label">服务器地址</label>
|
|
<input n-id="dialogSignInServer" class="mdui-textfield-input" type="text" placeholder="留空以使用网页所在地址"
|
|
n-input-ls="server" n-id="dialogSignServer" onblur="setUpClient(viewBinding.dialogSignServer.val())" />
|
|
</div>
|
|
<div class="mdui-textfield">
|
|
<i class="mdui-icon material-icons">account_circle</i>
|
|
<label class="mdui-textfield-label">账号</label>
|
|
<input n-id="dialogSignInName" class="mdui-textfield-input" maxlength="25" type="text"
|
|
n-input-ls="userName" />
|
|
</div>
|
|
<div class="mdui-textfield">
|
|
<i class="mdui-icon material-icons">lock</i>
|
|
<label class="mdui-textfield-label">密码</label>
|
|
<input n-id="dialogSignInPasswd" class="mdui-textfield-input" maxlength="30" type="password" />
|
|
</div>
|
|
<span>注：使用非已知的服务提供商提供的服务器时, 请注意个人信息保护哦 o(｡･ω･｡)o</span>
|
|
</div>
|
|
<div class="mdui-dialog-actions">
|
|
<button class="mdui-btn mdui-ripple"
|
|
onclick="User.signUp(viewBinding.dialogSignInName.val(), viewBinding.dialogSignInPasswd.val(), () => mdui.snackbar('注册成功, 请直接点击登录即可~'))">注册</button>
|
|
<button class="mdui-btn mdui-ripple" n-id="dialogSignInEnter"
|
|
onclick="User.signInWithDialog(viewBinding.dialogSignInName.val(), viewBinding.dialogSignInPasswd.val())">登录</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 资料卡对话框 -->
|
|
<div class="mdui-dialog" n-id="dialogProfile">
|
|
<div class="mdui-dialog-content" style="margin-left: 15px; margin-right: 15px; height: 101px;">
|
|
<div style="display: flex;justify-content: flex-start">
|
|
<img style="width: 60px; height: 60px;" class="mdui-img-circle" n-id="dialogProfileHead">
|
|
<div n-id="dialogProfileNick" style="font-size: 22px;align-self: center;margin-left: 20px;"
|
|
class="mdui-text-color-white"></div>
|
|
</div>
|
|
<div style="margin-left: 80px;"></div>
|
|
</div>
|
|
<div class="mdui-dialog-actions">
|
|
<button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 编辑昵称对话框 -->
|
|
<div class="mdui-dialog" n-id="dialogEditNick">
|
|
<div class="mdui-dialog-title">
|
|
修改昵称
|
|
</div>
|
|
<div class="mdui-dialog-content" style="margin-left:15px;margin-right:15px;">
|
|
<div class="mdui-textfield">
|
|
<label class="mdui-textfield-label">昵称</label>
|
|
<input n-id="dialogEditNickNick" class="mdui-textfield-input" maxlength="30" type="text" />
|
|
</div>
|
|
</div>
|
|
<div class="mdui-dialog-actions">
|
|
<button class="mdui-btn mdui-ripple" n-id="dialogEditNickClose" mdui-dialog-close
|
|
onclick="new mdui.Dialog(viewBinding.dialogSettings.get(0)).open()">关闭</button>
|
|
<button class="mdui-btn mdui-ripple"
|
|
onclick="User.setNick(viewBinding.dialogEditNickNick.val(), () => {mdui.snackbar('已保存, 刷新页面生效');viewBinding.dialogEditNickClose.click()})">保存</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 懂得都懂 -->
|
|
<div class="mdui-dialog" n-id="dialogNewFriendRequest">
|
|
<div class="mdui-dialog-title">
|
|
新的好友请求
|
|
</div>
|
|
<div class="mdui-dialog-content" style="margin-left:15px;margin-right:15px;">
|
|
<div class="mdui-textfield">
|
|
<label class="mdui-textfield-label">昵称</label>
|
|
<input n-id="" class="mdui-textfield-input" maxlength="30" type="text" />
|
|
</div>
|
|
</div>
|
|
<div class="mdui-dialog-actions">
|
|
<button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 懂得都懂 -->
|
|
<div class="mdui-dialog" n-id="dialogNewContact">
|
|
<div class="mdui-dialog-title">
|
|
添加好友/群
|
|
</div>
|
|
<div class="mdui-dialog-content" style="margin-left:15px;margin-right:15px;">
|
|
<div class="mdui-textfield">
|
|
<label class="mdui-textfield-label">好友/群的ID (不是名称)</label>
|
|
<input n-id="dialogNewContactID" class="mdui-textfield-input" maxlength="30" type="text" />
|
|
</div>
|
|
<select class="mdui-select" mdui-select="{position: 'top'}" n-id="dialogNewContactType">
|
|
<option value="single">好友</option>
|
|
<option value="group">群聊</option>
|
|
</select>
|
|
</div>
|
|
<div class="mdui-dialog-actions">
|
|
<button class="mdui-btn mdui-ripple" mdui-dialog-close
|
|
onclick="ContactsList.add(viewBinding.dialogNewContactID.val(), viewBinding.dialogNewContactType.val())">确认并关闭</button>
|
|
<button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 懂得都懂 -->
|
|
<div class="mdui-dialog" n-id="dialogSettings">
|
|
<div class="mdui-dialog-title">
|
|
设置
|
|
</div>
|
|
<div class="mdui-dialog-content">
|
|
<ul class="mdui-list">
|
|
<div class="mdui-subheader">我的资料</div>
|
|
<li class="mdui-list-item mdui-ripple" mdui-dialog-close
|
|
onclick="(async () => {viewBinding.dialogEditNickNick.val(await NickCache.getNick(localStorage.userName));new mdui.Dialog(viewBinding.dialogEditNick.get(0)).open()})()">
|
|
<i class="mdui-list-item-icon mdui-icon material-icons">edit</i>
|
|
<div class="mdui-list-item-content">修改昵称</div>
|
|
</li>
|
|
<li class="mdui-list-item mdui-ripple" onclick="User.uploadHeadImage()">
|
|
<i class="mdui-list-item-icon mdui-icon material-icons">account_circle</i>
|
|
<div class="mdui-list-item-content">上传头像</div>
|
|
</li>
|
|
<div class="mdui-subheader">客户端</div>
|
|
</ul>
|
|
</div>
|
|
<div class="mdui-dialog-actions">
|
|
<button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mdui-hidden">
|
|
<input type="file" n-id="uploadHeadImage" name="选择头像" onchange="User.uploadHeadImageCallback(this)"
|
|
accept="image/png, image/jpeg" />
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://unpkg.com/crypto-js@4.2.0/crypto-js.js"></script>
|
|
<script src="https://unpkg.com/socket.io-client@4.7.4/dist/socket.io.min.js"></script>
|
|
<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
|
|
</html> |