43 changed files with 652 additions and 61 deletions
--- a/db.json
+++ b/db.json
@@ -3,12 +3,72 @@
    {
      "id": "1a54",
      "name": "новый товар",
-      "price": 102
+      "price": 102,
      "image": "images/fork.jpg"
    },
    {
      "id": "f4f8",
-      "name": " товарчик",
+      "name": "товарчик",
-      "price": 111
+      "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/newSite.html
+++ b/newSite.html
@@ -1,15 +0,0 @@
 <!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>
        <main class="container">
            <h2 class="text-center my-3">Рекомендуемые товары:</h2>
            <div id="root"></div>
        </main>
        <script type="module" src="/src/index.jsx"></script>
    </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
        "bootstrap": "5.3.3",
        "bootstrap-icons": "1.11.3",
        "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
        "react-router-dom": "^7.6.0"
      },
      "devDependencies": {
        "@vitejs/plugin-react": "^4.4.1",
@@ -2152,6 +2153,15 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/cookie": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
      "license": "MIT",
      "engines": {
        "node": ">=18"
      }
    },
    "node_modules/corser": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
@@ -5107,6 +5117,44 @@
        "node": ">=0.10.0"
      }
    },
    "node_modules/react-router": {
      "version": "7.6.0",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.0.tgz",
      "integrity": "sha512-GGufuHIVCJDbnIAXP3P9Sxzq3UUsddG3rrI3ut1q6m0FI6vxVBF3JoPQ38+W/blslLH4a5Yutp8drkEpXoddGQ==",
      "license": "MIT",
      "dependencies": {
        "cookie": "^1.0.1",
        "set-cookie-parser": "^2.6.0"
      },
      "engines": {
        "node": ">=20.0.0"
      },
      "peerDependencies": {
        "react": ">=18",
        "react-dom": ">=18"
      },
      "peerDependenciesMeta": {
        "react-dom": {
          "optional": true
        }
      }
    },
    "node_modules/react-router-dom": {
      "version": "7.6.0",
      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.0.tgz",
      "integrity": "sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==",
      "license": "MIT",
      "dependencies": {
        "react-router": "7.6.0"
      },
      "engines": {
        "node": ">=20.0.0"
      },
      "peerDependencies": {
        "react": ">=18",
        "react-dom": ">=18"
      }
    },
    "node_modules/read-pkg": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -5411,6 +5459,12 @@
        "semver": "bin/semver.js"
      }
    },
    "node_modules/set-cookie-parser": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
      "license": "MIT"
    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
    "bootstrap": "5.3.3",
    "bootstrap-icons": "1.11.3",
    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
    "react-router-dom": "^7.6.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.4.1",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,28 +1,26 @@
 import React, { useState } from 'react';
-import useProducts from './hooks/useProducts';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
-import ProductList from './components/ProductList';
+import Header from "./components/Header";
-import ProductForm from './components/ProductForm';
+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() {
  const { products, add, update, remove } = useProducts();
  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);
  return (
-    <div className="container my-4">
+    <BrowserRouter>
-      {/* <h1 className="mb-4">Каталог товаров</h1> */}
+      <Header />
-      <button className="btn btn-success mb-3" onClick={handleAdd}>Добавить товар</button>
+      <Routes>
-      {showForm && <ProductForm initial={editing} onSave={handleSave} onCancel={handleCancel} />}
+        <Route path="/" element={<MainPage />} />
-      <ProductList products={products} onEdit={handleEdit} onDelete={handleDelete} />
+        <Route path="/basket" element={<BasketPage />} />
-    </div>
+        <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
@@ -1,14 +1,20 @@
 import React from 'react';
-export default function ProductCard({ product, onEdit, onDelete }) {
+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" onClick={() => onDelete(product.id)}>Удалить</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
@@ -1,30 +1,70 @@
 import React, { useState, useEffect } from 'react';
 export default function ProductForm({ initial, onSave, onCancel }) {
-  const [form, setForm] = useState({ name: '', price: '' });
+  const [form, setForm] = useState({ name: '', price: '', image: '' });
  useEffect(() => {
-    if (initial) setForm({ name: initial.name, price: initial.price });
+    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) });
+    onSave({ ...initial, name: form.name, price: Number(form.price), image: form.image });
-    setForm({ name: '', price: '' });
+    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" />
+        <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" />
+        <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
@@ -1,11 +1,17 @@
 import React from 'react';
 import ProductCard from './ProductCard';
-export default function ProductList({ products, onEdit, onDelete }) {
+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} />
+        <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/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
@@ -1,7 +1,8 @@
-import React from 'react'
+import React from "react";
-import { createRoot } from 'react-dom/client'
+import { createRoot } from "react-dom/client";
-import App from './App'
+import App from "./App";
-import 'bootstrap/dist/css/bootstrap.min.css'  // опционально
+import "bootstrap/dist/css/bootstrap.min.css";
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
-const container = document.getElementById('root')
+const container = document.getElementById("root");
-createRoot(container).render(<App />)
+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
@@ -18,7 +18,7 @@ export default defineConfig({
 		},
 	},
 	server: {
-		open: '/newSite.html',
+		open: '/',
 	},
 	resolve: {
 		alias: {
--- a/Отчет4.docx
+++ b/Отчет4.docx
--- a/Отчет5.docx
+++ b/Отчет5.docx
--- a/Отчет6.docx
+++ b/Отчет6.docx