header.php - master - burmistrova_irina/web-application

header.php
1 370 строк43 KB
burmistrova_irina
upload files
21 фев 2025, 13:38
21 фев 2025, 13:3808eb655
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Интернет-магазин одежды</title>
    <link rel="stylesheet" href="slider.css">
    <link rel="stylesheet/less" type="text/css" href="slider.less">
    <script src="https://cdn.jsdelivr.net/npm/less@4.1.1"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body {
            font-family: Arial, sans-serif;
            height: 100%;
            display: flex;
            flex-direction: column;
            animation: gradientAnimation 10s ease infinite;
            background: linear-gradient(270deg, #b3dcfd, #a500b5, #ff0000);
            background-size: 300% 300%;
            background-repeat: no-repeat;
            overflow-y: auto;
        }

        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        header {
            background: linear-gradient(270deg, #b3dcfd, #a500b5, #ff0000);
            opacity: 0.5;
            color: black;
            padding: 10px;
            text-align: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }

        .nav {
            position: fixed;
            top: 60px;
            right: 20px;
            display: flex;
            gap: 20px;
            z-index: 1000;
            height: 40px;
            align-items: center;
        }

        .nav a {
            text-decoration: none;
            width: 40px;
            height: 40px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav img {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

        .menu {
            display: none;
            background-color: #e761ba;
            position: fixed;
            top: 100px;
            left: 0;
            height: 100%;
            width: 12%;
            z-index: 1000;
            overflow-y: auto;
        }

        .menu a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #333;
            width: 80%;
            text-align: left;
            margin-left: 20px;
        }

        .menu a:hover {
            background-color: #f0f0f0;
        }

        .hamburger {
            width: 30px;
            height: 30px;
            position: fixed;
            left: 10px;
            top: 65px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            z-index: 1000;
        }

        .hamburger div {
            width: 100%;
            height: 4px;
            background-color: black;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
            border-radius: 10px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }

        .search-bar {
            margin-top: 120px;
            text-align: center;
        }

        .search-bar input {
            height:40px;
            padding: 10px;
            width: 300px;
            border-radius: 20px;
            border: none;
            padding-left:10px;
            vertical-align: middle;
        }

        .search-bar button {
            height:40px;
            box-sizing:  border-box;
            padding: 10px 10px;
            border-radius: 20px;
            border: none;
            background-color: #ff7eb3;
            color: white;
            vertical-align: middle;
            cursor: pointer;
        }

        .additional-menu {
            text-align: center;
            margin-top: 40px;
        }

        .additional-menu ul {
            list-style-type: none;
            padding: 0;
            display: flex;  /* Горизонтальное выравниание */
            justify-content: center;
            margin: 0;
        }

        .additional-menu li {
            margin: 0 15px;
            display: inline; /* Важно для горизонтального отображения */
        }

        .additional-menu a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            font-size: 1em;
        }

        .additional-menu a:hover {
            color: #ff7eb3;
        }

        .navigation button {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: background-color 0.3s ease;
        }

        .navigation button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .navigation button span {
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        .slider-nav button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #333;
            transition: all 0.3s ease;
            z-index: 100;
        }

        .slider-nav button:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateY(-50%) scale(1.1);
        }

        .slider-nav .prev {
            left: 20px;
        }

        .slider-nav .next {
            right: 20px;
        }

        .nav-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

@slider-width: 100%; // Ширина слайдера
@slider-height: 70px; // Высота слайдера
@slider-border-radius: 5px; // Радиус скругления углов слайдера
@slider-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); // Тень слайдера
@nav-button-size: 30px; // Размер кнопок навигации (уменьшен)
@nav-button-color: rgba(0, 0, 0, 0.5); // Цвет кнопок навигации
@nav-button-hover-color: rgba(0, 0, 0, 0.8); // Цвет кнопок при наведении
@text-color: rgb(231, 252, 50); // Цвет текста
@transition-duration: 0.5s; // Длительность перехода
@mobile-breakpoint: 768px; // Мобильный брейкпоинт


.slider {
  width: @slider-width; /* Ширина слайдера 100% */
  height: @slider-height;
  max-width: 100%; /* Убираем ограничение по ирине */
  margin: 20px 0;
  position: relative;
  overflow: hidden;
  border-radius: @slider-border-radius; /* Убираем радиус, если не нужен */
  box-shadow: @slider-shadow;
}

.slider .slides {
  display: flex;
  transition: transform @transition-duration ease;
  width: 100%;
}

