Hugging Face's logo

Spaces:
gurwa
/
ruart
Running

App Files Community
ruart / index.html
gurwa's picture
gurwa
Сделай новый полностью рабочий сайт по продаже готовых картин и услуг по написанию новых, с возможностью создания аукционов, добавлнния в корзину, покупки. С приятными звуками, легкой и красивой анимацией и минималистичном стиле - Initial Deployment
92be765 verified
raw
history blame contribute delete
53 kB
<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ArtCanvas | Картины и авторские работы</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
@keyframes pulse {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.05); }
 }
.fade-in {
 animation: fadeIn 0.5s ease-out forwards;
 }
.pulse:hover {
 animation: pulse 1.5s infinite;
 }
.cart-pulse {
 animation: pulse 1s ease-out;
 }
.auction-timer {
 font-family: monospace;
 }
.artwork-card:hover .artwork-overlay {
 opacity: 1;
 transform: translateY(0);
 }
.artwork-overlay {
 opacity: 0;
 transform: translateY(10px);
 transition: all 0.3s ease;
 }
.drawer {
 transition: transform 0.3s ease-out;
 }
.drawer.open {
 transform: translateX(0);
 }
.drawer.closed {
 transform: translateX(100%);
 }
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <audio id="addToCartSound" src="https://assets.mixkit.co/sfx/preview/mixkit-arrow-whoosh-1491.mp3" preload="auto"></audio>
 <audio id="purchaseSound" src="https://assets.mixkit.co/sfx/preview/mixkit-cash-machine-buttons-press-1104.mp3" preload="auto"></audio>
 <audio id="bidSound" src="https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3" preload="auto"></audio>
<!-- Header -->
 <header class="bg-white shadow-sm sticky top-0 z-50">
 <div class="container mx-auto px-4 py-4 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-palette text-2xl text-indigo-600"></i>
 <h1 class="text-xl font-bold text-gray-800">ArtCanvas</h1>
 </div>
<nav class="hidden md:flex space-x-8">
 <a href="#gallery" class="text-gray-600 hover:text-indigo-600 transition">Галерея</a>
 <a href="#auctions" class="text-gray-600 hover:text-indigo-600 transition">Аукционы</a>
 <a href="#custom" class="text-gray-600 hover:text-indigo-600 transition">На заказ</a>
 <a href="#about" class="text-gray-600 hover:text-indigo-600 transition">О нас</a>
 </nav>
<div class="flex items-center space-x-4">
 <button id="cartButton" class="relative">
 <i class="fas fa-shopping-cart text-gray-700 hover:text-indigo-600 text-xl transition"></i>
 <span id="cartCounter" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
 </button>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full transition transform hover:scale-105">
 Войти
 </button>
<button id="mobileMenuButton" class="md:hidden text-gray-700">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
<!-- Mobile Menu -->
 <div id="mobileMenu" class="hidden md:hidden bg-white border-t px-4 py-3 space-y-3">
 <a href="#gallery" class="block text-gray-600 hover:text-indigo-600 transition">Галерея</a>
 <a href="#auctions" class="block text-gray-600 hover:text-indigo-600 transition">Аукционы</a>
 <a href="#custom" class="block text-gray-600 hover:text-indigo-600 transition">На заказ</a>
 <a href="#about" class="block text-gray-600 hover:text-indigo-600 transition">О нас</a>
 </div>
 </header>
<!-- Hero Section -->
 <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20 px-4">
 <div class="container mx-auto text-center fade-in">
 <h2 class="text-4xl md:text-5xl font-bold mb-6">Искусство, которое вдохновляет</h2>
 <p class="text-xl mb-8 max-w-3xl mx-auto">Уникальные картины от талантливых художников. Находите, покупайте или заказывайте собственные шедевры.</p>
 <div class="flex justify-center space-x-4">
 <a href="#gallery" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition transform hover:scale-105">Исследовать</a>
 <a href="#custom" class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition transform hover:scale-105">Заказать</a>
 </div>
 </div>
 </section>
<!-- Gallery Section -->
 <section id="gallery" class="py-16 px-4 bg-white">
 <div class="container mx-auto">
 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Галерея картин</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Artwork 1 -->
 <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1578926375605-eaf7559b1458?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1286&q=80"
