change marking page layout

src/app/ui/icons/icons.tsx

@@ -26,7 +26,17 @@ export function IconAudioFile() {
 
 export function IconShield() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22q-3.475-.875-5.738-3.988T4 11.1V5l8-3l8 3v6.1q0 3.8-2.262 6.913T12 22m0-2.1q2.6-.825 4.3-3.3t1.7-5.5V6.375l-6-2.25l-6 2.25V11.1q0 3.025 1.7 5.5t4.3 3.3M10 16h4q.425 0 .713-.288T15 15v-3q0-.425-.288-.712T14 11v-1q0-.825-.587-1.412T12 8t-1.412.588T10 10v1q-.425 0-.712.288T9 12v3q0 .425.288.713T10 16m1-5v-1q0-.425.288-.712T12 9t.713.288T13 10v1z" /></svg>
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
+			<path fill="currentColor" d="M12 22q-3.475-.875-5.738-3.988T4 11.1V5l8-3l8 3v6.1q0 3.8-2.262 6.913T12 22m0-2.1q2.6-.825 4.3-3.3t1.7-5.5V6.375l-6-2.25l-6 2.25V11.1q0 3.025 1.7 5.5t4.3 3.3M10 16h4q.425 0 .713-.288T15 15v-3q0-.425-.288-.712T14 11v-1q0-.825-.587-1.412T12 8t-1.412.588T10 10v1q-.425 0-.712.288T9 12v3q0 .425.288.713T10 16m1-5v-1q0-.425.288-.712T12 9t.713.288T13 10v1z" />
+		</svg>
+	)
+}
+
+export function IconShieldAdd() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16" className="icon">
+			<path fill="currentColor" d="M7.647 2.146a.5.5 0 0 1 .708 0C9.595 3.39 10.969 4 12.5 4a.5.5 0 0 1 .5.5v1.1a5.5 5.5 0 0 0-1-.393v-.226c-1.48-.112-2.815-.726-4-1.792c-1.186 1.066-2.52 1.68-4 1.792v2.52c0 1.431.361 2.56 1.017 3.44c.053.66.222 1.288.487 1.862C3.844 11.59 3 9.81 3 7.502V4.5a.5.5 0 0 1 .5-.5c1.53 0 2.904-.611 4.147-1.854M15 10.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-2a.5.5 0 0 0-1 0V10H8.5a.5.5 0 0 0 0 1H10v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H11z" />
+		</svg>
 	)
 }
 

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>