.slider .slides .slide {
  min-width: 100%; /* Каждый слайд занимает 100% ширины */
  height: 70px; /* Фиксированная высота для слайдера (можно подкоррктировать) */
  box-sizing: border-box;
  text-align: center;
  position: relative;
  background-size: contain; /* Изображение полностью покрывает слайд */
  background-position: center; /* Центрируем изображение */
  background-repeat: repeat-x; 
  transition: transform @transition-duration ease;
}

/* Убедитесь, что каждое изображение сайдера имеет правильное фоновое изображение */
.slider .slides .slide:nth-child(1) {
  background-image: url('new.png');
}

.slider .slides .slide:nth-child(2) {
  background-image: url('sale.png');
}

.slider .slides .slide:nth-child(3) {
  background-image: url('speed.png');
}

.slider .slides .slide:nth-child(4) {
  background-image: url('slider4.png');
}

.slider .slides .slide:nth-child(5) {
  background-image: url('present.png');
}

.slider .slide-text {
  position: absolute;
  bottom: 20px; /* Текст будет внизу слайда */
  left: 50%;
  transform: translateX(-50%);
  color: @text-color;
  text-align: center;
  font-family: Arial, sans-serif;
}

.slider .slide-text h2 {
  font-size: 2em;
  margin: 0;
  font-weight: 800px;
}

.slider .slide-text p {
  font-size: 1.2em;
  margin-top: 10px;
}

button {
  background-color: @nav-button-color;
  color: white;
  border: none;
  padding: @nav-button-size;
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px; // Уменьшаем размер шрифта
  transition: background-color 0.3s ease;

  &:hover {
    background-color: @nav-button-hover-color;
  }
}
  
  .navigation {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
  }
  
  .navigation button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
  }

  // Стиль для активного слайда
.active {
  opacity: 1;
  z-index: 10;
  transition: opacity @transition-duration ease;
}

.inactive {
  opacity: 0;
  z-index: 1;
  transition: opacity @transition-duration ease;
}


  
  // Мобильные стили для слайдера
  @media (max-width: @mobile-breakpoint) {
    .slider {
      padding: 0 10px; // Добавляем отступы для мобильных устройств
    }
    .slide {
      padding: 20px; // Меньше отступов для мобильных
    }
  }

.form-group {
    margin-bottom: 25px; /* Увеличенный отступ между полями */
}

.password-group {
    margin-bottom: 35px; /* Дополнительный отступ перед кнопками */
}

.form-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.login-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    background-color: rgba(255, 126, 179, 0.8);
    color: white;
}

.login-btn:hover {
    background-color: rgba(255, 126, 179, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 126, 179, 0.3);
}

.admin-login-btn {
    width: 100%;
    padding: 12px;
    border: 2px solid rgba(255, 126, 179, 0.8);
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    background-color: white;
    color: rgba(255, 126, 179, 0.8);
    display: block; /* Всегда видимая кнопка */
    margin-top: 10px; /* Отступ от верхней кнопки */
}

.admin-login-btn:hover {
    background-color: rgba(255, 126, 179, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 126, 179, 0.1);
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid rgba(255, 126, 179, 0.2);
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.form-group input:focus {
    border-color: rgba(255, 126, 179, 0.8);
    outline: none;
    box-shadow: 0 0 10px rgba(255, 126, 179, 0.1);
}

.cart-container {
    position: relative;
    display: inline-block;
}

.cart-icon {
    position: relative;
    display: inline-block;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e761ba;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    min-width: 18px;
    text-align: center;
}

.mini-cart {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    width: 400px;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    z-index: 1000;
    margin-top: 10px;
}

.view-cart-btn {
    display: block;
    background: #e761ba;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    margin: 10px;
    transition: background-color 0.3s ease;
}

.view-cart-btn:hover {
    background: #d44da8;
}

/* Добавляем стили для кнопки корзины */
.cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.cart-button img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e761ba;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    min-width: 18px;
    text-align: center;
}

/* Обновляем стили навигации */
.nav {
    position: fixed;
    top: 60px;
    right: 20px;
    display: flex;
    gap: 20px;
    z-index: 1000;
    height: 40px;
    align-items: center;
}

