MorozovDanil/InternetProg_MorozovDV_PIbd-22
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

готова к сдаче

Browse Source
This commit is contained in:
MorozovDanil
2025-05-24 01:30:46 +04:00
parent 6988cf7ef6
commit ae1c947e3e
8 changed files with 325 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
Lab/account.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Личный кабинет</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<!-- маска на телефон + звездочки на пароль + длина пароля -->
<body class="bg-dark text-light">
<header class=" py-3 bg-custom-dark">
<div class="container d-flex align-items-center">
<a href="index.html" class="me-3">
<img src="../img/manga.png" alt="ЛОГО" height="50" />
</a>
<h1 class="h5 mb-0 text-light">Личный кабинет</h1>
</div>
</header>
<main class="container my-5">
<div class="row justify-content-center">
<div class="col-md-6 bg-secondary p-4 rounded bg-custom-dark">
<form id="loginForm">
<h2 class="text-center mb-4">
<i class="bi bi-person-circle me-2"></i>Вход в систему
</h2>
<div class="mb-3">
<label for="number" class="form-label">
<i class="bi bi-telephone-fill me-2"></i>Номер телефона
</label>
<input type="tel" class="form-control" id="number" name="number_acc" placeholder="+7 (___) ___-__-__" required>
</div>
<div class="mb-4">
<label for="password" class="form-label">
<i class="bi bi-lock-fill me-2"></i>Пароль
</label>
<input type="password" class="form-control" id="password" name="password_acc" placeholder="Пароль" required minlength="4">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-warning">
<i class="bi bi-box-arrow-in-right me-2"></i>Войти
</button>
</div>
</form>
</div>
</div>
</main>
<footer class="text-center py-4 text-light mt-5 bg-custom-dark">
<p><i class="bi bi-journal-text me-2"></i>Все права защищены, 2025</p>
</footer>
<!-- маска + карточка пользователя -->
<script type="module" src="/src/main.js"></script>
</body>
</html>

12
Lab/data.json
View File

File diff suppressed because one or more lines are too long

76
Lab/manga.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Манга</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
</head>
<body class="bg-dark text-light d-flex flex-column min-vh-100">
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
<a class="navbar-brand" href="index.html">
<img src="img/manga.png" alt="ЛОГО" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-3" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
</ul>
<a href="account.html" class="btn btn-outline-warning">Вход</a>
</div>
</nav>
<!-- Контент -->
<main class="container my-5 flex-grow-1">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<figure class="figure">
<img src="img/заглушка.jpg" class="figure-img img-fluid rounded" alt="Заглушка">
<figcaption class="figure-caption text-light">Заглушка</figcaption>
</figure>
<p class="mt-4">Здесь будет сама инфа о манге</p>
<div class="d-flex justify-content-center gap-3 mt-3">
<a href="author.html" class="btn btn-primary"><i class="bi bi-person-lines-fill me-2"></i>Про автора</a>
<a href="reading.html" class="btn btn-success"><i class="bi bi-book me-2"></i>Читать</a>
</div>
</div>
</div>
</main>
<footer class="bg-custom-dark text-light text-center py-4">
<div class="container">
<p>Спасибо, что посетили наш сайт, если возникли вопросы, обращайтесь к нам на почту
<a href="mailto:manga@manga.scom" class="text-warning">manga@manga.scom</a>
</p>
<p>Если вас интересуют наши соц.сети, то вот они:</p>
<div class="d-flex justify-content-center">
<a href="https://vk.com/ded_moroz1509" class="me-3">
<img src="img/VK0.png" alt="VK" height="30">
</a>
</div>
</div>
</footer>
<!-- JS Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- Твой модуль JS -->
<script type="modal" src="/html/src/main.js"></script>
</body>
</html>

62
Lab/news.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Новость</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-dark">
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
<a class="navbar-brand" href="index.html">
<img src="img/manga.png" alt="ЛОГО" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-3" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
</ul>
<a href="account.html" class="btn btn-outline-warning">Вход</a>
</div>
</nav>
<div class="container container-news mt-4">
<div class="row">
<div class="col-12">
<div class="card">
<img src="img/новость.jpg" class="card-img-top" alt="Новость">
<div class="card-body">
<h5 class="card-title">Новость</h5>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae exercitationem eligendi error.
Architecto voluptatum eaque, nostrum ea a consequuntur, deleniti dolor provident sequi dicta culpa
magnam delectus amet distinctio autem?
</p>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-custom-dark text-center py-4 text-light mt-5 bg-custom-dark">
<p><i class="bi bi-journal-text me-2"></i>Все права защищены, 2025</p>
</footer>
<!-- Подключаем Bootstrap JS и Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

