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

2025-05-24 02:26:27 +04:00
parent ae1c947e3e
commit f8270722cc
12 changed files with 329 additions and 35 deletions
--- a/Lab/author.html
+++ b/Lab/author.html
@@ -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.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>
+
+    <!-- Информация об авторе -->
+    <main class="container mt-5">
+        <div class="row">
+            <div class="col-md-4 text-center">
+                <img class="img-fluid rounded" src="img/ХаяоМиядзаки.png" alt="Хаяо Миядзаки">
+            </div>
+            <div class="col-md-8">
+                <h3>Автор: Хаяо Миядзаки</h3>
+                <p>Посвящено автору и т.п. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quod harum
+                    voluptate architecto, sit eaque, voluptatibus excepturi deleniti consequatur porro vero dolorem dolorum
+                    vitae laborum libero et veritatis sapiente a?</p>
+            </div>
+        </div>
+    </main>
+
+    <!-- Футер -->
+    <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>
--- a/Lab/data.json
+++ b/Lab/data.json
--- a/Lab/src/App.jsx
+++ b/Lab/src/App.jsx
@@ -1,8 +1,13 @@
 import React, { useState, useEffect } from "react";
+import { Routes, Route } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
-import BookForm from "./components/BookForm";
-import BookList from "./components/BookList";
+import Home from "./components/Home";
+import News from "./components/News";
+import Manga from "./components/Manga";
+import Author from "./components/Author";
+import Reading from "./components/Reading";
+import Account from "./components/Account";
 import data from "../data.json"; // Используем только для авторов и статусов

 function App() {
@@ -58,21 +63,29 @@ function App() {
    <>
      <Navbar />
      <main className="container py-4">
-        <h1 className="mb-4">Книги</h1>
-        <BookForm
-          authors={authors}
-          statuses={statuses}
-          onSubmit={editingBook ? updateBook : addBook}
-          editingBook={editingBook}
-          onCancel={() => setEditingBook(null)}
-        />
-        <BookList
-          books={books}
-          authors={authors}
-          statuses={statuses}
-          onEdit={setEditingBook}
-          onDelete={deleteBook}
+        <Routes>
+        <Route
+          path="/"
+          element={
+            <Home
+              books={books}
+              authors={authors}
+              statuses={statuses}
+              editingBook={editingBook}
+              onAdd={addBook}
+              onEdit={updateBook}
+              onDelete={deleteBook}
+              onCancel={() => setEditingBook(null)}
+              setEditingBook={setEditingBook}
+            />
+          }
        />
+        <Route path="/news" element={<News />} />
+        <Route path="/manga/:id" element={<Manga />} />
+        <Route path="/author/:id" element={<Author />} />
+        <Route path="/reading/:id" element={<Reading />} />
+        <Route path="/account" element={<Account />} />
+        </Routes>
      </main>
      <Footer />
    </>
--- a/Lab/src/components/Account.jsx
+++ b/Lab/src/components/Account.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+
+export default function Account() {
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setSubmitted(true);
+  };
+
+  return (
+    <div className="container my-5">
+      <div className="row justify-content-center">
+        <div className="col-md-6 bg-secondary p-4 rounded bg-custom-dark">
+          <form id="loginForm" onSubmit={handleSubmit}>
+            <h2 className="text-center mb-4">
+              <i className="bi bi-person-circle me-2"></i>Вход в систему
+            </h2>
+
+            <div className="mb-3">
+              <label htmlFor="number" className="form-label">
+                <i className="bi bi-telephone-fill me-2"></i>Номер телефона
+              </label>
+              <input
+                type="tel"
+                className="form-control"
+                id="number"
+                name="number_acc"
+                placeholder="+7 (___) ___-__-__"
+                required
+                value={phone}
+                onChange={e => setPhone(e.target.value)}
+              />
+            </div>
+
+            <div className="mb-4">
+              <label htmlFor="password" className="form-label">
+                <i className="bi bi-lock-fill me-2"></i>Пароль
+              </label>
+              <input
+                type="password"
+                className="form-control"
+                id="password"
+                name="password_acc"
+                placeholder="Пароль"
+                required
+                minLength="4"
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
+            </div>
+
+            <div className="d-grid">
+              <button type="submit" className="btn btn-warning">
+                <i className="bi bi-box-arrow-in-right me-2"></i>Войти
+              </button>
+            </div>
+            {submitted && (
+              <div className="mt-3 alert alert-info p-2">
+                <i className="bi bi-info-circle me-2"></i>Проверка формы: пока без логики!
+              </div>
+            )}
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/Lab/src/components/Author.jsx
+++ b/Lab/src/components/Author.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+export default function Author() {
+  return (
+    <div className="container mt-5">
+      <div className="row">
+        <div className="col-md-4 text-center">
+          <img
+            className="img-fluid rounded"
+            src="../img/ХаяоМиядзаки.png" // Используй нужную тебе картинку!
+            alt="Суи Исида"
+          />
+        </div>
+        <div className="col-md-8 text-color-light">
+          <h3>Автор: Фусэ </h3>
+          <p>
+          Известен произведением «О моём перерождении в слизь». 
+          В нём автор объединяет элементы западных и восточных ролевых игр и использует идею жанра «исекай» о перерождении или призыве в другой мир.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/Lab/src/components/BookCard.jsx
+++ b/Lab/src/components/BookCard.jsx
@@ -1,15 +1,18 @@
 import React from "react";
 import StatusLabel from "./StatusLabel";
+import { Link } from "react-router-dom";

 function BookCard({ book, authorName, statusName, onEdit, onDelete }) {
  return (
    <div className="card mb-3 w-100" style={{ maxWidth: "450px", margin: "0 auto" }}>
-      <img
-        src={book.cover || "https://placehold.co/200x300"}
-        className="card-img-top shadow mt-2 mb-3"
-        alt="Обложка книги"
-        style={{ maxHeight: "300px", objectFit: "contain" }}
-      />
+        <Link to={`/manga/${book.id}`}>
+        <img
+            src={book.cover || "https://placehold.co/200x300"}
+            className="card-img-top shadow mt-2 mb-3"
+            alt="Обложка книги"
+            style={{ maxHeight: "300px", objectFit: "contain" }}
+        />
+      </Link>
      <div className="card-body">
        <h5 className="card-title">{book.title}</h5>
        <p className="card-text">{book.description}</p>
--- a/Lab/src/components/Home.jsx
+++ b/Lab/src/components/Home.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import BookForm from "./BookForm";
+import BookList from "./BookList";
+
+export default function Home({
+  books,
+  authors,
+  statuses,
+  editingBook,
+  onAdd,
+  onEdit,
+  onDelete,
+  onCancel,
+  setEditingBook
+}) {
+  return (
+    <>
+      <h1 className="mb-4">Книги</h1>
+      <BookForm
+        authors={authors}
+        statuses={statuses}
+        onSubmit={editingBook ? onEdit : onAdd}
+        editingBook={editingBook}
+        onCancel={onCancel}
+      />
+      <BookList
+        books={books}
+        authors={authors}
+        statuses={statuses}
+        onEdit={setEditingBook}
+        onDelete={onDelete}
+      />
+    </>
+  );
+}
--- a/Lab/src/components/Manga.jsx
+++ b/Lab/src/components/Manga.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function Manga() {
+  return (
+    <main className="container my-5 flex-grow-1">
+      <div className="row justify-content-center">
+        <div className="col-md-8 text-center">
+          <figure className="figure">
+            <img
+              src="/img/заглушка.jpg"
+              className="figure-img img-fluid rounded"
+              alt="Токийский Гуль"
+              style={{ maxHeight: 350, objectFit: "contain" }}
+            />
+            <figcaption className="figure-caption text-light">
+            О моём перерождении в слизь
+            </figcaption>
+          </figure>
+          <p className="mt-4 text-color-light">
+          Обычный служащий финансовой компании Сатору Миками погибает, защищая коллегу от грабителя с ножом. 
+          После смерти Сатору попадает в фэнтезийный мир, в котором он предстаёт в виде комка слизи средних размеров по имени Римуру, наделённой немалым разумом. 
+          Отныне Римуру будет жить в мире, полном разных рас, в надежде построить однажды страну, где к каждой расе будут относиться одинаково.
+          </p>
+          <div className="d-flex justify-content-center gap-3 mt-3">
+            <Link to="/author/1" className="btn btn-primary">
+              <i className="bi bi-person-lines-fill me-2"></i>Про автора
+            </Link>
+            <Link to="/reading/1" className="btn btn-success">
+              <i className="bi bi-book me-2"></i>Читать
+            </Link>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}   
--- a/Lab/src/components/Navbar.jsx
+++ b/Lab/src/components/Navbar.jsx
@@ -49,10 +49,8 @@ export default function Navbar() {
            </ul>
          </li>
        </ul>
-        
-        <Link to="/account" className="btn btn-outline-warning">
-          Вход
-        </Link>
+        <Link to="/news" className="btn btn-outline-warning">Новости</Link>
+        <Link to="/account" className="btn btn-outline-warning">Вход</Link>
      </div>
    </nav>
  );
--- a/Lab/src/components/News.jsx
+++ b/Lab/src/components/News.jsx
@@ -0,0 +1,14 @@
+export default function News() {
+    return (
+      <div className="container-news mt-4">
+        <div className="card">
+          <img src="/img/новость.jpg" className="card-img-top" alt="Новость" />
+          <div className="card-body">
+            <h5 className="card-title">Новость</h5>
+            <p className="card-text">Lorem ipsum dolor sit amet...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  
--- a/Lab/src/components/Reading.jsx
+++ b/Lab/src/components/Reading.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+export default function Reading() {
+  const { id } = useParams(); // id книги, если нужно что-то динамическое
+
+  // Пример массив страниц — можешь заменить на свой массив или получать из API:
+  const pages = [
+    "/img/SL1.png",
+    "/img/SL2.png",
+    // Можно добавить другие страницы
+  ];
+
+  return (
+    <div className="container mt-5 flex-grow-1">
+      <div className="row">
+        <div className="col-12 text-center">
+          <h3>Читать мангу...</h3>
+          <div className="d-flex justify-content-center">
+            {pages.map((src, idx) => (
+              <img
+                className="img-reading mx-2"
+                src={src}
+                alt={`Манга страница ${idx + 1}`}
+                key={src}
+                style={{ maxWidth: 350, maxHeight: 500 }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/Lab/style.css
+++ b/Lab/style.css
@@ -49,4 +49,8 @@ footer {
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 1rem;
+}
+
+.text-color-light {
+    color: aliceblue;
 }