2 Commits
lab_5 ... lab2

Author SHA1 Message Date
2de0c141aa Загрузить файлы в «/» 2025-03-15 11:34:19 +04:00
9a470428fe Загрузить файлы в «/» 2025-03-15 11:32:02 +04:00
23 changed files with 429 additions and 603 deletions

26
App.jsx
View File

@@ -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>
);
}

View File

@@ -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>
);
}

File diff suppressed because one or more lines are too long

52
db.json
View File

@@ -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"
}
}
]
}

View File

@@ -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&nbsp;123&nbsp;456&nbsp;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>
);
}

BIN
genres.js

Binary file not shown.

View File

@@ -1,19 +1,71 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Почтовый клиент</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="node_modules/bootstrap-icons/icons/PostmanPat.svg" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="/style.min.css" rel="stylesheet" />
<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"/>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "PostmanPat.png" alt="Логотип" width="50">
</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>
</ul>
</nav>
</div>
<div class="content">
<p> <strong>Почтальон пэт - это многофункциональная иновационная современная почта,
которая может сравниться с привычными вам остальными почтовыми клиентами. </strong> </p>
<h3> Добро пожаловать! </h3>
<div class="abstract">
<p> Что я могу? </p>
<ul>
<li> Отправить письмо </li>
<li> Прочитать письмо </li>
<li> Посмотреть черновики </li>
</ul>
<div class="button">
<a href="index.html"> Вход </a>
</div>
<div class="button">
<a href="index.html"> Регистрация </a>
</div>
</div>
</div>
<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>
</div>
</body>
</html>

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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" });

View File

@@ -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>
);

View File

@@ -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>
);
}

View File

@@ -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"
}
}

View File

@@ -1,25 +1,65 @@
<!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"/>
</head>
<body>
<h1>MailmanPet</h1>
<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>
</ul>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "../PostmanPat.png" alt="Логотип" width="50">
</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>
</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>
</ul>
</div>
<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>
</div>
</body>
</html>

View File

@@ -1,24 +1,63 @@
<!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"/>
</head>
<body>
<h1>MailmanPet</h1>
<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>
</ul>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "PostmanPat.png" alt="Логотип" width="50">
</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>
</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>
</ul>
</div>
<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>
</div>
</body>
</html>

View File

@@ -1,24 +1,63 @@
<!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"/>
</head>
<body>
<h1>MailmanPet</h1>
<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>
</ul>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "PostmanPat.png" alt="Логотип" width="50">
</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>
</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>
</ul>
</div>
<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>
</div>
</body>
</html>

View File

@@ -1,24 +1,63 @@
<!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"/>
</head>
<body>
<h1>MailmanPet</h1>
<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>
</ul>
<div class="header">
<div class="logo">
<a href = "index.html">
<img src = "PostmanPat.png" alt="Логотип" width="50">
</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>
</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>
</ul>
</div>
<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>
</div>
</body>
</html>

15
spam.js
View File

@@ -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();
}

150
style.css Normal file
View File

@@ -0,0 +1,150 @@
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;
}
.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)*/
@media only screen and (min-width: 401px) and (max-width: 960px) {
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%);
}
}

Binary file not shown.

BIN
Отчёт2.docx Normal file

Binary file not shown.

Binary file not shown.