10
Lab/package.json
View File

@@ -4,10 +4,12 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
"dev": "npm-run-all --parallel start-server vite",
"start-server": "json-server ./data.json -p 5174",
"vite": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.7.2",

61
Lab/reading.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Читать мангу...</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
</head>
<body class="bg-dark text-light">
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
<a class="navbar-brand" href="index.html">
<img src="img/manga.png" alt="ЛОГО" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Переключить навигацию">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ms-3" id="navbarNavDropdown">
<ul class="navbar-nav me-auto">
</ul>
<a href="account.html" class="btn btn-outline-warning">Вход</a>
</div>
</nav>
<!-- Чтение манги -->
<div class="container mt-5">
<div class="row">
<div class="col-12 text-center">
<h3>Читать мангу...</h3>
<div class="d-flex justify-content-center">
<img class="img-reading mx-2" src="img/SL1.png" alt="Манга страница 1">
<img class="img-reading mx-2" src="img/SL2.png" alt="Манга страница 2">
</div>
</div>
</div>
</div>
<!-- Футер -->
<footer class="bg-custom-dark text-light text-center py-4 mt-5">
<p>Спасибо, что посетили наш сайт, если возникли вопросы, обращайтесь к нам на почту <a href="mailto:manga@manga.scom" class="text-warning">manga@manga.scom</a></p>
<p>Если вас интересуют наши соц.сети, то вот они:</p>
<div class="d-flex justify-content-center">
<a href="https://vk.com/ded_moroz1509" class="me-3">
<img src="img/VK0.png" alt="VK" height="30">
</a>
<!-- Добавить другие иконки соцсетей здесь -->
</div>
</footer>
<!-- JS Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

59
Lab/src/App.jsx
View File

@@ -1,36 +1,57 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import BookForm from "./components/BookForm";
import BookList from "./components/BookList";
// Если импортируешь данные так, иначе – через fetch/useEffect, или напрямую в useState.
import data from "../data.json"; // { authors, statuses, books }
import data from "../data.json"; // Используем только для авторов и статусов
function App() {
// Инициализация начальных данных
const [books, setBooks] = useState(data.books);
const [books, setBooks] = useState([]);
const [authors] = useState(data.authors);
const [statuses] = useState(data.statuses);
const [editingBook, setEditingBook] = useState(null);
// Добавление книги
// Загрузка книг с сервера
useEffect(() => {
fetch("http://localhost:5174/books")
.then(res => res.json())
.then(data => setBooks(data));
}, []);
// Добавить книгу
const addBook = (book) => {
setBooks([
...books,
{ ...book, id: Math.random().toString(36).slice(2, 6) } // генерация id (можно лучше, если нужно)
]);
fetch("http://localhost:5174/books", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(book)
}).then(() => {
fetch("http://localhost:5174/books")
.then(res => res.json())
.then(data => setBooks(data));
});
};
// Редактирование книги
const updateBook = (updatedBook) => {
setBooks(books.map((b) => (b.id === updatedBook.id ? updatedBook : b)));
setEditingBook(null);
};
// Удаление книги
// Удалить книгу
const deleteBook = (id) => {
setBooks(books.filter((b) => b.id !== id));
fetch(`http://localhost:5174/books/${id}`, { method: "DELETE" })
.then(() => {
fetch("http://localhost:5174/books")
.then(res => res.json())
.then(data => setBooks(data));
});
};
// Обновить книгу
const updateBook = (book) => {
fetch(`http://localhost:5174/books/${book.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(book)
}).then(() => {
fetch("http://localhost:5174/books")
.then(res => res.json())
.then(data => setBooks(data));
});
};
return (

1
Lab/src/components/Navbar.jsx
View File

@@ -49,6 +49,7 @@ export default function Navbar() {
</ul>
</li>
</ul>
<Link to="/account" className="btn btn-outline-warning">
Вход
</Link>