Admin

Running

App Files Files Community

Admin / app.py

Kgshop

Update app.py

65312fd verified 24 days ago

Raw

History Blame Contribute Delete

101 kB

	from flask import Flask, render_template_string, request, redirect, url_for, flash, send_file, jsonify
	import json
	import os
	import logging
	import threading
	import time
	from datetime import datetime
	from huggingface_hub import HfApi, hf_hub_download
	from huggingface_hub.utils import RepositoryNotFoundError
	from werkzeug.utils import secure_filename
	import uuid
	import html
	import random

	app = Flask(__name__)
	app.secret_key = os.getenv("FLASK_SECRET_KEY", "zzirix_secret_key_for_cart")
	DATA_FILE = 'data_zzirix.json'

	REPO_ID = "Kgshop/clients"
	HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
	HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") or HF_TOKEN_WRITE

	LOGO_URL = "https://huggingface.co/spaces/Kgshop/Zzirixadm/resolve/main/Picsart_25-03-20_15-38-36-600.jpg"

	logging.basicConfig(level=logging.INFO)

	def initialize_data_structure(data):
	if not isinstance(data, dict):
	data = {'categories': [], 'products': [], 'orders': {}}

	data.setdefault('categories', [])
	data.setdefault('products', [])
	data.setdefault('orders', {})

	if any(p.get('category') == 'Без категории' for p in data['products']) and 'Без категории' not in data['categories']:
	data['categories'].append('Без категории')

	for product in data['products']:
	if 'id' not in product:
	product['id'] = str(uuid.uuid4())

	product.setdefault('name', 'Без названия')
	product.setdefault('description', '')
	product.setdefault('category', 'Без категории')
	product.setdefault('price', 0.0)
	product.setdefault('colors', [])
	product.setdefault('models', [])
	product.setdefault('photos', [])
	product.setdefault('in_stock', True)
	product.setdefault('is_top', False)

	if not product['photos'] and 'media' in product and product['media']:
	product['photos'] = [m['filename'] for m in product['media'] if m['type'] == 'photo']

	if 'media' in product:
	del product['media']

	data['categories'] = sorted(list(set(data['categories'])), key=lambda x: (x != 'Без категории', x))

	return data

	def load_data():
	try:
	if not os.path.exists(DATA_FILE) or os.path.getsize(DATA_FILE) == 0:
	download_db_from_hf()

	if os.path.exists(DATA_FILE) and os.path.getsize(DATA_FILE) > 0:
	with open(DATA_FILE, 'r', encoding='utf-8') as file:
	data = json.load(file)
	else:
	data = {'products': [], 'categories': [], 'orders': {}}

	return initialize_data_structure(data)
	except Exception as e:
	return initialize_data_structure({})

	def save_data(data):
	try:
	temp_file = DATA_FILE + '.tmp'
	with open(temp_file, 'w', encoding='utf-8') as file:
	json.dump(data, file, ensure_ascii=False, indent=4)
	os.replace(temp_file, DATA_FILE)
	upload_db_to_hf()
	except Exception as e:
	if os.path.exists(temp_file):
	os.remove(temp_file)
	raise

	def upload_db_to_hf():
	if not HF_TOKEN_WRITE:
	return
	try:
	api = HfApi()
	api.upload_file(
	path_or_fileobj=DATA_FILE,
	path_in_repo=DATA_FILE,
	repo_id=REPO_ID,
	repo_type="dataset",
	token=HF_TOKEN_WRITE,
	commit_message=f"Backup {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
	)
	except Exception as e:
	pass

	def download_db_from_hf():
	if not HF_TOKEN_READ:
	if not os.path.exists(DATA_FILE):
	with open(DATA_FILE, 'w', encoding='utf-8') as f:
	json.dump(initialize_data_structure({}), f)
	return
	try:
	hf_hub_download(
	repo_id=REPO_ID,
	filename=DATA_FILE,
	repo_type="dataset",
	token=HF_TOKEN_READ,
	local_dir=".",
	local_dir_use_symlinks=False,
	force_download=True
	)
	except Exception as e:
	if not os.path.exists(DATA_FILE):
	with open(DATA_FILE, 'w', encoding='utf-8') as f:
	json.dump(initialize_data_structure({}), f)

	def periodic_backup():
	while True:
	time.sleep(3600)
	try:
	data = load_data()
	save_data(data)
	except Exception as e:
	pass

	def allowed_file(filename):
	return '.' in filename and \
	filename.rsplit('.', 1)[1].lower() in {'png', 'jpg', 'jpeg', 'gif', 'webp', 'mp4', 'mov', 'webm'}

	BASE_STYLE = '''
	:root {
	--primary-color: #3B82F6;
	--primary-dark-color: #2563eb;
	--accent-color: #10b981;
	--accent-dark-color: #059669;
	--danger-color: #ef4444;
	--danger-dark-color: #dc2626;
	--background-light: linear-gradient(135deg, #f0f2f5, #e0e5ec);
	--background-dark: linear-gradient(135deg, #1f2937, #374151);
	--card-background-light: #ffffff;
	--card-background-dark: #2d3748;
	--text-color-light: #2d3748;
	--text-color-dark: #e2e8f0;
	--secondary-text-color-light: #718096;
	--secondary-text-color-dark: #a0aec0;
	--border-color-light: #e2e8f0;
	--border-color-dark: #4a5568;
	--shadow-light: 0 8px 25px rgba(0, 0, 0, 0.1);
	--shadow-hover-light: 0 12px 35px rgba(0, 0, 0, 0.18);
	--shadow-dark: 0 8px 25px rgba(0, 0, 0, 0.35);
	--shadow-hover-dark: 0 12px 35px rgba(0, 0, 0, 0.5);
	--border-radius-large: 22px;
	--border-radius-medium: 12px;
	--border-radius-small: 8px;
	}
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body {
	font-family: 'Roboto', sans-serif;
	background: var(--background-light);
	color: var(--text-color-light);
	line-height: 1.6;
	transition: background 0.3s, color 0.3s;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	}
	body.dark-mode {
	background: var(--background-dark);
	color: var(--text-color-dark);
	}
	.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 30px;
	flex-grow: 1;
	}
	.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 30px;
	border-bottom: none;
	margin-bottom: 30px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	border-radius: var(--border-radius-large);
	background: var(--card-background-light);
	}
	body.dark-mode .header {
	border-bottom-color: var(--border-color-dark);
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	background: var(--card-background-dark);
	}
	.header-info {
	display: flex;
	align-items: center;
	}
	.header-logo {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	margin-right: 15px;
	}
	.header-logo:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	}
	.header h1 {
	font-size: 2rem;
	font-weight: 800;
	color: var(--primary-color);
	}
	.header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	}
	.theme-toggle {
	background: none;
	border: none;
	font-size: 1.8rem;
	cursor: pointer;
	color: var(--secondary-text-color-light);
	transition: color 0.3s ease, transform 0.2s ease;
	padding: 5px;
	}
	body.dark-mode .theme-toggle {
	color: var(--secondary-text-color-dark);
	}
	.theme-toggle:hover {
	color: var(--accent-color);
	transform: rotate(30deg);
	}
	.flash {
	padding: 18px;
	margin-bottom: 25px;
	border-radius: var(--border-radius-medium);
	font-weight: 500;
	border: 1px solid transparent;
	font-size: 1.1rem;
	}
	.flash.success {
	background-color: var(--accent-color);
	color: white;
	border-color: var(--accent-dark-color);
	}
	.flash.error {
	background-color: var(--danger-color);
	color: white;
	border-color: var(--danger-dark-color);
	}
	.filters-container {
	margin: 30px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	}
	.search-container {
	margin: 25px 0;
	text-align: center;
	}
	#search-input {
	width: 90%;
	max-width: 600px;
	padding: 14px 22px;
	font-size: 1rem;
	border: none;
	border-radius: var(--border-radius-medium);
	outline: none;
	box-shadow: var(--shadow-light);
	transition: all 0.3s ease;
	background-color: var(--card-background-light);
	color: var(--text-color-light);
	}
	body.dark-mode #search-input {
	border-color: var(--border-color-dark);
	background-color: var(--card-background-dark);
	color: var(--text-color-dark);
	box-shadow: var(--shadow-dark);
	}
	#search-input:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
	}
	.category-filter {
	padding: 12px 25px;
	border: none;
	border-radius: var(--border-radius-medium);
	background-color: var(--card-background-light);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-color-light);
	box-shadow: var(--shadow-light);
	}
	body.dark-mode .category-filter {
	border-color: var(--border-color-dark);
	background-color: var(--card-background-dark);
	color: var(--text-color-dark);
	box-shadow: var(--shadow-dark);
	}
	.category-filter.active, .category-filter:hover {
	background-color: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	box-shadow: var(--shadow-hover-light);
	}
	body.dark-mode .category-filter.active, body.dark-mode .category-filter:hover {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	box-shadow: var(--shadow-hover-dark);
	}
	.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 25px;
	padding: 15px;
	}
	.product {
	background: var(--card-background-light);
	border-radius: var(--border-radius-large);
	padding: 20px;
	box-shadow: var(--shadow-light);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}
	body.dark-mode .product {
	background: var(--card-background-dark);
	box-shadow: var(--shadow-dark);
	}
	.product:hover {
	transform: translateY(-10px) scale(1.03);
	box-shadow: var(--shadow-hover-light);
	}
	body.dark-mode .product:hover {
	box-shadow: var(--shadow-hover-dark);
	}
	.product-image {
	width: 100%;
	aspect-ratio: 1;
	background-color: #f7f7f7;
	border-radius: var(--border-radius-medium);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 15px;
	cursor: pointer;
	}
	body.dark-mode .product-image {
	background-color: #343e4d;
	}
	.product-image img, .product-image video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
	border-radius: var(--border-radius-medium);
	}
	.product-image img:hover, .product-image video:hover {
	transform: scale(1.05);
	}
	.product h2 {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 8px 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-color-light);
	}
	body.dark-mode .product h2 {
	color: var(--text-color-dark);
	}
	.product-price {
	font-size: 1.3rem;
	color: var(--danger-color);
	font-weight: 700;
	text-align: center;
	margin: 8px 0 12px;
	}
	.product-description {
	font-size: 0.9rem;
	color: var(--secondary-text-color-light);
	text-align: center;
	margin-bottom: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	body.dark-mode .product-description {
	color: var(--secondary-text-color-dark);
	}
	.product-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
	}
	.product-button {
	display: block;
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: var(--border-radius-medium);
	background-color: var(--primary-color);
	color: white;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-align: center;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	}
	.product-button:hover {
	background-color: var(--primary-dark-color);
	box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
	transform: translateY(-2px);
	}
	.add-to-cart {
	background-color: var(--accent-color);
	box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2);
	}
	.add-to-cart:hover {
	background-color: var(--accent-dark-color);
	box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
	}
	#cart-button {
	position: fixed;
	bottom: 30px;
	right: 30px;
	background-color: var(--danger-color);
	color: white;
	border: none;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	font-size: 1.5rem;
	cursor: pointer;
	box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	#cart-button:hover {
	background-color: var(--danger-dark-color);
	transform: translateY(-5px) scale(1.08);
	box-shadow: 0 12px 35px rgba(239, 68, 68, 0.5);
	}
	.cart-count {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: var(--accent-color);
	color: white;
	border-radius: 50%;
	padding: 4px 8px;
	font-size: 0.8rem;
	min-width: 22px;
	text-align: center;
	font-weight: 600;
	}
	.modal {
	display: none;
	position: fixed;
	z-index: 1001;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	backdrop-filter: blur(8px);
	overflow-y: auto;
	padding: 20px;
	}
	.modal-content {
	background: var(--card-background-light);
	margin: 50px auto;
	padding: 40px;
	border-radius: var(--border-radius-large);
	width: 95%;
	max-width: 750px;
	box-shadow: var(--shadow-hover-light);
	animation: fadeInScale 0.3s ease-out;
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
	}
	body.dark-mode .modal-content {
	background: var(--card-background-dark);
	color: var(--text-color-dark);
	box-shadow: var(--shadow-hover-dark);
	}
	@keyframes fadeInScale {
	from { opacity: 0; transform: translateY(-30px) scale(0.95); }
	to { opacity: 1; transform: translateY(0) scale(1); }
	}
	.close {
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 2rem;
	color: var(--secondary-text-color-light);
	cursor: pointer;
	transition: color 0.3s, transform 0.2s;
	}
	.close:hover {
	color: var(--danger-color);
	transform: rotate(90deg);
	}
	body.dark-mode .close {
	color: var(--secondary-text-color-dark);
	}
	body.dark-mode .close:hover {
	color: var(--danger-color);
	}
	.modal h2 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 25px;
	text-align: center;
	}
	.cart-item {
	display: flex;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--border-color-light);
	}
	body.dark-mode .cart-item {
	border-bottom-color: var(--border-color-dark);
	}
	.cart-item:last-child {
	border-bottom: none;
	}
	.cart-item img {
	width: 70px;
	height: 70px;
	object-fit: contain;
	border-radius: var(--border-radius-small);
	margin-right: 20px;
	background-color: #f7f7f7;
	}
	body.dark-mode .cart-item img {
	background-color: #343e4d;
	}
	.cart-item-details {
	flex-grow: 1;
	}
	.cart-item-details strong {
	font-size: 1.2rem;
	font-weight: 600;
	}
	.cart-item-details p {
	font-size: 0.95rem;
	color: var(--secondary-text-color-light);
	}
	body.dark-mode .cart-item-details p {
	color: var(--secondary-text-color-dark);
	}
	.cart-item-total {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--danger-color);
	}
	.quantity-input, .color-select, .model-select {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--border-color-light);
	border-radius: var(--border-radius-medium);
	font-size: 1rem;
	margin: 10px 0;
	background-color: var(--card-background-light);
	color: var(--text-color-light);
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
	}
	body.dark-mode .quantity-input, body.dark-mode .color-select, body.dark-mode .model-select {
	border-color: var(--border-color-dark);
	background-color: var(--card-background-dark);
	color: var(--text-color-dark);
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
	}
	.qty-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0;
	}
	.qty-btn {
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: var(--border-radius-small);
	width: 40px;
	height: 40px;
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.qty-btn:hover {
	background-color: var(--primary-dark-color);
	}
	.qty-controls input {
	margin: 0;
	text-align: center;
	width: calc(100% - 100px);
	}
	.modal-buttons {
	margin-top: 30px;
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	}
	.modal-buttons .product-button {
	width: auto;
	padding: 12px 25px;
	}
	.clear-cart {
	background-color: var(--danger-color);
	}
	.clear-cart:hover {
	background-color: var(--danger-dark-color);
	box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
	}
	.order-button {
	background-color: var(--accent-color);
	}
	.order-button:hover {
	background-color: var(--accent-dark-color);
	box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
	}
	.swiper-container {
	max-width: 500px;
	margin: 0 auto 30px;
	border-radius: var(--border-radius-large);
	overflow: hidden;
	box-shadow: var(--shadow-light);
	}
	body.dark-mode .swiper-container {
	box-shadow: var(--shadow-dark);
	}
	.swiper-slide {
	background-color: #f7f7f7;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 300px;
	}
	body.dark-mode .swiper-slide {
	background-color: #343e4d;
	}
	.swiper-slide img, .swiper-slide video {
	max-width: 100%;
	max-height: 350px;
	object-fit: contain;
	}
	.swiper-button-next, .swiper-button-prev {
	color: var(--primary-color) !important;
	background-color: rgba(255,255,255,0.9);
	border-radius: 50%;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s;
	font-size: 1.8rem;
	}
	.swiper-button-next:hover, .swiper-button-prev:hover {
	background-color: #fff;
	}
	body.dark-mode .swiper-button-next, body.dark-mode .swiper-button-prev {
	background-color: rgba(45, 55, 72, 0.9);
	}
	body.dark-mode .swiper-button-next:hover, body.dark-mode .swiper-button-prev:hover {
	background-color: #2d3748;
	}
	.swiper-pagination-bullet {
	background-color: var(--primary-color) !important;
	}
	.product-detail-modal-inner {
	background: transparent;
	padding: 0;
	margin: 0;
	box-shadow: none;
	position: static;
	}
	body.dark-mode .product-detail-modal-inner {
	background: transparent;
	box-shadow: none;
	}
	.product-detail-modal-inner h2 {
	font-size: 2.2rem;
	font-weight: 700;
	margin-bottom: 25px;
	text-align: center;
	color: var(--text-color-light);
	}
	body.dark-mode .product-detail-modal-inner h2 {
	color: var(--text-color-dark);
	}
	.product-detail-modal-inner p {
	margin-bottom: 10px;
	font-size: 1rem;
	}
	.product-detail-modal-inner p strong {
	color: var(--text-color-light);
	}
	body.dark-mode .product-detail-modal-inner p strong {
	color: var(--text-color-dark);
	}
	.product-detail-modal-inner .price {
	font-size: 1.8rem;
	color: var(--danger-color);
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
	}
	.product-detail-modal-inner .description {
	margin-bottom: 20px;
	white-space: pre-wrap;
	}
	.product-detail-modal-actions {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
	}
	.product-detail-modal-actions .product-button {
	width: auto;
	padding: 12px 25px;
	}
	.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
	.admin-table th, .admin-table td { padding: 12px; border: 1px solid var(--border-color-light); text-align: left; vertical-align: middle; }
	body.dark-mode .admin-table th, body.dark-mode .admin-table td { border-color: var(--border-color-dark); }
	.admin-table th { background-color: var(--card-background-light); font-weight: 600; }
	body.dark-mode .admin-table th { background-color: var(--card-background-dark); }
	.admin-table-responsive { overflow-x: auto; margin-bottom: 20px; }
	@media (max-width: 768px) {
	.container {
	padding: 15px;
	}
	.header {
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	}
	.header-actions {
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
	}
	.header h1 {
	font-size: 1.6rem;
	}
	.category-filter {
	font-size: 0.85rem;
	padding: 8px 15px;
	}
	.products-grid {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 18px;
	}
	.product h2 {
	font-size: 1.05rem;
	}
	.product-price {
	font-size: 1.15rem;
	}
	.product-description {
	font-size: 0.8rem;
	}
	.product-button {
	font-size: 0.9rem;
	padding: 10px;
	}
	#cart-button {
	width: 50px;
	height: 50px;
	font-size: 1.2rem;
	bottom: 20px;
	right: 20px;
	}
	.modal-content {
	margin: 20px auto;
	padding: 25px;
	max-height: 95vh;
	}
	.close {
	font-size: 1.6rem;
	top: 15px;
	right: 18px;
	}
	.modal h2 {
	font-size: 1.6rem;
	}
	.cart-item img {
	width: 55px;
	height: 55px;
	}
	.product-detail-modal-inner h2 {
	font-size: 2rem;
	}
	.product-detail-modal-inner .price {
	font-size: 1.6rem;
	}
	.product-detail-modal-actions {
	flex-direction: column;
	gap: 10px;
	}
	}
	'''

	JS_FUNCTIONS = '''
	const products = {{ products\|tojson }};
	let selectedProductId = null;
	let detailSwiperInstance = null;

	function toggleTheme() {
	document.body.classList.toggle('dark-mode');
	const icon = document.querySelector('.theme-toggle i');
	icon.classList.toggle('fa-moon');
	icon.classList.toggle('fa-sun');
	localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
	}

	if (localStorage.getItem('theme') === 'dark') {
	document.body.classList.add('dark-mode');
	const icon = document.querySelector('.theme-toggle i');
	if (icon) icon.classList.replace('fa-moon', 'fa-sun');
	} else {
	const icon = document.querySelector('.theme-toggle i');
	if (icon) icon.classList.replace('fa-sun', 'fa-moon');
	}

	function closeModal(modalId) {
	document.getElementById(modalId).style.display = "none";
	if (modalId === 'productDetailModal' && detailSwiperInstance) {
	detailSwiperInstance.destroy(true, true);
	detailSwiperInstance = null;
	}
	}

	function openQuantityModal(productId) {
	selectedProductId = productId;
	const product = products.find(p => p.id === productId);
	if (!product) {
	alert('Ошибка: Товар не найден.');
	return;
	}

	const colorSelect = document.getElementById('colorSelect');
	colorSelect.innerHTML = '';
	if (product.colors && product.colors.length > 0) {
	product.colors.forEach(color => {
	const option = document.createElement('option');
	option.value = color;
	option.text = color;
	colorSelect.appendChild(option);
	});
	} else {
	const option = document.createElement('option');
	option.value = 'Не указан';
	option.text = 'Цвет не указан';
	colorSelect.appendChild(option);
	}

	const modelSelect = document.getElementById('modelSelect');
	modelSelect.innerHTML = '';
	if (product.models && product.models.length > 0) {
	product.models.forEach(model => {
	const option = document.createElement('option');
	option.value = model;
	option.text = model;
	modelSelect.appendChild(option);
	});
	} else {
	const option = document.createElement('option');
	option.value = 'Не указана';
	option.text = 'Модель не указана';
	modelSelect.appendChild(option);
	}

	document.getElementById('quantityModal').style.display = 'block';
	document.getElementById('quantityInput').value = 1;
	}

	function changeQty(delta) {
	let input = document.getElementById('quantityInput');
	let current = parseInt(input.value) \|\| 1;
	if(current + delta >= 1) {
	input.value = current + delta;
	}
	}

	function confirmAddToCart() {
	if (selectedProductId === null) return;
	const quantityInput = document.getElementById('quantityInput');
	const quantity = parseInt(quantityInput.value) \|\| 1;
	const color = document.getElementById('colorSelect').value;
	const model = document.getElementById('modelSelect').value;

	if (quantity <= 0) {
	alert("Укажите количество больше 0.");
	quantityInput.focus();
	return;
	}

	let cart = JSON.parse(localStorage.getItem('cart') \|\| '[]');
	const product = products.find(p => p.id === selectedProductId);

	const cartItemId = `${product.id}-${color}-${model}`;
	const existingItem = cart.find(item => item.cartId === cartItemId);

	if (existingItem) {
	existingItem.quantity += quantity;
	} else {
	cart.push({
	cartId: cartItemId,
	productId: product.id,
	name: product.name,
	price: product.price,
	photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
	quantity: quantity,
	color: color,
	model: model,
	discount_percent: 0.0
	});
	}

	localStorage.setItem('cart', JSON.stringify(cart));
	closeModal('quantityModal');
	updateCartButton();
	alert(`"${product.name}" добавлен в корзину.`);
	}

	function updateCartButton() {
	const cart = JSON.parse(localStorage.getItem('cart') \|\| '[]');
	const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
	document.getElementById('cart-count').textContent = cartCount;
	document.getElementById('cart-button').style.display = cartCount > 0 ? 'flex' : 'none';
	}

	function openCartModal() {
	const cart = JSON.parse(localStorage.getItem('cart') \|\| '[]');
	const cartContent = document.getElementById('cartContent');
	let total = 0;

	cartContent.innerHTML = cart.length === 0 ? '<p style="text-align: center; color: var(--secondary-text-color-light);">Корзина пуста</p>' : cart.map((item, index) => {
	const itemTotal = item.price * item.quantity;
	total += itemTotal;
	const photoSrc = item.photo ? `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/60x60?text=No+Image';
	return `
	<div class="cart-item">
	<img src="${photoSrc}" alt="${item.name}">
	<div class="cart-item-details">
	<strong>${item.name}</strong>
	<p>${item.price.toFixed(2)} с × ${item.quantity} (Цвет: ${item.color}, Модель: ${item.model})</p>
	</div>
	<span class="cart-item-total">${itemTotal.toFixed(2)} с</span>
	</div>
	`;
	}).join('');

	document.getElementById('cartTotal').textContent = total.toFixed(2);
	document.getElementById('cartModal').style.display = 'block';
	}

	async function checkoutOrder() {
	const cart = JSON.parse(localStorage.getItem('cart') \|\| '[]');
	if (cart.length === 0) {
	alert("Корзина пуста!");
	return;
	}
	const cName = document.getElementById('customerName').value.trim();
	const cPhone = document.getElementById('customerPhone').value.trim();
	if(!cName \|\| !cPhone){
	alert("Пожалуйста, заполните Имя и Номер телефона!");
	return;
	}
	let total = 0;
	cart.forEach(item => total += item.price * item.quantity);

	document.getElementById('checkoutBtn').disabled = true;
	document.getElementById('checkoutBtn').textContent = "Оформление...";

	try {
	let response = await fetch('/checkout', {
	method: 'POST',
	headers: {'Content-Type': 'application/json'},
	body: JSON.stringify({ cart: cart, name: cName, phone: cPhone, total: total })
	});
	let result = await response.json();
	if(result.success) {
	clearCart(false);
	window.location.href = "/receipt/" + result.order_id;
	} else {
	alert("Ошибка при оформлении заказа.");
	document.getElementById('checkoutBtn').disabled = false;
	document.getElementById('checkoutBtn').textContent = "Заказать";
	}
	} catch (e) {
	alert("Ошибка соединения.");
	document.getElementById('checkoutBtn').disabled = false;
	document.getElementById('checkoutBtn').textContent = "Заказать";
	}
	}

	function clearCart(reopen = true) {
	localStorage.removeItem('cart');
	if(reopen) openCartModal();
	updateCartButton();
	}

	window.onclick = function(event) {
	if (event.target.classList.contains('modal')) {
	event.target.style.display = "none";
	if (detailSwiperInstance) {
	detailSwiperInstance.destroy(true, true);
	detailSwiperInstance = null;
	}
	}
	}

	function openProductDetailModal(productId) {
	selectedProductId = productId;
	const product = products.find(p => p.id === productId);
	if (!product) {
	alert('Ошибка: Товар не найден.');
	return;
	}

	document.getElementById('detailProductName').textContent = product.name;
	document.getElementById('detailProductCategory').textContent = product.category \|\| 'Без категории';
	document.getElementById('detailProductPrice').textContent = `${product.price.toFixed(2)} с`;
	document.getElementById('detailProductDescription').textContent = product.description;
	document.getElementById('detailProductColors').textContent = product.colors && product.colors.length > 0 ? product.colors.join(', ') : 'Нет цветов';
	document.getElementById('detailProductModels').textContent = product.models && product.models.length > 0 ? product.models.join(', ') : 'Нет моделей';
	document.getElementById('detailAddToCartButton').onclick = () => openQuantityModal(product.id);

	const mediaContainer = document.getElementById('detailProductMedia');
	mediaContainer.innerHTML = '';
	if (product.photos && product.photos.length > 0) {
	product.photos.forEach(filename => {
	const slide = document.createElement('div');
	slide.className = 'swiper-slide swiper-zoom-container';
	slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";

	const mediaUrl = `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${filename}`;
	if (filename.endsWith(('.mp4', '.mov', '.webm'))) {
	slide.innerHTML = `<video controls preload="metadata" style="max-width: 100%; max-height: 350px; object-fit: contain;"><source src="${mediaUrl}" type="video/mp4"></video>`;
	} else {
	slide.innerHTML = `<img src="${mediaUrl}" alt="${product.name}" style="max-width: 100%; max-height: 350px; object-fit: contain;">`;
	}
	mediaContainer.appendChild(slide);
	});
	} else {
	const slide = document.createElement('div');
	slide.className = 'swiper-slide swiper-zoom-container';
	slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
	slide.innerHTML = `<img src="https://via.placeholder.com/300x300?text=No+Image" alt="No Image">`;
	mediaContainer.appendChild(slide);
	}

	document.getElementById('productDetailModal').style.display = 'block';

	if (detailSwiperInstance) {
	detailSwiperInstance.destroy(true, true);
	}
	detailSwiperInstance = new Swiper('#productDetailModal .swiper-container', {
	slidesPerView: 1,
	spaceBetween: 20,
	loop: true,
	grabCursor: true,
	pagination: { el: '#productDetailModal .swiper-pagination', clickable: true },
	navigation: { nextEl: '#productDetailModal .swiper-button-next', prevEl: '#productDetailModal .swiper-button-prev' },
	zoom: { maxRatio: 3 },
	on: {
	init: function () {
	this.slides.forEach(slide => {
	const img = slide.querySelector('img');
	if (img && !img.complete) {
	img.onload = () => detailSwiperInstance.update();
	}
	const video = slide.querySelector('video');
	if (video) {
	video.onloadedmetadata = () => detailSwiperInstance.update();
	}
	});
	},
	resize: function() {
	this.update();
	}
	}
	});
	detailSwiperInstance.update();
	}

	updateCartButton();
	'''

	@app.route('/')
	def catalog():
	data = load_data()
	products = data.get('products', [])
	categories = data.get('categories', [])
	products.sort(key=lambda p: p['name'].lower())

	return render_template_string('''
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ZZIRIX - сотовые аксессуары оптом</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
	<style>''' + BASE_STYLE + '''</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<div class="header-info">
	<img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
	<h1>Каталог ZZIRIX</h1>
	</div>
	<div class="header-actions">
	<button class="theme-toggle" onclick="toggleTheme()">
	<i class="fas fa-moon"></i>
	</button>
	</div>
	</div>
	{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
	{% for category, message in messages %}
	<div class="flash {{ category }}">{{ message }}</div>
	{% endfor %}
	{% endif %}
	{% endwith %}
	<div class="filters-container">
	<button class="category-filter active" data-category="all">Все категории</button>
	{% for category in categories %}
	<button class="category-filter" data-category="{{ category \| lower }}">{{ category }}</button>
	{% endfor %}
	</div>
	<div class="search-container">
	<input type="text" id="search-input" placeholder="Поиск товаров...">
	</div>
	<div class="products-grid" id="products-grid">
	{% for product in products %}
	<div class="product"
	data-name="{{ product['name']\|lower }}"
	data-description="{{ product['description']\|lower }}"
	data-category="{{ product.get('category', 'Без категории')\|lower }}">
	<a href="javascript:void(0)" onclick="openProductDetailModal('{{ product.id }}')" class="product-image">
	{% if product.get('photos') and product['photos']\|length > 0 %}
	{% set filename = product['photos'][0] %}
	{% if filename.endswith(('.mp4', '.mov', '.webm')) %}
	<video preload="metadata" muted loop autoplay playsinline><source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ filename }}" type="video/mp4"></video>
	{% else %}
	<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ filename }}" alt="{{ product['name'] }}" loading="lazy">
	{% endif %}
	{% else %}
	<img src="https://via.placeholder.com/200x200?text=No+Image" alt="Нет изображения" loading="lazy">
	{% endif %}
	</a>
	<h2>{{ product['name'] }}</h2>
	<div class="product-price">{{ "%.2f"\|format(product['price']) }} с</div>
	<p class="product-description">{{ product['description'][:50] }}{% if product['description']\|length > 50 %}...{% endif %}</p>
	<div class="product-actions">
	<button class="product-button" onclick="openProductDetailModal('{{ product.id }}')">Подробнее</button>
	<button class="product-button add-to-cart" onclick="openQuantityModal('{{ product.id }}')">В корзину</button>
	</div>
	</div>
	{% else %}
	<p style="grid-column: 1 / -1; text-align: center; padding: 40px 0;">Товаров пока нет. Загляните позже!</p>
	{% endfor %}
	</div>
	</div>

	<div id="quantityModal" class="modal">
	<div class="modal-content">
	<span class="close" onclick="closeModal('quantityModal')">×</span>
	<h2>Укажите количество, цвет и модель</h2>
	<div class="qty-controls">
	<button type="button" class="qty-btn" onclick="changeQty(-1)">-</button>
	<input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
	<button type="button" class="qty-btn" onclick="changeQty(1)">+</button>
	</div>
	<select id="colorSelect" class="color-select"></select>
	<select id="modelSelect" class="model-select"></select>
	<div class="modal-buttons">
	<button class="product-button order-button" onclick="confirmAddToCart()">Добавить</button>
	</div>
	</div>
	</div>

	<div id="cartModal" class="modal">
	<div class="modal-content">
	<span class="close" onclick="closeModal('cartModal')">×</span>
	<h2>Корзина</h2>
	<div id="cartContent"></div>
	<div style="margin-top: 20px;">
	<input type="text" id="customerName" placeholder="Ваше Имя" required class="quantity-input">
	<input type="text" id="customerPhone" placeholder="Ваш Номер телефона" required class="quantity-input">
	</div>
	<div style="margin-top: 20px; text-align: right;">
	<strong style="font-size: 1.2rem;">Итого: <span id="cartTotal">0</span> с</strong>
	<div class="modal-buttons">
	<button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
	<button class="product-button order-button" id="checkoutBtn" onclick="checkoutOrder()">Заказать</button>
	</div>
	</div>
	</div>
	</div>

	<div id="productDetailModal" class="modal">
	<div class="modal-content">
	<span class="close" onclick="closeModal('productDetailModal')">×</span>
	<div class="product-detail-modal-inner">
	<h2 id="detailProductName"></h2>
	<div class="swiper-container" style="max-width: 500px; margin: 0 auto 30px;">
	<div class="swiper-wrapper" id="detailProductMedia"></div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
	</div>
	<p><strong>Категория:</strong> <span id="detailProductCategory" style="color: var(--primary-color);"></span></p>
	<p class="price" id="detailProductPrice"></p>
	<p class="description"><strong>Описание:</strong> <span id="detailProductDescription"></span></p>
	<p><strong>Доступные цвета:</strong> <span id="detailProductColors" style="color: var(--secondary-text-color-light);"></span></p>
	<p><strong>Доступные модели:</strong> <span id="detailProductModels" style="color: var(--secondary-text-color-light);"></span></p>
	<div class="product-detail-modal-actions">
	<button class="product-button add-to-cart" id="detailAddToCartButton">В корзину</button>
	</div>
	</div>
	</div>
	</div>

	<button id="cart-button" onclick="openCartModal()">
	<i class="fas fa-shopping-cart"></i>
	<span id="cart-count" class="cart-count">0</span>
	</button>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
	<script>
	''' + JS_FUNCTIONS + '''
	document.getElementById('search-input').addEventListener('input', filterProducts);
	document.querySelectorAll('.filters-container .category-filter').forEach(filter => {
	filter.addEventListener('click', function() {
	document.querySelectorAll('.filters-container .category-filter').forEach(f => f.classList.remove('active'));
	this.classList.add('active');
	filterProducts();
	});
	});

	function filterProducts() {
	const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
	const activeCategory = document.querySelector('.category-filter.active').dataset.category.toLowerCase();
	document.querySelectorAll('.product').forEach(product => {
	const name = product.getAttribute('data-name');
	const description = product.getAttribute('data-description');
	const category = product.getAttribute('data-category');

	const matchesSearch = (name && name.includes(searchTerm)) \|\| (description && description.includes(searchTerm));
	const matchesCategory = activeCategory === 'all' \|\| category === activeCategory;

	product.style.display = matchesSearch && matchesCategory ? 'flex' : 'none';
	});
	}
	</script>
	</body>
	</html>
	''',
	products=products,
	categories=categories,
	repo_id=REPO_ID,
	LOGO_URL=LOGO_URL
	)

	@app.route('/category/<category_name>')
	def catalog_by_category(category_name):
	data = load_data()
	products_all = data.get('products', [])
	categories = data.get('categories', [])
	products = [p for p in products_all if p.get('category', '').lower() == category_name.lower()]
	products.sort(key=lambda p: p['name'].lower())

	return render_template_string('''
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ category_name }} - ZZIRIX</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
	<style>''' + BASE_STYLE + '''</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<div class="header-info">
	<img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
	<h1>Каталог ZZIRIX</h1>
	</div>
	<div class="header-actions">
	<button class="theme-toggle" onclick="toggleTheme()">
	<i class="fas fa-moon"></i>
	</button>
	</div>
	</div>
	{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
	{% for category, message in messages %}
	<div class="flash {{ category }}">{{ message }}</div>
	{% endfor %}
	{% endif %}
	{% endwith %}
	<div class="filters-container">
	<button class="category-filter" data-category="all" onclick="window.location.href='{{ url_for('catalog') }}'">Все категории</button>
	{% for cat in categories %}
	<button class="category-filter {% if cat \| lower == category_name \| lower %}active{% endif %}" data-category="{{ cat \| lower }}" onclick="window.location.href='{{ url_for('catalog_by_category', category_name=cat \| lower) }}'">{{ cat }}</button>
	{% endfor %}
	</div>
	<div class="search-container">
	<input type="text" id="search-input" placeholder="Поиск товаров...">
	</div>
	<div class="products-grid" id="products-grid">
	{% for product in products %}
	<div class="product"
	data-name="{{ product['name']\|lower }}"
	data-description="{{ product['description']\|lower }}"
	data-category="{{ product.get('category', 'Без категории')\|lower }}">
	<a href="javascript:void(0)" onclick="openProductDetailModal('{{ product.id }}')" class="product-image">
	{% if product.get('photos') and product['photos']\|length > 0 %}
	{% set filename = product['photos'][0] %}
	{% if filename.endswith(('.mp4', '.mov', '.webm')) %}
	<video preload="metadata" muted loop autoplay playsinline><source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ filename }}" type="video/mp4"></video>
	{% else %}
	<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ filename }}" alt="{{ product['name'] }}" loading="lazy">
	{% endif %}
	{% else %}
	<img src="https://via.placeholder.com/200x200?text=No+Image" alt="Нет изображения" loading="lazy">
	{% endif %}
	</a>
	<h2>{{ product['name'] }}</h2>
	<div class="product-price">{{ "%.2f"\|format(product['price']) }} с</div>
	<p class="product-description">{{ product['description'][:50] }}{% if product['description']\|length > 50 %}...{% endif %}</p>
	<div class="product-actions">
	<button class="product-button" onclick="openProductDetailModal('{{ product.id }}')">Подробнее</button>
	<button class="product-button add-to-cart" onclick="openQuantityModal('{{ product.id }}')">В корзину</button>
	</div>
	</div>
	{% else %}
	<p style="grid-column: 1 / -1; text-align: center; padding: 40px 0;">В этой категории пока нет товаров.</p>
	{% endfor %}
	</div>
	</div>

	<div id="quantityModal" class="modal">
	<div class="modal-content">
	<span class="close" onclick="closeModal('quantityModal')">×</span>
	<h2>Укажите количество, цвет и модель</h2>
	<div class="qty-controls">
	<button type="button" class="qty-btn" onclick="changeQty(-1)">-</button>
	<input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
	<button type="button" class="qty-btn" onclick="changeQty(1)">+</button>
	</div>
	<select id="colorSelect" class="color-select"></select>
	<select id="modelSelect" class="model-select"></select>
	<div class="modal-buttons">
	<button class="product-button order-button" onclick="confirmAddToCart()">Добавить</button>
	</div>
	</div>
	</div>

	<div id="cartModal" class="modal">
	<div class="modal-content">
	<span class="close" onclick="closeModal('cartModal')">×</span>
	<h2>Корзина</h2>
	<div id="cartContent"></div>
	<div style="margin-top: 20px;">
	<input type="text" id="customerName" placeholder="Ваше Имя" required class="quantity-input">
	<input type="text" id="customerPhone" placeholder="Ваш Номер телефона" required class="quantity-input">
	</div>
	<div style="margin-top: 20px; text-align: right;">
	<strong style="font-size: 1.2rem;">Итого: <span id="cartTotal">0</span> с</strong>
	<div class="modal-buttons">
	<button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
	<button class="product-button order-button" id="checkoutBtn" onclick="checkoutOrder()">Заказать</button>
	</div>
	</div>
	</div>
	</div>

	<div id="productDetailModal" class="modal">
	<div class="modal-content">
	<span class="close" onclick="closeModal('productDetailModal')">×</span>
	<div class="product-detail-modal-inner">
	<h2 id="detailProductName"></h2>
	<div class="swiper-container" style="max-width: 500px; margin: 0 auto 30px;">
	<div class="swiper-wrapper" id="detailProductMedia"></div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
	</div>
	<p><strong>Категория:</strong> <span id="detailProductCategory" style="color: var(--primary-color);"></span></p>
	<p class="price" id="detailProductPrice"></p>
	<p class="description"><strong>Описание:</strong> <span id="detailProductDescription"></span></p>
	<p><strong>Доступные цвета:</strong> <span id="detailProductColors" style="color: var(--secondary-text-color-light);"></span></p>
	<p><strong>Доступные модели:</strong> <span id="detailProductModels" style="color: var(--secondary-text-color-light);"></span></p>
	<div class="product-detail-modal-actions">
	<button class="product-button add-to-cart" id="detailAddToCartButton">В корзину</button>
	</div>
	</div>
	</div>
	</div>

	<button id="cart-button" onclick="openCartModal()">
	<i class="fas fa-shopping-cart"></i>
	<span id="cart-count" class="cart-count">0</span>
	</button>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
	<script>
	''' + JS_FUNCTIONS + '''
	document.getElementById('search-input').addEventListener('input', filterProducts);
	function filterProducts() {
	const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
	document.querySelectorAll('.product').forEach(product => {
	const name = product.getAttribute('data-name');
	const description = product.getAttribute('data-description');
	const matchesSearch = (name && name.includes(searchTerm)) \|\| (description && description.includes(searchTerm));
	product.style.display = matchesSearch ? 'flex' : 'none';
	});
	}
	</script>
	</body>
	</html>
	''',
	products=products,
	categories=categories,
	category_name=category_name,
	products_all=products_all,
	repo_id=REPO_ID,
	LOGO_URL=LOGO_URL
	)

	@app.route('/checkout', methods=['POST'])
	def checkout():
	try:
	order_data = request.json
	order_id = str(uuid.uuid4())[:8].upper()
	order_data['id'] = order_id
	order_data['date'] = datetime.now().strftime('%d.%m.%Y %H:%M')

	order_data['original_total'] = order_data['total']
	order_data['final_total'] = order_data['total']
	order_data['order_discount_percent'] = 0.0

	for item in order_data.get('cart', []):
	if 'discount_percent' not in item:
	item['discount_percent'] = 0.0

	data = load_data()
	data['orders'][order_id] = order_data
	save_data(data)

	return jsonify({'success': True, 'order_id': order_id})
	except Exception as e:
	return jsonify({'success': False, 'error': str(e)})

	@app.route('/receipt/<order_id>')
	def view_receipt(order_id):
	data = load_data()
	order = data.get('orders', {}).get(order_id)
	if not order:
	return "Заказ не найден", 404

	return render_template_string('''
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Чек №{{ order.id }}</title>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
	<style>
	body { background: #f0f2f5; font-family: 'Roboto', sans-serif; margin: 0; padding: 10px; }
	.receipt-wrapper { max-width: 800px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); color: #000; box-sizing: border-box; width: 100%; }
	.r-title { text-align: center; font-size: 1.3rem; font-weight: bold; margin-bottom: 20px; }
	.r-client-info { margin-bottom: 20px; font-size: 0.95rem; line-height: 1.5; }
	.table-responsive { width: 100%; overflow-x: auto; margin-bottom: 20px; }
	table { width: 100%; border-collapse: collapse; min-width: 500px; font-size: 0.9rem; }
	th, td { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 8px; text-align: center; word-break: break-word; }
	th { font-weight: 600; background-color: #f9fafb; }
	td:nth-child(3) { text-align: left; min-width: 150px; }
	.r-summary { display: flex; justify-content: flex-end; margin-bottom: 30px; }
	.r-summary table { width: 100%; max-width: 300px; min-width: unset; border: none; }
	.r-summary th, .r-summary td { border: none; padding: 6px; text-align: right; background-color: transparent; }
	.r-summary td:last-child { font-weight: bold; width: 40%; }
	.r-footer-text { font-size: 0.85rem; color: #555; margin-bottom: 30px; text-align: center; }
	.r-signatures { display: flex; justify-content: space-between; gap: 20px; font-size: 0.9rem; margin-top: 30px; flex-wrap: wrap; }
	.r-sig-box { flex: 1; min-width: 120px; }
	.r-line { border-bottom: 1px solid #000; margin-top: 25px; margin-bottom: 5px; }
	.r-sig-desc { text-align: center; font-size: 0.75rem; color: #555; }
	.btn-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
	.btn { padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 0.95rem; color: #fff; flex: 1; min-width: 120px; max-width: 200px; text-align: center; }
	.btn-whatsapp { background: #25D366; }
	.btn-share { background: #3B82F6; }
	.btn-print { background: #6B7280; }
	@media print {
	body { background: #fff; padding: 0; }
	.btn-controls { display: none; }
	.receipt-wrapper { box-shadow: none; padding: 0; width: 100%; border-radius: 0; }
	.table-responsive { overflow-x: visible; }
	table { min-width: 100%; }
	}
	@media (max-width: 480px) {
	.receipt-wrapper { padding: 15px; }
	.r-title { font-size: 1.1rem; }
	.btn { font-size: 0.85rem; padding: 10px; min-width: 100px; }
	th, td { font-size: 0.8rem; padding: 8px 5px; }
	.r-summary td:last-child { width: 50%; }
	}
	</style>
	</head>
	<body>
	<div class="btn-controls">
	<button class="btn btn-whatsapp" onclick="sendWhatsApp()">Отправить заказ</button>
	<button class="btn btn-share" onclick="shareReceipt()">Поделиться</button>
	<button class="btn btn-print" onclick="window.print()">Печать</button>
	</div>

	<div class="receipt-wrapper">
	<div class="r-title">Товарный чек № {{ order.id }} от {{ order.date }}</div>

	<div class="r-client-info">
	<strong>Клиент:</strong> {{ order.name }}<br>
	<strong>Телефон:</strong> {{ order.phone }}
	</div>

	<div class="table-responsive">
	<table>
	<thead>
	<tr>
	<th>№</th>
	<th>Код</th>
	<th>Наименование</th>
	<th>Кол-во</th>
	<th>Ед.</th>
	<th>Цена</th>
	<th>Скидка %</th>
	<th>Сумма</th>
	</tr>
	</thead>
	<tbody>
	{% for item in order.cart %}
	<tr>
	<td>{{ loop.index }}</td>
	<td>{{ item.productId[:6] }}</td>
	<td>{{ item.name }} (Цвет: {{ item.color }}, Мод: {{ item.model }})</td>
	<td>{{ item.quantity }}</td>
	<td>шт</td>
	<td>{{ "%.2f"\|format(item.price) }}</td>
	<td>{{ "%.2f"\|format(item.get('discount_percent', 0.0)) }}</td>
	{% set item_final = item.price * (1 - item.get('discount_percent', 0.0) / 100) * item.quantity %}
	<td>{{ "%.2f"\|format(item_final) }}</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	</div>

	<div class="r-summary">
	{% set original = order.get('original_total', order.total) %}
	{% set final = order.get('final_total', order.total) %}
	{% set total_disc = original - final %}
	<table>
	<tr><td>Сумма без скидки</td><td>{{ "%.2f"\|format(original) }}</td></tr>
	<tr><td>Скидка{% if order.get('order_discount_percent', 0) > 0 %} ({{ "%.2f"\|format(order.order_discount_percent) }}% на весь чек){% endif %}</td><td>{{ "%.2f"\|format(total_disc) }}</td></tr>
	<tr><td>Итого</td><td>{{ "%.2f"\|format(final) }}</td></tr>
	<tr><td>Наличными</td><td>{{ "%.2f"\|format(final) }}</td></tr>
	</table>
	</div>

	<div class="r-footer-text">
	Всего наименований {{ order.cart\|length }} на сумму {{ "%.2f"\|format(final) }} с.
	</div>

	<div class="r-signatures">
	<div class="r-sig-box">
	Продавец
	<div class="r-line"></div>
	<div class="r-sig-desc">подпись</div>
	</div>
	<div class="r-sig-box">
	Администратор
	<div class="r-line"></div>
	<div class="r-sig-desc">расшифровка</div>
	</div>
	</div>
	</div>

	<script>
	function sendWhatsApp() {
	const url = window.location.href;
	const text = `Здравствуйте, заказ оформлен. Ссылка на чек: ${url}`;
	window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${encodeURIComponent(text)}`, '_blank');
	}
	function shareReceipt() {
	if (navigator.share) {
	navigator.share({
	title: 'Чек заказа',
	url: window.location.href
	}).catch(console.error);
	} else {
	navigator.clipboard.writeText(window.location.href);
	alert('Ссылка скопирована в буфер обмена!');
	}
	}
	</script>
	</body>
	</html>
	''', order=order)

	@app.route('/admin', methods=['GET', 'POST'])
	def admin():
	data = load_data()
	products = data.get('products', [])
	categories = data.get('categories', [])

	if request.method == 'POST':
	action = request.form.get('action')
	api = HfApi()

	if action == 'add_category':
	category_name = request.form.get('category_name', '').strip()
	if category_name and category_name not in categories:
	categories.append(category_name)
	save_data(data)
	flash('Категория успешно добавлена.', 'success')
	return redirect(url_for('admin'))
	flash('Ошибка: Категория уже существует или не указано название.', 'error')
	return redirect(url_for('admin'))

	elif action == 'delete_category':
	category_name_to_delete = request.form.get('category_name')
	if category_name_to_delete in categories:
	categories.remove(category_name_to_delete)
	for product in products:
	if product.get('category') == category_name_to_delete:
	product['category'] = 'Без категории'
	save_data(data)
	flash('Категория удалена. Связанные товары теперь в категории "Без категории".', 'success')
	return redirect(url_for('admin'))
	flash('Ошибка: Категория не найдена.', 'error')
	return redirect(url_for('admin'))

	elif action == 'add':
	name = request.form.get('name', '').strip()
	price = request.form.get('price', '').strip()
	description = request.form.get('description', '').strip()
	category = request.form.get('category', 'Без категории').strip()
	photos_files = request.files.getlist('photos')
	colors = [c.strip() for c in request.form.getlist('colors') if c.strip()]
	models = [m.strip() for m in request.form.getlist('models') if m.strip()]

	if not name or not price or not description:
	flash('Ошибка: Заполните все обязательные поля (Название, Цена, Описание).', 'error')
	return redirect(url_for('admin'))

	try:
	price = float(price.replace(',', '.'))
	except ValueError:
	flash('Ошибка: Неверный формат цены.', 'error')
	return redirect(url_for('admin'))

	photos_list = []
	if photos_files and any(f.filename for f in photos_files):
	uploads_dir = 'uploads'
	os.makedirs(uploads_dir, exist_ok=True)
	for i, photo in enumerate(photos_files[:10]):
	if photo and allowed_file(photo.filename):
	base, extension = os.path.splitext(photo.filename)
	unique_filename = secure_filename(f"{name.replace(' ','_')}_{int(time.time())}_{i}{extension}")
	temp_path = os.path.join(uploads_dir, unique_filename)
	try:
	photo.save(temp_path)
	api.upload_file(
	path_or_fileobj=temp_path,
	path_in_repo=f"photos/{unique_filename}",
	repo_id=REPO_ID,
	repo_type="dataset",
	token=HF_TOKEN_WRITE,
	commit_message=f"Добавлено фото для товара {name}"
	)
	photos_list.append(unique_filename)
	except Exception as e:
	flash(f'Ошибка при загрузке фото {photo.filename}: {e}', 'error')
	finally:
	if os.path.exists(temp_path):
	os.remove(temp_path)

	new_product = {
	'id': str(uuid.uuid4()),
	'name': name,
	'price': price,
	'description': description,
	'category': category if category in categories else 'Без категории',
	'photos': photos_list,
	'colors': colors,
	'models': models,
	'in_stock': True,
	'is_top': False
	}
	products.append(new_product)
	save_data(data)
	flash('Товар успешно добавлен.', 'success')
	return redirect(url_for('admin'))

	elif action == 'edit':
	product_id = request.form.get('product_id')
	product_to_edit = next((p for p in products if p.get('id') == product_id), None)

	if not product_to_edit:
	flash('Ошибка: Товар не найден для редактирования.', 'error')
	return redirect(url_for('admin'))

	name = request.form.get('name', '').strip()
	price = request.form.get('price', '').strip()
	description = request.form.get('description', '').strip()
	category = request.form.get('category', 'Без категории').strip()
	photos_files = request.files.getlist('photos')
	colors = [c.strip() for c in request.form.getlist('colors') if c.strip()]
	models = [m.strip() for m in request.form.getlist('models') if m.strip()]

	if not name or not price or not description:
	flash('Ошибка: Заполните все обязательные поля.', 'error')
	return redirect(url_for('admin'))

	try:
	price = float(price.replace(',', '.'))
	except ValueError:
	flash('Ошибка: Неверный формат цены при редактировании.', 'error')
	return redirect(url_for('admin'))

	product_to_edit['name'] = name
	product_to_edit['price'] = price
	product_to_edit['description'] = description
	product_to_edit['category'] = category if category in categories else 'Без категории'
	product_to_edit['colors'] = colors
	product_to_edit['models'] = models

	if photos_files and any(f.filename for f in photos_files):
	new_photos_list = []
	uploads_dir = 'uploads'
	os.makedirs(uploads_dir, exist_ok=True)

	for old_filename in product_to_edit.get('photos', []):
	try:
	api.delete_file(path_in_repo=f"photos/{old_filename}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE)
	except Exception as e:
	pass

	for i, photo in enumerate(photos_files[:10]):
	if photo and allowed_file(photo.filename):
	base, extension = os.path.splitext(photo.filename)
	unique_filename = secure_filename(f"{name.replace(' ','_')}_{int(time.time())}_{i}{extension}")
	temp_path = os.path.join(uploads_dir, unique_filename)
	try:
	photo.save(temp_path)
	api.upload_file(
	path_or_fileobj=temp_path,
	path_in_repo=f"photos/{unique_filename}",
	repo_id=REPO_ID,
	repo_type="dataset",
	token=HF_TOKEN_WRITE,
	commit_message=f"Обновлено фото для товара {name}"
	)
	new_photos_list.append(unique_filename)
	except Exception as e:
	flash(f'Ошибка при загрузке нового фото {photo.filename}: {e}', 'error')
	finally:
	if os.path.exists(temp_path):
	os.remove(temp_path)

	product_to_edit['photos'] = new_photos_list

	save_data(data)
	flash('Товар успешно отредактирован.', 'success')
	return redirect(url_for('admin'))

	elif action == 'delete':
	product_id = request.form.get('product_id')
	product_to_delete = next((p for p in products if p.get('id') == product_id), None)

	if product_to_delete:
	for filename in product_to_delete.get('photos', []):
	try:
	api.delete_file(path_in_repo=f"photos/{filename}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE)
	except Exception as e:
	pass

	data['products'] = [p for p in products if p.get('id') != product_id]
	save_data(data)
	flash('Товар удален.', 'success')
	return redirect(url_for('admin'))
	flash('Ошибка: Товар не найден для удаления.', 'error')
	return redirect(url_for('admin'))

	products.sort(key=lambda p: p['name'].lower())

	return render_template_string('''
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Админ-панель ZZIRIX</title>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
	<style>''' + BASE_STYLE + '''
	body { padding: 20px; }
	.container { max-width: 1200px; margin: 0 auto; }
	.header { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color-light); margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
	.header-logo { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; }
	h1, h2 { font-weight: 700; margin-bottom: 25px; }
	form { background: var(--card-background-light); padding: 30px; border-radius: var(--border-radius-large); margin-bottom: 30px; box-shadow: var(--shadow-light); }
	body.dark-mode form { background: var(--card-background-dark); }
	label { font-weight: 600; margin-top: 18px; margin-bottom: 5px; display: block; }
	input, textarea, select { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border-color-light); border-radius: var(--border-radius-medium); }
	body.dark-mode input, body.dark-mode textarea, body.dark-mode select { border-color: var(--border-color-dark); background-color: var(--card-background-dark); color: var(--text-color-dark); }
	button { padding: 12px 22px; border: none; border-radius: var(--border-radius-medium); background-color: var(--primary-color); color: white; cursor: pointer; margin-top: 15px; }
	.delete-button { background-color: var(--danger-color); margin-left: 10px; }
	.product-list, .category-list { display: grid; gap: 20px; }
	.product-item, .category-item { background: var(--card-background-light); padding: 20px; border-radius: var(--border-radius-large); box-shadow: var(--shadow-light); }
	body.dark-mode .product-item, body.dark-mode .category-item { background: var(--card-background-dark); }
	.color-input-group, .model-input-group { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
	.color-input-group input, .model-input-group input { flex-grow: 1; margin-bottom: 0; }
	.remove-input-btn { background-color: #ccc; color: #555; padding: 8px 12px; margin-top: 0; }
	.add-color-btn, .add-model-btn { background-color: var(--accent-color); width: auto; padding: 10px 18px; margin-bottom: 15px; }
	.product-photos-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; margin-bottom: 15px; }
	.product-photos-preview img, .product-photos-preview video { max-width: 90px; height: auto; border-radius: var(--border-radius-small); border: 1px solid var(--border-color-light); }
	#admin-search-input { width: 100%; max-width: 400px; }
	.header-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<div class="header-info">
	<img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
	<h1>Админ-панель</h1>
	</div>
	<div class="header-buttons">
	<a href="{{ url_for('order_history') }}" style="text-decoration: none;" class="product-button">История накладных</a>
	<a href="{{ url_for('catalog') }}" style="text-decoration: none;" class="product-button">Перейти в каталог</a>
	</div>
	</div>

	{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
	{% for category, message in messages %}
	<div class="flash {{ category }}">{{ message }}</div>
	{% endfor %}
	{% endif %}
	{% endwith %}

	<h2>Добавление товара</h2>
	<form method="POST" enctype="multipart/form-data">
	<input type="hidden" name="action" value="add">
	<label>Название товара:</label>
	<input type="text" name="name" required>
	<label>Цена:</label>
	<input type="number" name="price" step="0.01" required>
	<label>Описание:</label>
	<textarea name="description" rows="4" required></textarea>
	<label>Категория:</label>
	<select name="category">
	<option value="Без категории">Без категории</option>
	{% for category in categories %}
	<option value="{{ category }}">{{ category }}</option>
	{% endfor %}
	</select>
	<label>Фотографии и видео (до 10):</label>
	<input type="file" name="photos" accept="image/,video/" multiple>
	<label>Цвета:</label>
	<div id="color-inputs">
	<div class="color-input-group">
	<input type="text" name="colors" placeholder="Например: Красный">
	<button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
	</div>
	</div>
	<button type="button" class="add-color-btn" onclick="addInput('color-inputs', 'colors', 'Цвет')">Добавить цвет</button>
	<label>Модели телефона:</label>
	<div id="model-inputs">
	<div class="model-input-group">
	<input type="text" name="models" placeholder="Например: iPhone 14">
	<button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
	</div>
	</div>
	<button type="button" class="add-model-btn" onclick="addInput('model-inputs', 'models', 'Модель')">Добавить модель</button>
	<button type="submit">Добавить товар</button>
	</form>

	<h2>Управление категориями</h2>
	<form method="POST">
	<input type="hidden" name="action" value="add_category">
	<label>Название категории:</label>
	<input type="text" name="category_name" required>
	<button type="submit">Добавить</button>
	</form>

	<h2>Список категорий</h2>
	<div class="category-list">
	{% for category in categories %}
	<div class="category-item">
	<h3>{{ category }}</h3>
	<form method="POST" style="display: inline;">
	<input type="hidden" name="action" value="delete_category">
	<input type="hidden" name="category_name" value="{{ category }}">
	<button type="submit" class="delete-button">Удалить</button>
	</form>
	</div>
	{% endfor %}
	</div>

	<h2>Управление базой данных</h2>
	<div>
	<form method="POST" action="{{ url_for('backup') }}" style="display: inline;">
	<button type="submit">Создать копию (вручную)</button>
	</form>
	<form method="GET" action="{{ url_for('download') }}" style="display: inline;">
	<button type="submit">Скачать базу (JSON)</button>
	</form>
	</div>

	<h2 style="margin-top: 40px;">Список товаров</h2>
	<input type="text" id="admin-search-input" placeholder="Поиск товаров в админ-панели..." style="margin-bottom: 20px;">
	<div class="product-list" id="admin-product-list">
	{% for product in products %}
	<div class="product-item"
	data-name="{{ product['name']\|lower }}"
	data-description="{{ product['description']\|lower }}"
	data-category="{{ product.get('category', 'без категории')\|lower }}">
	<h3>{{ product['name'] }}</h3>
	<p><strong>ID:</strong> {{ product.id }}</p>
	<p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
	<p><strong>Цена:</strong> {{ "%.2f"\|format(product['price']) }} с</p>
	<p><strong>Описание:</strong> {{ product['description'] }}</p>
	<p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])\|join(', ') }}</p>
	<p><strong>Модели:</strong> {{ product.get('models', ['Нет моделей'])\|join(', ') }}</p>
	{% if product.get('photos') and product['photos']\|length > 0 %}
	<div class="product-photos-preview">
	{% for photo in product['photos'] %}
	{% if photo.endswith(('.mp4', '.mov', '.webm')) %}
	<video src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}?r={{ random.randint(1,1000) }}" controls></video>
	{% else %}
	<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}?r={{ random.randint(1,1000) }}">
	{% endif %}
	{% endfor %}
	</div>
	{% endif %}
	<details>
	<summary style="font-weight: 500; cursor: pointer; color: var(--primary-color); margin-top: 15px;">Редактировать</summary>
	<form method="POST" enctype="multipart/form-data" style="margin-top:20px; box-shadow:none;">
	<input type="hidden" name="action" value="edit">
	<input type="hidden" name="product_id" value="{{ product.id }}">
	<label>Название:</label>
	<input type="text" name="name" value="{{ product['name'] }}" required>
	<label>Цена:</label>
	<input type="number" name="price" step="0.01" value="{{ "%.2f"\|format(product['price']) }}" required>
	<label>Описание:</label>
	<textarea name="description" rows="4" required>{{ product['description'] }}</textarea>
	<label>Категория:</label>
	<select name="category">
	<option value="Без категории" {% if product.get('category', 'Без категории') == 'Без категории' %}selected{% endif %}>Без категории</option>
	{% for category in categories %}
	<option value="{{ category }}" {% if product.get('category') == category %}selected{% endif %}>{{ category }}</option>
	{% endfor %}
	</select>
	<label>Фотографии и видео (заменят существующие):</label>
	<input type="file" name="photos" accept="image/,video/" multiple>
	<label>Цвета:</label>
	<div id="edit-color-inputs-{{ product.id }}">
	{% for color in product.get('colors', []) %}
	<div class="color-input-group">
	<input type="text" name="colors" value="{{ color }}">
	<button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
	</div>
	{% endfor %}
	<div class="color-input-group">
	<input type="text" name="colors" placeholder="Например: Новый цвет">
	<button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
	</div>
	</div>
	<button type="button" class="add-color-btn" onclick="addInput('edit-color-inputs-{{ product.id }}', 'colors', 'Цвет')">Добавить цвет</button>
	<label>Модели телефона:</label>
	<div id="edit-model-inputs-{{ product.id }}">
	{% for model in product.get('models', []) %}
	<div class="model-input-group">
	<input type="text" name="models" value="{{ model }}">
	<button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
	</div>
	{% endfor %}
	<div class="model-input-group">
	<input type="text" name="models" placeholder="Например: Новая модель">
	<button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
	</div>
	</div>
	<button type="button" class="add-model-btn" onclick="addInput('edit-model-inputs-{{ product.id }}', 'models', 'Модель')">Добавить модель</button>
	<button type="submit">Сохранить</button>
	</form>
	</details>
	<form method="POST" style="margin-top: 15px; background:transparent; padding:0; box-shadow:none;">
	<input type="hidden" name="action" value="delete">
	<input type="hidden" name="product_id" value="{{ product.id }}">
	<button type="submit" class="delete-button">Удалить товар</button>
	</form>
	</div>
	{% endfor %}
	</div>
	</div>
	<script>
	function addInput(containerId, name, placeholderPrefix) {
	const container = document.getElementById(containerId);
	const newInput = document.createElement('div');
	newInput.className = `${name.replace('s', '')}-input-group`;
	newInput.innerHTML = `
	<input type="text" name="${name}" placeholder="Например: ${placeholderPrefix}">
	<button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
	`;
	container.appendChild(newInput);
	}

	document.getElementById('admin-search-input').addEventListener('input', filterAdminProducts);

	function filterAdminProducts() {
	const searchTerm = document.getElementById('admin-search-input').value.toLowerCase().trim();
	document.querySelectorAll('.product-item').forEach(productItem => {
	const name = productItem.getAttribute('data-name');
	const description = productItem.getAttribute('data-description');
	const category = productItem.getAttribute('data-category');
	const matchesSearch = (name && name.includes(searchTerm)) \|\| (description && description.includes(searchTerm)) \|\| (category && category.includes(searchTerm));
	productItem.style.display = matchesSearch ? 'block' : 'none';
	});
	}
	</script>
	</body>
	</html>
	''',
	products=products,
	categories=categories,
	repo_id=REPO_ID,
	LOGO_URL=LOGO_URL,
	random=random
	)

	@app.route('/admin/orders')
	def order_history():
	data = load_data()
	orders = list(data.get('orders', {}).values())
	orders.sort(key=lambda x: x.get('date', ''), reverse=True)

	return render_template_string('''
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>История накладных</title>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
	<style>''' + BASE_STYLE + '''
	body { padding: 20px; }
	.container { max-width: 1200px; margin: 0 auto; }
	.header-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
	.btn-action { display: inline-block; padding: 8px 12px; margin: 2px; text-decoration: none; border-radius: var(--border-radius-small); font-size: 0.9rem; font-weight: 500; color: white; cursor: pointer; text-align: center; }
	.btn-view { background-color: var(--primary-color); }
	.btn-discount { background-color: var(--accent-color); }
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<div class="header-info">
	<img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
	<h1>История накладных</h1>
	</div>
	<div class="header-buttons">
	<a href="{{ url_for('admin') }}" class="product-button" style="text-decoration: none;">Админ-панель</a>
	<a href="{{ url_for('catalog') }}" class="product-button" style="text-decoration: none;">В каталог</a>
	</div>
	</div>

	{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
	{% for category, message in messages %}
	<div class="flash {{ category }}">{{ message }}</div>
	{% endfor %}
	{% endif %}
	{% endwith %}

	<div class="admin-table-responsive">
	<table class="admin-table">
	<thead>
	<tr>
	<th>ID Заказа</th>
	<th>Дата</th>
	<th>Клиент</th>
	<th>Телефон</th>
	<th>Сумма (Итого)</th>
	<th>Действия</th>
	</tr>
	</thead>
	<tbody>
	{% for order in orders %}
	<tr>
	<td>{{ order.id }}</td>
	<td>{{ order.date }}</td>
	<td>{{ order.name }}</td>
	<td>{{ order.phone }}</td>
	<td>{{ "%.2f"\|format(order.get('final_total', order.total)) }} с</td>
	<td>
	<a href="{{ url_for('view_receipt', order_id=order.id) }}" class="btn-action btn-view" target="_blank">Посмотреть</a>
	<a href="{{ url_for('apply_discount', order_id=order.id) }}" class="btn-action btn-discount">Сделать скидку</a>
	</td>
	</tr>
	{% else %}
	<tr>
	<td colspan="6" style="text-align: center;">Накладных пока нет.</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	</div>
	</div>
	</body>
	</html>
	''', orders=orders, LOGO_URL=LOGO_URL)

	@app.route('/admin/orders/<order_id>/discount', methods=['GET', 'POST'])
	def apply_discount(order_id):
	data = load_data()
	order = data.get('orders', {}).get(order_id)
	if not order:
	flash('Заказ не найден', 'error')
	return redirect(url_for('order_history'))

	if request.method == 'POST':
	overall_disc = request.form.get('overall_discount', type=float)
	if overall_disc is None:
	overall_disc = 0.0

	order['order_discount_percent'] = overall_disc

	for idx, item in enumerate(order.get('cart', [])):
	item_disc = request.form.get(f'item_discount_{idx}', type=float)
	if item_disc is None:
	item_disc = 0.0
	item['discount_percent'] = item_disc

	original_total = sum(item.get('price', 0) * item.get('quantity', 1) for item in order['cart'])

	discounted_subtotal = 0
	for item in order['cart']:
	item_price = item.get('price', 0)
	disc_pct = item.get('discount_percent', 0.0)
	discounted_item_price = item_price * (1 - disc_pct / 100)
	discounted_subtotal += discounted_item_price * item.get('quantity', 1)

	final_total = discounted_subtotal * (1 - overall_disc / 100)

	order['original_total'] = original_total
	order['final_total'] = final_total

	save_data(data)
	flash('Скидка успешно применена к накладной.', 'success')
	return redirect(url_for('order_history'))

	return render_template_string('''
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Скидка на заказ {{ order.id }}</title>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
	<style>''' + BASE_STYLE + '''
	body { padding: 20px; }
	.container { max-width: 900px; margin: 0 auto; }
	form { background: var(--card-background-light); padding: 30px; border-radius: var(--border-radius-large); margin-bottom: 30px; box-shadow: var(--shadow-light); }
	body.dark-mode form { background: var(--card-background-dark); }
	label { font-weight: 600; margin-top: 15px; margin-bottom: 5px; display: block; }
	input { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid var(--border-color-light); border-radius: var(--border-radius-medium); font-size: 1rem; }
	body.dark-mode input { border-color: var(--border-color-dark); background-color: var(--card-background-dark); color: var(--text-color-dark); }
	.item-block { border: 1px solid var(--border-color-light); padding: 15px; margin-bottom: 15px; border-radius: var(--border-radius-medium); }
	body.dark-mode .item-block { border-color: var(--border-color-dark); }
	</style>
	</head>
	<body>
	<div class="container">
	<div class="header">
	<div class="header-info">
	<img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
	<h1>Управление скидками</h1>
	</div>
	<a href="{{ url_for('order_history') }}" class="product-button" style="text-decoration: none; width: auto;">Назад к истории</a>
	</div>

	<form method="POST">
	<h2 style="margin-bottom: 20px;">Скидка на накладную №{{ order.id }}</h2>
	<label>Скидка на весь чек (%):</label>
	<input type="number" name="overall_discount" step="0.01" min="0" max="100" value="{{ order.get('order_discount_percent', 0.0) }}">

	<h3 style="margin-top: 30px; margin-bottom: 20px;">Скидка на отдельные позиции</h3>
	{% for item in order.cart %}
	<div class="item-block">
	<p style="font-size: 1.1rem; margin-bottom: 10px;"><strong>{{ item.name }}</strong></p>
	<p style="margin-bottom: 10px; color: var(--secondary-text-color-light);">
	Цена: {{ "%.2f"\|format(item.price) }} с \| Кол-во: {{ item.quantity }} \| Исходная сумма: {{ "%.2f"\|format(item.price * item.quantity) }} с
	</p>
	<label>Скидка на эту позицию (%):</label>
	<input type="number" name="item_discount_{{ loop.index0 }}" step="0.01" min="0" max="100" value="{{ item.get('discount_percent', 0.0) }}">
	</div>
	{% endfor %}

	<button type="submit" class="product-button" style="margin-top: 20px;">Применить скидки и сохранить</button>
	</form>
	</div>
	</body>
	</html>
	''', order=order)

	@app.route('/backup', methods=['POST'])
	def backup():
	try:
	data = load_data()
	save_data(data)
	flash('Резервная копия успешно создана и загружена.', 'success')
	return redirect(url_for('admin'))
	except Exception as e:
	flash(f'Ошибка при создании резервной копии: {e}', 'error')
	return redirect(url_for('admin'))

	@app.route('/download', methods=['GET'])
	def download():
	try:
	download_db_from_hf()
	if os.path.exists(DATA_FILE):
	return send_file(DATA_FILE, as_attachment=True, mimetype='application/json', download_name='data_zzirix_backup.json')
	flash('Файл базы данных не найден после попытки скачивания.', 'error')
	return redirect(url_for('admin'))
	except Exception as e:
	flash(f'Ошибка при скачивании базы данных: {e}', 'error')
	return redirect(url_for('admin'))

	if __name__ == '__main__':
	uploads_dir = 'uploads'
	os.makedirs(uploads_dir, exist_ok=True)
	try:
	current_data = load_data()
	save_data(current_data)
	except Exception as e:
	pass

	backup_thread = threading.Thread(target=periodic_backup, daemon=True)
	backup_thread.start()
	app.run(debug=True, host='0.0.0.0', port=7860)