Download index.html from unzerror/undefined: direct link, hf CLI and curl.
- Browser
- Download file 34.5 kB
-
https://huggingface.co/spaces/unzerror/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/unzerror/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/unzerror/undefined/resolve/main/index.html
34.5 kB
| <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> | |