frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add icons, change styles

Browse Source
This commit is contained in:
smanylov
2025-12-09 18:08:58 +07:00
parent c8e8be8935
commit 8ca445e8c6
18 changed files with 81 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/marking-audio/page.tsx
+4 -1
View File
@@ -1,11 +1,14 @@
import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table';
import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
import TestSection from '@/app/ui/marking-page/test-section';
import { IconAudioFile } from '@/app/ui/icons/icons';
export default function Page() {
return (
<div>
<h1 className="page-title">Защита аудио</h1>
<div className="page-title">
<h1 >Защита аудио</h1>
</div>
<ProtectionSummary />
<TestSection />
<ProtectedFilesTable />
src/app/pages/marking-photo/page.tsx
+4 -1
View File
@@ -2,11 +2,14 @@ import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table';
import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
import TestSection from '@/app/ui/marking-page/test-section';
import UploadSectionImage from '@/app/ui/marking-page/upload-section-image';
import { IconImageFile } from '@/app/ui/icons/icons';
export default function Page() {
return (
<div>
<h1 className="page-title">Защита изображений</h1>
<div className="page-title">
<h1 >Защита изображений</h1>
</div>
<ProtectionSummary />
<UploadSectionImage />
<TestSection />
src/app/pages/marking-video/page.tsx
+4 -1
View File
@@ -1,11 +1,14 @@
import ProtectedFilesTable from '@/app/ui/marking-page/protected-files-table';
import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
import TestSection from '@/app/ui/marking-page/test-section';
import { IconVideoFile } from '@/app/ui/icons/icons';
export default function Page() {
return (
<div>
<h1 className="page-title">Защита видео</h1>
<div className="page-title">
<h1 >Защита видео</h1>
</div>
<ProtectionSummary />
<TestSection />
<ProtectedFilesTable />
src/app/styles/dashboard.scss
+6
View File
@@ -6,6 +6,12 @@
align-items: center;
color: #1f2937;
.icon {
margin-left: 5px;
margin-top: 5px;
color: #6366f1;
}
&::before {
content: '';
width: 8px;
src/app/styles/login.module.scss
+1
View File
@@ -127,6 +127,7 @@
cursor: pointer;
transition: all 0.3s;
margin-bottom: 20px;
margin: 20px 0 0 0;
}
.register-link {
src/app/styles/marking-pages.scss
+8 -1
View File
@@ -177,6 +177,7 @@
padding: 20px 20px 0;
color: #111827;
font-size: 18px;
margin-bottom: 20px;
}
table {
@@ -215,6 +216,7 @@
justify-content: center;
margin-right: 12px;
border: 2px solid #6366f1;
color: #6366f1;
}
&-title {
@@ -261,8 +263,13 @@
}
.btn-secondary {
background: #6b7280;
background: #6366f1;
color: white;
padding: 5px 16px 5px 10px;
}
.icon {
height: 18px;
}
.real-protection-badge {
src/app/ui/icons/icons.tsx
+39
View File
@@ -0,0 +1,39 @@
/* https://icon-sets.iconify.design/ic/ */
export function IconImageFile() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
<path fill="currentColor" d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-4.86 8.86l-3 3.87L9 13.14L6 17h12z" />
</svg>
)
}
export function IconVideoFile() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
<path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8zM6 20V4h7v5h5v11zm8-6l2-1.06v4.12L14 16v1c0 .55-.45 1-1 1H9c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h4c.55 0 1 .45 1 1z" />
</svg>
)
}
export function IconAudioFile() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
<path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8zM6 20V4h7v5h5v11zm10-9h-4v3.88a2.247 2.247 0 0 0-3.5 1.87c0 1.24 1.01 2.25 2.25 2.25S13 17.99 13 16.75V13h3z" />
</svg>
)
}
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>
)
}
export function IconDownload() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
<path fill="currentColor" d="M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z" />
</svg>
)
}
src/app/ui/inputs/vk-login.tsx
-114
View File
@@ -1,114 +0,0 @@
'use client'
import { Config, OneTap } from '@vkid/sdk';
import { useEffect, useRef } from 'react';
const VKAuthDynamic = () => {
const containerRef = useRef(null);
const isInitialized = useRef(false);
useEffect(() => {
// Динамическая загрузка SDK
const loadVKIDSDK = async () => {
try {
// Проверяем, не загружен ли уже SDK
if (window.VKIDSDK) return window.VKIDSDK;
const { default: VKID } = await import('@vkid/sdk');
window.VKIDSDK = VKID;
return VKID;
} catch (error) {
console.error('Failed to load VKID SDK:', error);
return null;
}
};
const initialize = async () => {
if (isInitialized.current) return;
const VKID = await loadVKIDSDK();
if (!VKID || !containerRef.current) return;
isInitialized.current = true;
try {
// Конфигурация
VKID.Config.init({
app: Number(process.env.NEXT_PUBLIC_VK_APP_ID) || 1111111,
redirectUrl: process.env.NEXT_PUBLIC_REDIRECT_URL || window.location.origin,
responseMode: VKID.ConfigResponseMode.Callback,
source: VKID.ConfigSource.LOWCODE,
scope: '',
});
// Создание и рендеринг виджета
const oneTap = new VKID.OneTap();
oneTap
.render({
container: containerRef.current,
showAlternativeLogin: true,
})
.on(VKID.WidgetEvents.ERROR, handleError)
.on(VKID.OneTapInternalEvents.LOGIN_SUCCESS, async (payload) => {
const { code, device_id } = payload;
try {
const authData = await VKID.Auth.exchangeCode(code, device_id);
handleSuccess(authData);
} catch (error) {
handleError(error);
}
});
} catch (error) {
console.error('VKID initialization error:', error);
}
};
initialize();
return () => {
// Очистка
isInitialized.current = false;
};
}, []);
const handleSuccess = async (data) => {
try {
// Отправка данных на ваш API endpoint
const response = await fetch('/api/auth/vk-callback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
const result = await response.json();
if (response.ok) {
// Успешная авторизация
console.log('Authentication successful:', result);
// Перенаправление или обновление состояния
window.location.href = '/dashboard'; // Пример редиректа
} else {
handleError(result);
}
} catch (error) {
console.error('Server request failed:', error);
}
};
const handleError = (error) => {
console.error('Authentication error:', error);
// Можно показать уведомление пользователю
};
return (
<div>
<div ref={containerRef} />
vk
</div>
);
};
export default VKAuthDynamic;
src/app/ui/marking-page/protected-files-table.tsx
+8 -7
View File
@@ -1,8 +1,9 @@
import { IconShield, IconDownload } from '@/app/ui/icons/icons';
export default function ProtectedFilesTable() {
return (
<div className="protected-files-table">
<h3>
📋 Защищенные изображения (0)
Защищенные изображения (0)
</h3>
@@ -21,7 +22,7 @@ export default function ProtectedFilesTable() {
<td>
<div className="files-table-file">
<div className="files-table-icon">
🛡️
<IconShield />
</div>
<div>
<div className="files-table-title">
@@ -54,7 +55,7 @@ export default function ProtectedFilesTable() {
</td>
<td>
<button className="btn btn-secondary">
📥 Скачать
<IconDownload /> Скачать
</button>
</td>
</tr>
@@ -62,7 +63,7 @@ export default function ProtectedFilesTable() {
<td>
<div className="files-table-file">
<div className="files-table-icon">
🛡️
<IconShield />
</div>
<div>
<div className="files-table-title">
@@ -95,7 +96,7 @@ export default function ProtectedFilesTable() {
</td>
<td>
<button className="btn btn-secondary">
📥 Скачать
<IconDownload /> Скачать
</button>
</td>
</tr>
@@ -103,7 +104,7 @@ export default function ProtectedFilesTable() {
<td>
<div className="files-table-file">
<div className="files-table-icon">
🛡️
<IconShield />
</div>
<div>
<div className="files-table-title">
@@ -136,7 +137,7 @@ export default function ProtectedFilesTable() {
</td>
<td>
<button className="btn btn-secondary">
📥 Скачать
<IconDownload /> Скачать
</button>
</td>
</tr>
src/app/ui/marking-page/protection-summary.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
export default function ProtectionSummary() {
return (
<div className="protection-summary">
<h3>📊 Статистика защиты</h3>
<h3>Статистика защиты</h3>
<div className="protection-stats">
<div className="stat-card">
<div className="stat-number">0</div>
src/app/ui/marking-page/test-section.tsx
+2 -5
View File
@@ -2,14 +2,11 @@ export default function TestSection() {
return (
<div className="test-section">
<h3>
🔍 Проверить защиту изображения
Проверить защиту файла
</h3>
<div className="test-section-content">
<h4>
🔍
</h4>
<button className="btn btn-primary">
🔍 Выбрать изображение для анализа
Выбрать фаил для анализа
</button>
<p>
При обнаружении защиты будет показана полная информация о владельце (WEBP НЕ поддерживается)
src/app/ui/marking-page/upload-section-image.tsx
+2 -3
View File
@@ -1,8 +1,8 @@
'use client'
import React, { useRef, useState, useCallback, ChangeEvent, DragEvent } from 'react';
import { IconImageFile } from '@/app/ui/icons/icons';
// Типы для выбранного файла
interface SelectedFile {
file: File;
preview: string;
@@ -101,7 +101,6 @@ export default function UploadSectionImage() {
return;
}
// Создание превью
const objectUrl = URL.createObjectURL(file);
setSelectedFile({
@@ -174,7 +173,7 @@ export default function UploadSectionImage() {
return (
<div className="upload-section">
<h3>📷 Загрузить изображение для защиты</h3>
<h3>Загрузить изображение для защиты</h3>
<div
className={`drag-drop-zone ${isDragging ? 'dragging' : ''}`}
src/app/ui/register-form.tsx
+1 -1
View File
@@ -115,7 +115,7 @@ export default function RegisterForm() {
{state?.error?.server && (
<p className="text-sm text-red-500">{state?.error?.server}</p>
)}
<button type="submit" className={`${styles['btn']}`} style={{ marginTop: "20px" }}>Создать аккаунт</button>
<button type="submit" className={`${styles['btn']}`}>Создать аккаунт</button>
</form >
)
}
src/app/ui/settings/notifications-monitoring-settings.tsx
-10
View File
@@ -28,16 +28,6 @@ export default function NotificationsMonitoringSettings() {
</label>
<small>Получать уведомления о нарушениях на email</small>
</div>
<div className="form-group">
<label className="form-label">
<span>📱 SMS уведомления</span>
<span className="toggle-switch">
<input type="checkbox" name="notification_sms" />
<span className="toggle-slider"></span>
</span>
</label>
<small>Критически важные уведомления по SMS</small>
</div>
<div className="form-group">
<label className="form-label">
<span>🤖 Автоматический мониторинг</span>
src/app/ui/settings/personal-data-settings.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export default function PersonalDataSettings() {
<label className="form-label">Возраст:</label>
<input type="text" name="age" className="form-input" />
<small>
Заполняется автоматически из даты рождения
Заполняется автоматически исходя из даты рождения
</small>
</div>
src/app/ui/settings/subscription-settings.tsx
-3
View File
@@ -40,9 +40,6 @@ export default function SubscriptionSettings() {
<button className="btn btn-outline">
💼 ПРОФИ
</button>
<button className="btn btn-outline">
🏆 МАКСИМУМ
</button>
</div>
</div>
</div>