xysiboi/PIbd-23_Baryshev_D.A._InternetProgramming_cyxarukShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

чтобы не потерять

Browse Source
This commit is contained in:
Baryshev Dmitry
2025-05-17 10:46:25 +04:00
parent cdb7405b1f
commit e0cf8ff04b
15 changed files with 896 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
catalog.html
View File

@@ -5,25 +5,191 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop catalog</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Навигация (как в main.html) -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<!-- ... та же навигация, что и в main.html ... -->
</nav>
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="main.html">
<img src="img/cyxaruk shop logo.jpg" alt="логотип" width="50" height="50" class="rounded-circle me-2">
<span class="fw-bold">cyxaruk shop</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="catalog.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
<i class="bi bi-list-ul me-1"></i>Каталог
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="bi bi-gender-male me-2"></i>Для мужчин</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gender-female me-2"></i>Для женщин</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-emoji-smile me-2"></i>Для детей</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-globe me-2"></i>Заказ из-за границы</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html"><i class="bi bi-telephone me-1"></i>Контакты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="likes.html"><i class="bi bi-heart me-1"></i>Избранное</a>
</li>
<li class="nav-item">
<a class="nav-link" href="basket.html"><i class="bi bi-cart me-1"></i>Корзина</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Основной контент -->
<main class="container my-4">
<h1 class="text-center mb-4">Каталог товаров</h1>
<!-- Карточки товаров -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5" id="productsContainer">
<!-- Карточка товара 1 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="img/stonik.jpg" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Stone Island</h5>
<p class="card-text">super idol rovny pacan, groza rayona, mother's modnik, патч на месте</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$1999.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Карточка товара 2 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="img/adidas.jpg" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Adidas</h5>
<p class="card-text">sportik, street, baskemtball, air, old school</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$19.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Карточка товара 3 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="img/napapisaj.jpg" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Napapisaj</h5>
<p class="card-text">super idol rovny pacan, groza rayona, mother's modnik, +rep from brothers</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$1499.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Карточка товара 4 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="img/lacoste.png" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Lacoste</h5>
<p class="card-text">style, nice, mother's modnik, cotton, krokodil</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$399.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Карточка товара 5 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="img/samba.png" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Samba</h5>
<p class="card-text">super idol rovny pacan, groza rayona, mother's modnik, +rep from brothers</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$449.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Форма добавления товара -->
<div class="card mb-4 border-0 shadow-sm">
<div class="card mb-4 border-0 shadow">
<div class="card-header" style="background-color: #00264d; color: white;">
<h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Добавить новый товар</h5>
</div>
@@ -53,58 +219,45 @@
</form>
</div>
</div>
<!-- Карточки товаров -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" id="productsContainer">
<!-- Карточка товара 1 -->
<div class="col">
<div class="card h-100 border-0 shadow-sm">
<img src="img/stonik.jpg" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Stone Island</h5>
<p class="card-text">super idol rovny pacan, groza rayona, mother's modnik, патч на месте</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$1999.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Остальные товары аналогично -->
</div>
</main>
<!-- Подвал (как в main.html) -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<!-- ... тот же подвал, что и в main.html ... -->
<div class="container">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<div class="d-flex align-items-center mb-3">
<a href="https://t.me/cyxarukShop" class="text-white me-3">
<i class="bi bi-telegram fs-2"></i>
</a>
<span>Подпишитесь на нас в Telegram</span>
</div>
<div class="d-flex align-items-center">
<a href="https://www.avito.ru/..." class="text-white me-3">
<i class="bi bi-shop-window fs-2"></i>
</a>
<span>Мы на Авито</span>
</div>
</div>
<div class="col-md-6 text-md-end">
<h5>Контакты</h5>
<p><i class="bi bi-telephone me-2"></i>89876320523</p>
<p><i class="bi bi-geo-alt me-2"></i>Ulyanovsk, Russia</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Скрипт для добавления товаров -->
<script>
document.getElementById('addProductForm').addEventListener('submit', function(e) {
document.getElementById("addProductForm").addEventListener("submit", function (e) {
e.preventDefault();
const name = document.getElementById('productName').value;
const price = document.getElementById('productPrice').value;
const description = document.getElementById('productDescription').value;
const image = document.getElementById('productImage').value;
const name = document.getElementById("productName").value;
const price = document.getElementById("productPrice").value;
const description = document.getElementById("productDescription").value;
const image = document.getElementById("productImage").value;
const productCard = `
<div class="col">
<div class="card h-100 border-0 shadow-sm">
@@ -132,8 +285,8 @@
</div>
</div>
`;
document.getElementById('productsContainer').insertAdjacentHTML('beforeend', productCard);
document.getElementById("productsContainer").insertAdjacentHTML("beforeend", productCard);
this.reset();
});
</script>

BIN
dist/assets/adidas-gadQV-Lz.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
dist/assets/ava-DiHUHyvl.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
dist/assets/lacoste-BSTUvTkt.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
dist/assets/napapisaj-DNuXYAGR.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

BIN
dist/assets/samba-C8wu5LAG.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

1
dist/assets/styles-DJDadfij.css vendored
View File

@@ -1 +0,0 @@
body{padding-top:56px;background-color:#f8f9fa}.bg-custom{background-color:#00264d!important}.btn-custom{background-color:#00264d;border-color:#00264d;color:#fff}.btn-custom:hover{background-color:#036;border-color:#036;color:#fff}.card{transition:transform .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000001a}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.navbar-brand img{border:2px solid rgba(255,255,255,.1)}.form-control:focus{border-color:#00264d;box-shadow:0 0 0 .25rem #00264d40}@media (max-width: 768px){.navbar-brand span{font-size:1rem}.display-4{font-size:2rem}}

84
dist/basket.html vendored
View File

@@ -1,43 +1,43 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop basket</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" crossorigin href="/assets/styles-DJDadfij.css">
</head>
<body>
<!-- Навигация (как в main.html) -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<!-- ... та же навигация, что и в main.html ... -->
</nav>
<!-- Основной контент -->
<main class="container my-4">
<div class="text-center py-5">
<h1 class="mb-4">Здесь будут лежать твои товары</h1>
<p class="lead mb-4">А пока здесь так пусто...</p>
<img src="/assets/sad1-DBuXZxMU.jpg" alt="Пустая корзина" class="img-fluid rounded" style="max-height: 300px;">
<div class="mt-4">
<a href="catalog.html" class="btn btn-lg" style="background-color: #00264d; color: white;">
<i class="bi bi-arrow-left me-2"></i>Вернуться в каталог
</a>
</div>
</div>
</main>
<!-- Подвал (как в main.html) -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<!-- ... тот же подвал, что и в main.html ... -->
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop basket</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Навигация (как в main.html) -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<!-- ... та же навигация, что и в main.html ... -->
</nav>
<!-- Основной контент -->
<main class="container my-4">
<div class="text-center py-5">
<h1 class="mb-4">Здесь будут лежать твои товары</h1>
<p class="lead mb-4">А пока здесь так пусто...</p>
<img src="/assets/sad1-DBuXZxMU.jpg" alt="Пустая корзина" class="img-fluid rounded" style="max-height: 300px;">
<div class="mt-4">
<a href="catalog.html" class="btn btn-lg" style="background-color: #00264d; color: white;">
<i class="bi bi-arrow-left me-2"></i>Вернуться в каталог
</a>
</div>
</div>
</main>
<!-- Подвал (как в main.html) -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<!-- ... тот же подвал, что и в main.html ... -->
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

433
dist/catalog.html vendored
View File

@@ -1,141 +1,294 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop catalog</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" crossorigin href="/assets/styles-DJDadfij.css">
</head>
<body>
<!-- Навигация (как в main.html) -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<!-- ... та же навигация, что и в main.html ... -->
</nav>
<!-- Основной контент -->
<main class="container my-4">
<h1 class="text-center mb-4">Каталог товаров</h1>
<!-- Форма добавления товара -->
<div class="card mb-4 border-0 shadow-sm">
<div class="card-header" style="background-color: #00264d; color: white;">
<h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Добавить новый товар</h5>
</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="text" class="form-control" id="productPrice" required>
</div>
<div class="col-12">
<label for="productDescription" class="form-label">Описание</label>
<textarea class="form-control" id="productDescription" rows="3" required></textarea>
</div>
<div class="col-12">
<label for="productImage" class="form-label">Ссылка на изображение</label>
<input type="text" class="form-control" id="productImage" required>
</div>
<div class="col-12">
<button type="submit" class="btn" style="background-color: #00264d; color: white;">
<i class="bi bi-check-circle me-2"></i>Добавить товар
</button>
</div>
</form>
</div>
</div>
<!-- Карточки товаров -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" id="productsContainer">
<!-- Карточка товара 1 -->
<div class="col">
<div class="card h-100 border-0 shadow-sm">
<img src="/assets/stonik-D_cwcHTM.jpg" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Stone Island</h5>
<p class="card-text">super idol rovny pacan, groza rayona, mother's modnik, патч на месте</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$1999.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Остальные товары аналогично -->
</div>
</main>
<!-- Подвал (как в main.html) -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<!-- ... тот же подвал, что и в main.html ... -->
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Скрипт для добавления товаров -->
<script>
document.getElementById('addProductForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('productName').value;
const price = document.getElementById('productPrice').value;
const description = document.getElementById('productDescription').value;
const image = document.getElementById('productImage').value;
const productCard = `
<div class="col">
<div class="card h-100 border-0 shadow-sm">
<img src="${image}" class="card-img-top" alt="${name}">
<div class="card-body">
<h5 class="card-title">${name}</h5>
<p class="card-text">${description}</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">${price}</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
`;
document.getElementById('productsContainer').insertAdjacentHTML('beforeend', productCard);
this.reset();
});
</script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop catalog</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="main.html">
<img src="/assets/cyxaruk%20shop%20logo-DRloma41.jpg" alt="логотип" width="50" height="50" class="rounded-circle me-2">
<span class="fw-bold">cyxaruk shop</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="catalog.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
<i class="bi bi-list-ul me-1"></i>Каталог
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="bi bi-gender-male me-2"></i>Для мужчин</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gender-female me-2"></i>Для женщин</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-emoji-smile me-2"></i>Для детей</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-globe me-2"></i>Заказ из-за границы</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html"><i class="bi bi-telephone me-1"></i>Контакты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="likes.html"><i class="bi bi-heart me-1"></i>Избранное</a>
</li>
<li class="nav-item">
<a class="nav-link" href="basket.html"><i class="bi bi-cart me-1"></i>Корзина</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container my-4">
<h1 class="text-center mb-4">Каталог товаров</h1>
<!-- Карточки товаров -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5" id="productsContainer">
<!-- Карточка товара 1 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="/assets/stonik-D_cwcHTM.jpg" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Stone Island</h5>
<p class="card-text">super idol rovny pacan, groza rayona, mother's modnik, патч на месте</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$1999.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Карточка товара 2 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="/assets/adidas-gadQV-Lz.jpg" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Adidas</h5>
<p class="card-text">sportik, street, baskemtball, air, old school</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$19.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Карточка товара 3 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="/assets/napapisaj-DNuXYAGR.jpg" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Napapisaj</h5>
<p class="card-text">super idol rovny pacan, groza rayona, mother's modnik, +rep from brothers</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$1499.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Карточка товара 4 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="/assets/lacoste-BSTUvTkt.png" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Lacoste</h5>
<p class="card-text">style, nice, mother's modnik, cotton, krokodil</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$399.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
<!-- Карточка товара 5 -->
<div class="col">
<div class="card h-100 border-0 shadow">
<img src="/assets/samba-C8wu5LAG.png" class="card-img-top" alt="Stone Island">
<div class="card-body">
<h5 class="card-title">Samba</h5>
<p class="card-text">super idol rovny pacan, groza rayona, mother's modnik, +rep from brothers</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">$449.99</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-4 border-0 shadow">
<div class="card-header" style="background-color: #00264d; color: white;">
<h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Добавить новый товар</h5>
</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="text" class="form-control" id="productPrice" required>
</div>
<div class="col-12">
<label for="productDescription" class="form-label">Описание</label>
<textarea class="form-control" id="productDescription" rows="3" required></textarea>
</div>
<div class="col-12">
<label for="productImage" class="form-label">Ссылка на изображение</label>
<input type="text" class="form-control" id="productImage" required>
</div>
<div class="col-12">
<button type="submit" class="btn" style="background-color: #00264d; color: white;">
<i class="bi bi-check-circle me-2"></i>Добавить товар
</button>
</div>
</form>
</div>
</div>
</main>
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<div class="container">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<div class="d-flex align-items-center mb-3">
<a href="https://t.me/cyxarukShop" class="text-white me-3">
<i class="bi bi-telegram fs-2"></i>
</a>
<span>Подпишитесь на нас в Telegram</span>
</div>
<div class="d-flex align-items-center">
<a href="https://www.avito.ru/..." class="text-white me-3">
<i class="bi bi-shop-window fs-2"></i>
</a>
<span>Мы на Авито</span>
</div>
</div>
<div class="col-md-6 text-md-end">
<h5>Контакты</h5>
<p><i class="bi bi-telephone me-2"></i>89876320523</p>
<p><i class="bi bi-geo-alt me-2"></i>Ulyanovsk, Russia</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById("addProductForm").addEventListener("submit", function (e) {
e.preventDefault();
const name = document.getElementById("productName").value;
const price = document.getElementById("productPrice").value;
const description = document.getElementById("productDescription").value;
const image = document.getElementById("productImage").value;
const productCard = `
<div class="col">
<div class="card h-100 border-0 shadow-sm">
<img src="${image}" class="card-img-top" alt="${name}">
<div class="card-body">
<h5 class="card-title">${name}</h5>
<p class="card-text">${description}</p>
</div>
<div class="card-footer bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<span class="text-muted">${price}</span>
<button class="btn btn-sm" style="background-color: #00264d; color: white;">
<i class="bi bi-cart-plus me-1"></i>В корзину
</button>
</div>
<div class="mt-2 d-flex justify-content-between">
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-heart"></i> В избранное
</button>
<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-share"></i> Поделиться
</button>
</div>
</div>
</div>
</div>
`;
document.getElementById("productsContainer").insertAdjacentHTML("beforeend", productCard);
this.reset();
});
</script>
</body>
</html>

186
dist/contacts.html vendored
View File

@@ -1,94 +1,94 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop contacts</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" crossorigin href="/assets/styles-DJDadfij.css">
</head>
<body>
<!-- Навигация (как в main.html) -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<!-- ... та же навигация, что и в main.html ... -->
</nav>
<!-- Основной контент -->
<main class="container my-4">
<h1 class="text-center mb-4">Контакты</h1>
<div class="card border-0 shadow-sm mb-4">
<div class="card-header" style="background-color: #00264d; color: white;">
<h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Контактная информация</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<caption>Контакты (звонить только в поддержку)</caption>
<thead class="table-dark">
<tr>
<th>ФИО</th>
<th>Должность</th>
<th>Телефон</th>
<th>Телеграм</th>
</tr>
</thead>
<tbody>
<tr>
<td>Платонов Артемий Михайлович</td>
<td>Администрация / продавец</td>
<td>89876320523</td>
<td>@RBCScyxaruk</td>
</tr>
<!-- Остальные контакты аналогично -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Форма обратной связи -->
<div class="card border-0 shadow-sm">
<div class="card-header" style="background-color: #00264d; color: white;">
<h5 class="mb-0"><i class="bi bi-envelope me-2"></i>Форма обратной связи</h5>
</div>
<div class="card-body">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="name" class="form-label">Ваше имя</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="col-12">
<label for="message" class="form-label">Сообщение</label>
<textarea class="form-control" id="message" rows="3" required></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn" style="background-color: #00264d; color: white;">
<i class="bi bi-send me-2"></i>Отправить
</button>
</div>
</div>
</form>
</div>
</div>
</main>
<!-- Подвал (как в main.html) -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<!-- ... тот же подвал, что и в main.html ... -->
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop contacts</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Навигация (как в main.html) -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<!-- ... та же навигация, что и в main.html ... -->
</nav>
<!-- Основной контент -->
<main class="container my-4">
<h1 class="text-center mb-4">Контакты</h1>
<div class="card border-0 shadow-sm mb-4">
<div class="card-header" style="background-color: #00264d; color: white;">
<h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Контактная информация</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<caption>Контакты (звонить только в поддержку)</caption>
<thead class="table-dark">
<tr>
<th>ФИО</th>
<th>Должность</th>
<th>Телефон</th>
<th>Телеграм</th>
</tr>
</thead>
<tbody>
<tr>
<td>Платонов Артемий Михайлович</td>
<td>Администрация / продавец</td>
<td>89876320523</td>
<td>@RBCScyxaruk</td>
</tr>
<!-- Остальные контакты аналогично -->
</tbody>
</table>
</div>
</div>
</div>
<!-- Форма обратной связи -->
<div class="card border-0 shadow-sm">
<div class="card-header" style="background-color: #00264d; color: white;">
<h5 class="mb-0"><i class="bi bi-envelope me-2"></i>Форма обратной связи</h5>
</div>
<div class="card-body">
<form>
<div class="row g-3">
<div class="col-md-6">
<label for="name" class="form-label">Ваше имя</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="col-12">
<label for="message" class="form-label">Сообщение</label>
<textarea class="form-control" id="message" rows="3" required></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn" style="background-color: #00264d; color: white;">
<i class="bi bi-send me-2"></i>Отправить
</button>
</div>
</div>
</form>
</div>
</div>
</main>
<!-- Подвал (как в main.html) -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<!-- ... тот же подвал, что и в main.html ... -->
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

84
dist/likes.html vendored
View File

@@ -1,43 +1,43 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop likes</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" crossorigin href="/assets/styles-DJDadfij.css">
</head>
<body>
<!-- Навигация (как в main.html) -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<!-- ... та же навигация, что и в main.html ... -->
</nav>
<!-- Основной контент -->
<main class="container my-4">
<div class="text-center py-5">
<h1 class="mb-4">Здесь будут лежать товары, которые тебе понравились</h1>
<p class="lead mb-4">А пока здесь так пусто...</p>
<img src="/assets/sad2-GwJVM7cz.jpeg" alt="Пустое избранное" class="img-fluid rounded" style="max-height: 300px;">
<div class="mt-4">
<a href="catalog.html" class="btn btn-lg" style="background-color: #00264d; color: white;">
<i class="bi bi-heart me-2"></i>Найти что-то интересное
</a>
</div>
</div>
</main>
<!-- Подвал (как в main.html) -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<!-- ... тот же подвал, что и в main.html ... -->
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop likes</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Навигация (как в main.html) -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<!-- ... та же навигация, что и в main.html ... -->
</nav>
<!-- Основной контент -->
<main class="container my-4">
<div class="text-center py-5">
<h1 class="mb-4">Здесь будут лежать товары, которые тебе понравились</h1>
<p class="lead mb-4">А пока здесь так пусто...</p>
<img src="/assets/sad2-GwJVM7cz.jpeg" alt="Пустое избранное" class="img-fluid rounded" style="max-height: 300px;">
<div class="mt-4">
<a href="catalog.html" class="btn btn-lg" style="background-color: #00264d; color: white;">
<i class="bi bi-heart me-2"></i>Найти что-то интересное
</a>
</div>
</div>
</main>
<!-- Подвал (как в main.html) -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<!-- ... тот же подвал, что и в main.html ... -->
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

291
dist/main.html vendored
View File

@@ -1,130 +1,163 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" crossorigin href="/assets/styles-DJDadfij.css">
</head>
<body>
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="main.html">
<img src="/assets/cyxaruk%20shop%20logo-DRloma41.jpg" alt="логотип" width="50" height="50" class="rounded-circle me-2">
<span class="fw-bold">cyxaruk shop</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="catalog.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
<i class="bi bi-list-ul me-1"></i>Каталог
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="bi bi-gender-male me-2"></i>Для мужчин</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gender-female me-2"></i>Для женщин</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-emoji-smile me-2"></i>Для детей</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-globe me-2"></i>Заказ из-за границы</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html"><i class="bi bi-telephone me-1"></i>Контакты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="likes.html"><i class="bi bi-heart me-1"></i>Избранное</a>
</li>
<li class="nav-item">
<a class="nav-link" href="basket.html"><i class="bi bi-cart me-1"></i>Корзина</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Основной контент -->
<main class="container my-4">
<!-- Промо-секция -->
<div class="row align-items-center mb-5">
<div class="col-md-6 mb-4 mb-md-0">
<img src="/assets/%D1%88%D0%BC%D0%BE%D1%82%D0%BA%D0%B82-CnCqIiH2.jpg" alt="Промо" class="img-fluid rounded shadow">
</div>
<div class="col-md-6 text-center text-md-start">
<h2 class="fw-bold mb-3"><em>Official cyxaruk shop website</em></h2>
<a href="catalog.html" class="btn btn-lg" style="background-color: #00264d; color: white;">
<i class="bi bi-bag me-2"></i>Начать покупки
</a>
</div>
</div>
<!-- Заголовок -->
<div class="text-center mb-5">
<h1 class="fw-bold">ONLY THE FATTEST STUFF</h1>
</div>
<!-- Галерея -->
<div class="row g-4 mb-5">
<div class="col-md-6">
<img src="/assets/%D1%88%D0%BC%D0%BE%D1%82%D0%BA%D0%B8-mMMCdlPj.jpg" alt="Товары 1" class="img-fluid rounded shadow">
</div>
<div class="col-md-6">
<img src="/assets/%D1%88%D0%BC%D0%BE%D1%82%D0%BA%D0%B831-TxMfC034.jpg" alt="Товары 2" class="img-fluid rounded shadow">
</div>
</div>
<!-- Отзывы -->
<h2 class="text-center mb-4"><em>Отзывы</em></h2>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center">
<div class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; background-color: #e9ecef;"></div>
<h5 class="card-title">Pistoletov Sasha</h5>
<p class="card-text">стон 1200 рублей и расход, го можно пж?</p>
</div>
</div>
</div>
<!-- Остальные отзывы аналогично -->
</div>
</main>
<!-- Подвал -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<div class="container">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<div class="d-flex align-items-center mb-3">
<a href="https://t.me/cyxarukShop" class="text-white me-3">
<i class="bi bi-telegram fs-2"></i>
</a>
<span>Подпишитесь на нас в Telegram</span>
</div>
<div class="d-flex align-items-center">
<a href="https://www.avito.ru/..." class="text-white me-3">
<i class="bi bi-shop-window fs-2"></i>
</a>
<span>Мы на Авито</span>
</div>
</div>
<div class="col-md-6 text-md-end">
<h5>Контакты</h5>
<p><i class="bi bi-telephone me-2"></i>89876320523</p>
<p><i class="bi bi-geo-alt me-2"></i>Ulyanovsk, Russia</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop</title>
<link rel="shortcut icon" href="/assets/favicon-cXvr3Sfo.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/styles.css" />
<style>
body {
color: #00264d;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="main.html">
<img src="/assets/cyxaruk%20shop%20logo-DRloma41.jpg" alt="логотип" width="50" height="50" class="rounded-circle me-2">
<span class="fw-bold">cyxaruk shop</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="catalog.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
<i class="bi bi-list-ul me-1"></i>Каталог
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="bi bi-gender-male me-2"></i>Для мужчин</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gender-female me-2"></i>Для женщин</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-emoji-smile me-2"></i>Для детей</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-globe me-2"></i>Заказ из-за границы</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html"><i class="bi bi-telephone me-1"></i>Контакты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="likes.html"><i class="bi bi-heart me-1"></i>Избранное</a>
</li>
<li class="nav-item">
<a class="nav-link" href="basket.html"><i class="bi bi-cart me-1"></i>Корзина</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container my-4">
<div class="row align-items-center mb-5">
<div class="col-md-6 mb-4 mb-md-0">
<img src="/assets/%D1%88%D0%BC%D0%BE%D1%82%D0%BA%D0%B82-CnCqIiH2.jpg" alt="Промо" class="img-fluid rounded shadow">
</div>
<div class="col-md-6 text-center text-md-end d-flex flex-column align-items-md-center">
<h2 class="fw-bold mb-3"><em>Official cyxaruk shop website</em></h2>
<a href="catalog.html" class="btn btn-lg" style="background-color: #00264d; color: white;">
<i class="bi bi-bag me-2"></i>Начать покупки
</a>
</div>
</div>
<div class="text-center mb-5">
<h1 class="fw-bold">ONLY THE FATTEST STUFF</h1>
</div>
<div class="row g-4 mb-5">
<div class="col-md-6">
<img src="/assets/%D1%88%D0%BC%D0%BE%D1%82%D0%BA%D0%B8-mMMCdlPj.jpg" alt="Товары 1" class="img-fluid rounded shadow">
</div>
<div class="col-md-6">
<img src="/assets/%D1%88%D0%BC%D0%BE%D1%82%D0%BA%D0%B831-TxMfC034.jpg" alt="Товары 2" class="img-fluid rounded shadow">
</div>
</div>
<h2 class="text-center mb-4"><em>Отзывы</em></h2>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="/assets/ava-DiHUHyvl.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="AUC EVGEN">
<h5 class="card-title">AUC EVGEN</h5>
<p class="card-text">Сотрудничаем уже 7 лет, все четко</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="/assets/ava-DiHUHyvl.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="Vupava Kitalya">
<h5 class="card-title">Vupava Kitalya</h5>
<p class="card-text">Просил найти его бренд Napapisaj, очень редкая штука, но он справился, 10/10</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="/assets/ava-DiHUHyvl.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="Hater228">
<h5 class="card-title">Hater228</h5>
<p class="card-text">Как от ****** отойдешь, цену поменяй, клоун</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="/assets/ava-DiHUHyvl.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="Anjela Danil">
<h5 class="card-title">Anjela Danil</h5>
<p class="card-text">Норм продавец, 9/10, пук пук</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="/assets/ava-DiHUHyvl.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="Bima Daryshev">
<h5 class="card-title">Bima Daryshev</h5>
<p class="card-text">При покупке не возникло никаких проблем, предоставляет огромное кол-во скидок</p>
</div>
</div>
</div>
</div>
</main>
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<div class="container">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<div class="d-flex align-items-center mb-3">
<a href="https://t.me/cyxarukShop" class="text-white me-3">
<i class="bi bi-telegram fs-2"></i>
</a>
<span>Подпишитесь на нас в Telegram</span>
</div>
<div class="d-flex align-items-center">
<a href="https://www.avito.ru/..." class="text-white me-3">
<i class="bi bi-shop-window fs-2"></i>
</a>
<span>Мы на Авито</span>
</div>
</div>
<div class="col-md-6 text-md-end">
<h5>Контакты</h5>
<p><i class="bi bi-telephone me-2"></i>89876320523</p>
<p><i class="bi bi-geo-alt me-2"></i>Ulyanovsk, Russia</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

BIN
img/ava.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

67
main.html
View File

@@ -5,15 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>cyxaruk shop</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Кастомные стили -->
<link rel="stylesheet" href="css/styles.css" />
<style>
body {
color: #00264d;
}
</style>
</head>
<body>
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #00264d;">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="main.html">
@@ -51,14 +52,12 @@
</div>
</nav>
<!-- Основной контент -->
<main class="container my-4">
<!-- Промо-секция -->
<div class="row align-items-center mb-5">
<div class="col-md-6 mb-4 mb-md-0">
<img src="img/шмотки2.jpg" alt="Промо" class="img-fluid rounded shadow">
</div>
<div class="col-md-6 text-center text-md-start">
<div class="col-md-6 text-center text-md-end d-flex flex-column align-items-md-center">
<h2 class="fw-bold mb-3"><em>Official cyxaruk shop website</em></h2>
<a href="catalog.html" class="btn btn-lg" style="background-color: #00264d; color: white;">
<i class="bi bi-bag me-2"></i>Начать покупки
@@ -66,12 +65,10 @@
</div>
</div>
<!-- Заголовок -->
<div class="text-center mb-5">
<h1 class="fw-bold">ONLY THE FATTEST STUFF</h1>
</div>
<!-- Галерея -->
<div class="row g-4 mb-5">
<div class="col-md-6">
<img src="img/шмотки.jpg" alt="Товары 1" class="img-fluid rounded shadow">
@@ -81,23 +78,60 @@
</div>
</div>
<!-- Отзывы -->
<h2 class="text-center mb-4"><em>Отзывы</em></h2>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<div class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; background-color: #e9ecef;"></div>
<h5 class="card-title">Pistoletov Sasha</h5>
<p class="card-text">стон 1200 рублей и расход, го можно пж?</p>
<img src="img/ava.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="AUC EVGEN">
<h5 class="card-title">AUC EVGEN</h5>
<p class="card-text">Сотрудничаем уже 7 лет, все четко</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="img/ava.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="Vupava Kitalya">
<h5 class="card-title">Vupava Kitalya</h5>
<p class="card-text">Просил найти его бренд Napapisaj, очень редкая штука, но он справился, 10/10</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="img/ava.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="Hater228">
<h5 class="card-title">Hater228</h5>
<p class="card-text">Как от ****** отойдешь, цену поменяй, клоун</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="img/ava.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="Anjela Danil">
<h5 class="card-title">Anjela Danil</h5>
<p class="card-text">Норм продавец, 9/10, пук пук</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow">
<div class="card-body text-center">
<img src="img/ava.jpg" class="mx-auto mb-3 rounded-circle" style="width: 60px; height: 60px; object-fit: cover;" alt="Bima Daryshev">
<h5 class="card-title">Bima Daryshev</h5>
<p class="card-text">При покупке не возникло никаких проблем, предоставляет огромное кол-во скидок</p>
</div>
</div>
</div>
<!-- Остальные отзывы аналогично -->
</div>
</main>
<!-- Подвал -->
<footer class="py-4 mt-5" style="background-color: #00264d; color: white;">
<div class="container">
<div class="row">
@@ -124,7 +158,6 @@
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

13
styles.css
View File

@@ -1,10 +1,11 @@
/* Основные настройки */
body {
padding-top: 56px;
background-color: #f8f9fa;
color:#00264d
}
/* Цветовая схема */
.bg-custom {
background-color: #00264d !important;
}
@@ -21,7 +22,7 @@ body {
color: white;
}
/* Карточки товаров */
.card {
transition: transform 0.3s ease;
}
@@ -31,7 +32,7 @@ body {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Адаптивные изображения */
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
@@ -41,12 +42,12 @@ body {
height: auto;
}
/* Навигация */
.navbar-brand img {
border: 2px solid rgba(255, 255, 255, 0.1);
}
/* Формы */
.form-control:focus {
border-color: #00264d;
box-shadow: 0 0 0 0.25rem rgba(0, 38, 77, 0.25);