98 lines
8.2 KiB
HTML
98 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head> <meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NodeCrypt</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/body.css">
|
|
<link rel="stylesheet" href="css/phone.css">
|
|
<link rel="stylesheet" href="css/form-animation.css">
|
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
|
<style>
|
|
/* 添加一个预加载样式，避免闪烁 */
|
|
.preload * {
|
|
-webkit-transition: none !important;
|
|
-moz-transition: none !important;
|
|
-ms-transition: none !important;
|
|
-o-transition: none !important;
|
|
transition: none !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="preload">
|
|
<div class="login-container" id="login-container">
|
|
<h1 id="login-title"></h1>
|
|
<form id="login-form">
|
|
<!-- 登录表单内容将由JavaScript动态生成 -->
|
|
<!-- Login form content will be dynamically generated by JavaScript -->
|
|
</form>
|
|
</div><div class="container" id="chat-container" style="display:none;">
|
|
<div class="mobile-sidebar-mask" id="mobile-sidebar-mask"></div>
|
|
<div class="mobile-rightbar-mask" id="mobile-rightbar-mask"></div>
|
|
<!-- Settings panel as a sidebar replacement -->
|
|
<div class="settings-sidebar" id="settings-sidebar" style="display:none;"> <div class="settings-header"> <button class="settings-back-btn" id="settings-back-btn" title="" aria-label="">
|
|
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15 18L9 12L15 6" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button><h2 class="settings-title" id="settings-title"></h2>
|
|
</div>
|
|
<div class="settings-content" id="settings-content">
|
|
<!-- Settings content will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-user"> <span class="avatar" id="sidebar-user-avatar"></span> <span class="sidebar-username" id="sidebar-username"></span> <button class="settings-btn" id="settings-btn" title="" aria-label=""> <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M10.65 3L9.93163 3.53449L9.32754 5.54812L7.47651 4.55141L6.5906 4.68143L4.68141 6.59062L4.55139 7.47652L5.5481 9.32755L3.53449 9.93163L3 10.65V13.35L3.53449 14.0684L5.54811 14.6725L4.55142 16.5235L4.68144 17.4094L6.59063 19.3186L7.47653 19.4486L9.32754 18.4519L9.93163 20.4655L10.65 21H13.35L14.0684 20.4655L14.6725 18.4519L16.5235 19.4486L17.4094 19.3185L19.3186 17.4094L19.4486 16.5235L18.4519 14.6724L20.4655 14.0684L21 13.35V10.65L20.4655 9.93163L18.4519 9.32754L19.4486 7.47654L19.3186 6.59063L17.4094 4.68144L16.5235 4.55142L14.6725 5.54812L14.0684 3.53449L13.35 3H10.65ZM10.4692 6.96284L11.208 4.5H12.792L13.5308 6.96284L13.8753 7.0946C13.9654 7.12908 14.0543 7.16597 14.142 7.2052L14.4789 7.35598L16.7433 6.13668L17.8633 7.25671L16.644 9.52111L16.7948 9.85803C16.834 9.9457 16.8709 10.0346 16.9054 10.1247L17.0372 10.4692L19.5 11.208V12.792L17.0372 13.5308L16.9054 13.8753C16.8709 13.9654 16.834 14.0543 16.7948 14.1419L16.644 14.4789L17.8633 16.7433L16.7433 17.8633L14.4789 16.644L14.142 16.7948C14.0543 16.834 13.9654 16.8709 13.8753 16.9054L13.5308 17.0372L12.792 19.5H11.208L10.4692 17.0372L10.1247 16.9054C10.0346 16.8709 9.94569 16.834 9.85803 16.7948L9.52111 16.644L7.25671 17.8633L6.13668 16.7433L7.35597 14.4789L7.2052 14.142C7.16597 14.0543 7.12908 13.9654 7.0946 13.8753L6.96284 13.5308L4.5 12.792L4.5 11.208L6.96284 10.4692L7.0946 10.1247C7.12907 10.0346 7.16596 9.94571 7.20519 9.85805L7.35596 9.52113L6.13666 7.2567L7.25668 6.13667L9.5211 7.35598L9.85803 7.2052C9.9457 7.16597 10.0346 7.12908 10.1247 7.0946L10.4692 6.96284ZM14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C10.7574 14.25 9.75 13.2426 9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C13.2426 9.75 14.25 10.7574 14.25 12ZM15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z"
|
|
fill="#808080"></path>
|
|
</g>
|
|
</svg> </button> </div> <div class="join-room"> <svg class="MuiSvgIcon-root icon-22-middle" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"></path>
|
|
</svg> <span id="join-room-text"></span> </div>
|
|
<div class="rooms" id="room-list"> </div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="main-header" id="main-header"> </div>
|
|
<div class="chat-area" id="chat-area"> </div>
|
|
<div class="chat-input-area">
|
|
<div class="rows-wrapper chat-input-wrapper chat-input-main-wrapper chat-rows-wrapper"> <div class="new-message-wrapper rows-wrapper-row" data-offset="commands"> <button class="chat-emoji-btn" type="button" title=""> <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM9.375 10.5C9.99632 10.5 10.5 9.99632 10.5 9.375C10.5 8.75368 9.99632 8.25 9.375 8.25C8.75368 8.25 8.25 8.75368 8.25 9.375C8.25 9.99632 8.75368 10.5 9.375 10.5ZM15.75 9.375C15.75 9.99632 15.2463 10.5 14.625 10.5C14.0037 10.5 13.5 9.99632 13.5 9.375C13.5 8.75368 14.0037 8.25 14.625 8.25C15.2463 8.25 15.75 8.75368 15.75 9.375ZM12 15C10.1783 15 9 13.8451 9 12.75H7.5C7.5 14.9686 9.67954 16.5 12 16.5C14.3205 16.5 16.5 14.9686 16.5 12.75H15C15 13.8451 13.8217 15 12 15Z"
|
|
fill="#808080"></path>
|
|
</g>
|
|
</svg> </button> <div class="input-message-container">
|
|
<div class="input-message-input is-empty scrollable scrollable-y no-scrollbar input-message-input-init" contenteditable="true" dir="auto" tabindex="-1"></div> <span class="input-field-placeholder i18n is-empty"></span>
|
|
<div contenteditable="true" tabindex="-1" class="input-message-input is-empty scrollable scrollable-y no-scrollbar input-field-input-fake"></div> <button class="chat-attach-btn chat-attach-btn-abs" type="button" title=""> <svg width="30px" height="30px"
|
|
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M10.6875 3.75C8.96439 3.75 7.5 5.23565 7.5 7.15385L7.5 15.4615C7.5 18.1444 9.55201 20.25 12 20.25C14.448 20.25 16.5 18.1444 16.5 15.4615V7.15385H18V15.4615C18 18.8963 15.351 21.75 12 21.75C8.649 21.75 6 18.8963 6 15.4615L6 7.15385C6 4.48383 8.06137 2.25 10.6875 2.25C13.3136 2.25 15.375 4.48383 15.375 7.15385V15.4615C15.375 17.3669 13.9013 18.9808 12 18.9808C10.0987 18.9808 8.625 17.3669 8.625 15.4615V7.15385H10.125V15.4615C10.125 16.615 11.0018 17.4808 12 17.4808C12.9982 17.4808 13.875 16.615 13.875 15.4615V7.15385C13.875 5.23565 12.4106 3.75 10.6875 3.75Z"
|
|
fill="#808080"></path>
|
|
</g>
|
|
</svg></button>
|
|
</div> <input type="file" multiple class="input-hidden">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightbar" id="rightbar">
|
|
<div class="rightbar-header"> <div class="rightbar-group">
|
|
<div class="group-info">
|
|
<div class="title" id="members-title"></div>
|
|
<div class="group-desc" id="rightbar-group-desc"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightbar-tabs tabs" id="member-tabs"> </div> <div class="members" id="member-list"> </div>
|
|
</div> </div> <script type="module" src="./js/main.js"></script>
|
|
</body>
|
|
</html> |