import os
import socket
import threading
from http.server import HTTPServer, SimpleHTTPRequestHandler
# 自定义请求处理器
class SciFiRequestHandler(SimpleHTTPRequestHandler)
:
def list_directory(self, path)
:
"""生成科技感文件列表页面"""
try
:
# 获取文件列表
files = []
for item in os.listdir(path)
:
if not item.startswith('.')
: # 排除隐藏文件
item_path = os.path.join(path, item)
if os.path.isfile(item_path)
:
files.append((item, os.path.getsize(item_path)))
# 生成科技感HTML
html = f'''<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>
量子文件共享 | {socket.gethostname()}</title>
<style>
:root {{
--neon-blue
: #0ff;
--neon-purple
: #f0f;
--dark-bg
: #0a0a1a;
}}
* {{ margin
: 0; padding
: 0; box-sizing
: border-box; }}
body {{
background
: var(--dark-bg);
color
: #fff;
font-family
: 'Arial', sans-serif;
min-height
: 100vh;
overflow-x
: hidden;
position
: relative;
}}
/* 粒子背景 */
#particles-js {{
position
: absolute;
width
: 100%;
height
: 100%;
z-index
: -1;
}}
/* 头部样式 */
header {{
text-align
: center;
padding
: 2rem 0;
border-bottom
: 1px
solid rgba(0, 2
55, 2
55, 0.2);
position
: relative;
}}
h1 {{
font-size
: 3rem;
margin-bottom
: 0.5rem;
text-transform
: uppercase;
letter-spacing
: 3px;
background
: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
-
webkit-background-clip
: text;
-
webkit-text-fill-color
: transparent;
text-shadow
: 0 0 10px rgba(0, 2
55, 2
55, 0.5);
}}
.subtitle {{
color
: rgba(2
55, 2
55, 2
55, 0.7);
font-size
: 1.2rem;
}}
/* 文件列表 */
.file-list {{
max-width
: 800px;
margin
: 2rem auto;
padding
: 1rem;
}}
.file-item {{
display
: flex;
justify-content
: space-between;
padding
: 1rem;
margin-bottom
: 0.5rem;
background
: rgba(10, 20, 40, 0.6);
border
: 1px
solid rgba(0, 2
55, 2
55, 0.1);
border-radius
: 4px;
transition
: all 0.3s ease;
}}
.file-item
:hover {{
background
: rgba(20, 40, 80, 0.8);
transform
: translateX(5px);
border-color
: var(--neon-blue);
box-shadow
: 0 0 15px rgba(0, 2
55, 2
55, 0.3);
}}
.file-name {{
color
: var(--neon-blue);
text-decoration
: none;
font-size
: 1.1rem;
}}
.file-size {{
color
: rgba(2
55, 2
55, 2
55, 0.6);
}}
/* 动态网格 */
.grid-lines {{
position
: absolute;
top
: 0;
left
: 0;
width
: 100%;
height
: 100%;
background
:
linear-gradient(90deg, transparent 95%, rgba(0, 100, 2
55, 0.1) 95%),
linear-gradient(0deg, transparent 95%, rgba(0, 100, 2
55, 0.1) 95%);
background-size
: 50px 50px;
z-index
: -2;
animation
: gridMove 20s linear infinite;
}}
@keyframes gridMove {{
0% {{ background-position
: 0 0; }}
100% {{ background-position
: 50px 50px; }}
}}
/* 霓虹边框动画 */
.neon-border {{
position
: relative;
overflow
: hidden;
}}
.neon-border
::before {{
content
: '';
position
: absolute;
top
: -2px;
left
: -2px;
width
: calc(100% + 4px);
height
: calc(100% + 4px);
background
: linear-gradient(45deg,
#ff00cc, #00ccff, #00ffcc, #ffcc00);
background-size
: 400% 400%;
z-index
: -1;
animation
: neonGlow 3s ease infinite;
}}
@keyframes neonGlow {{
0% {{ background-position
: 0% 50%; }}
50% {{ background-position
: 100% 50%; }}
100% {{ background-position
: 0% 50%; }}
}}
</style>
</head>
<body>
<div class="grid-lines"></div>
<div id="particles-js"></div>
<header>
<h1>
量子文件共享</h1>
<p class="subtitle">IP
: {socket.gethostbyname(socket.gethostname())} | 端口
: {PORT}</p>
</header>
<main class="file-list neon-border">
<h2>可用文件 ▸</h2>
<div class="file-items">
{''.join(
f'<div class="file-item">'
f'<a href="{file}" class="file-name">{file}</a>'
f'<span class="file-size">{size/1024
:.1f} KB</span>'
f'</div>'
for file, size in files
)}
</div>
</main>
<script src="https
://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// 粒子背景配置
particlesJS('particles-js', {{
particles
: {{
number
: {{ value
: 80, density
: {{ enable
: true, value_area
: 800 }} }},
color
: {{ value
: "#0ff" }},
shape
: {{ type
: "circle" }},
opacity
: {{ value
: 0.5, random
: true }},
size
: {{ value
: 3, random
: true }},
line_linked
: {{
enable
: true,
distance
: 150,
color
: "#0ff",
opacity
: 0.4,
width
: 1
}},
move
: {{
enable
: true,
speed
: 2,
direction
: "none",
random
: true,
straight
: false,
out_mode
: "out"
}}
}},
interactivity
: {{
detect_on
: "canvas",
events
: {{
onhover
: {{ enable
: true, mode
: "grab" }},
onclick
: {{ enable
: true, mode
: "
push" }}
}}
}}
}});
// 动态网格效果
document.addEventListener('mousemove', (e) => {{
const grid = document.querySelector('.grid-lines');
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
grid.style.backgroundPosition = `${{x * 20}}px ${{y * 20}}px`;
}});
</script>
</body>
</html>'''
self.send_response(200)
self.send_header("Content-type", "text/html; charset=utf-8")
self.end_headers()
return self.wfile.write(html.encode('utf-8'))
except Exception as e
:
return super().list_directory(path)
# 启动
服务器
def start_server(port=8000)
:
server_address = ('', port)
httpd = HTTPServer(server_address, SciFiRequestHandler)
print(f"🚀 文件共享
服务器已启动")
print(f"📂 共享目录
: {os.getcwd()}")
print(f"🌐 访问地址
: http
://{socket.gethostbyname(socket.gethostname())}
:{port}")
try
:
httpd.serve_forever()
except KeyboardInterrupt
:
print("\n🛑
服务器已停止")
if __name__ == '__main__'
:
PORT = 8000
start_server(PORT)
在这个代码基础上帮我改一下，显示的文件不应该是在程序的当前目录，而是当我运行程序时，应该给我提供一个可视化界面，然后这个可视化界面也就是后端gui界面这种意思，可以设置三个目录，也就是三个资源池，资源池1、资源池2、资源池3，并且这三个目录右边都有个更新按钮，当我中途要更换对应资源池的目录后点击对应的更新，就会更新对应的资源池，最下面还有一个更新所有资源池，可以对三个资源池全部更新，并且其他用户访问页面也会根据后端界面点击更新后进行刷新实时更新资源池目录内容
超级会员免费看
订阅专栏 解锁全文
扫一扫
46
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
