Форум - Флуд - Общение - Поговорим о...

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Авто-корректор HTML страниц</title>
<style>
* {
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}

.container {
display: flex;
flex-direction: column;
gap: 30px;
}

.header {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.main-title {
margin: 0;
font-size: 28px;
}

.subtitle {
margin-top: 10px;
opacity: 0.9;
font-weight: 300;
}

.section {
background-color: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.section-title {
margin-top: 0;
color: #2c3e50;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}

.step {
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid #eee;
}

.step:last-child {
margin-bottom: 0;
border-bottom: none;
}

.step-number {
display: inline-block;
background-color: #3498db;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin-right: 10px;
font-weight: bold;
}

.step-title {
display: inline-block;
font-weight: 600;
color: #2c3e50;
}

.file-input-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
}

.file-input-wrapper {
flex: 1;
min-width: 300px;
}

.file-input {
width: 100%;
padding: 12px;
border: 2px dashed #ddd;
border-radius: 8px;
background-color: #f9f9f9;
cursor: pointer;
transition: all 0.3s;
}

.file-input:hover {
border-color: #3498db;
background-color: #f0f8ff;
}

.selector-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-family: monospace;
font-size: 14px;
margin-top: 10px;
}

.selector-input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.btn {
padding: 12px 25px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 16px;
transition: all 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.btn-primary {
background-color: #3498db;
color: white;
}

.btn-primary:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.btn-success {
background-color: #2ecc71;
color: white;
}

.btn-success:hover {
background-color: #27ae60;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
}

.btn-danger {
background-color: #e74c3c;
color: white;
}

.btn-danger:hover {
background-color: #c0392b;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}

.btn-group {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}

.results-container {
margin-top: 20px;
}

.results-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.results-table th {
background-color: #f8f9fa;
padding: 12px 15px;
text-align: left;
border-bottom: 2px solid #dee2e6;
font-weight: 600;
}

.results-table td {
padding: 12px 15px;
border-bottom: 1px solid #dee2e6;
}

.results-table tr:hover {
background-color: #f8f9fa;
}

.status-success {
color: #27ae60;
font-weight: 600;
}

.status-error {
color: #e74c3c;
font-weight: 600;
}

.status-pending {
color: #f39c12;
font-weight: 600;
}

.preview-container {
background-color: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 8px;
margin-top: 15px;
max-height: 300px;
overflow-y: auto;
font-family: monospace;
font-size: 13px;
white-space: pre-wrap;
}

.hidden {
display: none;
}

.tag {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
margin-right: 5px;
margin-bottom: 5px;
}

.tag-html {
background-color: #e34c26;
color: white;
}

.tag-css {
background-color: #264de4;
color: white;
}

.tag-js {
background-color: #f0db4f;
color: black;
}

.instructions {
background-color: #fff8e1;
border-left: 4px solid #ffc107;
padding: 15px;
margin-top: 15px;
border-radius: 0 8px 8px 0;
}

.instructions h4 {
margin-top: 0;
color: #ff9800;
}

.instructions ul {
margin-bottom: 0;
}

.instructions li {
margin-bottom: 5px;
}

.footer {
text-align: center;
margin-top: 30px;
color: #7f8c8d;
font-size: 14px;
}

@media (max-width: 768px) {
.file-input-wrapper {
min-width: 100%;
}

.btn-group {
flex-direction: column;
}

.btn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1 class="main-title">Авто-корректор HTML страниц</h1>
<p class="subtitle">Удаление указанных элементов из статических HTML-страниц</p>
<div>
<span class="tag tag-html">HTML</span>
<span class="tag tag-css">CSS</span>
<span class="tag tag-js">JavaScript</span>
</div>
</header>

<section class="section">
<h2 class="section-title">Как работает программа</h2>
<p>Эта программа позволяет автоматически удалять определенные элементы (ссылки, блоки, меню) со всех HTML-страниц вашего сайта. Вы загружаете образец страницу, указываете элементы для удаления, затем загружаете все остальные страницы для обработки.</p>

<div class="instructions">
<h4>Инструкция:</h4>
<ul>
<li><strong>Шаг 1:</strong> Загрузите образец HTML-страницу, в которой укажете элементы для удаления</li>
<li><strong>Шаг 2:</strong> Укажите CSS-селекторы элементов, которые нужно удалить</li>
<li><strong>Шаг 3:</strong> Загрузите все HTML-страницы для обработки (можно выбрать несколько файлов)</li>
<li><strong>Шаг 4:</strong> Запустите обработку и скачайте исправленные файлы</li>
</ul>
</div>
</section>

<section class="section">
<h2 class="section-title">Процесс обработки</h2>

<div class="step">
<div class="step-number">1</div>
<div class="step-title">Загрузите образец страницу</div>
<p>Выберите HTML-файл, в котором вы укажете элементы для удаления на всех страницах.</p>
<div class="file-input-wrapper">
<input type="file" id="templateFile" class="file-input" accept=".html">
</div>
<div id="templatePreview" class="preview-container hidden">

</div>
</div>

<div class="step">
<div class="step-number">2</div>
<div class="step-title">Укажите элементы для удаления</div>
<p>Введите CSS-селекторы элементов, которые нужно удалить со всех страниц. Каждый селектор на новой строке.</p>
<textarea id="selectors" class="selector-input" rows="4" placeholder="Примеры селекторов:
.menu-item-about /* Удалить элемент с классом menu-item-about */
#sidebar /* Удалить элемент с id sidebar */
nav > ul > li:last-child /* Удалить последний элемент списка в навигации */
a[href*='contact'] /* Удалить все ссылки, содержащие 'contact' в адресе */
.footer .links /* Удалить элемент с классом links внутри footer */"></textarea>

<div class="btn-group">
<button id="testSelectorsBtn" class="btn btn-primary">
<span>📋</span> Протестировать на образце
</button>
<button id="clearSelectorsBtn" class="btn btn-danger">
<span>🗑️</span> Очистить селекторы
</button>
</div>

<div id="testResults" class="results-container hidden">

</div>
</div>

<div class="step">
<div class="step-number">3</div>
<div class="step-title">Загрузите страницы для обработки</div>
<p>Выберите все HTML-файлы, которые нужно обработать (можно выбрать несколько файлов).</p>
<div class="file-input-wrapper">
<input type="file" id="htmlFiles" class="file-input" accept=".html" multiple>
</div>
<div id="fileList" class="preview-container hidden">

</div>
</div>

<div class="step">
<div class="step-number">4</div>
<div class="step-title">Запустите обработку</div>
<p>После загрузки файлов запустите процесс удаления указанных элементов.</p>
<div class="btn-group">
<button id="processBtn" class="btn btn-success">
<span>⚙️</span> Запустить обработку файлов
</button>
<button id="resetBtn" class="btn btn-danger">
<span>🔄</span> Сбросить все
</button>
</div>
</div>
</section>

<section id="resultsSection" class="section hidden">
<h2 class="section-title">Результаты обработки</h2>
<div id="resultsTableContainer">

</div>

<div class="btn-group">
<button id="downloadAllBtn" class="btn btn-primary hidden">
<span>📥</span> Скачать все обработанные файлы
</button>
</div>
</section>

<footer class="footer">
<p>Программа работает полностью в вашем браузере. Никакие данные не отправляются на сервер.</p>
<p>© 2023 Авто-корректор HTML страниц</p>
</footer>
</div>

<script>
// DOM Elements
const templateFileInput = document.getElementById('templateFile');
const htmlFilesInput = document.getElementById('htmlFiles');
const selectorsTextarea = document.getElementById('selectors');
const testSelectorsBtn = document.getElementById('testSelectorsBtn');
const clearSelectorsBtn = document.getElementById('clearSelectorsBtn');
const processBtn = document.getElementById('processBtn');
const resetBtn = document.getElementById('resetBtn');
const downloadAllBtn = document.getElementById('downloadAllBtn');
const templatePreview = document.getElementById('templatePreview');
const fileList = document.getElementById('fileList');
const testResults = document.getElementById('testResults');
const resultsSection = document.getElementById('resultsSection');
const resultsTableContainer = document.getElementById('resultsTableContainer');

// State
let templateContent = '';
let filesToProcess = [];
let processedFiles = [];

// Event Listeners
templateFileInput.addEventListener('change', handleTemplateFile);
htmlFilesInput.addEventListener('change', handleHtmlFiles);
testSelectorsBtn.addEventListener('click', testSelectors);
clearSelectorsBtn.addEventListener('click', () => {
selectorsTextarea.value = '';
});
processBtn.addEventListener('click', processFiles);
resetBtn.addEventListener('click', resetApp);
downloadAllBtn.addEventListener('click', downloadAllFiles);

// Functions
function handleTemplateFile(e) {
const file = e.target.files[0];
if (!file) return;

const reader = new FileReader();
reader.onload = function(event) {
templateContent = event.target.result;
templatePreview.textContent = templateContent.substring(0, 500) + '...';
templatePreview.classList.remove('hidden');
showNotification('Образец страницы загружен успешно!', 'success');
};
reader.readAsText(file);
}

function handleHtmlFiles(e) {
filesToProcess = Array.from(e.target.files);

if (filesToProcess.length === 0) {
fileList.classList.add('hidden');
return;
}

let fileListHTML = '<strong>Загружены файлы:</strong>\n';
filesToProcess.forEach((file, index) => {
fileListHTML += `${index + 1}. ${file.name} (${(file.size / 1024).toFixed(2)} KB)\n`;
});

fileList.textContent = fileListHTML;
fileList.classList.remove('hidden');

showNotification(`Загружено ${filesToProcess.length} файлов для обработки`, 'success');
}

function testSelectors() {
if (!templateContent) {
showNotification('Сначала загрузите образец страницы!', 'error');
return;
}

const selectors = selectorsTextarea.value
.split('\n')
.map(s => s.trim())
.filter(s => s.length > 0);

if (selectors.length === 0) {
showNotification('Введите хотя бы один селектор!', 'error');
return;
}

// Create a temporary DOM to test selectors
const parser = new DOMParser();
const doc = parser.parseFromString(templateContent, 'text/html');

let resultsHTML = '<h4>Результаты тестирования селекторов:</h4>';
resultsHTML += '<table class="results-table">';
resultsHTML += '<thead><tr><th>Селектор</th><th>Найдено элементов</th><th>Пример элемента</th></tr></thead>';
resultsHTML += '<tbody>';

selectors.forEach(selector => {
try {
const elements = doc.querySelectorAll(selector);
const count = elements.length;

let example = 'Нет элементов';
if (count > 0) {
const firstElement = elements[0];
example = firstElement.outerHTML.substring(0, 100);
if (firstElement.outerHTML.length > 100) example += '...';
}

resultsHTML += `
<tr>
<td><code>${selector}</code></td>
<td><span class="${count > 0 ? 'status-success' : 'status-error'}">${count}</span></td>
<td><small>${example}</small></td>
</tr>
`;
} catch (error) {
resultsHTML += `
<tr>
<td><code>${selector}</code></td>
<td><span class="status-error">Ошибка</span></td>
<td><small>Некорректный селектор: ${error.message}</small></td>
</tr>
`;
}
});

resultsHTML += '</tbody></table>';
testResults.innerHTML = resultsHTML;
testResults.classList.remove('hidden');

showNotification(`Протестировано ${selectors.length} селекторов`, 'success');
}

function processFiles() {
if (filesToProcess.length === 0) {
showNotification('Сначала загрузите файлы для обработки!', 'error');
return;
}

const selectors = selectorsTextarea.value
.split('\n')
.map(s => s.trim())
.filter(s => s.length > 0);

if (selectors.length === 0) {
showNotification('Введите селекторы для удаления!', 'error');
return;
}

processedFiles = [];
let completedCount = 0;

// Process each file
filesToProcess.forEach(file => {
const reader = new FileReader();
reader.onload = function(event) {
let content = event.target.result;
let removedCount = 0;

// Create DOM parser
const parser = new DOMParser();
const doc = parser.parseFromString(content, 'text/html');

// Remove elements for each selector
selectors.forEach(selector => {
try {
const elements = doc.querySelectorAll(selector);
elements.forEach(element => {
element.remove();
removedCount++;
});
} catch (error) {
console.error(`Ошибка при обработке селектора ${selector}:`, error);
}
});

// Convert back to HTML string
const serializer = new XMLSerializer();
let processedContent = serializer.serializeToString(doc);

// Store processed file
processedFiles.push({
name: file.name,
originalSize: file.size,
processedSize: new Blob([processedContent]).size,
removedCount: removedCount,
content: processedContent,
url: URL.createObjectURL(new Blob([processedContent], { type: 'text/html' }))
});

completedCount++;

// Update progress
updateProgress(completedCount, filesToProcess.length);

// When all files are processed
if (completedCount === filesToProcess.length) {
showResults();
showNotification('Обработка завершена!', 'success');
}
};

reader.readAsText(file);
});

showNotification(`Начата обработка ${filesToProcess.length} файлов...`, 'info');
}

function updateProgress(completed, total) {
if (completed === 1) {
resultsTableContainer.innerHTML = `
<div class="status-pending">
Обработано: ${completed} из ${total} файлов...
</div>
`;
resultsSection.classList.remove('hidden');
}
}

function showResults() {
let resultsHTML = '<table class="results-table">';
resultsHTML += '<thead><tr><th>Имя файла</th><th>Оригинальный размер</th><th>Новый размер</th><th>Удалено элементов</th><th>Действия</th></tr></thead>';
resultsHTML += '<tbody>';

processedFiles.forEach(file => {
const sizeDiff = file.originalSize - file.processedSize;
const sizeDiffPercent = ((sizeDiff / file.originalSize) * 100).toFixed(1);

resultsHTML += `
<tr>
<td><strong>${file.name}</strong></td>
<td>${(file.originalSize / 1024).toFixed(2)} KB</td>
<td>${(file.processedSize / 1024).toFixed(2)} KB
<span class="${sizeDiff > 0 ? 'status-success' : 'status-error'}">
(${sizeDiff > 0 ? '-' : '+'}${Math.abs(sizeDiff)} байт, ${sizeDiffPercent}%)
</span>
</td>
<td><span class="${file.removedCount > 0 ? 'status-success' : 'status-pending'}">${file.removedCount}</span></td>
<td>
<button onclick="downloadFile('${file.name}', '${file.url}')" class="btn btn-primary" style="padding: 5px 10px; font-size: 14px;">
📥 Скачать
</button>
</td>
</tr>
`;
});

resultsHTML += '</tbody></table>';

resultsTableContainer.innerHTML = resultsHTML;
downloadAllBtn.classList.remove('hidden');
}

function downloadFile(filename, url) {
const a = document.createElement('a');
a.href = url;
a.download = filename.replace('.html', '_processed.html');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}

function downloadAllFiles() {
processedFiles.forEach(file => {
downloadFile(file.name, file.url);
});

showNotification('Все файлы подготовлены для скачивания', 'success');
}

function resetApp() {
templateFileInput.value = '';
htmlFilesInput.value = '';
selectorsTextarea.value = '';
templateContent = '';
filesToProcess = [];
processedFiles = [];

templatePreview.classList.add('hidden');
fileList.classList.add('hidden');
testResults.classList.add('hidden');
resultsSection.classList.add('hidden');
downloadAllBtn.classList.add('hidden');

showNotification('Приложение сброшено', 'info');
}

function showNotification(message, type) {
// Remove any existing notification
const existingNotification = document.querySelector('.notification');
if (existingNotification) {
existingNotification.remove();
}

// Create new notification
const notification = document.createElement('div');
notification.className = `notification ${type}`;
notification.textContent = message;
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 8px;
color: white;
font-weight: 600;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
animation: slideIn 0.3s ease-out;
max-width: 400px;
`;

if (type === 'success') {
notification.style.backgroundColor = '#2ecc71';
} else if (type === 'error') {
notification.style.backgroundColor = '#e74c3c';
} else {
notification.style.backgroundColor = '#3498db';
}

document.body.appendChild(notification);

// Remove notification after 5 seconds
setTimeout(() => {
notification.style.animation = 'slideOut 0.3s ease-out';
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
}, 300);
}, 5000);
}

// Add CSS animations for notifications
const style = document.createElement('style');
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
`;
document.head.appendChild(style);

// Make downloadFile function available globally
window.downloadFile = downloadFile;
</script>
</body>
</html>

Новый ответ
Имя:
Текст сообщения: