From 8388cf5925d3dcb2b553680c81781b945aec0535 Mon Sep 17 00:00:00 2001
From: skimrme <skimrme@mo.email>
Date: Sat, 26 Jul 2025 07:05:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E4=BA=9B=E4=BF=AE=E6=94=B9=EF=BC=8C?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4api=E9=A1=B5=E9=9D=A2=EF=BC=8C=E9=80=90?=
 =?UTF-8?q?=E6=B8=90=E5=AE=8C=E5=96=84=E5=BC=B9=E5=B9=95=E7=95=99=E8=A8=80?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=BB=E9=A1=B5=E6=97=A5=E5=BF=97=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   1 +
 public/api/index.php                          |   0
 public/blog/index.html                        |   5 +
 public/message/index.php                      | 116 +++++++++++-------
 public/message/index.php.114514               |  49 --------
 public/message/index.php.back                 |  52 --------
 .../static/css/message.css}                   |   0
 public/message/static/css/video.css           |  33 +++++
 public/message/static/js/video.js             |  54 ++++++++
 public/message/static/txt/message.txt         |   1 +
 10 files changed, 168 insertions(+), 143 deletions(-)
 delete mode 100755 public/api/index.php
 delete mode 100755 public/message/index.php.114514
 delete mode 100755 public/message/index.php.back
 rename public/{api/docs/index.php => message/static/css/message.css} (100%)
 create mode 100755 public/message/static/css/video.css
 create mode 100755 public/message/static/js/video.js

diff --git a/.gitignore b/.gitignore
index cf531c3..bca57cb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 databases/*
 src/*
+public/message/static/src/video/*
diff --git a/public/api/index.php b/public/api/index.php
deleted file mode 100755
index e69de29..0000000
diff --git a/public/blog/index.html b/public/blog/index.html
index 445b16c..52a5ec7 100755
--- a/public/blog/index.html
+++ b/public/blog/index.html
@@ -16,6 +16,7 @@
                         <td id="td_navbar_52px"><b><a href="https://gitea.ww3.tw/skimrme/" id="url_">gitea</a></b></td>
                         <td id="td_navbar_135px"><b><a href="https://ww3.tw/docker-registry/" id="url_">docker-registry</a></b></td>
                         <td id="td_navbar_40px"><b><a href="https://ww3.tw/api/" id="url_">api</a></b></td>
+                         <td id="td_navbar_40px"><b><a href="https://wiki.ww3.tw/" id="url_">wiki</a></b></td>
                     </tr>
                 </tbody>
             </table>
@@ -26,6 +27,10 @@
             <font size="3.2">
                 <table border="0">
                     <tbody>
+                        <tr>
+                            <td id="td_logs">2025.07.26</td>
+                            <td id="td_logs_content">新增<a href="https://wiki.ww3.tw">wiki</a>页面</td>
+                        </tr>
                         <tr>
                             <td id="td_logs">2025.07.20</td>
                             <td id="td_logs_content">新增<a href="https://gitea.ww3.tw/skimrme">gitea</a>、<a href="https://ww3.tw/docker-registry/">docker-registry</a>页面</td>
diff --git a/public/message/index.php b/public/message/index.php
index da2feee..1ee7a97 100755
--- a/public/message/index.php
+++ b/public/message/index.php
@@ -28,28 +28,20 @@
                         <a id="back_url" href="https://ww3.tw/"><b>..返回主页</b></a>
                     </div>
                     <div id="message_video">
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <h1>
-                            暂无视频
-                        </h1>
+                        <video src="./static/src/video/cirno-up-down.mp4" controls width="640" height="360">
+                            您的浏览器不支持视频播放。
+                        </video>
                     </div>
                     <div id="message_com">
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        评论展示区
-                        <div id="message_com_black">
-                            发送区
+                        <div id="push_message">
+                            <label for="message">输入内容 : </label>
+                            <input type="text" id="message" placeholder="qwq">
+                            <button onclick="push_message()">发送弹幕</button>
+                            <br>
+                            <p>弹幕列表</p> 
+                            <pre id="get_message"></pre>
                         </div>
-                    </div>
+                    <div> 
                 </div>
             </div>
         </body>
@@ -75,13 +67,12 @@
 
 #message_video
 {
-    background-color: blue;
+    background-color: rgba(0, 0, 0, 0);
     color: white;
     text-align: center;
     width: 60%;
     height: 69%;
     margin: auto;
-    position: absolute;
     top: 22%;
     left: 0;
     right: 0;
@@ -92,35 +83,19 @@
 
 #message_com
 {
-    background-color: white;
-    text-align: center;
+    background-color: rgba(255, 255, 255, 0);
+
     width: 33%;
     height: 69%;
     margin: auto;
-    position: absolute;
     top: 22%;
     left: 0;
     right: 0;
     bottom: 0;
     /*  页面边距 上、右、下、左 */
-    margin: 1.89% 0px 0px 63.8%;
+    margin: -38.4% 0px 0px 63.8%;
 }
 
