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;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
@@ -159,5 +164,62 @@
margin-right: 12px;
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 className="files-table-title">
Screenshot 2025-11-13 at 10.20.14.p...
</div>
<div>
<div className="files-table-protect">
ПОЛНАЯ ЗАЩИТА
<span className="real-protection-badge">
ВСЕ МОДУЛИ
@@ -36,20 +36,102 @@ export default function ProtectedFilesTable() {
</div>
</div>
</td>
<td>
<td className="files-table-size">
1.93 МБ
</td>
<td>
<div>
<div>
<div></div>
<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
</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>