отчет маршруты

отчет6
доп
2025-05-29 03:34:27 +04:00 · 2025-05-28 19:49:57 +04:00 · 2025-05-27 15:39:50 +04:00 · 2025-05-27 11:38:59 +04:00 · 2025-05-24 10:45:37 +04:00 · 2025-05-24 10:42:15 +04:00
47 changed files with 7147 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,54 @@
+# ---> VisualStudioCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+# Зависимости Node.js
+/node_modules/
+
+# Результаты сборки Vite
+/dist/
+
+# Логи
+npm-debug.log*
+yarn-debug.log*
+pnpm-debug.log*
+*.log
+
+# Файлы окружения
+.env
+.env.*.local
+
+# Кеши
+/.cache/
+.vite/
+
+# IDE и редакторы
+.vscode/
+.idea/
+/*.sublime-workspace
+/*.sublime-project
+
+# Системные файлы
+.DS_Store
+Thumbs.db
+
+# Отчеты об покрытии тестами
+/coverage/
+
+# Порты и артефакты
+*.pid
+*.seed
+*.pid.lock
+
+# Прочее
+/.DS_Store
--- a/db.json
+++ b/db.json
@@ -0,0 +1,74 @@
+{
+  "products": [
+    {
+      "id": "1a54",
+      "name": "новый товар",
+      "price": 102,
+      "image": "images/fork.jpg"
+    },
+    {
+      "id": "f4f8",
+      "name": "товарчик",
+      "price": 111,
+      "image": "images/chery.jpg"
+    },
+    {
+      "id": "0fda",
+      "name": "ложка",
+      "price": 48,
+      "image": "images/bananas.jpg"
+    }
+  ],
+  "basket": [
+    {
+      "id": "0fda",
+      "name": "ложка",
+      "price": 48,
+      "image": "images/bananas.jpg"
+    }
+  ],
+  "favorites": [
+    {
+      "id": "1a54",
+      "name": "новый товар",
+      "price": 102,
+      "image": "images/fork.jpg"
+    }
+  ],
+  "orders": [
+    {
+      "id": "1",
+      "items": [
+        {
+          "name": "Ложка",
+          "image": "images/spoon.jpg"
+        },
+        {
+          "name": "Вилка",
+          "image": "images/fork.jpg"
+        }
+      ],
+      "status": "in-process"
+    },
+    {
+      "id": "2",
+      "items": [
+        {
+          "name": "Утюг",
+          "image": "images/iron.jpg"
+        },
+        {
+          "name": "Бананы",
+          "image": "images/bananas.jpg"
+        }
+      ],
+      "status": "completed"
+    }
+  ],
+  "profile": {
+    "id": 1,
+    "firstName": "Иван",
+    "lastName": "Иванов",
+    "image": "images/бананы.jpg"
+  }
+}
--- a/images/bananas.jpg
+++ b/images/bananas.jpg
--- a/images/chery.jpg
+++ b/images/chery.jpg
--- a/images/child.jpg
+++ b/images/child.jpg
--- a/images/fork.jpg
+++ b/images/fork.jpg
--- a/images/glasses.jpg
+++ b/images/glasses.jpg
--- a/images/gmail.png
+++ b/images/gmail.png
--- a/images/iron.jpg
+++ b/images/iron.jpg
--- a/images/knife.jpg
+++ b/images/knife.jpg
--- a/images/logo.jpg
+++ b/images/logo.jpg
--- a/images/masha.jpg
+++ b/images/masha.jpg
--- a/images/phone.png
+++ b/images/phone.png
--- a/images/screwdriver.jpg
+++ b/images/screwdriver.jpg
--- a/images/skateboard.jpg
+++ b/images/skateboard.jpg
--- a/images/spoon.jpg
+++ b/images/spoon.jpg
--- a/images/telegram.png
+++ b/images/telegram.png
--- a/images/vanadiy.jpg
+++ b/images/vanadiy.jpg
--- a/images/vk.png
+++ b/images/vk.png
--- a/images/бананы.jpg
+++ b/images/бананы.jpg
--- a/index.html
+++ b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+    <title>Интернет-магазин</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "ip",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "npm-run-all --parallel start json-server",
+    "start": "vite",
+    "build": "vite build",
+    "server": "http-server -p 3000 ./dist/",
+    "prod": "npm-run-all build server",
+    "lint": "eslint …",
+    "json-server": "json-server --watch db.json --port 5000"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "bootstrap": "5.3.3",
+    "bootstrap-icons": "1.11.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "8.56.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-prettier": "10.0.2",
+    "eslint-plugin-html": "8.1.2",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-prettier": "5.2.3",
+    "http-server": "14.1.1",
+    "json-server": "^1.0.0-beta.3",
+    "npm-run-all": "4.1.5",
+    "vite": "6.2.0"
+  }
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import MainPage from "./pages/MainPage";
+import BasketPage from "./pages/BasketPage";
+import FavoritesPage from "./pages/FavoritesPage";
+import OrderPage from "./pages/OrderPage";
+import AccountPage from "./pages/AccountPage";
+
+export default function App() {
+
+  return (
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/basket" element={<BasketPage />} />
+        <Route path="/favorites" element={<FavoritesPage />} />
+        <Route path="/orders" element={<OrderPage />} />
+        <Route path="/account" element={<AccountPage />} />
+      </Routes>
+      <Footer />
+    </BrowserRouter>
+  );
+}
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+export default function Footer() {
+  return (
+    <footer className="container mt-5">
+      <div className="bg-light p-4">
+        <h5>Помощь:</h5>
+        <div className="d-flex flex-wrap">
+          <div className="d-flex align-items-center me-4 mb-3">
+            <i className="bi bi-telephone-fill me-2"></i>
+            <a href="#" className="text-decoration-none text-dark">8 (800)-555-35-35</a>
+          </div>
+          <div className="d-flex align-items-center me-4 mb-3">
+            <img src="images/vk.png" alt="VK" className="me-2" style={{ width: 24, height: 24 }} />
+            <a href="https://vk.com/howmakesite_nn?from=search" target="_blank" className="text-decoration-none text-dark">vk.com</a>
+          </div>
+          <div className="d-flex align-items-center me-4 mb-3">
+            <img src="images/telegram.png" alt="Telegram" className="me-2" style={{ width: 24, height: 24 }} />
+            <a href="#" className="text-decoration-none text-dark">tg.me</a>
+          </div>
+          <div className="d-flex align-items-center mb-3">
+            <img src="images/gmail.png" alt="Gmail" className="me-2" style={{ width: 24, height: 24 }} />
+            <a href="mailto:ozon-zon-zon@mail.joke" className="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function Header() {
+  return (
+    <header>
+      <div className="d-block mt-3 ms-3">
+        <img src="images/logo.jpg" alt="Название магазина" className="me-3" style={{ width: 200, height: "auto" }} />
+        <Link to="/" className="text-decoration-none text-dark m-1">
+          <h1 className="display-4 h3 mt-3"><b>Название магазина</b></h1>
+        </Link>
+      </div>
+      <nav>
+        <div className="dropdown">
+          <button className="btn btn-primary dropdown-toggle ms-3" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+            Навигация
+          </button>
+          <ul className="dropdown-menu" aria-labelledby="navigationDropdown">
+            <li><Link className="dropdown-item d-flex justify-content-between align-items-center" to="/account">Личный кабинет<i className="bi bi-person-circle ms-2"></i></Link></li>
+            <li><Link className="dropdown-item d-flex justify-content-between align-items-center" to="/basket">Корзина<i className="bi bi-cart4 ms-2"></i></Link></li>
+            <li><Link className="dropdown-item d-flex justify-content-between align-items-center" to="/orders">Заказы<i className="bi bi-receipt ms-2"></i></Link></li>
+            <li><Link className="dropdown-item d-flex justify-content-between align-items-center" to="/favorites">Избранное<i className="bi bi-heart-fill ms-2"></i></Link></li>
+          </ul>
+        </div>
+      </nav>
+    </header>
+  );
+}
--- a/src/components/ProductCard.jsx
+++ b/src/components/ProductCard.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function ProductCard({ product, onEdit, onDelete, onAddToFavorites }) {
+  return (
+    <div className="col">
+      <div className="card h-100">
+        {product.image && (
+          <img src={product.image} className="card-img-top" alt={product.name} style={{ height: 300, objectFit: 'cover' }} />
+        )}
+        <div className="card-body">
+          <h5 className="card-title">{product.name}</h5>
+          <p className="card-text">Цена: {product.price} ₽</p>
+          <button className="btn btn-sm btn-outline-primary me-2" onClick={() => onEdit(product)}>Изменить</button>
+          <button className="btn btn-sm btn-outline-danger me-2" onClick={() => onDelete(product.id)}>Удалить</button>
+          <button className="btn btn-sm btn-outline-success" onClick={() => onAddToFavorites(product)}>
+            <i className="bi bi-heart"></i> В избранное
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/ProductForm.jsx
+++ b/src/components/ProductForm.jsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+
+export default function ProductForm({ initial, onSave, onCancel }) {
+  const [form, setForm] = useState({ name: '', price: '', image: '' });
+
+  useEffect(() => {
+    if (initial) {
+      setForm({
+        name: initial.name || '',
+        price: initial.price || '',
+        image: initial.image || ''
+      });
+    } else {
+      setForm({ name: '', price: '', image: '' });
+    }
+  }, [initial]);
+
+  const handleChange = e => setForm({ ...form, [e.target.name]: e.target.value });
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    onSave({ ...initial, name: form.name, price: Number(form.price), image: form.image });
+    setForm({ name: '', price: '', image: '' });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="card p-3 mb-4">
+      <div className="mb-2">
+        <label className="form-label">Название</label>
+        <input
+          name="name"
+          value={form.name}
+          onChange={handleChange}
+          required
+          className="form-control"
+        />
+      </div>
+      <div className="mb-2">
+        <label className="form-label">Цена</label>
+        <input
+          name="price"
+          value={form.price}
+          onChange={handleChange}
+          type="number"
+          required
+          className="form-control"
+        />
+      </div>
+      <div className="mb-2">
+        <label className="form-label">Ссылка на картинку</label>
+        <input
+          name="image"
+          value={form.image}
+          onChange={handleChange}
+          className="form-control"
+          placeholder="Например: images/glasses.jpg или https://example.com/photo.jpg"
+        />
+      </div>
+      {form.image && (
+        <div className="mb-2 text-center">
+          <img
+            src={form.image}
+            alt="Превью"
+            style={{ maxHeight: 120, objectFit: 'contain', maxWidth: "100%" }}
+          />
+        </div>
+      )}
+      <button type="submit" className="btn btn-primary mb-2" style={{ width: 'auto' }}>Сохранить</button>
+      <button type="button" className="btn btn-secondary" style={{ width: 'auto' }} onClick={onCancel}>Отмена</button>
+    </form>
+  );
+}
--- a/src/components/ProductList.jsx
+++ b/src/components/ProductList.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ProductCard from './ProductCard';
+
+export default function ProductList({ products, onEdit, onDelete, onAddToFavorites }) {
+  return (
+    <div className="row row-cols-1 row-cols-md-3 g-4">
+      {products.map(prod => (
+        <ProductCard
+          key={prod.id}
+          product={prod}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onAddToFavorites={onAddToFavorites}
+        />
+      ))}
+    </div>
+  );
+}
--- a/src/hooks/useBasket.jsx
+++ b/src/hooks/useBasket.jsx
@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+
+export default function useBasket() {
+  const [basket, setBasket] = useState([]);
+
+  useEffect(() => {
+    fetch('http://localhost:5000/basket')
+      .then(res => res.json())
+      .then(setBasket);
+  }, []);
+
+  const addToBasket = async (item) => {
+    const res = await fetch('http://localhost:5000/basket', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(item)
+    });
+    const newItem = await res.json();
+    setBasket([...basket, newItem]);
+  };
+
+  const removeFromBasket = async (id) => {
+    await fetch(`http://localhost:5000/basket/${id}`, { method: 'DELETE' });
+    setBasket(basket.filter(item => item.id !== id));
+  };
+
+  const clearBasket = async () => {
+    for (let item of basket) {
+      await fetch(`http://localhost:5000/basket/${item.id}`, { method: 'DELETE' });
+    }
+    setBasket([]);
+  };
+
+  return { basket, addToBasket, removeFromBasket, clearBasket };
+}
--- a/src/hooks/useFavorites.jsx
+++ b/src/hooks/useFavorites.jsx
@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+
+export default function useFavorites() {
+  const [favorites, setFavorites] = useState([]);
+
+  useEffect(() => {
+    fetch('http://localhost:5000/favorites')
+      .then(res => res.json())
+      .then(setFavorites);
+  }, []);
+
+  const addToFavorites = async (item) => {
+    const res = await fetch('http://localhost:5000/favorites', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(item)
+    });
+    const newItem = await res.json();
+    setFavorites([...favorites, newItem]);
+  };
+
+  const removeFromFavorites = async (id) => {
+    await fetch(`http://localhost:5000/favorites/${id}`, { method: 'DELETE' });
+    setFavorites(favorites.filter(item => item.id !== id));
+  };
+
+  return { favorites, addToFavorites, removeFromFavorites };
+}
--- a/src/hooks/useOrders.jsx
+++ b/src/hooks/useOrders.jsx
@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+
+export default function useOrders() {
+  const [orders, setOrders] = useState([]);
+
+  useEffect(() => {
+    fetch('http://localhost:5000/orders')
+      .then(res => res.json())
+      .then(setOrders);
+  }, []);
+
+  const addOrder = async (order) => {
+    const res = await fetch('http://localhost:5000/orders', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(order)
+    });
+    const newOrder = await res.json();
+    setOrders([...orders, newOrder]);
+  };
+
+  const inProcess = orders.filter(o => o.status === "in-process");
+  const completed = orders.filter(o => o.status === "completed");
+
+  return { orders, addOrder, inProcess, completed };
+}
--- a/src/hooks/useProducts.jsx
+++ b/src/hooks/useProducts.jsx
@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+export default function useProducts() {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    fetch('http://localhost:5000/products')
+      .then(res => res.json())
+      .then(setProducts);
+  }, []);
+
+  const add = async prod => {
+    const res = await fetch('http://localhost:5000/products', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(prod)
+    });
+    const newProd = await res.json();
+    setProducts([...products, newProd]);
+  };
+
+  const update = async prod => {
+    await fetch(`http://localhost:5000/products/${prod.id}`, {
+      method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(prod)
+    });
+    setProducts(products.map(p => p.id === prod.id ? prod : p));
+  };
+
+  const remove = async id => {
+    await fetch(`http://localhost:5000/products/${id}`, { method: 'DELETE' });
+    setProducts(products.filter(p => p.id !== id));
+  };
+
+  return { products, add, update, remove };
+}
--- a/src/hooks/useProfile.jsx
+++ b/src/hooks/useProfile.jsx
@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+export default function useProfile() {
+  const [profile, setProfile] = useState(null);
+
+  useEffect(() => {
+    fetch('http://localhost:5000/profile')
+      .then(res => res.json())
+      .then(setProfile);
+  }, []);
+
+  const updateProfile = async (newProfile) => {
+    // PATCH или PUT — по ситуации
+    const res = await fetch('http://localhost:5000/profile', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(newProfile)
+    });
+    const updated = await res.json();
+    setProfile(updated);
+  };
+
+  return { profile, updateProfile };
+}
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "bootstrap/dist/css/bootstrap.min.css";
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+
+const container = document.getElementById("root");
+createRoot(container).render(<App />);
--- a/src/pages/AccountPage.jsx
+++ b/src/pages/AccountPage.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import useProfile from "../hooks/useProfile";
+
+export default function AccountPage() {
+  const { profile, updateProfile } = useProfile();
+  const [showEdit, setShowEdit] = useState(false);
+  const [form, setForm] = useState(null);
+
+  if (!profile) {
+    return <div className="text-center">Загрузка...</div>;
+  }
+
+  const handleEdit = () => {
+    setForm(profile); 
+    setShowEdit(true);
+  };
+
+  const handleChange = e => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSave = async e => {
+    e.preventDefault();
+    await updateProfile(form);
+    setShowEdit(false);
+  };
+
+  const handleCancel = () => setShowEdit(false);
+
+  return (
+    <div className="container mt-5">
+      <div className="card text-center mx-auto" style={{ maxWidth: 400, maxHeight: 400 }}>
+        <img src={profile.image} className="card-img-top" alt="Профиль" style={{ width: "100%", height: 300, objectFit: "cover" }} />
+        <div className="card-body">
+          <h3 className="card-title">{profile.firstName} {profile.lastName}</h3>
+          <button className="btn btn-primary" onClick={handleEdit}>
+            <i className="bi bi-pencil"></i> Редактировать профиль
+          </button>
+        </div>
+      </div>
+
+      {showEdit && (
+        <div className="modal d-block" tabIndex="-1" style={{ background: 'rgba(0,0,0,0.3)' }}>
+          <div className="modal-dialog">
+            <div className="modal-content">
+              <form onSubmit={handleSave}>
+                <div className="modal-header">
+                  <h5 className="modal-title">Редактировать профиль</h5>
+                  <button type="button" className="btn-close" onClick={handleCancel}></button>
+                </div>
+                <div className="modal-body">
+                  <div className="mb-2">
+                    <label className="form-label">Имя</label>
+                    <input className="form-control" name="firstName" value={form.firstName} onChange={handleChange} required />
+                  </div>
+                  <div className="mb-2">
+                    <label className="form-label">Фамилия</label>
+                    <input className="form-control" name="lastName" value={form.lastName} onChange={handleChange} required />
+                  </div>
+                  <div className="mb-2">
+                    <label className="form-label">URL аватара</label>
+                    <input className="form-control" name="image" value={form.image} onChange={handleChange} />
+                  </div>
+                </div>
+                <div className="modal-footer">
+                  <button type="submit" className="btn btn-success">Сохранить</button>
+                  <button type="button" className="btn btn-secondary" onClick={handleCancel}>Отмена</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/pages/BasketPage.jsx
+++ b/src/pages/BasketPage.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import useBasket from "../hooks/useBasket";
+import useOrders from "../hooks/useOrders";
+
+export default function BasketPage() {
+
+    const { basket, removeFromBasket, clearBasket } = useBasket();
+    const { addOrder } = useOrders();
+
+    const handleCheckout = () => {
+        if (basket.length === 0) {
+            alert("Корзина пуста");
+            return;
+        }
+        // Сформируем заказ
+        addOrder({
+            items: basket,
+            status: "in-process"
+        });
+        clearBasket(); // Очищаем корзину
+        alert("Заказ оформлен!");
+    };
+
+    return (
+        <main className="container d-flex justify-content-center align-items-center" style={{ minHeight: "60vh" }}>
+            <div className="card p-4 shadow" style={{ minWidth: "60vw" }}>
+                <h2 className="text-center">Корзина</h2>
+                <ul className="list-group list-group-flush">
+                    {basket.map(item => (
+                        <li className="list-group-item d-flex align-items-center" key={item.id}>
+                            <img src={item.image} alt={item.name} style={{ width: 100, height: 100 }} className="me-3" />
+                            {item.name} <span className="ms-auto">{item.price} руб.</span>
+                            <button onClick={() => removeFromBasket(item.id)} className="btn btn-danger ms-2">Удалить</button>
+                        </li>
+                    ))}
+                </ul>
+                <div className="text-center mt-3">
+                    <button className={`btn w-100 ${basket.length === 0 ? "btn-secondary" : "btn-success"}`} onClick={handleCheckout}>
+                        Оплатить {}
+                    </button>
+                </div>
+            </div>
+        </main>
+    );
+}
--- a/src/pages/FavoritesPage.jsx
+++ b/src/pages/FavoritesPage.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import useBasket from "../hooks/useBasket";
+import useFavorites from "../hooks/useFavorites";
+
+export default function FavoritesPage() {
+  const { favorites, removeFromFavorites } = useFavorites();
+  const { basket, addToBasket } = useBasket();
+
+  const handleAddToBasket = (item) => {
+    addToBasket(item);
+    removeFromFavorites(item.id);
+  };
+
+  return (
+    <div className="container mt-4">
+      <h2 className="mb-4">Избранное</h2>
+      <div className="row row-cols-1 row-cols-md-2 g-4">
+        {favorites.map(item => (
+          <div className="col" key={item.id}>
+            <div className="card mx-auto" style={{ width: "70%" }}>
+              <img src={item.image} className="card-img-top" alt={item.name} style={{ width: "100%", height: 300, objectFit: "cover" }} />
+              <div className="card-body text-center">
+                <h5 className="card-title">{item.name}</h5>
+                <p className="card-text">{item.price}</p>
+                <button className="btn btn-success me-2" onClick={() => handleAddToBasket(item)}>В корзину</button>
+                <button onClick={() => removeFromFavorites(item.id)} className="btn btn-danger">Удалить</button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import useProducts from "../hooks/useProducts";
+import useFavorites from "../hooks/useFavorites";
+import ProductList from "../components/ProductList";
+import ProductForm from "../components/ProductForm";
+
+export default function MainPage() {
+  const { products, add, update, remove } = useProducts();
+  const { favorites, addToFavorites } = useFavorites();
+  const [editing, setEditing] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+
+  const handleAdd = () => { setEditing(null); setShowForm(true); };
+  const handleEdit = prod => { setEditing(prod); setShowForm(true); };
+  const handleDelete = id => remove(id);
+  const handleSave = prod => {
+    editing ? update({ ...prod, id: editing.id }) : add(prod);
+    setShowForm(false);
+  };
+  const handleCancel = () => setShowForm(false);
+
+  const handleAddToFavorites = product => {
+    if (!favorites.some(fav => fav.id === product.id)) {
+      addToFavorites(product);
+    }
+    else alert('Товар уже в избранном!');
+  };
+
+  return (
+    <main className="container my-4">
+      <button className="btn btn-success mb-3" onClick={handleAdd}>Добавить товар</button>
+      {showForm && <ProductForm initial={editing} onSave={handleSave} onCancel={handleCancel} />}
+      <h2 className="text-center my-3">Рекомендуемые товары:</h2>
+      <ProductList
+        products={products}
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+        onAddToFavorites={handleAddToFavorites}
+      />
+    </main>
+  );
+}
--- a/src/pages/OrderPage.jsx
+++ b/src/pages/OrderPage.jsx
@@ -0,0 +1,58 @@
+import React from "react";
+import useOrders from "../hooks/useOrders";
+
+export default function OrderPage() {
+    const { inProcess, completed } = useOrders();
+
+    return (
+        <div className="container mt-4">
+            <h1 className="text-center">Заказы</h1>
+            <div className="row">
+                <div className="col-md-6">
+                    <div className="card shadow-sm">
+                        <div className="card-header bg-warning text-dark">
+                            <h2 className="h5 m-0">В процессе</h2>
+                        </div>
+                        <div className="card-body">
+                            {inProcess.length === 0 ? (
+                                <div className="text-center text-muted">Нет заказов</div>
+                            ) : (
+                                inProcess.map(order => (
+                                    <ul className="list-group list-group-flush mb-3" key={order.id}>
+                                        {order.items.map((item, idx) => (
+                                            <li className="list-group-item d-flex align-items-center mb-2" key={idx}>
+                                                <img src={item.image} className="me-2" style={{ width: 120, height: 120, objectFit: "cover" }} alt={item.name} /> {item.name}
+                                            </li>
+                                        ))}
+                                    </ul>
+                                ))
+                            )}
+                        </div>
+                    </div>
+                </div>
+                <div className="col-md-6">
+                    <div className="card shadow-sm">
+                        <div className="card-header bg-success text-white">
+                            <h2 className="h5 m-0">Завершённые</h2>
+                        </div>
+                        <div className="card-body">
+                            {completed.length === 0 ? (
+                                <div className="text-center text-muted">Нет завершённых заказов</div>
+                            ) : (
+                                completed.map(order => (
+                                    <ul className="list-group list-group-flush mb-3" key={order.id}>
+                                        {order.items.map((item, idx) => (
+                                            <li className="list-group-item d-flex align-items-center mb-2" key={idx}>
+                                                <img src={item.image} className="me-2" style={{ width: 120, height: 120, objectFit: "cover" }} alt={item.name} /> {item.name}
+                                            </li>
+                                        ))}
+                                    </ul>
+                                ))
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,28 @@
+import { resolve } from 'path';
+import { defineConfig } from "vite";
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+	root: '.',
+	plugins: [react()],
+	build: {
+		outDir: 'dist',
+		rollupOptions: {
+			input: {
+				main: resolve(__dirname, "newSite.html"),
+				basketPage: resolve(__dirname, "Basket.html"),
+				favouritesPage: resolve(__dirname, "Favorites.html"),
+				orderPage: resolve(__dirname, "Order.html"),
+				accountPage: resolve(__dirname, "Account.html"),
+			},
+		},
+	},
+	server: {
+		open: '/',
+	},
+	resolve: {
+		alias: {
+			'@': resolve(__dirname, 'src'),
+		},
+	},
+});
--- a/Отчет1.docx
+++ b/Отчет1.docx
--- a/Отчет2.docx
+++ b/Отчет2.docx
--- a/Отчет3.docx
+++ b/Отчет3.docx
--- a/Отчет4.docx
+++ b/Отчет4.docx
--- a/Отчет5.docx
+++ b/Отчет5.docx
--- a/Отчет6.docx
+++ b/Отчет6.docx
Author	SHA1	Message	Date
qkrlnt	858bd39322	отчет маршруты	2025-05-29 03:34:27 +04:00
qkrlnt	4defafe3e7	отчет6	2025-05-28 19:49:57 +04:00
qkrlnt	da97a99436	доп	2025-05-27 15:39:50 +04:00
qkrlnt	d44d30cb05	nav	2025-05-27 11:38:59 +04:00
qkrlnt	ebbfcd0e93	changes	2025-05-24 10:45:37 +04:00
qkrlnt	e005c61030	done without .docx	2025-05-24 10:42:15 +04:00
qkrlnt	cbda4dee82	working on....	2025-05-23 22:33:12 +02:00
qkrlnt	038f60d61e	lab_6_start	2025-05-23 21:47:29 +02:00
qkrlnt	d1b2cea66c	minimal	2025-05-23 17:43:10 +02:00
qkrlnt	311491d554	some changes	2025-05-23 17:33:42 +02:00
qkrlnt	5fa65ad591	lab_5	2025-05-22 15:18:29 +02:00
qkrlnt	9c80373c59	lab_4	2025-05-20 16:04:25 +04:00
qkrlnt	49fe7787f3	lab_3_done	2025-05-20 15:13:16 +04:00
qkrlnt	65407801d3	lab_3	2025-05-20 14:58:51 +04:00
qkrlnt	0f37299eab	lab_2_done	2025-05-20 14:03:18 +04:00
qkrlnt	f09fa6e113	lab_1_done	2025-05-20 13:21:40 +04:00