Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
25469177e9 | ||
| 4249a0253e | |||
|
|
9c80373c59 | ||
|
|
49fe7787f3 | ||
|
|
65407801d3 | ||
|
|
0f37299eab | ||
|
|
f09fa6e113 |
54
.gitignore
vendored
Normal file
@@ -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
|
||||||
65
Account.html
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<!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>
|
||||||
|
<link rel="stylesheet" href="css/style.css"/>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header">
|
||||||
|
<div class="d-block mt-3 ms-3">
|
||||||
|
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
||||||
|
<a href="newSite.html" class="text-decoration-none text-dark m-1"><h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1></a>
|
||||||
|
</div>
|
||||||
|
<navbar>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Навигация
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</navbar>
|
||||||
|
</header>
|
||||||
|
<div class="container mt-5">
|
||||||
|
<div class="card text-center mx-auto" style="max-width: 400px; max-height: 400px;">
|
||||||
|
<img src="images/бананы.jpg" class="card-img-top" alt="Профиль" style="width: 100%; height: 300px; object-fit: cover;">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Имя Фамилия</h3>
|
||||||
|
<p class="card-text">Описание</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="container mt-5">
|
||||||
|
<div class="bg-light p-4">
|
||||||
|
<h5>Помощь:</h5>
|
||||||
|
<div class="d-flex flex-wrap">
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<i class="bi bi-telephone-fill me-2"></i>
|
||||||
|
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank" class="text-decoration-none text-dark">vk.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="mailto:ozon-zon-zon@mail.joke" class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
80
Basket.html
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
<!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>
|
||||||
|
<link rel="stylesheet" href="css/style.css"/>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header">
|
||||||
|
<div class="d-block mt-3 ms-3">
|
||||||
|
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
||||||
|
<a href="newSite.html" class="text-decoration-none text-dark m-1"><h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1></a>
|
||||||
|
</div>
|
||||||
|
<navbar>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Навигация
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</navbar>
|
||||||
|
</header>
|
||||||
|
<main class="container d-flex justify-content-center align-items-center" style="min-height: 60vh;">
|
||||||
|
<div class="card p-4 shadow" style="min-width: 60vw;">
|
||||||
|
<h2 class="text-center">Корзина</h2>
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item d-flex align-items-center">
|
||||||
|
<img src="images/glasses.jpg" alt="Очки" style="width: 100px; height: 100px;" class="me-3">
|
||||||
|
Очки <span class="ms-auto">349 руб.</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex align-items-center">
|
||||||
|
<img src="images/chery.jpg" alt="Chery Tiggo" style="width: 100px; height: 100px;" class="me-3">
|
||||||
|
Chery Tiggo 7 Pro Max <span class="ms-auto">5 руб.</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex align-items-center">
|
||||||
|
<img src="images/vanadiy.jpg" alt="Ванадий" style="width: 100px; height: 100px;" class="me-3">
|
||||||
|
Ванадий <span class="ms-auto">2099 руб.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="text-center mt-3">
|
||||||
|
<a href="https://xn----7sbon6aucai8a.xn--p1ai/wa-data/public/shop/products/98/27/2798/images/6060/6060.970.jpg" target="_blank" class="btn btn-success w-100">
|
||||||
|
Оплатить
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="container mt-5">
|
||||||
|
<div class="bg-light p-4">
|
||||||
|
<h5>Помощь:</h5>
|
||||||
|
<div class="d-flex flex-wrap">
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<i class="bi bi-telephone-fill me-2"></i>
|
||||||
|
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank" class="text-decoration-none text-dark">vk.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="mailto:ozon-zon-zon@mail.joke" class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
79
Favorites.html
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<!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>
|
||||||
|
<link rel="stylesheet" href="css/style.css"/>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header">
|
||||||
|
<div class="d-block mt-3 ms-3">
|
||||||
|
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
||||||
|
<a href="newSite.html" class="text-decoration-none text-dark m-1"><h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1></a>
|
||||||
|
</div>
|
||||||
|
<navbar>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Навигация
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</navbar>
|
||||||
|
</header>
|
||||||
|
<div class="container mt-4">
|
||||||
|
<h2 class="mb-4">Избранное</h2>
|
||||||
|
<div class="row row-cols-1 row-cols-md-2 g-4">
|
||||||
|
<div class="col">
|
||||||
|
<div class="card mx-auto" style="width: 70%;">
|
||||||
|
<img src="images/masha.jpg" class="card-img-top" alt="Женщина" style="width: 100%; height: 300px; object-fit: cover;">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<h5 class="card-title">Женщина</h5>
|
||||||
|
<p class="card-text">бесценна</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card mx-auto" style="width: 70%;">
|
||||||
|
<img src="images/screwdriver.jpg" class="card-img-top" alt="Отвертка" style="width: 100%; height: 300px; object-fit: cover;">
|
||||||
|
<div class="card-body text-center">
|
||||||
|
<h5 class="card-title">Отвертка</h5>
|
||||||
|
<p class="card-text">219 руб</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="container mt-5">
|
||||||
|
<div class="bg-light p-4">
|
||||||
|
<h5>Помощь:</h5>
|
||||||
|
<div class="d-flex flex-wrap">
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<i class="bi bi-telephone-fill me-2"></i>
|
||||||
|
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank" class="text-decoration-none text-dark">vk.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="mailto:ozon-zon-zon@mail.joke" class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
101
Order.html
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<!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>
|
||||||
|
<link rel="stylesheet" href="css/style.css"/>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header">
|
||||||
|
<div class="d-block mt-3 ms-3">
|
||||||
|
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
||||||
|
<a href="newSite.html" class="text-decoration-none text-dark m-1"><h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1></a>
|
||||||
|
</div>
|
||||||
|
<navbar>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Навигация
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</navbar>
|
||||||
|
</header>
|
||||||
|
<div class="container mt-4">
|
||||||
|
<h1 class="text-center">Заказы</h1>
|
||||||
|
<div class="row">
|
||||||
|
<!-- Заказы в процессе -->
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card shadow-sm">
|
||||||
|
<div class="card-header bg-warning text-dark">
|
||||||
|
<h2 class="h5 m-0">В процессе</h2>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item d-flex align-items-center mb-2">
|
||||||
|
<img src="images/spoon.jpg" class="me-2" style="min-width: 90px;"> Ложка
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex align-items-center mb-2">
|
||||||
|
<img src="images/fork.jpg" class="me-2" style="min-width: 90px;"> Вилка
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex align-items-center">
|
||||||
|
<img src="images/knife.jpg" class="me-2" style="min-width: 90px;"> Нож
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Завершённые заказы -->
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card shadow-sm">
|
||||||
|
<div class="card-header bg-success text-white">
|
||||||
|
<h2 class="h5 m-0">Завершённые</h2>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="list-group list-group-flush">
|
||||||
|
<li class="list-group-item d-flex align-items-center mb-2">
|
||||||
|
<img src="images/iron.jpg" class="me-2" style="min-width: 90px;"> Утюг
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex align-items-center mb-2">
|
||||||
|
<img src="images/bananas.jpg" class="me-2" style="min-width: 90px;"> Бананы
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="container mt-5">
|
||||||
|
<div class="bg-light p-4">
|
||||||
|
<h5>Помощь:</h5>
|
||||||
|
<div class="d-flex flex-wrap">
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<i class="bi bi-telephone-fill me-2"></i>
|
||||||
|
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank" class="text-decoration-none text-dark">vk.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="mailto:ozon-zon-zon@mail.joke" class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
90
css/style.css
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
/* Общие стили */
|
||||||
|
body {
|
||||||
|
background-color: #edf7f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Заголовки */
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Изображения */
|
||||||
|
img {
|
||||||
|
width: 180px;
|
||||||
|
height: 150px;
|
||||||
|
margin-right: 10px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ссылки */
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Навигация */
|
||||||
|
navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 40px;
|
||||||
|
right: 20px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Контент */
|
||||||
|
.goods img {
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Заказы */
|
||||||
|
.inProcess h2 {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.done h2 {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Кнопка оплаты */
|
||||||
|
.buy {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background-color: greenyellow;
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 110px;
|
||||||
|
height: 35px;
|
||||||
|
transition: background-color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy:hover {
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Личный кабинет */
|
||||||
|
.account img {
|
||||||
|
border: 3px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recomended .card {
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recomended .card:hover {
|
||||||
|
transform: translateY(-5px) scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптивность */
|
||||||
|
@media only screen and (min-width: 400px) {
|
||||||
|
body {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy {
|
||||||
|
width: 200px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
images/bananas.jpg
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
images/chery.jpg
Normal file
|
After Width: | Height: | Size: 280 KiB |
BIN
images/child.jpg
Normal file
|
After Width: | Height: | Size: 337 KiB |
BIN
images/fork.jpg
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
images/glasses.jpg
Normal file
|
After Width: | Height: | Size: 193 KiB |
BIN
images/gmail.png
Normal file
|
After Width: | Height: | Size: 781 B |
BIN
images/iron.jpg
Normal file
|
After Width: | Height: | Size: 5.6 KiB |
BIN
images/knife.jpg
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
images/logo.jpg
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
images/masha.jpg
Normal file
|
After Width: | Height: | Size: 169 KiB |
BIN
images/phone.png
Normal file
|
After Width: | Height: | Size: 595 B |
BIN
images/screwdriver.jpg
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
images/skateboard.jpg
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
images/spoon.jpg
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
images/telegram.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
images/vanadiy.jpg
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
images/vk.png
Normal file
|
After Width: | Height: | Size: 715 B |
BIN
images/бананы.jpg
Normal file
|
After Width: | Height: | Size: 128 KiB |
191
newSite.html
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
<!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>
|
||||||
|
<link rel="stylesheet" href="css/style.css"/>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header">
|
||||||
|
<div class="d-block mt-3 ms-3">
|
||||||
|
<img src="images/logo.jpg" alt="Название магазина" class="me-3" style="width: 200px; height: auto;">
|
||||||
|
<a href="newSite.html" class="text-decoration-none text-dark m-1"><h1 class="display-4 h3 mt-3"><b>Название магазина</b></h1></a>
|
||||||
|
</div>
|
||||||
|
<navbar>
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Навигация
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Account.html">Личный кабинет<i class="bi bi-person-circle ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Basket.html">Корзина<i class="bi bi-cart4 ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Order.html">Заказы<i class="bi bi-receipt ms-2"></i></a></li>
|
||||||
|
<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="Favorites.html">Избранное<i class="bi bi-heart-fill ms-2"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</navbar>
|
||||||
|
</header>
|
||||||
|
<main class="container">
|
||||||
|
<div class="card mb-5 border-primary">
|
||||||
|
<div class="card-header bg-primary text-white">
|
||||||
|
<h3 class="mb-0">Добавить новый товар</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<form id="addProductForm" class="row g-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="productName" class="form-label">Название товара</label>
|
||||||
|
<input type="text" class="form-control" id="productName" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="productPrice" class="form-label">Цена (руб)</label>
|
||||||
|
<input type="number" class="form-control" step="10" id="productPrice" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label for="productImage" class="form-label">Изображение товара</label>
|
||||||
|
<input type="file" class="form-control" id="productImage" accept="image/*" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 d-flex justify-content-end">
|
||||||
|
<button type="submit" class="btn btn-success">
|
||||||
|
<i class="bi bi-plus-circle"></i> Добавить товар
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-center my-3">Рекомендуемые товары:</h2>
|
||||||
|
<div class="row row-cols-1 row-cols-md-3 g-4 recomended">
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<img src="images/iron.jpg" class="card-img-top" alt="Утюг" style="width: 100%; height: 300%; object-fit: cover;">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Утюг</h5>
|
||||||
|
<p class="card-text">2600 руб</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<img src="images/child.jpg" class="card-img-top" alt="Ребёнок" style="width: 100%; height: 300%; object-fit: cover;">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Ребёнок</h5>
|
||||||
|
<p class="card-text">2600 без костей</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<img src="images/screwdriver.jpg" class="card-img-top" alt="Отвертка" style="width: 100%; height: 300%; object-fit: cover;">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Отвертка</h5>
|
||||||
|
<p class="card-text">620 руб</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<img src="images/skateboard.jpg" class="card-img-top" alt="Скейтборд" style="width: 100%; height: 300%; object-fit: cover;">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Скейтборд</h5>
|
||||||
|
<p class="card-text">4300 руб</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<img src="images/bananas.jpg" class="card-img-top" alt="Бананы" style="width: 100%; height: 300%; object-fit: cover;">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Бананы</h5>
|
||||||
|
<p class="card-text">120 руб</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="container mt-5">
|
||||||
|
<div class="bg-light p-4">
|
||||||
|
<h5>Помощь:</h5>
|
||||||
|
<div class="d-flex flex-wrap">
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<i class="bi bi-telephone-fill me-2"></i>
|
||||||
|
<a href="#" class="text-decoration-none text-dark">8 (800)-555-35-35</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="https://vk.com/howmakesite_nn?from=search" target="_blank" class="text-decoration-none text-dark">vk.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
|
<img src="images/telegram.png" alt="Telegram" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="#" class="text-decoration-none text-dark">tg.me</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center mb-3">
|
||||||
|
<img src="images/gmail.png" alt="Gmail" class="me-2" style="width: 24px; height: 24px;">
|
||||||
|
<a href="mailto:ozon-zon-zon@mail.joke" class="text-decoration-none text-dark">ozon-zon-zon@mail.joke</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-4">
|
||||||
|
<img src="images/бананы.jpg" alt="Бананы" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||||
|
<script>
|
||||||
|
document.getElementById('addProductForm').addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const name = document.getElementById('productName').value;
|
||||||
|
const price = document.getElementById('productPrice').value;
|
||||||
|
const imageInput = document.getElementById('productImage');
|
||||||
|
|
||||||
|
// Проверка выбора файла
|
||||||
|
if (imageInput.files.length === 0) {
|
||||||
|
alert('Пожалуйста, выберите изображение!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var text = document.getElementById('productName').value;
|
||||||
|
if(!text.match(/^[А-Яа-яЁё]+(?: [А-Яа-яЁё]+)*$/)){
|
||||||
|
alert('Пожалуйста, введите корректное название на русском!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const file = imageInput.files[0];
|
||||||
|
|
||||||
|
// Проверка размера файла (до 5MB)
|
||||||
|
if (file.size > 5 * 1024 * 1024) {
|
||||||
|
alert('Файл слишком большой! Максимум 5MB.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Создаем превью изображения
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = function(e) {
|
||||||
|
const imageUrl = e.target.result;
|
||||||
|
|
||||||
|
// Создаем карточку товара
|
||||||
|
const productCard = `
|
||||||
|
<div class="col">
|
||||||
|
<div class="card h-100">
|
||||||
|
<img src="${imageUrl}" class="card-img-top" alt="${name}" style="width: 100%; height: 300%; object-fit: cover;">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">${name}</h5>
|
||||||
|
<p class="card-text">${price} руб</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.querySelector('.row-cols-1').insertAdjacentHTML('afterbegin', productCard);
|
||||||
|
alert('Товар успешно добавлен!');
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5025
package-lock.json
generated
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "ip",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"server": "http-server -p 3000 ./dist/",
|
||||||
|
"prod": "npm-run-all build server",
|
||||||
|
"lint": "eslint …"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"description": "",
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap":"5.3.3",
|
||||||
|
"bootstrap-icons": "1.11.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"vite": "6.2.0",
|
||||||
|
"npm-run-all": "4.1.5",
|
||||||
|
"eslint": "8.56.0",
|
||||||
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
|
"eslint-config-prettier": "10.0.2",
|
||||||
|
"eslint-plugin-import": "2.31.0",
|
||||||
|
"eslint-plugin-prettier": "5.2.3",
|
||||||
|
"eslint-plugin-html": "8.1.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
16
vite.config.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { resolve } from 'path';
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
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"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||