commit edc022c8952f434aed7439d29d719c947a7e93a4 Author: Alexander Popov Date: Fri Oct 30 21:59:08 2026 +0300 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a39c81a --- /dev/null +++ b/.gitignore @@ -0,0 +1,139 @@ +### macOS +# Finder metadata +.DS_Store + +# Thumbnails +._* + +# Custom folder icons +Icon + +# Volume root files +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +### Windows +# Windows thumbnail cache files +Thumbs.db + +# Folder config file +[Dd]esktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows shortcuts +*.lnk + +### Linux +# Backup files +*~ + +# Temporary files from deleted open files +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder +.Trash-* + +# NFS temporary files +.nfs* + +### VisualStudio +# User-specific files +*.suo +*.user + +# Build results +[Dd]ebug/ +[Rr]elease/ +x64/ +x86/ +[Ww][Ii][Nn]32/ +[Aa][Rr][Mm]/ +[Aa][Rr][Mm]64/ +[Bb]in/ +[Oo]bj/ + +# Visual Studio cache/options directory +.vs/ + +# MSTest test Results +[Tt]est[Rr]esult*/ +[Bb]uild[Ll]og.* + +# NuGet +*.nupkg +**/[Pp]ackages/* +!**/[Pp]ackages/build/ +*.nuget.props +*.nuget.targets + +# Publish Web Output +*.[Pp]ublish.xml + +### VS Code +# VSCode settings (keep shared configuration) +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +# Local History for Visual Studio Code +.history/ + +# Built Visual Studio Code Extensions +*.vsix + +### Node +# Dependencies +node_modules/ + +# Logs +*.log + +# Runtime data +*.pid +*.pid.lock + +# Coverage +coverage/ +*.lcov +.nyc_output + +# Build output +dist/ +build/Release + +# TypeScript cache +*.tsbuildinfo + +# Framework build output and caches +.cache +.parcel-cache +.next +out/ +.nuxt + +# dotenv environment variable files +.env +.env.local +.env.*.local + +# npm cache directory +.npm +*.tgz + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/install-state.gz +.pnp.* \ No newline at end of file diff --git a/default.conf b/default.conf new file mode 100644 index 0000000..9379eaa --- /dev/null +++ b/default.conf @@ -0,0 +1,18 @@ +server { + listen 80; + server_name www.olapka.ru; + + return 301 https://olapka.ru$request_uri; +} + +server { + listen 80; + server_name olapka.ru; + + root /usr/share/nginx/html; + index index.html; + + location / { + try_files $uri $uri/ =404; + } +} diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..38b98b5 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,18 @@ +name: olapka +services: + nginx: + container_name: olapka-ru + image: nginx:stable-alpine + restart: unless-stopped + volumes: + - ./html:/usr/share/nginx/html:ro + - ./default.conf:/etc/nginx/conf.d/default.conf:ro + networks: + frontend: + aliases: + - olapka-ru + +networks: + frontend: + external: true + name: pangolin_frontend \ No newline at end of file diff --git a/html/README.md b/html/README.md new file mode 100644 index 0000000..7a6f1d2 --- /dev/null +++ b/html/README.md @@ -0,0 +1,18 @@ +# Сайт студии мультфильмов «О'ляпка» + +Статический адаптивный сайт для студии ИИ-анимации. + +## 📁 Структура +- `index.html` — Главная +- `services.html` — Услуги +- `portfolio.html` — Примеры работ и отзывы +- `contacts.html` — Контакты (taplink-стиль) +- `legal.html` — Юридические документы +- `css/style.css` — Стили +- `js/main.js` — Скрипты (cookie, меню, цели метрики) + +## 🚀 Деплой на VPS с Nginx + +### 1. Загрузка файлов +```bash +scp -r ./* user@your-server:/var/www/olyapka-studio/ \ No newline at end of file diff --git a/html/contacts.html b/html/contacts.html new file mode 100644 index 0000000..f73eb13 --- /dev/null +++ b/html/contacts.html @@ -0,0 +1,106 @@ + + + + + + Контакты студии О'ляпка — заказать ИИ-мультик | Telegram, Instagram, VK + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + ✈️ + + Telegram + Самый быстрый способ связи + + + + 💬 + + WhatsApp + Напишите, если удобнее + + + + 📷 + + Instagram + Примеры работ и сторис + + + + 🔵 + + ВКонтакте + Сообщество студии + + +
+ +
+

Как мы работаем

+
    +
  • ⚡ Отвечаем в течение 15–30 минут
    • +
  • 🎁 Первый тестовый мультик — со скидкой 30%
    • +
  • 💰 Стоимость — от 2 500 ₽
    • +
  • ⏱️ Срок — от 3 до 7 дней
    • +
