前端显示

2024-06-24 21:36:04 +08:00
parent 52f5f0f190
commit 372bc7e594
27 changed files with 342 additions and 172 deletions
@@ -1,6 +1,165 @@
-<html>
+<html><html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            padding: 1rem 2rem 2rem;
+            width: 880px;
+            border-radius: 0.7em;
+            margin: 0 auto;
+            background-color: rgba(255, 255, 255, 0.9);
+            font-size: 14px;
+            color: #2c3e50;
+        }
+        .集数按钮 {
+            font-weight: 600;
+            color: #000;
+            background-color: #FFF000;
+            width: 43px;
+            border-radius: 10px;
+            text-align: center;
+            padding: 4px 6px;
+            display: inline-block;
+            cursor: pointer;
+            transition: 0.2s linear;
+        }
+        .集数按钮:hover {
+            opacity: 0.5;
+        }
+        .各集内容 {
+            padding: 14px;
+            display: none;
+        }
+        .各集内容 span{
+            font-size: 24px;
+            font-weight: bolder;
+            color: #000;
+        }
+        .各集内容 .内容 {
+            border-radius: 15px;
+            border: 2px solid #000;
+            padding: 6px 15px;
+            background-color: #FFF;
+            max-width: 580px;
+        }
+        .各集内容 img {
+            width: 254px;
+            height: auto;
+        }
+        .各集内容 p {
+            font-size: 16.8px;
+            line-height: 1.6;
+        }
+
+    </style>
+</head>
+
 <body>
-<h1>hello word!!!</h1>
-<p>this is a html page</p>
+<div class="集数按钮">#01</div>
+<div class="集数按钮">#02</div>
+<div class="集数按钮">#03</div>
+<div class="集数按钮">#04</div>
+<div class="集数按钮">#05</div>
+<div class="集数按钮">#06</div>
+<div class="集数按钮">#07</div>
+<div class="集数按钮">#08</div>
+
+<div class="各集内容">
+    <span>#01 骚扰机器人</span>
+    <div class="内容">
+        <img src="image/骚扰机器人.png">
+
+
+        <p>在群中发送“111”字样即可让robot“稍微的”理你一下</p>
+    </div>
+</div>
+<div class="各集内容">
+    <span>#02 群聊主动回复</span>
+    <div class="内容">
+        <img src="image/群聊回复1.png">
+        <img src="image/群聊回复2.png">
+
+
+
+        <p>在群聊中消息带上“呼叫管理”，管理员便可以在控制台进行回复</p>
+    </div>
+</div>
+<div class="各集内容">
+    <span>#03 临时会话回复</span>
+    <div class="内容">
+        <img src="image/临时会话1.png">
+        <img src="/image/临时会话2.png">
+
+
+        <p>在群聊中对bot进行临时会话，管理员便可在控制台进行回复</p>
+    </div>
+</div>
+<div class="各集内容">
+    <span>#04 好友消息回复</span>
+    <div class="内容">
+        <img src="image/好友发送消息.jpg">
+
+        <p>bot的好友发起聊天后，管理员便可以在控制台进行回复</p>
+
+    </div>
+</div>
+<div class="各集内容">
+    <span>#05 接收消息</span>
+    <div class="内容">
+        <img src="">
+        <img src="image">
+
+
+        <p>在群聊中或者与机器人进行私聊，控制台便可以接收到信息</p>
+    </div>
+</div>
+<div class="各集内容">
+    <span>#06 钓鱼游戏</span>
+    <div class="内容">
+        <img src="image/钓鱼.png">
+
+        <p>在群聊中发送“钓鱼”字样，即可进行“有趣的”钓鱼游戏</p>
+        <p>“钓鱼虽好，可不要贪杆哦”</p>
+    </div>
+</div>
+<div class="各集内容">
+    <span>#07 禁言套餐</span>
+    <div class="内容">
+        <img src="image/原神1.png">
+        <img src="image/原神2.png">
+        <p>在群中发送消息带有某个“**启动”“OP”等违禁词即可喜提“60S”禁言+撤回大礼包</p>‘
+        <p>偷偷告送你，分开输入的话笨蛋robot是检测不出来的</p>
+    </div>
+</div>
+<div class="各集内容">
+    <span>#08 文字冒险（待实现）</span>
+    <div class="内容">
+        <img src="image/文字游戏.png">
+
+        <p>在群聊中发送”txtgame“即可进行紧张刺激的文字冒险游戏</p>
+        <p></p>
+    </div>
+</div>
+
+
+
+<script>
+    var contents = document.getElementsByClassName("各集内容");
+    contents[0].style.display = "block";
+    var active_index = 0;
+
+    function show(index) {
+        contents[active_index].style.display = "none";
+        contents[active_index = index].style.display = "block";
+    }
+
+    var buttons = document.getElementsByClassName("集数按钮");
+    for (let i = 0; i < buttons.length; i++) {
+        buttons[i].addEventListener("click", () => {
+            show(i);
+        });
+    }
+</script>
+
 </body>
 </html>