sunmeat · May 5, 2025 09:47
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Работа с файлами</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f4f4f9;
    }
    h2 {
      color: #333;
      border-bottom: 2px solid #6200ea;
      padding-bottom: 5px;
    }
    .section {
      background: white;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #444;
    }
    input[type="text"],
    textarea,
    input[type="file"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    textarea {
      height: 100px;
      resize: vertical;
    }
    button {
      background-color: #6200ea;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background-color: #3700b3;
    }
    #output {
      margin-top: 20px;
      padding: 15px;
      background: #e3f2fd;
      border-radius: 4px;
      white-space: pre-wrap;
      display: none;
    }
    .error {
      color: red;
      font-weight: bold;
    }
  </style>
 </head>
 <body>
 <div class="section">
  <h2>Сохранить текст в файл</h2>
  <label for="saveFilePath">Имя файла (например, example.txt):</label>
  <input type="text" id="saveFilePath" placeholder="example.txt" required>
  <label for="content">Содержимое файла:</label>
  <textarea id="content" required></textarea>
  <button onclick="saveFile()">Сохранить</button>
 </div>

 <div class="section">
  <h2>Загрузить и прочитать файл</h2>
  <label for="loadFile">Выберите файл:</label>
  <input type="file" id="loadFile" accept=".txt">
  <button onclick="loadFile()">Прочитать</button>
  <div id="output"></div>
 </div>

 <script>
  // сохранение файла
  function saveFile() {
    const filePath = document.getElementById('saveFilePath').value;
    const content = document.getElementById('content').value;
    const output = document.getElementById('output');

    if (!filePath || !content) {
      output.textContent = 'Ошибка: Укажите имя файла и содержимое.';
      output.classList.add('error');
      output.style.display = 'block';
      return;
    }

    try {
      const blob = new Blob([content], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);

      // ссылка для скачивания
      const a = document.createElement('a');
      a.href = url;
      a.download = filePath;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

      output.textContent = `Файл "${filePath}" успешно сохранен!`;
      output.classList.remove('error');
      output.style.display = 'block';
    } catch (err) {
      output.textContent = `Ошибка при сохранении файла: ${err.message}`;
      output.classList.add('error');
      output.style.display = 'block';
    }
  }

  // чтение файла
  function loadFile() {
    const fileInput = document.getElementById('loadFile');
    const output = document.getElementById('output');

    if (!fileInput.files.length) {
      output.textContent = 'Ошибка: Выберите файл.';
      output.classList.add('error');
      output.style.display = 'block';
      return;
    }

    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onload = function(e) {
      try {
        const content = e.target.result;
        output.textContent = `Содержимое файла "${file.name}":\n${content}`;
        output.classList.remove('error');
        output.style.display = 'block';
      } catch (err) {
        output.textContent = `Ошибка при чтении файла: ${err.message}`;
        output.classList.add('error');
        output.style.display = 'block';
      }
    };

    reader.onerror = function() {
      output.textContent = 'Ошибка при чтении файла.';
      output.classList.add('error');
      output.style.display = 'block';
    };

    reader.readAsText(file);
  }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Работа с файлами</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f4f4f9;
	}
	h2 {
	color: #333;
	border-bottom: 2px solid #6200ea;
	padding-bottom: 5px;
	}
	.section {
	background: white;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	color: #444;
	}
	input[type="text"],
	textarea,
	input[type="file"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}
	textarea {
	height: 100px;
	resize: vertical;
	}
	button {
	background-color: #6200ea;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	}
	button:hover {
	background-color: #3700b3;
	}
	#output {
	margin-top: 20px;
	padding: 15px;
	background: #e3f2fd;
	border-radius: 4px;
	white-space: pre-wrap;
	display: none;
	}
	.error {
	color: red;
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div class="section">
	<h2>Сохранить текст в файл</h2>
	<label for="saveFilePath">Имя файла (например, example.txt):</label>
	<input type="text" id="saveFilePath" placeholder="example.txt" required>
	<label for="content">Содержимое файла:</label>
	<textarea id="content" required></textarea>
	<button onclick="saveFile()">Сохранить</button>
	</div>

	<div class="section">
	<h2>Загрузить и прочитать файл</h2>
	<label for="loadFile">Выберите файл:</label>
	<input type="file" id="loadFile" accept=".txt">
	<button onclick="loadFile()">Прочитать</button>
	<div id="output"></div>
	</div>

	<script>
	// сохранение файла
	function saveFile() {
	const filePath = document.getElementById('saveFilePath').value;
	const content = document.getElementById('content').value;
	const output = document.getElementById('output');

	if (!filePath \|\| !content) {
	output.textContent = 'Ошибка: Укажите имя файла и содержимое.';
	output.classList.add('error');
	output.style.display = 'block';
	return;
	}

	try {
	const blob = new Blob([content], { type: 'text/plain' });
	const url = URL.createObjectURL(blob);

	// ссылка для скачивания
	const a = document.createElement('a');
	a.href = url;
	a.download = filePath;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	URL.revokeObjectURL(url);

	output.textContent = `Файл "${filePath}" успешно сохранен!`;
	output.classList.remove('error');
	output.style.display = 'block';
	} catch (err) {
	output.textContent = `Ошибка при сохранении файла: ${err.message}`;
	output.classList.add('error');
	output.style.display = 'block';
	}
	}

	// чтение файла
	function loadFile() {
	const fileInput = document.getElementById('loadFile');
	const output = document.getElementById('output');

	if (!fileInput.files.length) {
	output.textContent = 'Ошибка: Выберите файл.';
	output.classList.add('error');
	output.style.display = 'block';
	return;
	}

	const file = fileInput.files[0];
	const reader = new FileReader();

	reader.onload = function(e) {
	try {
	const content = e.target.result;
	output.textContent = `Содержимое файла "${file.name}":\n${content}`;
	output.classList.remove('error');
	output.style.display = 'block';
	} catch (err) {
	output.textContent = `Ошибка при чтении файла: ${err.message}`;
	output.classList.add('error');
	output.style.display = 'block';
	}
	};

	reader.onerror = function() {
	output.textContent = 'Ошибка при чтении файла.';
	output.classList.add('error');
	output.style.display = 'block';
	};

	reader.readAsText(file);
	}
	</script>
	</body>
	</html>