+
+ +
+ Политика cookies + Пользовательское соглашение +
+ +
+ © 2026 Студия мультфильмов О'ляпка +
+
+ + + + \ No newline at end of file diff --git a/html/css/style.css b/html/css/style.css new file mode 100644 index 0000000..cc23f71 --- /dev/null +++ b/html/css/style.css @@ -0,0 +1,517 @@ +/* ===== RESET & BASE ===== */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } +body { + font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.6; + color: #2C2C2C; + background: #F9F7F0; + min-height: 100vh; + overflow-x: hidden; +} +img { max-width: 100%; height: auto; display: block; } +a { color: inherit; text-decoration: none; transition: all 0.2s ease; } +ul { list-style: none; } +button { font-family: inherit; cursor: pointer; border: none; background: none; } + +/* ===== VARIABLES ===== */ +:root { + --color-bg: #F9F7F0; + --color-bg-alt: #FFFFFF; + --color-text: #2C2C2C; + --color-text-muted: #6B6B6B; + --color-accent: #E60000; + --color-accent-soft: #F5D5C8; + --color-border: #E5E5E5; + --font-hand: 'Caveat', cursive; + --container: 1200px; + --radius: 16px; + --shadow: 0 4px 24px rgba(0,0,0,0.06); + --shadow-hover: 0 8px 32px rgba(0,0,0,0.1); +} + +.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } +.accent { color: var(--color-accent); } + +/* ===== BUTTONS ===== */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 28px; + font-weight: 600; + font-size: 15px; + border-radius: 50px; + transition: all 0.25s ease; + cursor: pointer; + border: 2px solid transparent; + white-space: nowrap; +} +.btn-primary { background: var(--color-accent); color: #fff; } +.btn-primary:hover { background: #B30000; transform: translateY(-2px); box-shadow: var(--shadow-hover); } +.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-text); } +.btn-outline:hover { background: var(--color-text); color: #fff; } +.btn-lg { padding: 18px 36px; font-size: 16px; } + +/* ===== HEADER ===== */ +.header { + position: sticky; + top: 0; + background: rgba(249, 247, 240, 0.95); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + z-index: 100; + border-bottom: 1px solid var(--color-border); +} +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 20px; + gap: 24px; +} +.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; letter-spacing: 1px; } +.logo-bird { font-size: 28px; } +.nav { display: flex; gap: 28px; } +.nav-link { font-weight: 500; font-size: 15px; position: relative; } +.nav-link:hover, .nav-link.active { color: var(--color-accent); } +.nav-link.active::after { + content: ''; + position: absolute; + bottom: -6px; left: 0; right: 0; + height: 2px; + background: var(--color-accent); + border-radius: 2px; +} +.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; } +.burger span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: 0.3s; } + +/* ===== HERO ===== */ +.hero { padding: 80px 0 60px; } +.hero-content { max-width: 800px; } +.hero-tag { + display: inline-block; + padding: 6px 16px; + background: var(--color-accent-soft); + color: var(--color-accent); + border-radius: 50px; + font-size: 13px; + font-weight: 600; + margin-bottom: 24px; +} +.hero-title { + font-size: clamp(32px, 5vw, 56px); + font-weight: 800; + line-height: 1.1; + margin-bottom: 20px; + letter-spacing: -0.02em; +} +.hero-subtitle { + font-size: clamp(16px, 2vw, 19px); + color: var(--color-text-muted); + margin-bottom: 32px; + max-width: 640px; +} +.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; } +.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; } +.stat-num { font-size: 28px; font-weight: 800; color: var(--color-accent); } +.stat-label { font-size: 13px; color: var(--color-text-muted); } + +/* ===== SECTIONS ===== */ +.section { padding: 80px 0; } +.section-title { + font-size: clamp(28px, 4vw, 42px); + font-weight: 800; + margin-bottom: 16px; + text-align: center; + letter-spacing: -0.02em; +} +.section-subtitle { text-align: center; color: var(--color-text-muted); margin-bottom: 48px; font-size: 17px; } + +/* ===== BENEFITS ===== */ +.benefits { background: var(--color-bg-alt); } +.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; } +.benefit-card { + padding: 32px 24px; + background: var(--color-bg); + border-radius: var(--radius); + transition: 0.3s; +} +.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } +.benefit-icon { font-size: 36px; margin-bottom: 16px; } +.benefit-card h3 { font-size: 19px; margin-bottom: 8px; font-weight: 700; } +.benefit-card p { color: var(--color-text-muted); font-size: 15px; } + +/* ===== FOR WHOM ===== */ +.for-whom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 48px; } +.for-whom-card { + padding: 40px 32px; + background: var(--color-bg-alt); + border-radius: var(--radius); + border: 1px solid var(--color-border); +} +.for-whom-tag { + display: inline-block; + padding: 6px 14px; + background: var(--color-accent-soft); + border-radius: 50px; + font-size: 13px; + font-weight: 600; + margin-bottom: 16px; +} +.for-whom-card h3 { font-size: 24px; margin-bottom: 16px; } +.for-whom-card ul { margin-bottom: 24px; } +.for-whom-card li { + padding: 8px 0 8px 24px; + position: relative; + font-size: 15px; +} +.for-whom-card li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--color-accent); + font-weight: 700; +} + +/* ===== PRICING ===== */ +.pricing { background: var(--color-bg-alt); } +.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; } +.price-card { + padding: 36px 28px; + background: var(--color-bg); + border-radius: var(--radius); + border: 2px solid transparent; + position: relative; + display: flex; + flex-direction: column; + transition: 0.3s; +} +.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } +.price-card.featured { border-color: var(--color-accent); background: #fff; } +.price-badge { + position: absolute; + top: -12px; left: 50%; + transform: translateX(-50%); + background: var(--color-accent); + color: #fff; + padding: 4px 16px; + border-radius: 50px; + font-size: 12px; + font-weight: 600; +} +.price-name { font-size: 24px; font-weight: 800; margin-bottom: 4px; } +.price-desc { color: var(--color-text-muted); font-size: 14px; margin-bottom: 20px; } +.price-features { font-size: 14px; margin-bottom: 24px; flex-grow: 1; color: var(--color-text-muted); } +.price-value { font-size: 32px; font-weight: 800; color: var(--color-accent); margin-bottom: 20px; } +.pricing-note { + margin-top: 40px; + padding: 24px; + background: var(--color-accent-soft); + border-radius: var(--radius); + text-align: center; +} +.pricing-note p { margin: 6px 0; font-size: 15px; } + +/* ===== PROCESS ===== */ +.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: 48px; } +.step { + padding: 28px 20px; + background: var(--color-bg-alt); + border-radius: var(--radius); + position: relative; +} +.step-num { + font-family: var(--font-hand); + font-size: 48px; + color: var(--color-accent); + line-height: 1; + margin-bottom: 12px; +} +.step h3 { font-size: 17px; margin-bottom: 8px; } +.step p { font-size: 14px; color: var(--color-text-muted); } + +/* ===== CTA ===== */ +.cta { background: var(--color-bg-alt); } +.cta-box { + background: linear-gradient(135deg, var(--color-accent) 0%, #B30000 100%); + color: #fff; + padding: 60px 40px; + border-radius: var(--radius); + text-align: center; +} +.cta-box h2 { font-size: clamp(24px, 4vw, 36px); margin-bottom: 12px; } +.cta-box p { font-size: 17px; margin-bottom: 28px; opacity: 0.95; } +.cta-box .btn-primary { background: #fff; color: var(--color-accent); } +.cta-box .btn-primary:hover { background: var(--color-bg); } + +/* ===== PAGE HERO ===== */ +.page-hero { padding: 80px 0 40px; text-align: center; } +.page-title { font-size: clamp(32px, 5vw, 48px); font-weight: 800; margin-bottom: 16px; } +.page-subtitle { font-size: 18px; color: var(--color-text-muted); max-width: 640px; margin: 0 auto; } + +/* ===== SERVICES PAGE ===== */ +.service-block { padding: 60px 0; } +.service-block.alt { background: var(--color-bg-alt); } +.service-head { text-align: center; max-width: 720px; margin: 0 auto 48px; } +.service-tag { + display: inline-block; + padding: 6px 16px; + background: var(--color-accent-soft); + color: var(--color-accent); + border-radius: 50px; + font-size: 13px; + font-weight: 600; + margin-bottom: 16px; +} +.service-head h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 12px; } +.service-lead { font-size: 17px; color: var(--color-text-muted); } +.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 32px; } +.service-card { + padding: 28px 24px; + background: var(--color-bg); + border-radius: var(--radius); + border: 1px solid var(--color-border); +} +.service-block.alt .service-card { background: var(--color-bg); } +.service-card h3 { font-size: 18px; margin-bottom: 10px; } +.service-card p { font-size: 14px; color: var(--color-text-muted); } +.service-cta { text-align: center; margin-top: 32px; } + +/* ===== EXTRAS ===== */ +.extras-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 12px; + margin-top: 32px; + max-width: 800px; + margin-left: auto; + margin-right: auto; +} +.extra-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + background: var(--color-bg-alt); + border-radius: 12px; + border: 1px solid var(--color-border); +} +.extra-name { font-size: 15px; font-weight: 500; } +.extra-price { font-weight: 700; color: var(--color-accent); } + +/* ===== PORTFOLIO ===== */ +.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } +.work-card { + background: var(--color-bg-alt); + border-radius: var(--radius); + overflow: hidden; + transition: 0.3s; + border: 1px solid var(--color-border); +} +.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } +.work-media { + aspect-ratio: 16/9; + background: linear-gradient(135deg, #2C2C2C, #444); + display: flex; + align-items: center; + justify-content: center; + color: #fff; +} +.work-placeholder { font-size: 18px; opacity: 0.7; } +.work-info { padding: 24px; } +.work-tag { + display: inline-block; + padding: 4px 12px; + background: var(--color-accent-soft); + color: var(--color-accent); + border-radius: 50px; + font-size: 12px; + font-weight: 600; + margin-bottom: 12px; +} +.work-info h3 { font-size: 19px; margin-bottom: 8px; } +.work-info p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 16px; } +.work-meta { display: flex; gap: 16px; font-size: 13px; color: var(--color-text-muted); padding-top: 16px; border-top: 1px solid var(--color-border); } + +/* ===== REVIEWS ===== */ +.reviews { background: var(--color-bg-alt); } +.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; } +.review-card { + padding: 28px 24px; + background: var(--color-bg); + border-radius: var(--radius); + border: 1px solid var(--color-border); +} +.review-stars { color: #FFB800; font-size: 18px; margin-bottom: 12px; letter-spacing: 2px; } +.review-text { font-size: 15px; margin-bottom: 20px; font-style: italic; } +.review-name { font-weight: 700; font-size: 15px; } +.review-role { font-size: 13px; color: var(--color-text-muted); } +.cta-inline { + margin-top: 48px; + text-align: center; + padding: 40px 24px; + background: var(--color-accent-soft); + border-radius: var(--radius); +} +.cta-inline h3 { font-size: 24px; margin-bottom: 8px; } +.cta-inline p { margin-bottom: 20px; color: var(--color-text-muted); } + +/* ===== CONTACTS (TAPLINK) ===== */ +.contacts-page { background: linear-gradient(180deg, #F9F7F0 0%, #F5D5C8 100%); min-height: 100vh; } +.taplink { + max-width: 480px; + margin: 0 auto; + padding: 40px 20px; + text-align: center; +} +.taplink-logo { margin-bottom: 32px; } +.logo-bird-big { font-size: 64px; display: block; margin-bottom: 12px; } +.taplink-title { + font-size: 36px; + font-weight: 800; + letter-spacing: 2px; + margin-bottom: 8px; +} +.taplink-subtitle { color: var(--color-text-muted); font-size: 15px; } +.taplink-links { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } +.taplink-btn { + display: flex; + align-items: center; + gap: 16px; + padding: 18px 24px; + background: #fff; + border-radius: 16px; + box-shadow: var(--shadow); + transition: 0.25s; + text-align: left; +} +.taplink-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } +.taplink-icon { font-size: 28px; flex-shrink: 0; } +.taplink-text { display: flex; flex-direction: column; } +.taplink-text strong { font-size: 16px; font-weight: 700; } +.taplink-text span { font-size: 13px; color: var(--color-text-muted); } + +.taplink-telegram:hover { background: #229ED9; color: #fff; } +.taplink-telegram:hover .taplink-text span { color: rgba(255,255,255,0.8); } +.taplink-whatsapp:hover { background: #25D366; color: #fff; } +.taplink-whatsapp:hover .taplink-text span { color: rgba(255,255,255,0.8); } +.taplink-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; } +.taplink-instagram:hover .taplink-text span { color: rgba(255,255,255,0.8); } +.taplink-vk:hover { background: #0077FF; color: #fff; } +.taplink-vk:hover .taplink-text span { color: rgba(255,255,255,0.8); } + +.taplink-info { + background: #fff; + padding: 24px; + border-radius: var(--radius); + margin-bottom: 24px; + text-align: left; +} +.taplink-info h3 { font-size: 18px; margin-bottom: 12px; text-align: center; } +.taplink-info li { padding: 6px 0; font-size: 14px; } + +.taplink-legal { + display: flex; + justify-content: center; + gap: 20px; + margin-bottom: 16px; + font-size: 13px; +} +.taplink-legal a { color: var(--color-text-muted); } +.taplink-legal a:hover { color: var(--color-accent); } +.taplink-footer { font-size: 12px; color: var(--color-text-muted); } + +/* ===== LEGAL PAGE ===== */ +.legal-page { padding: 60px 0 80px; } +.legal-page .container { max-width: 800px; } +.legal-section { margin-bottom: 48px; } +.legal-section h2 { font-size: 28px; margin-bottom: 8px; } +.legal-section h3 { font-size: 18px; margin: 24px 0 10px; color: var(--color-accent); } +.legal-section p, .legal-section li { font-size: 15px; margin-bottom: 10px; } +.legal-section ul { padding-left: 20px; list-style: disc; } +.legal-date { color: var(--color-text-muted); font-size: 14px; font-style: italic; margin-bottom: 20px; } + +/* ===== FOOTER ===== */ +.footer { background: #1A1A1A; color: #ccc; padding: 60px 0 0; margin-top: 40px; } +.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; } +.footer .logo { color: #fff; margin-bottom: 12px; } +.footer-about { font-size: 14px; color: #999; } +.footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; } +.footer-col a { display: block; padding: 4px 0; font-size: 14px; color: #999; } +.footer-col a:hover { color: var(--color-accent); } +.footer-bottom { border-top: 1px solid #333; padding: 20px 0; text-align: center; font-size: 13px; color: #666; } + +/* ===== COOKIE BANNER ===== */ +.cookie-banner { + position: fixed; + bottom: 20px; + left: 20px; + right: 20px; + max-width: 480px; + background: #fff; + padding: 16px 20px; + border-radius: 12px; + box-shadow: 0 8px 32px rgba(0,0,0,0.15); + display: flex; + align-items: center; + gap: 16px; + z-index: 1000; + transform: translateY(150%); + transition: transform 0.4s ease; +} +.cookie-banner.show { transform: translateY(0); } +.cookie-banner.hidden { display: none; } +.cookie-text { font-size: 13px; flex-grow: 1; } +.cookie-text a { color: var(--color-accent); text-decoration: underline; } +.cookie-btn { + background: var(--color-accent); + color: #fff; + padding: 8px 20px; + border-radius: 50px; + font-size: 13px; + font-weight: 600; + flex-shrink: 0; +} +.cookie-btn:hover { background: #B30000; } + +/* ===== RESPONSIVE ===== */ +@media (max-width: 900px) { + .footer-inner { grid-template-columns: 1fr 1fr; } +} + +@media (max-width: 768px) { + .nav { + display: none; + position: absolute; + top: 100%; + left: 0; right: 0; + background: var(--color-bg); + flex-direction: column; + padding: 20px; + gap: 16px; + border-bottom: 1px solid var(--color-border); + } + .nav.open { display: flex; } + .burger { display: flex; } + .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } + .burger.open span:nth-child(2) { opacity: 0; } + .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } + .header .btn { display: none; } + .hero { padding: 40px 0; } + .section { padding: 50px 0; } + .hero-stats { gap: 24px; } + .stat-num { font-size: 22px; } + .footer-inner { grid-template-columns: 1fr; gap: 24px; } + .cta-box { padding: 40px 24px; } + .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; } +} + +@media (max-width: 480px) { + .hero-actions { flex-direction: column; } + .hero-actions .btn { width: 100%; } + .btn-lg { padding: 16px 24px; font-size: 15px; } + .taplink-title { font-size: 28px; } + .taplink-btn { padding: 14px 18px; } +} \ No newline at end of file diff --git a/html/img/favicon.svg b/html/img/favicon.svg new file mode 100644 index 0000000..d26949a --- /dev/null +++ b/html/img/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..678a8c1 --- /dev/null +++ b/html/index.html @@ -0,0 +1,311 @@ + + + + + + Студия мультфильмов О'ляпка — ИИ-анимация на заказ | Персональные мультики и реклама + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + Заказать + +
+
+ + +
+
+
+ Студия ИИ-анимации +

Создаём мультики, которые решают ваши задачи

+

Персональные подарки, реклама для бизнеса и вирусный контент для соцсетей. Авторский подход, честные цены, результат за 1–4 дня.

+
+ Заказать мультик + Смотреть услуги +
+
+
1+
дня на создание
+
от 2500₽
стоимость
+
100%
авторская работа
+
+
+
+
+ + +
+
+

Почему выбирают О'ляпку

+
+
+
✨
+

Авторский подход

+

Не просто «картинки из нейросети», а полноценная история со сценарием, эмоцией и вашим уникальным стилем.

+
+
+
⚡
+

Быстро

+

Готовый мультик за 1–4 дней. В 5 раз быстрее классической анимации — без потери качества.

+
+
+
💎
+

Честные цены

+

От 2500 ₽ за короткий ролик. Никаких скрытых платежей и студийных наценок.

+
+
+
🎯
+

Решаем задачи

+

Продаём, поздравляем, влюбляют в бренд. Каждый мультик работает на вашу цель.

+
+
+
+
+ + +
+
+

Кому подходят наши мультики

+
+
+
🤍 Для души
+

Личные поводы

+
    +
  • Подарок на день рождения, годовщину, юбилей
    • +
  • Ваша Love Story в формате анимации
    • +
  • Сказка для ребёнка, где он — главный герой
    • +
  • Вирусные Reels для личного блога
    • +
+ Заказать личный мультик +
+
+
🚀 Для бизнеса
+

Коммерческие задачи

+
    +
  • Реклама, которая цепляет и останавливает скролл
    • +
  • Запуск нового направления или продукта
    • +
  • Продвижение в соцсетях и рост охватов
    • +
  • Имиджевые ролики и VIP-подарки клиентам
    • +
+ Заказать для бизнеса +
+
+
+
+ + +
+
+

Тарифы на ИИ-мультики

+

Выберите формат под вашу задачу. 1 кадр = 4–8 секунд.

+
+
+
Искры
+
Короткий мультик до 30 секунд
+
2–4 сцены • 1 раунд правок • Базовая озвучка • Формат под Reels
+
2 500 ₽
+ Заказать +
+
+
Популярный
+
История
+
От 30 секунд до 1 минуты
+
4–7 сцен • 2 раунда правок • Озвучка и музыка • Цветокоррекция
+
4 500 ₽
+ Заказать +
+
+
Сказка
+
От 1 до 2 минут
+
От 8 сцен • 3 раунда правок • Профессиональная озвучка • Титры и логотип
+
9 000 ₽
+ Заказать +
+
+
+

💡 Спецпредложение: первый тестовый мультик — со скидкой 30%. Попробуйте без риска!

+

🎁 Пакет «Контент-месяц» (4 ролика) — скидка 15%.

+
+
+
+ + +
+
+

Как мы работаем

+
+
+
01
+

Вы пишете нам

+

Рассказываете о задаче, присылаете фото и идеи. Мы уточняем детали.

+
+
+
02
+

Обсуждаем детали

+

Фиксируем стоимость, сроки и формат. Всё прозрачно и честно.

+
+
+
03
+

Создаём сценарий

+

Пишем структуру, подбираем стиль. Утверждаем с вами до старта монтажа.

+
+
+
04
+

Монтируем магию

+

Генерируем кадры, озвучиваем, собираем в единую историю.

+
+
+
05
+

Показываем результат

+

Вы смотрите, вносите правки (если нужно) и забираете готовый мультик.

+
+
+
+
+ + +
+
+
+

Готовы оживить вашу идею?

+

Напишите нам — и мы бесплатно придумаем концепцию именно для вас.

+ Заказать мультик +
+
+
+ + + + + + + \ No newline at end of file diff --git a/html/js/main.js b/html/js/main.js new file mode 100644 index 0000000..6032a77 --- /dev/null +++ b/html/js/main.js @@ -0,0 +1,72 @@ +// ===== Cookie Banner ===== +(function() { + const banner = document.getElementById('cookieBanner'); + const acceptBtn = document.getElementById('cookieAccept'); + if (!banner || !acceptBtn) return; + + const consent = localStorage.getItem('olyapka_cookies_consent'); + if (!consent) { + setTimeout(() => banner.classList.add('show'), 800); + } else { + banner.classList.add('hidden'); + } + + acceptBtn.addEventListener('click', function() { + localStorage.setItem('olyapka_cookies_consent', '1'); + banner.classList.remove('show'); + setTimeout(() => banner.classList.add('hidden'), 400); + // Goal for Yandex.Metrika + if (typeof ym !== 'undefined') ym(110606131, 'reachGoal', 'cookie_accept'); + if (typeof gtag !== 'undefined') gtag('event', 'cookie_accept'); + }); +})(); + +// ===== Mobile Menu ===== +(function() { + const burger = document.getElementById('burger'); + const nav = document.getElementById('nav'); + if (!burger || !nav) return; + + burger.addEventListener('click', function() { + burger.classList.toggle('open'); + nav.classList.toggle('open'); + }); + + // Close on link click + nav.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', () => { + burger.classList.remove('open'); + nav.classList.remove('open'); + }); + }); +})(); + +// ===== Goal Tracking (Yandex.Metrika + GA) ===== +(function() { + document.addEventListener('click', function(e) { + const target = e.target.closest('[data-goal]'); + if (!target) return; + const goal = target.getAttribute('data-goal'); + if (!goal) return; + + // Yandex.Metrika + if (typeof ym !== 'undefined') { + try { ym(110606131, 'reachGoal', goal); } catch(err) {} + } + // Google Analytics + if (typeof gtag !== 'undefined') { + try { gtag('event', goal); } catch(err) {} + } + }); +})(); + +// ===== Smooth scroll for anchor links ===== +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const target = document.querySelector(this.getAttribute('href')); + if (target) { + e.preventDefault(); + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }); +}); \ No newline at end of file diff --git a/html/legal.html b/html/legal.html new file mode 100644 index 0000000..57fdfd4 --- /dev/null +++ b/html/legal.html @@ -0,0 +1,150 @@ + + + + + + Юридические документы — Политика cookies и Пользовательское соглашение | Студия О'ляпка + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ +
+
+

Юридические документы

+ + + + +
+
+ + + + + + \ No newline at end of file diff --git a/html/portfolio.html b/html/portfolio.html new file mode 100644 index 0000000..fd4f17f --- /dev/null +++ b/html/portfolio.html @@ -0,0 +1,240 @@ + + + + + + Примеры работ и отзывы — Студия мультфильмов О'ляпка + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + Заказать + +
+
+ +
+
+
+

Наши работы

+

Каждый мультик — это уникальная история. Смотрите примеры и вдохновляйтесь.

+
+
+ + +
+
+
+
+
+
▶ Видео: Love Story
+
+
+ 💍 Love Story +

История Анны и Дмитрия

+

Романтичный мультик о знакомстве пары, который Дмитрий подарил Анне на годовщину. 1 минута, 6 сцен, авторская озвучка.

+
+ Тариф: История + 4 500 ₽ +
+
+
+
+
+
▶ Видео: Реклама студии
+
+
+ 🚀 Для бизнеса +

Рекламный ролик для детской массажной студии

+

Показали пользу массажа через метафору: малыш растёт, а вместе с ним расцветает и его мир. Вирусный Reels с ростом охватов в 3 раза.

+
+ Тариф: Сказка + 9 000 ₽ +
+
+
+
+
+
▶ Видео: Сказка для Миши
+
+
+ 🧸 Детская сказка +

Миша и волшебный лес

+

Персональная сказка для мальчика 5 лет, где он побеждает страх темноты. Мама плакала от счастья.

+
+ Тариф: История + 4 500 ₽ +
+
+
+
+
+
▶ Видео: Подарок маме
+
+
+ 🎁 Подарок +

Юбилей мамы — 55 лет

+

Дети подарили маме мультик о её жизни: детство в деревне, свадьба, рождение детей. 30 гостей смотрели со слезами на глазах.

+
+ Тариф: Сказка + 9 000 ₽ +
+
+
+
+
+
▶ Видео: Контент для блога
+
+
+ 📱 Для соцсетей +

Серия Reels для эксперта по детскому сну

+

4 мультика в едином стиле для контент-плана на месяц. Сохранения выросли в 5 раз, пришли новые подписчики.

+
+ Пакет «Контент-месяц» + 15 300 ₽ (со скидкой) +
+
+
+
+
+
▶ Видео: Открытка
+
+
+ ✨ Короткий +

Поздравление с Новым годом для партнёров

+

Короткая анимированная открытка для рассылки VIP-клиентам бухгалтерской компании. Тёплое и необычное решение.

+
+ Тариф: Искры + 2 500 ₽ +
+
+
+
+
+
+ + +
+
+

Что говорят клиенты

+
+
+
★★★★★
+

«Заказывали мультик на годовщину свадьбы. Муж был в полном восторге! Пересматриваем уже раз десять. Спасибо за вашу работу и душу, которую вы вкладываете!»

+
+
Анна К.
+
Love Story, тариф «История»
+
+
+
+
★★★★★
+

«Рекламный ролик для нашей студии массажа превзошёл ожидания. Клиенты пишут, что именно этот мультик убедил их прийти. Охваты в Instagram выросли в 3 раза!»

+
+
Елена М.
+
Детская массажная студия
+
+
+
+
★★★★★
+

«Сын смотрел мультик про себя и не мог оторваться. Спросил: "Мама, это я настоящий в мультике?" Сердце растаяло. Спасибо за волшебство!»

+
+
Ольга В.
+
Сказка для ребёнка
+
+
+
+
★★★★★
+

«Заказали контент-пакет на месяц. Теперь у нас не болит голова "что постить завтра". Аудитория ждёт новые серии, сохранения бьют рекорды.»

+
+
Марина Д.
+
Эксперт по детскому сну
+
+
+
+
+

Хотите так же?

+

Расскажите нам о своей идее — и мы создадим мультик, который влюбит в себя.

+ Заказать мультик +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/html/robots.txt b/html/robots.txt new file mode 100644 index 0000000..8226ca7 --- /dev/null +++ b/html/robots.txt @@ -0,0 +1,6 @@ +User-agent: * +Allow: / +Disallow: /legal.html + +Sitemap: https://olapka.ru/sitemap.xml +Host: https://olapka.ru \ No newline at end of file diff --git a/html/services.html b/html/services.html new file mode 100644 index 0000000..086f3e8 --- /dev/null +++ b/html/services.html @@ -0,0 +1,243 @@ + + + + + + Услуги студии О'ляпка — ИИ-мультики для подарков, бизнеса и соцсетей + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + Заказать + +
+
+ +
+
+
+

Наши услуги

+

Три направления, в которых мы создаём магию. Выберите то, что подходит именно вам.

+
+
+ + +
+
+
+ 🤍 Для души +

Персональные ИИ-мультики

+

Подарки, которые запоминаются на всю жизнь. Love Story, сказки для детей, поздравления близким.

+
+
+
+

🎁 Подарок на день рождения

+

Мультик, где именинник — главный герой. С его друзьями, увлечениями и вашими тёплыми словами. Забудьте про дежурные сертификаты — дарите эмоции.

+
+
+

💍 Love Story

+

Романтичная история вашей пары в формате анимации. Идеально для предложения руки и сердца, годовщины или просто чтобы сказать «люблю».

+
+
+

🧸 Сказка для ребёнка

+

Ваш малыш становится героем собственной сказки: побеждает монстров, учится чистить зубы, отправляется в волшебное путешествие.

+
+
+

📱 Контент для личного блога

+

Вирусные Reels и Stories, которые покажут ваш лайфстайл ярко и нестандартно. Алгоритмы Instagram любят такой контент.

+
+
+
+ Заказать личный мультик +
+
+
+ + +
+
+
+ 🚀 Для бизнеса +

Рекламные ИИ-мультики

+

Решаем задачи бизнеса через анимацию: от вирусной рекламы до имиджевых роликов для VIP-клиентов.

+
+
+
+

🎯 Рекламный ролик

+

Анимация, которая останавливает скролл и удерживает внимание. Покажем продукт через историю, а не через сухие факты.

+
+
+

🆕 Запуск нового направления

+

Объясним сложную услугу просто — через понятную метафору и тёплую историю. Клиенты поймут и влюбятся.

+
+
+

🏢 Имиджевый ролик

+

Выделит ваш бренд среди конкурентов, покажет инновационность и повысит лояльность клиентов.

+
+
+

🎁 VIP-подарки клиентам

+

Персональные мультики для ключевых клиентов и партнёров. То, что не выбрасывают и показывают друзьям.

+
+
+
+ Заказать для бизнеса +
+
+
+ + +
+
+
+ 📈 Для соцсетей +

Контент-пакеты для регулярного ведения

+

Серии мультиков, которые закрывают контент-план на месяц вперёд. Единый стиль, сюжетные линии, вовлечённая аудитория.

+
+
+
+

📦 Пакет «Контент-месяц»

+

4 ролика + идея единой серии. Закрывает контент-план на месяц. Скидка 15%.

+
+
+

🧵 Мультики-сериалы

+

Единая вселенная вашего бренда с повторяющимися персонажами. Аудитория ждёт продолжения.

+
+
+

🎄 Сезонные ролики

+

1 сентября, Новый год, День матери — успеваем к любому инфоповоду. Готовые шаблоны адаптируются под ваш бренд за день.

+
+
+

🔄 Вторичное использование

+

Один мультик = 1 Reels + 5 нарезок для сторис + пост в Telegram + обложка для подкаста. Контент работает везде.

+
+
+
+ Заказать контент-пакет +
+
+
+ + +
+
+

Дополнительные опции

+
+
Дополнительная сцена+800 ₽
+
Срочность (24–48 часов)+30%
+
Уникальный персонаж с нуля+1 500 ₽
+
Авторская музыка+2 000 ₽
+
Доп. раунд правок+500 ₽
+
Адаптация под 2 формата+700 ₽
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/html/sitemap.xml b/html/sitemap.xml new file mode 100644 index 0000000..8732da7 --- /dev/null +++ b/html/sitemap.xml @@ -0,0 +1,33 @@ + + + + https://olapka.ru/ + 2026-07-11 + weekly + 1.0 + + + https://olapka.ru/services.html + 2026-07-11 + monthly + 0.8 + + + https://olapka.ru/portfolio.html + 2026-07-11 + weekly + 0.8 + + + https://olapka.ru/contacts.html + 2026-07-11 + monthly + 0.7 + + + https://olapka.ru/legal.html + 2026-07-11 + yearly + 0.3 + + \ No newline at end of file