Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
25469177e9 | ||
| 4249a0253e | |||
|
|
9c80373c59 | ||
|
|
49fe7787f3 | ||
|
|
65407801d3 |
54
.gitignore
vendored
Normal file
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
|
||||||
69
Account.html
69
Account.html
@@ -5,50 +5,61 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<title>Интернет-магазин: ЛК</title>
|
<title>Интернет-магазин: ЛК</title>
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header">
|
||||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
<div class="d-block mt-3 ms-3">
|
||||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
<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>
|
<navbar>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<span>Навигация ▾</span>
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
<ul class="links">
|
Навигация
|
||||||
<li><a href="Basket.html">Корзина</a></li>
|
</button>
|
||||||
<li><a href="Order.html">Заказы</a></li>
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
<li><a href="Favorites.html">Избранное</a></li>
|
<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 href="Account.html">Личный кабинет</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</navbar>
|
</navbar>
|
||||||
</header>
|
</header>
|
||||||
<div class="account-container">
|
<div class="container mt-5">
|
||||||
<div class="account">
|
<div class="card text-center mx-auto" style="max-width: 400px; max-height: 400px;">
|
||||||
<img src="images/бананы.jpg">
|
<img src="images/бананы.jpg" class="card-img-top" alt="Профиль" style="width: 100%; height: 300px; object-fit: cover;">
|
||||||
<h3>Имя Фамилия</h3>
|
<div class="card-body">
|
||||||
<p>Описание</p>
|
<h3 class="card-title">Имя Фамилия</h3>
|
||||||
|
<p class="card-text">Описание</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
|
||||||
<div class="contacts">
|
|
||||||
<p>Помощь:</p>
|
|
||||||
<div class="contact-item">
|
|
||||||
<img src="images/phone.png" alt="Phone">
|
|
||||||
<p>8 (800)-555-35-35</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-item">
|
<footer class="container mt-5">
|
||||||
<img src="images/vk.png" alt="VK">
|
<div class="bg-light p-4">
|
||||||
<p>vk.com</p>
|
<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>
|
||||||
<div class="contact-item">
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
<img src="images/telegram.png" alt="Telegram">
|
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
||||||
<p>tg.me</p>
|
<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 class="contact-item">
|
|
||||||
<img src="images/gmail.png" alt="Gmail">
|
|
||||||
<p>ozon-zon-zon@mail.joke</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
88
Basket.html
88
Basket.html
@@ -5,56 +5,76 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<title>Интернет-магазин: Корзина</title>
|
<title>Интернет-магазин: Корзина</title>
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header">
|
||||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
<div class="d-block mt-3 ms-3">
|
||||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
<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>
|
<navbar>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<span>Навигация ▾</span>
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
<ul class="links">
|
Навигация
|
||||||
<li><a href="Basket.html">Корзина</a></li>
|
</button>
|
||||||
<li><a href="Order.html">Заказы</a></li>
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
<li><a href="Favorites.html">Избранное</a></li>
|
<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 href="Account.html">Личный кабинет</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</navbar>
|
</navbar>
|
||||||
</header>
|
</header>
|
||||||
<div class="basket">
|
<main class="container d-flex justify-content-center align-items-center" style="min-height: 60vh;">
|
||||||
<h1>Корзина</h1>
|
<div class="card p-4 shadow" style="min-width: 60vw;">
|
||||||
<ol>
|
<h2 class="text-center">Корзина</h2>
|
||||||
<li><img src="images/glasses.jpg">Очки<p>349 руб.</p></li>
|
<ul class="list-group list-group-flush">
|
||||||
<li><img src="images/chery.jpg">Chery Tiggo 7 Pro Max 64gb 128mp<p>5 руб.</p></li>
|
<li class="list-group-item d-flex align-items-center">
|
||||||
<li><img src="images/vanadiy.jpg">Ванадий<p>2099 руб.</p></li>
|
<img src="images/glasses.jpg" alt="Очки" style="width: 100px; height: 100px;" class="me-3">
|
||||||
</ol>
|
Очки <span class="ms-auto">349 руб.</span>
|
||||||
</div>
|
</li>
|
||||||
<div class="buy">
|
<li class="list-group-item d-flex align-items-center">
|
||||||
<a href="https://xn----7sbon6aucai8a.xn--p1ai/wa-data/public/shop/products/98/27/2798/images/6060/6060.970.jpg" target="_blank">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
|
||||||
<div class="contacts">
|
|
||||||
<p>Помощь:</p>
|
|
||||||
<div class="contact-item">
|
|
||||||
<img src="images/phone.png" alt="Phone">
|
|
||||||
<p>8 (800)-555-35-35</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-item">
|
</main>
|
||||||
<img src="images/vk.png" alt="VK">
|
<footer class="container mt-5">
|
||||||
<p>vk.com</p>
|
<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>
|
||||||
<div class="contact-item">
|
<div class="d-flex align-items-center me-4 mb-3">
|
||||||
<img src="images/telegram.png" alt="Telegram">
|
<img src="images/vk.png" alt="VK" class="me-2" style="width: 24px; height: 24px;">
|
||||||
<p>tg.me</p>
|
<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 class="contact-item">
|
|
||||||
<img src="images/gmail.png" alt="Gmail">
|
|
||||||
<p>ozon-zon-zon@mail.joke</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -5,50 +5,75 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<title>Интернет-магазин: Избранное</title>
|
<title>Интернет-магазин: Избранное</title>
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header">
|
||||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
<div class="d-block mt-3 ms-3">
|
||||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
<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>
|
<navbar>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<span>Навигация ▾</span>
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
<ul class="links">
|
Навигация
|
||||||
<li><a href="Basket.html">Корзина</a></li>
|
</button>
|
||||||
<li><a href="Order.html">Заказы</a></li>
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
<li><a href="Favorites.html">Избранное</a></li>
|
<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 href="Account.html">Личный кабинет</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</navbar>
|
</navbar>
|
||||||
</header>
|
</header>
|
||||||
<div class="favourites">
|
<div class="container mt-4">
|
||||||
<h2>Избранное</h2>
|
<h2 class="mb-4">Избранное</h2>
|
||||||
<ol>
|
<div class="row row-cols-1 row-cols-md-2 g-4">
|
||||||
<li><img src ="images/masha.jpg">Женщина<p>бесценна</p></li>
|
<div class="col">
|
||||||
<li><img src ="images/screwdriver.jpg">Отвертка<p>219 руб</p></li>
|
<div class="card mx-auto" style="width: 70%;">
|
||||||
</ol>
|
<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>
|
||||||
<footer>
|
|
||||||
<div class="contacts">
|
|
||||||
<p>Помощь:</p>
|
|
||||||
<div class="contact-item">
|
|
||||||
<img src="images/phone.png" alt="Phone">
|
|
||||||
<p>8 (800)-555-35-35</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-item">
|
|
||||||
<img src="images/vk.png" alt="VK">
|
|
||||||
<p>vk.com</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-item">
|
<div class="col">
|
||||||
<img src="images/telegram.png" alt="Telegram">
|
<div class="card mx-auto" style="width: 70%;">
|
||||||
<p>tg.me</p>
|
<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 class="contact-item">
|
|
||||||
<img src="images/gmail.png" alt="Gmail">
|
|
||||||
<p>ozon-zon-zon@mail.joke</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
114
Order.html
114
Order.html
@@ -5,61 +5,97 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<title>Интернет-магазин: Заказы</title>
|
<title>Интернет-магазин: Заказы</title>
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header">
|
||||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
<div class="d-block mt-3 ms-3">
|
||||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
<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>
|
<navbar>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<span>Навигация ▾</span>
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
<ul class="links">
|
Навигация
|
||||||
<li><a href="Basket.html">Корзина</a></li>
|
</button>
|
||||||
<li><a href="Order.html">Заказы</a></li>
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
<li><a href="Favorites.html">Избранное</a></li>
|
<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 href="Account.html">Личный кабинет</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</navbar>
|
</navbar>
|
||||||
</header>
|
</header>
|
||||||
<div class="orders"><h1>Заказы</h1></div>
|
<div class="container mt-4">
|
||||||
<div class="typeOfOrder">
|
<h1 class="text-center">Заказы</h1>
|
||||||
<div class="inProcess">
|
<div class="row">
|
||||||
<h2>В процессе</h2>
|
<!-- Заказы в процессе -->
|
||||||
<ol>
|
<div class="col-md-6">
|
||||||
<li><img src="images/spoon.jpg">Ложка</li>
|
<div class="card shadow-sm">
|
||||||
<li><img src="images/fork.jpg">Вилка</li>
|
<div class="card-header bg-warning text-dark">
|
||||||
<li><img src="images/knife.jpg">Нож</li>
|
<h2 class="h5 m-0">В процессе</h2>
|
||||||
</ol>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="done">
|
<div class="card-body">
|
||||||
<h2>Завершённые</h2>
|
<ul class="list-group list-group-flush">
|
||||||
<ol>
|
<li class="list-group-item d-flex align-items-center mb-2">
|
||||||
<li><img src="images/iron.jpg">Утюг</li>
|
<img src="images/spoon.jpg" class="me-2" style="min-width: 90px;"> Ложка
|
||||||
<li><img src="images/bananas.jpg">Бананы</li>
|
</li>
|
||||||
</ol>
|
<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>
|
||||||
<footer>
|
|
||||||
<div class="contacts">
|
|
||||||
<p>Помощь:</p>
|
|
||||||
<div class="contact-item">
|
|
||||||
<img src="images/phone.png" alt="Phone">
|
|
||||||
<p>8 (800)-555-35-35</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-item">
|
|
||||||
<img src="images/vk.png" alt="VK">
|
<!-- Завершённые заказы -->
|
||||||
<p>vk.com</p>
|
<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>
|
||||||
<div class="contact-item">
|
<div class="card-body">
|
||||||
<img src="images/telegram.png" alt="Telegram">
|
<ul class="list-group list-group-flush">
|
||||||
<p>tg.me</p>
|
<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 class="contact-item">
|
|
||||||
<img src="images/gmail.png" alt="Gmail">
|
|
||||||
<p>ozon-zon-zon@mail.joke</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
351
css/style.css
351
css/style.css
@@ -1,133 +1,43 @@
|
|||||||
/* Общие стили */
|
/* Общие стили */
|
||||||
body {
|
body {
|
||||||
background-color: #edf7f6;
|
background-color: #edf7f6;
|
||||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Заголовки */
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Изображения */
|
||||||
|
img {
|
||||||
|
width: 180px;
|
||||||
|
height: 150px;
|
||||||
|
margin-right: 10px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ссылки */
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
/* Навигация */
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 180px;
|
|
||||||
height: 150px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*header*/
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: start;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header img {
|
|
||||||
width: 200px;
|
|
||||||
height: auto;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 a{
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*навигация*/
|
|
||||||
navbar {
|
navbar {
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
span{
|
/* Контент */
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown > span {
|
|
||||||
z-index: 2;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
/*background: #edf7f6;*/
|
|
||||||
background: white;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown:hover .links{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding-right: 30px;
|
|
||||||
padding-top: 50px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: -25px;
|
|
||||||
left: -115px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links {
|
|
||||||
display: none;
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.links li {
|
|
||||||
list-style: none;
|
|
||||||
color: black;
|
|
||||||
width: 140px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Основной контент*/
|
|
||||||
.goods {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 70px;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods p {
|
|
||||||
text-align: center;
|
|
||||||
width: 270px;
|
|
||||||
height: 285px;
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods img {
|
.goods img {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
object-fit: cover;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Заказы */
|
/* Заказы */
|
||||||
.typeOfOrder {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typeOfOrder h2{
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 180px;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inProcess h2 {
|
.inProcess h2 {
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
}
|
}
|
||||||
@@ -136,38 +46,7 @@ span{
|
|||||||
background-color: green;
|
background-color: green;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Корзина и Избранное*/
|
/* Кнопка оплаты */
|
||||||
.basket,
|
|
||||||
.favourites {
|
|
||||||
margin-left: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basket h1,
|
|
||||||
.orders h1 {
|
|
||||||
margin-left: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 400px;
|
|
||||||
display: flex;
|
|
||||||
font-size: large;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basket p,
|
|
||||||
.favourites p {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 5px;
|
|
||||||
right: 10px;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Кнопка опалты в корзине*/
|
|
||||||
.buy {
|
.buy {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
@@ -176,212 +55,36 @@ li {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
border: 2px solid black;
|
border: 2px solid black;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 200px;
|
width: 110px;
|
||||||
height: 60px;
|
height: 35px;
|
||||||
display: flex;
|
|
||||||
transition: background-color 0.3s ease-in-out;
|
transition: background-color 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buy a {
|
|
||||||
font-size: xx-large;
|
|
||||||
font-weight: bold;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buy:hover {
|
.buy:hover {
|
||||||
background-color: lightgreen;
|
background-color: lightgreen;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Личный кабинет */
|
/* Личный кабинет */
|
||||||
.account-container {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account {
|
|
||||||
text-align: center;
|
|
||||||
margin: auto;
|
|
||||||
/*margin: 50px auto;*/
|
|
||||||
width: 300px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 2px solid black;
|
|
||||||
border-radius: 15px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account img {
|
.account img {
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 3px solid black;
|
border: 3px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account h3 {
|
.recomended .card {
|
||||||
font-weight: bold;
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
margin-top: 10px;
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Footer*/
|
.recomended .card:hover {
|
||||||
footer {
|
transform: translateY(-5px) scale(1.02);
|
||||||
margin-top: 50px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contacts {
|
/* Адаптивность */
|
||||||
display: flex;
|
@media only screen and (min-width: 400px) {
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item img {
|
|
||||||
width: 24px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Адаптивная верстка */
|
|
||||||
@media only screen and (min-width: 961px) {
|
|
||||||
.goods {
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basket,
|
|
||||||
.favourites {
|
|
||||||
margin-left: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 401px) and (max-width: 960px) {
|
|
||||||
.goods {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typeOfOrder{
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typeOfOrder h2 {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
width: 50%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basket,
|
|
||||||
.favourites {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basket p,
|
|
||||||
.favourites p {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
bottom: -5px;
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buy {
|
|
||||||
width: 150px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 400px) {
|
|
||||||
body {
|
body {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
navbar {
|
|
||||||
position: static;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown:hover .links {
|
|
||||||
top: 180px;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods p {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods img {
|
|
||||||
width: 97%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
width: auto;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typeOfOrder{
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.typeOfOrder h2 {
|
|
||||||
margin-left: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basket,
|
|
||||||
.favourites {
|
|
||||||
width: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
padding-inline-start: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.basket p,
|
|
||||||
.favourites p {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
bottom: -5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buy {
|
.buy {
|
||||||
width: 110px;
|
width: 200px;
|
||||||
height: 35px;
|
height: 60px;
|
||||||
}
|
|
||||||
|
|
||||||
.buy a {
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contacts {
|
|
||||||
gap: 2px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
199
newSite.html
199
newSite.html
@@ -5,52 +5,187 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<title>Интернет-магазин</title>
|
<title>Интернет-магазин</title>
|
||||||
<link rel="stylesheet" href="css/style.css"/>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header">
|
||||||
<img src="images/logo.jpg" alt="'Название магазина'">
|
<div class="d-block mt-3 ms-3">
|
||||||
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
|
<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>
|
<navbar>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<span><b>Навигация ▾</b></span>
|
<button class="btn btn-primary dropdown-toggle" type="button" id="navigationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
<ul class="links">
|
Навигация
|
||||||
<li><a href="Basket.html">Корзина</a></li>
|
</button>
|
||||||
<li><a href="Order.html">Заказы</a></li>
|
<ul class="dropdown-menu" aria-labelledby="navigationDropdown">
|
||||||
<li><a href="Favorites.html">Избранное</a></li>
|
<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 href="Account.html">Личный кабинет</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</navbar>
|
</navbar>
|
||||||
</header>
|
</header>
|
||||||
<h2>Рекомендуемые товары:</h2>
|
<main class="container">
|
||||||
<div class="goods">
|
<div class="card mb-5 border-primary">
|
||||||
<p><img src="images/iron.jpg">Утюг</p>
|
<div class="card-header bg-primary text-white">
|
||||||
<p><img src="images/child.jpg">Ребёнок</p>
|
<h3 class="mb-0">Добавить новый товар</h3>
|
||||||
<p><img src="images/screwdriver.jpg">Отвертка</p>
|
|
||||||
<p><img src="images/skateboard.jpg">Скейтборд</p>
|
|
||||||
<p><img src="images/bananas.jpg">Бананы</p>
|
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<div class="card-body">
|
||||||
<div class="contacts">
|
<form id="addProductForm" class="row g-3">
|
||||||
<p>Помощь:</p>
|
<div class="col-md-6">
|
||||||
<div class="contact-item">
|
<label for="productName" class="form-label">Название товара</label>
|
||||||
<img src="images/phone.png" alt="Phone">
|
<input type="text" class="form-control" id="productName" required>
|
||||||
<p>8 (800)-555-35-35</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-item">
|
<div class="col-md-6">
|
||||||
<img src="images/vk.png" alt="VK">
|
<label for="productPrice" class="form-label">Цена (руб)</label>
|
||||||
<p>vk.com</p>
|
<input type="number" class="form-control" step="10" id="productPrice" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-item">
|
<div class="col-12">
|
||||||
<img src="images/telegram.png" alt="Telegram">
|
<label for="productImage" class="form-label">Изображение товара</label>
|
||||||
<p>tg.me</p>
|
<input type="file" class="form-control" id="productImage" accept="image/*" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-item">
|
<div class="col-12 d-flex justify-content-end">
|
||||||
<img src="images/gmail.png" alt="Gmail">
|
<button type="submit" class="btn btn-success">
|
||||||
<p>ozon-zon-zon@mail.joke</p>
|
<i class="bi bi-plus-circle"></i> Добавить товар
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p><img src="images/бананы.jpg"></p>
|
|
||||||
|
<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>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
5025
package-lock.json
generated
Normal file
5025
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
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
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"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
BIN
Отчет3.docx
Normal file
BIN
Отчет3.docx
Normal file
Binary file not shown.
Reference in New Issue
Block a user