|
|
from flask import Flask, render_template_string, request, redirect, url_for |
|
|
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 |
|
|
|
|
|
app = Flask(__name__) |
|
|
DATA_FILE = 'data.json' |
|
|
|
|
|
|
|
|
REPO_ID = "Kgshop/Socksmart" |
|
|
HF_TOKEN_WRITE = os.getenv("HF_TOKEN") |
|
|
HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") |
|
|
|
|
|
|
|
|
logging.basicConfig(level=logging.DEBUG) |
|
|
|
|
|
def load_data(): |
|
|
try: |
|
|
download_db_from_hf() |
|
|
with open(DATA_FILE, 'r', encoding='utf-8') as file: |
|
|
data = json.load(file) |
|
|
logging.info("Данные успешно загружены из JSON") |
|
|
if not isinstance(data, dict) or 'products' not in data or 'categories' not in data: |
|
|
return {'products': [], 'categories': []} |
|
|
return data |
|
|
except FileNotFoundError: |
|
|
logging.warning("Локальный файл базы данных не найден после скачивания.") |
|
|
return {'products': [], 'categories': []} |
|
|
except json.JSONDecodeError: |
|
|
logging.error("Ошибка: Невозможно декодировать JSON файл.") |
|
|
return {'products': [], 'categories': []} |
|
|
except RepositoryNotFoundError: |
|
|
logging.error("Репозиторий не найден. Создание локальной базы данных.") |
|
|
return {'products': [], 'categories': []} |
|
|
except Exception as e: |
|
|
logging.error(f"Произошла ошибка при загрузке данных: {e}") |
|
|
return {'products': [], 'categories': []} |
|
|
|
|
|
def save_data(data): |
|
|
try: |
|
|
with open(DATA_FILE, 'w', encoding='utf-8') as file: |
|
|
json.dump(data, file, ensure_ascii=False, indent=4) |
|
|
logging.info("Данные успешно сохранены в JSON") |
|
|
upload_db_to_hf() |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка при сохранении данных: {e}") |
|
|
raise |
|
|
|
|
|
def upload_db_to_hf(): |
|
|
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("Резервная копия JSON базы успешно загружена на Hugging Face.") |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка при загрузке резервной копии: {e}") |
|
|
|
|
|
def download_db_from_hf(): |
|
|
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 |
|
|
) |
|
|
logging.info("JSON база успешно скачана из Hugging Face.") |
|
|
except RepositoryNotFoundError as e: |
|
|
logging.error(f"Репозиторий не найден: {e}") |
|
|
raise |
|
|
except Exception as e: |
|
|
logging.error(f"Ошибка при скачивании JSON базы: {e}") |
|
|
raise |
|
|
|
|
|
def periodic_backup(): |
|
|
while True: |
|
|
upload_db_to_hf() |
|
|
time.sleep(800) |
|
|
|
|
|
@app.route('/') |
|
|
def catalog(): |
|
|
data = load_data() |
|
|
products = data['products'] |
|
|
|
|
|
|
|
|
catalog_html = ''' |
|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Socksmart</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> |
|
|
/* ... (your existing styles) ... */ |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa, #e4e7eb); |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
transition: background 0.3s, color 0.3s; |
|
|
padding-bottom: 60px; |
|
|
} |
|
|
body.dark-mode { |
|
|
background: linear-gradient(135deg, #1a1a2e, #2a2a3e); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
.header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.header h1 { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
letter-spacing: 1px; |
|
|
background: linear-gradient(90deg, #526df2, #7a8ff5); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
.theme-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.theme-toggle:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
body.dark-mode .theme-toggle { |
|
|
color: #bbb; |
|
|
} |
|
|
/* Removed .filters-container */ |
|
|
.search-container { |
|
|
margin: 20px 0; |
|
|
text-align: center; |
|
|
} |
|
|
#search-input { |
|
|
width: 90%; |
|
|
max-width: 600px; |
|
|
padding: 12px 18px; |
|
|
font-size: 1rem; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 25px; |
|
|
outline: none; |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
#search-input:focus { |
|
|
border-color: #526df2; |
|
|
box-shadow: 0 4px 15px rgba(82, 109, 242, 0.2); |
|
|
} |
|
|
.products-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
padding: 10px; |
|
|
} |
|
|
/* ... (rest of your product and modal styles) ... */ |
|
|
.product { |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border: 1px solid rgba(0, 0, 0, 0.05); |
|
|
border-radius: 15px; |
|
|
padding: 15px; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.product:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
body.dark-mode .product { |
|
|
background: rgba(42, 42, 62, 0.8); |
|
|
border-color: rgba(255, 255, 255, 0.05); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
body.dark-mode .product:hover { |
|
|
background: rgba(42, 42, 62, 0.9); |
|
|
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.product-image { |
|
|
width: 100%; |
|
|
aspect-ratio: 1; |
|
|
background-color: #fff; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
body.dark-mode .product-image { |
|
|
background-color: #333; |
|
|
} |
|
|
.product-image img { |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
object-fit: contain; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.product-image img:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
.product h2 { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 500; |
|
|
margin: 10px 0; |
|
|
text-align: center; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
.product-price { |
|
|
font-size: 1.2rem; |
|
|
color: #e63946; |
|
|
font-weight: 700; |
|
|
text-align: center; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.product-price .wholesale { |
|
|
font-size: 0.9rem; |
|
|
color: #526df2; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-price .discount { |
|
|
font-size: 0.9rem; |
|
|
color: #2ecc71; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-description { |
|
|
font-size: 0.85rem; |
|
|
color: #666; |
|
|
text-align: center; |
|
|
margin-bottom: 15px; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
} |
|
|
body.dark-mode .product-description { |
|
|
color: #bbb; |
|
|
} |
|
|
.product-button { |
|
|
display: block; |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
border: none; |
|
|
border-radius: 25px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
margin: 5px 0; |
|
|
text-align: center; |
|
|
text-decoration: none; |
|
|
} |
|
|
.product-button:hover { |
|
|
background-color: #3e55d1; |
|
|
box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.add-to-cart { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.add-to-cart:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.favorite-button { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.favorite-button.favorited { |
|
|
color: #e63946; |
|
|
} |
|
|
.favorite-button:hover { |
|
|
color: #e63946; |
|
|
} |
|
|
#cart-button { |
|
|
position: fixed; |
|
|
bottom: 80px; |
|
|
right: 20px; |
|
|
background-color: #e63946; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
display: none; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
z-index: 1000; |
|
|
} |
|
|
#cart-button:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
z-index: 1001; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0,0,0,0.5); |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
.modal-content { |
|
|
background: #fff; |
|
|
margin: 5% auto; |
|
|
padding: 20px; |
|
|
border-radius: 15px; |
|
|
width: 90%; |
|
|
max-width: 700px; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2); |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
body.dark-mode .modal-content { |
|
|
background: #2a2a3e; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
@keyframes slideIn { |
|
|
from { transform: translateY(-50px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
.close { |
|
|
float: right; |
|
|
font-size: 1.5rem; |
|
|
color: #666; |
|
|
cursor: pointer; |
|
|
transition: color 0.3s; |
|
|
} |
|
|
.close:hover { |
|
|
color: #333; |
|
|
} |
|
|
body.dark-mode .close { |
|
|
color: #bbb; |
|
|
} |
|
|
body.dark-mode .close:hover { |
|
|
color: #fff; |
|
|
} |
|
|
.cart-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
body.dark-mode .cart-item { |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.cart-item img { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
object-fit: contain; |
|
|
border-radius: 8px; |
|
|
margin-right: 15px; |
|
|
} |
|
|
.quantity-input, .color-select { |
|
|
width: 100%; |
|
|
max-width: 150px; |
|
|
padding: 8px; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.clear-cart { |
|
|
background-color: #e63946; |
|
|
} |
|
|
.clear-cart:hover { |
|
|
background-color: #d62828; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
} |
|
|
.order-button { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.order-button:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.navbar { |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
background-color: #fff; |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
padding: 10px 0; |
|
|
z-index: 1000; |
|
|
} |
|
|
body.dark-mode .navbar { |
|
|
background-color: #2a2a3e; |
|
|
} |
|
|
.navbar a { |
|
|
text-align: center; |
|
|
color: #666; |
|
|
text-decoration: none; |
|
|
font-size: 0.9rem; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.navbar a.active { |
|
|
color: #526df2; |
|
|
} |
|
|
.navbar a i { |
|
|
display: block; |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
body.dark-mode .navbar a { |
|
|
color: #bbb; |
|
|
} |
|
|
.navbar a:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
.wholesale-badge { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
.discount-badge { |
|
|
position: absolute; |
|
|
top: 40px; |
|
|
right: 10px; |
|
|
background-color: #2ecc71; |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
/* Styles for Address and Schedule */ |
|
|
.info-section { |
|
|
text-align: center; |
|
|
margin: 20px 0; |
|
|
padding: 15px; |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
body.dark-mode .info-section { |
|
|
background: rgba(42, 42, 62, 0.8); |
|
|
} |
|
|
.info-section h2 { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 500; |
|
|
margin-bottom: 10px; |
|
|
color: #526df2; |
|
|
} |
|
|
.info-section p { |
|
|
font-size: 1rem; |
|
|
color: #666; |
|
|
} |
|
|
body.dark-mode .info-section p { |
|
|
color: #bbb; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>Socksmart - Корейские носки , продукты и косметика </h1> |
|
|
<button class="theme-toggle" onclick="toggleTheme()"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<!-- Address and Schedule Section --> |
|
|
<div class="info-section"> |
|
|
<h2>Наш адрес</h2> |
|
|
<p>Рынок Дордой, Мурас Спорт , 2 проход , 140/2 - 140/3 контейнеры</p> |
|
|
<h2>График работы</h2> |
|
|
<p>С 7:30 до 15:00 без выходных</p> |
|
|
</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" |
|
|
onclick="openModal({{ loop.index0 }})" |
|
|
data-name="{{ product['name']|lower }}" |
|
|
data-description="{{ product['description']|lower }}" |
|
|
data-category="{{ product.get('category', 'Без категории') }}"> |
|
|
<button class="favorite-button" onclick="event.stopPropagation(); toggleFavorite({{ loop.index0 }})"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</button> |
|
|
{% if product.get('photos') and product['photos']|length > 0 %} |
|
|
<div class="product-image"> |
|
|
<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" |
|
|
alt="{{ product['name'] }}" |
|
|
loading="lazy"> |
|
|
</div> |
|
|
{% endif %} |
|
|
{% if product.get('wholesale_price') and product.get('min_wholesale') %} |
|
|
<span class="wholesale-badge">Опт от {{ product['min_wholesale'] }}</span> |
|
|
{% endif %} |
|
|
{% if product.get('discount') %} |
|
|
<span class="discount-badge">Скидка {{ product['discount'] }}%</span> |
|
|
{% endif %} |
|
|
<h2>{{ product['name'] }}</h2> |
|
|
<div class="product-price"> |
|
|
{% if product.get('discount') %} |
|
|
<span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span> |
|
|
<span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span> |
|
|
<span class="discount">Скидка: {{ product['discount'] }}%</span> |
|
|
{% else %} |
|
|
<span>{{ product['price'] }} с</span> |
|
|
{% endif %} |
|
|
{% if product.get('wholesale_price') and product.get('min_wholesale') %} |
|
|
<span class="wholesale">Опт: {{ product['wholesale_price'] }} с</span> |
|
|
{% endif %} |
|
|
</div> |
|
|
<p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p> |
|
|
<button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal({{ loop.index0 }})">В корзину</button> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Product Modal --> |
|
|
<div id="productModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close" onclick="closeModal('productModal')">×</span> |
|
|
<div id="modalContent"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Quantity and Color Modal --> |
|
|
<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> |
|
|
<button class="product-button" onclick="confirmAddToCart()">Добавить</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Cart Modal --> |
|
|
<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>Итого: <span id="cartTotal">0</span> с</strong> |
|
|
<button class="product-button clear-cart" onclick="clearCart()">Очистить</button> |
|
|
<button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="cart-button" onclick="openCartModal()">🛒</button> |
|
|
|
|
|
<!-- Navigation Bar --> |
|
|
<div class="navbar"> |
|
|
<a href="/" class="active"> |
|
|
<i class="fas fa-home"></i> |
|
|
Главная |
|
|
</a> |
|
|
<a href="/categories"> |
|
|
<i class="fas fa-list"></i> |
|
|
Каталог |
|
|
</a> |
|
|
<a href="/favorites"> |
|
|
<i class="fas fa-heart"></i> |
|
|
Избранное |
|
|
</a> |
|
|
<a href="/discounts"> |
|
|
<i class="fas fa-tag"></i> |
|
|
Скидки |
|
|
</a> |
|
|
<a href="https://api.whatsapp.com/send?phone=996555751475"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
WhatsApp |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script> |
|
|
<script> |
|
|
const products = {{ products|tojson }}; |
|
|
let selectedProductIndex = 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'); |
|
|
document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun'); |
|
|
} |
|
|
|
|
|
function openModal(index) { |
|
|
loadProductDetails(index); |
|
|
document.getElementById('productModal').style.display = "block"; |
|
|
} |
|
|
|
|
|
function closeModal(modalId) { |
|
|
document.getElementById(modalId).style.display = "none"; |
|
|
} |
|
|
|
|
|
function loadProductDetails(index) { |
|
|
fetch('/product/' + index) |
|
|
.then(response => response.text()) |
|
|
.then(data => { |
|
|
document.getElementById('modalContent').innerHTML = data; |
|
|
initializeSwiper(); |
|
|
}) |
|
|
.catch(error => console.error('Ошибка:', error)); |
|
|
} |
|
|
|
|
|
function initializeSwiper() { |
|
|
new Swiper('.swiper-container', { |
|
|
slidesPerView: 1, |
|
|
spaceBetween: 20, |
|
|
loop: true, |
|
|
grabCursor: true, |
|
|
pagination: { el: '.swiper-pagination', clickable: true }, |
|
|
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, |
|
|
zoom: { maxRatio: 3 } |
|
|
}); |
|
|
} |
|
|
|
|
|
function openQuantityModal(index) { |
|
|
selectedProductIndex = index; |
|
|
const product = products[index]; |
|
|
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); |
|
|
} |
|
|
document.getElementById('quantityModal').style.display = 'block'; |
|
|
document.getElementById('quantityInput').value = 1; |
|
|
} |
|
|
|
|
|
function confirmAddToCart() { |
|
|
if (selectedProductIndex === null) return; |
|
|
const quantity = parseInt(document.getElementById('quantityInput').value) || 1; |
|
|
const color = document.getElementById('colorSelect').value; |
|
|
if (quantity <= 0) { |
|
|
alert("Укажите количество больше 0"); |
|
|
return; |
|
|
} |
|
|
let cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
const product = products[selectedProductIndex]; |
|
|
const cartItemId = `${product.name}-${color}`; |
|
|
const existingItem = cart.find(item => item.id === cartItemId); |
|
|
|
|
|
let priceToUse = product.price; |
|
|
if (product.discount) { |
|
|
priceToUse = product.price * (1 - product.discount / 100); |
|
|
} |
|
|
if (product.min_wholesale && quantity >= product.min_wholesale) { |
|
|
priceToUse = product.wholesale_price; |
|
|
} |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += quantity; |
|
|
existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price); |
|
|
} else { |
|
|
cart.push({ |
|
|
id: cartItemId, |
|
|
name: product.name, |
|
|
price: priceToUse, |
|
|
retail_price: product.price, |
|
|
wholesale_price: product.wholesale_price, |
|
|
min_wholesale: product.min_wholesale, |
|
|
discount: product.discount, |
|
|
photo: product.photos && product.photos.length > 0 ? product.photos[0] : '', |
|
|
quantity: quantity, |
|
|
color: color |
|
|
}); |
|
|
} |
|
|
|
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
closeModal('quantityModal'); |
|
|
updateCartButton(); |
|
|
} |
|
|
|
|
|
function updateCartButton() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none'; |
|
|
} |
|
|
|
|
|
function openCartModal() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
const cartContent = document.getElementById('cartContent'); |
|
|
let total = 0; |
|
|
|
|
|
cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
return ` |
|
|
<div class="cart-item"> |
|
|
<div style="display: flex; align-items: center;"> |
|
|
${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''} |
|
|
<div> |
|
|
<strong>${item.name}</strong> |
|
|
<p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p> |
|
|
<p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : (item.discount ? 'Скидка ' + item.discount + '%' : 'Розничная цена')}</p> |
|
|
</div> |
|
|
</div> |
|
|
<span>${itemTotal} с</span> |
|
|
</div> |
|
|
`; |
|
|
}).join(''); |
|
|
|
|
|
document.getElementById('cartTotal').textContent = total; |
|
|
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"; |
|
|
cart.forEach((item, index) => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`; |
|
|
}); |
|
|
orderText += `Итого: ${total} с`; |
|
|
window.open(`https://api.whatsapp.com/send?phone=996555751475&text=${orderText}`, '_blank'); |
|
|
} |
|
|
|
|
|
function clearCart() { |
|
|
localStorage.removeItem('cart'); |
|
|
closeModal('cartModal'); |
|
|
updateCartButton(); |
|
|
} |
|
|
|
|
|
function toggleFavorite(index) { |
|
|
let favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); |
|
|
const productId = index.toString(); |
|
|
const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`); |
|
|
if (favorites.includes(productId)) { |
|
|
favorites = favorites.filter(id => id !== productId); |
|
|
favoriteButton.classList.remove('favorited'); |
|
|
} else { |
|
|
favorites.push(productId); |
|
|
favoriteButton.classList.add('favorited'); |
|
|
} |
|
|
localStorage.setItem('favorites', JSON.stringify(favorites)); |
|
|
} |
|
|
|
|
|
function loadFavorites() { |
|
|
const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); |
|
|
document.querySelectorAll('.favorite-button').forEach(button => { |
|
|
const index = button.getAttribute('onclick').match(/\d+/)[0]; |
|
|
if (favorites.includes(index)) { |
|
|
button.classList.add('favorited'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
// Removed openAddressModal function |
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target.className === 'modal') event.target.style.display = "none"; |
|
|
} |
|
|
|
|
|
document.getElementById('search-input').addEventListener('input', filterProducts); |
|
|
// Removed category filter event listeners |
|
|
|
|
|
function filterProducts() { |
|
|
const searchTerm = document.getElementById('search-input').value.toLowerCase(); |
|
|
// Removed activeCategory check |
|
|
document.querySelectorAll('.product').forEach(product => { |
|
|
const name = product.getAttribute('data-name'); |
|
|
const description = product.getAttribute('data-description'); |
|
|
// const category = product.getAttribute('data-category'); // Kept for potential use |
|
|
const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm); |
|
|
// Removed category matching |
|
|
product.style.display = matchesSearch ? 'block' : 'none'; //Simplified condition |
|
|
}); |
|
|
} |
|
|
|
|
|
updateCartButton(); |
|
|
loadFavorites(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
''' |
|
|
return render_template_string(catalog_html, products=products, repo_id=REPO_ID) |
|
|
|
|
|
@app.route('/categories') |
|
|
def categories_page(): |
|
|
data = load_data() |
|
|
categories = data['categories'] |
|
|
|
|
|
categories_html = ''' |
|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Категории</title> |
|
|
<link rel="stylesheet" href="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"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa, #e4e7eb); |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
transition: background 0.3s, color 0.3s; |
|
|
padding-bottom: 60px; |
|
|
} |
|
|
body.dark-mode { |
|
|
background: linear-gradient(135deg, #1a1a2e, #2a2a3e); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
.header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.header h1 { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
letter-spacing: 1px; |
|
|
background: linear-gradient(90deg, #526df2, #7a8ff5); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
.theme-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.theme-toggle:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
body.dark-mode .theme-toggle { |
|
|
color: #bbb; |
|
|
} |
|
|
.categories-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
padding: 10px; |
|
|
} |
|
|
.category-item { |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border: 1px solid rgba(0, 0, 0, 0.05); |
|
|
border-radius: 15px; |
|
|
padding: 20px; |
|
|
text-align: center; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease; |
|
|
text-decoration: none; |
|
|
color: #333; |
|
|
} |
|
|
body.dark-mode .category-item { |
|
|
background: rgba(42, 42, 62, 0.8); |
|
|
border-color: rgba(255, 255, 255, 0.05); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
.category-item:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
} |
|
|
body.dark-mode .category-item:hover { |
|
|
background: rgba(42, 42, 62, 0.9); |
|
|
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.category-item h2 { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
.navbar { |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
background-color: #fff; |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
padding: 10px 0; |
|
|
z-index: 1000; |
|
|
} |
|
|
body.dark-mode .navbar { |
|
|
background-color: #2a2a3e; |
|
|
} |
|
|
.navbar a { |
|
|
text-align: center; |
|
|
color: #666; |
|
|
text-decoration: none; |
|
|
font-size: 0.9rem; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.navbar a.active { |
|
|
color: #526df2; |
|
|
} |
|
|
.navbar a i { |
|
|
display: block; |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
body.dark-mode .navbar a { |
|
|
color: #bbb; |
|
|
} |
|
|
.navbar a:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>Категории</h1> |
|
|
<button class="theme-toggle" onclick="toggleTheme()"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="categories-grid"> |
|
|
{% for category in categories %} |
|
|
<a href="{{ url_for('category_products', category=category) }}" class="category-item"> |
|
|
<h2>{{ category }}</h2> |
|
|
</a> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="navbar"> |
|
|
<a href="/"> |
|
|
<i class="fas fa-home"></i> |
|
|
Главная |
|
|
</a> |
|
|
<a href="/categories" class="active"> |
|
|
<i class="fas fa-list"></i> |
|
|
Каталог |
|
|
</a> |
|
|
<a href="/favorites"> |
|
|
<i class="fas fa-heart"></i> |
|
|
Избранное |
|
|
</a> |
|
|
<a href="/discounts"> |
|
|
<i class="fas fa-tag"></i> |
|
|
Скидки |
|
|
</a> |
|
|
<a href="https://api.whatsapp.com/send?phone=996555751475"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
WhatsApp |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
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'); |
|
|
document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun'); |
|
|
} |
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target.className === 'modal') event.target.style.display = "none"; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
''' |
|
|
return render_template_string(categories_html, categories=categories) |
|
|
|
|
|
@app.route('/category/<category>') |
|
|
def category_products(category): |
|
|
data = load_data() |
|
|
products = [p for p in data['products'] if p.get('category') == category] |
|
|
|
|
|
|
|
|
category_html = ''' |
|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>{{ category }}</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> |
|
|
/* ... (your existing styles for product display) ... */ |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa, #e4e7eb); |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
transition: background 0.3s, color 0.3s; |
|
|
padding-bottom: 60px; |
|
|
} |
|
|
body.dark-mode { |
|
|
background: linear-gradient(135deg, #1a1a2e, #2a2a3e); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
.header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.header h1 { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
letter-spacing: 1px; |
|
|
background: linear-gradient(90deg, #526df2, #7a8ff5); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
.theme-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.theme-toggle:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
body.dark-mode .theme-toggle { |
|
|
color: #bbb; |
|
|
} |
|
|
.products-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
padding: 10px; |
|
|
} |
|
|
.product { |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border: 1px solid rgba(0, 0, 0, 0.05); |
|
|
border-radius: 15px; |
|
|
padding: 15px; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.product:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
body.dark-mode .product { |
|
|
background: rgba(42, 42, 62, 0.8); |
|
|
border-color: rgba(255, 255, 255, 0.05); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
body.dark-mode .product:hover { |
|
|
background: rgba(42, 42, 62, 0.9); |
|
|
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.product-image { |
|
|
width: 100%; |
|
|
aspect-ratio: 1; |
|
|
background-color: #fff; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
body.dark-mode .product-image { |
|
|
background-color: #333; |
|
|
} |
|
|
.product-image img { |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
object-fit: contain; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.product-image img:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
.product h2 { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 500; |
|
|
margin: 10px 0; |
|
|
text-align: center; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
.product-price { |
|
|
font-size: 1.2rem; |
|
|
color: #e63946; |
|
|
font-weight: 700; |
|
|
text-align: center; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.product-price .wholesale { |
|
|
font-size: 0.9rem; |
|
|
color: #526df2; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-price .discount { |
|
|
font-size: 0.9rem; |
|
|
color: #2ecc71; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-description { |
|
|
font-size: 0.85rem; |
|
|
color: #666; |
|
|
text-align: center; |
|
|
margin-bottom: 15px; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
} |
|
|
body.dark-mode .product-description { |
|
|
color: #bbb; |
|
|
} |
|
|
.product-button { |
|
|
display: block; |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
border: none; |
|
|
border-radius: 25px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
margin: 5px 0; |
|
|
text-align: center; |
|
|
text-decoration: none; |
|
|
} |
|
|
.product-button:hover { |
|
|
background-color: #3e55d1; |
|
|
box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.add-to-cart { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.add-to-cart:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.favorite-button { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.favorite-button.favorited { |
|
|
color: #e63946; |
|
|
} |
|
|
.favorite-button:hover { |
|
|
color: #e63946; |
|
|
} |
|
|
#cart-button { |
|
|
position: fixed; |
|
|
bottom: 80px; |
|
|
right: 20px; |
|
|
background-color: #e63946; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
display: none; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
z-index: 1000; |
|
|
} |
|
|
#cart-button:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
z-index: 1001; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0,0,0,0.5); |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
.modal-content { |
|
|
background: #fff; |
|
|
margin: 5% auto; |
|
|
padding: 20px; |
|
|
border-radius: 15px; |
|
|
width: 90%; |
|
|
max-width: 700px; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2); |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
body.dark-mode .modal-content { |
|
|
background: #2a2a3e; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
@keyframes slideIn { |
|
|
from { transform: translateY(-50px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
.close { |
|
|
float: right; |
|
|
font-size: 1.5rem; |
|
|
color: #666; |
|
|
cursor: pointer; |
|
|
transition: color 0.3s; |
|
|
} |
|
|
.close:hover { |
|
|
color: #333; |
|
|
} |
|
|
body.dark-mode .close { |
|
|
color: #bbb; |
|
|
} |
|
|
body.dark-mode .close:hover { |
|
|
color: #fff; |
|
|
} |
|
|
.cart-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
body.dark-mode .cart-item { |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.cart-item img { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
object-fit: contain; |
|
|
border-radius: 8px; |
|
|
margin-right: 15px; |
|
|
} |
|
|
.quantity-input, .color-select { |
|
|
width: 100%; |
|
|
max-width: 150px; |
|
|
padding: 8px; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.clear-cart { |
|
|
background-color: #e63946; |
|
|
} |
|
|
.clear-cart:hover { |
|
|
background-color: #d62828; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
} |
|
|
.order-button { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.order-button:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.navbar { |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
background-color: #fff; |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
padding: 10px 0; |
|
|
z-index: 1000; |
|
|
} |
|
|
body.dark-mode .navbar { |
|
|
background-color: #2a2a3e; |
|
|
} |
|
|
.navbar a { |
|
|
text-align: center; |
|
|
color: #666; |
|
|
text-decoration: none; |
|
|
font-size: 0.9rem; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.navbar a.active { |
|
|
color: #526df2; |
|
|
} |
|
|
.navbar a i { |
|
|
display: block; |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
body.dark-mode .navbar a { |
|
|
color: #bbb; |
|
|
} |
|
|
.navbar a:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
.wholesale-badge { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
.discount-badge { |
|
|
position: absolute; |
|
|
top: 40px; |
|
|
right: 10px; |
|
|
background-color: #2ecc71; |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>{{ category }}</h1> |
|
|
<button class="theme-toggle" onclick="toggleTheme()"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="products-grid" id="products-grid"> |
|
|
{% for product in products %} |
|
|
<div class="product" |
|
|
onclick="openModal({{ loop.index0 }})" |
|
|
data-name="{{ product['name']|lower }}" |
|
|
data-description="{{ product['description']|lower }}" |
|
|
data-category="{{ product.get('category', 'Без категории') }}"> |
|
|
<button class="favorite-button" onclick="event.stopPropagation(); toggleFavorite({{ loop.index0 }})"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</button> |
|
|
{% if product.get('photos') and product['photos']|length > 0 %} |
|
|
<div class="product-image"> |
|
|
<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" |
|
|
alt="{{ product['name'] }}" |
|
|
loading="lazy"> |
|
|
</div> |
|
|
{% endif %} |
|
|
{% if product.get('wholesale_price') and product.get('min_wholesale') %} |
|
|
<span class="wholesale-badge">Опт от {{ product['min_wholesale'] }}</span> |
|
|
{% endif %} |
|
|
{% if product.get('discount') %} |
|
|
<span class="discount-badge">Скидка {{ product['discount'] }}%</span> |
|
|
{% endif %} |
|
|
<h2>{{ product['name'] }}</h2> |
|
|
<div class="product-price"> |
|
|
{% if product.get('discount') %} |
|
|
<span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span> |
|
|
<span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span> |
|
|
<span class="discount">Скидка: {{ product['discount'] }}%</span> |
|
|
{% else %} |
|
|
<span>{{ product['price'] }} с</span> |
|
|
{% endif %} |
|
|
{% if product.get('wholesale_price') and product.get('min_wholesale') %} |
|
|
<span class="wholesale">Опт: {{ product['wholesale_price'] }} с</span> |
|
|
{% endif %} |
|
|
</div> |
|
|
<p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p> |
|
|
<button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal({{ loop.index0 }})">В корзину</button> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Product Modal --> |
|
|
<div id="productModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close" onclick="closeModal('productModal')">×</span> |
|
|
<div id="modalContent"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Quantity and Color Modal --> |
|
|
<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> |
|
|
<button class="product-button" onclick="confirmAddToCart()">Добавить</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Cart Modal --> |
|
|
<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>Итого: <span id="cartTotal">0</span> с</strong> |
|
|
<button class="product-button clear-cart" onclick="clearCart()">Очистить</button> |
|
|
<button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="cart-button" onclick="openCartModal()">🛒</button> |
|
|
|
|
|
<div class="navbar"> |
|
|
<a href="/"> |
|
|
<i class="fas fa-home"></i> |
|
|
Главная |
|
|
</a> |
|
|
<a href="/categories" class="active"> |
|
|
<i class="fas fa-list"></i> |
|
|
Каталог |
|
|
</a> |
|
|
<a href="/favorites"> |
|
|
<i class="fas fa-heart"></i> |
|
|
Избранное |
|
|
</a> |
|
|
<a href="/discounts"> |
|
|
<i class="fas fa-tag"></i> |
|
|
Скидки |
|
|
</a> |
|
|
|
|
|
<a href="https://api.whatsapp.com/send?phone=996555751475"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
WhatsApp |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script> |
|
|
<script> |
|
|
const products = {{ products|tojson }}; |
|
|
let selectedProductIndex = 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'); |
|
|
document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun'); |
|
|
} |
|
|
|
|
|
function openModal(index) { |
|
|
loadProductDetails(index); |
|
|
document.getElementById('productModal').style.display = "block"; |
|
|
} |
|
|
|
|
|
function closeModal(modalId) { |
|
|
document.getElementById(modalId).style.display = "none"; |
|
|
} |
|
|
|
|
|
function loadProductDetails(index) { |
|
|
fetch('/product/' + index) |
|
|
.then(response => response.text()) |
|
|
.then(data => { |
|
|
document.getElementById('modalContent').innerHTML = data; |
|
|
initializeSwiper(); |
|
|
}) |
|
|
.catch(error => console.error('Ошибка:', error)); |
|
|
} |
|
|
|
|
|
function initializeSwiper() { |
|
|
new Swiper('.swiper-container', { |
|
|
slidesPerView: 1, |
|
|
spaceBetween: 20, |
|
|
loop: true, |
|
|
grabCursor: true, |
|
|
pagination: { el: '.swiper-pagination', clickable: true }, |
|
|
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, |
|
|
zoom: { maxRatio: 3 } |
|
|
}); |
|
|
} |
|
|
|
|
|
function openQuantityModal(index) { |
|
|
selectedProductIndex = index; |
|
|
const product = products[index]; |
|
|
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); |
|
|
} |
|
|
document.getElementById('quantityModal').style.display = 'block'; |
|
|
document.getElementById('quantityInput').value = 1; |
|
|
} |
|
|
|
|
|
function confirmAddToCart() { |
|
|
if (selectedProductIndex === null) return; |
|
|
const quantity = parseInt(document.getElementById('quantityInput').value) || 1; |
|
|
const color = document.getElementById('colorSelect').value; |
|
|
if (quantity <= 0) { |
|
|
alert("Укажите количество больше 0"); |
|
|
return; |
|
|
} |
|
|
let cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
const product = products[selectedProductIndex]; |
|
|
const cartItemId = `${product.name}-${color}`; |
|
|
const existingItem = cart.find(item => item.id === cartItemId); |
|
|
|
|
|
let priceToUse = product.price; |
|
|
if (product.discount) { |
|
|
priceToUse = product.price * (1 - product.discount / 100); |
|
|
} |
|
|
if (product.min_wholesale && quantity >= product.min_wholesale) { |
|
|
priceToUse = product.wholesale_price; |
|
|
} |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += quantity; |
|
|
existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price); |
|
|
} else { |
|
|
cart.push({ |
|
|
id: cartItemId, |
|
|
name: product.name, |
|
|
price: priceToUse, |
|
|
retail_price: product.price, |
|
|
wholesale_price: product.wholesale_price, |
|
|
min_wholesale: product.min_wholesale, |
|
|
discount: product.discount, |
|
|
photo: product.photos && product.photos.length > 0 ? product.photos[0] : '', |
|
|
quantity: quantity, |
|
|
color: color |
|
|
}); |
|
|
} |
|
|
|
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
closeModal('quantityModal'); |
|
|
updateCartButton(); |
|
|
} |
|
|
|
|
|
function updateCartButton() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none'; |
|
|
} |
|
|
|
|
|
function openCartModal() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
const cartContent = document.getElementById('cartContent'); |
|
|
let total = 0; |
|
|
|
|
|
cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
return ` |
|
|
<div class="cart-item"> |
|
|
<div style="display: flex; align-items: center;"> |
|
|
${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''} |
|
|
<div> |
|
|
<strong>${item.name}</strong> |
|
|
<p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p> |
|
|
<p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : (item.discount ? 'Скидка ' + item.discount + '%' : 'Розничная цена')}</p> |
|
|
</div> |
|
|
</div> |
|
|
<span>${itemTotal} с</span> |
|
|
</div> |
|
|
`; |
|
|
}).join(''); |
|
|
|
|
|
document.getElementById('cartTotal').textContent = total; |
|
|
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"; |
|
|
cart.forEach((item, index) => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`; |
|
|
}); |
|
|
orderText += `Итого: ${total} с`; |
|
|
window.open(`https://api.whatsapp.com/send?phone=996555751475&text=${orderText}`, '_blank'); |
|
|
} |
|
|
|
|
|
function clearCart() { |
|
|
localStorage.removeItem('cart'); |
|
|
closeModal('cartModal'); |
|
|
updateCartButton(); |
|
|
} |
|
|
|
|
|
function toggleFavorite(index) { |
|
|
let favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); |
|
|
const productId = index.toString(); |
|
|
const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`); |
|
|
if (favorites.includes(productId)) { |
|
|
favorites = favorites.filter(id => id !== productId); |
|
|
favoriteButton.classList.remove('favorited'); |
|
|
} else { |
|
|
favorites.push(productId); |
|
|
favoriteButton.classList.add('favorited'); |
|
|
} |
|
|
localStorage.setItem('favorites', JSON.stringify(favorites)); |
|
|
} |
|
|
|
|
|
function loadFavorites() { |
|
|
const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); |
|
|
document.querySelectorAll('.favorite-button').forEach(button => { |
|
|
const index = button.getAttribute('onclick').match(/\d+/)[0]; |
|
|
if (favorites.includes(index)) { |
|
|
button.classList.add('favorited'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target.className === 'modal') event.target.style.display = "none"; |
|
|
} |
|
|
|
|
|
updateCartButton(); |
|
|
loadFavorites(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
''' |
|
|
return render_template_string(category_html, products=products, category=category, repo_id=REPO_ID) |
|
|
|
|
|
|
|
|
@app.route('/favorites') |
|
|
def favorites_page(): |
|
|
data = load_data() |
|
|
products = data['products'] |
|
|
favorites = request.args.get('favorites', '[]') |
|
|
|
|
|
favorites_html = ''' |
|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Избранное</title> |
|
|
<link rel="stylesheet" href="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> |
|
|
/* ... (your existing styles for product display) ... */ |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa, #e4e7eb); |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
transition: background 0.3s, color 0.3s; |
|
|
padding-bottom: 60px; |
|
|
} |
|
|
body.dark-mode { |
|
|
background: linear-gradient(135deg, #1a1a2e, #2a2a3e); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
.header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.header h1 { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
letter-spacing: 1px; |
|
|
background: linear-gradient(90deg, #526df2, #7a8ff5); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
.theme-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.theme-toggle:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
body.dark-mode .theme-toggle { |
|
|
color: #bbb; |
|
|
} |
|
|
.products-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
padding: 10px; |
|
|
} |
|
|
.product { |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border: 1px solid rgba(0, 0, 0, 0.05); |
|
|
border-radius: 15px; |
|
|
padding: 15px; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.product:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
body.dark-mode .product { |
|
|
background: rgba(42, 42, 62, 0.8); |
|
|
border-color: rgba(255, 255, 255, 0.05); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
body.dark-mode .product:hover { |
|
|
background: rgba(42, 42, 62, 0.9); |
|
|
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.product-image { |
|
|
width: 100%; |
|
|
aspect-ratio: 1; |
|
|
background-color: #fff; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
body.dark-mode .product-image { |
|
|
background-color: #333; |
|
|
} |
|
|
.product-image img { |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
object-fit: contain; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.product-image img:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
.product h2 { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 500; |
|
|
margin: 10px 0; |
|
|
text-align: center; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
.product-price { |
|
|
font-size: 1.2rem; |
|
|
color: #e63946; |
|
|
font-weight: 700; |
|
|
text-align: center; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.product-price .wholesale { |
|
|
font-size: 0.9rem; |
|
|
color: #526df2; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-price .discount { |
|
|
font-size: 0.9rem; |
|
|
color: #2ecc71; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-description { |
|
|
font-size: 0.85rem; |
|
|
color: #666; |
|
|
text-align: center; |
|
|
margin-bottom: 15px; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
} |
|
|
body.dark-mode .product-description { |
|
|
color: #bbb; |
|
|
} |
|
|
.product-button { |
|
|
display: block; |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
border: none; |
|
|
border-radius: 25px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
margin: 5px 0; |
|
|
text-align: center; |
|
|
text-decoration: none; |
|
|
} |
|
|
.product-button:hover { |
|
|
background-color: #3e55d1; |
|
|
box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.add-to-cart { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.add-to-cart:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.favorite-button { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.favorite-button.favorited { |
|
|
color: #e63946; |
|
|
} |
|
|
.favorite-button:hover { |
|
|
color: #e63946; |
|
|
} |
|
|
#cart-button { |
|
|
position: fixed; |
|
|
bottom: 80px; |
|
|
right: 20px; |
|
|
background-color: #e63946; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
display: none; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
z-index: 1000; |
|
|
} |
|
|
#cart-button:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
z-index: 1001; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0,0,0,0.5); |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
.modal-content { |
|
|
background: #fff; |
|
|
margin: 5% auto; |
|
|
padding: 20px; |
|
|
border-radius: 15px; |
|
|
width: 90%; |
|
|
max-width: 700px; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2); |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
body.dark-mode .modal-content { |
|
|
background: #2a2a3e; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
@keyframes slideIn { |
|
|
from { transform: translateY(-50px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
.close { |
|
|
float: right; |
|
|
font-size: 1.5rem; |
|
|
color: #666; |
|
|
cursor: pointer; |
|
|
transition: color 0.3s; |
|
|
} |
|
|
.close:hover { |
|
|
color: #333; |
|
|
} |
|
|
body.dark-mode .close { |
|
|
color: #bbb; |
|
|
} |
|
|
body.dark-mode .close:hover { |
|
|
color: #fff; |
|
|
} |
|
|
.cart-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
body.dark-mode .cart-item { |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.cart-item img { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
object-fit: contain; |
|
|
border-radius: 8px; |
|
|
margin-right: 15px; |
|
|
} |
|
|
.quantity-input, .color-select { |
|
|
width: 100%; |
|
|
max-width: 150px; |
|
|
padding: 8px; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.clear-cart { |
|
|
background-color: #e63946; |
|
|
} |
|
|
.clear-cart:hover { |
|
|
background-color: #d62828; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
} |
|
|
.order-button { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.order-button:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.navbar { |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
background-color: #fff; |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
padding: 10px 0; |
|
|
z-index: 1000; |
|
|
} |
|
|
body.dark-mode .navbar { |
|
|
background-color: #2a2a3e; |
|
|
} |
|
|
.navbar a { |
|
|
text-align: center; |
|
|
color: #666; |
|
|
text-decoration: none; |
|
|
font-size: 0.9rem; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.navbar a.active { |
|
|
color: #526df2; |
|
|
} |
|
|
.navbar a i { |
|
|
display: block; |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
body.dark-mode .navbar a { |
|
|
color: #bbb; |
|
|
} |
|
|
.navbar a:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
.wholesale-badge { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
.discount-badge { |
|
|
position: absolute; |
|
|
top: 40px; |
|
|
right: 10px; |
|
|
background-color: #2ecc71; |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>Избранное</h1> |
|
|
<button class="theme-toggle" onclick="toggleTheme()"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="products-grid" id="products-grid"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Product Modal --> |
|
|
<div id="productModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close" onclick="closeModal('productModal')">×</span> |
|
|
<div id="modalContent"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Quantity and Color Modal --> |
|
|
<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> |
|
|
<button class="product-button" onclick="confirmAddToCart()">Добавить</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Cart Modal --> |
|
|
<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>Итого: <span id="cartTotal">0</span> с</strong> |
|
|
<button class="product-button clear-cart" onclick="clearCart()">Очистить</button> |
|
|
<button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="cart-button" onclick="openCartModal()">🛒</button> |
|
|
|
|
|
<div class="navbar"> |
|
|
<a href="/"> |
|
|
<i class="fas fa-home"></i> |
|
|
Главная |
|
|
</a> |
|
|
<a href="/categories"> |
|
|
<i class="fas fa-list"></i> |
|
|
Каталог |
|
|
</a> |
|
|
<a href="/favorites" class="active"> |
|
|
<i class="fas fa-heart"></i> |
|
|
Избранное |
|
|
</a> |
|
|
<a href="/discounts"> |
|
|
<i class="fas fa-tag"></i> |
|
|
Скидки |
|
|
</a> |
|
|
<a href="https://api.whatsapp.com/send?phone=996555751475"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
WhatsApp |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script> |
|
|
<script> |
|
|
const products = {{ products|tojson }}; |
|
|
let selectedProductIndex = 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'); |
|
|
document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun'); |
|
|
} |
|
|
|
|
|
function loadFavoritesPage() { |
|
|
const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); |
|
|
const productsGrid = document.getElementById('products-grid'); |
|
|
productsGrid.innerHTML = ''; |
|
|
|
|
|
if (favorites.length === 0) { |
|
|
productsGrid.innerHTML = '<p>Избранное пусто</p>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
favorites.forEach(index => { |
|
|
const product = products[index]; |
|
|
if (!product) return; //Important check in case product was deleted |
|
|
const productElement = document.createElement('div'); |
|
|
productElement.className = 'product'; |
|
|
productElement.setAttribute('onclick', `openModal(${index})`); |
|
|
productElement.setAttribute('data-name', product.name.toLowerCase()); |
|
|
productElement.setAttribute('data-description', product.description.toLowerCase()); |
|
|
productElement.setAttribute('data-category', product.category || 'Без категории'); |
|
|
productElement.innerHTML = ` |
|
|
<button class="favorite-button favorited" onclick="event.stopPropagation(); toggleFavorite(${index})"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</button> |
|
|
${product.photos && product.photos.length > 0 ? ` |
|
|
<div class="product-image"> |
|
|
<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${product.photos[0]}" alt="${product.name}" loading="lazy"> |
|
|
</div>` : ''} |
|
|
${product.wholesale_price && product.min_wholesale ? `<span class="wholesale-badge">Опт от ${product.min_wholesale}</span>` : ''} |
|
|
${product.discount ? `<span class="discount-badge">Скидка ${product.discount}%</span>` : ''} |
|
|
<h2>${product.name}</h2> |
|
|
<div class="product-price"> |
|
|
${product.discount ? ` |
|
|
<span style="text-decoration: line-through; color: #666;">${product.price} с</span> |
|
|
<span>${(product.price * (1 - product.discount / 100)).toFixed(2)} с</span> |
|
|
<span class="discount">Скидка: ${product.discount}%</span>` : `<span>${product.price} с</span>`} |
|
|
${product.wholesale_price && product.min_wholesale ? `<span class="wholesale">Опт: ${product.wholesale_price} с</span>` : ''} |
|
|
</div> |
|
|
<p class="product-description">${product.description.slice(0, 50)}${product.description.length > 50 ? '...' : ''}</p> |
|
|
<button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal(${index})">В корзину</button> |
|
|
`; |
|
|
productsGrid.appendChild(productElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
function openModal(index) { |
|
|
loadProductDetails(index); |
|
|
document.getElementById('productModal').style.display = "block"; |
|
|
} |
|
|
|
|
|
function closeModal(modalId) { |
|
|
document.getElementById(modalId).style.display = "none"; |
|
|
} |
|
|
|
|
|
function loadProductDetails(index) { |
|
|
fetch('/product/' + index) |
|
|
.then(response => response.text()) |
|
|
.then(data => { |
|
|
document.getElementById('modalContent').innerHTML = data; |
|
|
initializeSwiper(); |
|
|
}) |
|
|
.catch(error => console.error('Ошибка:', error)); |
|
|
} |
|
|
|
|
|
function initializeSwiper() { |
|
|
new Swiper('.swiper-container', { |
|
|
slidesPerView: 1, |
|
|
spaceBetween: 20, |
|
|
loop: true, |
|
|
grabCursor: true, |
|
|
pagination: { el: '.swiper-pagination', clickable: true }, |
|
|
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, |
|
|
zoom: { maxRatio: 3 } |
|
|
}); |
|
|
} |
|
|
|
|
|
function openQuantityModal(index) { |
|
|
selectedProductIndex = index; |
|
|
const product = products[index]; |
|
|
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); |
|
|
} |
|
|
document.getElementById('quantityModal').style.display = 'block'; |
|
|
document.getElementById('quantityInput').value = 1; |
|
|
} |
|
|
|
|
|
function confirmAddToCart() { |
|
|
if (selectedProductIndex === null) return; |
|
|
const quantity = parseInt(document.getElementById('quantityInput').value) || 1; |
|
|
const color = document.getElementById('colorSelect').value; |
|
|
if (quantity <= 0) { |
|
|
alert("Укажите количество больше 0"); |
|
|
return; |
|
|
} |
|
|
let cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
const product = products[selectedProductIndex]; |
|
|
const cartItemId = `${product.name}-${color}`; |
|
|
const existingItem = cart.find(item => item.id === cartItemId); |
|
|
|
|
|
let priceToUse = product.price; |
|
|
if (product.discount) { |
|
|
priceToUse = product.price * (1 - product.discount / 100); |
|
|
} |
|
|
if (product.min_wholesale && quantity >= product.min_wholesale) { |
|
|
priceToUse = product.wholesale_price; |
|
|
} |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += quantity; |
|
|
existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price); |
|
|
} else { |
|
|
cart.push({ |
|
|
id: cartItemId, |
|
|
name: product.name, |
|
|
price: priceToUse, |
|
|
retail_price: product.price, |
|
|
wholesale_price: product.wholesale_price, |
|
|
min_wholesale: product.min_wholesale, |
|
|
discount: product.discount, |
|
|
photo: product.photos && product.photos.length > 0 ? product.photos[0] : '', |
|
|
quantity: quantity, |
|
|
color: color |
|
|
}); |
|
|
} |
|
|
|
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
closeModal('quantityModal'); |
|
|
updateCartButton(); |
|
|
} |
|
|
|
|
|
function updateCartButton() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none'; |
|
|
} |
|
|
|
|
|
function openCartModal() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
const cartContent = document.getElementById('cartContent'); |
|
|
let total = 0; |
|
|
|
|
|
cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
return ` |
|
|
<div class="cart-item"> |
|
|
<div style="display: flex; align-items: center;"> |
|
|
${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''} |
|
|
<div> |
|
|
<strong>${item.name}</strong> |
|
|
<p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p> |
|
|
<p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : (item.discount ? 'Скидка ' + item.discount + '%' : 'Розничная цена')}</p> |
|
|
</div> |
|
|
</div> |
|
|
<span>${itemTotal} с</span> |
|
|
</div> |
|
|
`; |
|
|
}).join(''); |
|
|
|
|
|
document.getElementById('cartTotal').textContent = total; |
|
|
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"; |
|
|
cart.forEach((item, index) => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`; |
|
|
}); |
|
|
orderText += `Итого: ${total} с`; |
|
|
window.open(`https://api.whatsapp.com/send?phone=996555751475&text=${orderText}`, '_blank'); |
|
|
} |
|
|
|
|
|
function clearCart() { |
|
|
localStorage.removeItem('cart'); |
|
|
closeModal('cartModal'); |
|
|
updateCartButton(); |
|
|
} |
|
|
|
|
|
function toggleFavorite(index) { |
|
|
let favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); |
|
|
const productId = index.toString(); |
|
|
const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`); |
|
|
if (favorites.includes(productId)) { |
|
|
favorites = favorites.filter(id => id !== productId); |
|
|
favoriteButton.classList.remove('favorited'); |
|
|
} else { |
|
|
favorites.push(productId); |
|
|
favoriteButton.classList.add('favorited'); |
|
|
} |
|
|
localStorage.setItem('favorites', JSON.stringify(favorites)); |
|
|
loadFavoritesPage(); // Reload the favorites page after toggling |
|
|
} |
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target.className === 'modal') event.target.style.display = "none"; |
|
|
} |
|
|
|
|
|
updateCartButton(); |
|
|
loadFavoritesPage(); // Load favorites on initial page load |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
''' |
|
|
return render_template_string(favorites_html, products=products, repo_id=REPO_ID) |
|
|
|
|
|
|
|
|
|
|
|
@app.route('/discounts') |
|
|
def discounts_page(): |
|
|
data = load_data() |
|
|
products = [p for p in data['products'] if p.get('discount')] |
|
|
|
|
|
|
|
|
discounts_html = ''' |
|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Скидки</title> |
|
|
<link rel="stylesheet" href="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> |
|
|
/* ... (your existing styles for product display) ... */ |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa, #e4e7eb); |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
transition: background 0.3s, color 0.3s; |
|
|
padding-bottom: 60px; |
|
|
} |
|
|
body.dark-mode { |
|
|
background: linear-gradient(135deg, #1a1a2e, #2a2a3e); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
.header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.header h1 { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
letter-spacing: 1px; |
|
|
background: linear-gradient(90deg, #526df2, #7a8ff5); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
.theme-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.theme-toggle:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
body.dark-mode .theme-toggle { |
|
|
color: #bbb; |
|
|
} |
|
|
.products-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
padding: 10px; |
|
|
} |
|
|
.product { |
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
border: 1px solid rgba(0, 0, 0, 0.05); |
|
|
border-radius: 15px; |
|
|
padding: 15px; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.product:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
body.dark-mode .product { |
|
|
background: rgba(42, 42, 62, 0.8); |
|
|
border-color: rgba(255, 255, 255, 0.05); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
body.dark-mode .product:hover { |
|
|
background: rgba(42, 42, 62, 0.9); |
|
|
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.product-image { |
|
|
width: 100%; |
|
|
aspect-ratio: 1; |
|
|
background-color: #fff; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
body.dark-mode .product-image { |
|
|
background-color: #333; |
|
|
} |
|
|
.product-image img { |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
object-fit: contain; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.product-image img:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
.product h2 { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 500; |
|
|
margin: 10px 0; |
|
|
text-align: center; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
.product-price { |
|
|
font-size: 1.2rem; |
|
|
color: #e63946; |
|
|
font-weight: 700; |
|
|
text-align: center; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.product-price .wholesale { |
|
|
font-size: 0.9rem; |
|
|
color: #526df2; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-price .discount { |
|
|
font-size: 0.9rem; |
|
|
color: #2ecc71; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-description { |
|
|
font-size: 0.85rem; |
|
|
color: #666; |
|
|
text-align: center; |
|
|
margin-bottom: 15px; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
white-space: nowrap; |
|
|
} |
|
|
body.dark-mode .product-description { |
|
|
color: #bbb; |
|
|
} |
|
|
.product-button { |
|
|
display: block; |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
border: none; |
|
|
border-radius: 25px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
margin: 5px 0; |
|
|
text-align: center; |
|
|
text-decoration: none; |
|
|
} |
|
|
.product-button:hover { |
|
|
background-color: #3e55d1; |
|
|
box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.add-to-cart { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.add-to-cart:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.favorite-button { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
left: 10px; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: #666; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.favorite-button.favorited { |
|
|
color: #e63946; |
|
|
} |
|
|
.favorite-button:hover { |
|
|
color: #e63946; |
|
|
} |
|
|
#cart-button { |
|
|
position: fixed; |
|
|
bottom: 80px; |
|
|
right: 20px; |
|
|
background-color: #e63946; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
display: none; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
z-index: 1000; |
|
|
} |
|
|
#cart-button:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
z-index: 1001; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0,0,0,0.5); |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
.modal-content { |
|
|
background: #fff; |
|
|
margin: 5% auto; |
|
|
padding: 20px; |
|
|
border-radius: 15px; |
|
|
width: 90%; |
|
|
max-width: 700px; |
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2); |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
body.dark-mode .modal-content { |
|
|
background: #2a2a3e; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
@keyframes slideIn { |
|
|
from { transform: translateY(-50px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
.close { |
|
|
float: right; |
|
|
font-size: 1.5rem; |
|
|
color: #666; |
|
|
cursor: pointer; |
|
|
transition: color 0.3s; |
|
|
} |
|
|
.close:hover { |
|
|
color: #333; |
|
|
} |
|
|
body.dark-mode .close { |
|
|
color: #bbb; |
|
|
} |
|
|
body.dark-mode .close:hover { |
|
|
color: #fff; |
|
|
} |
|
|
.cart-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 15px 0; |
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
body.dark-mode .cart-item { |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.cart-item img { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
object-fit: contain; |
|
|
border-radius: 8px; |
|
|
margin-right: 15px; |
|
|
} |
|
|
.quantity-input, .color-select { |
|
|
width: 100%; |
|
|
max-width: 150px; |
|
|
padding: 8px; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.clear-cart { |
|
|
background-color: #e63946; |
|
|
} |
|
|
.clear-cart:hover { |
|
|
background-color: #d62828; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
} |
|
|
.order-button { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.order-button:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.navbar { |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
background-color: #fff; |
|
|
box-shadow: 0 -2px 10px rgba(0,0,0,0.1); |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
padding: 10px 0; |
|
|
z-index: 1000; |
|
|
} |
|
|
body.dark-mode .navbar { |
|
|
background-color: #2a2a3e; |
|
|
} |
|
|
.navbar a { |
|
|
text-align: center; |
|
|
color: #666; |
|
|
text-decoration: none; |
|
|
font-size: 0.9rem; |
|
|
transition: color 0.3s ease; |
|
|
} |
|
|
.navbar a.active { |
|
|
color: #526df2; |
|
|
} |
|
|
.navbar a i { |
|
|
display: block; |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
body.dark-mode .navbar a { |
|
|
color: #bbb; |
|
|
} |
|
|
.navbar a:hover { |
|
|
color: #526df2; |
|
|
} |
|
|
.wholesale-badge { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
.discount-badge { |
|
|
position: absolute; |
|
|
top: 40px; |
|
|
right: 10px; |
|
|
background-color: #2ecc71; |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>Скидки</h1> |
|
|
<button class="theme-toggle" onclick="toggleTheme()"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="products-grid" id="products-grid"> |
|
|
{% for product in products %} |
|
|
<div class="product" |
|
|
onclick="openModal({{ loop.index0 }})" |
|
|
data-name="{{ product['name']|lower }}" |
|
|
data-description="{{ product['description']|lower }}" |
|
|
data-category="{{ product.get('category', 'Без категории') }}"> |
|
|
<button class="favorite-button" onclick="event.stopPropagation(); toggleFavorite({{ loop.index0 }})"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</button> |
|
|
{% if product.get('photos') and product['photos']|length > 0 %} |
|
|
<div class="product-image"> |
|
|
<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" |
|
|
alt="{{ product['name'] }}" |
|
|
loading="lazy"> |
|
|
</div> |
|
|
{% endif %} |
|
|
{% if product.get('wholesale_price') and product.get('min_wholesale') %} |
|
|
<span class="wholesale-badge">Опт от {{ product['min_wholesale'] }}</span> |
|
|
{% endif %} |
|
|
{% if product.get('discount') %} |
|
|
<span class="discount-badge">Скидка {{ product['discount'] }}%</span> |
|
|
{% endif %} |
|
|
<h2>{{ product['name'] }}</h2> |
|
|
<div class="product-price"> |
|
|
{% if product.get('discount') %} |
|
|
<span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span> |
|
|
<span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span> |
|
|
<span class="discount">Скидка: {{ product['discount'] }}%</span> |
|
|
{% else %} |
|
|
<span>{{ product['price'] }} с</span> |
|
|
{% endif %} |
|
|
{% if product.get('wholesale_price') and product.get('min_wholesale') %} |
|
|
<span class="wholesale">Опт: {{ product['wholesale_price'] }} с</span> |
|
|
{% endif %} |
|
|
</div> |
|
|
<p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p> |
|
|
<button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal({{ loop.index0 }})">В корзину</button> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Product Modal --> |
|
|
<div id="productModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<span class="close" onclick="closeModal('productModal')">×</span> |
|
|
<div id="modalContent"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Quantity and Color Modal --> |
|
|
<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> |
|
|
<button class="product-button" onclick="confirmAddToCart()">Добавить</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Cart Modal --> |
|
|
<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>Итого: <span id="cartTotal">0</span> с</strong> |
|
|
<button class="product-button clear-cart" onclick="clearCart()">Очистить</button> |
|
|
<button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="cart-button" onclick="openCartModal()">🛒</button> |
|
|
|
|
|
<div class="navbar"> |
|
|
<a href="/"> |
|
|
<i class="fas fa-home"></i> |
|
|
Главная |
|
|
</a> |
|
|
<a href="/categories"> |
|
|
<i class="fas fa-list"></i> |
|
|
Каталог |
|
|
</a> |
|
|
<a href="/favorites"> |
|
|
<i class="fas fa-heart"></i> |
|
|
Избранное |
|
|
</a> |
|
|
<a href="/discounts" class="active"> |
|
|
<i class="fas fa-tag"></i> |
|
|
Скидки |
|
|
</a> |
|
|
<a href="https://api.whatsapp.com/send?phone=996555751475"> |
|
|
<i class="fab fa-whatsapp"></i> |
|
|
WhatsApp |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script> |
|
|
<script> |
|
|
const products = {{ products|tojson }}; |
|
|
let selectedProductIndex = 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'); |
|
|
document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun'); |
|
|
} |
|
|
|
|
|
function openModal(index) { |
|
|
loadProductDetails(index); |
|
|
document.getElementById('productModal').style.display = "block"; |
|
|
} |
|
|
|
|
|
function closeModal(modalId) { |
|
|
document.getElementById(modalId).style.display = "none"; |
|
|
} |
|
|
|
|
|
function loadProductDetails(index) { |
|
|
fetch('/product/' + index) |
|
|
.then(response => response.text()) |
|
|
.then(data => { |
|
|
document.getElementById('modalContent').innerHTML = data; |
|
|
initializeSwiper(); |
|
|
}) |
|
|
.catch(error => console.error('Ошибка:', error)); |
|
|
} |
|
|
|
|
|
function initializeSwiper() { |
|
|
new Swiper('.swiper-container', { |
|
|
slidesPerView: 1, |
|
|
spaceBetween: 20, |
|
|
loop: true, |
|
|
grabCursor: true, |
|
|
pagination: { el: '.swiper-pagination', clickable: true }, |
|
|
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, |
|
|
zoom: { maxRatio: 3 } |
|
|
}); |
|
|
} |
|
|
|
|
|
function openQuantityModal(index) { |
|
|
selectedProductIndex = index; |
|
|
const product = products[index]; |
|
|
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); |
|
|
} |
|
|
document.getElementById('quantityModal').style.display = 'block'; |
|
|
document.getElementById('quantityInput').value = 1; |
|
|
} |
|
|
|
|
|
function confirmAddToCart() { |
|
|
if (selectedProductIndex === null) return; |
|
|
const quantity = parseInt(document.getElementById('quantityInput').value) || 1; |
|
|
const color = document.getElementById('colorSelect').value; |
|
|
if (quantity <= 0) { |
|
|
alert("Укажите количество больше 0"); |
|
|
return; |
|
|
} |
|
|
let cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
const product = products[selectedProductIndex]; |
|
|
const cartItemId = `${product.name}-${color}`; |
|
|
const existingItem = cart.find(item => item.id === cartItemId); |
|
|
|
|
|
let priceToUse = product.price; |
|
|
if (product.discount) { |
|
|
priceToUse = product.price * (1 - product.discount / 100); |
|
|
} |
|
|
if (product.min_wholesale && quantity >= product.min_wholesale) { |
|
|
priceToUse = product.wholesale_price; |
|
|
} |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += quantity; |
|
|
existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price); |
|
|
} else { |
|
|
cart.push({ |
|
|
id: cartItemId, |
|
|
name: product.name, |
|
|
price: priceToUse, |
|
|
retail_price: product.price, |
|
|
wholesale_price: product.wholesale_price, |
|
|
min_wholesale: product.min_wholesale, |
|
|
discount: product.discount, |
|
|
photo: product.photos && product.photos.length > 0 ? product.photos[0] : '', |
|
|
quantity: quantity, |
|
|
color: color |
|
|
}); |
|
|
} |
|
|
|
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
closeModal('quantityModal'); |
|
|
updateCartButton(); |
|
|
} |
|
|
|
|
|
function updateCartButton() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none'; |
|
|
} |
|
|
|
|
|
function openCartModal() { |
|
|
const cart = JSON.parse(localStorage.getItem('cart') || '[]'); |
|
|
const cartContent = document.getElementById('cartContent'); |
|
|
let total = 0; |
|
|
|
|
|
cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
return ` |
|
|
<div class="cart-item"> |
|
|
<div style="display: flex; align-items: center;"> |
|
|
${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''} |
|
|
<div> |
|
|
<strong>${item.name}</strong> |
|
|
<p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p> |
|
|
<p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : (item.discount ? 'Скидка ' + item.discount + '%' : 'Розничная цена')}</p> |
|
|
</div> |
|
|
</div> |
|
|
<span>${itemTotal} с</span> |
|
|
</div> |
|
|
`; |
|
|
}).join(''); |
|
|
|
|
|
document.getElementById('cartTotal').textContent = total; |
|
|
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"; |
|
|
cart.forEach((item, index) => { |
|
|
const itemTotal = item.price * item.quantity; |
|
|
total += itemTotal; |
|
|
orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`; |
|
|
}); |
|
|
orderText += `Итого: ${total} с`; |
|
|
window.open(`https://api.whatsapp.com/send?phone=996555751475&text=${orderText}`, '_blank'); |
|
|
} |
|
|
|
|
|
function clearCart() { |
|
|
localStorage.removeItem('cart'); |
|
|
closeModal('cartModal'); |
|
|
updateCartButton(); |
|
|
} |
|
|
|
|
|
function toggleFavorite(index) { |
|
|
let favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); |
|
|
const productId = index.toString(); |
|
|
const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`); |
|
|
if (favorites.includes(productId)) { |
|
|
favorites = favorites.filter(id => id !== productId); |
|
|
favoriteButton.classList.remove('favorited'); |
|
|
} else { |
|
|
favorites.push(productId); |
|
|
favoriteButton.classList.add('favorited'); |
|
|
} |
|
|
localStorage.setItem('favorites', JSON.stringify(favorites)); |
|
|
} |
|
|
|
|
|
function loadFavorites() { |
|
|
const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); |
|
|
document.querySelectorAll('.favorite-button').forEach(button => { |
|
|
const index = button.getAttribute('onclick').match(/\d+/)[0]; |
|
|
if (favorites.includes(index)) { |
|
|
button.classList.add('favorited'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target.className === 'modal') event.target.style.display = "none"; |
|
|
} |
|
|
|
|
|
updateCartButton(); |
|
|
loadFavorites(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
''' |
|
|
return render_template_string(discounts_html, products=products, repo_id=REPO_ID) |
|
|
|
|
|
|
|
|
@app.route('/product/<int:index>') |
|
|
def product_details(index): |
|
|
data = load_data() |
|
|
if (index < 0 or index >= len(data['products'])): |
|
|
return "Product not found", 404 |
|
|
product = data['products'][index] |
|
|
|
|
|
product_html = ''' |
|
|
<style> |
|
|
/* ... (your existing styles for product details modal) ... */ |
|
|
.swiper-container { |
|
|
width: 100%; |
|
|
max-width: 400px; |
|
|
margin: 20px auto; |
|
|
} |
|
|
.swiper-slide { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
background: #fff; |
|
|
border-radius: 10px; |
|
|
} |
|
|
body.dark-mode .swiper-slide { |
|
|
background: #333; |
|
|
} |
|
|
.swiper-slide img { |
|
|
max-width: 100%; |
|
|
max-height: 300px; |
|
|
object-fit: contain; |
|
|
} |
|
|
.swiper-button-next, .swiper-button-prev { |
|
|
color: #526df2; |
|
|
} |
|
|
.swiper-pagination-bullet-active { |
|
|
background: #526df2; |
|
|
} |
|
|
.product-details h2 { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 500; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.product-details .price { |
|
|
font-size: 1.3rem; |
|
|
color: #e63946; |
|
|
font-weight: 700; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.product-details .price .wholesale { |
|
|
font-size: 1rem; |
|
|
color: #526df2; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-details .price .discount { |
|
|
font-size: 1rem; |
|
|
color: #2ecc71; |
|
|
font-weight: 500; |
|
|
display: block; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.product-details p { |
|
|
font-size: 0.95rem; |
|
|
color: #666; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
body.dark-mode .product-details p { |
|
|
color: #bbb; |
|
|
} |
|
|
.product-details .colors { |
|
|
margin: 10px 0; |
|
|
} |
|
|
.product-details .colors span { |
|
|
display: inline-block; |
|
|
margin-right: 10px; |
|
|
padding: 5px 10px; |
|
|
border-radius: 15px; |
|
|
background: #f0f0f0; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
body.dark-mode .product-details .colors span { |
|
|
background: #333; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
</style> |
|
|
<div class="product-details"> |
|
|
<h2>{{ product['name'] }}</h2> |
|
|
<div class="swiper-container"> |
|
|
<div class="swiper-wrapper"> |
|
|
{% for photo in product.get('photos', []) %} |
|
|
<div class="swiper-slide"> |
|
|
<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}"> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
<div class="swiper-pagination"></div> |
|
|
<div class="swiper-button-next"></div> |
|
|
<div class="swiper-button-prev"></div> |
|
|
</div> |
|
|
<div class="price"> |
|
|
{% if product.get('discount') %} |
|
|
<span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span> |
|
|
<span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span> |
|
|
<span class="discount">Скидка: {{ product['discount'] }}%</span> |
|
|
{% else %} |
|
|
<span>{{ product['price'] }} с</span> |
|
|
{% endif %} |
|
|
{% if product.get('wholesale_price') and product.get('min_wholesale') %} |
|
|
<span class="wholesale">Опт: {{ product['wholesale_price'] }} с (от {{ product['min_wholesale'] }})</span> |
|
|
{% endif %} |
|
|
</div> |
|
|
<p><strong>Описание:</strong> {{ product['description'] }}</p> |
|
|
<p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p> |
|
|
{% if product.get('colors') %} |
|
|
<div class="colors"> |
|
|
<strong>Цвета:</strong> |
|
|
{% for color in product['colors'] %} |
|
|
<span>{{ color }}</span> |
|
|
{% endfor %} |
|
|
</div> |
|
|
{% endif %} |
|
|
</div> |
|
|
''' |
|
|
return render_template_string(product_html, product=product, repo_id=REPO_ID) |
|
|
|
|
|
@app.route('/admin', methods=['GET', 'POST']) |
|
|
def admin(): |
|
|
data = load_data() |
|
|
products = data['products'] |
|
|
categories = data['categories'] |
|
|
|
|
|
if request.method == 'POST': |
|
|
action = request.form.get('action') |
|
|
|
|
|
if action == 'add': |
|
|
photos = request.files.getlist('photos') |
|
|
photo_filenames = [] |
|
|
for photo in photos: |
|
|
if photo and photo.filename: |
|
|
filename = secure_filename(photo.filename) |
|
|
|
|
|
uploads_dir = "uploads" |
|
|
os.makedirs(uploads_dir, exist_ok=True) |
|
|
temp_path = os.path.join(uploads_dir, filename) |
|
|
photo.save(temp_path) |
|
|
|
|
|
api = HfApi() |
|
|
api.upload_file( |
|
|
path_or_fileobj=temp_path, |
|
|
path_in_repo=f"photos/{filename}", |
|
|
repo_id=REPO_ID, |
|
|
repo_type="dataset", |
|
|
token=HF_TOKEN_WRITE |
|
|
) |
|
|
photo_filenames.append(filename) |
|
|
os.remove(temp_path) |
|
|
|
|
|
colors = request.form.getlist('colors') |
|
|
colors = [color.strip() for color in colors if color.strip()] |
|
|
|
|
|
new_product = { |
|
|
'name': request.form['name'], |
|
|
'price': float(request.form['price']), |
|
|
'wholesale_price': float(request.form['wholesale_price']) if request.form['wholesale_price'] else None, |
|
|
'min_wholesale': int(request.form['min_wholesale']) if request.form['min_wholesale'] else None, |
|
|
'description': request.form['description'], |
|
|
'category': request.form['category'], |
|
|
'colors': colors, |
|
|
'photos': photo_filenames, |
|
|
'discount': float(request.form['discount']) if request.form['discount'] else None |
|
|
} |
|
|
products.append(new_product) |
|
|
|
|
|
elif action == 'edit': |
|
|
index = int(request.form['index']) |
|
|
photos = request.files.getlist('photos') |
|
|
photo_filenames = products[index].get('photos', []) |
|
|
|
|
|
for photo in photos: |
|
|
if photo and photo.filename: |
|
|
filename = secure_filename(photo.filename) |
|
|
|
|
|
uploads_dir = "uploads" |
|
|
os.makedirs(uploads_dir, exist_ok=True) |
|
|
temp_path = os.path.join(uploads_dir, filename) |
|
|
photo.save(temp_path) |
|
|
|
|
|
api = HfApi() |
|
|
api.upload_file( |
|
|
path_or_fileobj=temp_path, |
|
|
path_in_repo=f"photos/{filename}", |
|
|
repo_id=REPO_ID, |
|
|
repo_type="dataset", |
|
|
token=HF_TOKEN_WRITE |
|
|
) |
|
|
photo_filenames.append(filename) |
|
|
os.remove(temp_path) |
|
|
|
|
|
colors = request.form.getlist('colors') |
|
|
colors = [color.strip() for color in colors if color.strip()] |
|
|
|
|
|
products[index] = { |
|
|
'name': request.form['name'], |
|
|
'price': float(request.form['price']), |
|
|
'wholesale_price': float(request.form['wholesale_price']) if request.form['wholesale_price'] else None, |
|
|
'min_wholesale': int(request.form['min_wholesale']) if request.form['min_wholesale'] else None, |
|
|
'description': request.form['description'], |
|
|
'category': request.form['category'], |
|
|
'colors': colors, |
|
|
'photos': photo_filenames, |
|
|
'discount': float(request.form['discount']) if request.form['discount'] else None |
|
|
} |
|
|
|
|
|
elif action == 'delete': |
|
|
index = int(request.form['index']) |
|
|
|
|
|
product_to_delete = products[index] |
|
|
if 'photos' in product_to_delete: |
|
|
api = HfApi() |
|
|
for photo in product_to_delete['photos']: |
|
|
try: |
|
|
api.delete_file( |
|
|
path_in_repo=f"photos/{photo}", |
|
|
repo_id=REPO_ID, |
|
|
repo_type="dataset", |
|
|
token=HF_TOKEN_WRITE |
|
|
) |
|
|
except Exception as e: |
|
|
logging.error(f"Error deleting photo {photo}: {e}") |
|
|
products.pop(index) |
|
|
|
|
|
|
|
|
elif action == 'add_category': |
|
|
category = request.form['category_name'].strip() |
|
|
if category and category not in categories: |
|
|
categories.append(category) |
|
|
|
|
|
elif action == 'delete_category': |
|
|
index = int(request.form['category_index']) |
|
|
category_to_delete = categories[index] |
|
|
categories.pop(index) |
|
|
|
|
|
for product in products: |
|
|
if product.get('category') == category_to_delete: |
|
|
product['category'] = 'Без категории' |
|
|
|
|
|
save_data({'products': products, 'categories': categories}) |
|
|
return redirect(url_for('admin')) |
|
|
|
|
|
admin_html = ''' |
|
|
<!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> |
|
|
/* ... (your existing admin panel styles) ... */ |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa, #e4e7eb); |
|
|
color: #333; |
|
|
line-height: 1.6; |
|
|
padding: 20px; |
|
|
} |
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
h1 { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 20px; |
|
|
text-align: center; |
|
|
background: linear-gradient(90deg, #526df2, #7a8ff5); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
.form-container, .category-list, .product-list { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
border-radius: 15px; |
|
|
padding: 20px; |
|
|
margin-bottom: 20px; |
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.form-container label, .edit-form label { |
|
|
display: block; |
|
|
margin: 10px 0 5px; |
|
|
font-weight: 500; |
|
|
} |
|
|
.form-container input, .form-container textarea, .form-container select, |
|
|
.edit-form input, .edit-form textarea, .edit-form select { |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
margin-bottom: 10px; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
.form-container textarea, .edit-form textarea { |
|
|
resize: vertical; |
|
|
} |
|
|
.form-container button, .edit-form button { |
|
|
padding: 10px 20px; |
|
|
border: none; |
|
|
border-radius: 25px; |
|
|
background-color: #526df2; |
|
|
color: white; |
|
|
font-size: 1rem; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
margin: 5px 0; |
|
|
} |
|
|
.form-container button:hover, .edit-form button:hover { |
|
|
background-color: #3e55d1; |
|
|
box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4); |
|
|
} |
|
|
.add-color-btn { |
|
|
background-color: #2ecc71; |
|
|
} |
|
|
.add-color-btn:hover { |
|
|
background-color: #27ae60; |
|
|
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); |
|
|
} |
|
|
.color-input-group { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.color-input-group input { |
|
|
flex: 1; |
|
|
} |
|
|
.category-list, .product-list { |
|
|
display: grid; |
|
|
gap: 20px; |
|
|
} |
|
|
.category-item, .product-item { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
border: 1px solid rgba(0, 0, 0, 0.05); |
|
|
border-radius: 10px; |
|
|
padding: 15px; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); |
|
|
} |
|
|
.category-item h2, .product-item h2 { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 500; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.category-item form, .product-item form { |
|
|
display: inline-block; |
|
|
} |
|
|
.delete-button { |
|
|
background-color: #e63946; |
|
|
} |
|
|
.delete-button:hover { |
|
|
background-color: #d62828; |
|
|
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); |
|
|
} |
|
|
details { |
|
|
margin: 10px 0; |
|
|
} |
|
|
summary { |
|
|
cursor: pointer; |
|
|
font-weight: 500; |
|
|
color: #526df2; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.edit-form { |
|
|
margin-top: 10px; |
|
|
} |
|
|
.search-container { |
|
|
margin: 20px 0; |
|
|
text-align: center; |
|
|
} |
|
|
#search-input { |
|
|
width: 90%; |
|
|
max-width: 600px; |
|
|
padding: 12px 18px; |
|
|
font-size: 1rem; |
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 25px; |
|
|
outline: none; |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
#search-input:focus { |
|
|
border-color: #526df2; |
|
|
box-shadow: 0 4px 15px rgba(82, 109, 242, 0.2); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Админ-панель</h1> |
|
|
|
|
|
<div class="form-container"> |
|
|
<h1>Добавить товар</h1> |
|
|
<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> |
|
|
<input type="number" name="wholesale_price" step="0.01"> |
|
|
<label>Минимальное количество для опта:</label> |
|
|
<input type="number" name="min_wholesale" min="1"> |
|
|
<label>Скидка (%):</label> |
|
|
<input type="number" name="discount" min="0" max="100" step="0.1"> |
|
|
<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/*" multiple> |
|
|
<label>Цвета:</label> |
|
|
<div id="color-inputs"> |
|
|
<div class="color-input-group"> |
|
|
<input type="text" name="colors" placeholder="Например: Красный"> |
|
|
</div> |
|
|
</div> |
|
|
<button type="button" class="add-color-btn" onclick="addColorInput()">Добавить цвет</button> |
|
|
<button type="submit">Добавить товар</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="form-container"> |
|
|
<h1>Добавить категорию</h1> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="category-list"> |
|
|
{% for category in categories %} |
|
|
<div class="category-item"> |
|
|
<h2>{{ category }}</h2> |
|
|
<form method="POST"> |
|
|
<input type="hidden" name="action" value="delete_category"> |
|
|
<input type="hidden" name="category_index" value="{{ loop.index0 }}"> |
|
|
<button type="submit" class="delete-button">Удалить категорию</button> |
|
|
</form> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
|
|
|
<h1>Список товаров</h1> |
|
|
<div class="search-container"> |
|
|
<input type="text" id="search-input" placeholder="Поиск товаров..."> |
|
|
</div> |
|
|
<div class="product-list" id="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', 'Без категории') }}"> |
|
|
<h2>{{ product['name'] }}</h2> |
|
|
<p>Цена (розница): {{ product['price'] }} с</p> |
|
|
{% if product.get('wholesale_price') and product.get('min_wholesale') %} |
|
|
<p>Цена (опт): {{ product['wholesale_price'] }} с (от {{ product['min_wholesale'] }})</p> |
|
|
{% endif %} |
|
|
{% if product.get('discount') %} |
|
|
<p>Скидка: {{ product['discount'] }}%</p> |
|
|
{% endif %} |
|
|
<p>Описание: {{ product['description'] }}</p> |
|
|
<p>Категория: {{ product.get('category', 'Без категории') }}</p> |
|
|
<p>Цвета: {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p> |
|
|
{% if product.get('photos') %} |
|
|
<p>Фотографии:</p> |
|
|
{% for photo in product['photos'] %} |
|
|
<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}" style="max-width: 100px; margin: 5px;"> |
|
|
{% endfor %} |
|
|
{% endif %} |
|
|
<details> |
|
|
<summary>Редактировать</summary> |
|
|
<form method="POST" enctype="multipart/form-data" class="edit-form"> |
|
|
<input type="hidden" name="action" value="edit"> |
|
|
<input type="hidden" name="index" value="{{ loop.index0 }}"> |
|
|
<label>Название:</label> |
|
|
<input type="text" name="name" value="{{ product['name'] }}" required> |
|
|
<label>Цена (розница):</label> |
|
|
<input type="number" name="price" step="0.01" value="{{ product['price'] }}" required> |
|
|
<label>Цена (опт):</label> |
|
|
<input type="number" name="wholesale_price" step="0.01" value="{{ product.get('wholesale_price', '') }}"> |
|
|
<label>Минимальное количество для опта:</label> |
|
|
<input type="number" name="min_wholesale" min="1" value="{{ product.get('min_wholesale', '') }}"> |
|
|
<label>Скидка (%):</label> |
|
|
<input type="number" name="discount" min="0" max="100" step="0.1" value="{{ product.get('discount', '') }}"> |
|
|
<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/*" multiple> |
|
|
<label>Цвета:</label> |
|
|
<div id="edit-color-inputs-{{ loop.index0 }}"> |
|
|
{% for color in product.get('colors', []) %} |
|
|
<div class="color-input-group"> |
|
|
<input type="text" name="colors" value="{{ color }}"> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
<button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button> |
|
|
<button type="submit">Сохранить</button> |
|
|
</form> |
|
|
</details> |
|
|
<form method="POST"> |
|
|
<input type="hidden" name="action" value="delete"> |
|
|
<input type="hidden" name="index" value="{{ loop.index0 }}"> |
|
|
<button type="submit" class="delete-button">Удалить</button> |
|
|
</form> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
function addColorInput(containerId = 'color-inputs') { |
|
|
const container = document.getElementById(containerId); |
|
|
const newInput = document.createElement('div'); |
|
|
newInput.className = 'color-input-group'; |
|
|
newInput.innerHTML = '<input type="text" name="colors" placeholder="Например: Красный">'; |
|
|
container.appendChild(newInput); |
|
|
} |
|
|
|
|
|
document.getElementById('search-input').addEventListener('input', filterProducts); |
|
|
|
|
|
function filterProducts() { |
|
|
const searchTerm = document.getElementById('search-input').value.toLowerCase(); |
|
|
document.querySelectorAll('.product-item').forEach(product => { |
|
|
const name = product.getAttribute('data-name'); |
|
|
const description = product.getAttribute('data-description'); |
|
|
const category = product.getAttribute('data-category'); |
|
|
const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm) || category.includes(searchTerm); |
|
|
product.style.display = matchesSearch ? 'block' : 'none'; |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
''' |
|
|
return render_template_string(admin_html, products=products, categories=categories, repo_id=REPO_ID) |
|
|
|
|
|
@app.route('/backup', methods=['POST']) |
|
|
def backup(): |
|
|
upload_db_to_hf() |
|
|
return "Резервная копия создана.", 200 |
|
|
|
|
|
@app.route('/download', methods=['GET']) |
|
|
def download(): |
|
|
download_db_from_hf() |
|
|
return "База данных скачана.", 200 |
|
|
|
|
|
if __name__ == '__main__': |
|
|
backup_thread = threading.Thread(target=periodic_backup, daemon=True) |
|
|
backup_thread.start() |
|
|
try: |
|
|
load_data() |
|
|
except Exception as e: |
|
|
logging.error(f"Не удалось загрузить базу данных: {e}") |
|
|
app.run(debug=True, host='0.0.0.0', port=7860) |
