add file-table layout

This commit is contained in:
smanylov
2025-12-05 16:38:10 +07:00
parent c4538df07b
commit 3da07d6073
2 changed files with 150 additions and 6 deletions
+62
View File
@@ -127,6 +127,11 @@
font-size: 18px; font-size: 18px;
} }
table {
width: 100%;
border-collapse: collapse;
}
th { th {
background: linear-gradient(135deg, #6366f1, #8b5cf6); background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white; color: white;
@@ -159,5 +164,62 @@
margin-right: 12px; margin-right: 12px;
border: 2px solid #6366f1; border: 2px solid #6366f1;
} }
&-title {
font-weight: 500;
color: #111827;
font-size: 14px;
}
&-protect {
font-size: 11px;
color: #6366f1;
font-weight: 600;
}
&-size {
color: #6b7280;
font-size: 14px;
}
&-protect {
display: flex;
align-items: center;
}
&-bar {
width: 30px;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
margin-right: 8px;
}
&-fill {
width: 100%;
height: 100%;
background: #6366f1;
border-radius: 3px;
}
&-date {
color: #6b7280;
font-size: 13px;
}
}
.btn-secondary {
background: #6b7280;
color: white;
}
.real-protection-badge {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: bold;
margin-left: 5px;
} }
} }
@@ -24,10 +24,10 @@ export default function ProtectedFilesTable() {
🛡 🛡
</div> </div>
<div> <div>
<div> <div className="files-table-title">
Screenshot 2025-11-13 at 10.20.14.p... Screenshot 2025-11-13 at 10.20.14.p...
</div> </div>
<div> <div className="files-table-protect">
ПОЛНАЯ ЗАЩИТА ПОЛНАЯ ЗАЩИТА
<span className="real-protection-badge"> <span className="real-protection-badge">
ВСЕ МОДУЛИ ВСЕ МОДУЛИ
@@ -36,20 +36,102 @@ export default function ProtectedFilesTable() {
</div> </div>
</div> </div>
</td> </td>
<td> <td className="files-table-size">
1.93 МБ 1.93 МБ
</td> </td>
<td> <td>
<div> <div className="files-table-protect">
<div> <div className="files-table-bar">
<div></div> <div className="files-table-fill"></div>
</div> </div>
<span> <span>
100% 100%
</span> </span>
</div> </div>
</td> </td>
<td className="files-table-date">
27.11.2025 10:16
</td>
<td> <td>
<button className="btn btn-secondary">
📥 Скачать
</button>
</td>
</tr>
<tr>
<td>
<div className="files-table-file">
<div className="files-table-icon">
🛡
</div>
<div>
<div className="files-table-title">
Screenshot 2025-11-13 at 10.20.14.p...
</div>
<div className="files-table-protect">
ПОЛНАЯ ЗАЩИТА
<span className="real-protection-badge">
ВСЕ МОДУЛИ
</span>
</div>
</div>
</div>
</td>
<td className="files-table-size">
1.93 МБ
</td>
<td>
<div className="files-table-protect">
<div className="files-table-bar">
<div className="files-table-fill"></div>
</div>
<span>
100%
</span>
</div>
</td>
<td className="files-table-date">
27.11.2025 10:16
</td>
<td>
<button className="btn btn-secondary">
📥 Скачать
</button>
</td>
</tr>
<tr>
<td>
<div className="files-table-file">
<div className="files-table-icon">
🛡
</div>
<div>
<div className="files-table-title">
Screenshot 2025-11-13 at 10.20.14.p...
</div>
<div className="files-table-protect">
ПОЛНАЯ ЗАЩИТА
<span className="real-protection-badge">
ВСЕ МОДУЛИ
</span>
</div>
</div>
</div>
</td>
<td className="files-table-size">
1.93 МБ
</td>
<td>
<div className="files-table-protect">
<div className="files-table-bar">
<div className="files-table-fill"></div>
</div>
<span>
100%
</span>
</div>
</td>
<td className="files-table-date">
27.11.2025 10:16 27.11.2025 10:16
</td> </td>
<td> <td>