alt="Городской пейзаж"
class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
 <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
 <div class="text-white">
 <p class="text-sm">Масло, холст</p>
 <p class="text-xs">50×70 см</p>
 </div>
 </div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-semibold mb-2 text-gray-800">Городские огни</h3>
 <p class="text-gray-600 mb-4">Экспрессивный городской пейзаж в ночное время</p>
 <div class="flex justify-between items-center">
 <span class="text-indigo-600 font-bold text-lg">12,500 ₽</span>
 <button class="add-to-cart-btn" data-id="1" data-title="Городские огни" data-price="12500"
class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
 В корзину
 </button>
 </div>
 </div>
 </div>
<!-- Artwork 2 -->
 <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1345&q=80"
alt="Портрет"
class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
 <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
 <div class="text-white">
 <p class="text-sm">Акрил, холст</p>
 <p class="text-xs">60×80 см</p>
 </div>
 </div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-semibold mb-2 text-gray-800">Весенний взгляд</h3>
 <p class="text-gray-600 mb-4">Женский портрет с цветочными элементами</p>
 <div class="flex justify-between items-center">
 <span class="text-indigo-600 font-bold text-lg">18,200 ₽</span>
 <button class="add-to-cart-btn" data-id="2" data-title="Весенний взгляд" data-price="18200"
class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
 В корзину
 </button>
 </div>
 </div>
 </div>
<!-- Artwork 3 -->
 <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1287&q=80"
alt="Горы"
class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
 <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
 <div class="text-white">
 <p class="text-sm">Акварель, бумага</p>
 <p class="text-xs">40×60 см</p>
 </div>
 </div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-semibold mb-2 text-gray-800">Горное эхо</h3>
 <p class="text-gray-600 mb-4">Завораживающий вид на горный хребет</p>
 <div class="flex justify-between items-center">
 <span class="text-indigo-600 font-bold text-lg">9,800 ₽</span>
 <button class="add-to-cart-btn" data-id="3" data-title="Горное эхо" data-price="9800"
class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
 В корзину
 </button>
 </div>
 </div>
 </div>
<!-- Artwork 4 -->
 <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1579547945413-497e1b99dac0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Абстракция"
class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
 <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
 <div class="text-white">
 <p class="text-sm">Смешанная техника</p>
 <p class="text-xs">70×90 см</p>
 </div>
 </div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-semibold mb-2 text-gray-800">Цветной хаос</h3>
 <p class="text-gray-600 mb-4">Энергичная абстрактная композиция</p>
 <div class="flex justify-between items-center">
 <span class="text-indigo-600 font-bold text-lg">15,300 ₽</span>
 <button class="add-to-cart-btn" data-id="4" data-title="Цветной хаос" data-price="15300"
class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
 В корзину
 </button>
 </div>
 </div>
 </div>
<!-- Artwork 5 -->
 <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1574362848149-11496d93a7c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1284&q=80"
alt="Морской пейзаж"
class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
 <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
 <div class="text-white">
 <p class="text-sm">Масло, холст</p>
 <p class="text-xs">50×70 см</p>
 </div>
 </div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-semibold mb-2 text-gray-800">Морская симфония</h3>
 <p class="text-gray-600 mb-4">Драматический морской пейзаж с волнами</p>
 <div class="flex justify-between items-center">
 <span class="text-indigo-600 font-bold text-lg">13,750 ₽</span>
 <button class="add-to-cart-btn" data-id="5" data-title="Морская симфония" data-price="13750"
class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
 В корзину
 </button>
 </div>
 </div>
 </div>
<!-- Artwork 6 -->
 <div class="artwork-card bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition relative">
 <div class="relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Цветы" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-105">
 <div class="artwork-overlay absolute inset-0 bg-black bg-opacity-40 flex items-end p-4">
 <div class="text-white">
 <p class="text-sm">Гуашь, бумага</p>
 <p class="text-xs">40×50 см</p>
 </div>
 </div>
 </div>
 <div class="p-4">
 <h3 class="text-xl font-semibold mb-2 text-gray-800">Цветочная гармония</h3>
 <p class="text-gray-600 mb-4">Нежные полевые цветы в тёплых тонах</p>
 <div class="flex justify-between items-center">
 <span class="text-indigo-600 font-bold text-lg">8,900 ₽</span>
 <button class="add-to-cart-btn" data-id="6" data-title="Цветочная гармония" data-price="8900"
