|
|
from flask import Flask, render_template_string, request, redirect, url_for, flash, send_file |
|
|
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: |
|
|
logging.info(f"{DATA_FILE} не найден или пуст, попытка загрузки с HF.") |
|
|
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) |
|
|
logging.info("Данные успешно загружены из JSON.") |
|
|
else: |
|
|
data = {'products': [], 'categories': [], 'orders': {}} |
|
|
logging.warning("Файл базы данных пуст или не существует после всех попыток, создается пустая структура.") |
|
|
|
|
|
return initialize_data_structure(data) |
|
|
except (json.JSONDecodeError, FileNotFoundError) as e: |
|
|
logging.error(f"Ошибка при чтении {DATA_FILE}: {e}. Создается пустая структура.") |
|
|
return initialize_data_structure({}) |
|
|
except RepositoryNotFoundError as e: |
|
|
logging.error(f"Репозиторий HF не найден: {e}. Создается локальная база данных.") |
|
|
return initialize_data_structure({}) |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка при загрузке данных: {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() |
|
|
logging.info("Данные сохранены и выгружены в HF") |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка при сохранении данных: {e}") |
|
|
if os.path.exists(temp_file): |
|
|
os.remove(temp_file) |
|
|
raise |
|
|
|
|
|
def upload_db_to_hf(): |
|
|
if not HF_TOKEN_WRITE: |
|
|
logging.warning("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"Резервная копия {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}" |
|
|
) |
|
|
logging.info("База данных выгружена в Hugging Face") |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка при выгрузке базы данных: {e}") |
|
|
|
|
|
def download_db_from_hf(): |
|
|
if not HF_TOKEN_READ: |
|
|
logging.warning("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 |
|
|
) |
|
|
logging.info("База данных загружена с Hugging Face") |
|
|
except RepositoryNotFoundError: |
|
|
logging.error(f"Репозиторий {REPO_ID} не найден. Пропускаем загрузку.") |
|
|
if not os.path.exists(DATA_FILE): |
|
|
logging.info("Создается пустой файл базы данных, так как загрузка не удалась и файл не существует.") |
|
|
with open(DATA_FILE, 'w', encoding='utf-8') as f: |
|
|
json.dump(initialize_data_structure({}), f) |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка при загрузке базы данных: {e}") |
|
|
if not os.path.exists(DATA_FILE): |
|
|
logging.info("Создается пустой файл базы данных, так как загрузка не удалась и файл не существует.") |
|
|
with open(DATA_FILE, 'w', encoding='utf-8') as f: |
|
|
json.dump(initialize_data_structure({}), f) |
|
|
|
|
|
def periodic_backup(): |
|
|
while True: |
|
|
time.sleep(3600) |
|
|
logging.info("Запуск периодического резервного копирования.") |
|
|
try: |
|
|
data = load_data() |
|
|
save_data(data) |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка во время периодического резервного копирования: {e}") |
|
|
|
|
|
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); |
|
|
} |
|
|
.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); |
|
|
} |
|
|
.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; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 15px; |
|
|
} |
|
|
.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; |
|
|
} |
|
|
} |
|
|
''' |
|
|
|
|
|
@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> |
|
|
<button class="theme-toggle" onclick="toggleTheme()"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
</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> |
|
|
<input type="number" id="quantityInput" class="quantity-input" min="1" value="1"> |
|
|
<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; 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" onclick="orderViaWhatsApp()">Заказать</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> |
|
|
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 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 |
|
|
}); |
|
|
} |
|
|
|
|
|
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'; |
|
|
} |
|
|
|
|
|
function orderViaWhatsApp() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
if (cart.length === 0) { |
|
|
alert("Корзина пуста!"); |
|
|
return; |
|
|
} |
|
|
let total = 0; |
|
|
let orderText = "Здравствуйте, меня интересует заказ:%0A%0A"; |
|
|
cart.forEach((item, index) => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
orderText += `${index + 1}. ${item.name}%0AКоличество: ${item.quantity}%0AЦена: ${item.price.toFixed(2)} с%0AЦвет: ${item.color}%0AМодель: ${item.model}%0A--%0A`; |
|
|
}); |
|
|
orderText += `*Итого к оплате: ${total.toFixed(2)} с*%0A%0AЖду подтверждения заказа.`; |
|
|
window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank'); |
|
|
clearCart(); |
|
|
} |
|
|
|
|
|
function clearCart() { |
|
|
localStorage.removeItem('cart'); |
|
|
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; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
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'; |
|
|
}); |
|
|
} |
|
|
|
|
|
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(); |
|
|
</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> |
|
|
<button class="theme-toggle" onclick="toggleTheme()"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
</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> |
|
|
<input type="number" id="quantityInput" class="quantity-input" min="1" value="1"> |
|
|
<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; 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" onclick="orderViaWhatsApp()">Заказать</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> |
|
|
const products = {{ products_all|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 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 |
|
|
}); |
|
|
} |
|
|
|
|
|
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'; |
|
|
} |
|
|
|
|
|
function orderViaWhatsApp() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
if (cart.length === 0) { |
|
|
alert("Корзина пуста!"); |
|
|
return; |
|
|
} |
|
|
let total = 0; |
|
|
let orderText = "Здравствуйте, меня интересует заказ:%0A%0A"; |
|
|
cart.forEach((item, index) => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
orderText += `${index + 1}. ${item.name}%0AКоличество: ${item.quantity}%0AЦена: ${item.price.toFixed(2)} с%0AЦвет: ${item.color}%0AМодель: ${item.model}%0A--%0A`; |
|
|
}); |
|
|
orderText += `*Итого к оплате: ${total.toFixed(2)} с*%0A%0AЖду подтверждения заказа.`; |
|
|
window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank'); |
|
|
clearCart(); |
|
|
} |
|
|
|
|
|
function clearCart() { |
|
|
localStorage.removeItem('cart'); |
|
|
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; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('search-input').addEventListener('input', filterProducts); |
|
|
|
|
|
function filterProducts() { |
|
|
const searchTerm = document.getElementById('search-input').value.toLowerCase().trim(); |
|
|
const activeCategory = "{{ category_name | lower }}"; |
|
|
|
|
|
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'; |
|
|
}); |
|
|
} |
|
|
|
|
|
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(); |
|
|
</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('/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: |
|
|
logging.error(f"Ошибка при загрузке фото {unique_filename}: {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) |
|
|
logging.info(f"Старое фото {old_filename} удалено из HF.") |
|
|
except Exception as e: |
|
|
logging.error(f"Не удалось удалить старое фото {old_filename} из HF: {e}") |
|
|
|
|
|
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: |
|
|
logging.error(f"Ошибка при загрузке нового фото {unique_filename}: {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) |
|
|
logging.info(f"Фото {filename} удалено из HF.") |
|
|
except Exception as e: |
|
|
logging.error(f"Не удалось удалить фото {filename} из HF: {e}") |
|
|
|
|
|
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 { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background: var(--background-light); |
|
|
color: var(--text-color-light); |
|
|
padding: 20px; |
|
|
line-height: 1.6; |
|
|
transition: background 0.3s, color 0.3s; |
|
|
} |
|
|
.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; |
|
|
} |
|
|
.header-logo { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
margin-right: 15px; |
|
|
} |
|
|
.header-logo:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
h1, h2 { |
|
|
font-weight: 700; |
|
|
margin-bottom: 25px; |
|
|
color: var(--text-color-light); |
|
|
} |
|
|
body.dark-mode h1, body.dark-mode h2 { |
|
|
color: var(--text-color-dark); |
|
|
} |
|
|
form { |
|
|
background: var(--card-background-light); |
|
|
padding: 30px; |
|
|
border-radius: var(--border-radius-large); |
|
|
box-shadow: var(--shadow-light); |
|
|
margin-bottom: 30px; |
|
|
transition: background 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
body.dark-mode form { |
|
|
background: var(--card-background-dark); |
|
|
box-shadow: var(--shadow-dark); |
|
|
} |
|
|
label { |
|
|
font-weight: 600; |
|
|
margin-top: 18px; |
|
|
margin-bottom: 5px; |
|
|
display: block; |
|
|
color: var(--text-color-light); |
|
|
} |
|
|
body.dark-mode label { |
|
|
color: var(--text-color-dark); |
|
|
} |
|
|
input, textarea, select { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
margin-bottom: 10px; |
|
|
border: 1px solid var(--border-color-light); |
|
|
border-radius: var(--border-radius-medium); |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
background-color: var(--card-background-light); |
|
|
color: var(--text-color-light); |
|
|
} |
|
|
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); |
|
|
} |
|
|
input:focus, textarea:focus, select:focus { |
|
|
border-color: var(--primary-color); |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); |
|
|
outline: none; |
|
|
} |
|
|
button { |
|
|
padding: 12px 22px; |
|
|
border: none; |
|
|
border-radius: var(--border-radius-medium); |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
margin-top: 15px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
button:hover { |
|
|
background-color: var(--primary-dark-color); |
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.delete-button { |
|
|
background-color: var(--danger-color); |
|
|
margin-left: 10px; |
|
|
} |
|
|
.delete-button:hover { |
|
|
background-color: var(--danger-dark-color); |
|
|
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); |
|
|
} |
|
|
.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); |
|
|
transition: background 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
body.dark-mode .product-item, body.dark-mode .category-item { |
|
|
background: var(--card-background-dark); |
|
|
box-shadow: var(--shadow-dark); |
|
|
} |
|
|
.product-item h3, .category-item h3 { |
|
|
font-size: 1.3rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 10px; |
|
|
color: var(--text-color-light); |
|
|
} |
|
|
body.dark-mode .product-item h3, body.dark-mode .category-item h3 { |
|
|
color: var(--text-color-dark); |
|
|
} |
|
|
.product-item p { |
|
|
font-size: 0.95rem; |
|
|
margin-bottom: 5px; |
|
|
color: var(--secondary-text-color-light); |
|
|
} |
|
|
body.dark-mode .product-item p { |
|
|
color: var(--secondary-text-color-dark); |
|
|
} |
|
|
.edit-form { |
|
|
margin-top: 20px; |
|
|
padding: 20px; |
|
|
background: var(--background-light); |
|
|
border-radius: var(--border-radius-medium); |
|
|
box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); |
|
|
} |
|
|
body.dark-mode .edit-form { |
|
|
background: #3a4250; |
|
|
box-shadow: inset 0 2px 5px rgba(0,0,0,0.15); |
|
|
} |
|
|
.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; |
|
|
border-radius: var(--border-radius-small); |
|
|
font-size: 0.8rem; |
|
|
margin-top: 0; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
.remove-input-btn:hover { |
|
|
background-color: #bbb; |
|
|
box-shadow: none; |
|
|
transform: none; |
|
|
} |
|
|
.add-color-btn, .add-model-btn { |
|
|
background-color: var(--accent-color); |
|
|
width: auto; |
|
|
padding: 10px 18px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
.add-color-btn:hover, .add-model-btn:hover { |
|
|
background-color: var(--accent-dark-color); |
|
|
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); |
|
|
} |
|
|
.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); |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05); |
|
|
} |
|
|
body.dark-mode .product-photos-preview img, body.dark-mode .product-photos-preview video { |
|
|
border-color: var(--border-color-dark); |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15); |
|
|
} |
|
|
|
|
|
.admin-section-title { |
|
|
margin-top: 40px; |
|
|
margin-bottom: 20px; |
|
|
font-size: 1.8rem; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
body.dark-mode .admin-section-title { |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.db-management-buttons button { |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.search-admin-container { |
|
|
margin: 20px 0; |
|
|
text-align: left; |
|
|
} |
|
|
#admin-search-input { |
|
|
width: 100%; |
|
|
max-width: 400px; |
|
|
margin-left: 0; |
|
|
border: 1px solid var(--border-color-light); |
|
|
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); |
|
|
} |
|
|
body.dark-mode #admin-search-input { |
|
|
border-color: var(--border-color-dark); |
|
|
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); |
|
|
} |
|
|
</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('catalog') }}" style="text-decoration: none;" class="product-button">Перейти в каталог</a> |
|
|
</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 class="admin-section-title">Добавление товара</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 class="admin-section-title">Управление категориями</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 class="admin-section-title">Управление базой данных</h2> |
|
|
<div class="db-management-buttons"> |
|
|
<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 class="admin-section-title">Список товаров</h2> |
|
|
<div class="search-admin-container"> |
|
|
<input type="text" id="admin-search-input" placeholder="Поиск товаров в админ-панели..."> |
|
|
</div> |
|
|
<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) }}" |
|
|
alt="{{ product['name'] }}" |
|
|
loading="lazy" |
|
|
controls |
|
|
style="max-width: 90px; height: auto; border-radius: var(--border-radius-small); border: 1px solid var(--border-color-light); box-shadow: 0 2px 8px rgba(0,0,0,0.05);"> |
|
|
</video> |
|
|
{% else %} |
|
|
<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}?r={{ random.randint(1,1000) }}" |
|
|
alt="{{ product['name'] }}" |
|
|
loading="lazy"> |
|
|
{% 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" class="edit-form"> |
|
|
<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>Фотографии и видео (заменят существующие, до 10):</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;"> |
|
|
<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('/backup', methods=['POST']) |
|
|
def backup(): |
|
|
try: |
|
|
data = load_data() |
|
|
save_data(data) |
|
|
flash('Резервная копия успешно создана и загружена.', 'success') |
|
|
return redirect(url_for('admin')) |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка при ручном создании резервной копии: {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: |
|
|
logging.error(f"Ошибка при скачивании базы данных: {e}") |
|
|
flash(f'Ошибка при скачивании базы данных: {e}', 'error') |
|
|
return redirect(url_for('admin')) |
|
|
|
|
|
if __name__ == '__main__': |
|
|
uploads_dir = 'uploads' |
|
|
os.makedirs(uploads_dir, exist_ok=True) |
|
|
|
|
|
logging.info("Начальная проверка и обновление структуры данных...") |
|
|
try: |
|
|
current_data = load_data() |
|
|
save_data(current_data) |
|
|
logging.info("Структура данных проверена и при необходимости обновлена.") |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка во время начальной проверки/обновления структуры данных: {e}") |
|
|
|
|
|
backup_thread = threading.Thread(target=periodic_backup, daemon=True) |
|
|
backup_thread.start() |
|
|
logging.info("Запуск Flask приложения...") |
|
|
app.run(debug=True, host='0.0.0.0', port=7860) |
