add file-table layout
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user