change marking page layout

src/app/ui/marking-page/protected-files-table.tsx

@@ -1,3 +1,5 @@
+/* removed */
+
 import { IconShield, IconDownload } from '@/app/ui/icons/icons';
 export default function ProtectedFilesTable() {
 	return (

src/app/ui/marking-page/protection-summary.tsx

@@ -1,21 +1,92 @@
+'use client'
+
+import { useState } from 'react';
+import { StackedBarChart } from '@/app/components/StackedBarChart';
+import { useTranslations } from 'next-intl';
+
+const data = [
+	{
+		name: 'Page A',
+		checks: 4000,
+		violations: 2000
+	},
+	{
+		name: 'Page B',
+		checks: 3000,
+		violations: 1398
+	},
+	{
+		name: 'Page C',
+		checks: 2000,
+		violations: 1000
+	},
+	{
+		name: 'Page D',
+		checks: 2780,
+		violations: 1000
+	},
+	{
+		name: 'Page E',
+		checks: 5090,
+		violations: 4800
+	},
+	{
+		name: 'Page F',
+		checks: 5390,
+		violations: 3800
+	}
+];
+
 export default function ProtectionSummary() {
+	const [isOpen, setIsOpen] = useState(false);
+	const t = useTranslations('Global');
+
 	return (
-		<div className="protection-summary">
-			<h3>Статистика защиты</h3>
-			<div className="protection-stats">
-				<div className="stat-card">
-					<div className="stat-number">0</div>
-					<div className="stat-label">Всего файлов</div>
+		<div className="protection-overview">
+			<h3>{t('protecting-your-content')}</h3>
+			<p>{t('current-status-of')}</p>
+			<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
+				<div className="protection-stat total-files">
+					<div className="protection-stat-value">0</div>
+					<div className="protection-stat-label">{t('total-files')}</div>
 				</div>
-				<div className="stat-card">
-					<div className="stat-number">0</div>
-					<div className="stat-label">Общий размер</div>
-				</div>
-				<div className="stat-card">
-					<div className="stat-number">0</div>
-					<div className="stat-label">Проверки/нарушения</div>
+
+				<div className="protection-stat total-checks">
+					<div className="protection-stat-value">0</div>
+					<div className="protection-stat-label">{t('size')}</div>
 				</div>
+				{isOpen ? (
+					<div className="protection-stat total-usage">
+						<StackedBarChart data={data} />
+					</div>
+				) : (
+					<div className="protection-stat total-usage">
+						<div className="protection-stat-value">0</div>
+						<div className="protection-stat-label">
+							{t('size')}
+						</div>
+					</div>
+				)}
 			</div>
+			<button
+				className="protection-overview-switch cursor-pointer"
+				onClick={() => {
+					setIsOpen(!isOpen);
+				}}
+			>
+				<svg
+					className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fillRule="evenodd"
+						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+						clipRule="evenodd"
+					/>
+				</svg>
+			</button>
 		</div>
 	)
 }

src/app/ui/marking-page/upload-section-image.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useRef, useState, useCallback, ChangeEvent, DragEvent } from 'react';
+import {IconShieldAdd} from '@/app/ui/icons/icons';
 
 interface SelectedFile {
 	file: File;
@@ -188,11 +189,9 @@ export default function UploadSectionImage() {
 					transition: 'all .2s ease-in-out'
 				}}
 			>
+				<IconShieldAdd />
 				<h4>Перетащите изображения сюда</h4>
-				<p className="description">
-					Размер: 150x150 - 4000x4000 пикселей, форматы: JPG, PNG, GIF, BMP (WEBP НЕ поддерживается)
-				</p>
-
+				<p className="mb-2.5 text-[#6b7280]">или</p>
 				<input
 					ref={fileInputRef}
 					type="file"
@@ -210,6 +209,16 @@ export default function UploadSectionImage() {
 					Выбрать файлы для защиты
 				</button>
 
+				<p className="description">
+					Разрешение изображение: 100x100 - 10000x10000 пикселей
+				</p>
+				<p className="description">
+					Размер файла: до 20 МБ
+				</p>
+				<p className="description">
+					Формат файла: JPG, PNG, GIF, BMP (WEBP НЕ поддерживается)
+				</p>
+
 				{error && (
 					<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
 						<p className="text-red-600 font-medium">❌ {error}</p>