You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
9.2 KiB
192 lines
9.2 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>蜗牛创造的高速文件传输</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
<script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 欢迎界面 -->
|
|
<div id="welcome-screen" class="screen active">
|
|
<div class="logo-area">
|
|
<h1>🐌 欢迎来到蜗牛创造的高速世界</h1>
|
|
<p>安全、高速的文件传输解决方案</p>
|
|
</div>
|
|
|
|
<div class="card-container">
|
|
<div class="card">
|
|
<div class="card-icon">📤</div>
|
|
<h3>发送文件</h3>
|
|
<p>快速安全地发送文件</p>
|
|
<button class="btn btn-primary" onclick="showScreen('send-screen')">开始发送</button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-icon">📥</div>
|
|
<h3>接收文件</h3>
|
|
<p>安全可靠地接收文件</p>
|
|
<button class="btn btn-success" onclick="showScreen('receive-screen')">开始接收</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>© 2024 蜗牛创造 - 让文件传输更简单</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发送界面 -->
|
|
<div id="send-screen" class="screen">
|
|
<div class="header">
|
|
<button class="btn btn-secondary" onclick="showScreen('welcome-screen')">← 返回</button>
|
|
<h2>📤 文件发送</h2>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="input-group">
|
|
<label>🔑 密钥:</label>
|
|
<input type="text" id="send-key" placeholder="token|sk|psk|sern">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>🔍 文件搜索:</label>
|
|
<input type="text" id="search-pattern" placeholder="输入文件名关键词">
|
|
<button class="btn btn-purple" onclick="openSearchModal()">搜索文件</button>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>📄 文件路径:</label>
|
|
<input type="text" value="/mnt/wwn-0x5000c500a34676a5-part1/docker/kodbox/data/files/下载/" id="send-file-path" placeholder="手动输入文件路径或从搜索结果选择">
|
|
<button class="btn btn-small" onclick="browseFileManually()">选择要发送的文件</button>
|
|
</div>
|
|
|
|
<div class="file-info" id="file-info">
|
|
<div class="file-info-item">文件大小: <span id="file-size">-</span></div>
|
|
<div class="file-info-item">修改时间: <span id="file-mtime">-</span></div>
|
|
<div class="file-info-item">文件状态: <span id="file-status">未选择</span></div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn btn-success" id="send-connect-btn" onclick="sendConnect()">🔄 连接</button>
|
|
<button class="btn btn-danger" id="send-file-btn" onclick="sendFile()" disabled>🚀 发送文件</button>
|
|
<button class="btn btn-secondary" id="send-stop-btn" onclick="sendStop()" disabled>⏹️ 停止</button>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<p>📊 状态: <span id="send-status">等待连接</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>📋 发送日志:</h3>
|
|
<div class="output-container">
|
|
<pre id="send-output">等待输入密钥并选择文件...
|
|
密钥格式应为: token|sk|psk|sern</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 接收界面 -->
|
|
<div id="receive-screen" class="screen">
|
|
<div class="header">
|
|
<button class="btn btn-secondary" onclick="showScreen('welcome-screen')">← 返回</button>
|
|
<h2>📥 文件接收</h2>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="input-group">
|
|
<label>🔑 密钥:</label>
|
|
<input type="text" id="receive-key" placeholder="token|sk|psk|sern">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>💾 保存路径:</label>
|
|
<input type="text" id="receive-save-path" style="background-color: #eee;color: #333;" readonly value="文件保持在:网络挂载/本地存储/下载/">
|
|
<!-- <button class="btn btn-purple" onclick="browseFolder()">浏览文件夹</button> -->
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button class="btn btn-success" id="receive-connect-btn" onclick="receiveConnect()">🔄 连接</button>
|
|
<button class="btn btn-danger" id="receive-stop-btn" onclick="receiveStop()" disabled>⏹️ 停止</button>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<p>📊 状态: <span id="receive-status">等待连接</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>📋 接收日志:</h3>
|
|
<div class="output-container">
|
|
<pre id="receive-output">等待输入密钥并连接...
|
|
密钥格式应为: token|sk|psk|sern
|
|
文件将保存到: 网络挂载/本地存储/下载/</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文件浏览模态框 -->
|
|
<div id="file-browser-modal" class="modal" style="z-index:2000">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modal-title">选择文件</h3>
|
|
<span class="close" onclick="closeModal()">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="path-navigation">
|
|
<button class="btn btn-small" onclick="navigateUp()">↑ 上级目录</button>
|
|
<span id="current-path"></span>
|
|
</div>
|
|
<div id="file-list" class="file-list"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal()">取消</button>
|
|
<button class="btn btn-primary" id="modal-select-btn" onclick="selectItem()">选择</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文件搜索模态框 -->
|
|
<div id="file-search-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="search-modal-title">搜索文件</h3>
|
|
<span class="close" onclick="closeSearchModal()">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="search-controls">
|
|
<div class="input-group">
|
|
<label>搜索路径:</label>
|
|
<input type="text" id="search-path">
|
|
<button class="btn btn-small" onclick="browseSearchPath()">选择搜索目录</button>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>文件名包含:</label>
|
|
<input type="text" id="search-keyword" placeholder="默认*则展示该目录下所有文件/输入文件名关键词">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>最大结果数:</label>
|
|
<input type="number" id="max-results" value="50" min="1" max="500">
|
|
</div>
|
|
<button class="btn btn-primary" onclick="startSearch()">开始搜索</button>
|
|
</div>
|
|
|
|
<div class="search-results">
|
|
<h4>搜索结果 (<span id="result-count">0</span>):</h4>
|
|
<div id="search-results-list" class="file-list"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeSearchModal()">取消</button>
|
|
<button class="btn btn-primary" id="search-select-btn" onclick="selectSearchResult()" disabled>选择文件</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
|
</body>
|
|
</html>
|