zolart/ZolotovAD_Pibd23_IS-IP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: zolart:lab2
Branches Tags
zolart:main zolart:Corrected_Otchets_All zolart:Otchets_All_Lab zolart:lab_6 zolart:lab_5 zolart:lab_4 zolart:lab3 zolart:lab2
..
compare: zolart:lab4
Branches Tags
zolart:Corrected_Otchets_All zolart:Otchets_All_Lab zolart:lab_6 zolart:lab_5 zolart:lab_4 zolart:lab3 zolart:main zolart:lab2

4 Commits
lab2 ... lab4

Author SHA1 Message Date
zolart
c3235471f9 Загрузить файлы в «/» 2025-05-17 03:48:39 +04:00
zolart
b5f53f0297 Загрузить файлы в «/» 2025-05-17 03:34:43 +04:00
zolart
618f24f40b Загрузить файлы в «/» 2025-05-17 03:22:19 +04:00
zolart
19298722ee Загрузить файлы в «/» 2025-05-17 03:21:58 +04:00
9 changed files with 897 additions and 243 deletions
Expand all files Collapse all files

BIN
PostmanPat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

219
index.html
View File

@@ -1,71 +1,172 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> MailmanPet </title>
<link rel="icon" href="PostmanPat.png" type="image/png">
<link rel="stylesheet" href="style.css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MailmanPet - Главная</title>
<link rel="icon" href="PostmanPat.png" type="image/png">
<!-- Подключение Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Подключение Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
.mail-actions {
transition: all 0.3s;
}
.mail-actions:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "PostmanPat.png" alt="Логотип" width="50">
<body class="bg-light">
<header class="bg-primary text-white text-center py-3 border-bottom border-4 border-dark">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<a href="index.html" class="text-decoration-none text-white">
<img src="PostmanPat.png" alt="Логотип MailmanPet" width="50" class="me-2">
<h1 class="d-inline-block mb-0">MailmanPet</h1>
</a>
</div>
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="index.html">
<i class="bi bi-house-door"></i> Главная
</a>
<h1>MailmanPet</h1>
</div>
<nav class = "navLinks">
<ul>
<li><a href="page2.html">Входящие сообщения</a></li>
<li><a href="test/page-test.html">Исходящие сообщения</a></li>
<li><a href="page3.html">Черновики</a></li>
<li><a href="page4.html">Спам</a></li>
<li class="dropdown">
<a href="#">Дополнительно</a>
<div class="dropdown-content">
<a href="#">Настройки</a>
<a href="#">Помощь</a>
<a href="#">О нас</a>
</div>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.html">
<i class="bi bi-inbox"></i> Входящие
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="test/page-test.html">
<i class="bi bi-send"></i> Исходящие
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.html">
<i class="bi bi-file-earmark"></i> Черновики
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page4.html">
<i class="bi bi-trash"></i> Спам
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-gear"></i> Настройки
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="settings.html"><i class="bi bi-sliders"></i> Настройки аккаунта</a></li>
<li><a class="dropdown-item" href="help.html"><i class="bi bi-question-circle"></i> Помощь</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="about.html"><i class="bi bi-info-circle"></i> О программе</a></li>
</ul>
</nav>
</div>
<div class="content">
<p> <strong>Почтальон пэт - это многофункциональная иновационная современная почта,
которая может сравниться с привычными вам остальными почтовыми клиентами. </strong> </p>
<h3> Добро пожаловать! </h3>
<div class="abstract">
<p> Что я могу? </p>
<ul>
<li> Отправить письмо </li>
<li> Прочитать письмо </li>
<li> Посмотреть черновики </li>
</li>
</ul>
<div class="button">
<a href="index.html"> Вход </a>
<div class="d-flex">
<a href="login.html" class="btn btn-outline-light me-2">
<i class="bi bi-box-arrow-in-right"></i> Вход
</a>
<a href="register.html" class="btn btn-light">
<i class="bi bi-person-plus"></i> Регистрация
</a>
</div>
<div class="button">
<a href="index.html"> Регистрация </a>
</div>
</div>
</div>
</div>
</nav>
<div class="footer">
<p>&copy; 2025 MailmanPet. Все права защищены.</p>
<p>По вопросам звонить: +7 987 546 8019</p>
<p>Претензии отправлять по адресу: Уфа, Улица Пушкина Дом Колотушкина 45</p>
<a href = "index.html">
<img src = "vk.png" alt="Логотип" width="50">
</a>
<a href = "index.html">
<img src = "telegram.png" alt="Логотип" width="50">
</a>
<main class="container my-4">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="bg-white p-4 border rounded shadow-sm">
<h2 class="text-center mb-4">Добро пожаловать в MailmanPet!</h2>
<p class="lead text-center">Современный почтовый клиент с удобным интерфейсом и всеми необходимыми функциями.</p>
<div class="row mt-5">
<div class="col-md-4 mb-4">
<div class="card mail-actions h-100">
<div class="card-body text-center">
<i class="bi bi-envelope-plus fs-1 text-primary"></i>
<h5 class="card-title mt-3">Новое письмо</h5>
<p class="card-text">Создайте и отправьте новое письмо</p>
<a href="tov.html" class="btn btn-primary">Написать</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card mail-actions h-100">
<div class="card-body text-center">
<i class="bi bi-inbox fs-1 text-primary"></i>
<h5 class="card-title mt-3">Входящие</h5>
<p class="card-text">Просмотр полученных писем</p>
<a href="page2.html" class="btn btn-primary">Открыть</a>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card mail-actions h-100">
<div class="card-body text-center">
<i class="bi bi-file-earmark fs-1 text-primary"></i>
<h5 class="card-title mt-3">Черновики</h5>
<p class="card-text">Сохраненные неотправленные письма</p>
<a href="page3.html" class="btn btn-primary">Просмотреть</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</main>
<footer class="bg-dark text-white py-4 mt-auto">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3">
<h5>MailmanPet</h5>
<p>Современный почтовый клиент для вашего удобства</p>
</div>
<div class="col-md-4 mb-3">
<h5>Контакты</h5>
<p><i class="bi bi-telephone"></i> +7 987 546 8019</p>
<p><i class="bi bi-geo-alt"></i> Уфа, Улица Пушкина Дом Колотушкина 45</p>
</div>
<div class="col-md-4 mb-3">
<h5>Социальные сети</h5>
<a href="https://vk.com" class="text-white me-3"><i class="bi bi-vimeo"></i> ВКонтакте</a>
<a href="https://telegram.org" class="text-white"><i class="bi bi-telegram"></i> Telegram</a>
</div>
</div>
<hr class="my-2">
<div class="text-center">
<p class="mb-0">&copy; 2025 MailmanPet. Все права защищены.</p>
</div>
</div>
</footer>
<!-- Подключение Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

484
page2.html
View File

@@ -1,63 +1,443 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> MailmanPet </title>
<link rel="icon" href="PostmanPat.png" type="image/png">
<link rel="stylesheet" href="style.css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MailmanPet - Входящие сообщения</title>
<link rel="icon" href="PostmanPat.png" type="image/png">
<!-- Подключение Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Подключение Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Подключение собственного CSS -->
<style>
.letter-card {
transition: all 0.2s ease;
}
.letter-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#addLetterForm {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "PostmanPat.png" alt="Логотип" width="50">
<body class="bg-light">
<header class="bg-primary text-white text-center py-3 border-bottom border-4 border-dark">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<a href="index.html" class="text-decoration-none text-white">
<img src="PostmanPat.png" alt="Логотип" width="50" class="me-2">
<h1 class="d-inline-block mb-0">MailmanPet</h1>
</a>
</div>
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-envelope"></i> Почта
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="page2.html">
<i class="bi bi-inbox"></i> Входящие
</a>
<h1>MailmanPet</h1>
</div>
<nav class = "navLinks">
<ul>
<li><a href="page2.html">Входящие сообщения</a></li>
<li><a href="test/page-test.html">Исходящие сообщения</a></li>
<li><a href="page3.html">Черновики</a></li>
<li><a href="page4.html">Спам</a></li>
<li class="dropdown">
<a href="#">Дополнительно</a>
<div class="dropdown-content">
<a href="#">Настройки</a>
<a href="#">Помощь</a>
<a href="#">О нас</a>
</div>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="test/page-test.html">
<i class="bi bi-send"></i> Исходящие
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.html">
<i class="bi bi-file-earmark"></i> Черновики
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page4.html">
<i class="bi bi-trash"></i> Спам
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-gear"></i> Дополнительно
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="bi bi-sliders"></i> Настройки</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-question-circle"></i> Помощь</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-info-circle"></i> О нас</a></li>
</ul>
</nav>
</div>
<div class="content">
<p>
<a href="index.html"> <img class="imgback" src="back.png"> </a>
</p>
<h2>Входящие сообщения</h2>
<p> Тут будут находится все ваши полученные сообщения. MailmanPet уже доставил их вам.</p>
<ul class="message">
<li> <b>Ulgtu-U@mailmanpet.ru</b> / <b>27.02.2015</b> / УлГТУ (Ульяновский государственный технический университет). Вы отчислены, не приходите сюда больше </li>
<li> <b>Buz-kolbas@mailmanpet.ru</b> / <b>17.10.2018</b> / Купите наш бузулукский колбас, он придаёт силы и веры в будущее </li>
<li> <b>Vk-com@mailmanpet.ru</b> / <b>22.05.2021</b> / У вас новое сообщение ВКонтакте </li>
<li> <b>Angelika_Ivanovna@mailmanpet.ru</b> / <b>12.12.2012</b> / Тебе грустно и одиноко? Читать далее... </li>
<li> <b>Mihalich_ip@mailmanpet.ru</b> / <b>17.01.2024</b> / Ремнот лифтов +7 987 556 3010. Ремонт лифтов в любом городе России</li>
<li> <b>Samokat_dostavka@mailmanpet.ru</b> / <b>02.06.2022</b> / Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня </li>
</li>
</ul>
</div>
</div>
</nav>
<div class="footer">
<p>&copy; 2025 MailmanPet. Все права защищены.</p>
<p>По вопросам звонить: +7 987 546 8019</p>
<p>Претензии отправлять по адресу: Уфа, Улица Пушкина Дом Колотушкина 45</p>
<a href = "index.html">
<img src = "vk.png" alt="Логотип" width="50">
</a>
<a href = "index.html">
<img src = "telegram.png" alt="Логотип" width="50">
</a>
<main class="container my-4">
<div class="bg-white p-4 border rounded">
<a href="index.html" class="btn btn-outline-primary mb-3">
<i class="bi bi-arrow-left"></i> Назад
</a>
<h2 class="mb-4"><i class="bi bi-inbox"></i> Входящие сообщения</h2>
<p class="lead">Тут находятся все ваши полученные сообщения.</p>
<!-- Контейнер для писем и формы -->
<div id="app" class="mt-3">
<!-- Сюда будет вставляться содержимое через JavaScript -->
</div>
</div>
</body>
</main>
<footer class="bg-dark text-white text-center py-3">
<div class="container">
<p>&copy; 2025 MailmanPet. Все права защищены.</p>
<p>По вопросам звонить: +7 987 546 8019</p>
<p>Претензии отправлять по адресу: Уфа, Улица Пушкина Дом Колотушкина 45</p>
<div>
<a href="index.html" class="text-white me-3">
ВКонтакте
</a>
<a href="index.html" class="text-white">
Telegram
</a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script type="module">
// Модель
class LetterModel {
constructor() {
this.apiUrl = 'http://localhost:3000/letters';
}
async getAllLetters() {
const response = await fetch(this.apiUrl);
return await response.json();
}
async createLetter(letterData) {
const response = await fetch(this.apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...letterData,
date: new Date().toLocaleDateString('ru-RU'),
folderId: 1
}),
});
return await response.json();
}
async updateLetter(id, letterData) {
const response = await fetch(`${this.apiUrl}/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...letterData,
date: new Date().toLocaleDateString('ru-RU'),
folderId: 1
}),
});
return await response.json();
}
async deleteLetter(id) {
await fetch(`${this.apiUrl}/${id}`, {
method: 'DELETE',
});
}
}
// Представление
class LetterView {
constructor() {
this.app = document.getElementById('app');
}
renderLetters(letters) {
// Основная структура с формой сверху
let html = `
<div class="d-flex justify-content-between align-items-center mb-3">
<h3 class="mb-0">Список писем</h3>
<button id="addLetterBtn" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Добавить письмо
</button>
</div>
<!-- Форма добавления письма (сверху, изначально скрыта) -->
<div id="addLetterForm" class="card mb-3" style="display: none;">
<div class="card-body">
<h5 class="card-title">Новое письмо</h5>
<form id="letterForm">
<div class="mb-3">
<label for="subject" class="form-label">Тема</label>
<input type="text" class="form-control" id="subject" required>
</div>
<div class="mb-3">
<label for="senderName" class="form-label">От кого (email)</label>
<div class="input-group">
<input type="text" class="form-control" id="senderName" placeholder="username" required>
<span class="input-group-text">@mail.ru</span>
</div>
</div>
<div class="mb-3">
<label for="message" class="form-label">Сообщение</label>
<textarea class="form-control" id="message" rows="5" required></textarea>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary flex-grow-1">Добавить</button>
<button type="button" id="cancelAdd" class="btn btn-outline-secondary">Отмена</button>
</div>
</form>
</div>
</div>
<!-- Контейнер для списка писем -->
<div id="lettersContainer"></div>
`;
this.app.innerHTML = html;
const container = document.getElementById('lettersContainer');
if (letters.length === 0) {
container.innerHTML = `
<div class="alert alert-info">
Нет писем для отображения
</div>
`;
} else {
// Добавляем письма в порядке их появления (новые сверху)
letters.forEach(letter => {
const card = document.createElement('div');
card.className = 'card mb-3 letter-card';
card.innerHTML = `
<div class="card-body">
<h5 class="card-title">${letter.subject}</h5>
<p class="card-text"><strong>От:</strong> ${letter.senderName}@mail.ru</p>
<p class="card-text">${letter.message}</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">${letter.date}</small>
<div>
<button class="btn btn-sm btn-primary edit-btn me-2" data-id="${letter.id}">
<i class="bi bi-pencil"></i> Редактировать
</button>
<button class="btn btn-sm btn-danger delete-btn" data-id="${letter.id}">
<i class="bi bi-trash"></i> Удалить
</button>
</div>
</div>
</div>
`;
// Добавляем новое письмо в начало контейнера
container.insertBefore(card, container.firstChild);
});
}
}
showAddForm() {
const form = document.getElementById('addLetterForm');
form.style.display = 'block';
form.scrollIntoView({ behavior: 'smooth', block: 'start' });
document.getElementById('subject').focus();
}
hideAddForm() {
document.getElementById('addLetterForm').style.display = 'none';
document.getElementById('letterForm').reset();
}
showEditForm(letter) {
const form = document.getElementById('editLetterForm');
if (!form) {
this.createEditForm(letter);
} else {
document.getElementById('editSubject').value = letter.subject;
document.getElementById('editSenderName').value = letter.senderName;
document.getElementById('editMessage').value = letter.message;
form.dataset.id = letter.id;
form.style.display = 'block';
}
document.getElementById('editSubject').focus();
}
hideEditForm() {
const form = document.getElementById('editLetterForm');
if (form) {
form.style.display = 'none';
form.reset();
}
}
createEditForm(letter) {
const formHtml = `
<div id="editLetterForm" class="card mb-3" style="display: none;" data-id="${letter.id}">
<div class="card-body">
<h5 class="card-title">Редактирование письма</h5>
<form id="editLetterFormElement">
<div class="mb-3">
<label for="editSubject" class="form-label">Тема</label>
<input type="text" class="form-control" id="editSubject" value="${letter.subject}" required>
</div>
<div class="mb-3">
<label for="editSenderName" class="form-label">От кого</label>
<input type="text" class="form-control" id="editSenderName" value="${letter.senderName}" required>
</div>
<div class="mb-3">
<label for="editMessage" class="form-label">Сообщение</label>
<textarea class="form-control" id="editMessage" rows="5" required>${letter.message}</textarea>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary flex-grow-1">Сохранить</button>
<button type="button" id="cancelEdit" class="btn btn-outline-secondary">Отмена</button>
</div>
</form>
</div>
</div>
`;
this.app.insertAdjacentHTML('beforeend', formHtml);
}
showError(message) {
alert(message);
}
}
// Контроллер
class LetterController {
constructor(model, view) {
this.model = model;
this.view = view;
this.init();
}
async init() {
await this.loadLetters();
this.bindEvents();
}
async loadLetters() {
try {
const letters = await this.model.getAllLetters();
this.view.renderLetters(letters);
} catch (error) {
console.error('Ошибка загрузки:', error);
this.view.showError('Не удалось загрузить письма');
}
}
bindEvents() {
document.addEventListener('click', (e) => {
if (e.target.id === 'addLetterBtn' || e.target.closest('#addLetterBtn')) {
this.view.showAddForm();
} else if (e.target.id === 'cancelAdd' || e.target.closest('#cancelAdd')) {
this.view.hideAddForm();
} else if (e.target.classList.contains('delete-btn') || e.target.closest('.delete-btn')) {
const id = e.target.dataset.id || e.target.closest('.delete-btn').dataset.id;
this.deleteLetter(id);
} else if (e.target.classList.contains('edit-btn') || e.target.closest('.edit-btn')) {
const id = e.target.dataset.id || e.target.closest('.edit-btn').dataset.id;
this.editLetter(id);
} else if (e.target.id === 'cancelEdit' || e.target.closest('#cancelEdit')) {
this.view.hideEditForm();
}
});
document.addEventListener('submit', async (e) => {
if (e.target.id === 'letterForm') {
e.preventDefault();
await this.handleFormSubmit();
} else if (e.target.id === 'editLetterFormElement') {
e.preventDefault();
await this.handleEditFormSubmit();
}
});
}
async handleFormSubmit() {
const subject = document.getElementById('subject').value.trim();
const senderName = document.getElementById('senderName').value.trim();
const message = document.getElementById('message').value.trim();
if (!subject || !senderName || !message) {
this.view.showError('Все поля обязательны для заполнения');
return;
}
try {
await this.model.createLetter({ subject, senderName, message });
this.view.hideAddForm();
await this.loadLetters();
} catch (error) {
console.error('Ошибка при добавлении письма:', error);
this.view.showError('Не удалось добавить письмо');
}
}
async editLetter(id) {
try {
const letters = await this.model.getAllLetters();
const letter = letters.find(l => l.id == id);
if (letter) {
this.view.showEditForm(letter);
}
} catch (error) {
console.error('Ошибка при получении письма:', error);
this.view.showError('Не удалось загрузить письмо для редактирования');
}
}
async handleEditFormSubmit() {
const id = document.getElementById('editLetterForm').dataset.id;
const subject = document.getElementById('editSubject').value.trim();
const senderName = document.getElementById('editSenderName').value.trim();
const message = document.getElementById('editMessage').value.trim();
try {
await this.model.updateLetter(id, { subject, senderName, message });
//window.location.reload(); // Просто перезагружаем страницу
await this.loadLetters(); // Перезагружаем список писем
this.view.hideEditForm(); // Скрываем форму редактирования
} catch (error) {
console.log('Ошибка при редактировании:', error); // Только лог в консоль
}
}
async deleteLetter(id) {
if (confirm('Вы уверены, что хотите удалить это письмо?')) {
try {
await this.model.deleteLetter(id);
await this.loadLetters();
} catch (error) {
console.error('Ошибка удаления:', error);
this.view.showError('Не удалось удалить письмо');
}
}
}
}
// Инициализация приложения
const model = new LetterModel();
const view = new LetterView();
new LetterController(model, view);
</script>
</body>
</html>

182
page3.html
View File

@@ -1,63 +1,145 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> MailmanPet </title>
<link rel="icon" href="PostmanPat.png" type="image/png">
<link rel="stylesheet" href="style.css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MailmanPet - Входящие сообщения</title>
<link rel="icon" href="PostmanPat.png" type="image/png">
<!-- Подключение Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Подключение Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Подключение собственного CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "PostmanPat.png" alt="Логотип" width="50">
<body class="bg-light">
<header class="bg-primary text-white text-center py-3 border-bottom border-4 border-dark">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<a href="index.html" class="text-decoration-none text-white">
<img src="PostmanPat.png" alt="Логотип" width="50" class="me-2">
<h1 class="d-inline-block mb-0">MailmanPet</h1>
</a>
</div>
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-envelope"></i> Почта
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="page2.html">
<i class="bi bi-inbox"></i> Входящие
</a>
<h1>MailmanPet</h1>
</div>
<nav class = "navLinks">
<ul>
<li><a href="page2.html">Входящие сообщения</a></li>
<li><a href="test/page-test.html">Исходящие сообщения</a></li>
<li><a href="page3.html">Черновики</a></li>
<li><a href="page4.html">Спам</a></li>
<li class="dropdown">
<a href="#">Дополнительно</a>
<div class="dropdown-content">
<a href="#">Настройки</a>
<a href="#">Помощь</a>
<a href="#">О нас</a>
</div>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="test/page-test.html">
<i class="bi bi-send"></i> Исходящие
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="page3.html">
<i class="bi bi-file-earmark"></i> Черновики
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page4.html">
<i class="bi bi-trash"></i> Спам
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-gear"></i> Дополнительно
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="bi bi-sliders"></i> Настройки</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-question-circle"></i> Помощь</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-info-circle"></i> О нас</a></li>
</ul>
</nav>
</div>
<div class="content">
<p>
<a href="index.html"> <img class="imgback" src="back.png"> </a>
</p>
<h2>Черновики</h2>
<p> Тут будут находится все ваши недописанные сообщения. Ждём когда вы будете готовы закончить их!</p>
<ul class="message">
<li> <b>Ulgtu-U@mailmanpet.ru</b> / <b>27.02.2015</b> / УлГТУ (Ульяновский государственный технический университет). Вы отчислены, не приходите сюда больше </li>
<li> <b>Buz-kolbas@mailmanpet.ru</b> / <b>17.10.2018</b> / Купите наш бузулукский колбас, он придаёт силы и веры в будущее </li>
<li> <b>Vk-com@mailmanpet.ru</b> / <b>22.05.2021</b> / У вас новое сообщение ВКонтакте </li>
<li> <b>Angelika_Ivanovna@mailmanpet.ru</b> / <b>12.12.2012</b> / Тебе грустно и одиноко? Читать далее... </li>
<li> <b>Mihalich_ip@mailmanpet.ru</b> / <b>17.01.2024</b> / Ремнот лифтов +7 987 556 3010. Ремонт лифтов в любом городе России</li>
<li> <b>Samokat_dostavka@mailmanpet.ru</b> / <b>02.06.2022</b> / Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня </li>
</li>
</ul>
</div>
</div>
</nav>
<div class="footer">
<p>&copy; 2025 MailmanPet. Все права защищены.</p>
<p>По вопросам звонить: +7 987 546 8019</p>
<p>Претензии отправлять по адресу: Уфа, Улица Пушкина Дом Колотушкина 45</p>
<a href = "index.html">
<img src = "vk.png" alt="Логотип" width="50">
<main class="container my-4">
<div class="bg-white p-4 border rounded">
<a href="index.html" class="btn btn-outline-primary mb-3">
<i class="bi bi-arrow-left"></i> Назад
</a>
<h2 class="mb-4"><i class="bi bi-inbox"></i> Черновики</h2>
<p class="lead">Тут будут находится все ваши недописанные сообщения. Ждём когда вы будете готовы закончить их!</p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Ulgtu-U@mailmanpet.ru</h5>
<small class="text-muted">27.02.2015</small>
</div>
<p class="mb-1">УлГТУ (Ульяновский государственный технический университет). Вы отчислены, не приходите сюда больше</p>
</a>
<a href = "index.html">
<img src = "telegram.png" alt="Логотип" width="50">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Buz-kolbas@mailmanpet.ru</h5>
<small class="text-muted">17.10.2018</small>
</div>
<p class="mb-1">Купите наш бузулукский колбас, он придаёт силы и веры в будущее</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Vk-com@mailmanpet.ru</h5>
<small class="text-muted">22.05.2021</small>
</div>
<p class="mb-1">У вас новое сообщение ВКонтакте</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Angelika_Ivanovna@mailmanpet.ru</h5>
<small class="text-muted">12.12.2012</small>
</div>
<p class="mb-1">Тебе грустно и одиноко? Читать далее...</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Mihalich_ip@mailmanpet.ru</h5>
<small class="text-muted">17.01.2024</small>
</div>
<p class="mb-1">Ремнот лифтов +7 987 556 3010. Ремонт лифтов в любом городе России</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Samokat_dostavka@mailmanpet.ru</h5>
<small class="text-muted">02.06.2022</small>
</div>
<p class="mb-1">Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня</p>
</a>
</div>
</div>
</body>
</main>
<footer class="bg-dark text-white text-center py-3">
<div class="container">
<p>&copy; 2025 MailmanPet. Все права защищены.</p>
<p>По вопросам звонить: +7 987 546 8019</p>
<p>Претензии отправлять по адресу: Уфа, Улица Пушкина Дом Колотушкина 45</p>
<div>
<a href="index.html" class="text-white me-3">
ВКонтакте
</a>
<a href="index.html" class="text-white">
Telegram
</a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

182
page4.html
View File

@@ -1,63 +1,145 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> MailmanPet </title>
<link rel="icon" href="PostmanPat.png" type="image/png">
<link rel="stylesheet" href="style.css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MailmanPet - Входящие сообщения</title>
<link rel="icon" href="PostmanPat.png" type="image/png">
<!-- Подключение Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Подключение Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Подключение собственного CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "PostmanPat.png" alt="Логотип" width="50">
<body class="bg-light">
<header class="bg-primary text-white text-center py-3 border-bottom border-4 border-dark">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<a href="index.html" class="text-decoration-none text-white">
<img src="PostmanPat.png" alt="Логотип" width="50" class="me-2">
<h1 class="d-inline-block mb-0">MailmanPet</h1>
</a>
</div>
</div>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">
<i class="bi bi-envelope"></i> Почта
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="page2.html">
<i class="bi bi-inbox"></i> Входящие
</a>
<h1>MailmanPet</h1>
</div>
<nav class = "navLinks">
<ul>
<li><a href="page2.html">Входящие сообщения</a></li>
<li><a href="test/page-test.html">Исходящие сообщения</a></li>
<li><a href="page3.html">Черновики</a></li>
<li><a href="page4.html">Спам</a></li>
<li class="dropdown">
<a href="#">Дополнительно</a>
<div class="dropdown-content">
<a href="#">Настройки</a>
<a href="#">Помощь</a>
<a href="#">О нас</a>
</div>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="test/page-test.html">
<i class="bi bi-send"></i> Исходящие
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.html">
<i class="bi bi-file-earmark"></i> Черновики
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="page4.html">
<i class="bi bi-trash"></i> Спам
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-gear"></i> Дополнительно
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"><i class="bi bi-sliders"></i> Настройки</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-question-circle"></i> Помощь</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-info-circle"></i> О нас</a></li>
</ul>
</nav>
</div>
<div class="content">
<p>
<a href="index.html"> <img class="imgback" src="back.png"> </a>
</p>
<h2>Спам</h2>
<p> Тут будут находится все нежелательные сообщения. Наши алгоритмы посчитали их вредоносными или бесполезными.</p>
<ul class="message">
<li> <b>Ulgtu-U@mailmanpet.ru</b> / <b>27.02.2015</b> / УлГТУ (Ульяновский государственный технический университет). Вы отчислены, не приходите сюда больше </li>
<li> <b>Buz-kolbas@mailmanpet.ru</b> / <b>17.10.2018</b> / Купите наш бузулукский колбас, он придаёт силы и веры в будущее </li>
<li> <b>Vk-com@mailmanpet.ru</b> / <b>22.05.2021</b> / У вас новое сообщение ВКонтакте </li>
<li> <b>Angelika_Ivanovna@mailmanpet.ru</b> / <b>12.12.2012</b> / Тебе грустно и одиноко? Читать далее... </li>
<li> <b>Mihalich_ip@mailmanpet.ru</b> / <b>17.01.2024</b> / Ремнот лифтов +7 987 556 3010. Ремонт лифтов в любом городе России</li>
<li> <b>Samokat_dostavka@mailmanpet.ru</b> / <b>02.06.2022</b> / Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня </li>
</li>
</ul>
</div>
</div>
</nav>
<div class="footer">
<p>&copy; 2025 MailmanPet. Все права защищены.</p>
<p>По вопросам звонить: +7 987 546 8019</p>
<p>Претензии отправлять по адресу: Уфа, Улица Пушкина Дом Колотушкина 45</p>
<a href = "index.html">
<img src = "vk.png" alt="Логотип" width="50">
<main class="container my-4">
<div class="bg-white p-4 border rounded">
<a href="index.html" class="btn btn-outline-primary mb-3">
<i class="bi bi-arrow-left"></i> Назад
</a>
<h2 class="mb-4"><i class="bi bi-inbox"></i> Спам</h2>
<p class="lead">Тут будут находится все нежелательные сообщения. Наши алгоритмы посчитали их вредоносными или бесполезными.</p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Ulgtu-U@mailmanpet.ru</h5>
<small class="text-muted">27.02.2015</small>
</div>
<p class="mb-1">УлГТУ (Ульяновский государственный технический университет). Вы отчислены, не приходите сюда больше</p>
</a>
<a href = "index.html">
<img src = "telegram.png" alt="Логотип" width="50">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Buz-kolbas@mailmanpet.ru</h5>
<small class="text-muted">17.10.2018</small>
</div>
<p class="mb-1">Купите наш бузулукский колбас, он придаёт силы и веры в будущее</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Vk-com@mailmanpet.ru</h5>
<small class="text-muted">22.05.2021</small>
</div>
<p class="mb-1">У вас новое сообщение ВКонтакте</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Angelika_Ivanovna@mailmanpet.ru</h5>
<small class="text-muted">12.12.2012</small>
</div>
<p class="mb-1">Тебе грустно и одиноко? Читать далее...</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Mihalich_ip@mailmanpet.ru</h5>
<small class="text-muted">17.01.2024</small>
</div>
<p class="mb-1">Ремнот лифтов +7 987 556 3010. Ремонт лифтов в любом городе России</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Samokat_dostavka@mailmanpet.ru</h5>
<small class="text-muted">02.06.2022</small>
</div>
<p class="mb-1">Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня</p>
</a>
</div>
</div>
</body>
</main>
<footer class="bg-dark text-white text-center py-3">
<div class="container">
<p>&copy; 2025 MailmanPet. Все права защищены.</p>
<p>По вопросам звонить: +7 987 546 8019</p>
<p>Претензии отправлять по адресу: Уфа, Улица Пушкина Дом Колотушкина 45</p>
<div>
<a href="index.html" class="text-white me-3">
ВКонтакте
</a>
<a href="index.html" class="text-white">
Telegram
</a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

32
style.css
View File

@@ -105,23 +105,7 @@ a:link, a:visited{
body {
background-color: #070707;
}
.button {
width: auto;
}
.abstract {
width: auto;
position: relative;
}
.navLinks ul li {
display: block;
margin-bottom: 20px;
}
.dropdown-content {
width: 100%;
left: 50%;
transform: translateX(-50%);
}
}
/* Планшет (ширина области отображения от 401 до 960px)*/
@@ -129,22 +113,6 @@ a:link, a:visited{
body {
background-color: #0956fd;
}
.button {
width: auto;
}
.abstract {
width: auto;
position: relative;
}
.navLinks ul li {
display: block;
margin-bottom: 20px;
}
.dropdown-content {
width: 100%;
left: 50%;
transform: translateX(-50%);
}
}

BIN
telegram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

41
tov.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Почтовый клиент</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-light">
<div class="container my-4">
<h1 class="text-center">Почтовый клиент</h1>
<form id="addItemForm" class="mb-4">
<div class="mb-3">
<label for="senderName" class="form-label">Отправитель</label>
<input type="text" class="form-control" id="senderName" required>
</div>
<div class="mb-3">
<label for="subject" class="form-label">Тема письма</label>
<input type="text" class="form-control" id="subject" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Текст письма</label>
<textarea class="form-control" id="message" rows="3" required></textarea>
</div>
<div class="mb-3">
<label for="date" class="form-label">Дата отправления</label>
<input type="date" class="form-control" id="date" required>
</div>
<button type="submit" class="btn btn-primary">
<i class="bi bi-envelope-plus"></i> Добавить письмо
</button>
</form>
<div id="itemsContainer" class="row g-3"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>

BIN
Отчёт3.docx Normal file
View File

Binary file not shown.