Hugging Face's logo

Spaces:
unzerror
/
undefined
Running

App Files Community
undefined / index.html
unzerror's picture
unzerror
Используй цветовую гамму как на го сайтах рф например как тут http://kremlin.ru/
1f77bfa verified
raw
history blame contribute delete
34.5 kB
 <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ника - Офисная техника и ПО для камчатских организаций</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#0056B3',
50: '#E6F3FF',
100: '#CCE7FF',
200: '#99D0FF',
300: '#66B8FF',
400: '#33A1FF',
500: '#0056B3',
600: '#004494',
700: '#003375',
800: '#002255',
900: '#001137',
},
secondary: {
DEFAULT: '#C41230',
50: '#FEE8EB',
100: '#FDD1D7',
200: '#FBA3AF',
300: '#F87585',
400: '#F54760',
500: '#C41230',
600: '#9E0E26',
700: '#780A1C',
800: '#520713',
900: '#2C0309',
}
},
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.6s ease-out',
'bounce-soft': 'bounceSoft 2s infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
bounceSoft: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #0056B3 0%, #002255 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-overlay {
background: linear-gradient(135deg, rgba(0, 86, 179, 0.9) 0%, rgba(0, 34, 85, 0.9) 100%);
}
.card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 86, 179, 0.2);
}
.vendor-logo {
transition: all 0.3s ease;
filter: grayscale(100%);
opacity: 0.7;
}
.vendor-logo:hover {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.1);
}
.scroll-smooth {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-gray-50 scroll-smooth">
<!-- Header Navigation -->
<header class="bg-white shadow-lg sticky top-0 z-50 border-b-2 border-primary-500">
<nav class="container mx-auto px-4 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
<i data-feather="cpu" class="w-6 h-6 text-white"></i>
</div>
<h1 class="text-2xl font-bold text-primary-500">Ника</h1>
</div>
<!-- Desktop Menu -->
<div class="hidden lg:flex items-center space-x-8">
<a href="#home" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Главная</a>
<a href="#vendors" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Вендоры</a>
<a href="#price" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Прайс-лист</a>
<a href="#delivery" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Доставка</a>
<a href="#contacts" class="text-gray-700 hover:text-primary-500 transition-colors font-medium border-b-2 border-transparent hover:border-primary-500 pb-1">Контакты</a>
<button class="bg-primary-500 text-white px-6 py-2 rounded-full hover:bg-primary-600 transition-all transform hover:scale-105 shadow-md">
Сделать заказ
</button>
</div>
<!-- Mobile Menu Button -->
<button id="mobileMenuBtn" class="lg:hidden">
<i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden lg:hidden pb-4 border-t border-gray-200 mt-4 pt-4">
<a href="#home" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Главная</a>
<a href="#vendors" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Вендоры</a>
<a href="#price" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Прайс-лист</a>
<a href="#delivery" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Доставка</a>
<a href="#contacts" class="block py-2 text-gray-700 hover:text-primary-500 hover:bg-primary-50 px-2 rounded">Контакты</a>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="relative overflow-hidden">
<div class="absolute inset-0">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/03header_slider_photo.jpg" alt="Доставка" class="w-full h-full object-cover">
<div class="hero-overlay absolute inset-0"></div>
</div>
<div class="relative container mx-auto px-4 lg:px-8 py-24 lg:py-32">
<div class="max-w-3xl mx-auto text-center text-white">
<h2 class="text-4xl lg:text-6xl font-bold mb-6 animate-fade-in">
Офисная техника и ПО для камчатских организаций
</h2>
<p class="text-xl lg:text-2xl mb-8 animate-slide-up">
Надежные решения для вашего бизнеса с 2010 года
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-primary-500 text-white px-8 py-3 rounded font-semibold hover:bg-primary-600 transition-all transform hover:scale-105 shadow-lg">
Каталог продукции
</button>
<button class="bg-white text-primary-500 px-8 py-3 rounded font-semibold hover:bg-primary-50 hover:text-primary-600 transition-all shadow-lg">
Консультация
</button>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 lg:py-24">
<div class="container mx-auto px-4 lg:px-8">
<div class="grid md:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="truck" class="w-8 h-8 text-primary-500"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-4">ДОСТАВКА</h3>
<p class="text-gray-600 mb-4">по всему Камчатскому краю</p>
<p class="text-primary-500 font-semibold">в самые минимальные сроки</p>
</div>
<!-- Feature 2 -->
<div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="package" class="w-8 h-8 text-primary-500"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-4">ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ</h3>
<p class="text-gray-600 mb-4">для офисных компьютеров</p>
<p class="text-primary-500 font-semibold">под любые задачи</p>
</div>
<!-- Feature 3 -->
<div class="bg-white rounded-2xl shadow-xl p-8 card-hover">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-6">
<i data-feather="monitor" class="w-8 h-8 text-primary-500"></i>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-4">ОФИСНАЯ ТЕХНИКА</h3>
<p class="text-gray-600 mb-4">лучших мировых производителей</p>
<p class="text-primary-500 font-semibold">по минимальным ценам</p>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="py-16 lg:py-24 bg-white">
<div class="container mx-auto px-4 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1 animate-slide-up">
<h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-6">
О компании <span class="gradient-text">ООО "Ника"</span>
</h2>
<p class="text-gray-600 mb-6 leading-relaxed">
Компания ООО "Ника" была образована в 2010 году. Основным видом деятельности являются оптовая торговля офисным оборудованием, в том числе компьютерное и периферийное оборудование, комплектующие, расходные материалы для офисной техники и программное обеспечение для нужд предприятий и организаций Камчатского края.
</p>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center space-x-3">
<i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i>
<span class="text-gray-700">10+ лет на рынке</span>
</div>
<div class="flex items-center space-x-3">
<i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i>
<span class="text-gray-700">1000+ клиентов</span>
</div>
<div class="flex items-center space-x-3">
<i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i>
<span class="text-gray-700">Официальный дилер</span>
</div>
<div class="flex items-center space-x-3">
<i data-feather="check-circle" class="w-5 h-5 text-primary-500"></i>
<span class="text-gray-700">Гарантия качества</span>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<img src="http://nika-kamchatka.ru/upload/medialibrary/f6e/f6e1e2da7771657f325c3a1f93f97dc3.png" alt="Оборудование" class="rounded-2xl shadow-2xl w-full">
</div>
</div>
</div>
</section>
<!-- Advantages Section -->
<section class="py-16 lg:py-24 bg-gray-50">
<div class="container mx-auto px-4 lg:px-8">
<h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12">
Наши преимущества
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="layers" class="w-6 h-6 text-primary-500"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Широкий</h3>
<p class="text-primary-500 font-semibold">ассортимент</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="trending-down" class="w-6 h-6 text-primary-500"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Минимальные</h3>
<p class="text-primary-500 font-semibold">цены</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="users" class="w-6 h-6 text-primary-500"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Квалифицированный</h3>
<p class="text-primary-500 font-semibold">персонал</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="award" class="w-6 h-6 text-primary-500"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Качественное</h3>
<p class="text-primary-500 font-semibold">обслуживание</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="map-pin" class="w-6 h-6 text-primary-500"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Доставка по</h3>
<p class="text-primary-500 font-semibold">Камчатскому краю</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="zap" class="w-6 h-6 text-primary-500"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Выполнение</h3>
<p class="text-primary-500 font-semibold">нестандартных заказов</p>
</div>
<div class="bg-white rounded-xl p-6 text-center card-hover">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-feather="shield" class="w-6 h-6 text-primary-500"></i>
</div>
<h3 class="font-bold text-gray-800 mb-2">Гарантия</h3>
<p class="text-primary-500 font-semibold">производителей</p>
</div>
</div>
</div>
</section>
<!-- Vendors Section -->
<section id="vendors" class="py-16 lg:py-24 bg-white">
<div class="container mx-auto px-4 lg:px-8">
<h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12">
Наши партнеры
</h2>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
<a href="https://www.apc.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_apc.jpg" alt="APC" class="h-12 object-contain">
</a>
<a href="https://www8.hp.com/ru/ru/home.html" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_hp.jpg" alt="HP" class="h-12 object-contain">
</a>
<a href="https://iru.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_iru.jpg" alt="IRU" class="h-12 object-contain">
</a>
<a href="https://www.xerox.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_xerox.jpg" alt="Xerox" class="h-12 object-contain">
</a>
<a href="https://www.brother.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_brother.jpg" alt="Brother" class="h-12 object-contain">
</a>
<a href="https://russia.kyocera.com/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_kyocera.jpg" alt="Kyocera" class="h-12 object-contain">
</a>
<a href="https://www.kaspersky.ru/" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_kaspersky.jpg" alt="Kaspersky" class="h-12 object-contain">
</a>
<a href="https://www.microsoft.com/ru-ru" target="_blank" class="flex items-center justify-center p-4 bg-gray-50 rounded-lg vendor-logo">
<img src="http://nika-kamchatka.ru/bitrix/templates/pkgb/images/banner_microsoft.jpg" alt="Microsoft" class="h-12 object-contain">
</a>
</div>
</div>
</section>
<!-- Order Form Section -->
<section class="py-16 lg:py-24 bg-gray-50">
<div class="container mx-auto px-4 lg:px-8">
<div class="max-w-2xl mx-auto">
<h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12">
Сделать заказ
</h2>
<form class="bg-white rounded-2xl shadow-xl p-8">
<div class="mb-6">
<label class="block text-gray-700 font-semibold mb-2">ФИО:</label>
<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="Введите ваше ФИО">
</div>
<div class="mb-6">
<label class="block text-gray-700 font-semibold mb-2">E-mail:</label>
<input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="example@email.com">
</div>
<div class="mb-6">
<label class="block text-gray-700 font-semibold mb-2">Телефон:</label>
<input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" placeholder="+7 (___) ___-__-__">
</div>
<div class="mb-6">
<label class="block text-gray-700 font-semibold mb-2">Комментарий к заказу:</label>
<textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary-500 transition-colors" rows="4" placeholder="Опишите ваш заказ..."></textarea>
</div>
<div class="mb-6">
<div class="flex items-center space-x-2">
<input type="checkbox" id="agree" class="w-4 h-4 text-primary-500">
<label for="agree" class="text-gray-600 text-sm">Я согласен с условиями обработки персональных данных</label>
</div>
</div>
<button type="submit" class="w-full bg-primary-500 text-white py-3 rounded-lg font-semibold hover:bg-primary-600 transition-all transform hover:scale-105">
Подтвердить заказ
</button>
</form>
</div>
</div>
</section>
<!-- Contacts Section -->
<section id="contacts" class="py-16 lg:py-24 bg-white">
<div class="container mx-auto px-4 lg:px-8">
<h2 class="text-3xl lg:text-4xl font-bold text-center text-gray-800 mb-12">
Наши реквизиты
</h2>
<div class="max-w-3xl mx-auto">
<div class="bg-gray-50 rounded-2xl p-8">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<i data-feather="map-pin" class="w-5 h-5 text-primary-500 mt-1"></i>
<div>
<p class="font-semibold text-gray-800">Адрес:</p>
<p class="text-gray-600">683023, Камчатский край, г. Петропавловск-Камчатский ул. Флотская д. 14 кв. 6</p>
</div>
</div>
<div class="flex items-start space-x-3">
<i data-feather="phone" class="w-5 h-5 text-primary-500 mt-1"></i>
<div>
<p class="font-semibold text-gray-800">Телефон:</p>
<p class="text-gray-600">+7 (909) 830-87-77</p>
<p class="text-gray-600">Факс: (415) 2-256-864</p>
</div>
</div>
<div class="flex items-start space-x-3">
<i data-feather="file-text" class="w-5 h-5 text-primary-500 mt-1"></i>
<div>
<p class="font-semibold text-gray-800">Реквизиты:</p>
<p class="text-gray-600">ИНН/КПП 4101139197/410101001</p>
<p class="text-gray-600">ОГРН 1104101003841</p>
</div>
</div>
<div class="flex items-start space-x-3">
<i data-feather="credit-card" class="w-5 h-5 text-primary-500 mt-1"></i>
<div>
<p class="font-semibold text-gray-800">Банковские реквизиты:</p>
<p class="text-gray-600">р/сч 40702810836170003423 в Северо-Восточном Банке Сбербанка России г. Магадан</p>
<p class="text-gray-600">БИК 044442607, к/сч 30101810300000000607</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-zinc-900 text-white py-12">
<div class="container mx-auto px-4 lg:px-8">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
<i data-feather="cpu" class="w-6 h-6 text-white"></i>
</div>
<h3 class="text-xl font-bold">Ника</h3>
</div>
<p class="text-gray-400">Оптовые продажи офисной и компьютерной техники для предприятий на Камчатке</p>
</div>
<div>
<h4 class="font-semibold mb-4">Меню</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-primary-500 transition-colors">Главная</a></li>
<li><a href="#vendors" class="text-gray-400 hover:text-primary-500 transition-colors">Вендоры</a></li>
<li><a href="#price" class="text-gray-400 hover:text-primary-500 transition-colors">Прайс-лист</a></li>
<li><a href="#delivery" class="text-gray-400 hover:text-primary-500 transition-colors">Доставка</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Услуги</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Офисная техника</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Программное обеспечение</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Расходные материалы</a></li>
<li><a href="#" class="text-gray-400 hover:text-primary-500 transition-colors hover:text-white border-l-2 border-transparent hover:border-primary-500 pl-2">Сервисное обслуживание</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Контакты</h4>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center space-x-2">
<i data-feather="phone" class="w-4 h-4"></i>
<span>+7 (909) 830-87-77</span>
</li>
<li class="flex items-center space-x-2">
<i data-feather="mail" class="w-4 h-4"></i>
<span>nika@example.ru</span>
</li>
<li class="flex items-center space-x-2">
<i data-feather="map-pin" class="w-4 h-4"></i>
<span>Петропавловск-Камчатский</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-zinc-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2010 - 2024 ООО "Ника" - Все права защищены</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-primary-500 text-white w-12 h-12 rounded-full shadow-lg hidden hover:bg-primary-600 transition-all transform hover:scale-110">
<i data-feather="arrow-up" class="w-6 h-6 mx-auto"></i>
</button>
<script>
// Initialize Feather Icons
feather.replace();
// Mobile Menu Toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Back to Top Button
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopBtn.classList.remove('hidden');
} else {
backToTopBtn.classList.add('hidden');
}
});
backToTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Smooth Scroll for Anchor Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
// Close mobile menu if open
mobileMenu.classList.add('hidden');
}
});
});
// Form Validation
const orderForm = document.querySelector('form');
orderForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = orderForm.querySelector('input[type="text"]').value;
const email = orderForm.querySelector('input[type="email"]').value;
const phone = orderForm.querySelector('input[type="tel"]').value;
const agree = orderForm.querySelector('#agree').checked;
if (!name || !email || !phone) {
showNotification('Пожалуйста, заполните все обязательные поля', 'error');
return;
}
if (!agree) {
showNotification('Необходимо согласие на обработку персональных данных', 'error');
return;
}
showNotification('Ваш заказ успешно отправлен! Мы свяжемся с вами в ближайшее время.', 'success');
orderForm.reset();
});
// Notification Function
function showNotification(message, type) {
const notification = document.createElement('div');
notification.className = `fixed top-20 right-4 px-6 py-4 rounded-lg shadow-lg z-50 animate-slide-up border-l-4 ${
type === 'success' ? 'bg-green-50 text-green-800 border-green-500' : 'bg-red-50 text-red-800 border-red-500'
}`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, 3000);
}
// Animate on Scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.card-hover').forEach(el => {
observer.observe(el);
});
// Phone Mask
const phoneInput = document.querySelector('input[type="tel"]');
phoneInput.addEventListener('input', (e) => {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 0) {
if (value[0] === '7') {
value = value.substring(1);
}
if (value.length <= 3) {
value = `+7 (${value}`;
} else if (value.length <= 6) {
value = `+7 (${value.substring(0, 3)}) ${value.substring(3)}`;
} else if (value.length <= 8) {
value = `+7 (${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6)}`;
} else {
value = `+7 (${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6, 8)}-${value.substring(8, 10)}`;
}
}
e.target.value = value;
});
</script>
</body>
</html>