class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition">
 В корзину
 </button>
 </div>
 </div>
 </div>
 </div>
<div class="text-center mt-12">
 <button class="px-6 py-3 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition font-medium">
 Показать больше
 </button>
 </div>
 </div>
 </section>
<!-- Auctions Section -->
 <section id="auctions" class="py-16 px-4 bg-gray-50">
 <div class="container mx-auto">
 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Активные аукционы</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 <!-- Auction 1 -->
 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1618221195710-dd6b41fa6866?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1400&q=80"
alt="Аукционная картина" class="w-full h-64 object-cover">
 <div class="absolute top-4 right-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">
 Идёт торг
 </div>
 </div>
 <div class="p-6">
 <div class="flex justify-between items-start mb-4">
 <div>
 <h3 class="text-xl font-semibold mb-1 text-gray-800">Ночной город</h3>
 <p class="text-gray-600">Масло, холст • 50×70 см</p>
 </div>
 <div class="text-right">
 <p class="text-sm text-gray-500">Текущая цена:</p>
 <p class="text-indigo-600 font-bold text-xl">24,500 ₽</p>
 </div>
 </div>
<div class="mb-6">
 <div class="flex justify-between text-sm text-gray-500 mb-1">
 <span>Следующая ставка от:</span>
 <span>25,500 ₽</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-indigo-600 h-2 rounded-full" style="width: 65%"></div>
 </div>
 </div>
<div class="mb-6">
 <p class="text-sm text-gray-500 mb-2">До окончания аукциона:</p>
 <div id="auction1Timer" class="auction-timer text-xl font-bold text-gray-800">
 2д 6ч 34м 12с
 </div>
 </div>
<button class="place-bid-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-full font-medium transition">
 Сделать ставку
 </button>
 </div>
 </div>
<!-- Auction 2 -->
 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1479064555552-3ef4979f8908?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Аукционная картина" class="w-full h-64 object-cover">
 <div class="absolute top-4 right-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">
 Идёт торг
 </div>
 </div>
 <div class="p-6">
 <div class="flex justify-between items-start mb-4">
 <div>
 <h3 class="text-xl font-semibold mb-1 text-gray-800">Далекие горизонты</h3>
 <p class="text-gray-600">Акварель, бумага • 40×60 см</p>
 </div>
 <div class="text-right">
 <p class="text-sm text-gray-500">Текущая цена:</p>
 <p class="text-indigo-600 font-bold text-xl">15,800 ₽</p>
 </div>
 </div>
<div class="mb-6">
 <div class="flex justify-between text-sm text-gray-500 mb-1">
 <span>Следующая ставка от:</span>
 <span>16,800 ₽</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-indigo-600 h-2 rounded-full" style="width: 45%"></div>
 </div>
 </div>
<div class="mb-6">
 <p class="text-sm text-gray-500 mb-2">До окончания аукциона:</p>
 <div id="auction2Timer" class="auction-timer text-xl font-bold text-gray-800">
 1д 3ч 15м 42с
 </div>
 </div>
<button class="place-bid-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-full font-medium transition">
 Сделать ставку
 </button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Custom Art Section -->
 <section id="custom" class="py-16 px-4 bg-white">
 <div class="container mx-auto">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">Картина на заказ</h2>
 <p class="text-gray-600 max-w-2xl mx-auto">Расскажите нам о картине вашей мечты, и наши художники воплотят ваши идеи в реальность</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
 <div class="fade-in">
 <img src="https://images.unsplash.com/photo-1526661295964-905dbe821965?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
alt="Художник за работой" class="rounded-xl shadow-lg w-full h-auto">
 </div>
<div class="fade-in">
 <form class="space-y-6">
 <div>
 <label for="artType" class="block text-gray-700 font-medium mb-2">Тип картины</label>
 <select id="artType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
 <option value="">Выберите тип картины</option>
 <option value="portrait">Портрет</option>
 <option value="landscape">Пейзаж</option>
 <option value="abstract">Абстракция</option>
 <option value="still-life">Натюрморт</option>
 <option value="other">Другое</option>
 </select>
 </div>
