cavin/full-stack-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交样式修改，登录和云盘页面

Browse Source
This commit is contained in:
peng
2025-10-15 10:28:49 +08:00
parent 48db0d2de5
commit f124dee382
12 changed files with 2152 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
docs/front-proto/01login/index.html Normal file
View File

@@ -0,0 +1,364 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudStorage - 登录</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.login-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);
width: 100%;
max-width: 420px;
padding: 40px;
position: relative;
overflow: hidden;
}
.login-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(
transparent,
rgba(168, 85, 247, 0.4),
transparent 30%
);
animation: rotate 6s linear infinite;
z-index: -1;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.logo {
text-align: center;
margin-bottom: 30px;
}
.logo i {
font-size: 48px;
color: #667eea;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.logo h1 {
font-size: 28px;
font-weight: 700;
margin-top: 15px;
color: #333;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.logo p {
color: #666;
margin-top: 8px;
font-size: 14px;
}
.input-group {
margin-bottom: 25px;
position: relative;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
}
.input-group input {
width: 100%;
padding: 15px 15px 15px 45px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.input-group input:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
font-size: 14px;
}
.remember-me {
display: flex;
align-items: center;
}
.remember-me input {
margin-right: 8px;
}
.forgot-password {
color: #667eea;
text-decoration: none;
transition: color 0.3s ease;
}
.forgot-password:hover {
color: #764ba2;
text-decoration: underline;
}
.login-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.login-btn:active {
transform: translateY(0);
}
.divider {
text-align: center;
margin: 30px 0;
position: relative;
color: #999;
font-size: 14px;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e1e5e9;
z-index: 1;
}
.divider span {
background: white;
position: relative;
z-index: 2;
padding: 0 15px;
}
.signup-link {
text-align: center;
font-size: 14px;
color: #666;
}
.signup-link a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #764ba2;
text-decoration: underline;
}
@media (max-width: 480px) {
.login-container {
padding: 30px 20px;
margin: 10px;
}
.logo h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="login-container">
<div class="logo">
<i class="fas fa-cloud"></i>
<h1>CloudStorage</h1>
<p>安全可靠的云端存储服务</p>
</div>
<form id="loginForm">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" placeholder="用户名或邮箱" required>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" placeholder="密码" required>
</div>
<div class="options">
<label class="remember-me">
<input type="checkbox"> 记住我
</label>
<a href="#" class="forgot-password">忘记密码？</a>
</div>
<button type="submit" class="login-btn">
登录账户
</button>
</form>
<div class="divider">
<span>新用户？</span>
</div>
<div class="signup-link">
还没有账户？<a href="#" onclick="showRegisterPage()">立即注册</a>
</div>
</div>
<script>
function showRegisterPage() {
document.body.innerHTML = `
<div class="login-container">
<div class="logo">
<i class="fas fa-user-plus"></i>
<h1>用户注册</h1>
<p>创建您的云端存储账户</p>
</div>
<form id="registerForm">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" placeholder="账户名" required>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" placeholder="密码" required id="password">
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" placeholder="确认密码" required id="confirmPassword">
</div>
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="邮箱地址" required>
</div>
<button type="submit" class="login-btn">
注册账户
</button>
</form>
<div class="signup-link">
已有账户？<a href="#" onclick="showLoginPage()">立即登录</a>
</div>
</div>
`;
document.getElementById('registerForm').addEventListener('submit', function(e) {
e.preventDefault();
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
if (password !== confirmPassword) {
alert('密码和确认密码不匹配！');
return;
}
const btn = this.querySelector('.login-btn');
const originalText = btn.textContent;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
btn.disabled = true;
// 模拟注册过程
setTimeout(() => {
btn.innerHTML = originalText;
btn.disabled = false;
alert('注册成功！');
}, 2000);
});
}
function showLoginPage() {
location.reload();
}
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const btn = this.querySelector('.login-btn');
const originalText = btn.textContent;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
btn.disabled = true;
// 模拟登录过程
setTimeout(() => {
btn.innerHTML = originalText;
btn.disabled = false;
alert('登录成功！');
}, 2000);
});
</script>
</body>
</html>

471
docs/front-proto/02cloud/index.html Normal file
View 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>