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