<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LEGIT CHECKER</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        /* Основные стили */
        :root {
            --bg-light: linear-gradient(135deg, #f5f5f7, #e0e0e7);
            --bg-dark: linear-gradient(135deg, #1d1d1f, #2c2c2e);
            --text-light: #1d1d1f;
            --text-dark: #f5f5f7;
            --container-bg-light: rgba(255, 255, 255, 0.3);
            --container-bg-dark: rgba(44, 44, 46, 0.3);
            --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.1);
            --shadow-dark: 0 10px 30px rgba(255, 255, 255, 0.05);
            --button-bg: linear-gradient(45deg, #007aff, #0047bb);
            --button-hover: linear-gradient(45deg, #0047bb, #003399);
            --button-disabled: linear-gradient(45deg, #a5d6a7, #81c784);
            --sidebar-width: 300px;
            --transition-speed: 0.3s;
            --accent-color: #007aff;
            --accent-hover: #0047bb;
            --success-color: #4caf50;
            --error-color: #f44336;
            --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
        }

        body {
            font-family: 'Poppins', 'Roboto', sans-serif;
            background: var(--bg-light);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            color: var(--text-light);
            overflow: hidden;
            transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
        }

        body.dark-theme {
            background: var(--bg-dark);
            color: var(--text-dark);
        }

        .container {
            background: var(--container-bg-light);
            padding: 40px;
            border-radius: 20px;
            box-shadow: var(--shadow-light);
            text-align: center;
            max-width: 600px;
            width: 100%;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transform-style: preserve-3d;
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background var(--transition-speed) ease;
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            pointer-events: none;
            z-index: -1;
        }

        body.dark-theme .container {
            background: var(--container-bg-dark);
            box-shadow: var(--shadow-dark);
        }

        h1 {
            margin-bottom: 24px;
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-light);
            transition: color var(--transition-speed) ease;
        }

        body.dark-theme h1 {
            color: var(--text-dark);
        }

        .drop-zone {
            width: 100%;
            height: 200px;
            border: 2px dashed var(--accent-color);
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 0 auto 20px;
            cursor: pointer;
            transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
            font-size: 0.9rem;
            color: var(--accent-color);
            background: rgba(255, 255, 255, 0.5);
        }

        body.dark-theme .drop-zone {
            background: rgba(44, 44, 46, 0.5);
        }

        .drop-zone.dragover {
            border-color: var(--accent-hover);
            background-color: rgba(0, 122, 255, 0.1);
        }

        .image-wrapper {
            position: relative;
            display: inline-block;
            margin-bottom: 24px;
            opacity: 0;
            transform: scale(0.9);
            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        .image-wrapper.show {
            opacity: 1;
            transform: scale(1);
        }

        img, video {
            max-width: 100%;
            max-height: 200px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        img:hover, video:hover {
            transform: scale(1.05);
        }

        .remove-image {
            position: absolute;
            top: -12px;
            right: -12px;
            background-color: rgba(255, 68, 68, 0.9);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        .remove-image:hover {
            background-color: rgba(255, 0, 0, 1);
            transform: scale(1.1);
        }

        .remove-image i {
            font-size: 16px;
            color: #fff;
            transition: color var(--transition-speed) ease;
        }

        input[type="file"] {
            display: none;
        }

        button {
            padding: 12px 24px;
            font-size: 1rem;
            font-weight: 500;
            background: var(--button-bg);
            color: #fff;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: background var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            margin-top: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        button:hover {
            background: var(--button-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
        }

        button:active {
            transform: translateY(0);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        button:disabled {
            background: var(--button-disabled);
            opacity: 0.7;
            cursor: not-allowed;
        }

        #checkButton {
            display: block;
            margin: 0 auto;
            margin-top: 16px;
            width: 100%;
            max-width: 200px;
        }

        #result {
            margin-top: 24px;
            font-size: 1.1rem;
            font-weight: 500;
            line-height: 1.6;
            color: var(--text-light);
            background-color: rgba(240, 240, 240, 0.8);
            padding: 12px;
            border-radius: 12px;
            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
            opacity: 0;
            transform: translateY(20px);
        }

        body.dark-theme #result {
            background-color: rgba(58, 58, 60, 0.8);
            color: var(--text-dark);
        }

        #result.show {
            opacity: 1;
            transform: translateY(0);
        }

        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--accent-color);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
            display: none;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .sidebar {
            position: fixed;
            top: 0;
            right: -300px;
            width: var(--sidebar-width);
            height: 100%;
            background: var(--container-bg-light);
            backdrop-filter: blur(10px);
            border-left: 1px solid rgba(255, 255, 255, 0.3);
            transition: right var(--transition-speed) ease;
            z-index: 1000;
            padding: 20px;
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            gap: 20px;
            overflow-y: auto;
        }

        body.dark-theme .sidebar {
            background: var(--container-bg-dark);
            border-left: 1px solid rgba(44, 44, 46, 0.3);
        }

        .sidebar.open {
            right: 0;
        }

        .sidebar-toggle {
            position: fixed;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            background: var(--button-bg);
            color: #fff;
            border: none;
            border-radius: 12px 0 0 12px;
            padding: 12px;
            cursor: pointer;
            transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
            z-index: 1001;
        }

        .sidebar-toggle:hover {
            background: var(--button-hover);
            transform: translateY(-50%) translateX(-5px);
        }

        .sidebar-toggle i {
            font-size: 1.2rem;
        }

        .sidebar h2 {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-light);
        }

        body.dark-theme .sidebar h2 {
            color: var(--text-dark);
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .sidebar li {
            margin-bottom: 8px;
            font-size: 0.9rem;
            padding: 8px;
            background-color: rgba(240, 240, 240, 0.8);
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        body.dark-theme .sidebar li {
            background-color: rgba(58, 58, 60, 0.8);
            color: var(--text-dark);
        }

        .sidebar .tag {
            font-size: 0.8rem;
            background-color: var(--accent-color);
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            margin-left: 8px;
            cursor: pointer;
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar .tag:hover {
            background-color: var(--accent-hover);
        }

        .sidebar .search-container {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
        }

        .sidebar .search-container input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 0.9rem;
            transition: border-color var(--transition-speed) ease;
        }

        .sidebar .search-container input:focus {
            outline: none;
            border-color: var(--accent-color);
        }

        .sidebar .filter-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .sidebar .filter-buttons button {
            padding: 8px;
            background-color: var(--accent-color);
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color var(--transition-speed) ease;
        }

        .sidebar .filter-buttons button:hover {
            background-color: var(--accent-hover);
        }

        .sidebar .stats {
            margin-top: 24px;
            padding: 12px;
            background-color: rgba(240, 240, 240, 0.8);
            border-radius: 12px;
        }

        body.dark-theme .stats {
            background-color: rgba(58, 58, 60, 0.8);
        }

        .stats h3 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-light);
        }

        body.dark-theme .stats h3 {
            color: var(--text-dark);
        }

        .stats p {
            font-size: 0.9rem;
            color: var(--text-light);
            margin: 0;
        }

        body.dark-theme .stats p {
            color: var(--text-dark);
        }

        /* Адаптация для мобильных устройств */
        @media (max-width: 768px) {
            .container {
                padding: 24px;
            }

            h1 {
                font-size: 1.8rem;
            }

            .drop-zone {
                height: 150px;
            }

            button {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 414px) {
            .container {
                padding: 16px;
                border-radius: 12px;
            }

            h1 {
                font-size: 1.5rem;
            }

            .drop-zone {
                height: 120px;
                font-size: 0.8rem;
            }

            button {
                padding: 8px 16px;
                font-size: 0.9rem;
            }

            #result {
                font-size: 0.9rem;
            }
        }

        /* Модальное окно для тегов */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px); /* Размытие фона */
            z-index: 1003;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity var(--transition-speed) ease;
        }

        .modal.show {
            display: flex;
            opacity: 1;
        }

        .modal-content {
            background: var(--container-bg-light);
            padding: 20px;
            border-radius: 12px;
            box-shadow: var(--shadow-light);
            max-width: 400px;
            width: 100%;
            text-align: center;
            position: relative;
            backdrop-filter: blur(10px); /* Размытие фона */
            border: 1px solid var(--glass-border); /* Полупрозрачная граница */
            transform: scale(0.9);
            opacity: 0;
            transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
        }

        .modal.show .modal-content {
            transform: scale(1);
            opacity: 1;
        }

        body.dark-theme .modal-content {
            background: var(--container-bg-dark);
            box-shadow: var(--shadow-dark);
            border: 1px solid rgba(255, 255, 255, 0.2); /* Граница для темной темы */
        }

        .modal-content h2 {
            margin-bottom: 16px;
            font-size: 1.5rem;
            color: var(--text-light);
        }

        body.dark-theme .modal-content h2 {
            color: var(--text-dark);
        }

        .modal-content input {
            width: 100%;
            padding: 12px;
            margin-bottom: 12px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон */
            color: var(--text-light);
            transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
        }

        body.dark-theme .modal-content input {
            background: rgba(44, 44, 46, 0.1); /* Полупрозрачный фон для темной темы */
            color: var(--text-dark);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .modal-content input:focus {
            outline: none;
            border-color: var(--accent-color);
            background-color: rgba(255, 255, 255, 0.2); /* Подсветка при фокусе */
        }

        body.dark-theme .modal-content input:focus {
            background-color: rgba(44, 44, 46, 0.2); /* Подсветка при фокусе для темной темы */
        }

        .modal-content button {
            width: 100%;
            padding: 12px;
            font-size: 1rem;
            background: var(--button-bg);
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        .modal-content button:hover {
            background: var(--button-hover);
            transform: translateY(-2px);
        }

        .modal-content button:active {
            transform: translateY(0);
        }

        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 1.5rem;
            color: var(--text-light);
            cursor: pointer;
            transition: color var(--transition-speed) ease;
        }

        body.dark-theme .close {
            color: var(--text-dark);
        }

        .close:hover {
            color: var(--accent-color);
        }

        /* Кнопка смены языка */
        .language-button {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: var(--button-bg);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
            margin-left: 8px;
        }

        .language-button:hover {
            background: var(--button-hover);
            transform: translateY(-2px);
        }

        /* Адаптация для больших экранов */
        @media (min-width: 1200px) {
            .container {
                max-width: 800px;
            }

            .sidebar {
                width: 400px;
            }
        }

        /* Контекстное меню для тегов */
        .context-menu {
            position: absolute;
            background: var(--container-bg-light);
            border-radius: 8px;
            box-shadow: var(--shadow-light);
            z-index: 1004;
            display: none;
            flex-direction: column;
            gap: 8px;
            padding: 8px;
            opacity: 0;
            transform: scale(0.9);
            transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
        }

        .context-menu.show {
            display: flex;
            opacity: 1;
            transform: scale(1);
        }

        body.dark-theme .context-menu {
            background: var(--container-bg-dark);
            box-shadow: var(--shadow-dark);
        }

        .context-menu button {
            background: var(--button-bg);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 8px;
            cursor: pointer;
            transition: background var(--transition-speed) ease;
        }

        .context-menu button:hover {
            background: var(--button-hover);
        }

        /* Модальное окно для подтверждения сброса */
        .confirm-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            z-index: 1005;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity var(--transition-speed) ease;
        }

        .confirm-modal.show {
            display: flex;
            opacity: 1;
        }

        .confirm-modal-content {
            background: var(--container-bg-light);
            padding: 20px;
            border-radius: 12px;
            box-shadow: var(--shadow-light);
            max-width: 400px;
            width: 100%;
            text-align: center;
            position: relative;
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            transform: scale(0.9);
            opacity: 0;
            transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
        }

        .confirm-modal.show .confirm-modal-content {
            transform: scale(1);
            opacity: 1;
        }

        body.dark-theme .confirm-modal-content {
            background: var(--container-bg-dark);
            box-shadow: var(--shadow-dark);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .confirm-modal-content h2 {
            margin-bottom: 16px;
            font-size: 1.5rem;
            color: var(--text-light);
        }

        body.dark-theme .confirm-modal-content h2 {
            color: var(--text-dark);
        }

        .confirm-modal-content button {
            width: 100%;
            padding: 12px;
            font-size: 1rem;
            background: var(--button-bg);
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
            margin-top: 8px;
        }

        .confirm-modal-content button:hover {
            background: var(--button-hover);
            transform: translateY(-2px);
        }

        .confirm-modal-content button:active {
            transform: translateY(0);
        }

        .confirm-modal-content button.red {
            background: var(--error-color);
        }

        .confirm-modal-content button.red:hover {
            background: #d32f2f;
        }

        /* Недавние теги в строку */
        .recent-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }

        .recent-tags button {
            background: var(--button-bg);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 8px;
            cursor: pointer;
            transition: background var(--transition-speed) ease;
        }

        .recent-tags button:hover {
            background: var(--button-hover);
        }

        /* Уведомления */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 24px;
            border-radius: 8px;
            color: #fff;
            font-size: 0.9rem;
            font-weight: 500;
            z-index: 1006; /* Выше модальных окон */
            opacity: 0;
            transform: translateX(100%);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .notification.show {
            opacity: 1;
            transform: translateX(0);
        }

        .notification.success {
            background-color: var(--success-color);
        }

        .notification.error {
            background-color: var(--error-color);
        }

        .notification.info {
            background-color: var(--accent-color);
        }

        /* Переключатель темы в стиле iOS 18 */
        .theme-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .theme-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: background-color 0.3s ease;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: transform 0.3s ease;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: var(--accent-color);
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        /* Анимации */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes slideOut {
            from { transform: translateY(0); opacity: 1; }
            to { transform: translateY(-20px); opacity: 0; }
        }

        .fade-in {
            animation: fadeIn 0.3s ease;
        }

        .fade-out {
            animation: fadeOut 0.3s ease;
        }

        .slide-in {
            animation: slideIn 0.3s ease;
        }

        .slide-out {
            animation: slideOut 0.3s ease;
        }
    </style>