<div>
 <label for="artSize" class="block text-gray-700 font-medium mb-2">Размер (см)</label>
 <select id="artSize" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
 <option value="">Выберите размер</option>
 <option value="40x50">40×50</option>
 <option value="50x70">50×70</option>
 <option value="60x80">60×80</option>
 <option value="70x90">70×90</option>
 <option value="custom">Нестандартный</option>
 </select>
 </div>
<div>
 <label for="artStyle" class="block text-gray-700 font-medium mb-2">Стиль</label>
 <select id="artStyle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
 <option value="">Выберите стиль</option>
 <option value="realism">Реализм</option>
 <option value="impressionism">Импрессионизм</option>
 <option value="abstract">Абстракция</option>
 <option value="pop-art">Поп-арт</option>
 <option value="other">Другое</option>
 </select>
 </div>
<div>
 <label for="artDescription" class="block text-gray-700 font-medium mb-2">Описание</label>
 <textarea id="artDescription" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Опишите вашу идею как можно подробнее..."></textarea>
 </div>
<div>
 <label for="artPhoto" class="block text-gray-700 font-medium mb-2">Эталонные изображения (макс. 3)</label>
 <input type="file" id="artPhoto" multiple accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
 </div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-full transition transform hover:scale-105">
 Отправить запрос
 </button>
 </form>
 </div>
 </div>
 </div>
 </section>
<!-- About Section -->
 <section id="about" class="py-16 px-4 bg-gray-50">
 <div class="container mx-auto">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">О ArtCanvas</h2>
 <p class="text-gray-600 max-w-3xl mx-auto">Мы объединяем талантливых художников и ценителей искусства со всего мира</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition text-center">
 <div class="text-indigo-600 mb-4 text-4xl">
 <i class="fas fa-paint-brush"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3 text-gray-800">150+ художников</h3>
 <p class="text-gray-600">Работаем только с профессиональными художниками, прошедшими отбор</p>
 </div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition text-center">
 <div class="text-indigo-600 mb-4 text-4xl">
 <i class="fas fa-star"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3 text-gray-800">Гарантия подлинности</h3>
 <p class="text-gray-600">Все произведения сопровождаются сертификатом подлинности</p>
 </div>
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition text-center">
 <div class="text-indigo-600 mb-4 text-4xl">
 <i class="fas fa-truck"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3 text-gray-800">Безопасная доставка</h3>
 <p class="text-gray-600">Идеальная упаковка и страховка каждого произведения при пересылке</p>
 </div>
 </div>
 </div>
 </section>
<!-- Cart Drawer -->
 <div id="cartDrawer" class="drawer fixed inset-y-0 right-0 w-full sm:w-96 bg-white shadow-xl z-50 overflow-y-auto closed">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold text-gray-800">Корзина</h3>
 <button id="closeCartButton" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times text-xl"></i>
 </button>
 </div>
<div id="cartItemsContainer" class="space-y-4 mb-6">
 <!-- Cart items will be added here dynamically -->
 </div>
<div class="border-t border-gray-200 pt-4 mb-6">
 <div class="flex justify-between mb-2">
 <span class="text-gray-600">Промежуточный итог:</span>
 <span id="cartSubtotal" class="font-medium">0 ₽</span>
 </div>
 <div class="flex justify-between mb-2">
 <span class="text-gray-600">Доставка:</span>
 <span class="font-medium">Рассчитывается</span>
 </div>
 <div class="flex justify-between text-lg font-bold">
 <span>Итого:</span>
 <span id="cartTotal">0 ₽</span>
 </div>
 </div>
<button id="checkoutButton" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-full transition transform hover:scale-105">
 Оформить заказ
 </button>
<p class="text-center text-gray-500 mt-4 text-sm">Мы гарантируем конфиденциальность ваших данных</p>
 </div>
 </div>
<!-- Bid Modal -->
 <div id="bidModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
 <div class="bg-white rounded-xl max-w-md w-full p-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold text-gray-800">Сделать ставку</h3>
 <button id="closeBidModal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div class="mb-6">
 <p class="text-gray-700 mb-4">Текущая цена: <span id="currentBidPrice" class="font-bold">25,500 ₽</span></p>
 <p class="text-sm text-gray-500 mb-4">Следующая минимальная ставка: <span id="nextBidPrice" class="font-bold">26,500 ₽</span></p>
<label for="bidAmount" class="block text-gray-700 font-medium mb-2">Ваша ставка:</label>
 <div class="relative">
 <input type="number" id="bidAmount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
 <span class="absolute right-4 top-2 text-gray-500">₽</span>
 </div>
 </div>
