colden/basicBench
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ten

Browse Source
This commit is contained in:
邓智航
2025-12-22 00:54:25 +08:00
parent 9722048682
commit a2fe72dcc5
20 changed files with 7498 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

703
009/009_r.html Normal file
View File

@@ -0,0 +1,703 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyGlobalMail - Inbox (1,204 Unread)</title>
<style>
/* === CSS Variables & Reset === */
:root {
--primary: #0078d4;
--bg-body: #f3f2f1;
--bg-white: #ffffff;
--text-main: #323130;
--text-sub: #605e5c;
--border: #edebe9;
--hover: #f3f2f1;
--selected: #c7e0f4;
}
body {
font-family: 'Segoe UI', -apple-system, sans-serif;
background-color: var(--bg-body);
color: var(--text-main);
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
a {
text-decoration: none;
color: var(--primary);
}
a:hover {
text-decoration: underline;
}
/* === 布局重构：强制覆盖 Table 样式 === */
table,
tbody,
tr,
td {
display: block;
width: 100% !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
}
/* 顶部广告 - 隐藏 */
body>center:first-of-type {
display: none;
}
/* 顶部 Header */
body>table:nth-of-type(1) {
background: var(--primary) !important;
color: white;
padding: 0 15px !important;
flex-shrink: 0;
}
body>table:nth-of-type(1) tr {
display: flex;
justify-content: space-between;
align-items: center;
height: 48px;
}
body>table:nth-of-type(1) td {
width: auto !important;
}
body>table:nth-of-type(1) h1 {
font-size: 18px;
margin: 0;
font-weight: 600;
}
/* 搜索框美化 */
body>table:nth-of-type(1) form {
background: rgba(255, 255, 255, 0.2);
padding: 5px 10px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 5px;
}
body>table:nth-of-type(1) input[type="text"] {
background: transparent;
border: none;
color: white;
outline: none;
}
body>table:nth-of-type(1) input[type="text"]::placeholder {
color: rgba(255, 255, 255, 0.7);
}
body>table:nth-of-type(1) input[type="submit"] {
display: none;
}
/* 隐藏Go按钮 */
body>table:nth-of-type(1) small {
display: none;
}
/* 隐藏高级搜索链接 */
/* 功能导航条 - 隐藏 */
body>table:nth-of-type(2) {
display: none !important;
}
/* === 主体布局 === */
body>table:nth-of-type(3) {
flex: 1;
overflow: hidden;
}
body>table:nth-of-type(3)>tbody>tr {
display: flex;
height: 100%;
}
/* 左侧文件夹栏 */
body>table:nth-of-type(3)>tbody>tr>td:first-child {
width: 220px !important;
background: var(--bg-white) !important;
border-right: 1px solid var(--border) !important;
padding: 20px 10px !important;
overflow-y: auto;
}
/* 文件夹列表美化 */
.folder-link {
display: block;
padding: 8px 12px;
border-radius: 4px;
color: var(--text-main);
font-size: 14px;
}
.folder-link:hover {
background: var(--hover);
text-decoration: none;
}
/* 重写左侧原本的 table 结构 */
body>table:nth-of-type(3) td:first-child table tr td {
margin-bottom: 2px;
}
body>table:nth-of-type(3) td:first-child table a {
@extend .folder-link;
color: var(--text-main);
display: block;
padding: 8px 10px;
border-radius: 2px;
}
body>table:nth-of-type(3) td:first-child table a:hover {
background: var(--hover);
text-decoration: none;
}
body>table:nth-of-type(3) td:first-child table a b {
font-weight: 600;
}
/* 隐藏左侧栏的广告 (table bgcolor=#e6e6fa) */
body>table:nth-of-type(3) td:first-child table[bgcolor="#e6e6fa"] {
display: none !important;
}
body>table:nth-of-type(3) td:first-child hr {
border-top: 1px solid var(--border);
margin: 15px 0;
display: block;
}
body>table:nth-of-type(3) td:first-child ul {
list-style: none;
padding-left: 10px;
}
body>table:nth-of-type(3) td:first-child ul li {
margin-bottom: 5px;
}
/* 右侧邮件列表区 */
body>table:nth-of-type(3)>tbody>tr>td:nth-child(2) {
flex: 1 !important;
background: var(--bg-white) !important;
display: flex !important;
flex-direction: column !important;
}
/* 存储警告 - 美化为顶部条 */
body>table:nth-of-type(3) td:nth-child(2)>p:first-child {
background: #fff4ce;
color: #333;
padding: 10px 20px;
margin: 0;
font-size: 12px;
border-bottom: 1px solid var(--border);
}
body>table:nth-of-type(3) td:nth-child(2)>p:first-child font {
color: #333 !important;
}
/* 工具栏 */
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type {
padding: 10px 20px !important;
border-bottom: 1px solid var(--border) !important;
background: white !important;
}
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type tr {
display: flex;
justify-content: space-between;
align-items: center;
}
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type input[type="button"] {
background: white;
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 2px;
cursor: pointer;
color: var(--text-main);
margin-right: 5px;
}
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type input[type="button"]:hover {
background: var(--hover);
}
/* 高亮 "New" 按钮 */
body>table:nth-of-type(3) td:nth-child(2)>table:first-of-type input[value="New"] {
background: var(--primary);
color: white;
border-color: var(--primary);
}
/* 邮件列表容器 */
body>table:nth-of-type(3) td:nth-child(2)>form {
flex: 1;
overflow-y: auto;
}
/* 邮件列表 Table 重构 */
.mail-table {
width: 100%;
}
/* 隐藏原表头，用 Grid 重新定义 */
.mail-table tr:first-child {
display: grid;
grid-template-columns: 40px 40px 200px 1fr 100px 80px;
border-bottom: 1px solid var(--border);
background: #faf9f8;
font-weight: 600;
color: var(--text-sub);
font-size: 12px;
position: sticky;
top: 0;
z-index: 10;
}
.mail-table tr:first-child th {
padding: 10px !important;
text-align: left;
}
/* 邮件行 */
.mail-table tr:not(:first-child) {
display: grid;
grid-template-columns: 40px 40px 200px 1fr 100px 80px;
border-bottom: 1px solid var(--border);
align-items: center;
cursor: pointer;
}
.mail-table tr:not(:first-child):hover {
background: var(--hover);
}
.mail-table td {
padding: 10px !important;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 隐藏干扰行 (广告, 系统警告) */
.mail-table tr[bgcolor="#ffffcc"],
.mail-table tr[bgcolor="#ffe4e1"] {
display: none !important;
}
/* 样式微调 */
.mail-table input[type="checkbox"] {
margin: 0;
}
.mail-table b {
font-weight: 600;
color: var(--text-main);
}
/* 未读邮件加粗 */
.mail-table td:nth-child(4) {
color: var(--text-sub);
}
/* Subject */
.mail-table td:nth-child(4) b {
color: var(--primary);
}
/* Subject Unread */
/* 底部广告隐藏 */
body>table:nth-of-type(3) td:nth-child(2)>center {
display: none;
}
/* 翻页 */
body>table:nth-of-type(3) td:nth-child(2)>table:last-of-type {
padding: 10px 20px !important;
border-top: 1px solid var(--border);
}
/* 页脚 - 简化 */
body>center:last-of-type {
font-size: 11px;
color: #999;
padding: 5px;
background: #f3f2f1;
}
hr {
display: none;
}
</style>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<center>
<table width="100%" border="1" cellpadding="5" bgcolor="#ffffcc">
<tr>
<td align="center">
<h3>*** 免费赢取 2026 世界杯门票！***</h3>
<p>只需填写一份问卷，即可参与抽奖。<a href="#">[点击这里]</a></p>
</td>
</tr>
</table>
</center>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#003366">
<tr>
<td width="30%">
<h1>
<font color="white">MyGlobalMail</font>
</h1>
</td>
<td width="50%" align="center">
<font color="white">
<form onsubmit="return false;">
<span style="display:none;">Search Mail:</span> <input type="text" size="20"
placeholder="Search">
<input type="submit" value="Go">
<br>
<small><a href="#" style="color:#ddd">Advanced Search</a></small>
</form>
</font>
</td>
<td width="20%" align="right">
<font color="white" size="2">
<span style="opacity:0.8; margin-right:10px;">User: <b>john.doe@globalmail.com</b></span>
<a href="#" style="color:yellow; display:none;">[Upgrade to Pro]</a> <a href="#"
style="color:white; opacity:0.8;">Sign Out</a>
</font>
</td>
</tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="2" bgcolor="#eeeeee">
<tr>
<td align="center">
<a href="#"><b>Mail</b></a> |
<a href="#"><b>Address Book</b></a>
</td>
</tr>
</table>
<br>
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="180" valign="top" bgcolor="#f0f0f0">
<br>
<table width="100%" border="0">
<tr>
<td><a href="#"><b>Inbox (1204)</b></a></td>
</tr>
<tr>
<td><a href="#">Drafts (5)</a></td>
</tr>
<tr>
<td><a href="#">Sent Items</a></td>
</tr>
<tr>
<td><a href="#">Junk Mail (99+)</a>
<font color="red" style="display:none;">clean</font>
</td>
</tr>
<tr>
<td><a href="#">Trash</a>
<font color="red" style="display:none;">empty</font>
</td>
</tr>
</table>
<hr>
<b style="padding-left:10px; font-size:12px; color:#666; text-transform:uppercase;">My Folders</b><br>
<ul>
<li><a href="#" class="folder-link">Work</a></li>
<li><a href="#" class="folder-link">Family</a></li>
<li><a href="#" class="folder-link">Bills</a></li>
<li><a href="#" class="folder-link">Receipts</a></li>
<li><a href="#" class="folder-link">Newsletters</a></li>
</ul>
<hr>
<table width="100%" border="1" bgcolor="#e6e6fa">
<tr>
<td align="center">
<font size="2"><b>Singles near you!</b><br>Find love today.<br><a href="#">[View Photos]</a>
</font>
</td>
</tr>
</table>
</td>
<td valign="top">
<p align="center">
<font color="red" size="2"><b>Warning: Your mailbox is 98% full.</b></font>
<a href="#">Free up space</a>
</p>
<table width="100%" border="0" bgcolor="#cccccc" cellpadding="3">
<tr>
<td>
<input type="button" value="New">
<input type="button" value="Reply">
<input type="button" value="Reply All">
<input type="button" value="Forward">
<span style="color:#ddd; margin:0 5px;">|</span>
<input type="button" value="Delete">
<input type="button" value="Junk">
<input type="button" value="Move To...">
</td>
<td align="right" style="font-size:12px; color:#666;">
1-20 of 1204
</td>
</tr>
</table>
<form>
<table width="100%" border="1" cellspacing="0" cellpadding="3" class="mail-table">
<tr bgcolor="#999999">
<th width="30"><input type="checkbox" id="selectAll"></th>
<th width="30"></th>
<th width="200">From</th>
<th>Subject</th>
<th width="100">Date</th>
<th width="60">Size</th>
</tr>
<tr bgcolor="#ffffff" class="mail-row unread">
<td align="center"><input type="checkbox"></td>
<td align="center">🔵</td>
<td><b>Boss_Steve</b></td>
<td><b>URGENT: Meeting rescheduled to 3 PM</b></td>
<td>Today</td>
<td>2KB</td>
</tr>
<tr bgcolor="#ffffff" class="mail-row unread">
<td align="center"><input type="checkbox"></td>
<td align="center">🔵</td>
<td><b>HR Department</b></td>
<td><b>Year-end performance review schedule</b></td>
<td>Today</td>
<td>15KB</td>
</tr>
<tr bgcolor="#ffffcc">
<td align="center"><input type="checkbox" disabled></td>
<td align="center">
<font color="red">$</font>
</td>
<td>
<font color="green"><b>MyGlobalMail Partner</b></font>
</td>
<td><a href="#"><b>CONGRATULATIONS! ...</b></a></td>
<td>Now</td>
<td>-</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Amazon.com</td>
<td>Your order #77821 has shipped</td>
<td>Yesterday</td>
<td>45KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>LinkedIn</td>
<td>You appeared in 5 searches this week</td>
<td>Yesterday</td>
<td>12KB</td>
</tr>
<tr bgcolor="#ffffff" class="mail-row unread">
<td align="center"><input type="checkbox"></td>
<td align="center">⚠️</td>
<td><b>Security Team</b></td>
<td><b>Action Required: Verify your password immediately</b></td>
<td>Yesterday</td>
<td>5KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Newsletter_Weekly</td>
<td>Top 10 Tech Trends of 2025</td>
<td>Dec 20</td>
<td>120KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Mom</td>
<td>Re: Christmas dinner plans?</td>
<td>Dec 19</td>
<td>8KB</td>
</tr>
<tr bgcolor="#ffe4e1">
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>GitHub</td>
<td>[GitHub] A personal access token has expired</td>
<td>Dec 18</td>
<td>10KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Netflix</td>
<td>New login from new device</td>
<td>Dec 18</td>
<td>15KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Spotify</td>
<td>Your 2025 Wrapped is here!</td>
<td>Dec 17</td>
<td>55KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Project Manager</td>
<td>Fwd: Client feedback on Q4 report</td>
<td>Dec 16</td>
<td>2MB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Service Desk</td>
<td>Ticket #9921 resolved</td>
<td>Dec 15</td>
<td>4KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Bank of America</td>
<td>Your monthly statement is ready</td>
<td>Dec 15</td>
<td>1MB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Zoom</td>
<td>Meeting invitation: Daily Standup</td>
<td>Dec 14</td>
<td>8KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Slack</td>
<td>You have 5 unread notifications</td>
<td>Dec 14</td>
<td>12KB</td>
</tr>
<tr bgcolor="#f0f0f0" class="mail-row">
<td align="center"><input type="checkbox"></td>
<td align="center"></td>
<td>Adobe Creative Cloud</td>
<td>Payment successful</td>
<td>Dec 13</td>
<td>8KB</td>
</tr>
</table>
</form>
<br>
<table width="100%" border="0">
<tr>
<td align="right">
<a href="#">[Previous]</a>
<b>1</b> <a href="#">2</a> <a href="#">3</a> ... <a href="#">50</a>
<a href="#">[Next]</a>
</td>
</tr>
</table>
<hr>
<center>
</center>
</td>
</tr>
</table>
<hr>
<center>
<font size="1" color="#888888">
&copy; 1999-2025 MyGlobalMail Inc. All rights reserved.<br>
<a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> | <a href="#">About Us</a> | <a
href="#">Careers</a>
</font>
</center>
<script>
// 全选功能
document.getElementById('selectAll').addEventListener('change', function (e) {
const checkboxes = document.querySelectorAll('.mail-table input[type="checkbox"]');
checkboxes.forEach(cb => cb.checked = e.target.checked);
});
// 模拟行点击选中
const rows = document.querySelectorAll('.mail-row');
rows.forEach(row => {
row.addEventListener('click', function (e) {
if (e.target.type !== 'checkbox') {
const checkbox = this.querySelector('input[type="checkbox"]');
checkbox.checked = !checkbox.checked;
}
});
});
console.log("Webmail initialized. Ads blocked.");
</script>
</body>
</html>