Download index.html from Teusev/probo4: direct link, hf CLI and curl.
- Browser
- Download file 52.3 kB
-
https://huggingface.co/spaces/Teusev/probo4/resolve/main/index.html
- Command line
-
hf download hf://spaces/Teusev/probo4/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Teusev/probo4/resolve/main/index.html
52.3 kB
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ЦКУ ТЕУС - Пожарная безопасность с 2014 года</title> | |
| <meta name="description" content="Комплексные услуги по пожарной безопасности: аудит, обучение, документация, консалтинг. Работаем по всей России с 2014 года."> | |
| <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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| orange: '#FF6B00', | |
| dark: '#1A1A1A', | |
| gray: '#F5F5F5', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Google tag (gtag.js) --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date()); | |
| gtag('config', 'G-XXXXXXXXXX'); | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-overlay { | |
| background: rgba(0, 0, 0, 0.6); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-orange { | |
| transition: all 0.3s ease; | |
| } | |
| .btn-orange:hover { | |
| background-color: #e05a00; | |
| transform: translateY(-2px); | |
| } | |
| .testimonial-card { | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| } | |
| input:focus, textarea:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.3); | |
| } | |
| .nav-link:hover { | |
| color: #FF6B00; | |
| } | |
| .social-icon:hover { | |
| color: #FF6B00; | |
| transform: scale(1.1); | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Floating buttons */ | |
| .floating-btn { | |
| position: fixed; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |
| transition: all 0.3s ease; | |
| z-index: 40; | |
| } | |
| .floating-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .floating-btn i { | |
| font-size: 24px; | |
| color: white; | |
| } | |
| /* Carousel styles */ | |
| .carousel { | |
| display: flex; | |
| overflow-x: auto; | |
| scroll-snap-type: x mandatory; | |
| scroll-behavior: smooth; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| .carousel::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .carousel-item { | |
| flex: 0 0 100%; | |
| scroll-snap-align: start; | |
| transition: transform 0.5s ease; | |
| } | |
| .carousel-dots { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 16px; | |
| } | |
| .carousel-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: #ccc; | |
| margin: 0 4px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .carousel-dot.active { | |
| background-color: #FF6B00; | |
| } | |
| /* Pulse animation */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-dark"> | |
| <!-- Floating action buttons --> | |
| <a href="tel:+79787099560" class="floating-btn bg-green-500 bottom-6 right-6 pulse"> | |
| <i class="fas fa-phone"></i> | |
| </a> | |
| <a href="https://wa.me/79787099560" class="floating-btn bg-green-600 bottom-20 right-6"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| <a href="#contact" class="floating-btn bg-orange bottom-32 right-6"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-orange text-white font-bold text-xl px-3 py-1 mr-2">ЦКУ</div> | |
| <div class="font-bold text-xl">ТЕУС</div> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#services" class="nav-link font-medium hover:text-orange transition">Услуги</a> | |
| <a href="#about" class="nav-link font-medium hover:text-orange transition">О компании</a> | |
| <a href="#remote" class="nav-link font-medium hover:text-orange transition">Дистанционно</a> | |
| <a href="#testimonials" class="nav-link font-medium hover:text-orange transition">Отзывы</a> | |
| <a href="#contact" class="nav-link font-medium hover:text-orange transition">Контакты</a> | |
| </nav> | |
| <div class="hidden md:flex items-center space-x-4"> | |
| <a href="tel:+79787099560" class="flex items-center text-dark hover:text-orange"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| <span>8-978-709-9560</span> | |
| </a> | |
| <a href="#contact" class="btn-orange bg-orange text-white font-medium py-2 px-4 rounded-md hover:shadow-md"> | |
| Написать нам | |
| </a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-dark focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg"> | |
| <a href="#services" class="block py-2 hover:text-orange">Услуги</a> | |
| <a href="#about" class="block py-2 hover:text-orange">О компании</a> | |
| <a href="#remote" class="block py-2 hover:text-orange">Дистанционно</a> | |
| <a href="#testimonials" class="block py-2 hover:text-orange">Отзывы</a> | |
| <a href="#contact" class="block py-2 hover:text-orange">Контакты</a> | |
| <div class="mt-2 pt-2 border-t border-gray-200"> | |
| <a href="tel:+79787099560" class="flex items-center py-2 text-dark hover:text-orange"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| <span>8-978-709-9560</span> | |
| </a> | |
| <a href="#contact" class="block btn-orange bg-orange text-white text-center font-medium py-2 px-4 rounded-md hover:shadow-md mt-2"> | |
| Написать нам | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-[url('https://images.unsplash.com/photo-1601134467661-3d775b999c8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center"> | |
| <div class="hero-overlay absolute inset-0"></div> | |
| <div class="container mx-auto px-4 z-10 text-center text-white animate-fade-in"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Пожарная безопасность – защита вашего бизнеса с 2014 года</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">ЦКУ ТЕУС предоставляет комплексные услуги по обеспечению пожарной безопасности. Мы проводим аудит, обучение, разрабатываем документацию и предлагаем консалтинг по современным требованиям.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-3 px-8 rounded-md text-lg hover:shadow-lg">Получить консультацию</a> | |
| <a href="tel:+79787099560" class="inline-block bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-md text-lg hover:bg-white hover:text-dark transition">Позвонить нам</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-gray"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Наши услуги</h2> | |
| <!-- Service Carousel --> | |
| <div class="relative"> | |
| <div class="carousel" id="services-carousel"> | |
| <!-- Service 1 --> | |
| <div class="carousel-item p-4"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-orange p-8 flex items-center justify-center"> | |
| <div class="text-white text-center"> | |
| <i class="fas fa-fire-extinguisher text-6xl mb-4"></i> | |
| <h3 class="text-2xl font-bold">Пожарный аудит и оценка рисков</h3> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <p class="text-lg mb-6">Комплексная проверка объектов на соответствие требованиям пожарной безопасности, выявление потенциальных угроз и рекомендации по их устранению.</p> | |
| <ul class="list-disc pl-5 mb-6 space-y-2"> | |
| <li>Полный анализ объекта</li> | |
| <li>Выявление нарушений</li> | |
| <li>Рекомендации по устранению</li> | |
| <li>Отчет с планом мероприятий</li> | |
| </ul> | |
| <div class="flex flex-wrap gap-4"> | |
| <button onclick="openModal('audit')" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Подробнее</button> | |
| <a href="#contact" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Заказать</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="carousel-item p-4"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-orange p-8 flex items-center justify-center"> | |
| <div class="text-white text-center"> | |
| <i class="fas fa-user-graduate text-6xl mb-4"></i> | |
| <h3 class="text-2xl font-bold">Обучение и инструктаж персонала</h3> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <p class="text-lg mb-6">Проведение тренингов, семинаров и инструктажей по пожарной безопасности для сотрудников, адаптированных под специфику вашего бизнеса.</p> | |
| <ul class="list-disc pl-5 mb-6 space-y-2"> | |
| <li>Программы для всех уровней</li> | |
| <li>Практические тренировки</li> | |
| <li>Работа с огнетушителями</li> | |
| <li>Удостоверения по окончании</li> | |
| </ul> | |
| <div class="flex flex-wrap gap-4"> | |
| <button onclick="openModal('training')" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Подробнее</button> | |
| <a href="#contact" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Заказать</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="carousel-item p-4"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-orange p-8 flex items-center justify-center"> | |
| <div class="text-white text-center"> | |
| <i class="fas fa-file-alt text-6xl mb-4"></i> | |
| <h3 class="text-2xl font-bold">Разработка пожарной документации</h3> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <p class="text-lg mb-6">Составление, обновление и внедрение внутренней документации, инструкций и регламентов в соответствии с законодательными нормами.</p> | |
| <ul class="list-disc pl-5 mb-6 space-y-2"> | |
| <li>Приказы и инструкции</li> | |
| <li>Планы эвакуации</li> | |
| <li>Журналы учета</li> | |
| <li>Декларации</li> | |
| </ul> | |
| <div class="flex flex-wrap gap-4"> | |
| <button onclick="openModal('docs')" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Подробнее</button> | |
| <a href="#contact" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Заказать</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="carousel-item p-4"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-orange p-8 flex items-center justify-center"> | |
| <div class="text-white text-center"> | |
| <i class="fas fa-headset text-6xl mb-4"></i> | |
| <h3 class="text-2xl font-bold">Консалтинг по пожарной безопасности</h3> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <p class="text-lg mb-6">Профессиональное консультирование, помощь при проверках и аудитах, регулярное обновление рекомендаций с учётом новейших стандартов.</p> | |
| <ul class="list-disc pl-5 mb-6 space-y-2"> | |
| <li>Сопровождение проверок</li> | |
| <li>Консультации по законодательству</li> | |
| <li>Рекомендации по оборудованию</li> | |
| <li>Анализ проектной документации</li> | |
| </ul> | |
| <div class="flex flex-wrap gap-4"> | |
| <button onclick="openModal('consulting')" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Подробнее</button> | |
| <a href="#contact" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Заказать</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carousel Navigation --> | |
| <div class="carousel-dots" id="services-dots"> | |
| <div class="carousel-dot active" data-index="0"></div> | |
| <div class="carousel-dot" data-index="1"></div> | |
| <div class="carousel-dot" data-index="2"></div> | |
| <div class="carousel-dot" data-index="3"></div> | |
| </div> | |
| <button class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md z-10 focus:outline-none" id="prev-service"> | |
| <i class="fas fa-chevron-left text-orange text-xl"></i> | |
| </button> | |
| <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md z-10 focus:outline-none" id="next-service"> | |
| <i class="fas fa-chevron-right text-orange text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">О компании</h2> | |
| <p class="text-lg mb-6">Работаем с 2014 года и уже более 10 лет помогаем предприятиям обеспечить пожарную безопасность. Наши эксперты гарантируют высокий уровень сервиса и индивидуальный подход.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-orange text-xl mr-3 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Профессионализм и опыт</h4> | |
| <p class="text-gray-600">Команда сертифицированных специалистов с многолетним опытом работы.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-orange text-xl mr-3 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Комплексное обслуживание</h4> | |
| <p class="text-gray-600">Полный цикл услуг по пожарной безопасности от одного подрядчика.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-orange text-xl mr-3 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Индивидуальное сопровождение</h4> | |
| <p class="text-gray-600">Персональный менеджер для каждого клиента и гибкие условия сотрудничества.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-orange text-xl mr-3 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Современные стандарты</h4> | |
| <p class="text-gray-600">Все услуги соответствуют актуальным требованиям законодательства.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex space-x-4"> | |
| <a href="#contact" class="btn-orange bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg">Связаться с нами</a> | |
| <a href="tel:+79787099560" class="btn-orange border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1581093458171-4eac0cc0069c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="О компании ЦКУ ТЕУС" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Remote Services Section --> | |
| <section id="remote" class="py-16 bg-orange text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-8">Услуги доступны дистанционно по всей России</h2> | |
| <p class="text-xl text-center max-w-3xl mx-auto mb-12">ЦКУ ТЕУС предоставляет полный комплекс услуг в области пожарной безопасности в дистанционном формате. Вы можете получить любую услугу, не выходя из офиса – мы предлагаем шаблоны и электронные формы документов, а также общение с экспертами в электронном виде.</p> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-8"> | |
| <a href="#contact" class="btn-orange inline-block bg-white text-orange font-bold py-3 px-8 rounded-md text-lg hover:shadow-lg text-center">Получить дистанционную консультацию</a> | |
| <a href="#contact" class="btn-orange inline-block bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-md text-lg hover:bg-white hover:text-orange transition text-center">Заказать электронные формы</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-16 bg-gray"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Отзывы наших клиентов</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-orange text-white flex items-center justify-center text-xl font-bold mr-4">ТК</div> | |
| <div> | |
| <h4 class="font-bold">Торговая компания "Восток"</h4> | |
| <div class="text-orange"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Благодаря аудиту от ЦКУ ТЕУС мы выявили несколько критических нарушений пожарной безопасности и оперативно их устранили. Теперь наши склады полностью соответствуют требованиям."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-orange text-white flex items-center justify-center text-xl font-bold mr-4">ОК</div> | |
| <div> | |
| <h4 class="font-bold">Отель "Крымский"</h4> | |
| <div class="text-orange"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Обучение персонала прошло на высшем уровне. Инструкторы ЦКУ ТЕУС доступно объяснили все нюансы, провели практические занятия. Теперь наш персонал готов к любым чрезвычайным ситуациям."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-orange text-white flex items-center justify-center text-xl font-bold mr-4">ПК</div> | |
| <div> | |
| <h4 class="font-bold">Производственный комплекс "Севастополь"</h4> | |
| <div class="text-orange"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Разработанная документация полностью соответствует требованиям МЧС. Особенно ценно, что специалисты ЦКУ ТЕУС сопровождали нас во время проверки и помогли ответить на все вопросы инспекторов."</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-3 px-8 rounded-md text-lg hover:shadow-lg">Оставить свой отзыв</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Контакты</h2> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-orange text-xl mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Адрес</h4> | |
| <p class="text-gray-600">г. Севастополь, ул. Молодых Строителей, д.2, оф. 24</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-orange text-xl mr-4 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Телефон</h4> | |
| <p class="text-gray-600">8-978-709-9560</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-orange text-xl mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Email</h4> | |
| <p class="text-gray-600">zcku@teus-company.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-orange text-xl mr-4 mt-1"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Режим работы</h4> | |
| <p class="text-gray-600">Пн-Пт: 9:00 - 18:00<br>Сб-Вс: выходной</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold text-lg mb-4">Мы в социальных сетях</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-icon text-gray-600 text-2xl transition"><i class="fab fa-vk"></i></a> | |
| <a href="#" class="social-icon text-gray-600 text-2xl transition"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="social-icon text-gray-600 text-2xl transition"><i class="fab fa-whatsapp"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-gray-100 p-6 rounded-lg"> | |
| <h4 class="font-bold text-lg mb-2">Срочная помощь</h4> | |
| <p class="text-gray-600 mb-4">Если вам нужна срочная консультация по вопросам пожарной безопасности, звоните прямо сейчас:</p> | |
| <a href="tel:+79787099560" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg w-full text-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> Срочный звонок | |
| </a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray p-8 rounded-lg shadow-md"> | |
| <h3 class="text-2xl font-bold mb-2">Получите бесплатную консультацию</h3> | |
| <p class="text-gray-600 mb-6">Оставьте заявку и наш специалист свяжется с вами в течение 1 часа</p> | |
| <form id="contact-form" class="space-y-4"> | |
| <div> | |
| <input type="text" placeholder="Ваше имя" class="w-full px-4 py-3 rounded border border-gray-300 focus:border-orange"> | |
| </div> | |
| <div> | |
| <input type="tel" placeholder="Телефон" class="w-full px-4 py-3 rounded border border-gray-300 focus:border-orange"> | |
| </div> | |
| <div> | |
| <input type="email" placeholder="Email" class="w-full px-4 py-3 rounded border border-gray-300 focus:border-orange"> | |
| </div> | |
| <div> | |
| <textarea placeholder="Сообщение" rows="4" class="w-full px-4 py-3 rounded border border-gray-300 focus:border-orange"></textarea> | |
| </div> | |
| <button type="submit" class="btn-orange w-full bg-orange text-white font-bold py-3 px-6 rounded hover:shadow-lg">Отправить заявку</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center"> | |
| <div class="bg-orange text-white font-bold text-xl px-3 py-1 mr-2">ЦКУ</div> | |
| <div class="font-bold text-xl">ТЕУС</div> | |
| </div> | |
| <p class="text-gray-400 mt-2">© 2014-2025. Эксперты в области пожарной безопасности.</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-center md:text-left"> | |
| <a href="#services" class="hover:text-orange transition">Услуги</a> | |
| <a href="#about" class="hover:text-orange transition">О компании</a> | |
| <a href="#remote" class="hover:text-orange transition">Дистанционно</a> | |
| <a href="#testimonials" class="hover:text-orange transition">Отзывы</a> | |
| <a href="#contact" class="hover:text-orange transition">Контакты</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-400"> | |
| <p>Все права защищены. Любое копирование материалов запрещено.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Service Modals --> | |
| <div id="audit-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-8 max-w-2xl mx-4 relative"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-orange"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| <h3 class="text-2xl font-bold mb-4">Пожарный аудит и оценка рисков</h3> | |
| <p class="mb-4">Наши специалисты проводят комплексную проверку вашего объекта на соответствие требованиям пожарной безопасности. В процессе аудита мы:</p> | |
| <ul class="list-disc pl-5 mb-6 space-y-2"> | |
| <li>Выявляем потенциальные угрозы и нарушения</li> | |
| <li>Оцениваем риски возникновения пожароопасных ситуаций</li> | |
| <li>Проверяем состояние противопожарных систем и оборудования</li> | |
| <li>Анализируем документацию на соответствие законодательству</li> | |
| <li>Даем рекомендации по устранению выявленных недостатков</li> | |
| </ul> | |
| <p class="mb-6">По результатам аудита вы получаете подробный отчет с перечнем нарушений и рекомендациями по их устранению, а также план мероприятий по повышению уровня пожарной безопасности.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg" onclick="closeModal()">Заказать аудит</a> | |
| <a href="tel:+79787099560" class="btn-orange inline-block border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="training-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-8 max-w-2xl mx-4 relative"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-orange"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| <h3 class="text-2xl font-bold mb-4">Обучение и инструктаж персонала</h3> | |
| <p class="mb-4">Мы предлагаем полный спектр обучающих программ по пожарной безопасности, адаптированных под специфику вашего бизнеса:</p> | |
| <ul class="list-disc pl-5 mb-6 space-y-2"> | |
| <li>Обучение ответственных за пожарную безопасность</li> | |
| <li>Инструктажи для всех категорий сотрудников</li> | |
| <li>Практические тренировки по эвакуации</li> | |
| <li>Семинары по работе с огнетушителями</li> | |
| <li>Обучение действиям при пожаре</li> | |
| </ul> | |
| <p class="mb-6">Все программы разработаны с учетом требований законодательства и включают как теоретическую, так и практическую части. По окончании обучения выдается удостоверение установленного образца.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg" onclick="closeModal()">Заказать обучение</a> | |
| <a href="tel:+79787099560" class="btn-orange inline-block border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="docs-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-8 max-w-2xl mx-4 relative"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-orange"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| <h3 class="text-2xl font-bold mb-4">Разработка пожарной документации</h3> | |
| <p class="mb-4">Наши специалисты разработают для вас полный комплект документов по пожарной безопасности, соответствующий всем требованиям законодательства:</p> | |
| <ul class="list-disc pl-5 mb-6 space-y-2"> | |
| <li>Приказы и инструкции по пожарной безопасности</li> | |
| <li>Планы эвакуации при пожаре</li> | |
| <li>Журналы учета и проверок</li> | |
| <li>Декларации пожарной безопасности</li> | |
| <li>Программы производственного контроля</li> | |
| <li>Регламенты работы противопожарных систем</li> | |
| </ul> | |
| <p class="mb-6">Мы не только разработаем документы, но и поможем внедрить их в работу вашей организации, проведем обучение ответственных лиц и обеспечим сопровождение при проверках контролирующих органов.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg" onclick="closeModal()">Заказать документы</a> | |
| <a href="tel:+79787099560" class="btn-orange inline-block border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="consulting-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-8 max-w-2xl mx-4 relative"> | |
| <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-orange"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| <h3 class="text-2xl font-bold mb-4">Консалтинг по пожарной безопасности</h3> | |
| <p class="mb-4">Наши эксперты предоставляют профессиональные консультации по всем вопросам пожарной безопасности:</p> | |
| <ul class="list-disc pl-5 mb-6 space-y-2"> | |
| <li>Сопровождение при проверках МЧС</li> | |
| <li>Консультации по соблюдению требований законодательства</li> | |
| <li>Рекомендации по выбору и монтажу противопожарного оборудования</li> | |
| <li>Помощь в разработке мероприятий по пожарной безопасности</li> | |
| <li>Анализ проектной документации на соответствие нормам</li> | |
| <li>Экспертиза заключений и предписаний контролирующих органов</li> | |
| </ul> | |
| <p class="mb-6">Мы предлагаем как разовые консультации, так и комплексное сопровождение вашего бизнеса в области пожарной безопасности, включая регулярные обновления рекомендаций с учетом изменений законодательства.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#contact" class="btn-orange inline-block bg-orange text-white font-bold py-2 px-6 rounded hover:shadow-lg" onclick="closeModal()">Заказать консультацию</a> | |
| <a href="tel:+79787099560" class="btn-orange inline-block border border-orange text-orange font-bold py-2 px-6 rounded hover:bg-orange hover:text-white transition">Позвонить</a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| }); | |
| // Modal functions | |
| function openModal(service) { | |
| document.getElementById(service + '-modal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeModal() { | |
| document.querySelectorAll('[id$="-modal"]').forEach(modal => { | |
| modal.classList.add('hidden'); | |
| }); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Close modal when clicking outside | |
| document.querySelectorAll('[id$="-modal"]').forEach(modal => { | |
| modal.addEventListener('click', function(e) { | |
| if (e.target === modal) { | |
| closeModal(); | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Here you would normally send the form data to your server | |
| alert('Спасибо за вашу заявку! Наш специалист свяжется с вами в ближайшее время.'); | |
| this.reset(); | |
| // Track conversion in Google Analytics | |
| gtag('event', 'conversion', { | |
| 'send_to': 'G-XXXXXXXXXX/conversion', | |
| 'value': 1.0, | |
| 'currency': 'RUB' | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Carousel functionality | |
| const carousel = document.getElementById('services-carousel'); | |
| const dots = document.querySelectorAll('.carousel-dot'); | |
| const prevBtn = document.getElementById('prev-service'); | |
| const nextBtn = document.getElementById('next-service'); | |
| let currentIndex = 0; | |
| function updateCarousel() { | |
| carousel.scrollTo({ | |
| left: currentIndex * carousel.offsetWidth, | |
| behavior: 'smooth' | |
| }); | |
| dots.forEach((dot, index) => { | |
| if (index === currentIndex) { | |
| dot.classList.add('active'); | |
| } else { | |
| dot.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| prevBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex > 0) ? currentIndex - 1 : dots.length - 1; | |
| updateCarousel(); | |
| }); | |
| nextBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex < dots.length - 1) ? currentIndex + 1 : 0; | |
| updateCarousel(); | |
| }); | |
| dots.forEach(dot => { | |
| dot.addEventListener('click', () => { | |
| currentIndex = parseInt(dot.getAttribute('data-index')); | |
| updateCarousel(); | |
| }); | |
| }); | |
| // Auto-rotate carousel | |
| let interval = setInterval(() => { | |
| currentIndex = (currentIndex < dots.length - 1) ? currentIndex + 1 : 0; | |
| updateCarousel(); | |
| }, 5000); | |
| // Pause on hover | |
| carousel.addEventListener('mouseenter', () => { | |
| clearInterval(interval); | |
| }); | |
| carousel.addEventListener('mouseleave', () => { | |
| interval = setInterval(() => { | |
| currentIndex = (currentIndex < dots.length - 1) ? currentIndex + 1 : 0; | |
| updateCarousel(); | |
| }, 5000); | |
| }); | |
| </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=Teusev/probo4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |