diff --git a/src/app/pages/dashboard/page.tsx b/src/app/pages/dashboard/page.tsx index 92fa054..8ab1431 100644 --- a/src/app/pages/dashboard/page.tsx +++ b/src/app/pages/dashboard/page.tsx @@ -2,6 +2,11 @@ import { Metadata } from 'next'; import { Suspense } from 'react'; import ButtonTest from '@/app/ui/button-test' import ProtectionOverview from '@/app/ui/dashboard/protection-overview'; +import StatsGrid from '@/app/ui/dashboard/stats-grid'; +import StorageBreakdown from '@/app/ui/dashboard/storage-breakdown'; +import RecentFilesList from '@/app/ui/dashboard/recent-files-list'; +import ChartContainer from '@/app/ui/dashboard/chart-container'; +import UserInfo from '@/app/ui/dashboard/user-info'; export const metadata: Metadata = { title: 'Dashboard', @@ -13,7 +18,16 @@ export default function Home() {
...}>

Статистика

- + + +
+ + +
+
+ + +
{/* */}
diff --git a/src/app/styles/dashboard.scss b/src/app/styles/dashboard.scss index 42ee070..9b95220 100644 --- a/src/app/styles/dashboard.scss +++ b/src/app/styles/dashboard.scss @@ -16,7 +16,30 @@ } } +.chart-title { + font-size: 18px; + font-weight: 600; + display: flex; + align-items: center; + color: #1f2937; + + &::before { + content: ''; + width: 6px; + height: 6px; + background: #6366f1; + border-radius: 50%; + margin-right: 10px; + } +} + .protection-overview { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 20px; + padding: 25px; + margin-bottom: 30px; + h3 { margin: 0 0 10px 0; font-size: 20px; @@ -27,4 +50,504 @@ opacity: 0.9; font-size: 14px; } + + .protection-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + margin-top: 20px; + } + + .protection-stat { + text-align: center; + padding: 15px; + background: rgba(255, 255, 255, 0.1); + border-radius: 12px; + } + + .protection-stat-value { + font-size: 28px; + font-weight: 700; + margin-bottom: 5px; + } + + .protection-stat-label { + font-size: 12px; + opacity: 0.9; + } +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + margin-bottom: 30px; + + .stat-card.images { + --card-color-1: #ff6b8a; + --card-color-2: #ff8da1; + } + + .stat-card.videos { + --card-color-1: #8b5cf6; + --card-color-2: #a78bfa; + } + + .stat-card.audio { + --card-color-1: #10b981; + --card-color-2: #34d399; + } + + .stat-card.scripts { + --card-color-1: #f59e0b; + --card-color-2: #fbbf24; + } + + .stat-card { + background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2)); + border-radius: 20px; + padding: 25px; + color: white; + position: relative; + overflow: hidden; + transition: transform 0.3s, box-shadow 0.3s; + + &::after { + content: ''; + position: absolute; + top: -50%; + right: -20px; + width: 100px; + height: 150px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50px; + transform: rotate(45deg); + } + + &:hover { + transform: translateY(-5px); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); + } + } + + .stat-type { + font-size: 12px; + opacity: 0.8; + margin-bottom: 10px; + text-transform: uppercase; + letter-spacing: 1px; + position: relative; + z-index: 1; + } + + .stat-value { + font-size: 32px; + font-weight: 700; + margin-bottom: 5px; + position: relative; + z-index: 1; + } + + .stat-label { + font-size: 14px; + opacity: 0.9; + position: relative; + z-index: 1; + } + + .stat-icon { + font-size: 12px; + color: white; + margin-top: 5px; + font-weight: 700; + } +} + +.extended-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; + margin-bottom: 30px; +} + +.block-wrapper { + background: white; + border-radius: 20px; + padding: 25px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + border: 1px solid #f1f5f9; +} + +.storage-breakdown { + .storage-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 0; + border-bottom: 1px solid #f1f5f9; + } + + .storage-icon { + width: 24px; + height: 24px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + + &.storage-icon.photos { + background: #dbeafe; + color: #1d4ed8; + } + + &.storage-icon.videos { + background: #f3e8ff; + color: #7c3aed; + } + + &.storage-icon.audio { + background: #d1fae5; + color: #059669; + } + + &.storage-icon.documents { + background: #fed7d7; + color: #dc2626; + } + + &.storage-icon.code { + background: #e0e7ff; + color: #4f46e5; + } + + &.storage-icon.text { + background: #fef3c7; + color: #d97706; + } + } + + .storage-type { + display: flex; + align-items: center; + gap: 10px; + } + + .storage-footer { + margin-top: 15px; + padding-top: 15px; + border-top: 2px solid #e2e8f0; + } + + .storage-footer-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + } + + .storage-footer-title { + font-weight: 600; + color: #1e293b; + } + + .storage-footer-weight { + font-weight: 600; + color: #6366f1; + font-size: 16px; + } + + .progress-bar { + background: #f1f5f9; + border-radius: 10px; + height: 8px; + overflow: hidden; + margin: 15px 0; + } + + .progress-fill { + height: 100%; + background: linear-gradient(90deg, #10b981, #059669); + border-radius: 10px; + transition: width 0.8s ease; + } +} + +.recent-files-list { + .file-item { + display: flex; + align-items: center; + padding: 12px 0; + border-bottom: 1px solid #f8fafc; + transition: background-color 0.2s; + + &:hover { + background: #f8fafc; + margin: 0 -15px; + padding-left: 15px; + padding-right: 15px; + border-radius: 10px; + } + } + + .file-icon { + width: 32px; + height: 32px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 12px; + font-size: 14px; + } + + .file-info { + flex: 1; + } + + .file-name { + font-weight: 500; + color: #1e293b; + font-size: 14px; + margin-bottom: 2px; + } + + .file-meta { + font-size: 12px; + color: #64748b; + } +} + +.charts-section { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 30px; + margin-bottom: 30px; +} + +.chart-container { + .chart-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + } + + .date-filter { + background: #f3f4f6; + border: none; + padding: 8px 15px; + border-radius: 10px; + font-size: 12px; + cursor: pointer; + transition: background-color 0.3s; + } + + .chart-main-content { + padding: 25px; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border-radius: 15px; + border: 1px solid #e2e8f0; + } + + .chart-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + } + + .chart-item.images { + --chart-color-1: #10b981; + --chart-color-2: #34d399; + } + + .chart-item.videos { + --chart-color-1: #8b5cf6; + --chart-color-2: #7c3aed; + } + + .chart-item.audios { + --chart-color-1: #f59e0b; + --chart-color-2: #d97706; + } + + .chart-item.documents { + --chart-color-1: #ef4444; + --chart-color-2: #dc2626; + } + + .chart-item.scripts { + --chart-color-1: #4f46e5; + --chart-color-2: #4338ca; + } + + .chart-item.texts { + --chart-color-1: #d97706; + --chart-color-2: #b45309; + } + + .chart-item { + border-left: 4px solid var(--chart-color-1); + + background: white; + padding: 20px; + border-radius: 12px; + box-shadow: 0 2px 10px rgba(16, 185, 129, 0.1); + + &-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + gap: 10px; + } + + &-image { + width: 32px; + height: 32px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 16px; + background: linear-gradient(135deg, var(--chart-color-1), var(--chart-color-2)); + } + + &-title { + font-weight: 600; + color: #1f2937; + } + + &-count { + font-size: 24px; + font-weight: 700; + color: var(--chart-color-1); + margin-bottom: 5px; + } + + &-tooltip { + font-size: 12px; + color: #6b7280; + } + + &-progress-bar { + margin-top: 10px; + height: 4px; + background: #e5e7eb; + border-radius: 2px; + overflow: hidden; + } + + &-progress-fill { + height: 100%; + background: linear-gradient(90deg, var(--chart-color-1), var(--chart-color-2)); + width: 2%; + transition: width 1s ease; + } + + } + + .chart-total { + margin-top: 20px; + padding: 15px; + background: white; + border-radius: 10px; + border: 1px solid #e5e7eb; + display: flex; + justify-content: space-between; + align-items: center; + } + + .chart-total-text { + color: #6b7280; + font-size: 14px; + } + + .chart-total-count { + font-size: 18px; + font-weight: 700; + color: #1f2937; + } +} + +.user-info { + .user-data { + margin-bottom: 20px; + } + + .user-field { + margin-bottom: 15px; + padding: 12px; + background: #f9fafb; + border-radius: 10px; + font-size: 14px; + border-left: 4px solid #6366f1; + + strong { + color: #6366f1; + } + + &-limit { + &-title { + font-size: 12px; + color: #64748b; + margin-bottom: 5px; + } + + &-text { + font-size: 13px; + margin-bottom: 6px; + + span { + font-weight: 600; + color: #1e293b; + } + } + + &-progress-bar { + background: #f1f5f9; + border-radius: 10px; + overflow: hidden; + height: 6px; + margin: 8px 0; + } + + &-progress-fill { + width: 12%; + background: linear-gradient(90deg, rgb(99, 102, 241), rgb(139, 92, 246)); + height: 100%; + border-radius: 10px; + transition: width 0.8s ease; + } + + &-footer { + font-size: 11px; + color: #64748b; + text-align: center; + } + } + } + + .stats-mini { + display: flex; + justify-content: space-between; + margin-top: 20px; + } + + .stat-mini { + text-align: center; + + &-value { + font-size: 24px; + font-weight: 700; + color: #6366f1; + } + + &-label { + font-size: 12px; + color: #6b7280; + margin-top: 5px; + } + } } \ No newline at end of file diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index e630dee..ff45462 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -1,2 +1,27 @@ @use './header.scss'; -@use './dashboard.scss'; \ No newline at end of file +@use './dashboard.scss'; + +.btn { + padding: 12px 24px; + border-radius: 10px; + border: none; + cursor: pointer; + font-size: 14px; + font-weight: 600; + transition: all 0.3s; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.btn-primary { + background: linear-gradient(135deg, #6366f1, #8b5cf6); + color: white; + border: 2px solid transparent; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); + } +} \ No newline at end of file diff --git a/src/app/ui/dashboard/chart-container.tsx b/src/app/ui/dashboard/chart-container.tsx new file mode 100644 index 0000000..2c8d2fc --- /dev/null +++ b/src/app/ui/dashboard/chart-container.tsx @@ -0,0 +1,89 @@ +export default function ChartContainer() { + return ( +
+
+

Поиск контента

+ +
+
+
+
+
+
📸
+ Изображения +
+
0
+
поисковых запросов
+
+
+
+
+
+
+
🎬
+ Видео +
+
0
+
поисковых запросов
+
+
+
+
+
+
+
🎵
+ Аудио +
+
0
+
поисковых запросов
+
+
+
+
+
+
+
📄
+ Документы +
+
0
+
поисковых запросов
+
+
+
+
+
+
+
💻
+ Код +
+
0
+
поисковых запросов
+
+
+
+
+
+
+
📝
+ Текст +
+
0
+
поисковых запросов
+
+
+
+
+
+
+ Всего поисковых запросов за + date: + + + 0 +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/dashboard/protection-overview.tsx b/src/app/ui/dashboard/protection-overview.tsx index 87abba4..15c33cc 100644 --- a/src/app/ui/dashboard/protection-overview.tsx +++ b/src/app/ui/dashboard/protection-overview.tsx @@ -3,6 +3,24 @@ export default function ProtectionOverview() {

Защита вашего контента

Текущий статус защищенности и активности системы мониторинга

+
+
+
0
+
Файлов с водяными знаками
+
+
+
0
+
Высокий уровень защиты
+
+
+
0
+
Всего проверок
+
+
+
0%
+
Использовано лимитов
+
+
) } \ No newline at end of file diff --git a/src/app/ui/dashboard/recent-files-list.tsx b/src/app/ui/dashboard/recent-files-list.tsx new file mode 100644 index 0000000..53076c4 --- /dev/null +++ b/src/app/ui/dashboard/recent-files-list.tsx @@ -0,0 +1,35 @@ +export default function RecentFilesList() { + return ( +
+

Новые файлы

+
+
🎵
+
+
file-name
+
+ date + • check count +
+
+
+
+
🎬
+
+
file-name
+
+ date + • check count
+
+
+
+
📸
+
+
file-name
+
+ date + • check count
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/dashboard/stats-grid.tsx b/src/app/ui/dashboard/stats-grid.tsx new file mode 100644 index 0000000..f989102 --- /dev/null +++ b/src/app/ui/dashboard/stats-grid.tsx @@ -0,0 +1,35 @@ +export default function StatsGrid() { + return ( +
+
+
ИЗОБРАЖЕНИЯ
+
0 шт.
+
Ваши изображения
+
+ 0 МБ
+
+
+
ВИДЕО
+
0 шт.
+
Ваш видео контент
+
+ 0 МБ
+
+ +
+
АУДИО
+
0 шт.
+
Ваш аудио контент
+
+ 0 МБ
+
+
+
PDF-ФАЙЛЫ
+
0 шт.
+
Ваши PDF-файлы
+
+ 0 КБ
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/dashboard/storage-breakdown.tsx b/src/app/ui/dashboard/storage-breakdown.tsx new file mode 100644 index 0000000..b4f712a --- /dev/null +++ b/src/app/ui/dashboard/storage-breakdown.tsx @@ -0,0 +1,65 @@ +export default function StorageBreakdown() { + return ( +
+

Использование хранилища

+ +
+
+
📸
+ Изображения +
+
0 МБ
+
+ +
+
+
🎬
+ Видео +
+
0 МБ
+
+ +
+
+
🎵
+ Аудио +
+
0 МБ
+
+ +
+
+
📄
+ Документы +
+
0 КБ
+
+ +
+
+
💻
+ Код (PHP/JS) +
+
0 Б
+
+ +
+
+
📝
+ Текст +
+
0 Б
+
+ +
+
+ Общий объем: + 0 МБ +
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/dashboard/user-info.tsx b/src/app/ui/dashboard/user-info.tsx new file mode 100644 index 0000000..ca598d3 --- /dev/null +++ b/src/app/ui/dashboard/user-info.tsx @@ -0,0 +1,54 @@ +export default function UserInfo() { + return ( +
+

Ваши данные

+
+
+ USER NAME +
+
+ Email: test@te.te +
+
+ Подписка: TYPE +
+
+ Подписка активна до: DATE +
+
+
Лимиты подписки:
+
+ 📁 Файлов в месяц: + 12 / 100 +
+
+ 💾 Хранилище: 1 ГБ +
+
+
+
+
+ Использовано: 12% +
+
+
+ +
+
+
12
+
Контента
+
+
+
12
+
Файлов
+
+
+
208
+
Нарушений
+
+
+
+ ) +} \ No newline at end of file