<button id="confirmBid" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-full transition">
 Подтвердить ставку
 </button>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-12 px-4">
 <div class="container mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h4 class="text-lg font-semibold mb-4">ArtCanvas</h4>
 <p class="text-gray-400">Искусство доступное каждому. Галерея, аукционы и заказ картин.</p>
 </div>
<div>
 <h4 class="text-lg font-semibold mb-4">Меню</h4>
 <ul class="space-y-2">
 <li><a href="#gallery" class="text-gray-400 hover:text-white transition">Галерея</a></li>
 <li><a href="#auctions" class="text-gray-400 hover:text-white transition">Аукционы</a></li>
 <li><a href="#custom" class="text-gray-400 hover:text-white transition">На заказ</a></li>
 <li><a href="#about" class="text-gray-400 hover:text-white transition">О нас</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-semibold mb-4">Контакты</h4>
 <ul class="space-y-2 text-gray-400">
 <li><i class="fas fa-map-marker-alt mr-2"></i> Москва, ул. Искусств, 15</li>
 <li><i class="fas fa-phone mr-2"></i> +7 (495) 123-45-67</li>
 <li><i class="fas fa-envelope mr-2"></i> info@artcanvas.ru</li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-semibold mb-4">Подписаться</h4>
 <p class="text-gray-400 mb-4">Подпишитесь на наши новости и акции</p>
 <div class="flex">
 <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-800">
 <button class="bg-indigo-600 hover:bg-indigo-700 px-4 rounded-r-lg transition">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 <div class="flex space-x-4 mt-4">
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a>
 </div>
 </div>
 </div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
 <p>© 2023 ArtCanvas. Все права защищены.</p>
 </div>
 </div>
 </footer>
<!-- Success Notification -->
 <div id="successNotification" class="hidden fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg">
 <div class="flex items-center">
 <i class="fas fa-check-circle mr-2"></i>
 <span id="notificationMessage">Товар добавлен в корзину</span>
 </div>
 </div>
<script>
 // Cart functionality
 const cart = [];
