首页/ mobileweb/ 在线聊天室H5移动端功能演示/ 代码预览

💻 代码预览 · 在线聊天室H5移动端功能演示

mw_social · 上传者 驰旭教育
← 返回详情
r52/secure.html · 约 2435 字符
1<!doctype html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>创建加密房间</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11  <header class="top">
12    <div class="top-l">用户 · 夜行者</div>
13    <div class="top-r">创建加密房间</div>
14  </header>
15  <main class="main">
16<div class="banner"><div class="b1">🔐 创建加密房间</div>
17<div class="b2">仅密码持有者可进入,消息端到端加密保护</div></div>
18<div class="card glow">
19  <div class="sec-title"><span class="em">🏷️</span> 房间名称</div>
20  <input class="input" placeholder="如「核心开发组」">
21</div>
22<div class="card">
23  <div class="sec-title"><span class="em">🔑</span> 访问密码</div>
24  <input class="input" type="password" placeholder="设置 6 位以上密码">
25  <div class="row" style="margin-top:10px"><div class="muted">显示密码</div><div class="switch" onclick="this.classList.toggle('on')"></div></div>
26</div>
27<div class="card">
28  <div class="sec-title"><span class="em">🛡️</span> 加密设置</div>
29  <div class="guide"><div class="info"><div class="nm">端到端加密</div><div class="sub">消息仅成员可见</div></div><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
30  <div class="guide"><div class="info"><div class="nm">禁止截图</div><div class="sub">客户端拦截</div></div><div class="switch" onclick="this.classList.toggle('on')"></div></div>
31  <div class="guide"><div class="info"><div class="nm">邀请制加入</div><div class="sub">需房主审批</div></div><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
32</div>
33<a class="btn full" href="rooms.html" style="text-decoration:none;text-align:center">创建并进入</a>
34<div class="muted" style="text-align:center">创建后房间出现在「房间列表 · 加密」</div>
35</main>
36  <nav class="nav"><a class="" href="enter.html"><span class="ic">💬</span>进入</a><a class="" href="rooms.html"><span class="ic">🏠</span>房间</a><a class="" href="chat.html"><span class="ic">🗨️</span>聊天</a><a class="" href="members.html"><span class="ic">👥</span>成员</a><a class="" href="settings.html"><span class="ic">⚙️</span>我的</a></nav>
37</div>
38<script></script>
39</body>
40</html>