Найден корректный robots.txt
Файл управления сканированием сайта роботами
?
Robots.txt указывает поисковым роботам, какие страницы сканировать, а какие — нет. Ошибки в файле могут случайно закрыть важные разделы от индексации.
Robots.txt настроен корректно. Размер файла: 42333 байт. Загружен за: 0сек.
Проверяемая страница не запрещена в robots.txt.
Цепочка редиректов для файла robots.txt:
http://neurocex.ru/robots.txt
301 MovedPermanently
https://neurocex.ru/robots.txt
200 OK
Показать содержимое robots.txt
<!DOCTYPE html>
<html lang="ru" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuroCex — AI Video & Vibe Coding Studio</title>
<link rel="icon" type="image/jpeg" href="images/logo.jpeg">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
'cyber-dark': '#0a0a0e',
'cyber-card': '#12121a',
'cyber-pink': '#f43f5e',
'cyber-blue': '#38bdf8',
'cyber-muted': '#a1a1aa'
},
fontFamily: {
'tech': ['Space Grotesk', 'sans-serif'],
'sans': ['Inter', 'sans-serif']
}
}
}
}
</script>
<style>
body { background-color: #0a0a0e; color: #f3f4f6; font-family: 'Inter', sans-serif; overflow-x: hidden; }
.glass-card { background: rgba(18, 18, 26, 0.75); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.glass-card:hover { border-color: rgba(244, 63, 94, 0.4); box-shadow: 0 0 25px rgba(244, 63, 94, 0.15); transform: translateY(-2px); }
.glow-text { text-shadow: 0 0 20px rgba(244, 63, 94, 0.5); }
</style>
</head>
<body class="antialiased selection:bg-cyber-pink selection:text-white">
<div id="canvas-container" class="fixed inset-0 pointer-events-none z-0 opacity-40"></div>
<nav class="fixed top-0 left-0 right-0 z-50 glass-card border-b border-white/5 px-6 py-4">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<a href="#" class="flex items-center gap-3 group">
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-cyber-pink to-cyber-blue p-[1px] shadow-lg shadow-cyber-pink/20 group-hover:scale-105 transition-transform overflow-hidden">
<img src="images/logo.jpeg" onerror="this.onerror=null; this.src='images/logo.jpg'" class="w-full h-full object-cover rounded-xl">
</div>
<span class="font-tech text-xl font-bold tracking-wider text-white">NEUROCEX</span>
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-cyber-muted">
<a href="#hero" class="hover:text-cyber-pink transition-colors">Главная</a>
<a href="#overview-3d" class="hover:text-cyber-pink transition-colors">3D Карусель</a>
<a href="#portfolio" class="hover:text-cyber-pink transition-colors">Портфолио</a>
<a href="#contacts" class="hover:text-cyber-pink transition-colors">Контакты</a>
</div>
<div class="flex items-center gap-4">
<a href="https://t.me/Ura_84" target="_blank" class="px-5 py-2.5 rounded-xl bg-cyber-pink/10 border border-cyber-pink/30 text-cyber-pink font-tech font-medium text-sm hover:bg-cyber-pink hover:text-white transition-all shadow-lg flex items-center gap-2">
<i class="fa-brands fa-telegram"></i> Telegram
</a>
</div>
</div>
</nav>
<div class="relative z-10 pt-24">
<section id="hero" class="min-h-screen flex flex-col justify-center items-center text-center px-6 relative py-12">
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-2xl bg-gradient-to-tr from-cyber-pink to-cyber-blue p-[2px] shadow-2xl shadow-cyber-pink/30 mb-8 overflow-hidden">
<img src="images/logo.jpeg" onerror="this.onerror=null; this.src='images/logo.jpg'" class="w-full h-full object-cover rounded-2xl">
</div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-xs font-tech text-cyber-pink mb-6 backdrop-blur-md">
<span class="w-2 h-2 rounded-full bg-cyber-pink animate-ping"></span>
AI Content & Vibe Coding Studio
</div>
<h1 class="text-4xl sm:text-6xl md:text-7xl font-extrabold font-tech tracking-tight max-w-5xl leading-tight text-white mb-6">
Создаю AI Видео,AI Изображения, Сценарии для AI и продукты нового поколения
</h1>
<p class="text-base sm:text-xl text-cyber-muted max-w-2xl mb-10 font-light leading-relaxed">
Генеративный продакшн, Claymation анимации, нейро-аватары и сверхбыстрая веб-разработка по методологии Vibe Coding.
</p>
<div class="flex flex-wrap gap-4 justify-center">
<a href="#overview-3d" class="px-8 py-4 rounded-xl bg-gradient-to-r from-cyber-pink to-rose-600 text-white font-tech font-bold text-base hover:opacity-90 transition-all shadow-xl">
3D Обзор Работ
</a>
<a href="#portfolio" class="px-8 py-4 rounded-xl bg-white/5 border border-white/10 text-white font-tech font-bold text-base hover:bg-white/10 transition-all">
Все Проекты
</a>
</div>
</section>
<!-- 3D CAROUSEL SECTION -->
<section id="overview-3d" class="py-20 relative z-20 border-y border-cyber-blue/20 overflow-hidden">
<div class="max-w-7xl mx-auto px-6 text-center mb-8">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyber-blue/10 border border-cyber-blue/30 text-cyber-blue text-xs font-mono uppercase tracking-widest mb-3">
<i class="fa-solid fa-circle-nodes animate-pulse"></i>
<span>3D Cylinder Portfolio Showcase</span>
</div>
<h2 class="text-3xl sm:text-5xl font-extrabold font-tech text-white">Проекты NeuroCex в 3D</h2>
<p class="text-cyber-muted mt-2 max-w-2xl mx-auto text-sm sm:text-base">Крутите 3D-ленту карточек для просмотра работ. Нажмите на любую карточку для деталей!</p>
</div>
<div class="relative w-full max-w-6xl mx-auto h-[480px] sm:h-[540px] rounded-3xl glass-card border border-cyber-blue/30 overflow-hidden shadow-2xl flex flex-col items-center justify-center">
<div id="cylinder-3d-container" class="absolute inset-0 w-full h-full cursor-grab active:cursor-grabbing z-0"></div>
<div class="absolute top-4 left-6 right-6 flex items-center justify-between pointer-events-none z-10">
<div class="flex items-center gap-3">
<span class="w-3 h-3 rounded-full bg-cyber-blue animate-ping"></span>
<span class="font-tech text-xs sm:text-sm uppercase tracking-widest font-bold text-white glass-card px-3 py-1 rounded-lg border border-white/10">
Project <span id="active-card-title" class="text-cyber-pink font-mono ml-2">#01</span>
</span>
</div>
</div>
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex items-center gap-4 z-10 pointer-events-auto">
<button onclick="rotateCylinder(-1)" class="w-12 h-12 rounded-2xl glass-card text-white flex items-center justify-center hover:bg-cyber-pink hover:border-cyber-pink transition-all shadow-lg text-lg"><i class="fa-solid fa-chevron-left"></i></button>
<button onclick="openCurrentProjectModal()" id="jump-btn" class="px-6 py-3 rounded-2xl bg-gradient-to-r from-cyber-pink via-rose-600 to-cyber-blue text-white font-extrabold text-xs sm:text-sm shadow-lg flex items-center gap-2"><span>Открыть Проект</span><i class="fa-solid fa-arrow-right"></i></button>
<button onclick="rotateCylinder(1)" class="w-12 h-12 rounded-2xl glass-card text-white flex items-center justify-center hover:bg-cyber-blue hover:border-cyber-blue hover:text-black transition-all shadow-lg text-lg"><i class="fa-solid fa-chevron-right"></i></button>
</div>
</div>
</section>
<!-- PORTFOLIO GRID SECTION -->
<section id="portfolio" class="py-20 px-6 max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-5xl font-extrabold font-tech text-white mb-4">Наши Проекты & Видео</h2>
<div class="flex flex-wrap justify-center gap-3 mt-8">
<button onclick="filterPortfolio('all')" class="filter-btn active px-5 py-2.5 rounded-xl font-tech text-xs sm:text-sm font-semibold transition-all bg-cyber-pink text-white" id="filter-all">Все работы</button>
<button onclick="filterPortfolio('video')" class="filter-btn px-5 py-2.5 rounded-xl font-tech text-xs sm:text-sm font-semibold transition-all bg-white/5 text-cyber-muted hover:text-white" id="filter-video">AI Видео</button>
<button onclick="filterPortfolio('claymation')" class="filter-btn px-5 py-2.5 rounded-xl font-tech text-xs sm:text-sm font-semibold transition-all bg-white/5 text-cyber-muted hover:text-white" id="filter-claymation">Claymation 3D</button>
<button onclick="filterPortfolio('web')" class="filter-btn px-5 py-2.5 rounded-xl font-tech text-xs sm:text-sm font-semibold transition-all bg-white/5 text-cyber-muted hover:text-white" id="filter-web">Web & Apps</button>
<button onclick="filterPortfolio('art')" class="filter-btn px-5 py-2.5 rounded-xl font-tech text-xs sm:text-sm font-semibold transition-all bg-white/5 text-cyber-muted hover:text-white" id="filter-art">Генерации & Арт</button>
</div>
</div>
<div id="portfolio-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"></div>
</section>
<section id="contacts" class="py-20 px-6 max-w-4xl mx-auto text-center">
<h2 class="text-3xl sm:text-5xl font-extrabold font-tech text-white mb-6">Готовы создать проект?</h2>
<div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
<a href="https://t.me/Ura_84" target="_blank" class="w-full sm:w-auto px-8 py-4 rounded-xl bg-cyber-pink text-white font-tech font-bold hover:bg-rose-600 transition-all flex items-center justify-center gap-3 shadow-lg">
<i class="fa-brands fa-telegram text-xl"></i> Telegram: @Ura_84
</a>
<button onclick="copyEmail()" class="w-full sm:w-auto px-8 py-4 rounded-xl bg-white/5 border border-white/10 text-white font-tech font-bold hover:bg-white/10 transition-all flex items-center justify-center gap-3">
<i class="fa-regular fa-copy text-cyber-blue"></i> <span id="email-text">neurocex@mail.ru</span>
</button>
</div>
</section>
<footer class="border-t border-white/5 py-8 text-center text-xs font-tech text-cyber-muted space-y-2">
<p>© 2026 NeuroCex Studio. Powered by Vibe Coding.</p>
<p>
<a href="/privacy" onclick="event.preventDefault(); openPrivacyModal();" class="text-cyber-muted hover:text-cyber-blue underline transition-colors">Политика конфиденциальности</a>
| Запросы по ПДн: <a href="mailto:neurocex@mail.ru" class="text-cyber-blue underline">neurocex@mail.ru</a>
</p>
<p class="text-[10px] opacity-60">NeuroCex Studio | ИНН / Контакты разработчика: @Ura_84</p>
</footer>
</div>
<!-- PROJECT MODAL -->
<div id="project-modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-md">
<div class="glass-card rounded-3xl max-w-3xl w-full max-h-[90vh] overflow-y-auto p-6 sm:p-8 relative border border-white/15 shadow-2xl">
<button onclick="closeModal()" class="absolute top-6 right-6 w-10 h-10 rounded-full bg-white/10 text-white hover:bg-cyber-pink transition-colors flex items-center justify-center font-bold text-lg z-20">✕</button>
<div id="modal-media-container" class="w-full rounded-2xl overflow-hidden bg-black/60 mb-6 border border-white/10"></div>
<div class="flex items-center justify-between mb-4">
<span id="modal-badge" class="px-3 py-1 rounded-full text-xs font-tech font-bold text-white bg-cyber-pink"></span>
<span id="modal-tools" class="text-xs font-mono text-cyber-blue"></span>
</div>
<h3 id="modal-title" class="text-2xl sm:text-3xl font-extrabold font-tech text-white mb-3"></h3>
<p id="modal-desc" class="text-cyber-muted text-sm sm:text-base leading-relaxed mb-6"></p>
<div class="flex flex-wrap gap-4 justify-end">
<a id="modal-site-btn" href="#" target="_blank" class="hidden px-6 py-3 rounded-xl bg-cyber-blue text-cyber-dark font-tech font-bold text-sm">Открыть сайт ↗</a>
<a href="https://t.me/Ura_84" target="_blank" class="px-6 py-3 rounded-xl bg-cyber-pink text-white font-tech font-bold text-sm">Заказать подобный проект</a>
</div>
</div>
</div>
<!-- PRIVACY POLICY MODAL (152-ФЗ) -->
<div id="privacy-modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-md">
<div class="glass-card rounded-3xl max-w-3xl w-full max-h-[85vh] overflow-y-auto p-6 sm:p-8 relative border border-white/15 shadow-2xl space-y-4">
<button onclick="closePrivacyModal()" class="absolute top-6 right-6 w-10 h-10 rounded-full bg-white/10 text-white hover:bg-cyber-pink transition-colors flex items-center justify-center font-bold text-lg z-20">✕</button>
<h2 class="text-2xl font-bold font-tech text-white">Политика обработки персональных данных</h2>
<p class="text-xs font-mono text-cyber-muted">Дата публикации: 2026 год | NeuroCex Studio</p>
<div class="space-y-4 text-xs sm:text-sm text-cyber-muted leading-relaxed border-t border-white/10 pt-4">
<h3 class="font-bold text-white text-base">1. Общие положения</h3>
<p>Настоящая политика определяет порядок обработки и защиты персональных данных пользователей сайта neurocex.ru.</p>
<h3 class="font-bold text-white text-base">2. Сбор и использование данных</h3>
<p>Мы обрабатываем данные, которые вы добровольно предоставляете при связи с нами (имя, контакты Telegram/Email), а также технические файлы cookie для корректной работы сайта и аналитики.</p>
<h3 class="font-bold text-white text-base">3. Права пользователей</h3>
<p>Вы имеете право отозвать согласие на обработку персональных данных в любой момент, написав нам на email: <a href="mailto:neurocex@mail.ru" class="text-cyber-blue underline">neurocex@mail.ru</a>.</p>
</div>
<div class="pt-4 flex justify-end border-t border-white/10">
<button onclick="closePrivacyModal()" class="px-6 py-2.5 rounded-xl bg-cyber-pink text-white font-tech font-bold text-xs cursor-pointer">Понятно</button>
</div>
</div>
</div>
<!-- COOKIE NOTIFICATION BANNER (152-ФЗ) -->
<div id="cookie-banner" class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-md z-50 hidden glass-card p-4 rounded-2xl border border-white/10 text-xs text-cyber-muted shadow-2xl space-y-3">
<p>Мы используем cookie для работы 3D-графики и аналитики. Продолжая использовать сайт, вы соглашаетесь с <a href="/privacy" onclick="event.preventDefault(); openPrivacyModal();" class="text-cyber-blue underline">Политикой конфиденциальности</a>.</p>
<button onclick="acceptCookies()" class="w-full py-2 rounded-xl bg-cyber-pink text-white font-tech font-bold cursor-pointer hover:bg-rose-600 transition-colors">Принять</button>
</div>
<script>
const PORTFOLIO_ITEMS = [
{
"id": "proj-1786033610296",
"title": "AI beauty блогер",
"category": "video",
"badgeText": "AI beauty блогер",
"badgeBg": "bg-cyber-pink",
"shortDesc": "AI beauty блогер",
"fullDesc": "На видео располагающая к доверию героиня для бьюти‑блога: молодая женщина с тёплой, искренней улыбкой держит в руках керамическую чашку, будто только что начала свой день. Её причёска — аккуратный пучок с декоративной шпилькой — подчёркивает непринуждённость и естественность образа, а лёгкая чёлка добавляет мягкости.",
"tools": [
"#Gemini"
],
"image": "images/video/BBAI/BBAI.jpg",
"videoUrl": "videos/video/BBAI/BBAI.mp4",
"siteUrl": ""
},
{
"id": "proj-1786028056653",
"title": "Проект инфографики CARDCRAFT AI STUDIO",
"category": "web",
"badgeText": "CARDCRAFT AI STUDIO",
"badgeBg": "bg-cyber-blue",
"shortDesc": "CardCraft AI Studio — это онлайн-сервис на базе искусственного интеллекта для автоматического создания продающей инфографики и пак-воронок карточек товаров для маркетплейсов (Wildberries, Ozon, Яндекс Маркет).",
"fullDesc": "CardCraft AI Studio — это онлайн-сервис на базе искусственного интеллекта для автоматического создания продающей инфографики и пак-воронок карточек товаров для маркетплейсов (Wildberries, Ozon, Яндекс Маркет). Ключевые возможности:\n\nАвтоматическая вырезка фона: Быстрое удаление фона и генерация студийного окружения/подиума под категорию товара.\n\nПримерка одежды на AI-моделях: Генерация реалистичных показов одежды на виртуальных моделях (девушки, мужчины, дети).\n\nГенерация полного пака за один клик: Создание готовoго комплекта из 2–3 слайдов (Главная обложка, Крупный план деталей, Слайд с точными габаритами и линейкой).\n\nМаркетинговые триггеры и офферы: Автоматический подбор выгод товара, генерация плашек, бейджей, акцентных стикеров («Хит продаж», «Подарок внутри») и настраиваемых шрифтов.\n\nБыстрый экспорт: Скачивание отдельных PNG-кадров или генерация готового ZIP-архива всей воронки.\n\nДля кого: Селлеры маркетплейсов, менеджеры кабинетов WB/Ozon и дизайнеры инфографики, желающие сократить время и стоимость создания контента.",
"tools": [
"#Gemini"
],
"image": "images/web/CCAI/CCAI.jpg",
"videoUrl": "videos/web/CCAI/CCAI.mp4",
"siteUrl": ""
},
{
"id": "proj-1785941326630",
"title": "AI Video Три главных ИИ",
"category": "video",
"badgeText": "Три главных ИИ",
"badgeBg": "bg-cyber-pink",
"shortDesc": "«Не знаешь, какой ИИ взять? Вот мой топ‑3»",
"fullDesc": "Не знаешь, какой ИИ взять? Вот мой топ‑3! 😄\n\nПредставь, что эти 3 ИИ — как супергерои в одной команде: у каждого своя суперсила. В картонном мультике покажу, кто за что отвечает: кто спасает от чистого листа, кто рисует, будто художник, а кто собирает всё в готовый ролик.\n\nНикакой сложной теории — только понятные примеры и 1 рабочий промт в конце.\n\nЛистай карусель или смотри до конца — там бонус. 😉\n\n#ИИдляновичков #контентмейкер #промпты #Reels",
"tools": [
"#Gemini"
],
"image": "images/video/3AI/3AI.jpg",
"videoUrl": "videos/video/3AI/3AI.mp4",
"siteUrl": ""
},
{
"id": "proj-1785939957293",
"title": "AI КОМИКС",
"category": "video",
"badgeText": "Кибер Самурай по-нашему. Год 2077.",
"badgeBg": "bg-cyber-pink",
"shortDesc": "Кибер Самурай по-нашему. Год 2077.",
"fullDesc": "Дождь льёт, неон горит, а мой боевой дух работает исправно, пока в руке горячая шаурма из ларька. Классический самурай встречает уличную классику: доспехи, две катаны за поясом, любимый синий адидас и красные кроссы — потому что стиль вне времени. Даже когда старый друг звонит по голограмме, дела подождут. Сначала перекус.",
"tools": [
"#Gemini"
],
"image": "images/video/Samurai_Cyber/samuray.jpg",
"videoUrl": "videos/video/Samurai_Cyber/samuray.mp4",
"siteUrl": ""
},
{
"id": "proj-1785678902960",
"title": "AI видео «Точка невозврата: как распознать внутренний перелом и использовать его как старт»",
"category": "video",
"badgeText": "Psychology \"Точка невозврата\"",
"badgeBg": "bg-cyber-pink",
"shortDesc": "AI видео «Точка невозврата: как распознать внутренний перелом и использовать его как старт»",
"fullDesc": "В этом видео — честный разговор о моменте, когда старые опоры рушатся, а новые ещё не построены. Показываем реальную драму без прикрас: как выглядит кризис изнутри, почему «просто взять себя в руки» не работает и какие бережные шаги помогают вернуть контроль. Даём 3 практических приёма, которые можно применить сразу: признание состояния, микродействия для стабилизации и простой инструмент рефлексии. Видео не про «успешный успех», а про опору в тяжёлые моменты — и про то, как из надлома вырастить новый старт. #психология #кризис #точканевозврата #внутреннийперелом #самопомощь #эмоциональноевыгорание",
"tools": [
"#Gemini"
],
"image": "images/video/Psychology/Psychology.jpg",
"videoUrl": "videos/video/Psychology/Psychology.mp4",
"siteUrl": ""
},
{
"id": "proj-1785678126668",
"title": "Le Dîner",
"category": "web",
"badgeText": "Le Dîner Французский кулинарный триллер",
"badgeBg": "bg-cyber-blue",
"shortDesc": "Le Dîner Французский кулинарный триллер",
"fullDesc": "🍽️ Le Dîner — кулинарный ИИ-триллер и медиа-платформа\n«Le Dîner» — это не просто очередной скучный сайт с рецептами. Это интерактивное кулинарное шоу в атмосфере изысканного французского нуара, завернутое в полностью автоматический бизнес.\nПроект превращает банальную готовку в настоящее кино. Пользователь вводит продукты, которые у него есть в холодильнике, а искусственный интеллект придумывает уникальное блюдо. Весь процесс сопровождается атмосферной музыкой, звуковыми эффектами, драматичным французским голосом и кинематографичными видеороликами.\nКроме того, проект снабжен полностью автономным ИИ-маркетологом, который без участия человека генерирует Shorts-видео премиум-качества и ежедневно продвигает бренд на YouTube и в Telegram.",
"tools": [
"#DeepSeek #Gemini"
],
"image": "images/web/LeDiner/LeDinercover.jpg",
"videoUrl": "videos/web/LeDiner/Ledinerrec.mp4",
"siteUrl": "https://le-diner.ru/"
},
{
"id": "proj-1785676334989",
"title": "AI Видео Самурай -Киборг в Москве будущего",
"category": "video",
"badgeText": "Видео Самурай -Киборг в Москве будущего",
"badgeBg": "bg-cyber-pink",
"shortDesc": "Динамичное экшен‑видео в эстетике киберпанка: самурай‑киборг на крыше высотки!!",
"fullDesc": "Динамичное экшен‑видео в эстетике киберпанка: самурай‑киборг на крыше высотки замечает приближающийся боевой вертолёт — и, не теряя хладнокровия, совершает дерзкий прыжок. Цепляясь мечом за стекло офисного здания, он проникает внутрь, где вступает в напряжённую схватку с охранниками и в итоге одерживает победу. Визуальный ряд выдержан в мрачной неоновой стилистике с акцентом на контраст традиций и высоких технологий.",
"tools": [
"#Gemini"
],
"image": "images/video/Самурай -Киборг/samuray.jpg",
"videoUrl": "videos/video/Самурай -Киборг/samuray.mp4",
"siteUrl": ""
},
{
"id": "proj-1785669472383",
"title": "Your_product",
"category": "video",
"badgeText": "\"Твой продукт\" реклама для магазина",
"badgeBg": "bg-cyber-pink",
"shortDesc": "Добро пожаловать в магазин, где покупки приносят радость. В этом ярком анимационном ролике дружелюбный консультант с улыбкой вручает клиенту фирменную коробку, в которой может быть именно Ваш ПРОДУКТ.",
"fullDesc": "Добро пожаловать в магазин, где покупки приносят радость. В этом ярком анимационном ролике дружелюбный консультант с улыбкой вручает клиенту фирменную коробку, в которой может быть именно Ваш ПРОДУКТ. Уютная атмосфера, современный интерьер и внимательный сервис создают ощущение, что здесь заботятся о каждом покупателе. Пусть на месте коробки, витрин и вывесок окажется Ваш ПРОДУКТ, а этот сюжет станет отличной рекламной заготовкой для вашего бизнеса.",
"tools": [
"#NeuroCex"
],
"image": "images/video/Your_product/Your_product.jpg",
"videoUrl": "videos/video/Your_product/Your_product.mp4",
"siteUrl": ""
}
];
function renderPortfolioGrid(filter = 'all') {
const grid = document.getElementById('portfolio-grid');
grid.innerHTML = '';
const filteredItems = filter === 'all' ? PORTFOLIO_ITEMS : PORTFOLIO_ITEMS.filter(item => item.category === filter);
filteredItems.forEach(item => {
const card = document.createElement('div');
card.className = 'glass-card rounded-2xl overflow-hidden group cursor-pointer transition-all duration-300';
card.onclick = () => openModal(item.id);
let mediaPreview = `<img src="${item.image}" alt="${item.title}" onerror="this.onerror=null;this.src='https://placehold.co/800x600/12121a/f43f5e?text=NeuroCex'" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-500">`;
if (item.videoUrl && item.videoUrl.endsWith('.mp4')) {
mediaPreview = `<div class="relative w-full h-56 overflow-hidden bg-black"><video src="${item.videoUrl}" poster="${item.image}" muted loop playsinline preload="metadata" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" onmouseover="this.play()" onmouseout="this.pause()"></video></div>`;
}
card.innerHTML = `${mediaPreview}<div class="p-6"><div class="flex items-center justify-between mb-3"><span class="px-2.5 py-1 rounded-full text-[10px] font-tech font-bold text-white ${item.badgeBg}">${item.badgeText}</span></div><h3 class="text-xl font-bold font-tech text-white mb-2">${item.title}</h3><p class="text-xs text-cyber-muted line-clamp-2">${item.shortDesc}</p></div>`;
grid.appendChild(card);
});
}
function filterPortfolio(cat) { renderPortfolioGrid(cat); }
function openModal(id) {
const item = PORTFOLIO_ITEMS.find(p => p.id === id);
if (!item) return;
const mc = document.getElementById('modal-media-container');
mc.innerHTML = item.videoUrl ? `<video src="${item.videoUrl}" controls autoplay loop class="w-full max-h-[60vh] object-contain bg-black"></video>` : `<img src="${item.image}" class="w-full max-h-[60vh] object-cover">`;
document.getElementById('modal-title').innerText = item.title;
document.getElementById('modal-badge').innerText = item.badgeText;
document.getElementById('modal-desc').innerText = item.fullDesc;
const siteBtn = document.getElementById('modal-site-btn');
if (item.siteUrl) {
siteBtn.href = item.siteUrl;
siteBtn.classList.remove('hidden');
} else {
siteBtn.classList.add('hidden');
}
document.getElementById('project-modal').classList.remove('hidden');
document.getElementById('project-modal').classList.add('flex');
}
function closeModal() {
document.getElementById('project-modal').classList.add('hidden');
document.getElementById('project-modal').classList.remove('flex');
}
function openPrivacyModal() {
document.getElementById('privacy-modal').classList.remove('hidden');
document.getElementById('privacy-modal').classList.add('flex');
}
function closePrivacyModal() {
document.getElementById('privacy-modal').classList.add('hidden');
document.getElementById('privacy-modal').classList.remove('flex');
}
function acceptCookies() {
localStorage.setItem('cookie_accepted', 'true');
document.getElementById('cookie-banner').classList.add('hidden');
}
function copyEmail() {
navigator.clipboard.writeText("neurocex@mail.ru");
}
// 3D SPHERE BACKGROUND
function init3DSphere() {
const container = document.getElementById('canvas-container');
if(!container) return;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 18;
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
container.appendChild(renderer.domElement);
const sphereGroup = new THREE.Group();
const ringCount = 16;
const radius = 8;
for (let i = 0; i < ringCount; i++) {
const phi = (i / ringCount) * Math.PI;
const ringRadius = radius * Math.sin(phi);
if (ringRadius < 0.2) continue;
const geometry = new THREE.RingGeometry(ringRadius - 0.05, ringRadius + 0.05, 64);
const material = new THREE.MeshBasicMaterial({
color: i % 2 === 0 ? 0xf43f5e : 0x38bdf8,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5
});
const ring = new THREE.Mesh(geometry, material);
ring.position.y = radius * Math.cos(phi);
ring.rotation.x = Math.PI / 2;
sphereGroup.add(ring);
}
scene.add(sphereGroup);
let mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', (e) => {
mouseX = (e.clientX / window.innerWidth - 0.5) * 0.4;
mouseY = (e.clientY / window.innerHeight - 0.5) * 0.4;
});
function animate() {
requestAnimationFrame(animate);
sphereGroup.rotation.y += 0.004;
sphereGroup.rotation.x += (mouseY - sphereGroup.rotation.x) * 0.05;
sphereGroup.rotation.z += (mouseX - sphereGroup.rotation.z) * 0.05;
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
}
// 3D CYLINDER CAROUSEL ENGINE
let cylScene, cylCamera, cylRenderer, cylGroup;
let cardMeshes = [];
let targetRotationY = 0;
let currentRotationY = 0;
let isDragging = false;
let dragStartX = 0;
let previousMouseX = 0;
let activeIndex = 0;
function createProjectCardTexture(item) {
const canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 340;
const ctx = canvas.getContext('2d');
const texture = new THREE.CanvasTexture(canvas);
function drawCard(loadedImg = null) {
ctx.clearRect(0, 0, 512, 340);
ctx.fillStyle = '#0f0f17';
ctx.beginPath();
ctx.roundRect(10, 10, 492, 320, 20);
ctx.fill();
const borderColor = item.category === 'claymation' ? '#f43f5e' : (item.category === 'web' ? '#38bdf8' : '#e11d48');
ctx.lineWidth = 3;
ctx.strokeStyle = borderColor;
ctx.stroke();
if (loadedImg) {
ctx.save();
ctx.beginPath();
ctx.roundRect(18, 18, 476, 170, 14);
ctx.clip();
ctx.drawImage(loadedImg, 0, 0, loadedImg.width, loadedImg.height, 18, 18, 476, 170);
const grad = ctx.createLinearGradient(0, 100, 0, 188);
grad.addColorStop(0, 'rgba(15, 15, 23, 0)');
grad.addColorStop(1, 'rgba(15, 15, 23, 0.9)');
ctx.fillStyle = grad;
ctx.fillRect(18, 18, 476, 170);
ctx.restore();
} else {
ctx.fillStyle = '#181824';
ctx.beginPath();
ctx.roundRect(18, 18, 476, 170, 14);
ctx.fill();
}
ctx.fillStyle = borderColor;
ctx.beginPath();
ctx.roundRect(330, 28, 150, 28, 14);
ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 12px sans-serif';
ctx.textAlign = 'center';
ctx.fillText(item.badgeText || 'Project', 405, 46);
ctx.textAlign = 'left';
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 22px sans-serif';
const titleText = item.title.length > 25 ? item.title.substring(0, 23) + '...' : item.title;
ctx.fillText(titleText, 26, 222);
ctx.fillStyle = '#94a3b8';
ctx.font = '13px sans-serif';
const shortText = item.shortDesc.length > 50 ? item.shortDesc.substring(0, 47) + '...' : item.shortDesc;
ctx.fillText(shortText, 26, 252);
ctx.fillStyle = '#38bdf8';
ctx.font = 'bold 12px monospace';
const toolsStr = item.tools ? item.tools.join(' ') : '#AI';
ctx.fillText(toolsStr, 26, 282);
ctx.fillStyle = borderColor;
ctx.font = 'bold 13px sans-serif';
ctx.fillText('Нажмите для открытия →', 26, 312);
texture.needsUpdate = true;
}
drawCard();
if (item.image) {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => { drawCard(img); };
img.src = item.image;
}
return texture;
}
function init3DCylinder() {
const container = document.getElementById('cylinder-3d-container');
if (!container || PORTFOLIO_ITEMS.length === 0) return;
const width = container.clientWidth;
const height = container.clientHeight;
cylScene = new THREE.Scene();
cylCamera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
cylCamera.position.set(0, 0, 7.5);
cylRenderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
cylRenderer.setSize(width, height);
cylRenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
container.appendChild(cylRenderer.domElement);
cylGroup = new THREE.Group();
cylScene.add(cylGroup);
const radius = 4.2;
const numCards = PORTFOLIO_ITEMS.length;
cardMeshes = [];
for (let i = 0; i < numCards; i++) {
const angle = (i / numCards) * Math.PI * 2;
const geometry = new THREE.CylinderGeometry(radius, radius, 2.3, 32, 1, true, angle - 0.38, 0.76);
const texture = createProjectCardTexture(PORTFOLIO_ITEMS[i]);
const material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.98
});
const mesh = new THREE.Mesh(geometry, material);
mesh.userData = { index: i, id: PORTFOLIO_ITEMS[i].id };
cylGroup.add(mesh);
cardMeshes.push(mesh);
}
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
container.addEventListener('click', (e) => {
const rect = container.getBoundingClientRect();
if (Math.abs(e.clientX - dragStartX) > 8) return;
mouse.x = ((e.clientX - rect.left) / container.clientWidth) * 2 - 1;
mouse.y = -((e.clientY - rect.top) / container.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, cylCamera);
const intersects = raycaster.intersectObjects(cardMeshes);
if (intersects.length > 0) {
const clickedMesh = intersects[0].object;
if (clickedMesh.userData && clickedMesh.userData.id) {
openModal(clickedMesh.userData.id);
}
}
});
container.addEventListener('mousedown', (e) => {
isDragging = true;
dragStartX = e.clientX;
previousMouseX = e.clientX;
});
window.addEventListener('mouseup', () => { isDragging = false; });
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const deltaX = e.clientX - previousMouseX;
targetRotationY += deltaX * 0.006;
previousMouseX = e.clientX;
});
container.addEventListener('touchstart', (e) => {
isDragging = true;
dragStartX = e.touches[0].clientX;
previousMouseX = e.touches[0].clientX;
});
window.addEventListener('touchend', () => { isDragging = false; });
container.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const deltaX = e.touches[0].clientX - previousMouseX;
targetRotationY += deltaX * 0.008;
previousMouseX = e.touches[0].clientX;
});
function animateCylinder() {
requestAnimationFrame(animateCylinder);
if (!isDragging) {
targetRotationY += 0.0015;
}
currentRotationY += (targetRotationY - currentRotationY) * 0.08;
cylGroup.rotation.y = currentRotationY;
const step = (Math.PI * 2) / numCards;
let normAngle = (-currentRotationY % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
let closestIdx = Math.round(normAngle / step) % numCards;
if (closestIdx < 0) closestIdx += numCards;
if (closestIdx !== activeIndex) {
activeIndex = closestIdx;
const activeElem = document.getElementById('active-card-title');
if (activeElem && PORTFOLIO_ITEMS[activeIndex]) {
activeElem.textContent = '#' + (activeIndex + 1) + ' ' + PORTFOLIO_ITEMS[activeIndex].title;
}
}
cylRenderer.render(cylScene, cylCamera);
}
animateCylinder();
window.addEventListener('resize', () => {
const w = container.clientWidth;
const h = container.clientHeight;
cylCamera.aspect = w / h;
cylCamera.updateProjectionMatrix();
cylRenderer.setSize(w, h);
});
}
function rotateCylinder(dir) { targetRotationY -= dir * 0.6; }
function openCurrentProjectModal() { if (PORTFOLIO_ITEMS[activeIndex]) openModal(PORTFOLIO_ITEMS[activeIndex].id); }
window.onload = () => {
renderPortfolioGrid();
init3DSphere();
init3DCylinder();
if (!localStorage.getItem('cookie_accepted')) {
const cb = document.getElementById('cookie-banner');
if (cb) cb.classList.remove('hidden');
}
};
</script>
</body>
</html>
nginx