// DOM elements
 const cartButton = document.getElementById('cartButton');
 const cartCounter = document.getElementById('cartCounter');
 const cartDrawer = document.getElementById('cartDrawer');
 const closeCartButton = document.getElementById('closeCartButton');
 const cartItemsContainer = document.getElementById('cartItemsContainer');
 const cartSubtotal = document.getElementById('cartSubtotal');
 const cartTotal = document.getElementById('cartTotal');
 const checkoutButton = document.getElementById('checkoutButton');
 const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');
 const addToCartSound = document.getElementById('addToCartSound');
 const purchaseSound = document.getElementById('purchaseSound');
 const bidSound = document.getElementById('bidSound');
 const successNotification = document.getElementById('successNotification');
 const notificationMessage = document.getElementById('notificationMessage');
 const mobileMenuButton = document.getElementById('mobileMenuButton');
 const mobileMenu = document.getElementById('mobileMenu');
 const bidModal = document.getElementById('bidModal');
 const closeBidModal = document.getElementById('closeBidModal');
 const placeBidButtons = document.querySelectorAll('.place-bid-btn');
 const confirmBid = document.getElementById('confirmBid');
 const currentBidPrice = document.getElementById('currentBidPrice');
 const nextBidPrice = document.getElementById('nextBidPrice');
 const bidAmount = document.getElementById('bidAmount');
 // Mobile menu toggle
 mobileMenuButton.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
 // Update cart counter
 function updateCartCounter() {
 const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
 cartCounter.textContent = totalItems;
if (totalItems > 0) {
 cartCounter.classList.remove('hidden');
 } else {
 cartCounter.classList.add('hidden');
 }
 }
 // Calculate cart total
 function calculateCartTotal() {
 const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
 cartSubtotal.textContent = `${subtotal.toLocaleString()} ₽`;
 cartTotal.textContent = `${subtotal.toLocaleString()} ₽`;
 }
 // Render cart items
 function renderCartItems() {
 cartItemsContainer.innerHTML = '';
if (cart.length === 0) {
 cartItemsContainer.innerHTML = `
 <div class="text-center py-8">
 <i class="fas fa-shopping-cart text-4xl text-gray-300 mb-4"></i>
 <p class="text-gray-500">Ваша корзина пуста</p>
 </div>
 `;
 checkoutButton.disabled = true;
 return;
 }
checkoutButton.disabled = false;
cart.forEach(item => {
 const cartItemElement = document.createElement('div');
 cartItemElement.className = 'flex justify-between items-start p-3 bg-gray-50 rounded-lg';
 cartItemElement.innerHTML = `
 <div class="flex items-start space-x-3">
 <img src="${item.image}" alt="${item.title}" class="w-16 h-16 object-cover rounded">
 <div>
 <h4 class="font-medium text-gray-800">${item.title}</h4>
 <p class="text-sm text-gray-500">${item.size}</p>
 <div class="flex items-center mt-1">
 <button class="decrease-quantity text-gray-500 hover:text-indigo-600" data-id="${item.id}">
 <i class="fas fa-minus text-xs"></i>
 </button>
 <span class="quantity mx-2">${item.quantity}</span>
 <button class="increase-quantity text-gray-500 hover:text-indigo-600" data-id="${item.id}">
 <i class="fas fa-plus text-xs"></i>
 </button>
 </div>
 </div>
 </div>
 <div class="text-right">
 <p class="text-indigo-600 font-medium">${(item.price * item.quantity).toLocaleString()} ₽</p>
 <button class="remove-item mt-1 text-xs text-gray-400 hover:text-red-500" data-id="${item.id}">
 Удалить
 </button>
 </div>
 `;
 cartItemsContainer.appendChild(cartItemElement);
 });
// Add event listeners to dynamically created buttons
 document.querySelectorAll('.increase-quantity').forEach(button => {
 button.addEventListener('click', () => {
 const id = button.dataset.id;
 const item = cart.find(item => item.id === id);
 item.quantity += 1;
 renderCartItems();
 updateCartCounter();
 calculateCartTotal();
 });
 });
document.querySelectorAll('.decrease-quantity').forEach(button => {
 button.addEventListener('click', () => {
 const id = button.dataset.id;
 const item = cart.find(item => item.id === id);
 if (item.quantity > 1) {
 item.quantity -= 1;
 } else {
 const index = cart.findIndex(item => item.id === id);
 cart.splice(index, 1);
 }
 renderCartItems();
 updateCartCounter();
 calculateCartTotal();
 });
 });
document.querySelectorAll('.remove-item').forEach(button => {
 button.addEventListener('click', () => {
 const id = button.dataset.id;
 const index = cart.findIndex(item => item.id === id);
 cart.splice(index, 1);
 renderCartItems();
 updateCartCounter();
 calculateCartTotal();
 });
 });
 }
 // Add to cart
 addToCartButtons.forEach(button => {
 button.addEventListener('click', () => {
 const id = button.dataset.id;
 const title = button.dataset.title;
 const price = parseInt(button.dataset.price);
 const image = button.closest('.artwork-card').querySelector('img').src;
 const size = button.closest('.artwork-card').querySelector('.artwork-overlay p.text-xs').textContent;
const existingItem = cart.find(item => item.id === id);
if (existingItem) {
 existingItem.quantity += 1;
 } else {
 cart.push({
 id,
 title,
 price,
 image,
 size,
 quantity: 1
 });
 }
// Play sound
 addToCartSound.currentTime = 0;
 addToCartSound.play();
// Update UI
 updateCartCounter();
 cartCounter.classList.add('cart-pulse');
 setTimeout(() => cartCounter.classList.remove('cart-pulse'), 1000);
// Show notification
 notificationMessage.textContent = `"${title}" добавлена в корзину`;
 successNotification.classList.remove('hidden');
 setTimeout(() => successNotification.classList.add('hidden'), 3000);
 });
 });
 // Cart drawer toggle
 cartButton.addEventListener('click', () => {
 cartDrawer.classList.remove('closed');
 cartDrawer.classList.add('open');
 renderCartItems();
 calculateCartTotal();
 });
 closeCartButton.addEventListener('click', () => {
 cartDrawer.classList.remove('open');
 cartDrawer.classList.add('closed');
 });
 // Checkout
 checkoutButton.addEventListener('click', () => {
 purchaseSound.play();
// Show notification
 notificationMessage.textContent = 'Ваш заказ успешно оформлен!';
 successNotification.classList.add('bg-green-500');
 successNotification.classList.remove('hidden');
// Clear cart
 cart.length = 0;
 renderCartItems();
 updateCartCounter();
setTimeout(() => {
 successNotification.classList.add('hidden');
 cartDrawer.classList.remove('open');
 cartDrawer.classList.add('closed');
 }, 3000);
 });
 // Bid functionality
 placeBidButtons.forEach(button => {
 button.addEventListener('click', () => {
 const currentPrice = button.closest('div').querySelector('p.text-indigo-600').textContent;
 const nextPrice = button.closest('div').querySelector('span:nth-child(2)').textContent;
currentBidPrice.textContent = currentPrice;
 nextBidPrice.textContent = nextPrice;
 bidAmount.value = nextPrice.replace(/[^0-9]/g, '');
bidModal.classList.remove('hidden');
 document.body.style.overflow = 'hidden';
 });
 });
 closeBidModal.addEventListener('click', () => {
 bidModal.classList.add('hidden');
 document.body.style.overflow = 'auto';
 });
 confirmBid.addEventListener('click', () => {
 if (!bidAmount.value || parseInt(bidAmount.value) < parseInt(nextBidPrice.textContent.replace(/[^0-9]/g, ''))) {
 alert(`Ваша ставка должна быть не менее ${nextBidPrice.textContent}`);
 return;
 }
bidSound.play();
// Show notification
 notificationMessage.textContent = `Ваша ставка ${bidAmount.value} ₽ принята!`;
 successNotification.classList.add('bg-indigo-500');
 successNotification.classList.remove('hidden');
bidModal.classList.add('hidden');
 document.body.style.overflow = 'auto';
setTimeout(() => {
 successNotification.classList.add('hidden');
 successNotification.classList.remove('bg-indigo-500');
 successNotification.classList.add('bg-green-500');
 }, 3000);
 });
 // Simulate auction timers
 function updateAuctionTimers() {
 let time1 = document.getElementById('auction1Timer').textContent.split(/[дчмс]/);
 let days1 = parseInt(time1[0]) || 0;
 let hours1 = parseInt(time1[1]) || 0;
 let minutes1 = parseInt(time1[2]) || 0;
 let seconds1 = parseInt(time1[3]) || 0;
seconds1--;
 if (seconds1 < 0) {
 seconds1 = 59;
 minutes1--;
 if (minutes1 < 0) {
 minutes1 = 59;
 hours1--;
 if (hours1 < 0) {
 hours1 = 23;
 days1--;
 if (days1 < 0) {
 days1 = 0;
 }
 }
 }
 }
document.getElementById('auction1Timer').textContent =
`${days1}д ${hours1}ч ${minutes1}м ${seconds1}с`;
let time2 = document.getElementById('auction2Timer').textContent.split(/[дчмс]/);
 let days2 = parseInt(time2[0]) || 0;
 let hours2 = parseInt(time2[1]) || 0;
 let minutes2 = parseInt(time2[2]) || 0;
 let seconds2 = parseInt(time2[3]) || 0;
seconds2--;
 if (seconds2 < 0) {
 seconds2 = 59;
 minutes2--;
 if (minutes2 < 0) {
 minutes2 = 59;
 hours2--;
 if (hours2 < 0) {
 hours2 = 23;
 days2--;
 if (days2 < 0) {
 days2 = 0;
 }
 }
 }
 }
document.getElementById('auction2Timer').textContent =
`${days2}д ${hours2}ч ${minutes2}м ${seconds2}с`;
 }
setInterval(updateAuctionTimers, 1000);
// Animate elements on scroll
 function animateOnScroll() {
 const elements = document.querySelectorAll('.fade-in');
elements.forEach(element => {
 const elementPosition = element.getBoundingClientRect().top;
 const screenPosition = window.innerHeight / 1.3;
if (elementPosition < screenPosition) {
 element.style.animation = 'fadeIn 0.5s ease-out forwards';
 }
 });
 }
window.addEventListener('scroll', animateOnScroll);
// Initial animation on load
 document.addEventListener('DOMContentLoaded', () => {
 setTimeout(() => {
 document.querySelectorAll('.fade-in').forEach(element => {
 element.style.animation = 'fadeIn 0.5s ease-out forwards';
 });
 }, 500);
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gurwa/ruart" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>