-#message_com_black
-{
-    background-color: black;
-    color: white;
-    width: 100%;
-    height: 8%;
-    margin: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /*  页面边距 上、右、下、左 */
-    margin: 108% 0px 0px 0%;
-}
 
 #back_blok{
     /* 返回主页 */
@@ -134,7 +109,7 @@
     right: 0;
     bottom: 0;
     /*  页面边距 上、右、下、左 */
-    margin: 4% 0px 0px 36.8%;
+    margin: -30% 0px 0px 36.8%;
 }
 
 #back_url
@@ -144,9 +119,66 @@
 }
 </style>
 
+<!--这里是专属js-->
 <script>
-//这里是专属js
+function push_message() {
+    const messageInput = document.getElementById('message'); // 获取输入框元素本身
+    const messageContent = messageInput.value.trim(); // 获取输入框的值
+
+    if (messageContent === "") {
+        alert("弹幕内容不能为空！");
+        return;
+    }
+        
+        messageInput.value = ''; 
+        // *** 在这里清空输入框 ***
+
+        messageInput.focus();
+        // 如果你想让输入框在清空后立即获得焦点，方便用户继续输入
+    }
 
 
+</script>
+<script>
+// 这是你的 API 地址，请确保它是正确的
+const API_URL = 'https://api.ww3.tw/danmu/index.php'; 
+// 使用 DOMContentLoaded 事件，确保页面 HTML 结构加载完成后再执行 JavaScript
+        document.addEventListener('DOMContentLoaded', async () => {
+            // 获取用于显示内容的 <pre> 元素
+            const getMessageElement = document.getElementById('get_message');
+            
+            try {
+                // 发送 GET 请求到 API
+                const response = await fetch(API_URL);
 
+                // 检查 HTTP 响应状态码。如果不是 2xx（成功），说明有错误
+                if (!response.ok) {
+                    // 尝试解析 API 返回的错误信息
+                    let errorDetails;
+                    try {
+                        // 假设 API 错误信息也是 JSON 格式
+                        errorDetails = await response.json();
+                    } catch (e) {
+                        // 如果不是 JSON，就作为纯文本处理
+                        errorDetails = await response.text();
+                    }
+                    // 抛出带有详细信息的错误
+                    throw new Error(`HTTP 错误! 状态码: ${response.status} - ${typeof errorDetails === 'object' && errorDetails !== null ? (errorDetails.message || JSON.stringify(errorDetails)) : errorDetails}`);
+                }
+
+                // 你的 PHP API 返回的是 message.txt 的纯文本内容，所以这里使用 .text() 方法解析响应体
+                const content = await response.text();
+                
+                // **** 核心修改：将获取到的内容直接赋值给 <pre> 元素的 textContent ****
+                getMessageElement.textContent = content;
+                getMessageElement.classList.remove('loading'); // 移除加载提示样式
+
+            } catch (error) {
+                // 如果在请求或处理过程中发生任何错误，捕获并显示
+                console.error('获取弹幕内容失败:', error);
+                getMessageElement.textContent = `错误: ${error.message}`;
+                getMessageElement.classList.remove('loading'); // 移除加载提示样式
+                getMessageElement.classList.add('error'); // 添加错误样式
+            }
+        });
 </script>