</head>
<body>
    <button class="sidebar-toggle" onclick="toggleSidebar()">
        <i class="fas fa-chevron-left"></i>
    </button>
    <div class="container" id="container">
        <h1 id="title">LEGIT CHECKER</h1>
        <div class="drop-zone" id="dropZone">
            <span id="dropText">Перетащите изображение сюда</span>
        </div>
        <input type="file" id="photoInput" accept="image/*, video/*">
        <div class="loader" id="loader"></div>
        <div class="image-wrapper" id="imageWrapper">
            <img id="preview" src="" alt="Preview">
            <video id="videoPreview" controls style="display: none;"></video>
            <button class="remove-image" onclick="removeImage()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="recent-tags">
            <h3>Последние теги</h3>
            <div id="recentTagsContainer"></div>
        </div>
        <button id="addTagButton" onclick="openTagModal()">Добавить тег 🏷️</button>
        <button id="checkButton" onclick="checkLegality()" disabled>Проверить</button>
        <div id="result"></div>
    </div>
    <div class="sidebar" id="sidebar">
        <h2 id="historyTitle">История</h2>
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="Поиск по тегам...">
            <button onclick="searchHistory()"><i class="fas fa-search"></i></button>
        </div>
        <div class="filter-buttons">
            <button onclick="filterHistory('TRUE')" title="Показать TRUE">✅</button>
            <button onclick="filterHistory('FALSE')" title="Показать FALSE">❌</button>
            <button onclick="clearHistory()" title="Очистить историю">🧹</button>
            <button onclick="exportHistory()" title="Экспорт истории">📄</button>
            <button onclick="openConfirmModal()" title="Сбросить всё" style="background: var(--error-color);">🗑️</button>
        </div>
        <ul id="historyList"></ul>
        <div class="stats">
            <h3>Статистика</h3>
            <p>Всего проверок: <span id="totalChecks">0</span></p>
            <p>TRUE: <span id="trueChecks">0</span></p>
            <p>FALSE: <span id="falseChecks">0</span></p>
        </div>
        <div class="settings">
            <h2 id="settingsTitle">Настройки</h2>
            <label class="theme-switch">
                <input type="checkbox" id="themeToggle" onchange="toggleTheme()">
                <span class="slider"></span>
            </label>
            <span id="darkThemeLabel">Темная тема</span>
            <div class="language-select">
                <select id="languageSelect" onchange="changeLanguage()">
                    <option value="ru">Русский 🇷🇺</option>
                    <option value="en">English 🇺🇸</option>
                    <option value="es">Español 🇪🇸</option>
                    <option value="fr">Français 🇫🇷</option>
                </select>
            </div>
            <button onclick="clearCache()" style="margin-top: 16px;">Очистить кэш</button>
        </div>
    </div>

    <!-- Модальное окно для добавления тега -->
    <div id="tagModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeTagModal()">&times;</span>
            <h2>Добавить тег</h2>
            <input type="text" id="tagInput1" placeholder="Введите тег 1" maxlength="15">
            <input type="text" id="tagInput2" placeholder="Введите тег 2" maxlength="15">
            <input type="text" id="tagInput3" placeholder="Введите тег 3" maxlength="15">
            <button onclick="addTag()">Добавить</button>
        </div>
    </div>

    <!-- Модальное окно для выбора действия с тегом -->
    <div id="actionModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeActionModal()">&times;</span>
            <h2>Выберите действие</h2>
            <button onclick="openEditModal()">Изменить</button>
            <button onclick="openDeleteModal()">Удалить</button>
        </div>
    </div>

    <!-- Модальное окно для изменения тега -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeEditModal()">&times;</span>
            <h2>Изменить тег</h2>
            <input type="text" id="editTagInput" placeholder="Введите новый тег" maxlength="15">
            <button onclick="saveEditedTag()">Сохранить</button>
        </div>
    </div>

    <!-- Модальное окно для подтверждения удаления тега -->
    <div id="deleteModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeDeleteModal()">&times;</span>
            <h2>Вы точно хотите удалить тег?</h2>
            <button onclick="confirmDeleteTag()" class="red">Да</button>
            <button onclick="closeDeleteModal()">Нет</button>
        </div>
    </div>

    <!-- Контекстное меню для тегов -->
    <div id="contextMenu" class="context-menu">
        <button onclick="deleteTag()">Удалить</button>
        <button onclick="editTag()">Изменить</button>
        <button onclick="closeContextMenu()">✕</button>
    </div>

    <!-- Модальное окно для подтверждения сброса -->
    <div id="confirmModal" class="confirm-modal">
        <div class="confirm-modal-content">
            <h2>Вы точно хотите сбросить весь прогресс?</h2>
            <button onclick="resetAll()" class="red">Да</button>
            <button onclick="closeConfirmModal()">Нет</button>
        </div>
    </div>

    <script>
        // Локализация
        const translations = {
            ru: {
                title: "LEGIT CHECKER",
                dropText: "Перетащите изображение сюда",
                checkButton: "Проверить",
                darkTheme: "Темная тема",
                language: "Язык",
                historyTitle: "История",
                settingsTitle: "Настройки",
                searchPlaceholder: "Поиск по тегам...",
                clearHistory: "Очистить",
                exportHistory: "Экспорт 📄",
                resetAll: "Сбросить 🗑️",
                addTag: "Добавить тег 🏷️"
            },
            en: {
                title: "LEGIT CHECKER",
                dropText: "Drag and drop image here",
                checkButton: "Check",
                darkTheme: "Dark theme",
                language: "Language",
                historyTitle: "History",
                settingsTitle: "Settings",
                searchPlaceholder: "Search by tags...",
                clearHistory: "Clear",
                exportHistory: "Export 📄",
                resetAll: "Reset 🗑️",
                addTag: "Add tag 🏷️"
            },
            es: {
                title: "LEGIT CHECKER",
                dropText: "Arrastra y suelta la imagen aquí",
                checkButton: "Verificar",
                darkTheme: "Tema oscuro",
                language: "Idioma",
                historyTitle: "Historial",
                settingsTitle: "Configuración",
                searchPlaceholder: "Buscar por etiquetas...",
                clearHistory: "Limpiar",
                exportHistory: "Exportar 📄",
                resetAll: "Reiniciar 🗑️",
                addTag: "Añadir etiqueta 🏷️"
            },
            fr: {
                title: "LEGIT CHECKER",
                dropText: "Glissez et déposez l'image ici",
                checkButton: "Vérifier",
                darkTheme: "Thème sombre",
                language: "Langue",
                historyTitle: "Historique",
                settingsTitle: "Paramètres",
                searchPlaceholder: "Rechercher par tags...",
                clearHistory: "Effacer",
                exportHistory: "Exporter 📄",
                resetAll: "Réinitialiser 🗑️",
                addTag: "Ajouter une étiquette 🏷️"
            },
        };

        let currentLanguage = "ru";

        // Переключение темы
        function toggleTheme() {
            document.body.classList.toggle('dark-theme');
            localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light');
            showNotification(document.body.classList.contains('dark-theme') ? 'Темная тема включена' : 'Темная тема выключена', 'info');
        }

        // Авто-тема
        function setAutoTheme() {
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (prefersDark) {
                document.body.classList.add('dark-theme');
                document.getElementById('themeToggle').checked = true;
            } else {
                document.body.classList.remove('dark-theme');
                document.getElementById('themeToggle').checked = false;
            }
        }

        // Эффект наклона контейнера
        const container = document.getElementById('container');
        document.addEventListener('mousemove', (e) => {
            const x = (e.clientX / window.innerWidth - 0.5) * 20;
            const y = (e.clientY / window.innerHeight - 0.5) * 20;
            container.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
        });

        // История результатов
        let history = JSON.parse(localStorage.getItem('history')) || [];
        let currentTags = [];

        // Сохранение истории в localStorage
        function saveHistory() {
            localStorage.setItem('history', JSON.stringify(history));
        }

        // Добавление результата в историю
        function addToHistory(result) {
            const historyItem = { result, tags: [...currentTags], timestamp: new Date() };
            history.push(historyItem);

            if (history.length > 5) {
                history.shift(); // Удаляем самый старый результат
            }

            currentTags = []; // Сбрасываем теги
            saveHistory();
            updateHistory();
            showNotification('Результат добавлен в историю', 'success');
        }

        // Обновление отображения истории
        function updateHistory() {
            const historyList = document.getElementById('historyList');
            historyList.innerHTML = '';

            history.slice(-5).forEach((item, index) => {
                const li = document.createElement('li');
                li.textContent = item.result;

                if (item.tags.length > 0) {
                    const tagContainer = document.createElement('div');
                    item.tags.slice(0, 3).forEach(tag => { // Показываем только 3 тега
                        const tagElement = document.createElement('span');
                        tagElement.className = 'tag';
                        tagElement.textContent = tag;
                        tagElement.onclick = () => handleTagClick(index, tag);
                        tagContainer.appendChild(tagElement);
                    });
                    if (item.tags.length > 3) { // Показываем количество скрытых тегов
                        const moreTags = document.createElement('span');
                        moreTags.className = 'tag more-tags';
                        moreTags.textContent = `+${item.tags.length - 3}`;
                        moreTags.onclick = () => showAllTags(index, item.tags);
                        tagContainer.appendChild(moreTags);
                    }
                    li.appendChild(tagContainer);
                }

                historyList.appendChild(li);
            });
        }

        // Фильтрация истории
        function filterHistory(type) {
            const filteredHistory = history.filter(item => item.result.includes(type));
            updateFilteredHistory(filteredHistory);
            showNotification(`Отфильтровано по: ${type}`, 'info');
        }

        // Поиск по тегам
        function searchHistory() {
            const searchQuery = document.getElementById('searchInput').value.toLowerCase();
            const filteredHistory = history.filter(item => item.tags.some(tag => tag.toLowerCase().includes(searchQuery)));
            updateFilteredHistory(filteredHistory);
            showNotification(`Результаты поиска по тегу: ${searchQuery}`, 'info');
        }

        // Очистка истории
        function clearHistory() {
            history = [];
            saveHistory();
            updateHistory();
            showNotification('История очищена', 'info');
        }

        // Экспорт истории
        function exportHistory() {
            const csvContent = "data:text/csv;charset=utf-8," + history.map(item => `${item.result},${item.tags.join(',')}`).join("\n");
            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "history.csv");
            document.body.appendChild(link);
            link.click();
            showNotification('История экспортирована', 'success');
        }

        // Полный сброс
        function resetAll() {
            history = [];
            totalChecks = 0;
            trueChecks = 0;
            falseChecks = 0;
            saveHistory();
            updateHistory();
            updateStatistics();
            showNotification('Все данные сброшены', 'info');
            closeConfirmModal();
        }

        // Обновление отфильтрованной истории
        function updateFilteredHistory(filteredHistory) {
            const historyList = document.getElementById('historyList');
            historyList.innerHTML = '';

            filteredHistory.forEach((item) => {
                const li = document.createElement('li');
                li.textContent = item.result;

                if (item.tags.length > 0) {
                    const tagContainer = document.createElement('div');
                    item.tags.forEach(tag => {
                        const tagElement = document.createElement('span');
                        tagElement.className = 'tag';
                        tagElement.textContent = tag;
                        tagContainer.appendChild(tagElement);
                    });
                    li.appendChild(tagContainer);
                }

                historyList.appendChild(li);
            });
        }

        // Проверка законности изображения
        let resultTimeout;

        function checkLegality() {
            const resultDiv = document.getElementById('result');
            const isLegit = Math.random() < 0.5;
            const resultText = isLegit ? 'TRUE ✅' : 'FALSE ❌';

            resultDiv.textContent = resultText;
            resultDiv.style.color = isLegit ? 'green' : 'red';
            resultDiv.classList.add('show', 'result-transition');

            addToHistory(resultText);
            updateStatistics(isLegit);

            clearTimeout(resultTimeout);
            resultTimeout = setTimeout(() => {
                resultDiv.textContent = '';
                resultDiv.classList.remove('show');
            }, 15000);
        }

        // Обновление статистики
        let totalChecks = 0;
        let trueChecks = 0;
        let falseChecks = 0;

        function updateStatistics(isLegit) {
            totalChecks++;
            if (isLegit) {
                trueChecks++;
            } else {
                falseChecks++;
            }
            document.getElementById('totalChecks').textContent = totalChecks;
            document.getElementById('trueChecks').textContent = trueChecks;
            document.getElementById('falseChecks').textContent = falseChecks;
        }

        // Удаление изображения
        function removeImage() {
            const imageWrapper = document.getElementById('imageWrapper');
            const preview = document.getElementById('preview');
            const videoPreview = document.getElementById('videoPreview');
            const checkButton = document.getElementById('checkButton');
            const resultDiv = document.getElementById('result');

            preview.src = '';
            videoPreview.src = '';
            videoPreview.style.display = 'none';
            imageWrapper.classList.remove('show');
            checkButton.disabled = true;

            resultDiv.textContent = '';
            resultDiv.classList.remove('show');

            clearTimeout(resultTimeout);
            document.getElementById('dropZone').style.display = 'flex';
            showNotification('Изображение удалено', 'info');
        }

        // Обработка загрузки файла через input
        const photoInput = document.getElementById('photoInput');
        const checkButton = document.getElementById('checkButton');
        const imageWrapper = document.getElementById('imageWrapper');
        const loader = document.getElementById('loader');
        const preview = document.getElementById('preview');
        const videoPreview = document.getElementById('videoPreview');

        photoInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            handleFile(file);
        });

        // Обработка перетаскивания файла
        const dropZone = document.getElementById('dropZone');
        dropZone.addEventListener('dragover', function(event) {
            event.preventDefault();
            dropZone.classList.add('dragover');
        });

        dropZone.addEventListener('dragleave', function(event) {
            event.preventDefault();
            dropZone.classList.remove('dragover');
        });

        dropZone.addEventListener('drop', function(event) {
            event.preventDefault();
            dropZone.classList.remove('dragover');
            const files = event.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        // Обработка клика на drop-zone
        dropZone.addEventListener('click', function() {
            photoInput.click();
        });

        // Обработка вставки изображения через Ctrl + V
        document.addEventListener('paste', function(event) {
            const items = (event.clipboardData || event.originalEvent.clipboardData).items;
            for (const item of items) {
                if (item.type.indexOf('image') !== -1 || item.type.indexOf('video') !== -1) {
                    const blob = item.getAsFile();
                    handleFile(blob);
                    break;
                }
            }
        });

        // Функция для обработки файла
        let lastFileHash = null;

        function handleFile(file) {
            const reader = new FileReader();
            loader.style.display = 'block';

            reader.onload = function(e) {
                const fileHash = hashFile(e.target.result);
                if (fileHash === lastFileHash) {
                    showNotification('Эта картинка уже была загружена', 'error');
                    loader.style.display = 'none';
                    return;
                }
                lastFileHash = fileHash;

                if (file.type.startsWith('image')) {
                    preview.src = e.target.result;
                    videoPreview.style.display = 'none';
                } else if (file.type.startsWith('video')) {
                    videoPreview.src = e.target.result;
                    videoPreview.style.display = 'block';
                    preview.src = '';
                }
                imageWrapper.classList.add('show');
                checkButton.disabled = false;
                loader.style.display = 'none';
                document.getElementById('dropZone').style.display = 'none';
                showNotification('Файл успешно загружен', 'success');
            };

            if (file) {
                reader.readAsDataURL(file);
            }
        }

        // Хэширование файла для проверки на дубликаты
        function hashFile(fileData) {
            let hash = 0;
            for (let i = 0; i < fileData.length; i++) {
                const char = fileData.charCodeAt(i);
                hash = (hash << 5) - hash + char;
                hash |= 0; // Преобразуем в 32-битное целое число
            }
            return hash;
        }

        // Уведомления
        function showNotification(message, type = 'success') {
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.textContent = message;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.classList.add('show');
            }, 10);

            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            }, 3000);
        }

        // Инициализация темы
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
            document.body.classList.add('dark-theme');
            document.getElementById('themeToggle').checked = true;
        } else {
            setAutoTheme();
        }

        // Открытие/закрытие бокового меню
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('open');
        }

        // Смена языка
        function changeLanguage() {
            const languageSelect = document.getElementById('languageSelect');
            currentLanguage = languageSelect.value;
            updateTranslations();
            showNotification(`Язык изменен на: ${currentLanguage}`, 'info');
        }

        // Обновление текста на выбранном языке
        function updateTranslations() {
            document.getElementById('title').textContent = translations[currentLanguage].title;
            document.getElementById('dropText').textContent = translations[currentLanguage].dropText;
            document.getElementById('checkButton').textContent = translations[currentLanguage].checkButton;
            document.getElementById('historyTitle').textContent = translations[currentLanguage].historyTitle;
            document.getElementById('settingsTitle').textContent = translations[currentLanguage].settingsTitle;
            document.getElementById('searchInput').placeholder = translations[currentLanguage].searchPlaceholder;
            document.getElementById('darkThemeLabel').textContent = translations[currentLanguage].darkTheme;
            document.getElementById('addTagButton').textContent = translations[currentLanguage].addTag;
        }

        // Модальное окно для добавления тега
        function openTagModal() {
            document.getElementById('tagModal').classList.add('show');
            document.getElementById('container').style.pointerEvents = 'none'; // Деактивируем контейнер
        }

        function closeTagModal() {
            document.getElementById('tagModal').classList.remove('show');
            document.getElementById('container').style.pointerEvents = 'auto'; // Активируем контейнер
        }

        // Добавление тега
        function addTag() {
            const tagInput1 = document.getElementById('tagInput1');
            const tagInput2 = document.getElementById('tagInput2');
            const tagInput3 = document.getElementById('tagInput3');
            const tags = [tagInput1.value.trim(), tagInput2.value.trim(), tagInput3.value.trim()].filter(tag => tag);

            if (tags.length > 0) {
                tags.forEach(tag => {
                    if (!recentTags.includes(tag)) {
                        recentTags.push(tag);
                        if (recentTags.length > 5) recentTags.shift();
                    }
                });
                currentTags = [...currentTags, ...tags].slice(0, 3); // Ограничиваем до 3 тегов
                localStorage.setItem('recentTags', JSON.stringify(recentTags));
                updateRecentTags();
                showNotification(`Теги добавлены: ${tags.join(', ')}`, 'info');
                tagInput1.value = '';
                tagInput2.value = '';
                tagInput3.value = '';
                closeTagModal();
            } else {
                showNotification('Введите хотя бы один тег', 'error');
            }
        }

        // Массив для хранения последних 5 тегов
        let recentTags = JSON.parse(localStorage.getItem('recentTags')) || [];

        // Функция для обновления кнопок последних тегов
        function updateRecentTags() {
            const recentTagsContainer = document.getElementById('recentTagsContainer');
            recentTagsContainer.innerHTML = '';

            recentTags.slice(-5).forEach(tag => {
                const tagButton = document.createElement('button');
                tagButton.textContent = tag;
                tagButton.onclick = () => addTagFromRecent(tag);
                recentTagsContainer.appendChild(tagButton);
            });
        }

        // Функция для добавления тега из последних
        function addTagFromRecent(tag) {
            if (currentTags.length >= 3) {
                showNotification('Можно добавить только 3 тега', 'error');
                return;
            }
            currentTags.push(tag);
            showNotification(`Тег "${tag}" добавлен`, 'info');
            updateRecentTags();
        }

        // Функция для обработки клика по тегу в сайдбаре
        function handleTagClick(index, tag) {
            const modal = document.getElementById('actionModal');
            modal.classList.add('show');
            document.getElementById('container').style.pointerEvents = 'none'; // Деактивируем контейнер

            // Установка текущего тега в поле ввода
            document.getElementById('editTagInput').value = tag;

            // Обработка изменения тега
            window.saveEditedTag = function() {
                const newTag = document.getElementById('editTagInput').value.trim();
                if (newTag) {
                    history[index].tags = history[index].tags.map(t => t === tag ? newTag : t);
                    saveHistory();
                    updateHistory();
                    showNotification(`Тег "${tag}" изменен на "${newTag}"`, 'info');
                    closeEditModal();
                } else {
                    showNotification('Введите новый тег', 'error');
                }
            };

            // Обработка удаления тега
            window.confirmDeleteTag = function() {
                history[index].tags = history[index].tags.filter(t => t !== tag);
                saveHistory();
                updateHistory();
                showNotification(`Тег "${tag}" удален`, 'info');
                closeDeleteModal();
            };
        }

        // Функция для отображения всех тегов
        function showAllTags(index, tags) {
            alert(`Все теги для этого результата:\n${tags.join(', ')}`);
        }

        // Инициализация последних тегов при загрузке страницы
        window.onload = function() {
            updateRecentTags();
        };

        // Открытие модального окна для подтверждения сброса
        function openConfirmModal() {
            document.getElementById('confirmModal').classList.add('show');
        }

        // Закрытие модального окна для подтверждения сброса
        function closeConfirmModal() {
            document.getElementById('confirmModal').classList.remove('show');
        }

        // Очистка кэша
        function clearCache() {
            localStorage.removeItem('recentTags');
            localStorage.removeItem('history');
            showNotification('Кэш очищен', 'info');
        }
    </script>
</body>
</html>
перепиши код не убавив в функционале и все должно находиться в 1-ом html файле