Corp/backend/templates/fishka.html
Игорь Надеин 7bd93d99c7 fix: исправлена ошибка доступа к полю username в шаблоне
- Заменено request_obj.employee.username на employee.display_name
- API возвращает full_name и display_name, но не username
- Исправлена ошибка VariableDoesNotExist при рендеринге шаблона
2025-12-29 09:16:48 +03:00

128 lines
20 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- ===== FISHKA Landing (InSales) ===== -->
<div style="margin: 0; padding: 0; background: #0b0b19; font-family: 'IBM Plex Sans',system-ui,Arial,sans-serif; color: #fff; overflow: hidden;"><!-- ===== HERO / ОБЛОЖКА ===== -->
<section style="position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: flex-start; padding: 0 8%; overflow: hidden; background-color: #0b0b19; background-image: url('https://static.tildacdn.ink/tild3438-6236-4436-b830-363139313462/__.png'); background-size: cover; background-position: center;"><!-- Контент слева -->
<div style="position: relative; z-index: 2; max-width: 640px;">
<h1 style="font-size: 46px; line-height: 1.15; font-weight: 800; margin: 0 0 18px;"><strong>АРКАДНЫЙ АВТОМАТ </strong></h1>
<h1 style="font-size: 46px; line-height: 1.15; font-weight: 800; margin: 0 0 18px;"><strong>С ПРИЗАМИ &laquo;ФИШКА&raquo;</strong></h1>
<p style="font-size: 18px; color: #cfcfe6; margin: 0 0 28px;">Создаёт поток клиентов и прибыль с первых дней установки</p>
<div style="display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 22px;"><a href="https://robotail.ru/Коммерческое_предложение_ФИШКА_26.12.pdf" rel="noopener" style="background: #f4aef5; color: #161523; text-decoration: none; font-weight: bold; padding: 14px 24px; border-radius: 8px; display: inline-block;" target="_blank"> Получить коммерческое предложение </a> <a href="#" style="border: 2px solid #f4aef5; color: #f4aef5; text-decoration: none; font-weight: bold; padding: 12px 22px; border-radius: 8px; display: inline-block;"> Рассчитать прибыль </a></div>
<div style="font-size: 14px; color: #9aa0b4;">Разработка и производство &mdash; компания Robotic Retailers<br>Россия, г. Ставрополь</div>
</div>
<!-- Автомат справа --> <!-- Декораторы/«фишки» (статично) --> <img style="position: absolute; left: 10%; top: 14%; width: 64px; opacity: .92; z-index: 1;" src="REPLACE_FISHKA_1" alt=""> <img style="position: absolute; left: 6%; top: 42%; width: 82px; opacity: .92; z-index: 1;" src="REPLACE_FISHKA_2" alt=""> <img style="position: absolute; left: 16%; top: 66%; width: 70px; opacity: .92; z-index: 1;" src="REPLACE_FISHKA_3" alt=""> <img style="position: absolute; right: 12%; top: 30%; width: 76px; opacity: .92; z-index: 1;" src="REPLACE_FISHKA_4" alt=""> <img style="position: absolute; right: 9%; top: 70%; width: 62px; opacity: .92; z-index: 1;" src="REPLACE_FISHKA_5" alt=""> <!-- Вариант 2 (упрощённый): единый фон обложки --> <!-- <div style="position:absolute;inset:0;background:url('REPLACE_HERO_FULL') right bottom / cover no-repeat;opacity:1;"></div> -->
</section>
<!-- ===== БЛОК ПРЕИМУЩЕСТВ ===== -->
<section style="background: #0c0b16; padding: 80px 8%; text-align: center;">
<h2 style="font-size: 36px; margin: 0 0 36px; color: #46b9a7; font-weight: 800;">Почему выбирают &laquo;Фишку&raquo;</h2>
<div style="display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; max-width: 1120px; margin: 0 auto;">
<div style="flex: 1 1 260px; max-width: 320px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 24px;">
<div style="color: #d7d9e6; line-height: 1.65; font-size: 17px;">Высокая окупаемость &mdash; автомат начинает приносить прибыль с первых дней установки</div>
</div>
<div style="flex: 1 1 260px; max-width: 320px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 24px;">
<div style="color: #d7d9e6; line-height: 1.65; font-size: 17px;">Современная LED-подсветка и уникальный дизайн притягивают внимание посетителей</div>
</div>
<div style="flex: 1 1 260px; max-width: 320px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 24px;">
<div style="color: #d7d9e6; line-height: 1.65; font-size: 17px;">Надёжная сборка и компоненты &mdash; стабильная работа и простой сервис</div>
</div>
</div>
</section>
<!-- ===== ОПИСАНИЕ + ГАЛЕРЕЯ ===== -->
<section style="background: #000; padding: 96px 8%; display: flex; flex-wrap: wrap; gap: 52px; align-items: center; justify-content: center;">
<div style="flex: 1 1 440px; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;"><img style="width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; display: block;" src="https://static.tildacdn.ink/tild3031-3233-4162-b962-633133646539/2_10.jpg" alt="Фишка фото 1"> <img style="width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; display: block;" src="https://static.tildacdn.ink/tild3065-6262-4635-a366-383637646332/1_14.jpg" alt="Фишка фото 2"> <img style="width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; display: block;" src="https://static.tildacdn.ink/tild3464-3162-4964-a662-623762313366/photo.jpg" alt="Фишка фото 3"> <img style="width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; display: block;" src="https://static.tildacdn.ink/tild6334-6134-4063-a262-343762366437/6_5.jpg" alt="Фишка фото 4"></div>
<div style="flex: 1 1 440px; max-width: 560px;">
<h3 style="font-size: 32px; margin: 0 0 14px; color: #46b9a7; font-weight: 900;">Аркадный автомат нового поколения</h3>
<p style="color: #d7d9e6; font-size: 17px; line-height: 1.8; margin: 0 0 10px;">&laquo;Фишка&raquo; &mdash; это аркадный автомат нового поколения, созданный для того, чтобы приносить прибыль владельцам и эмоции игрокам. Уникальная механика сочетает азарт, динамику и яркий визуальный стиль, который моментально привлекает внимание посетителей.</p>
<p style="color: #d7d9e6; font-size: 17px; line-height: 1.8; margin: 0;">Компактные размеры, простая установка и гибкая настройка сложности делают &laquo;Фишку&raquo; оптимальным выбором для ТРЦ, парков и зон отдыха.</p>
</div>
<!-- Карусель фото -->
<div style="max-width: 900px; margin: 60px auto 0; position: relative; padding: 0 60px;">
<div style="overflow: hidden; border-radius: 16px; position: relative;">
<div id="fishka-carousel-track" style="display: flex; transition: transform 0.4s; transform: translateX(0%);">
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.tildacdn.ink/tild3031-3233-4162-b962-633133646539/2_10.jpg" alt="Фишка 1"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.tildacdn.ink/tild3065-6262-4635-a366-383637646332/1_14.jpg" alt="Фишка 2"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.tildacdn.ink/tild6635-6336-4334-a232-363833633335/3_10.jpg" alt="Фишка 3"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.tildacdn.ink/tild6137-6637-4364-a135-613364356339/4_9.jpg" alt="Фишка 4"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.tildacdn.ink/tild3930-3337-4364-b562-333139666534/5_8.jpg" alt="Фишка 5"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.tildacdn.ink/tild6334-6134-4063-a262-343762366437/6_5.jpg" alt="Фишка 6"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.tildacdn.ink/tild3464-3162-4964-a662-623762313366/photo.jpg" alt="Фишка 7"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.insales-cdn.com/images/products/1/1609/2544494153/%D1%84%D1%883_.jpg" alt="Фишка 8"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.insales-cdn.com/images/products/1/7569/2544262545/%D1%84%D1%882.jpg" alt="Фишка 9"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.insales-cdn.com/images/products/1/5977/2553624409/%D0%A4%D0%B8%D1%88%D0%BA%D0%B0.jpg" alt="Фишка 10"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.insales-cdn.com/images/products/1/7553/2544262529/%D1%84%D1%888.jpg" alt="Фишка 11"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.insales-cdn.com/images/products/1/7529/2544262505/%D1%84%D1%88.jpg" alt="Фишка 12"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.insales-cdn.com/images/products/1/7545/2544262521/%D1%84%D1%887.jpg" alt="Фишка 13"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.insales-cdn.com/images/products/1/7537/2544262513/%D1%84%D1%884.jpg" alt="Фишка 14"></div>
<div style="min-width: 100%; aspect-ratio: 16/10;"><img style="width: 100%; height: 100%; object-fit: cover; display: block;" src="https://static.insales-cdn.com/images/products/1/2793/2618977001/freepik_extend_background_to_square_canvas_naturally_keepi_23960.jpeg" alt="Фишка 15"></div>
</div>
</div>
<button id="fishka-prev-btn" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.95); border: none; cursor: pointer; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.3); pointer-events: auto;"> </button> <button id="fishka-next-btn" style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.95); border: none; cursor: pointer; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.3); pointer-events: auto;"> </button>
<div id="fishka-dots-container" style="display: flex; gap: 10px; justify-content: center; margin-top: 20px;"></div>
</div>
</section>
<!-- ===== КАК ЭТО РАБОТАЕТ ===== -->
<section style="background: #f2f2f2; background-image: url('https://static.tildacdn.ink/tild3062-6535-4634-b030-306463393563/photo.png'); background-size: cover; background-position: center; background-attachment: scroll; padding: 96px 8%; text-align: center;">
<h2 style="font-size: 42px; margin: 0 0 60px; color: #fff; font-weight: 800;">Как это работает?</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; max-width: 1200px; margin: 0 auto;"><!-- Карточка 1 -->
<div style="text-align: center;"><img style="width: 80px; height: 76px; margin: 0 auto 20px; display: block;" src="https://static.insales-cdn.com/files/1/2521/105916889/original/blobid4-1762783116250.svg" alt="">
<div style="font-size: 30px; margin: 0 0 12px; color: #fff; font-weight: bold;">Красивый корпус</div>
<div style="color: #fff; font-size: 18px; line-height: 1.55;">Привлекает внимание и заставляет обратить внимание на автомат, как минимум 5% от трафика остановится с интересом</div>
</div>
<!-- Карточка 2 -->
<div style="text-align: center;"><img style="width: 84px; height: 101px; margin: 0 auto 20px; display: block;" src="https://static.insales-cdn.com/files/1/2529/105916897/original/blobid5-1762783116251.svg" alt="">
<div style="font-size: 30px; margin: 0 0 12px; color: #fff; font-weight: bold;">Оплата игры</div>
<div style="color: #fff; font-size: 18px; line-height: 1.55;">Заинтересованный игрок может оплатить игру любым удобным способом: картой, наличными, монетами</div>
</div>
<!-- Карточка 3 -->
<div style="text-align: center;"><img style="width: 84px; height: 101px; margin: 0 auto 20px; display: block;" src="https://static.insales-cdn.com/files/1/2833/105892625/original/blobid12-1762776482693.svg" alt="">
<div style="font-size: 30px; margin: 0 0 12px; color: #fff; font-weight: bold;">Выбор режима</div>
<div style="color: #fff; font-size: 18px; line-height: 1.55;">На автомате предусмотрена игра против ИИ или игра на двоих, если кто то захочет посоревноваться друг с другом</div>
</div>
<!-- Карточка 4 -->
<div style="text-align: center;"><img style="width: 84px; height: 101px; margin: 0 auto 20px; display: block;" src="https://static.insales-cdn.com/files/1/2849/105892641/original/blobid13-1762776482694.svg" alt="">
<div style="font-size: 30px; margin: 0 0 12px; color: #fff; font-weight: bold;">Сложность игры</div>
<div style="color: #fff; font-size: 18px; line-height: 1.55;">Игроку предстоит победить пять персонажей, начиная от простого и до главного босса - <strong>Фишки</strong></div>
</div>
<!-- Карточка 5 -->
<div style="text-align: center;"><img style="width: 95px; height: 105px; margin: 0 auto 20px; display: block;" src="https://static.insales-cdn.com/files/1/2537/105916905/original/blobid6-1762783116251.svg" alt="">
<div style="font-size: 30px; margin: 0 0 12px; color: #fff; font-weight: bold;">Призы</div>
<div style="color: #fff; font-size: 18px; line-height: 1.55;">Дойдя до "Самурая" - это четвертый противник, игрок получает приз в капсуле. Победив его - можно сразиться с главным боссом за приз 5000 рублей</div>
</div>
<!-- Карточка 6 -->
<div style="text-align: center;"><img style="width: 128px; height: 66px; margin: 0 auto 20px; display: block;" src="https://static.insales-cdn.com/files/1/2545/105916913/original/blobid7-1762783116252.svg" alt="">
<div style="font-size: 30px; margin: 0 0 12px; color: #fff; font-weight: bold;">Мировой рейтинг</div>
<div style="color: #fff; font-size: 18px; line-height: 1.55;">После победы игрок записывает свои результаты в общую таблицу рейтинга, что бы поучаствовать в крупном розыгрыше, соревнуясь с другими игроками во всех городах!</div>
</div>
</div>
</section>
<!-- ===== CTA ===== -->
<section style="background: linear-gradient(90deg,#46B9A7 0%,#4FD5C2 100%); padding: 78px 8%; text-align: center; color: #0e0e14;">
<h3 style="font-size: 32px; margin: 0 0 10px; font-weight: 900;">Готовы поставить &laquo;Фишку&raquo; у себя?</h3>
<p style="font-size: 18px; margin: 0 0 26px;">Получите презентацию для арендодателя и расчёт окупаемости &mdash; это быстрее, чем один раунд игры.</p>
<a href="https://robotail.ru/Фишка_презентация2.pdf" rel="noopener" style="background: #0b0b19; color: #fff; text-decoration: none; font-weight: 800; padding: 16px 32px; border-radius: 10px; display: inline-block;" target="_blank">&nbsp;Получить презентацию</a></section>
<!-- ===== ПОЧЕМУ ФИШКА ПОКОРЯЕТ СЕРДЦА ===== -->
<section style="background: #0c0b16; padding: 96px 8%; display: flex; flex-wrap: wrap; gap: 60px; align-items: center; justify-content: center;"><!-- Текстовый блок слева -->
<div style="flex: 1 1 440px; max-width: 560px;">
<h3 style="font-size: 32px; margin: 0 0 24px; color: #46b9a7; font-weight: 900; line-height: 1.3;">Почему &laquo;Фишка&raquo; покоряет сердца?</h3>
<p style="color: #d7d9e6; font-size: 20px; line-height: 1.55; margin: 0 0 20px;">Этот автомат превращает обычную игру в настоящий аттракцион эмоций. Здесь можно выиграть реальные призы &mdash; от мелких подарков до главного трофея стоимостью до 5 000 рублей или любого другого приза на выбор. Всё происходит мгновенно: выиграли &mdash; забрали!</p>
<p style="color: #d7d9e6; font-size: 20px; line-height: 1.55; margin: 0;">Игровая механика &laquo;Фишки&raquo; построена на эмоциональном драйве. Каждая победа приносит всплеск адреналина, а поражение только подогревает интерес и заставляет попробовать ещё раз. Благодаря прогрессирующей сложности уровней игра остаётся захватывающей до самого конца &mdash; скука здесь просто невозможна.</p>
</div>
<!-- Видео справа -->
<div style="flex: 1 1 440px; max-width: 560px;">
<div style="position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16/9;"><iframe style="width: 100%; height: 100%; border: none; display: block;" src="https://rutube.ru/play/embed/7da8d88a8138663df67aae805c9620d6?" frameborder="0" allow="fullscreen; picture-in-picture; encrypted-media" allowfullscreen="allowfullscreen">
</iframe></div>
<p style="color: #d7d9e6; font-size: 15px; line-height: 1.5; margin: 16px 0 0; text-align: left;">Обзорное видео призового автомата Фишка</p>
<p style="color: #9aa0b4; font-size: 11px; line-height: 1.5; margin: 6px 0 0; text-align: left;">Разработан компанией Robotic Retailers в 2025 году</p>
</div>
</section>
<!-- ===== ВИДЕО ФУЛСКРИН ===== -->
<section style="position: relative; width: 100%; height: 100vh; min-height: 600px; background: #000; overflow: hidden; display: flex; align-items: flex-end; padding: 0;"><!-- Видео контейнер -->
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;"><iframe id="rutube-player" style="position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); border: none;" src="https://rutube.ru/play/embed/eb08e2b4056f3e7e84687a6b622769f3/?autoplay=1&amp;muted=1&amp;controls=0&amp;loop=1&amp;t=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen="allowfullscreen">
</iframe></div>
<!-- Текст поверх видео -->
<div style="position: relative; z-index: 2; width: 100%; padding: 48px 8%; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);">
<h3 style="font-size: 36px; color: #fff; margin: 0; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,0.5);">&laquo;Фишка&raquo; by Robotic Retailers</h3>
</div>
</section>
</div>
<!-- ===== Простая адаптация ===== -->