.nav a {
    text-decoration: none;
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.header-controls a {
    text-decoration: none;
    width: 30px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-controls img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.cart-button {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e761ba;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    min-width: 18px;
    text-align: center;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 10px 30px;
}

.user-greeting {
    color: black;
    margin-right: 15px;
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.cart-button img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e761ba;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    min-width: 18px;
    text-align: center;
}

.nav-controls a {
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
}

.nav-controls img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}



/* Добавляем стили для новых элементов */
.back-to-login-btn {
    width: 100%;
    padding: 12px;
    border: 2px solid #ff7eb3;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    background-color: white;
    color: #ff7eb3;
    margin-top: 10px;
}

.back-to-login-btn:hover {
    background-color: #ff7eb3;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 126, 179, 0.3);
}

.register-submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    background-color: #ff7eb3;
    color: white;
    margin-top: 10px;
}

.register-submit-btn:hover {
    background-color: #e761ba;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 126, 179, 0.3);
}

.register-btn {
    padding: 8px 15px;
    background-color: rgba(255, 126, 179, 0.8);
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.register-btn:hover {
    background-color: rgba(255, 126, 179, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 126, 179, 0.3);
}

.show-register-btn {
    padding: 8px 15px;
    background-color: rgba(255, 126, 179, 0.8);
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.show-register-btn:hover {
    background-color: rgba(255, 126, 179, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 126, 179, 0.3);
}

    </style>
</head>
<body>
    <header>
        <h1>Интернет-магазин одежды</h1>
    </header>

    <!-- Добавляем поисковую строку -->
    <div class="search-bar">
        <form class="search-form" action="search.php" method="GET">
            <input type="text" name="query" placeholder="Поиск товаров..." required>
            <button type="submit">
            <i class="fas fa-search"></i>
                Поиск
            </button>
        </form>
    </div>

    <!-- Добавляем навигационное меню -->
    <div class="additional-menu">
        <ul>
            <li><a href="index.php">Главная</a></li>
            <li><a href="about.php">О нас</a></li>
            <li><a href="help.php">Помощь</a></li>
        </ul>
    </div>

    <!-- Добавляем слайдер -->
    <div class="slider" id="slider">
		<div class="slides">
			<!-- Слайд 1 -->
			<div class="slide">
				
				<div class="slide-text">
					<h2>Лучшие новинки сезона</h2>
					<p>Обновите свой стиль с новыми коллекциями одежды!</p>
				</div>
			</div>
			<!-- Слайд 2 -->
			<div class="slide">
				<div class="slide-text">
					<h2>Скидки до 50%</h2>
					<p>Не упустите шанс приобрести товары по сниженным ценам!</p>
				</div>
			</div>
			<!-- Слайд 3 -->
			<div class="slide">
				<div class="slide-text">
					<h2>Экспресс-доставка</h2>
					<p>Получите свой заказ уже через 1-2 дня!</p>
				</div>
			</div>
			<!-- Слайд 4 -->
			<div class="slide">
				<div class="slide-text">
					<h2>Акции месяца</h2>
					<p>Скидки и бонусы для наших любимых клиентов.</p>
				</div>
			</div>
			<!-- Слайд 5 -->
			<div class="slide">
				<div class="slide-text">
					<h2>Распродажа одежды</h2>
					<p>Успейте купить по выгодной цене!</p>
				</div>
			</div>
		</div>
		<div class="navigation">
			<button onclick="prevSlide()">← Назад</button>
			<button onclick="nextSlide()">Вперед →</button>
		</div>
	</div>


    <div class="hamburger" onclick="toggleMenu()">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="nav">
        <?php if (isset($_SESSION['user_id']) && isset($_SESSION['username'])): ?>
            <span class="user-greeting">Привет, <?php echo htmlspecialchars($_SESSION['username']); ?>!</span>
        <?php endif; ?>
        
        <div class="nav-controls">
            <a href="cart.php" class="cart-button">
                <img src="basket.png" alt="Корзина">
                <span id="cartCount" class="cart-count">0</span>
            </a>
            <?php if (isset($_SESSION['user_id'])): ?>
                <a href="logout.php">Выйти</a>
            <?php else: ?>
                <a href="#" id="loginButton">
                    <img src="lk.png" alt="Личный кабинет">
                </a>
            <?php endif; ?>
        </div>
    </div>

    <div class="menu" id="menu">
        <a href="category.php?category_id=1">Женская одежда</a>
        <a href="category.php?category_id=2">Мужская одежда</a>
        <a href="category.php?category_id=3">Детская одежда</a>
        <a href="category.php?category_id=4">Обувь</a>
        <a href="category.php?category_id=5">Аксессуары</a>
        <a href="category.php?category_id=6">Техника</a>
    </div>

    <!-- Модальное окно авторизации -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            
            <!-- Форма входа -->
            <div id="loginForm-container">
                <h2>Вход в личный кабинет</h2>
                <form id="loginForm">
                    <div class="form-group">
                        <input type="text" name="username" placeholder="Имя пользователя" required>
                    </div>
                    
                    <div class="form-group password-group">
                        <input type="password" name="password" placeholder="Пароль" required>
                    </div>
                    
                    <div class="form-buttons">
                        <button type="submit" class="login-btn">Войти</button>
                        <button type="button" class="admin-login-btn">Войти как администратор</button>
                        <button type="button" class="show-register-btn">Зарегистрироваться</button>
                    </div>
                </form>
            </div>
            
            <!-- Форма регистрации -->
            <div id="registerForm-container" style="display: none;">
                <h2>Регистрация</h2>
                <form id="registerForm">
                    <div class="form-group">
                        <input type="text" name="username" placeholder="Имя пользователя" required>
                    </div>
                    
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Email" required>
                    </div>
                    
                    <div class="form-group password-group">
                        <input type="password" name="password" placeholder="Пароль" required>
                    </div>
                    
                    <div class="form-group password-group">
                        <input type="password" name="confirm_password" placeholder="Подтвердите пароль" required>
                    </div>
                    
                    <div class="form-buttons">
                        <button type="submit" class="register-submit-btn">Зарегистрироваться</button>
                        <button type="button" class="back-to-login-btn">Вернуться к входу</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Добавляем скрипт для слайера -->
    <script>
        let currentIndex = 0;
        const slides = document.querySelectorAll('.slide');
        const totalSlides = slides.length;
        const intervalTime = 5000;

        function nextSlide() {
            slides[currentIndex].classList.remove('active');
            slides[currentIndex].classList.add('inactive');
            currentIndex = (currentIndex + 1) % totalSlides;
            slides[currentIndex].classList.remove('inactive');
            slides[currentIndex].classList.add('active');
            updateSliderPosition();
        }

        function prevSlide() {
            slides[currentIndex].classList.remove('active');
            slides[currentIndex].classList.add('inactive');
            currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
            slides[currentIndex].classList.remove('inactive');
            slides[currentIndex].classList.add('active');
            updateSliderPosition();
        }

        function updateSliderPosition() {
            const slidesContainer = document.querySelector('.slides');
            slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
        }

        // Инициализация слайдера
        document.addEventListener('DOMContentLoaded', function() {
            // Устанавливаем начальные классы
            slides[0].classList.add('active');
            for(let i = 1; i < slides.length; i++) {
                slides[i].classList.add('inactive');
            }
            updateSliderPosition();
            // Автоматическое переключение слайдов
            setInterval(nextSlide, intervalTime);
        });
    </script>

    <script>
        // Добавляем функцию для работы меню
        function toggleMenu() {
            var menu = document.getElementById("menu");
            menu.style.display = menu.style.display === "block" ? "none" : "block";
        }

        // Закрываем меню при клике вне его области
        document.addEventListener('click', function(event) {
            var menu = document.getElementById('menu');
            var hamburger = document.querySelector('.hamburger');
            
            if (!menu.contains(event.target) && !hamburger.contains(event.target)) {
                menu.style.display = 'none';
            }
        });
    </script>

    <script>
        // Обработка обычного входа
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = this.querySelector('[name="username"]').value;
            const password = this.querySelector('[name="password"]').value;
            
            const formData = new FormData();
            formData.append('username', username);
            formData.append('password', password);
            
            fetch('login.php', {
                method: 'POST',
                body: formData,
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    document.getElementById('loginModal').style.display = "none";
                    document.querySelector('.nav').innerHTML = `
                        <span>Привет, ${data.name}!</span>
                        <a href="logout.php">Выйти</a>
                        <a href="cart.php"><img src="basket.png" alt="Корзина"></a>
                    `;
                    window.location.reload();
                } else {
                    alert(data.message || 'Ошибка авторизации');
                }
            })
            .catch(error => {
                console.error('Ошибка:', error);
               
            });
        });

        // Обработка входа администратора
        document.querySelector('.admin-login-btn').addEventListener('click', function(e) {
            e.preventDefault();
            const form = document.getElementById('loginForm');
            const username = form.querySelector('[name="username"]').value;
            const password = form.querySelector('[name="password"]').value;
            
            const formData = new FormData();
            formData.append('username', username);
            formData.append('password', password);
            formData.append('is_admin', 'true');
            
            fetch('login.php', {
                method: 'POST',
                body: formData,
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success' && data.is_admin) {
                    document.getElementById('loginModal').style.display = "none";
                    document.querySelector('.nav').innerHTML = `
                        <span>Привет, ${data.name}!</span>
                        <a href="logout.php">Выйти</a>
                        <a href="cart.php"><img src="basket.png" alt="Корзина"></a>
                    `;
                    window.location.reload();
                } else {
                    alert(data.message || 'Ошибка авторизации администратора');
                }
            })
            .catch(error => {
                console.error('Ошибка:', error);
                
            });
        });
    </script>

    <script>
        // Функция проверки авторизации и загрузки корзины
        async function checkAuthAndLoadCart() {
            try {
                const response = await fetch('check_auth.php');
                const data = await response.json();
                
                if (data.authenticated) {
                    // Если пользователь авторизован, загружаем корзину
                    loadMiniCart();
                    document.querySelector('.cart-icon').style.display = 'block';
                } else {
                    // Если не авторизован, показываем сообщение
                    document.querySelector('.cart-icon').style.display = 'none';
                    const miniCartItems = document.getElementById('mini-cart-items');
                    if (miniCartItems) {
                        miniCartItems.innerHTML = `
                            <div class="empty-cart-message">
                                Для просмотра корзины необходимо авторизоваться
                                <br>
                                <button onclick="document.getElementById('loginModal').style.display='block'" 
                                        class="login-btn">
                                    Войти
                                </button>
                            </div>`;
                    }
                }
            } catch (error) {
                console.error('Ошибка проверки авторизации:', error);
            }
        }

        // Функция загрузки корзины
        async function loadMiniCart() {
            try {
                const response = await fetch('get_cart.php');
                const data = await response.json();
                
                if (data.status === 'success') {
                    const cartCount = document.getElementById('cartCount');
                    const miniCartItems = document.getElementById('mini-cart-items');
                    const miniCartTotal = document.getElementById('mini-cart-total');
                    
                    let totalItems = 0;
                    data.items.forEach(item => {
                        totalItems += parseInt(item.quantity);
                    });
                    
                    cartCount.textContent = totalItems;
                    cartCount.style.display = totalItems > 0 ? 'block' : 'none';
                    
                    if (data.items.length === 0) {
                        miniCartItems.innerHTML = '<div class="empty-cart-message">Корзина пуста</div>';
                        miniCartTotal.innerHTML = '';
                        return;
                    }

                    // Формируем HTML корзины
                    let itemsHtml = '';
                    data.items.forEach(item => {
                        itemsHtml += `
                            <div class="mini-cart-item">
                                <img src="${item.image_url || 'images/default.jpg'}" 
                                     alt="${item.name}"
                                     onerror="this.src='images/default.jpg'">
                                <div class="mini-cart-item-details">
                                    <div class="mini-cart-item-name">${item.name}</div>
                                    <div class="mini-cart-item-price">${item.price} ₽</div>
                                    <div class="mini-cart-item-quantity">
                                        <button class="quantity-btn" onclick="updateQuantity(${item.product_id}, -1)">-</button>
                                        <span>${item.quantity}</span>
                                        <button class="quantity-btn" onclick="updateQuantity(${item.product_id}, 1)">+</button>
                                    </div>
                                </div>
                                <div class="mini-cart-item-total">
                                    ${item.total} ₽
                                </div>
                            </div>
                        `;
                    });
                    
                    miniCartItems.innerHTML = itemsHtml;
                    miniCartTotal.innerHTML = `
                        <div class="cart-total">
                            Итого: ${data.total} ₽
                        </div>
                    `;
                }
            } catch (error) {
                console.error('Ошибка загрузки корзины:', error);
            }
        }

        // Проверяем авторизацию и загружаем корзину при загрузке страницы
        document.addEventListener('DOMContentLoaded', checkAuthAndLoadCart);

        // Проверяем авторизацию и загружаем корзину после успешного входа
        window.addEventListener('userLoggedIn', checkAuthAndLoadCart);
    </script>

    <script>
        // Функция обновления счетчика корзины
        async function updateCartCount() {
            try {
                const response = await fetch('get_cart.php');
                const data = await response.json();
                
                if (data.status === 'success') {
                    const cartCount = document.getElementById('cartCount');
                    let totalItems = 0;
                    
                    if (data.items) {
                        data.items.forEach(item => {
                            totalItems += parseInt(item.quantity);
                        });
                    }
                    
                    cartCount.textContent = totalItems;
                    cartCount.style.display = totalItems > 0 ? 'block' : 'none';
                }
            } catch (error) {
                console.error('Ошибка обновления счетчика корзины:', error);
            }
        }

        // Обновляем счетчик при загрузке страницы
        document.addEventListener('DOMContentLoaded', updateCartCount);

        // Обновляем счетчик после добавления товара в корзину
        window.addEventListener('cartUpdated', updateCartCount);
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Находим все кнопки регистрации на странице
            document.querySelectorAll('.register-btn').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    // Показываем модальное окно авторизации
                    document.getElementById('loginModal').style.display = 'block';
                    // Переключаемся на форму регистрации
                    document.getElementById('loginForm-container').style.display = 'none';
                    document.getElementById('registerForm-container').style.display = 'block';
                });
            });

            // Обработчик для кнопки "Вернуться к входу"
            document.querySelectorAll('.back-to-login-btn').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.getElementById('registerForm-container').style.display = 'none';
                    document.getElementById('loginForm-container').style.display = 'block';
                });
            });

            // Закрытие модального окна при клике на крестик
            document.querySelectorAll('.close').forEach(closeBtn => {
                closeBtn.addEventListener('click', function() {
                    this.closest('.modal').style.display = 'none';
                });
            });

            // Закрытие модального окна при клике вне его области
            window.addEventListener('click', function(event) {
                if (event.target.classList.contains('modal')) {
                    event.target.style.display = 'none';
                }
            });
        });
    </script>

    <script>
        // Обработчик формы регистрации
        document.getElementById('registerForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const password = this.querySelector('input[name="password"]').value;
            const confirmPassword = this.querySelector('input[name="confirm_password"]').value;
            
            if (password !== confirmPassword) {
                alert('Пароли не совпадают');
                return;
            }
            
            const formData = new FormData(this);
            
            try {
                const response = await fetch('register.php', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.status === 'success') {
                    alert('Регистрация успешно завершена! Теперь вы можете войти в систему.');
                    document.getElementById('registerForm-container').style.display = 'none';
                    document.getElementById('loginForm-container').style.display = 'block';
                    this.reset();
                } else {
                    alert(data.message || 'Ошибка при регистрации');
                }
            } catch (error) {
                console.error('Ошибка:', error);
                alert('Произошла ошибка при регистрации');
            }
        });

        // Переключение между формами
        document.querySelector('.show-register-btn').addEventListener('click', function() {
            document.getElementById('loginForm-container').style.display = 'none';
            document.getElementById('registerForm-container').style.display = 'block';
        });

        document.querySelector('.back-to-login-btn').addEventListener('click', function() {
            document.getElementById('registerForm-container').style.display = 'none';
            document.getElementById('loginForm-container').style.display = 'block';
        });
    </script>

    <script>
        // Обработчик формы входа
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = this.querySelector('[name="username"]').value;
            const password = this.querySelector('[name="password"]').value;
            
            const formData = new FormData();
            formData.append('username', username);
            formData.append('password', password);
            
            fetch('login.php', {
                method: 'POST',
                body: formData,
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    document.getElementById('loginModal').style.display = "none";
                    document.querySelector('.nav').innerHTML = `
                        <span>Привет, ${data.name}!</span>
                        <a href="logout.php">Выйти</a>
                        <a href="cart.php"><img src="basket.png" alt="Корзина"></a>
                    `;
                    window.location.reload();
                } else {
                    alert(data.message || 'Ошибка авторизации');
                }
            })
            .catch(error => {
                console.error('Ошибка:', error);
                
            });
        });

        // Обработка входа администратора
        document.querySelector('.admin-login-btn').addEventListener('click', function(e) {
            e.preventDefault();
            const form = document.getElementById('loginForm');
            const username = form.querySelector('[name="username"]').value;
            const password = form.querySelector('[name="password"]').value;
            
            const formData = new FormData();
            formData.append('username', username);
            formData.append('password', password);
            formData.append('is_admin', 'true');
            
            fetch('login.php', {
                method: 'POST',
                body: formData,
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success' && data.is_admin) {
                    document.getElementById('loginModal').style.display = "none";
                    document.querySelector('.nav').innerHTML = `
                        <span>Привет, ${data.name}!</span>
                        <a href="logout.php">Выйти</a>
                        <a href="cart.php"><img src="basket.png" alt="Корзина"></a>
                    `;
                    window.location.reload();
                } else {
                    alert(data.message || 'Ошибка авторизации администратора');
                }
            })
            .catch(error => {
                console.error('Ошибка:', error);
               
            });
        });
    </script>