\ No newline at end of file
diff --git a/public/message/index.php.114514 b/public/message/index.php.114514
deleted file mode 100755
index cb606b2..0000000
--- a/public/message/index.php.114514
+++ /dev/null
@@ -1,49 +0,0 @@
-<html>
-    <head>
-        <meta charset="utf-8" lang="zh-CN">
-        <link rel="stylesheet" type="text/css" href="./static/css/body_color.css">
-    </head>
-
-    <body>
-        
-        <?php
-            $title = "Message | 留言";
-            // title 变量
-
-            echo "<title>" . "$title" . "</title>";
-            // 页面标题
-        ?>
-        <body id="body_color">
-            <div id="message_block">
-                <div id="content_page">
-                    <?php
-                        echo "<h1>欢迎来到 $title</h1>";
-                        // 欢迎语
-
-                        echo "感谢您的访问" . " " .  "<br>" . "顾名思义" . "$title" . "就是用来记录留言的地方";
-                        // 介绍部分
-
-                    ?>
-                </div>
-            </div>
-        </body>
-    </body>
-</html>
-
-<!-- php 引入 -->
-<?php
-    include "./static/css/navbar/index-css.html";
-    // 引入navbar-css
-?>
-<!-- php 引入 -->
-
-<style>
-/* 这里是专属css */
-#content_page
-{
-    color: rgb(255, 74, 74);
-    text-align: left;
-    font-size: 18px;
-
-}
-</style>
\ No newline at end of file
diff --git a/public/message/index.php.back b/public/message/index.php.back
deleted file mode 100755
index b283bc9..0000000
--- a/public/message/index.php.back
+++ /dev/null
@@ -1,52 +0,0 @@
-<html>
-    <head>
-        <meta charset="utf-8" lang="zh-CN">
-        <!-- 引入css -->
-        <link rel="stylesheet" type="text/css" href="./static/css/body.css">
-        <?php
-            include './static/html/content_message.html';
-            //css 部分 引用 html
-        ?>
-        <!-- 引入css -->
-    </head>
-    
-    <body>
-        <?php
-            $title = "message";
-            //定义变量 title
-
-            echo "<title>$title</title>";
-            // 设定网站抬头
-
-            echo "<div id='init'>";
-
-            echo "<h1>欢迎来到 $title</h1>";
-            // 欢迎语
-
-            echo "感谢您的访问" . " " .  "<br>" . "顾名思义" . "$title" . "就是用来记录留言的地方";
-            // 介绍部分
-
-            echo "</div>";
-
-        ?>
-        <div>
-            <?php
-                include './static/php/google_translate.php';
-                // 引入 谷歌翻译
-            ?>
-            <div id="content_message_block">
-                
-            </div>
-            <div id="content_message_video">
-            </div>
-        </div>
-    </body>
-</html>
-<style>
-    #init
-    {
-        position: fixed;
-        /*  页面边距 上、右、下、左 */
-        margin: 70px 0px 0px 0px;
-    }
-</style>
\ No newline at end of file
diff --git a/public/api/docs/index.php b/public/message/static/css/message.css
similarity index 100%
rename from public/api/docs/index.php
rename to public/message/static/css/message.css
diff --git a/public/message/static/css/video.css b/public/message/static/css/video.css
new file mode 100755
index 0000000..ff2f9e9
--- /dev/null
+++ b/public/message/static/css/video.css
@@ -0,0 +1,33 @@
+/*简易的视频布局*/
+/* 视频播放器容器样式 */  
+.video-container {  
+  position: relative;  
+  width: 640px;  
+}  
+
+/* 自定义进度条容器样式 */  
+.custom-progress-bar {  
+  position: absolute;  
+  bottom: 10px;  
+  left: 0;  
+  width: 100%;  
+  height: 10px;  
+  background: #444;  
+  cursor: pointer;  
+}  
+
+/* 自定义进度条填充样式 */  
+.custom-progress-bar .fill {  
+  position: absolute;  
+  top: 0;  
+  left: 0;  
+  height: 100%;  
+  width: 0;  
+  background: #f00;  
+  transition: width .2s; /* 平滑过渡效果 */  
+}  
+
+/* 隐藏默认的浏览器进度条 */  
+video::-webkit-media-controls-timeline {  
+  display: none;  
+}  
diff --git a/public/message/static/js/video.js b/public/message/static/js/video.js
new file mode 100755
index 0000000..ce7c47e
--- /dev/null
+++ b/public/message/static/js/video.js
@@ -0,0 +1,54 @@
+/* 简易视频播放器 */
+var video = document.getElementById("Video");
+var progressBar = document.getElementById("customProgressBar");
+var fill = document.querySelector(".custom-progress-bar .fill");
+
+// 监听mousedown事件开始拖动
+progressBar.addEventListener("mousedown", function (e) {
+  // 防止默认行为
+  e.preventDefault();
+
+  // 开始拖动
+  document.addEventListener("mousemove", onDrag);
+  document.addEventListener("mouseup", onDragEnd);
+
+  // 获取初始点击位置
+  var startX = e.pageX - progressBar.offsetLeft;
+});
+
+function onDrag(e) {
+  // 计算新的进度位置
+  var newPercent = (e.pageX - progressBar.offsetLeft) / progressBar.offsetWidth;
+  newPercent = Math.min(Math.max(0, newPercent), 1); // 限制在0到1之间
+
+  // 更新视频播放位置
+  video.currentTime = video.duration * newPercent;
+
+  // 更新进度条宽度
+  fill.style.width = newPercent * 100 + "%";
+}
+
+function onDragEnd() {
+  // 停止拖动
+  document.removeEventListener("mousemove", onDrag);
+  document.removeEventListener("mouseup", onDragEnd);
+}
+
+// 视频加载元数据后初始化进度条
+video.addEventListener("loadedmetadata", function () {
+  // 设置初始进度
+  updateProgressBar();
+});
+
+// 更新进度条
+function updateProgressBar() {
+  var percent = (video.currentTime / video.duration) * 100;
+  fill.style.width = percent + "%";
+}
+
+// 监听视频播放过程中的时间更新
+video.addEventListener("timeupdate", updateProgressBar);
+
+//调节控制音量初始化
+var Video = document.getElementById("Video");
+Video.volume = 0.5; // 设置默认音量为50%
diff --git a/public/message/static/txt/message.txt b/public/message/static/txt/message.txt
index e69de29..dfd4eef 100755
--- a/public/message/static/txt/message.txt
+++ b/public/message/static/txt/message.txt
@@ -0,0 +1 @@
+这是测试
\ No newline at end of file