| | <!DOCTYPE html> |
| | <html lang="ru"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>VitoPRO - AI творческая студия</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> |
| | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Montserrat', sans-serif; |
| | background-color: #0f172a; |
| | color: #f8fafc; |
| | scroll-behavior: smooth; |
| | } |
| | |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
| | } |
| | |
| | .service-card { |
| | transition: all 0.3s ease; |
| | background: rgba(30, 41, 59, 0.7); |
| | backdrop-filter: blur(10px); |
| | border: 1px solid #334155; |
| | } |
| | |
| | .service-card:hover { |
| | transform: translateY(-10px); |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | border-color: #4f46e5; |
| | } |
| | |
| | .portfolio-item { |
| | transition: all 0.3s ease; |
| | overflow: hidden; |
| | } |
| | |
| | .portfolio-item:hover { |
| | transform: scale(1.03); |
| | } |
| | |
| | .portfolio-overlay { |
| | background: rgba(15, 23, 42, 0.8); |
| | opacity: 0; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .portfolio-item:hover .portfolio-overlay { |
| | opacity: 1; |
| | } |
| | |
| | .modal { |
| | transition: all 0.3s ease; |
| | opacity: 0; |
| | visibility: hidden; |
| | } |
| | |
| | .modal.active { |
| | opacity: 1; |
| | visibility: visible; |
| | } |
| | |
| | .input-field { |
| | background: rgba(30, 41, 59, 0.7); |
| | border: 1px solid #334155; |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .input-field:focus { |
| | border-color: #4f46e5; |
| | outline: none; |
| | } |
| | |
| | .btn-primary { |
| | background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .btn-primary:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3); |
| | } |
| | |
| | .social-icon { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .social-icon:hover { |
| | transform: translateY(-3px); |
| | } |
| | |
| | .nav-link { |
| | position: relative; |
| | } |
| | |
| | .nav-link::after { |
| | content: ''; |
| | position: absolute; |
| | width: 0; |
| | height: 2px; |
| | bottom: -2px; |
| | left: 0; |
| | background-color: #4f46e5; |
| | transition: width 0.3s ease; |
| | } |
| | |
| | .nav-link:hover::after { |
| | width: 100%; |
| | } |
| | |
| | |
| | .filter-btn { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .filter-btn.active { |
| | background-color: #4f46e5; |
| | color: white; |
| | } |
| | |
| | |
| | .portfolio-modal-content { |
| | max-height: 80vh; |
| | overflow-y: auto; |
| | } |
| | |
| | .portfolio-modal-img { |
| | max-height: 60vh; |
| | object-fit: contain; |
| | } |
| | |
| | |
| | .tech-bubble { |
| | position: absolute; |
| | border-radius: 50%; |
| | filter: blur(40px); |
| | opacity: 0.15; |
| | z-index: 0; |
| | } |
| | |
| | |
| | .glow-effect { |
| | position: relative; |
| | } |
| | |
| | .glow-effect::after { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | background: radial-gradient(circle at center, rgba(79, 70, 229, 0.3) 0%, transparent 70%); |
| | z-index: -1; |
| | opacity: 0; |
| | transition: opacity 0.3s ease; |
| | } |
| | |
| | .glow-effect:hover::after { |
| | opacity: 1; |
| | } |
| | |
| | |
| | .gradient-border { |
| | position: relative; |
| | border-radius: 1rem; |
| | } |
| | |
| | .gradient-border::before { |
| | content: ''; |
| | position: absolute; |
| | top: -2px; |
| | left: -2px; |
| | right: -2px; |
| | bottom: -2px; |
| | background: linear-gradient(45deg, #4f46e5, #7c3aed, #9333ea); |
| | border-radius: 1rem; |
| | z-index: -1; |
| | opacity: 0; |
| | transition: opacity 0.3s ease; |
| | } |
| | |
| | .gradient-border:hover::before { |
| | opacity: 1; |
| | } |
| | </style> |
| | </head> |
| | <body class="gradient-bg"> |
| | |
| | <div class="tech-bubble w-64 h-64 bg-purple-600 top-20 left-10"></div> |
| | <div class="tech-bubble w-80 h-80 bg-indigo-600 bottom-40 right-20"></div> |
| | <div class="tech-bubble w-40 h-40 bg-blue-600 top-1/3 right-1/4"></div> |
| |
|
| | |
| | <header class="py-6 px-4 sm:px-6 lg:px-8 relative z-10"> |
| | <div class="container mx-auto flex justify-between items-center"> |
| | <div class="flex items-center"> |
| | <div class="w-12 h-12 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center mr-3 glow-effect"> |
| | <i class="fas fa-robot text-white text-xl"></i> |
| | </div> |
| | <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400"> |
| | Vito<span class="text-white">PRO</span> |
| | </h1> |
| | </div> |
| | <nav class="hidden md:flex space-x-8"> |
| | <a href="#services" class="nav-link text-gray-300 hover:text-white">Услуги</a> |
| | <a href="#portfolio" class="nav-link text-gray-300 hover:text-white">Портфолио</a> |
| | <a href="#about" class="nav-link text-gray-300 hover:text-white">О нас</a> |
| | <a href="#contacts" class="nav-link text-gray-300 hover:text-white">Контакты</a> |
| | </nav> |
| | <button onclick="openModal()" class="btn-primary px-6 py-2 rounded-full font-semibold text-white glow-effect"> |
| | Заказать |
| | </button> |
| | <button class="md:hidden text-gray-300 hover:text-white"> |
| | <i class="fas fa-bars text-2xl"></i> |
| | </button> |
| | </div> |
| | </header> |
| |
|
| | |
| | <section class="py-20 px-4 sm:px-6 lg:px-8 relative"> |
| | <div class="container mx-auto flex flex-col md:flex-row items-center relative z-10"> |
| | <div class="md:w-1/2 mb-12 md:mb-0"> |
| | <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight"> |
| | <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">AI</span> творческая студия |
| | </h2> |
| | <p class="text-xl text-gray-300 mb-8 max-w-lg"> |
| | Профессиональный монтаж фото, аудио и видео. Создание сайтов, чат-ботов и уникального контента с использованием искусственного интеллекта. |
| | </p> |
| | <div class="flex space-x-4"> |
| | <button onclick="openModal()" class="btn-primary px-8 py-3 rounded-full font-semibold text-white glow-effect"> |
| | Сделать заказ |
| | </button> |
| | <a href="#portfolio" class="px-8 py-3 rounded-full font-semibold text-white border border-indigo-500 hover:bg-indigo-900/30 transition gradient-border"> |
| | Портфолио |
| | </a> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2 relative"> |
| | <div class="relative"> |
| | <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-600/20 blur-3xl"></div> |
| | <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-indigo-600/20 blur-3xl"></div> |
| | <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" |
| | alt="AI Creative Studio" |
| | class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto border border-indigo-500/30 gradient-border"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="services" class="py-20 px-4 sm:px-6 lg:px-8 relative"> |
| | <div class="container mx-auto relative z-10"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Наши услуги</h2> |
| | <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| | Мы предлагаем полный спектр цифровых услуг с использованием современных технологий и искусственного интеллекта |
| | </p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="service-card rounded-2xl p-8 relative gradient-border"> |
| | <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect"> |
| | <i class="fas fa-camera-retro text-2xl"></i> |
| | </div> |
| | <h3 class="text-2xl font-semibold mb-4">Монтаж фото</h3> |
| | <p class="text-gray-300 mb-6"> |
| | Профессиональная обработка фотографий: ретушь, цветокоррекция, коллажи, создание фотореалистичных изображений с помощью AI. |
| | </p> |
| | <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Заказать <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | <div class="absolute bottom-0 right-0 opacity-10"> |
| | <img src="https://cdn-icons-png.flaticon.com/512/2965/2965879.png" alt="Photo editing icon" class="w-24 h-24"> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="service-card rounded-2xl p-8 relative gradient-border"> |
| | <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect"> |
| | <i class="fas fa-music text-2xl"></i> |
| | </div> |
| | <h3 class="text-2xl font-semibold mb-4">Монтаж аудио</h3> |
| | <p class="text-gray-300 mb-6"> |
| | Обработка звука: шумоподавление, мастеринг, создание музыкальных композиций с помощью AI, озвучка текстов нейросетями. |
| | </p> |
| | <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Заказать <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | <div class="absolute bottom-0 right-0 opacity-10"> |
| | <img src="https://cdn-icons-png.flaticon.com/512/3659/3659899.png" alt="Audio editing icon" class="w-24 h-24"> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="service-card rounded-2xl p-8 relative gradient-border"> |
| | <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect"> |
| | <i class="fas fa-video text-2xl"></i> |
| | </div> |
| | <h3 class="text-2xl font-semibold mb-4">Монтаж видео</h3> |
| | <p class="text-gray-300 mb-6"> |
| | Профессиональный видеомонтаж: цветокоррекция, стабилизация, создание анимации и визуальных эффектов с использованием AI технологий. |
| | </p> |
| | <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Заказать <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | <div class="absolute bottom-0 right-0 opacity-10"> |
| | <img src="https://cdn-icons-png.flaticon.com/512/3176/3176272.png" alt="Video editing icon" class="w-24 h-24"> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="service-card rounded-2xl p-8 relative gradient-border"> |
| | <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect"> |
| | <i class="fas fa-globe text-2xl"></i> |
| | </div> |
| | <h3 class="text-2xl font-semibold mb-4">Сайты и чат-боты</h3> |
| | <p class="text-gray-300 mb-6"> |
| | Создание современных веб-сайтов и интеллектуальных чат-ботов с интеграцией AI для автоматизации коммуникации с клиентами. |
| | </p> |
| | <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Заказать <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | <div class="absolute bottom-0 right-0 opacity-10"> |
| | <img src="https://cdn-icons-png.flaticon.com/512/2282/2282188.png" alt="Web development icon" class="w-24 h-24"> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="service-card rounded-2xl p-8 relative gradient-border"> |
| | <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect"> |
| | <i class="fas fa-paint-brush text-2xl"></i> |
| | </div> |
| | <h3 class="text-2xl font-semibold mb-4">Дизайн</h3> |
| | <p class="text-gray-300 mb-6"> |
| | Разработка уникального дизайна: логотипы, фирменный стиль, UI/UX дизайн, создание графики с помощью нейросетей. |
| | </p> |
| | <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Заказать <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | <div class="absolute bottom-0 right-0 opacity-10"> |
| | <img src="https://cdn-icons-png.flaticon.com/512/3242/3242257.png" alt="Design icon" class="w-24 h-24"> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="service-card rounded-2xl p-8 relative gradient-border"> |
| | <div class="w-16 h-16 rounded-full bg-indigo-900/30 flex items-center justify-center mb-6 text-indigo-400 glow-effect"> |
| | <i class="fas fa-photo-film text-2xl"></i> |
| | </div> |
| | <h3 class="text-2xl font-semibold mb-4">Создание контента</h3> |
| | <p class="text-gray-300 mb-6"> |
| | Генерация уникального текстового, графического и видео контента с использованием современных AI инструментов. |
| | </p> |
| | <button onclick="openModal()" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Заказать <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | <div class="absolute bottom-0 right-0 opacity-10"> |
| | <img src="https://cdn-icons-png.flaticon.com/512/1055/1055687.png" alt="Content creation icon" class="w-24 h-24"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="portfolio" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900/50 relative"> |
| | <div class="container mx-auto relative z-10"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Наше портфолио</h2> |
| | <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| | Примеры наших работ в различных направлениях цифрового творчества |
| | </p> |
| | </div> |
| | |
| | |
| | <div class="flex flex-wrap justify-center gap-3 mb-10"> |
| | <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="all"> |
| | Все работы |
| | </button> |
| | <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="photo"> |
| | Фото монтаж |
| | </button> |
| | <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="audio"> |
| | Аудио монтаж |
| | </button> |
| | <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="video"> |
| | Видео монтаж |
| | </button> |
| | <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="website"> |
| | Сайты и боты |
| | </button> |
| | <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="design"> |
| | Дизайн |
| | </button> |
| | <button class="filter-btn px-4 py-2 rounded-full bg-slate-800 text-gray-300 hover:bg-indigo-600 hover:text-white" data-filter="content"> |
| | Контент |
| | </button> |
| | </div> |
| | |
| | |
| | <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="portfolioGrid"> |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="photo"> |
| | <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" |
| | alt="Фото монтаж" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">Ретушь портрета</h3> |
| | <p class="text-gray-300 mb-4">Профессиональная обработка кожи, коррекция света и тени</p> |
| | <button onclick="openPortfolioModal('photo1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="photo"> |
| | <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" |
| | alt="Цветокоррекция" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">Цветокоррекция</h3> |
| | <p class="text-gray-300 mb-4">Создание атмосферного кадра с помощью цветовых решений</p> |
| | <button onclick="openPortfolioModal('photo2')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="audio"> |
| | <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" |
| | alt="Аудио монтаж" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">Обработка подкаста</h3> |
| | <p class="text-gray-300 mb-4">Шумоподавление и мастеринг аудиозаписи</p> |
| | <button onclick="openPortfolioModal('audio1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="video"> |
| | <img src="https://images.unsplash.com/photo-1611162616475-46b635cb6868?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" |
| | alt="Видео монтаж" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">Музыкальный клип</h3> |
| | <p class="text-gray-300 mb-4">Монтаж видео с эффектами и цветокоррекцией</p> |
| | <button onclick="openPortfolioModal('video1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="video"> |
| | <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" |
| | alt="Корпоративное видео" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">Корпоративное видео</h3> |
| | <p class="text-gray-300 mb-4">Профессиональный монтаж рекламного ролика</p> |
| | <button onclick="openPortfolioModal('video2')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="website"> |
| | <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" |
| | alt="Веб-сайт" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">Корпоративный сайт</h3> |
| | <p class="text-gray-300 mb-4">Современный дизайн и адаптивная верстка</p> |
| | <button onclick="openPortfolioModal('website1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="website"> |
| | <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" |
| | alt="Чат-бот" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">AI Чат-бот</h3> |
| | <p class="text-gray-300 mb-4">Интеллектуальный помощник для бизнеса</p> |
| | <button onclick="openPortfolioModal('website2')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="design"> |
| | <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" |
| | alt="Графический дизайн" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">Фирменный стиль</h3> |
| | <p class="text-gray-300 mb-4">Логотип и брендбук для компании</p> |
| | <button onclick="openPortfolioModal('design1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="portfolio-item rounded-2xl overflow-hidden relative gradient-border" data-category="content"> |
| | <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" |
| | alt="AI контент" |
| | class="w-full h-64 object-cover"> |
| | <div class="portfolio-overlay absolute inset-0 flex flex-col justify-end p-6"> |
| | <h3 class="text-xl font-semibold mb-2">AI иллюстрации</h3> |
| | <p class="text-gray-300 mb-4">Генерация уникальных изображений нейросетью</p> |
| | <button onclick="openPortfolioModal('content1')" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center"> |
| | Подробнее <i class="fas fa-arrow-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center mt-12"> |
| | <button onclick="openModal()" class="btn-primary px-8 py-3 rounded-full font-semibold text-white glow-effect"> |
| | Заказать проект |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 relative"> |
| | <div class="container mx-auto relative z-10"> |
| | <div class="flex flex-col lg:flex-row items-center"> |
| | <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-6">О VitoPRO</h2> |
| | <p class="text-gray-300 mb-6 text-lg"> |
| | VitoPRO - это креативная студия, специализирующаяся на цифровом творчестве с использованием искусственного интеллекта. Мы объединяем современные технологии и художественный подход для создания уникального контента. |
| | </p> |
| | <p class="text-gray-300 mb-6 text-lg"> |
| | Наша команда состоит из профессионалов в области монтажа, дизайна и программирования, которые постоянно осваивают новые AI-инструменты для повышения качества и скорости выполнения проектов. |
| | </p> |
| | <div class="flex flex-wrap gap-4"> |
| | <div class="bg-slate-800/50 px-4 py-2 rounded-full border border-indigo-500/30"> |
| | <span class="text-indigo-400 mr-2">✓</span> AI технологии |
| | </div> |
| | <div class="bg-slate-800/50 px-4 py-2 rounded-full border border-indigo-500/30"> |
| | <span class="text-indigo-400 mr-2">✓</span> Быстрое выполнение |
| | </div> |
| | <div class="bg-slate-800/50 px-4 py-2 rounded-full border border-indigo-500/30"> |
| | <span class="text-indigo-400 mr-2">✓</span> Индивидуальный подход |
| | </div> |
| | </div> |
| | </div> |
| | <div class="lg:w-1/2 relative"> |
| | <div class="relative"> |
| | <div class="absolute -top-10 -left-10 w-32 h-32 rounded-full bg-purple-600/20 blur-3xl"></div> |
| | <div class="absolute -bottom-10 -right-10 w-32 h-32 rounded-full bg-indigo-600/20 blur-3xl"></div> |
| | <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" |
| | alt="О VitoPRO" |
| | class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto border border-indigo-500/30 gradient-border"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="contacts" class="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900/50 relative"> |
| | <div class="container mx-auto relative z-10"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Свяжитесь с нами</h2> |
| | <p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
| | Готовы обсудить ваш проект или ответить на любые вопросы |
| | </p> |
| | </div> |
| | |
| | <div class="flex flex-col lg:flex-row gap-12"> |
| | <div class="lg:w-1/2"> |
| | <form id="contactForm" class="space-y-6"> |
| | <div> |
| | <label for="name" class="block text-gray-300 mb-2">Ваше имя</label> |
| | <input type="text" id="name" class="input-field w-full px-4 py-3 rounded-lg text-white"> |
| | </div> |
| | <div> |
| | <label for="email" class="block text-gray-300 mb-2">Email</label> |
| | <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-lg text-white"> |
| | </div> |
| | <div> |
| | <label for="message" class="block text-gray-300 mb-2">Сообщение</label> |
| | <textarea id="message" rows="5" class="input-field w-full px-4 py-3 rounded-lg text-white"></textarea> |
| | </div> |
| | <button type="submit" class="btn-primary w-full px-6 py-3 rounded-lg font-semibold text-white glow-effect"> |
| | Отправить сообщение |
| | </button> |
| | </form> |
| | </div> |
| | |
| | <div class="lg:w-1/2"> |
| | <div class="bg-slate-800/50 rounded-2xl p-8 h-full border border-indigo-500/30 gradient-border"> |
| | <h3 class="text-2xl font-semibold mb-6">Контактная информация</h3> |
| | |
| | <div class="space-y-6"> |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1 glow-effect"> |
| | <i class="fas fa-envelope"></i> |
| | </div> |
| | <div> |
| | <h4 class="text-gray-300 font-medium mb-1">Email</h4> |
| | <a href="mailto:vitopro63@gmail.com" class="text-indigo-400 hover:text-indigo-300">vitopro63@gmail.com</a> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1 glow-effect"> |
| | <i class="fab fa-telegram"></i> |
| | </div> |
| | <div> |
| | <h4 class="text-gray-300 font-medium mb-1">Telegram</h4> |
| | <a href="https://t.me/VitoPROai" target="_blank" class="text-indigo-400 hover:text-indigo-300">@VitoPROai</a> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400 mr-4 mt-1 glow-effect"> |
| | <i class="fab fa-youtube"></i> |
| | </div> |
| | <div> |
| | <h4 class="text-gray-300 font-medium mb-1">YouTube</h4> |
| | <a href="https://youtube.com/@user-VitoPRO" target="_blank" class="text-indigo-400 hover:text-indigo-300">@user-VitoPRO</a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-10"> |
| | <h4 class="text-gray-300 font-medium mb-4">Мы в соцсетях</h4> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-indigo-600 glow-effect"> |
| | <i class="fab fa-vk"></i> |
| | </a> |
| | <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-blue-600 glow-effect"> |
| | <i class="fab fa-facebook-f"></i> |
| | </a> |
| | <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-pink-600 glow-effect"> |
| | <i class="fab fa-instagram"></i> |
| | </a> |
| | <a href="#" class="social-icon w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-gray-300 hover:text-white hover:bg-blue-400 glow-effect"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="py-10 px-4 sm:px-6 lg:px-8 border-t border-slate-800/50 relative"> |
| | <div class="container mx-auto"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="flex items-center mb-6 md:mb-0"> |
| | <div class="w-10 h-10 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center mr-3 glow-effect"> |
| | <i class="fas fa-robot text-white"></i> |
| | </div> |
| | <h2 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400"> |
| | Vito<span class="text-white">PRO</span> |
| | </h2> |
| | </div> |
| | |
| | <div class="text-gray-400 text-sm text-center md:text-right"> |
| | <p>© 2023 VitoPRO. Все права защищены.</p> |
| | <p class="mt-1">AI творческая студия</p> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | |
| | <div id="orderModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"> |
| | <div class="bg-slate-800 rounded-2xl max-w-md w-full p-8 relative border border-indigo-500/30 gradient-border"> |
| | <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white"> |
| | <i class="fas fa-times text-xl"></i> |
| | </button> |
| | |
| | <h2 class="text-2xl font-bold mb-6 text-center">Оформить заказ</h2> |
| | |
| | <form id="orderForm" class="space-y-5"> |
| | <div> |
| | <label for="orderName" class="block text-gray-300 mb-2">ФИО</label> |
| | <input type="text" id="orderName" required class="input-field w-full px-4 py-3 rounded-lg text-white"> |
| | </div> |
| | |
| | <div> |
| | <label for="orderBudget" class="block text-gray-300 mb-2">Бюджет</label> |
| | <select id="orderBudget" class="input-field w-full px-4 py-3 rounded-lg text-white"> |
| | <option value="">Выберите бюджет</option> |
| | <option value="5000-10000">5 000 - 10 000 ₽</option> |
| | <option value="10000-30000">10 000 - 30 000 ₽</option> |
| | <option value="30000-50000">30 000 - 50 000 ₽</option> |
| | <option value="50000+">50 000 ₽ и более</option> |
| | </select> |
| | </div> |
| | |
| | <div> |
| | <label for="orderProject" class="block text-gray-300 mb-2">Описание проекта</label> |
| | <textarea id="orderProject" rows="4" required class="input-field w-full px-4 py-3 rounded-lg text-white"></textarea> |
| | </div> |
| | |
| | <div> |
| | <label for="orderService" class="block text-gray-300 mb-2">Услуга</label> |
| | <select id="orderService" class="input-field w-full px-4 py-3 rounded-lg text-white"> |
| | <option value="">Выберите услугу</option> |
| | <option value="photo">Монтаж фото</option> |
| | <option value="audio">Монтаж аудио</option> |
| | <option value="video">Монтаж видео</option> |
| | <option value="website">Сайты и чат-боты</option> |
| | <option value="design">Дизайн</option> |
| | <option value="content">Создание контента</option> |
| | <option value="other">Другое</option> |
| | </select> |
| | </div> |
| | |
| | <button type="submit" class="btn-primary w-full px-6 py-3 rounded-lg font-semibold text-white glow-effect"> |
| | Отправить заявку |
| | </button> |
| | </form> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="successModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"> |
| | <div class="bg-slate-800 rounded-2xl max-w-md w-full p-8 relative border border-indigo-500/30 gradient-border text-center"> |
| | <div class="w-20 h-20 rounded-full bg-green-900/30 flex items-center justify-center text-green-400 mx-auto mb-6 glow-effect"> |
| | <i class="fas fa-check text-3xl"></i> |
| | </div> |
| | |
| | <h2 class="text-2xl font-bold mb-4">Спасибо!</h2> |
| | <p class="text-gray-300 mb-6">Ваша заявка успешно отправлена. Мы свяжемся с вами в ближайшее время.</p> |
| | |
| | <button onclick="closeSuccessModal()" class="btn-primary px-6 py-2 rounded-lg font-semibold text-white glow-effect"> |
| | Закрыть |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="portfolioModal" class="modal fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"> |
| | <div class="bg-slate-800 rounded-2xl max-w-4xl w-full p-8 relative border border-indigo-500/30 gradient-border portfolio-modal-content"> |
| | <button onclick="closePortfolioModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white"> |
| | <i class="fas fa-times text-xl"></i> |
| | </button> |
| | |
| | <div id="portfolioModalContent"> |
| | |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | |
| | const portfolioItems = { |
| | photo1: { |
| | title: "Ретушь портрета", |
| | category: "Фото монтаж", |
| | description: "Профессиональная обработка портрета с коррекцией кожи, удалением дефектов, улучшением света и тени. Использование современных AI инструментов для естественного результата.", |
| | before: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80", |
| | after: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80", |
| | features: [ |
| | "Ретушь кожи с сохранением текстуры", |
| | "Коррекция освещения и цвета", |
| | "Удаление фона и замена на профессиональный", |
| | "Добавление художественных эффектов" |
| | ] |
| | }, |
| | photo2: { |
| | title: "Цветокоррекция", |
| | category: "Фото монтаж", |
| | description: "Преобразование обычного снимка в атмосферное изображение с помощью продвинутой цветокоррекции. Создание уникального настроения и стиля фотографии.", |
| | before: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80", |
| | after: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80", |
| | features: [ |
| | "Точная настройка цветового баланса", |
| | "Создание кинематографичного вида", |
| | "Улучшение детализации", |
| | "Добавление виньетирования и эффектов" |
| | ] |
| | }, |
| | audio1: { |
| | title: "Обработка подкаста", |
| | category: "Аудио монтаж", |
| | description: "Профессиональная обработка аудиозаписи подкаста с удалением шумов, выравниванием громкости, добавлением музыкального оформления и джинглов.", |
| | audio: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", |
| | features: [ |
| | "Шумоподавление и очистка звука", |
| | "Нормализация громкости", |
| | "Добавление музыкальных переходов", |
| | "Мастеринг для оптимального звучания" |
| | ] |
| | }, |
| | video1: { |
| | title: "Музыкальный клип", |
| | category: "Видео монтаж", |
| | description: "Создание динамичного музыкального клипа с использованием различных эффектов переходов, цветокоррекции и синхронизации с музыкой.", |
| | video: "https://www.youtube.com/embed/dQw4w9WgXcQ", |
| | features: [ |
| | "Креативный монтаж с эффектами", |
| | "Цветокоррекция в едином стиле", |
| | "Синхронизация с музыкой", |
| | "Добавление текстов и титров" |
| | ] |
| | }, |
| | video2: { |
| | title: "Корпоративное видео", |
| | category: "Видео монтаж", |
| | description: "Профессиональный монтаж рекламного ролика для компании с использованием фирменных цветов, логотипов и анимации.", |
| | video: "https://www.youtube.com/embed/dQw4w9WgXcQ", |
| | features: [ |
| | "Сценарий и раскадровка", |
| | "Профессиональный монтаж", |
| | "Добавление анимации и эффектов", |
| | "Озвучка и музыкальное оформление" |
| | ] |
| | }, |
| | website1: { |
| | title: "Корпоративный сайт", |
| | category: "Сайты и боты", |
| | description: "Разработка современного адаптивного веб-сайта для бизнеса с удобным интерфейсом, интеграцией с социальными сетями и системой управления контентом.", |
| | image: "https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80", |
| | features: [ |
| | "Адаптивный дизайн для всех устройств", |
| | "Интеграция с CRM системой", |
| | "Оптимизация скорости загрузки", |
| | "SEO оптимизация" |
| | ] |
| | }, |
| | website2: { |
| | title: "AI Чат-бот", |
| | category: "Сайты и боты", |
| | description: "Создание интеллектуального чат-бота для автоматизации общения с клиентами на сайте и в мессенджерах с использованием технологий искусственного интеллекта.", |
| | image: "https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80", |
| | features: [ |
| | "Интеграция с сайтом и соцсетями", |
| | "Обучение на основе ваших данных", |
| | "Мультиязычная поддержка", |
| | "Аналитика и отчетность" |
| | ] |
| | }, |
| | design1: { |
| | title: "Фирменный стиль", |
| | category: "Дизайн", |
| | description: "Разработка уникального фирменного стиля для компании, включая логотип, цветовую палитру, типографику и руководство по использованию бренда.", |
| | image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80", |
| | features: [ |
| | "Разработка логотипа и айдентики", |
| | "Создание брендбука", |
| | "Дизайн полиграфии и сувениров", |
| | "Гайдлайны для соцсетей" |
| | ] |
| | }, |
| | content1: { |
| | title: "AI иллюстрации", |
| | category: "Контент", |
| | description: "Создание уникальных иллюстраций и графики с помощью нейросетей для использования в маркетинговых материалах, соцсетях и на сайте.", |
| | image: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80", |
| | features: [ |
| | "Генерация уникальных изображений", |
| | "Стилизация под ваш бренд", |
| | "Высокое разрешение и качество", |
| | "Быстрое выполнение заказов" |
| | ] |
| | } |
| | }; |
| | |
| | |
| | function openModal() { |
| | document.getElementById('orderModal').classList.add('active'); |
| | document.body.style.overflow = 'hidden'; |
| | } |
| | |
| | function closeModal() { |
| | document.getElementById('orderModal').classList.remove('active'); |
| | document.body.style.overflow = 'auto'; |
| | } |
| | |
| | function openSuccessModal() { |
| | closeModal(); |
| | document.getElementById('successModal').classList.add('active'); |
| | document.body.style.overflow = 'hidden'; |
| | } |
| | |
| | function closeSuccessModal() { |
| | document.getElementById('successModal').classList.remove('active'); |
| | document.body.style.overflow = 'auto'; |
| | } |
| | |
| | |
| | function openPortfolioModal(itemId) { |
| | const item = portfolioItems[itemId]; |
| | const modalContent = document.getElementById('portfolioModalContent'); |
| | |
| | let content = ` |
| | <h2 class="text-2xl md:text-3xl font-bold mb-2">${item.title}</h2> |
| | <p class="text-indigo-400 mb-6">${item.category}</p> |
| | <p class="text-gray-300 mb-6">${item.description}</p> |
| | |
| | <div class="mb-6"> |
| | <h3 class="text-xl font-semibold mb-3">Особенности работы:</h3> |
| | <ul class="space-y-2"> |
| | ${item.features.map(feature => `<li class="text-gray-300 flex items-start"><span class="text-indigo-400 mr-2">✓</span> ${feature}</li>`).join('')} |
| | </ul> |
| | </div> |
| | `; |
| | |
| | if (item.before && item.after) { |
| | content += ` |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| | <div> |
| | <h3 class="text-lg font-semibold mb-2 text-center">До обработки</h3> |
| | <img src="${item.before}" alt="До обработки" class="w-full h-64 object-cover rounded-lg portfolio-modal-img"> |
| | </div> |
| | <div> |
| | <h3 class="text-lg font-semibold mb-2 text-center">После обработки</h3> |
| | <img src="${item.after}" alt="После обработки" class="w-full h-64 object-cover rounded-lg portfolio-modal-img"> |
| | </div> |
| | </div> |
| | `; |
| | } else if (item.image) { |
| | content += ` |
| | <div class="mb-6"> |
| | <img src="${item.image}" alt="${item.title}" class="w-full h-64 object-cover rounded-lg portfolio-modal-img"> |
| | </div> |
| | `; |
| | } else if (item.audio) { |
| | content += ` |
| | <div class="mb-6"> |
| | <audio controls class="w-full"> |
| | <source src="${item.audio}" type="audio/mpeg"> |
| | Ваш браузер не поддерживает аудио элемент. |
| | </audio> |
| | </div> |
| | `; |
| | } else if (item.video) { |
| | content += ` |
| | <div class="mb-6 aspect-w-16 aspect-h-9"> |
| | <iframe class="w-full h-64 rounded-lg" src="${item.video}" frameborder="0" allowfullscreen></iframe> |
| | </div> |
| | `; |
| | } |
| | |
| | content += ` |
| | <div class="text-center"> |
| | <button onclick="openModal()" class="btn-primary px-6 py-3 rounded-lg font-semibold text-white glow-effect"> |
| | Заказать подобный проект |
| | </button> |
| | </div> |
| | `; |
| | |
| | modalContent.innerHTML = content; |
| | document.getElementById('portfolioModal').classList.add('active'); |
| | document.body.style.overflow = 'hidden'; |
| | } |
| | |
| | function closePortfolioModal() { |
| | document.getElementById('portfolioModal').classList.remove('active'); |
| | document.body.style.overflow = 'auto'; |
| | } |
| | |
| | |
| | document.querySelectorAll('.filter-btn').forEach(btn => { |
| | btn.addEventListener('click', function() { |
| | |
| | document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); |
| | this.classList.add('active'); |
| | |
| | const filter = this.dataset.filter; |
| | const items = document.querySelectorAll('.portfolio-item'); |
| | |
| | items.forEach(item => { |
| | if (filter === 'all' || item.dataset.category === filter) { |
| | item.style.display = 'block'; |
| | } else { |
| | item.style.display = 'none'; |
| | } |
| | }); |
| | }); |
| | }); |
| | |
| | |
| | document.getElementById('orderForm').addEventListener('submit', function(e) { |
| | e.preventDefault(); |
| | openSuccessModal(); |
| | this.reset(); |
| | }); |
| | |
| | document.getElementById('contactForm').addEventListener('submit', function(e) { |
| | e.preventDefault(); |
| | openSuccessModal(); |
| | this.reset(); |
| | }); |
| | |
| | |
| | document.addEventListener('keydown', function(e) { |
| | if (e.key === 'Escape') { |
| | closeModal(); |
| | closeSuccessModal(); |
| | closePortfolioModal(); |
| | } |
| | }); |
| | |
| | |
| | document.querySelectorAll('.modal').forEach(modal => { |
| | modal.addEventListener('click', function(e) { |
| | if (e.target === this) { |
| | if (this.id === 'orderModal') closeModal(); |
| | if (this.id === 'successModal') closeSuccessModal(); |
| | if (this.id === 'portfolioModal') closePortfolioModal(); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | 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' |
| | }); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const techBubbles = document.querySelectorAll('.tech-bubble'); |
| | |
| | techBubbles.forEach((bubble, index) => { |
| | |
| | const duration = 15 + Math.random() * 15; |
| | const delay = Math.random() * 5; |
| | const xAmplitude = 50 + Math.random() * 100; |
| | const yAmplitude = 50 + Math.random() * 100; |
| | |
| | bubble.style.animation = `float ${duration}s ease-in-out ${delay}s infinite alternate`; |
| | bubble.style.setProperty('--x-amplitude', `${xAmplitude}px`); |
| | bubble.style.setProperty('--y-amplitude', `${yAmplitude}px`); |
| | }); |
| | }); |
| | </script> |
| |
|
| | <style> |
| | |
| | @keyframes float { |
| | 0% { |
| | transform: translate(0, 0); |
| | } |
| | 50% { |
| | transform: translate(var(--x-amplitude), var(--y-amplitude)); |
| | } |
| | 100% { |
| | transform: translate(calc(var(--x-amplitude) * -1), calc(var(--y-amplitude) * -1)); |
| | } |
| | } |
| | </style> |
| | <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=Amg63/vitopro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
