Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c3235471f9 | |||
| b5f53f0297 | |||
| 618f24f40b | |||
| 19298722ee | |||
| 2de0c141aa | |||
| 9a470428fe |
26
App.jsx
26
App.jsx
@@ -1,26 +0,0 @@
|
|||||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
|
||||||
import Navbar from './components/navbar.jsx';
|
|
||||||
import HomePage from './pages/HomePage.jsx';
|
|
||||||
import OutcomPage from './pages/OutcomPage.jsx';
|
|
||||||
import SpamPage from './pages/SpamPage.jsx';
|
|
||||||
import IncomPage from './pages/IncomPage.jsx';
|
|
||||||
import AboutPage from './pages/AboutPage.jsx';
|
|
||||||
import Footer from './components/footer.jsx';
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
return (
|
|
||||||
<BrowserRouter>
|
|
||||||
<Navbar/>
|
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<HomePage/>}/>
|
|
||||||
<Route path="/outcom" element={<OutcomPage/>}/>
|
|
||||||
<Route path="/spam" element={<SpamPage/>}/>
|
|
||||||
<Route path="/incom" element={<IncomPage/>}/>
|
|
||||||
<Route path="/about" element={<AboutPage/>}/>
|
|
||||||
{/* <Route path="/form" element={<FormPage/>}/>
|
|
||||||
<Route path="/form/:id" element={<FormPage/>}/> */}
|
|
||||||
</Routes>
|
|
||||||
<Footer/>
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import MailList from '../components/mailList';
|
|
||||||
import MailForm from '../components/mailForm';
|
|
||||||
import { Modal } from 'bootstrap';
|
|
||||||
|
|
||||||
import { useMailes } from '../hooks/useMailes';
|
|
||||||
|
|
||||||
export default function OutcomPage() {
|
|
||||||
const { mailes, remove, save, moveToSpam } = useMailes();
|
|
||||||
const [editingMovie, setEditingMovie] = useState(null);
|
|
||||||
|
|
||||||
function handleEdit(movie) {
|
|
||||||
setEditingMovie(movie);
|
|
||||||
const modal = new Modal(document.getElementById('movieModal'));
|
|
||||||
modal.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSuccess() {
|
|
||||||
const modal = Modal.getInstance(document.getElementById('movieModal'));
|
|
||||||
modal.hide();
|
|
||||||
setEditingMovie(null);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function showImageModal(src) {
|
|
||||||
const img = document.getElementById("modalImage");
|
|
||||||
img.src = src;
|
|
||||||
|
|
||||||
const modal = new Modal(document.getElementById("imageModal"));
|
|
||||||
modal.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main className="flex-grow-1 pt-4">
|
|
||||||
<div className="container my-5">
|
|
||||||
<h2>Исходящие сообщения</h2>
|
|
||||||
<button
|
|
||||||
className="btn btn-success my-3"
|
|
||||||
onClick={() => handleEdit(null)}
|
|
||||||
>
|
|
||||||
Добавить
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<h3>Сообщения</h3>
|
|
||||||
<div id="mailList" className="row g-4 mb-5 mt-1">
|
|
||||||
<MailList
|
|
||||||
mailes={[...mailes].reverse()} // Добавьте reverse() для отображения в обратном порядке
|
|
||||||
onEdit={handleEdit}
|
|
||||||
onDelete={remove}
|
|
||||||
onImageClick={showImageModal}
|
|
||||||
onSpam={moveToSpam}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* форма */}
|
|
||||||
<div className="modal fade" id="movieModal" tabIndex="-1">
|
|
||||||
<div className="modal-dialog modal-lg modal-dialog-centered">
|
|
||||||
<div className="modal-body">
|
|
||||||
<MailForm
|
|
||||||
movie={editingMovie}
|
|
||||||
onSuccess={handleSuccess}
|
|
||||||
onSave={save}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* форма картинки на карточке */}
|
|
||||||
<div className="modal fade" id="imageModal" tabIndex="-1" aria-hidden="true">
|
|
||||||
<div className="modal-dialog modal-dialog-centered modal-lg">
|
|
||||||
<div className="modal-content">
|
|
||||||
<div className="modal-body p-0">
|
|
||||||
<img
|
|
||||||
id="modalImage"
|
|
||||||
src=""
|
|
||||||
alt="movie"
|
|
||||||
className="img-fluid w-100"
|
|
||||||
style={{ maxHeight: '90vh', objectFit: 'contain' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
BIN
PostmanPat.png
Normal file
BIN
PostmanPat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
File diff suppressed because one or more lines are too long
52
db.json
52
db.json
@@ -1,52 +0,0 @@
|
|||||||
{
|
|
||||||
"mailes": [
|
|
||||||
{
|
|
||||||
"id": "3099",
|
|
||||||
"title": "43",
|
|
||||||
"description": "423423",
|
|
||||||
"img": "",
|
|
||||||
"userId": 1,
|
|
||||||
"createdAt": "2023-11-15T10:00:00Z"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"users": [
|
|
||||||
{
|
|
||||||
"id": "1",
|
|
||||||
"name": "vasilyiZ"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "2",
|
|
||||||
"name": "Nagibator228"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "3",
|
|
||||||
"name": "Anastasia-Egorova"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"spam": [
|
|
||||||
{
|
|
||||||
"id": "9e04",
|
|
||||||
"title": "3232",
|
|
||||||
"description": "123123",
|
|
||||||
"img": "",
|
|
||||||
"userId": 1,
|
|
||||||
"createdAt": "2025-05-28T15:44:52.889Z",
|
|
||||||
"director": {
|
|
||||||
"id": "1",
|
|
||||||
"name": "vasilyiZ"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "faec",
|
|
||||||
"title": "43242gdgdz11112",
|
|
||||||
"description": "tgt",
|
|
||||||
"img": "",
|
|
||||||
"userId": 2,
|
|
||||||
"createdAt": "2025-05-28T11:03:33.331Z",
|
|
||||||
"director": {
|
|
||||||
"id": "2",
|
|
||||||
"name": "Nagibator228"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
26
footer.jsx
26
footer.jsx
@@ -1,26 +0,0 @@
|
|||||||
export default function Footer() {
|
|
||||||
return (
|
|
||||||
<footer className="bg-dark text-white mt-auto">
|
|
||||||
<div className="container py-3 d-flex flex-column flex-md-row justify-content-between align-items-center">
|
|
||||||
<div>
|
|
||||||
<p className="mb-1">
|
|
||||||
<i className="bi bi-telephone-fill me-1"></i>
|
|
||||||
+7 123 456 7890
|
|
||||||
</p>
|
|
||||||
<p className="mb-0">
|
|
||||||
<i className="bi bi-geo-alt-fill me-1"></i>
|
|
||||||
г. Москва, ул. Примерная, 1
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="mt-2 mt-md-0">
|
|
||||||
<a href="#" className="text-white me-3">
|
|
||||||
<i className="bi bi-telegram fs-4"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" className="text-white">
|
|
||||||
<i className="bi bi-youtube fs-4"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
177
index.html
177
index.html
@@ -2,18 +2,171 @@
|
|||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Почтовый клиент</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<title>MailmanPet - Главная</title>
|
||||||
<link rel="icon" href="node_modules/bootstrap-icons/icons/PostmanPat.svg" />
|
<link rel="icon" href="PostmanPat.png" type="image/png">
|
||||||
<link
|
<!-- Подключение Bootstrap CSS -->
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
rel="stylesheet"
|
<!-- Подключение Bootstrap Icons -->
|
||||||
/>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||||
<link href="/style.min.css" rel="stylesheet" />
|
<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>
|
</head>
|
||||||
<body>
|
<body class="bg-light">
|
||||||
<div id="root"></div>
|
<header class="bg-primary text-white text-center py-3 border-bottom border-4 border-dark">
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<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>
|
||||||
|
</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>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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">© 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
46
mailCard.jsx
46
mailCard.jsx
@@ -1,46 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
|
|
||||||
export default function MailCard({ mail, onEdit, onDelete, onAddToSpam }) {
|
|
||||||
// Удаляем состояние currentDateTime и его обновление
|
|
||||||
// Получаем дату из props.mail.createdAt
|
|
||||||
const formattedDateTime = mail.createdAt
|
|
||||||
? new Date(mail.createdAt).toLocaleString('ru-RU', {
|
|
||||||
day: '2-digit',
|
|
||||||
month: '2-digit',
|
|
||||||
year: 'numeric',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
})
|
|
||||||
: 'Дата не указана';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card h-100">
|
|
||||||
<div className="card-body">
|
|
||||||
<div className="d-flex justify-content-between align-items-start">
|
|
||||||
<div>
|
|
||||||
<h5>Тема:</h5>
|
|
||||||
<h5>{mail.title}</h5>
|
|
||||||
</div>
|
|
||||||
<small className="text-muted">{formattedDateTime}</small> {/* Используем сохраненную дату */}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h6 className="mt-3">Сообщение:</h6>
|
|
||||||
<h6>{mail.description}</h6>
|
|
||||||
|
|
||||||
<p className="mt-3">Отправитель: <em>{mail.director?.name}@patmail.ru</em></p>
|
|
||||||
|
|
||||||
<div className="mt-3">
|
|
||||||
<button className="btn btn-warning me-2" onClick={onEdit}>
|
|
||||||
Редактировать
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-danger" onClick={onDelete}>
|
|
||||||
Удалить
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-secondary me-2" onClick={onAddToSpam}>
|
|
||||||
В спам
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
121
mailForm.jsx
121
mailForm.jsx
@@ -1,121 +0,0 @@
|
|||||||
import { useState, useEffect } from 'react';
|
|
||||||
import * as API from '../api/mailes';
|
|
||||||
import * as userAPI from '../api/users';
|
|
||||||
import { Modal } from 'bootstrap';
|
|
||||||
|
|
||||||
|
|
||||||
export default function MailForm({ movie, onSuccess, onSave }) {
|
|
||||||
const [title, setTitle] = useState('');
|
|
||||||
const [description, setDesc] = useState('');
|
|
||||||
const [img, setImage] = useState('');
|
|
||||||
const [userId, setUser] = useState('');
|
|
||||||
const [dirs, setDirs] = useState([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log('Movie:', movie);
|
|
||||||
userAPI.fetchUsers().then(setDirs);
|
|
||||||
|
|
||||||
if (movie) {
|
|
||||||
setTitle(movie.title);
|
|
||||||
setDesc(movie.description);
|
|
||||||
setImage(movie.img);
|
|
||||||
setUser(movie.userId);
|
|
||||||
} else {
|
|
||||||
setTitle('');
|
|
||||||
setDesc('');
|
|
||||||
setImage('');
|
|
||||||
setUser('');
|
|
||||||
}
|
|
||||||
}, [movie]);
|
|
||||||
|
|
||||||
function handleFileChange(e) {
|
|
||||||
const file = e.target.files[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onloadend = () => {
|
|
||||||
setImage(reader.result);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const newMovie = {
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
img,
|
|
||||||
userId,
|
|
||||||
createdAt: movie?.createdAt || new Date().toISOString()
|
|
||||||
};
|
|
||||||
|
|
||||||
await onSave(movie?.id ? { ...newMovie, id: movie.id } : newMovie);
|
|
||||||
|
|
||||||
const modal = Modal.getInstance(document.getElementById('movieModal'));
|
|
||||||
modal.hide();
|
|
||||||
|
|
||||||
onSuccess();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form className="modal-content" onSubmit={handleSubmit}>
|
|
||||||
<div className="modal-header">
|
|
||||||
<h5 className="modal-title">
|
|
||||||
{movie ? 'Редактировать сообщение' : 'Добавить сообщение'}
|
|
||||||
</h5>
|
|
||||||
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Закрыть" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="modal-body">
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Тема</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
value={title}
|
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">Сообщение</label>
|
|
||||||
<textarea
|
|
||||||
className="form-control"
|
|
||||||
value={description}
|
|
||||||
onChange={(e) => setDesc(e.target.value)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="mb-3">
|
|
||||||
<label className="form-label">От кого</label>
|
|
||||||
<select
|
|
||||||
className="form-select"
|
|
||||||
value={userId}
|
|
||||||
onChange={(e) => setUser(Number(e.target.value))}
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<option value="">-- выбрать пользователя --</option>
|
|
||||||
{dirs.map((d) => (
|
|
||||||
<option key={d.id} value={d.id}>
|
|
||||||
{d.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="modal-footer">
|
|
||||||
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">
|
|
||||||
Отмена
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="btn btn-primary">
|
|
||||||
{movie ? 'Сохранить' : 'Создать'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
18
mailList.jsx
18
mailList.jsx
@@ -1,18 +0,0 @@
|
|||||||
import MailCard from "./mailCard";
|
|
||||||
export default function MailList({ mailes, onEdit, onDelete, onImageClick, onSpam }) {
|
|
||||||
return (
|
|
||||||
<div className="row g-4">
|
|
||||||
{mailes.map(m => (
|
|
||||||
<div key={m.id}>
|
|
||||||
<MailCard
|
|
||||||
mail={m}
|
|
||||||
onEdit={() => onEdit(m)}
|
|
||||||
onDelete={() => onDelete(m.id)}
|
|
||||||
onImageClick={() => onImageClick(m.img)}
|
|
||||||
onAddToSpam={() => onSpam(m)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
22
mailes.js
22
mailes.js
@@ -1,22 +0,0 @@
|
|||||||
const BASE = "/api/mailes";
|
|
||||||
|
|
||||||
export const fetchMailes = () =>
|
|
||||||
fetch(`${BASE}`).then((r) => r.json());
|
|
||||||
|
|
||||||
export const fetchMaile = (id) => fetch(`${BASE}/${id}`).then((r) => r.json());
|
|
||||||
|
|
||||||
export const createMaile = (m) =>
|
|
||||||
fetch(BASE, {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify(m),
|
|
||||||
}).then((r) => r.json());
|
|
||||||
|
|
||||||
export const updateMaile = (id, m) =>
|
|
||||||
fetch(`${BASE}/${id}`, {
|
|
||||||
method: "PUT",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify(m),
|
|
||||||
}).then((r) => r.json());
|
|
||||||
|
|
||||||
export const deleteMaile = (id) => fetch(`${BASE}/${id}`, { method: "DELETE" });
|
|
||||||
12
main.jsx
12
main.jsx
@@ -1,12 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import ReactDOM from "react-dom/client";
|
|
||||||
import App from "./App";
|
|
||||||
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
|
|
||||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
|
||||||
|
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<App />
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
|
||||||
43
navbar.jsx
43
navbar.jsx
@@ -1,43 +0,0 @@
|
|||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
|
||||||
export default function Navbar() {
|
|
||||||
return (
|
|
||||||
<nav className="navbar navbar-expand-md navbar-dark bg-primary">
|
|
||||||
<div className="container">
|
|
||||||
<Link to="/" className="navbar-brand d-flex align-items-center">
|
|
||||||
<span className="fs-4">MailmanPat</span>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* Кнопка-бургер */}
|
|
||||||
<button
|
|
||||||
className="navbar-toggler"
|
|
||||||
type="button"
|
|
||||||
data-bs-toggle="collapse"
|
|
||||||
data-bs-target="#mainNavbar"
|
|
||||||
>
|
|
||||||
<span className="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Выпадающее меню */}
|
|
||||||
<div className="collapse navbar-collapse" id="mainNavbar">
|
|
||||||
<ul className="navbar-nav ms-auto">
|
|
||||||
<li className="nav-item">
|
|
||||||
<Link to="/spam" className="nav-link text-white">Спам</Link>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item">
|
|
||||||
<Link to="/incom" className="nav-link text-white">Входящие сообщения</Link>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item">
|
|
||||||
<Link to="/outcom" className="nav-link text-white">Исходящие сообщения</Link>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item">
|
|
||||||
<Link to="/about" className="nav-link text-white">
|
|
||||||
<i className="bi bi-info-circle"></i> О нас
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
44
package.json
44
package.json
@@ -1,44 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "lab-1",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "online-cinema",
|
|
||||||
"main": "index.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
|
||||||
"start": "vite",
|
|
||||||
"serve": "http-server -p 3000 ./dist/",
|
|
||||||
"server": "json-server --watch ./db.json --port 3000",
|
|
||||||
"build": "vite build",
|
|
||||||
"preview": "vite preview",
|
|
||||||
"lint": "eslint .",
|
|
||||||
"format": "prettier --write ."
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git+https://github.com/strwbrry1/Lab-1.git"
|
|
||||||
},
|
|
||||||
"author": "strwbrr",
|
|
||||||
"license": "ISC",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/strwbrry1/Lab-1/issues"
|
|
||||||
},
|
|
||||||
"homepage": "https://github.com/strwbrry1/Lab-1#readme",
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.25.1",
|
|
||||||
"@vitejs/plugin-react": "^4.5.0",
|
|
||||||
"eslint": "^9.25.1",
|
|
||||||
"eslint-config-prettier": "^10.1.2",
|
|
||||||
"eslint-plugin-prettier": "^5.2.6",
|
|
||||||
"globals": "^16.0.0",
|
|
||||||
"json-server": "^1.0.0-beta.3",
|
|
||||||
"prettier": "^3.5.3",
|
|
||||||
"vite": "^6.3.5"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"bootstrap": "^5.3.6",
|
|
||||||
"bootstrap-icons": "^1.11.3",
|
|
||||||
"react": "^19.1.0",
|
|
||||||
"react-dom": "^19.1.0",
|
|
||||||
"react-router-dom": "^7.6.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,12 +1,38 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title> MailmanPet </title>
|
<title> MailmanPet </title>
|
||||||
<link rel="icon" href="../PostmanPat.png" type="image/png">
|
<link rel="icon" href="../PostmanPat.png" type="image/png">
|
||||||
<link rel="stylesheet" href="../style.css"/>
|
<link rel="stylesheet" href="../style.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
<a href = "index.html">
|
||||||
|
<img src = "../PostmanPat.png" alt="Логотип" width="50">
|
||||||
|
</a>
|
||||||
<h1>MailmanPet</h1>
|
<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>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
<a href="../index.html"> <img class="imgback" src="../back.png"> </a>
|
<a href="../index.html"> <img class="imgback" src="../back.png"> </a>
|
||||||
</p>
|
</p>
|
||||||
@@ -20,6 +46,20 @@
|
|||||||
<li> <b>Mihalich_ip@mailmanpet.ru</b> / <b>17.01.2024</b> / Ремнот лифтов +7 987 556 3010. Ремонт лифтов в любом городе России</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> <b>Samokat_dostavka@mailmanpet.ru</b> / <b>02.06.2022</b> / Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня </li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>© 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
453
page2.html
453
page2.html
@@ -1,24 +1,443 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<title> MailmanPet </title>
|
<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">
|
<link rel="icon" href="PostmanPat.png" type="image/png">
|
||||||
<link rel="stylesheet" href="style.css"/>
|
<!-- Подключение 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>
|
</head>
|
||||||
<body>
|
<body class="bg-light">
|
||||||
<h1>MailmanPet</h1>
|
<header class="bg-primary text-white text-center py-3 border-bottom border-4 border-dark">
|
||||||
<p>
|
<div class="container">
|
||||||
<a href="index.html"> <img class="imgback" src="back.png"> </a>
|
<div class="d-flex align-items-center justify-content-center">
|
||||||
</p>
|
<a href="index.html" class="text-decoration-none text-white">
|
||||||
<h2>Входящие сообщения</h2>
|
<img src="PostmanPat.png" alt="Логотип" width="50" class="me-2">
|
||||||
<p> Тут будут находится все ваши полученные сообщения. MailmanPet уже доставил их вам.</p>
|
<h1 class="d-inline-block mb-0">MailmanPet</h1>
|
||||||
<ul class="message">
|
</a>
|
||||||
<li> <b>Ulgtu-U@mailmanpet.ru</b> / <b>27.02.2015</b> / УлГТУ (Ульяновский государственный технический университет). Вы отчислены, не приходите сюда больше </li>
|
</div>
|
||||||
<li> <b>Buz-kolbas@mailmanpet.ru</b> / <b>17.10.2018</b> / Купите наш бузулукский колбас, он придаёт силы и веры в будущее </li>
|
</div>
|
||||||
<li> <b>Vk-com@mailmanpet.ru</b> / <b>22.05.2021</b> / У вас новое сообщение ВКонтакте </li>
|
</header>
|
||||||
<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>
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||||
<li> <b>Samokat_dostavka@mailmanpet.ru</b> / <b>02.06.2022</b> / Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня </li>
|
<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>
|
||||||
|
</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>
|
</ul>
|
||||||
</body>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="bg-dark text-white text-center py-3">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 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>
|
</html>
|
||||||
155
page3.html
155
page3.html
@@ -1,24 +1,145 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<title> MailmanPet </title>
|
<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">
|
<link rel="icon" href="PostmanPat.png" type="image/png">
|
||||||
<link rel="stylesheet" href="style.css"/>
|
<!-- Подключение 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>
|
</head>
|
||||||
<body>
|
<body class="bg-light">
|
||||||
<h1>MailmanPet</h1>
|
<header class="bg-primary text-white text-center py-3 border-bottom border-4 border-dark">
|
||||||
<p>
|
<div class="container">
|
||||||
<a href="index.html"> <img class="imgback" src="back.png"> </a>
|
<div class="d-flex align-items-center justify-content-center">
|
||||||
</p>
|
<a href="index.html" class="text-decoration-none text-white">
|
||||||
<h2>Черновики</h2>
|
<img src="PostmanPat.png" alt="Логотип" width="50" class="me-2">
|
||||||
<p> Тут будут находится все ваши недописанные сообщения. Ждём когда вы будете готовы закончить их!</p>
|
<h1 class="d-inline-block mb-0">MailmanPet</h1>
|
||||||
<ul class="message">
|
</a>
|
||||||
<li> <b>Ulgtu-U@mailmanpet.ru</b> / <b>27.02.2015</b> / УлГТУ (Ульяновский государственный технический университет). Вы отчислены, не приходите сюда больше </li>
|
</div>
|
||||||
<li> <b>Buz-kolbas@mailmanpet.ru</b> / <b>17.10.2018</b> / Купите наш бузулукский колбас, он придаёт силы и веры в будущее </li>
|
</div>
|
||||||
<li> <b>Vk-com@mailmanpet.ru</b> / <b>22.05.2021</b> / У вас новое сообщение ВКонтакте </li>
|
</header>
|
||||||
<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>
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||||
<li> <b>Samokat_dostavka@mailmanpet.ru</b> / <b>02.06.2022</b> / Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня </li>
|
<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>
|
||||||
|
</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>
|
</ul>
|
||||||
</body>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<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="#" 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>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="bg-dark text-white text-center py-3">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 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>
|
</html>
|
||||||
155
page4.html
155
page4.html
@@ -1,24 +1,145 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<title> MailmanPet </title>
|
<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">
|
<link rel="icon" href="PostmanPat.png" type="image/png">
|
||||||
<link rel="stylesheet" href="style.css"/>
|
<!-- Подключение 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>
|
</head>
|
||||||
<body>
|
<body class="bg-light">
|
||||||
<h1>MailmanPet</h1>
|
<header class="bg-primary text-white text-center py-3 border-bottom border-4 border-dark">
|
||||||
<p>
|
<div class="container">
|
||||||
<a href="index.html"> <img class="imgback" src="back.png"> </a>
|
<div class="d-flex align-items-center justify-content-center">
|
||||||
</p>
|
<a href="index.html" class="text-decoration-none text-white">
|
||||||
<h2>Спам</h2>
|
<img src="PostmanPat.png" alt="Логотип" width="50" class="me-2">
|
||||||
<p> Тут будут находится все нежелательные сообщения. Наши алгоритмы посчитали их вредоносными или бесполезными.</p>
|
<h1 class="d-inline-block mb-0">MailmanPet</h1>
|
||||||
<ul class="message">
|
</a>
|
||||||
<li> <b>Ulgtu-U@mailmanpet.ru</b> / <b>27.02.2015</b> / УлГТУ (Ульяновский государственный технический университет). Вы отчислены, не приходите сюда больше </li>
|
</div>
|
||||||
<li> <b>Buz-kolbas@mailmanpet.ru</b> / <b>17.10.2018</b> / Купите наш бузулукский колбас, он придаёт силы и веры в будущее </li>
|
</div>
|
||||||
<li> <b>Vk-com@mailmanpet.ru</b> / <b>22.05.2021</b> / У вас новое сообщение ВКонтакте </li>
|
</header>
|
||||||
<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>
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||||
<li> <b>Samokat_dostavka@mailmanpet.ru</b> / <b>02.06.2022</b> / Доставка еды самокат. У вас есть персональный купон на скидку: JPCHSC. Купон активен 3 дня </li>
|
<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>
|
||||||
|
</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>
|
</ul>
|
||||||
</body>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<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="#" 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>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="bg-dark text-white text-center py-3">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 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>
|
</html>
|
||||||
15
spam.js
15
spam.js
@@ -1,15 +0,0 @@
|
|||||||
const BASE_URL = 'http://localhost:3000/spam';
|
|
||||||
|
|
||||||
export async function fetchSpam() {
|
|
||||||
const res = await fetch(BASE_URL);
|
|
||||||
return res.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function addSpam(mail) {
|
|
||||||
const res = await fetch(BASE_URL, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify(mail),
|
|
||||||
});
|
|
||||||
return res.json();
|
|
||||||
}
|
|
||||||
118
style.css
Normal file
118
style.css
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
body {
|
||||||
|
background-color:bisque;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button{
|
||||||
|
background-color:#5f80ec;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border:2px solid #1c2584;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
.abstract{
|
||||||
|
margin: auto;
|
||||||
|
padding: 3px;
|
||||||
|
border:4px solid #1c2584;
|
||||||
|
width: 275px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
a:link, a:visited{
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.imgback{
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message li {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-color: #5f80ec;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
border:4px solid #1c2584;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLinks {
|
||||||
|
background: #4756f5;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
.navLinks ul {
|
||||||
|
padding: 20;
|
||||||
|
}
|
||||||
|
.navLinks ul li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #5763f1;
|
||||||
|
width: 160px;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.dropdown:hover .dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.dropdown-content a {
|
||||||
|
padding: 12px 16px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background-color: #f5cf8e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
clear: both;
|
||||||
|
background: #333;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
|
bottom: 0px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Мобильное устройство (ширина области отображения от 0 до 400px)*/
|
||||||
|
@media only screen and (max-width: 400px) {
|
||||||
|
body {
|
||||||
|
background-color: #070707;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
/* Планшет (ширина области отображения от 401 до 960px)*/
|
||||||
|
@media only screen and (min-width: 401px) and (max-width: 960px) {
|
||||||
|
body {
|
||||||
|
background-color: #0956fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
BIN
telegram.png
Normal file
BIN
telegram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
41
tov.html
Normal file
41
tov.html
Normal 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
Отчёт1.docx
BIN
Отчёт1.docx
Binary file not shown.
BIN
Отчёт2.docx
Normal file
BIN
Отчёт2.docx
Normal file
Binary file not shown.
BIN
Отчёт3.docx
Normal file
BIN
Отчёт3.docx
Normal file
Binary file not shown.
BIN
Отчёт5.docx
BIN
Отчёт5.docx
Binary file not shown.
Reference in New Issue
Block a user