141 lines
7.2 KiB
HTML
141 lines
7.2 KiB
HTML
<!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="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>
|
||
|
||
<!-- Основной контент -->
|
||
<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="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 ... -->
|
||
</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>
|
||
</body>
|
||
</html> |