提交样式修改，登录和云盘页面
This commit is contained in:
471
docs/front-proto/02cloud/index.html
Normal file
471
docs/front-proto/02cloud/index.html
Normal file
@@ -0,0 +1,471 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"="width=device-width, initial-scale=1.0">
|
||||
<title>Cloudaloud网盘</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#667eea',
|
||||
secondary: '#764ba2',
|
||||
background: '#f8fafc'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientBG 15s ease infinite;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes gradientBG {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.cloud-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cloud-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cloud-header i {
|
||||
font-size: 48px;
|
||||
color: #667eea;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cloud-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: #f1f5f9;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.upload-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.files-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.files-table th {
|
||||
background: #f8fafc;
|
||||
padding: 16px 12px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.files-table td {
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.files-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.files-table tr:hover td {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #eff6ff;
|
||||
border-radius: 8px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.download {
|
||||
background: #ecfdf5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.download:hover {
|
||||
background: #d1fae5;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.delete {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.delete:hover {
|
||||
background: #fee2e2;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: #fee2e2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="min-h-screen flex items-center justify-center p-4">
|
||||
<div class="cloud-container w-full max-w-6xl">
|
||||
<!-- Header -->
|
||||
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
|
||||
<div class="flex items-center space-x-4">
|
||||
<i class="fas fa-cloud text-primary text-2xl"></i>
|
||||
<span class="font-semibold text-gray-900 text-xl">Cloudaloud网盘</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fas fa-user text-gray-600"></i>
|
||||
<span class="text-sm text-gray-700">你好，pengshuaiReal</span>
|
||||
<button class="logout-btn rounded-md px-3 py-1.5 text-sm font-medium transition-colors">
|
||||
登出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="p-6">
|
||||
<div class="cloud-header">
|
||||
<i class="fas fa-cloud"></i>
|
||||
<h1>云盘文件管理</h1>
|
||||
<p class="text-gray-600">管理您的云盘文件</p>
|
||||
</div>
|
||||
|
||||
<div class="user-info">
|
||||
<i class="fas fa-user-circle text-gray-600"></i>
|
||||
<span>欢迎，pengshuaiReal</span>
|
||||
<span>|</span>
|
||||
<span>存储空间：668.31 KB / 100 MB</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<button class="upload-btn">
|
||||
<i class="fas fa-upload"></i>
|
||||
<span>上传文件</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="files-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>文件名</th>
|
||||
<th>原始文件名</th>
|
||||
<th>大小</th>
|
||||
<th>类型</th>
|
||||
<th>修改时间</th>
|
||||
<th style="text-align: right;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-code"></i>
|
||||
</div>
|
||||
<span>41e2439d-002d-47ed-89c3-360a04c3820f.py</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">debug_download_detailed.py</span></td>
|
||||
<td><span class="file-size">4.8 KB</span></td>
|
||||
<td><span class="file-type">X-PYTHON</span></td>
|
||||
<td><span class="file-date">2025/10/15 09:57:37</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<span>0c0834bb-6313-4ae0-91c4-c3b7b123001f.txt</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">success_test.txt</span></td>
|
||||
<td><span class="file-size">160 Bytes</span></td>
|
||||
<td><span class="file-type">PLAIN</span></td>
|
||||
<td><span class="file-date">2025/10/15 09:19:19</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<span>ed900fb4-2cbb-4e5c-abd8-4a4cfa32eb83.txt</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">test_upload.txt</span></td>
|
||||
<td><span class="file-size">210 Bytes</span></td>
|
||||
<td><span class="file-type">PLAIN</span></td>
|
||||
<td><span class="file-date">2025/10/15 09:19:24</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-code"></i>
|
||||
</div>
|
||||
<span>08be0e5f-969c-4ed5-86c6-2d8470566a10.js</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">index.js</span></td>
|
||||
<td><span class="file-size">1.9 KB</span></td>
|
||||
<td><span class="file-type">JAVASCRIPT</span></td>
|
||||
<td><span class="file-date">2025/10/15 08:56:34</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-code"></i>
|
||||
</div>
|
||||
<span>68ba13ca-7bee-4d16-bb1f-22e451ba5b83.json</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">package.json</span></td>
|
||||
<td><span class="file-size">1.15 KB</span></td>
|
||||
<td><span class="file-type">JSON</span></td>
|
||||
<td><span class="file-date">2025/10/15 08:56:33</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-word"></i>
|
||||
</div>
|
||||
<span>4345f1f3-c7e8-449e-b69b-c65c7eb4279b.rtf</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">LICENSE-chs.rtf</span></td>
|
||||
<td><span class="file-size">183.66 KB</span></td>
|
||||
<td><span class="file-type">RTF</span></td>
|
||||
<td><span class="file-date">2025/10/15 08:56:33</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="file-name">
|
||||
<div class="file-icon">
|
||||
<i class="fas fa-file-word"></i>
|
||||
</div>
|
||||
<span>f63509cc-ee0f-4350-9919-351e73fe166f.rtf</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="file-original-name">LICENSE-bul.rtf</span></td>
|
||||
<td><span class="file-size">476.44 KB</span></td>
|
||||
<td><span class="file-type">RTF</span></td>
|
||||
<td><span class="file-date">2025/10/15 08:56:33</span></td>
|
||||
<td>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn download" title="下载文件">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
<button class="action-btn delete" title="删除文件">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 添加交互功能
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 下载按钮功能
|
||||
const downloadButtons = document.querySelectorAll('.download');
|
||||
downloadButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const row = this.closest('tr');
|
||||
const fileName = row.querySelector('.file-name span').textContent;
|
||||
alert(`开始下载文件: ${fileName}`);
|
||||
});
|
||||
});
|
||||
|
||||
// 删除按钮功能
|
||||
const deleteButtons = document.querySelectorAll('.delete');
|
||||
deleteButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const row = this.closest('tr');
|
||||
const fileName = row.querySelector('.file-name span').textContent;
|
||||
if (confirm(`确定要删除文件 "${fileName}" 吗？`)) {
|
||||
row.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
row.remove();
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 上传按钮功能
|
||||
const uploadButton = document.querySelector('.upload-btn');
|
||||
uploadButton.addEventListener('click', function() {
|
||||
alert('点击了上传文件按钮');
|
||||
});
|
||||
|
||||
// 登出按钮功能
|
||||
const logoutButton = document.querySelector('.logout-btn');
|
||||
logoutButton.addEventListener('click', function() {
|
||||
if (confirm('确定要退出登录吗？')) {
|
||||
alert('已退出登录');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user