PageSourceSearch

https://admin.webbot.shop/register

html webbot.shop collected 2026-10-06 08:00:44 UTC 72,919 bytes, 2,055 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ru" data-controller="html-load" dir="ltr">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
7    <title>
8        Регистрация                    - Webbot
9            </title>
10    <meta name="csrf_token" content="fbg8cXCVuc1dv2K4m2VutTnJaLkOIX0aEMnYMBnB" id="csrf_token">
11    <meta name="auth" content="" id="auth">
12            <link rel="stylesheet" type="text/css" href="/vendor/orchid/css/orchid.css?id=bfce7424e6595af883fb7f593589bda3">
13    
14    
15    <meta name="turbo-root" content="/">
16    <meta name="dashboard-prefix" content="/">
17
18            <meta name="turbo-cache-control" content="no-cache">
19    
20    
20<script src="/vendor/orchid/js/manifest.js?id=a0cf0beb2ef26ed536c04092e6558f2a" type="text/javascript"></script>
20
21    
21<script src="/vendor/orchid/js/vendor.js?id=c414ffce9f6a3942d105e7668697681c" type="text/javascript"></script>
21
22    
22<script src="/vendor/orchid/js/orchid.js?id=5f0a589d00b04988c1bd4f4ca6622f55" type="text/javascript"></script>
22
23
24            <link rel="stylesheet" href="/vendor/orchid/css/admin.css?v1.22.2">
25    
26    
27            
27<script src="/vendor/popper.min.js?v=1.22.1" defer type="text/javascript"></script>
27
28            
28<script src="/vendor/tippy-bundle.umd.min.js?v=1.22.1" defer type="text/javascript"></script>
28
29            
29<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer type="text/javascript"></script>
29
30    
31    </head>
32
33<body class="page-generatedx0hmji1wtc6tvnuk" data-controller="pull-to-refresh">
34
35<div class="
36            wb-page
37            
38
39" data-controller="" >
40        <header class="wb-auth-header">
41    <div class="container">
42        <div class="wb-row wb-row-header">
43            <div class="wb-header-logo">
44                <img src="/images/admin-logo.svg" alt="WebBot Logo">
45            </div>
46            <div class="wb-header-text">Бесплатный конструктор магазина в Телеграм и MAX</div>
47        </div>
48    </div>
49</header>
50<style>
51    .wb-row {
52        display: flex;
53        flex-direction: row;
54    }
55    .wb-auth-header {
56        background: #fff;
57        border-bottom: 1px solid var(--icons-gray);
58        padding-top: 20px;
59        padding-bottom: 20px;
60    }
61    .wb-header-logo {
62        margin-right: 40px;
63    }
64    .wb-header-text {
65        max-width: 250px;
66        color: var(--text-gray);
67        font-size: 18px;
68        font-style: normal;
69        font-weight: 400;
70        line-height: normal;
71    }
72
73    .wb-page {
74        background: var(--background-light-blue);
75    }
76
77    @media screen and (max-width: 768px) {
78        .wb-row-header {
79            flex-wrap: wrap;
80        }
81        .wb-header-text {
82            padding-top: 14px;
83            font-size: 14px;
84            max-width: 100%;
85        }
86        .wb-auth-header {
87            padding-top: 10px;
88            padding-bottom: 10px;
89        }
90    }
91</style>
92    <div class="row d-md-flex h-100">
93        
94        <div class="col-xxl
95                    ">
96                <style>
97        .wb-auth-page {
98            padding-top: 115px;
99        }
100
101        .wb-auth-promo {
102            flex-grow: 1;
103        }
104
105        .wb-auth-promo-title {
106            color: var(--text-black);
107            font-size: 44px;
108            font-weight: 700;
109            line-height: normal;
110            letter-spacing: 0.44px;
111            margin-bottom: 20px;
112            max-width: 550px;
113        }
114
115        .wb-auth-promo-title span {
116            color: var(--text-lavander);
117        }
118
119        .wb-auth-promo-text {
120            color: var(--text-black);
121            font-size: 18px;
122            font-style: normal;
123            font-weight: 400;
124            line-height: normal;
125            max-width: 500px;
126        }
127
128        .wb-auth-promo-devices {
129            position: relative;
130        }
131
132        .wb-auth-promo-macbook {
133            top: 80px;
134            position: absolute;
135            width: 520px;
136            left: -50px;
137            z-index: 1;
138            filter: drop-shadow(0px 50px 54px rgba(34, 51, 110, 0.15)) drop-shadow(0px 13px 10px rgba(0, 0, 0, 0.05));
139        }
140
141        .wb-auth-promo-iphone {
142            top: 40px;
143            width: 112px;
144            left: 360px;
145            z-index: 3;
146            position: absolute;
147            filter: drop-shadow(0px 50px 54px rgba(34, 51, 110, 0.15)) drop-shadow(0px 13px 10px rgba(0, 0, 0, 0.05));
148        }
149
150        .wb-auth-promo-ipad {
151            top: -10px;
152            width: 300px;
153            position: absolute;
154            z-index: 2;
155            left: 490px;
156            filter: drop-shadow(0px 50px 54px rgba(34, 51, 110, 0.15)) drop-shadow(0px 13px 10px rgba(0, 0, 0, 0.05));
157        }
158
159        .wb-auth-form {
160            border-radius: 20px;
161            background: #ffffff;
162            box-shadow: 0px 50px 54px -70px rgba(34, 51, 110, 0.15), 0px 13px 10px -10px rgba(0, 0, 0, 0.05);
163            width: 470px;
164            padding: 40px;
165        }
166
167        .wb-auth-form-field {
168            margin-bottom: 20px;
169        }
170
171        .wb-auth-form-title {
172            color: var(--text-black);
173            font-size: 42px;
174            font-style: normal;
175            font-weight: 700;
176            line-height: normal;
177            letter-spacing: 0.44px;
178            margin-bottom: 20px;
179            text-align: center;
180        }
181
182        .wb-auth-form-label,
183        .wb-auth-form .form-label {
184            color: var(--text-gray);
185            font-size: 16px;
186            font-style: normal;
187            font-weight: 400;
188            line-height: normal;
189            letter-spacing: 0.32px;
190            margin-bottom: 8px;
191        }
192
193        .wb-auth-form-input,
194        .wb-auth-form .form-control {
195            border-radius: 10px;
196            border: 1px solid var(--stroke-blue);
197            background: var(--background-light-blue);
198            padding: 10px 20px;
199            color: var(--text-black);
200            font-size: 18px;
201            font-style: normal;
202            font-weight: 400;
203            line-height: normal;
204            width: 100%;
205        }
206
207        .wb-auth-button,
208        #button-login {
209            border-radius: 10px;
210            background: linear-gradient(225deg, #6B34B1 0%, #3CADFF 100%);
211            padding: 10px 30px;
212            color: var(--text-white) !important;
213            font-size: 22px !important;
214            font-weight: 600;
215            line-height: normal;
216            border: none;
217        }
218
219        #button-login svg {
220            display: none;
221        }
222
223        .wb-auth-form-text {
224            color: var(--text-black, #172849);
225            font-size: 15px;
226            font-style: normal;
227            font-weight: 400;
228            line-height: normal;
229            letter-spacing: 0.24px;
230            margin-bottom: 40px;
231            text-align: center;
232        }
233
234        .wb-auth-form-text a {
235            color: var(--text-lavander);
236        }
237
238        .wb-auth-form-text a:hover {
239            text-decoration: underline;
240            color: var(--text-lavander);
241        }
242
243        .wb-auth-form-or {
244            display: flex;
245            position: relative;
246            justify-content: center;
247            margin-top: 20px;
248            margin-bottom: 20px;
249        }
250
251        .wb-auth-form-or:before {
252            content: '';
253            position: absolute;
254            top: 50%;
255            z-index: 0;
256            background: #DFE4EB;
257            height: 1px;
258            display: block;
259            width: 100%;
260        }
261
262        .wb-auth-form-or span {
263            color: var(--text-gray);
264            font-size: 16px;
265            font-weight: 400;
266            line-height: normal;
267            letter-spacing: 0.32px;
268            padding: 0 10px;
269            background: #fff;
270            z-index: 1;
271        }
272
273        .form-check-input:checked {
274            background-color: var(--text-lavander) !important;
275            border-color: var(--text-lavander) !important;
276        }
277
278        .form-check-label {
279            white-space: normal;
280        }
281
282        .wb-auth-footer {
283            display: flex;
284            justify-content: space-between;
285            margin-top: 260px;
286            color: var(--text-gray, #7E8B9A);
287            font-size: 16px;
288            font-style: normal;
289            font-weight: 400;
290            line-height: normal;
291            letter-spacing: 0.32px;
292            margin-bottom: 40px;
293        }
294
295        .wb-auth-footer a {
296            color: var(--text-black);
297        }
298
299        .restore-password {
300            color: var(--text-lavander);
301            font-size: 14px;
302            font-style: normal;
303            font-weight: 400;
304            line-height: normal;
305            letter-spacing: 0.24px;
306            border: none;
307            text-decoration: none;
308            background: none;
309        }
310
311        .row.d-md-flex.h-100 {
312            height: auto!important;
313        }
314
315        @media (max-width: 1400px) {
316            .wb-auth-promo-ipad {
317                display: none;
318            }
319
320        }
321
322        @media screen and (max-width: 1200px) {
323            .wb-auth-page {
324                padding-top: 60px;
325            }
326        }
327
328        @media (max-width: 992px) {
329            .wb-auth-row {
330                flex-wrap: wrap;
331                justify-content: center;
332            }
333            .wb-auth-promo {
334                max-width: 470px;
335            }
336
337            .wb-auth-promo-devices {
338                display: none;
339            }
340
341            .wb-auth-form {
342                margin-top: 60px;
343            }
344
345            .wb-auth-promo-title {
346                font-size: 36px;
347            }
348        }
349
350        @media (max-width: 768px) {
351            .wb-auth-form {
352                padding: 30px;
353            }
354            .wb-auth-form-title {
355                font-size: 36px;
356            }
357            .wb-auth-form {
358                margin-top: 40px;
359            }
360            .wb-auth-promo-text {
361                font-size: 16px;
362            }
363            .wb-auth-form-input, .wb-auth-form .form-control {
364                font-size: 15px;
365            }
366        }
367    </style>
368
369    <div class="wb-auth-page">
370        <div class="container">
371            <div class="wb-row wb-auth-row">
372                <div class="wb-auth-promo">
373                    <h1 class="wb-auth-promo-title">    Создай <span>бесплатно</span> свой магазин в Телеграм и MAX
374</h1>
375                    <div class="wb-auth-promo-text">    Начни продавать свои товары или услуги в популярных мессенджерах.  Управляй магазином через удобную админ-панель с любых устройств
376</div>
377                    <div class="wb-auth-promo-devices">
378                        <img src="/images/auth/macbook.png" alt="" class="wb-auth-promo-macbook">
379                        <img src="/images/auth/iphone.png" alt="" class="wb-auth-promo-iphone">
380                        <img src="/images/auth/ipad.png" alt="" class="wb-auth-promo-ipad">
381                    </div>
382                </div>
383                <div class="wb-auth-form">
384                    
385    <div class="wb-auth-form-title">
386        Регистрация
387    </div>
388
389    <div class="wb-auth-form-text">
390        Уже есть аккаунт? <a href="/login" data-turbo="false">Войти</a>
391    </div>
392
393
394
395    
395<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
395
396    <form class="m-t-md"
397          role="form"
398          method="POST"
399          data-controller="form"
400          data-action="form#submit"
401          data-form-button-animate="#button-login"
402          data-form-button-text="Загрузка..."
403          action="/register">
404        <input type="hidden" name="tz_offset" id="tz_offset"/>
405        <input type="hidden" name="_token" value="fbg8cXCVuc1dv2K4m2VutTnJaLkOIX0aEMnYMBnB" autocomplete="off">        <input type="hidden" class="recap" name="recap">
406        <div class="wb-auth-form-field">
407
408            <label class="wb-auth-form-label">
409                Email
410            </label>
411
412            <div class="form-group">
413    
414    <div data-controller="input"
415         data-input-mask=""
416    >
417        <input class="wb-auth-form-input" name="email" type="email" required="required" tabindex="1" autofocus="autofocus" placeholder="[email protected]" id="field-email-18befe984b742869956555da226dd2c5c3f36f8b">
418    </div>
419
420    
421    </div>
422
423
424        </div>
425
426        <div class="wb-auth-form-field">
427            <label class="wb-auth-form-label">
428                Пароль
429            </label>
430
431            <div class="form-group">
432    
433    <div data-controller="password"
434         class="input-icon"
435    >
436        <input type="password" class="wb-auth-form-input" name="password" required="required" tabindex="2" id="field-password-70216d978790cadfcb078f195c164108999ce759" data-password-target="password">
437        <div class="input-icon-addon cursor" data-action="click->password#change">
438
439            <span data-password-target="iconShow">
440                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="small me-2" viewBox="0 0 16 16" role="img" id="field-password-70216d978790cadfcb078f195c164108999ce759" path="bs.eye" componentName="orchid-icon">
441  <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"></path>
442  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"></path>
443</svg>
444
445            </span>
446
447            <span data-password-target="iconLock" class="none">
448                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="small me-2" viewBox="0 0 16 16" role="img" id="field-password-70216d978790cadfcb078f195c164108999ce759" path="bs.eye-slash" componentName="orchid-icon">
449  <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"></path>
450  <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"></path>
451  <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"></path>
452</svg>
453
454            </span>
455        </div>
456    </div>
457
458    
459    </div>
460
461
462        </div>
463
464        <div class="d-flex justify-content-center w-100 mt-4">
465            <button id="button-login" type="submit" class="wb-auth-button" tabindex="3">
466                Зарегистрироваться
467            </button>
468        </div>
469
470        <div class="wb-auth-form-or">
471            <span>или</span>
472        </div>
473
474        <div class="">
475            <div id="ya-container" style="height: 44px;overflow: hidden;"></div>
476        </div>
477
478
479        <div class="row align-items-center">
480            <div class="mt-4">
481                <div class="form-group">
482    
483    <div data-controller="checkbox"
484         data-checkbox-indeterminate="">
485                    <div class="form-check">
486                <input type="checkbox" class="form-check-input" novalue="0" yesvalue="1" name="confirm" required="required" checked="checked" placeholder="Нажимая на кнопку, вы принимаете пользовательское соглашение и политику конфиденциальности" id="field-confirm-c0ede1289765d7c15d45ddbd32c8f723d1e1280b"
487                                       >
488                <label class="form-check-label" for="field-confirm-c0ede1289765d7c15d45ddbd32c8f723d1e1280b">Нажимая на кнопку, вы принимаете пользовательское соглашение и политику конфиденциальности</label>
489            </div>
490            </div>
491
492    
493    </div>
494
495
496            </div>
497        </div>
498        <div class="row align-items-center">
499            <div class="mt-4">
500                <div class="form-group">
501    
502    <div data-controller="checkbox"
503         data-checkbox-indeterminate="">
504                    <input hidden name="marketing_consent" value="0">
505            <div class="form-check">
506                <input value="1"
507                       type="checkbox" class="form-check-input" novalue="0" yesvalue="1" name="marketing_consent" checked="checked" autocomplete="off" placeholder="Согласен на получение маркетинговых рассылок" id="field-marketing-consent-f07bbc7e1bd2cd063fa79a9af4c524713edf47a0"
508                                       >
509                <label class="form-check-label" for="field-marketing-consent-f07bbc7e1bd2cd063fa79a9af4c524713edf47a0">Согласен на получение маркетинговых рассылок</label>
510            </div>
511            </div>
512
513    
514    </div>
515
516
517            </div>
518        </div>
519
520    </form>
vendor: 69 bytes, lines 520-521
520
521        <script src="https://www.google.com/recaptcha/api.js?render=
5216LcsUNYhAAAAANKbXcsk_nYC-Fm9lgsS709Ztszx
vendor: 20 bytes, lines 521-522
521"></script>
522        
522<script>
523            grecaptcha.ready(function () {
524                grecaptcha.execute('6LcsUNYhAAAAANKbXcsk_nYC-Fm9lgsS709Ztszx', {action: 'homepage'}).then(function (token) {
525                    document.querySelector('.recap').value = token;
526                    console.log('token', token)
527                });
528            });
529        </script>
529
530    <style>
531        .grecaptcha-badge {
532            display: none !important;
533        }
534    </style>
535
536    
536<script>
537        addYaWidget();
538
539
540        function addYaWidget() {
541            YaAuthSuggest.init(
542                {
543                    client_id: '3f9c1e4ffea14d698e605074f1463f86',
544                    response_type: 'token',
545                    redirect_uri: 'https://admin.webbot.shop/yandex-oauth'
546                },
547                'https://admin.webbot.shop',
548                {
549                    view: 'button',
550                    parentId: 'ya-container',
551                    buttonView: 'main',
552                    buttonTheme: 'light',
553                    buttonSize: 'm',
554                    buttonBorderRadius: 10
555                }
556            )
557                .then(({
558                           handler
559                       }) => handler())
560                .then(function (data) {
561
562                    const request = new XMLHttpRequest();
563                    const url = "/yandex-login?token=" + data.access_token;
564                    request.open('GET', url);
565
566                    request.addEventListener("readystatechange", () => {
567                        if (request.readyState === 4) {
568                            window.location.reload();
569                        }
570                    });
571                    request.send();
572                })
573                .catch(error => console.error('error', error));
574        }
575    </script>
575
576                </div>
577            </div>
578        </div>
579        <div class="container">
580            <footer class="wb-auth-footer">
581                <div>
582                    © Copyright 2026
583                    <a href="https://webbot.shop/" target="_blank">WebBot.shop</a>
584                </div>
585                <div>
586                    <a href="https://admin.webbot.shop/policy.pdf" target="_blank">Политика обработки персональных
587                        данных</a>
588                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
589                    <a href="https://admin.webbot.shop/sogl.pdf" target="_blank">Пользовательское соглашение</a>
590                </div>
591
592            </footer>
593        </div>
594    </div>
595
596
597    <template id="ai-announce" style="display: none;">
598    <swal-html>
599        <div class="ai-announce">
600            <div class="ai-announce__banner">
601                <img src="https://habrastorage.org/webt/de/88/3c/de883ccc4cedd62aecc7882352554af9.jpg"
602                     alt="WebBot AI" class="ai-announce__banner-img">
603                <span class="ai-announce__badge">
604                    <span class="ai-announce__badge-dot"></span>
605                    Новая функция
606                </span>
607            </div>
608
609            <div class="ai-announce__body">
610                <h2 class="ai-announce__title">Встречайте ИИ&#8209;ассистента</h2>
611                <p class="ai-announce__subtitle">
612                    Теперь в сервисе есть искусственный интеллект, который помогает быстрее готовить контент для магазина.
613                </p>
614
615                <div class="ai-announce__features">
616                    <div class="ai-announce__feature">
617                        <div class="ai-announce__feature-icon">
618                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
619                                <path d="M20 7L12 3L4 7M20 7L12 11M20 7V17L12 21M12 11L4 7M12 11V21M4 7V17L12 21"
620                                      stroke="#0e8a94" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
621                            </svg>
622                        </div>
623                        <div class="ai-announce__feature-text">
624                            <div class="ai-announce__feature-title">Описания товаров</div>
625                            <div class="ai-announce__feature-desc">
626                                ИИ сгенерирует продающее описание товара за пару секунд — просто укажите название и ключевые особенности.
627                            </div>
628                        </div>
629                    </div>
630
631                    <div class="ai-announce__feature">
632                        <div class="ai-announce__feature-icon">
633                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
634                                <path d="M4 6H20M4 6L12 13L20 6M4 6V18H20V6" stroke="#5645d8" stroke-width="1.6"
635                                      stroke-linecap="round" stroke-linejoin="round"/>
636                            </svg>
637                        </div>
638                        <div class="ai-announce__feature-text">
639                            <div class="ai-announce__feature-title">Тексты для рассылок</div>
640                            <div class="ai-announce__feature-desc">
641                                Опишите повод — ИИ подготовит цепляющий текст рассылки для ваших покупателей.
642                            </div>
643                        </div>
644                    </div>
645                </div>
646
647                <div class="ai-announce__cta-group">
648                    <a href="https://admin.webbot.shop/products" class="ai-announce__cta ai-announce__cta--primary">
649                        Попробовать на товаре
650                    </a>
651                    <a href="https://admin.webbot.shop/mailings/create" class="ai-announce__cta ai-announce__cta--secondary">
652                        Создать рассылку
653                    </a>
654                </div>
655            </div>
656        </div>
657    </swal-html>
658</template>
659
660<script>
661
662    function sendAiDecline() {
663        const csrfToken = document.querySelector('meta[name="csrf_token"]').getAttribute('content');
664        const url = '/forms/decline?form=ai&_token=' + csrfToken;
665        return fetch(url, {method: 'POST', keepalive: true}).catch(function () {
666        });
667    }
668
669    window.showAiAnnounceModal = function () {
670        Swal.fire({
671            template: "#ai-announce",
672            showCloseButton: true,
673            showConfirmButton: false,
674            allowOutsideClick: false,
675            width: 480,
676            customClass: {popup: 'aim-swal-popup', container: 'aim-swal-container'},
677            didOpen: function () {
678                Swal.getPopup().querySelectorAll('.ai-announce__cta').forEach(function (link) {
679                    link.addEventListener('click', function (e) {
680                        e.preventDefault();
681                        const href = this.getAttribute('href');
682                        sendAiDecline().finally(function () {
683                            window.location.href = href;
684                        });
685                    });
686                });
687            },
688            willClose: function () {
689                sendAiDecline();
690            }
691        });
692    };
693
694    
695</script>
695
696
697<style>
698    div:where(.aim-swal-container) div:where(.swal2-html-container) {
699        padding: 0;
700    }
701    div:where(.swal2-container) div:where(.aim-swal-popup) {
702        padding: 0;
703        overflow: visible;
704        border-radius: 24px;
705    }
706</style>
707
708<style>
709    .ai-announce {
710        --ai-ink: #10142a;
711        --ai-ink-soft: #64708a;
712        --ai-hairline: #eceef4;
713
714        position: relative;
715        display: flex;
716        flex-direction: column;
717        width: 100%;
718        border-radius: 24px;
719        background: #ffffff;
720        color: var(--ai-ink);
721        box-shadow: 0 1px 0 rgba(16, 20, 42, 0.03), 0 24px 60px -20px rgba(16, 20, 42, 0.18);
722        overflow: hidden;
723        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
724    }
725
726    .ai-announce__banner {
727        position: relative;
728        width: 100%;
729        line-height: 0;
730    }
731
732    .ai-announce__banner-img {
733        display: block;
734        width: 100%;
735        height: 196px;
736        object-fit: cover;
737        object-position: center 42%;
738    }
739
740    .ai-announce__banner::after {
741        content: "";
742        position: absolute;
743        left: 0;
744        right: 0;
745        bottom: 0;
746        height: 64px;
747        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
748        pointer-events: none;
749    }
750
751    .ai-announce__badge {
752        position: absolute;
753        z-index: 1;
754        top: 14px;
755        left: 14px;
756        display: inline-flex;
757        align-items: center;
758        gap: 7px;
759        padding: 6px 12px;
760        border: 1px solid rgba(255, 255, 255, 0.22);
761        border-radius: 999px;
762        background: rgba(10, 14, 30, 0.55);
763        backdrop-filter: blur(6px);
764        color: #f1f4ff;
765        font-size: 11px;
766        font-weight: 700;
767        letter-spacing: 0.06em;
768        text-transform: uppercase;
769        white-space: nowrap;
770    }
771
772    .ai-announce__badge-dot {
773        width: 6px;
774        height: 6px;
775        border-radius: 50%;
776        background: #22d3ee;
777        box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.28);
778        animation: ai-blink 1.8s ease-in-out infinite;
779    }
780
781    @keyframes ai-blink {
782        0%, 100% { opacity: 1; }
783        50% { opacity: 0.4; }
784    }
785
786    .ai-announce__body {
787        display: flex;
788        flex-direction: column;
789        align-items: flex-start;
790        gap: 14px;
791        width: 100%;
792        padding: 4px 28px 28px;
793        text-align: left;
794    }
795
796    .ai-announce__title {
797        margin: 0;
798        font-size: 20px;
799        font-weight: 800;
800        letter-spacing: -0.02em;
801        line-height: 1.25;
802        color: var(--ai-ink);
803    }
804
805    .ai-announce__subtitle {
806        margin: 0;
807        width: 100%;
808        color: var(--ai-ink-soft);
809        font-size: 14.5px;
810        line-height: 1.55;
811    }
812
813    .ai-announce__features {
814        display: flex;
815        flex-direction: column;
816        gap: 10px;
817        width: 100%;
818        margin-top: 2px;
819    }
820
821    .ai-announce__feature {
822        display: grid;
823        grid-template-columns: 40px 1fr;
824        gap: 12px;
825        align-items: center;
826        padding: 14px;
827        border: 1px solid var(--ai-hairline);
828        border-radius: 16px;
829        background: #fafbfd;
830        text-align: left;
831        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
832    }
833
834    .ai-announce__feature:hover {
835        border-color: rgba(109, 91, 245, 0.22);
836        background: #ffffff;
837        box-shadow: 0 8px 20px -12px rgba(16, 20, 42, 0.18);
838    }
839
840    .ai-announce__feature-icon {
841        display: flex;
842        align-items: center;
843        justify-content: center;
844        width: 40px;
845        height: 40px;
846        border-radius: 12px;
847        background: #ffffff;
848        border: 1px solid var(--ai-hairline);
849    }
850
851    .ai-announce__feature:nth-child(1) .ai-announce__feature-icon {
852        background: rgba(20, 184, 196, 0.08);
853    }
854
855    .ai-announce__feature:nth-child(2) .ai-announce__feature-icon {
856        background: rgba(109, 91, 245, 0.08);
857    }
858
859    .ai-announce__feature-title {
860        color: var(--ai-ink);
861        font-size: 14.5px;
862        font-weight: 700;
863        margin-bottom: 3px;
864    }
865
866    .ai-announce__feature-desc {
867        color: var(--ai-ink-soft);
868        font-size: 13px;
869        line-height: 1.5;
870    }
871
872    .ai-announce__cta-group {
873        display: flex;
874        flex-direction: column;
875        gap: 10px;
876        width: 100%;
877        margin-top: 10px;
878    }
879
880    .ai-announce__cta {
881        display: inline-flex;
882        align-items: center;
883        justify-content: center;
884        border-radius: 14px;
885        padding: 13px 18px;
886        font-size: 15px;
887        font-weight: 700;
888        line-height: 1;
889        text-decoration: none;
890        cursor: pointer;
891        transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease;
892    }
893
894    .ai-announce__cta--primary {
895        border: none;
896        background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
897        color: #ffffff;
898        box-shadow: 0 14px 28px -10px rgba(34, 158, 217, 0.5);
899    }
900
901    .ai-announce__cta--primary:hover {
902        transform: translateY(-1px);
903        box-shadow: 0 18px 32px -10px rgba(34, 158, 217, 0.55);
904        color: #ffffff;
905    }
906
907    .ai-announce__cta--secondary {
908        border: 1px solid var(--ai-hairline);
909        background: #ffffff;
910        color: var(--ai-ink);
911    }
912
913    .ai-announce__cta--secondary:hover {
914        background: #f6f7fb;
915        border-color: #dfe3ee;
916        color: var(--ai-ink);
917    }
918
919    @media (max-width: 480px) {
920        .ai-announce {
921            border-radius: 20px;
922        }
923
924        .ai-announce__banner-img {
925            height: 160px;
926        }
927
928        .ai-announce__body {
929            padding: 4px 20px 22px;
930        }
931    }
932</style>
933<template id="ai-usage-quiz">
934    <swal-html>
935        <div class="aiuq">
936            <div class="aiuq__header">
937                <span class="aiuq__badge">
938                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
939                        <path d="M12 2L14.2 9.2L21 12L14.2 14.8L12 22L9.8 14.8L3 12L9.8 9.2L12 2Z"
940                              fill="currentColor"/>
941                    </svg>
942                    Опрос
943                </span>
944                <h2 class="aiuq__title">Помогите сделать ИИ ещё лучше</h2>
945                <p class="aiuq__subtitle">
946                    Вы уже успели опробовать ИИ-инструменты — три коротких вопроса, меньше минуты
947                </p>
948            </div>
949
950            <div class="aiuq__body">
951                <div class="aiuq-form">
952
953                    <div class="aiuq-progress">
954                        <div class="aiuq-progress__bar">
955                            <div class="aiuq-progress__fill" id="aiuq-progress-fill"></div>
956                        </div>
957                        <span class="aiuq-progress__label">
958                            Вопрос <span id="aiuq-step-current">1</span> из 3
959                        </span>
960                    </div>
961
962                                            <div class="aiuq-question aiuq-step active"
963                             data-step="0" data-key="rating" data-type="rating"
964                              data-required="1" >
965
966                            <p class="aiuq-question__text">
967                                Насколько вы довольны работой ИИ-функций в WebBot?
968                                                                    <span class="aiuq-required">*</span>
969                                                            </p>
970
971                                                            <div class="aiuq-stars" data-max="5">
972                                                                            <span class="aiuq-star" data-rating="1">
973                                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
974                                                <path d="M12 2.5L15.09 8.99L22.18 10.02L17.09 15.01L18.29 22.07L12 18.7L5.71 22.07L6.91 15.01L1.82 10.02L8.91 8.99L12 2.5Z"
975                                                      fill="currentColor"/>
976                                            </svg>
977                                        </span>
978                                                                            <span class="aiuq-star" data-rating="2">
979                                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
980                                                <path d="M12 2.5L15.09 8.99L22.18 10.02L17.09 15.01L18.29 22.07L12 18.7L5.71 22.07L6.91 15.01L1.82 10.02L8.91 8.99L12 2.5Z"
981                                                      fill="currentColor"/>
982                                            </svg>
983                                        </span>
984                                                                            <span class="aiuq-star" data-rating="3">
985                                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
986                                                <path d="M12 2.5L15.09 8.99L22.18 10.02L17.09 15.01L18.29 22.07L12 18.7L5.71 22.07L6.91 15.01L1.82 10.02L8.91 8.99L12 2.5Z"
987                                                      fill="currentColor"/>
988                                            </svg>
989                                        </span>
990                                                                            <span class="aiuq-star" data-rating="4">
991                                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
992                                                <path d="M12 2.5L15.09 8.99L22.18 10.02L17.09 15.01L18.29 22.07L12 18.7L5.71 22.07L6.91 15.01L1.82 10.02L8.91 8.99L12 2.5Z"
993                                                      fill="currentColor"/>
994                                            </svg>
995                                        </span>
996                                                                            <sp
996an class="aiuq-star" data-rating="5">
997                                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
998                                                <path d="M12 2.5L15.09 8.99L22.18 10.02L17.09 15.01L18.29 22.07L12 18.7L5.71 22.07L6.91 15.01L1.82 10.02L8.91 8.99L12 2.5Z"
999                                                      fill="currentColor"/>
1000                                            </svg>
1001                                        </span>
1002                                                                    </div>
1003                            
1004                            
1005                            
1006                            
1007                        </div>
1008                                            <div class="aiuq-question aiuq-step "
1009                             data-step="1" data-key="next_feature" data-type="multi_choice"
1010                              data-required="1" >
1011
1012                            <p class="aiuq-question__text">
1013                                Какую ИИ-функцию добавить в первую очередь?
1014                                                                    <span class="aiuq-required">*</span>
1015                                                            </p>
1016
1017                            
1018                            
1019                                                            <div class="aiuq-options">
1020                                                                            <label class="aiuq-option aiuq-option--checkbox">
1021                                            <input type="checkbox" name="aiuq-next_feature[]" value="photo_enhance"
1022                                                   class="aiuq-option__input">
1023                                            <span class="aiuq-option__box">
1024                                                <svg class="aiuq-option__check" viewB
1024ox="0 0 24 24" fill="none"
1025                                                     xmlns="http://www.w3.org/2000/svg">
1026                                                    <path d="M5 13L9.5 17.5L19 7" stroke="white" stroke-width="2.6"
1027                                                          stroke-linecap="round" stroke-linejoin="round"/>
1028                                                </svg>
1029                                            </span>
1030                                            <span class="aiuq-option__label">Генерация изображений (карточек товаров)</span>
1031                                        </label>
1032                                                                            <label class="aiuq-option aiuq-option--checkbox">
1033                                            <input type="checkbox" name="aiuq-next_feature[]" value="sales_analytics"
1034                                                   class="aiuq-option__input">
1035                                            <span class="aiuq-option__box">
1036                                                <svg class="aiuq-option__check" viewB
1036ox="0 0 24 24" fill="none"
1037                                                     xmlns="http://www.w3.org/2000/svg">
1038                                                    <path d="M5 13L9.5 17.5L19 7" stroke="white" stroke-width="2.6"
1039                                                          stroke-linecap="round" stroke-linejoin="round"/>
1040                                                </svg>
1041                                            </span>
1042                                            <span class="aiuq-option__label">ИИ Аналитика продаж</span>
1043                                        </label>
1044                                                                            <label class="aiuq-option aiuq-option--checkbox">
1045                                            <input type="checkbox" name="aiuq-next_feature[]" value="ai_autoreply"
1046                                                   class="aiuq-option__input">
1047                                            <span class="aiuq-option__box">
1048                                                <svg class="aiuq-option__check" viewB
1048ox="0 0 24 24" fill="none"
1049                                                     xmlns="http://www.w3.org/2000/svg">
1050                                                    <path d="M5 13L9.5 17.5L19 7" stroke="white" stroke-width="2.6"
1051                                                          stroke-linecap="round" stroke-linejoin="round"/>
1052                                                </svg>
1053                                            </span>
1054                                            <span class="aiuq-option__label">ИИ-менеджер в чате с клиентами</span>
1055                                        </label>
1056                                                                                                                <label class="aiuq-option aiuq-option--checkbox">
1057                                            <input type="checkbox" name="aiuq-next_feature[]" value="custom"
1058                                                   class="aiuq-option__input">
1059                                            <span class="aiuq-option__box">
1060                                                <svg class="aiuq-option__check" viewB
1060ox="0 0 24 24" fill="none"
1061                                                     xmlns="http://www.w3.org/2000/svg">
1062                                                    <path d="M5 13L9.5 17.5L19 7" stroke="white" stroke-width="2.6"
1063                                                          stroke-linecap="round" stroke-linejoin="round"/>
1064                                                </svg>
1065                                            </span>
1066                                            <span class="aiuq-option__label">Свой вариант</span>
1067                                        </label>
1068                                        <input type="text" class="aiuq-custom-input hidden"
1069                                               placeholder="Напишите, что имеете в виду">
1070                                                                    </div>
1071                            
1072                            
1073                        </div>
1074                                            <div class="aiuq-question aiuq-step "
1075                             data-step="2" data-key="missing_features" data-type="text"
1076                              data-required="0" >
1077
1078                            <p class="aiuq-question__text">
1079                                Что не хватило в текущих ИИ-функциях?
1080                                                            </p>
1081
1082                            
1083                            
1084                            
1085                                                            <textarea class="aiuq-text"
1086                                           rows="4"                                           placeholder="Опишите, чего не хватило  или укажите ваши пожелания"></textarea>
1087                            
1088                        </div>
1089                    
1090                    <div class="aiuq-nav">
1091                        <button type="button" id="aiuq-back" class="aiuq-nav__back hidden">Назад</button>
1092                        <button type="button" id="aiuq-next" class="aiuq-submit" disabled>
1093                            <span>Далее</span>
1094                        </button>
1095                    </div>
1096                </div>
1097
1098                <div id="aiuq-thank-you" class="hidden">
1099                    <div class="aiuq-thanks__icon">
1100                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1101                            <path d="M5 13L9.5 17.5L19 7" stroke="white" stroke-width="2.4"
1102                                  stroke-linecap="round" stroke-linejoin="round"/>
1103                        </svg>
1104                    </div>
1105                    <p class="aiuq-thanks__title">Спасибо за ответы!</p>
1106                    <p class="aiuq-thanks__text">Учтём ваше мнение при развитии ИИ-функций</p>
1107                </div>
1108            </div>
1109        </div>
1110    </swal-html>
1111</template>
1112
1113<script>
1114
1115    window.showAiUsageQuizModal = function () {
1116        Swal.fire({
1117            template: "#ai-usage-quiz",
1118            width: 480,
1119            showCloseButton: true,
1120            showConfirmButton: false,
1121            allowOutsideClick: false,
1122            customClass: {popup: 'aiuq-swal-popup', container: 'aiuq-swal-container'},
1123            didOpen: initAiUsageQuiz,
1124            willClose: function () {
1125                sendAiUsageQuizDecline();
1126            }
1127        });
1128    };
1129
1130    function sendAiUsageQuizDecline() {
1131        const csrfToken = document.querySelector('meta[name="csrf_token"]').getAttribute('content');
1132        const url = '/forms/decline?form=ai_usage_quiz&_token=' + csrfToken;
1133        return fetch(url, {method: 'POST', keepalive: true}).catch(function () {
1134        });
1135    }
1136
1137    function initAiUsageQuiz() {
1138        const popup = Swal.getPopup();
1139        const answers = {};
1140        const questionEls = popup.querySelectorAll('.aiuq-question');
1141        const steps = Array.from(questionEls);
1142        const totalSteps = steps.length;
1143        const backButton = popup.querySelector('#aiuq-back');
1144        const nextButton = popup.querySelector('#aiuq-next');
1145        const progressFill = popup.querySelector('#aiuq-progress-fill');
1146        const progressCurrent = popup.querySelector('#aiuq-step-current');
1147        const thankYou = popup.querySelector('#aiuq-thank-you');
1148        const formWrap = popup.querySelector('.aiuq-form');
1149        let currentStep = 0;
1150
1151        function isStepAnswered(el) {
1152            if (el.dataset.required !== '1') {
1153                return true;
1154            }
1155            const key = el.dataset.key;
1156            const value = answers[key];
1157            const usesCustom = Array.isArray(value) ? value.includes('custom') : value === 'custom';
1158
1159            if (Array.isArray(value)) {
1160                if (value.length === 0) {
1161                    return false;
1162                }
1163            } else if (value === undefined || value === null || value === '') {
1164                return false;
1165            }
1166
1167            if (usesCustom) {
1168                const customInput = el.querySelector('.aiuq-custom-input');
1169                if (!customInput || customInput.value.trim() === '') {
1170                    return false;
1171                }
1172            }
1173            return true;
1174        }
1175
1176        function updateNav() {
1177            nextButton.disabled = !isStepAnswered(steps[currentStep]);
1178            nextButton.querySelector('span').textContent = currentStep === totalSteps - 1 ? 'Отправить' : 'Далее';
1179            backButton.classList.toggle('hidden', currentStep === 0);
1180        }
1181
1182        function goToStep(index) {
1183            currentStep = index;
1184            steps.forEach(function (el) {
1185                el.classList.toggle('active', Number(el.dataset.step) === index);
1186            });
1187            progressFill.style.width = ((index + 1) / totalSteps * 100) + '%';
1188            progressCurrent.textContent = index + 1;
1189            updateNav();
1190        }
1191
1192        questionEls.forEach(function (el) {
1193            const key = el.dataset.key;
1194            const type = el.dataset.type;
1195
1196            if (type === 'rating') {
1197                const stars = el.querySelectorAll('.aiuq-star');
1198                stars.forEach(function (star, index) {
1199                    star.addEventListener('click', function () {
1200                        answers[key] = index + 1;
1201                        stars.forEach(function (s, i) {
1202                            s.classList.toggle('active', i <= index);
1203                        });
1204                        updateNav();
1205                    });
1206                    star.addEventListener('mouseenter', function () {
1207                        stars.forEach(function (s, i) {
1208                            s.classList.toggle('hover', i <= index);
1209                        });
1210                    });
1211                });
1212                el.querySelector('.aiuq-stars').addEventListener('mouseleave', function () {
1213                    stars.forEach(function (s) {
1214                        s.classList.remove('hover');
1215                    });
1216                });
1217            }
1218
1219            if (type === 'single_choice') {
1220                const options = el.querySelectorAll('.aiuq-option');
1221                const radios = el.querySelectorAll('input[type="radio"]');
1222                const customInput = el.querySelector('.aiuq-custom-input');
1223                radios.forEach(function (radio) {
1224                    radio.addEventListener('change', function () {
1225                        answers[key] = radio.value;
1226                        options.forEach(function (option) {
1227                            option.classList.toggle('selected', option.querySelector('input').value === radio.value);
1228                        });
1229                        if (customInput) {
1230                            customInput.classList.toggle('hidden', radio.value !== 'custom');
1231                            if (radio.value === 'custom') {
1232                                customInput.focus();
1233                            }
1234                        }
1235                        updateNav();
1236                    });
1237                });
1238                if (customInput) {
1239                    customInput.addEventListener('input', function () {
1240                        answers[key + '_custom'] = customInput.value.trim();
1241                        updateNav();
1242                    });
1243                }
1244            }
1245
1246            if (type === 'multi_choice') {
1247                const checkboxes = el.querySelectorAll('input[type="checkbox"]');
1248                const customInput = el.querySelector('.aiuq-custom-input');
1249                answers[key] = [];
1250                checkboxes.forEach(function (checkbox) {
1251                    checkbox.addEventListener('change', function () {
1252                        const option = checkbox.closest('.aiuq-option');
1253                        option.classList.toggle('selected', checkbox.checked);
1254
1255                        if (checkbox.checked) {
1256                            if (!answers[key].includes(checkbox.value)) {
1257                                answers[key].push(checkbox.value);
1258                            }
1259                        } else {
1260                            answers[key] = answers[key].filter(function (v) {
1261                                return v !== checkbox.value;
1262                            });
1263                        }
1264
1265                        if (customInput && checkbox.value === 'custom') {
1266                            customInput.classList.toggle('hidden', !checkbox.checked);
1267                            if (checkbox.checked) {
1268                                customInput.focus();
1269                            }
1270                        }
1271                        updateNav();
1272                    });
1273                });
1274                if (customInput) {
1275                    customInput.addEventListener('input', function () {
1276                        answers[key + '_custom'] = customInput.value.trim();
1277                        updateNav();
1278                    });
1279                }
1280            }
1281
1282            if (type === 'text') {
1283                const textarea = el.querySelector('.aiuq-text');
1284                textarea.addEventListener('input', function () {
1285                    answers[key] = textarea.value.trim();
1286                    updateNav();
1287                });
1288            }
1289        });
1290
1291        function submitQuiz() {
1292            const csrfToken = document.querySelector('meta[name="csrf_token"]').getAttribute('content');
1293            const params = new URLSearchParams({form: 'ai_usage_quiz', _token: csrfToken});
1294            Object.keys(answers).forEach(function (key) {
1295                const value = answers[key];
1296                if (Array.isArray(value)) {
1297                    value.forEach(function (item) {
1298                        params.append(key + '[]', item);
1299                    });
1300                } else {
1301                    params.append(key, value);
1302                }
1303            });
1304
1305            fetch('/forms?' + params.toString(), {method: 'POST'}).catch(function () {
1306            });
1307
1308            formWrap.classList.add('hidden');
1309            thankYou.classList.remove('hidden');
1310            setTimeout(function () {
1311                Swal.close();
1312            }, 1600);
1313        }
1314
1315        nextButton.addEventListener('click', function () {
1316            if (currentStep < totalSteps - 1) {
1317                goToStep(currentStep + 1);
1318                return;
1319            }
1320            submitQuiz();
1321        });
1322
1323        backButton.addEventListener('click', function () {
1324            if (currentStep > 0) {
1325                goToStep(currentStep - 1);
1326            }
1327        });
1328
1329        goToStep(0);
1330    }
1331
1332    
1333</script>
1333
1334
1335<style>
1336    div:where(.aiuq-swal-container) div:where(.swal2-html-container) {
1337        padding: 0;
1338    }
1339
1340    div:where(.swal2-container) div:where(.aiuq-swal-popup) {
1341        padding: 0;
1342        overflow: visible;
1343        border-radius: 24px;
1344    }
1345</style>
1346
1347<style>
1348    .aiuq {
1349        --aiuq-ink: #10142a;
1350        --aiuq-ink-soft: #64708a;
1351        --aiuq-hairline: #eceef4;
1352        --aiuq-accent: #5645d8;
1353        --aiuq-accent-soft: rgba(86, 69, 216, 0.08);
1354
1355        display: flex;
1356        flex-direction: column;
1357        width: 100%;
1358        border-radius: 24px;
1359        background: #ffffff;
1360        color: var(--aiuq-ink);
1361        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1362        text-align: left;
1363    }
1364
1365    .aiuq__header {
1366        position: relative;
1367        padding: 28px 28px 22px;
1368        background: linear-gradient(135deg, #5645d8 0%, #2aabee 100%);
1369        border-radius: 24px 24px 0 0;
1370        overflow: hidden;
1371    }
1372
1373    .aiuq__header::after {
1374        content: "";
1375        position: absolute;
1376        top: -60px;
1377        right: -40px;
1378        width: 160px;
1379        height: 160px;
1380        border-radius: 50%;
1381        background: rgba(255, 255, 255, 0.12);
1382    }
1383
1384    .aiuq__badge {
1385        position: relative;
1386        display: inline-flex;
1387        align-items: center;
1388        gap: 6px;
1389        padding: 5px 12px;
1390        border-radius: 999px;
1391        background: rgba(255, 255, 255, 0.18);
1392        color: #ffffff;
1393        font-size: 11px;
1394        font-weight: 700;
1395        letter-spacing: 0.06em;
1396        text-transform: uppercase;
1397    }
1398
1399    .aiuq__title {
1400        position: relative;
1401        margin: 14px 0 0;
1402        font-size: 21px;
1403        font-weight: 800;
1404        letter-spacing: -0.02em;
1405        line-height: 1.3;
1406        color: #ffffff;
1407    }
1408
1409    .aiuq__subtitle {
1410        position: relative;
1411        margin: 8px 0 0;
1412        font-size: 13.5px;
1413        line-height: 1.5;
1414        color: rgba(255, 255, 255, 0.85);
1415    }
1416
1417    .aiuq__body {
1418        padding: 26px 28px 28px;
1419    }
1420
1421    .aiuq-progress {
1422        display: flex;
1423        flex-direction: column;
1424        gap: 6px;
1425        margin-bottom: 22px;
1426    }
1427
1428    .aiuq-progress__bar {
1429        width: 100%;
1430        height: 5px;
1431        border-radius: 999px;
1432        background: var(--aiuq-hairline);
1433        overflow: hidden;
1434    }
1435
1436    .aiuq-progress__fill {
1437        height: 100%;
1438        width: 0;
1439        border-radius: 999px;
1440        background: linear-gradient(135deg, #5645d8 0%, #2aabee 100%);
1441        transition: width 0.3s ease;
1442    }
1443
1444    .aiuq-progress__label {
1445        align-self: flex-end;
1446        font-size: 12px;
1447        font-weight: 600;
1448        color: var(--aiuq-ink-soft);
1449    }
1450
1451    .aiuq-step {
1452        display: none;
1453    }
1454
1455    .aiuq-step.active {
1456        display: block;
1457        animation: aiuq-step-in 0.25s ease;
1458    }
1459
1460    @keyframes aiuq-step-in {
1461        from {
1462            opacity: 0;
1463            transform: translateX(8px);
1464        }
1465        to {
1466            opacity: 1;
1467            transform: translateX(0);
1468        }
1469    }
1470
1471    .aiuq-question {
1472        margin-bottom: 4px;
1473    }
1474
1475    .aiuq-question__text {
1476        font-size: 14.5px;
1477        font-weight: 700;
1478        margin: 0 0 12px;
1479        color: var(--aiuq-ink);
1480    }
1481
1482    .aiuq-required {
1483        color: #ee5a5a;
1484    }
1485
1486    .aiuq-stars {
1487        display: flex;
1488        gap: 6px;
1489    }
1490
1491    .aiuq-star {
1492        display: flex;
1493        width: 34px;
1494        height: 34px;
1495        color: #e2e5ee;
1496        cursor: pointer;
1497        transition: transform 0.15s ease, color 0.15s ease;
1498    }
1499
1500    .aiuq-star svg {
1501        width: 100%;
1502        height: 100%;
1503        fill: currentColor;
1504    }
1505
1506    .aiuq-star.hover,
1507    .aiuq-star.active {
1508        color: #ffb020;
1509        transform: scale(1.08);
1510    }
1511
1512    .aiuq-options {
1513        display: flex;
1514        flex-direction: column;
1515        gap: 8px;
1516    }
1517
1518    .aiuq-option {
1519        position: relative;
1520        display: flex;
1521        align-items: center;
1522        gap: 12px;
1523        padding: 12px 14px;
1524        border: 1.5px solid var(--aiuq-hairline);
1525        border-radius: 14px;
1526        background: #fafbfd;
1527        cursor: pointer;
1528        transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
1529    }
1530
1531    .aiuq-option:hover {
1532        border-color: rgba(86, 69, 216, 0.28);
1533        background: #ffffff;
1534    }
1535
1536    .aiuq-option.selected {
1537        border-color: var(--aiuq-accent);
1538        background: var(--aiuq-accent-soft);
1539        box-shadow: 0 4px 14px -8px rgba(86, 69, 216, 0.4);
1540    }
1541
1542    .aiuq-option__input {
1543        position: absolute;
1544        opacity: 0;
1545        width: 0;
1546        height: 0;
1547    }
1548
1549    .aiuq-option__box {
1550        flex: 0 0 auto;
1551        width: 18px;
1552        height: 18px;
1553        border-radius: 50%;
1554        border: 1.5px solid #d3d7e4;
1555        background: #ffffff;
1556        transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
1557    }
1558
1559    .aiuq-option.selected .aiuq-option__box {
1560        border-color: var(--aiuq-accent);
1561        border-width: 5px;
1562        box-shadow: 0 0 0 1px var(--aiuq-accent);
1563    }
1564
1565    .aiuq-option--checkbox .aiuq-option__box {
1566        display: flex;
1567        align-items: center;
1568        justify-content: center;
1569        border-radius: 6px;
1570    }
1571
1572    .aiuq-option--checkbox.selected .aiuq-option__box {
1573        border-width: 1.5px;
1574        background: var(--aiuq-accent);
1575        box-shadow: none;
1576    }
1577
1578    .aiuq-option__check {
1579        width: 12px;
1580        height: 12px;
1581        opacity: 0;
1582        transition: opacity 0.15s ease;
1583    }
1584
1585    .aiuq-option.selected .aiuq-option__check {
1586        opacity: 1;
1587    }
1588
1589    .aiuq-option__label {
1590        font-size: 13.5px;
1591        line-height: 1.4;
1592        color: var(--aiuq-ink);
1593    }
1594
1595    .aiuq-custom-input,
1596    .aiuq-text {
1597        width: 100%;
1598        box-sizing: border-box;
1599        margin-top: 8px;
1600        padding: 11px 14px;
1601        border: 1.5px solid var(--aiuq-hairline);
1602        border-radius: 14px;
1603        background: #fafbfd;
1604        font-family: inherit;
1605        font-size: 13.5px;
1606        color: var(--aiuq-ink);
1607        transition: border-color 0.15s ease, background 0.15s ease;
1608    }
1609
1610    .aiuq-text {
1611        margin-top: 0;
1612        resize: vertical;
1613    }
1614
1615    .aiuq-custom-input:focus,
1616    .aiuq-text:focus {
1617        outline: none;
1618        border-color: var(--aiuq-accent);
1619        background: #ffffff;
1620    }
1621
1622    .aiuq-nav {
1623        display: flex;
1624        gap: 10px;
1625        margin-top: 18px;
1626    }
1627
1628    .aiuq-nav__back {
1629        flex: 0 0 auto;
1630        border: 1.5px solid var(--aiuq-hairline);
1631        border-radius: 14px;
1632        padding: 13px 18px;
1633        font-family: inherit;
1634        font-size: 14px;
1635        font-weight: 700;
1636        color: var(--aiuq-ink);
1637        background: #ffffff;
1638        cursor: pointer;
1639        transition: border-color 0.15s ease, background 0.15s ease;
1640    }
1641
1642    .aiuq-nav__back:hover {
1643        border-color: #d3d7e4;
1644        background: #fafbfd;
1645    }
1646
1647    .aiuq-nav .aiuq-submit {
1648        flex: 1 1 auto;
1649    }
1650
1651    .aiuq-submit {
1652        display: flex;
1653        align-items: center;
1654        justify-content: center;
1655        width: 100%;
1656        border: none;
1657        border-radius: 14px;
1658        padding: 13px 18px;
1659        font-size: 15px;
1660        font-weight: 700;
1661        font-family: inherit;
1662        color: #ffffff;
1663        background: linear-gradient(135deg, #5645d8 0%, #2aabee 100%);
1664        box-shadow: 0 14px 28px -12px rgba(86, 69, 216, 0.5);
1665        cursor: pointer;
1666        transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
1667    }
1668
1669    .aiuq-submit:hover:not(:disabled) {
1670        transform: translateY(-1px);
1671        box-shadow: 0 18px 32px -12px rgba(86, 69, 216, 0.55);
1672    }
1673
1674    .aiuq-submit:disabled {
1675        opacity: 0.4;
1676        cursor: not-allowed;
1677        box-shadow: none;
1678    }
1679
1680    #aiuq-thank-you {
1681        display: flex;
1682        flex-direction: column;
1683        align-items: center;
1684        text-align: center;
1685        padding: 8px 0 6px;
1686    }
1687
1688    #aiuq-thank-you.hidden {
1689        display: none;
1690    }
1691
1692    .aiuq-thanks__icon {
1693        display: flex;
1694        align-items: center;
1695        justify-content: center;
1696        width: 52px;
1697        height: 52px;
1698        border-radius: 50%;
1699        margin-bottom: 14px;
1700        background: linear-gradient(135deg, #5645d8 0%, #2aabee 100%);
1701    }
1702
1703    .aiuq-thanks__title {
1704        margin: 0 0 4px;
1705        font-size: 17px;
1706        font-weight: 800;
1707        color: var(--aiuq-ink);
1708    }
1709
1710    .aiuq-thanks__text {
1711        margin: 0;
1712        font-size: 13.5px;
1713        color: var(--aiuq-ink-soft);
1714    }
1715
1716    .hidden {
1717        display: none;
1718    }
1719
1720    @media (max-width: 480px) {
1721        .aiuq__header {
1722            padding: 24px 22px 20px;
1723        }
1724
1725        .aiuq__body {
1726            padding: 22px 22px 24px;
1727        }
1728    }
1729</style>
1730
1731
1732    <!-- Yandex.Metrika counter -->
1733    
1733<script type="text/javascript">
vendor: 601 bytes, lines 1733-1748
1733
1734        (function (m, e, t, r, i, k, a) {
1735            m[i] = m[i] || function () {
1736                (m[i].a = m[i].a || []).push(arguments)
1737            };
1738            m[i].l = 1 * new Date();
1739            for (var j = 0; j < document.scripts.length; j++) {
1740                if (document.scripts[j].src === r) {
1741                    return;
1742                }
1743            }
1744            k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
1745        })
1746        (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
1747
1748        ym(
174890183550
vendor: 192 bytes, lines 1748-1758
1748, "init", {
1749            clickmap: true,
1750            trackLinks: true,
1751            accurateTrackBounce: true,
1752            webvisor: true,
1753            ecommerce: true
1754        });
1755
1756        
1757
1758    
1758</script>
1758
1759
1760    <noscript>
1761        <div><img src="https://mc.yandex.ru/watch/90183550" style="position:absolute; left:-9999px;" alt=""/></div>
1762    </noscript>
1763    <!-- /Yandex.Metrika counter -->
1764
1765
1766    
1766<script>
1767            </script>
1767
1768
1769
1770    <!-- Top.Mail.Ru counter -->
1771    
1771<script type="text/javascript">
1772        var _tmr = window._tmr || (window._tmr = []);
1773        _tmr.push({id: "3794455", type: "pageView", start: (new Date()).getTime()});
1774        (function (d, w, id) {
1775            if (d.getElementById(id)) return;
1776            var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
1777            ts.src = "https://top-fwz1.mail.ru/js/code.js";
1778            var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
1779            if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
1780        })(document, window, "tmr-code");
1781    </script>
1781
1782    <noscript><div><img src="https://top-fwz1.mail.ru/counter?id=3794455;js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div></noscript>
1783    <!-- /Top.Mail.Ru counter -->
1784
1785
1786<script>
1787    window.onload = function () {
1788        initTippy();
1789        saveOffset();
1790        document.addEventListener("turbo:load", () => {
1791            saveOffset();
1792            initTippy();
1793        })
1794    }
1795
1796
1797    function saveOffset() {
1798        let offset = -new Date().getTimezoneOffset() * 60
1799        let sessionOffset = 0;
1800        if (sessionOffset === offset) {
1801            return;
1802        }
1803
1804        const req = new XMLHttpRequest();
1805        req.open("GET", "/tz_offset?tz_offset=" + offset);
1806        req.send();
1807    }
1808
1809    function initTippy() {
1810        tippy('[data-tippy-content]', {
1811            theme: 'light',
1812            allowHTML: true,
1813            trigger: 'click',
1814            appendTo: 'parent',
1815            interactive: true
1816        });
1817    }
1818
1819
1820</script>
1820
1821
1822<div class="wb-support-widget" id="wb-support-widget">
1823    <div class="wb-support-widget__menu" id="wb-support-widget-menu" role="menu" aria-hidden="true">
1824        <a href="https://t.me/webbot_shop" target="_blank" rel="noopener noreferrer" class="wb-support-widget__item" role="menuitem">
1825            <span class="wb-support-widget__icon">
1826                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2 11 13"></path><path d="M22 2 15 22l-4-9-9-4 20-7z"></path></svg>
1827            </span>
1828            <span class="wb-support-widget__label">Telegram</span>
1829        </a>
1830        <a href="https://max.ru/u/f9LHodD0cOK-uLv3NlPXDEOtxUHkTHRhsw6WdatgjQvmIK6Ij7kuyAb3Lv4" target="_blank" rel="noopener noreferrer" class="wb-support-widget__item" role="menuitem">
1831            <span class="wb-support-widget__icon">
1832                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
1833            </span>
1834            <span class="wb-support-widget__label">MAX</span>
1835        </a>
1836        <a href="mailto:[email protected]" class="wb-support-widget__item" role="menuitem">
1837            <span class="wb-support-widget__icon">
1838                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m3 7 9 6 9-6"></path></svg>
1839            </span>
1840            <span class="wb-support-widget__label">Почта</span>
1841        </a>
1842    </div>
1843    <button type="button" class="wb-support-widget__button" id="wb-support-widget-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Написать в поддержку">
1844        <svg class="wb-support-widget__button-icon wb-support-widget__button-icon--open" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11v-1a8 8 0 0 1 16 0v1"></path><rect x="2" y="11" width="4" height="7" rx="2"></rect><rect x="18" y="11" width="4" height="7" rx="2"></rect><path d="M20 16.5v1a4 4 0 0 1-4 4h-2"></path><circle cx="13.3" cy="21.5" r="1" fill="currentColor" stroke="none"></circle></svg>
1845        <svg class="wb-support-widget__button-icon wb-support-widget__button-icon--close" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
1846    </button>
1847</div>
1848
1849<style>
1850    .wb-support-widget {
1851        position: fixed;
1852        right: 24px;
1853        bottom: 24px;
1854        z-index: 9999;
1855        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
1856    }
1857
1858    .wb-support-widget__button {
1859        display: flex;
1860        align-items: center;
1861        justify-content: center;
1862        width: 52px;
1863        height: 52px;
1864        border: none;
1865        border-radius: 50%;
1866        background: #2b2f38;
1867        color: #fff;
1868        cursor: pointer;
1869        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
1870        transition: transform 0.15s ease, background 0.15s ease;
1871    }
1872
1873    .wb-support-widget__button:hover {
1874        background: #3a3f4b;
1875        transform: scale(1.05);
1876    }
1877
1878    .wb-support-widget__button-icon--close {
1879        display: none;
1880    }
1881
1882    .wb-support-widget.is-open .wb-support-widget__button-icon--open {
1883        display: none;
1884    }
1885
1886    .wb-support-widget.is-open .wb-support-widget__button-icon--close {
1887        display: block;
1888    }
1889
1890    .wb-support-widget__menu {
1891        position: absolute;
1892        right: 0;
1893        bottom: calc(100% + 12px);
1894        min-width: 200px;
1895        background: #fff;
1896        border-radius: 14px;
1897        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
1898        overflow: hidden;
1899        opacity: 0;
1900        visibility: hidden;
1901        transform: translateY(8px);
1902        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
1903    }
1904
1905    .wb-support-widget.is-open .wb-support-widget__menu {
1906        opacity: 1;
1907        visibility: visible;
1908        transform: translateY(0);
1909    }
1910
1911    .wb-support-widget__item {
1912        display: flex;
1913        align-items: center;
1914        gap: 10px;
1915        padding: 12px 16px;
1916        color: #2b2f38;
1917        text-decoration: none;
1918        font-size: 14px;
1919        font-weight: 500;
1920        transition: background 0.15s ease;
1921    }
1922
1923    .wb-support-widget__item:hover {
1924        background: #f4f5f7;
1925    }
1926
1927    .wb-support-widget__item + .wb-support-widget__item {
1928        border-top: 1px solid #edeef1;
1929    }
1930
1931    .wb-support-widget__icon {
1932        display: flex;
1933        align-items: center;
1934        justify-content: center;
1935        color: #6b7280;
1936    }
1937
1938    @media screen and (max-width: 768px) {
1939        .wb-support-widget {
1940            right: 16px;
1941            bottom: 16px;
1942        }
1943
1944        .wb-support-widget__button {
1945            width: 46px;
1946            height: 46px;
1947        }
1948
1949        .wb-support-widget__menu {
1950            min-width: 180px;
1951        }
1952    }
1953</style>
1954
1955<script>
1956    function wbSupportWidgetElements() {
1957        return {
1958            root: document.getElementById('wb-support-widget'),
1959            toggle: document.getElementById('wb-support-widget-toggle'),
1960            menu: document.getElementById('wb-support-widget-menu')
1961        };
1962    }
1963
1964    function setSupportWidgetOpen(open) {
1965        var els = wbSupportWidgetElements();
1966        if (!els.root || !els.toggle || !els.menu) {
1967            return;
1968        }
1969        els.root.classList.toggle('is-open', open);
1970        els.toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
1971        els.menu.setAttribute('aria-hidden', open ? 'false' : 'true');
1972    }
1973
1974    function initSupportWidget() {
1975        var els = wbSupportWidgetElements();
1976        if (!els.toggle || els.toggle.dataset.wbSupportWidgetBound) {
1977            return;
1978        }
1979        els.toggle.dataset.wbSupportWidgetBound = 'true';
1980
1981        els.toggle.addEventListener('click', function (event) {
1982            event.stopPropagation();
1983            var isOpen = wbSupportWidgetElements().root.classList.contains('is-open');
1984            setSupportWidgetOpen(!isOpen);
1985        });
1986    }
1987
1988    if (!window.__wbSupportWidgetDocBound) {
1989        window.__wbSupportWidgetDocBound = true;
1990
1991        document.addEventListener('click', function (event) {
1992            var els = wbSupportWidgetElements();
1993            if (els.root && els.root.classList.contains('is-open') && !els.root.contains(event.target)) {
1994                setSupportWidgetOpen(false);
1995            }
1996        });
1997
1998        document.addEventListener('keydown', function (event) {
1999            if (event.key !== 'Escape') {
2000                return;
2001            }
2002            var els = wbSupportWidgetElements();
2003            if (els.root && els.root.classList.contains('is-open')) {
2004                setSupportWidgetOpen(false);
2005            }
2006        });
2007
2008        document.addEventListener('turbo:load', initSupportWidget);
2009    }
2010
2011    initSupportWidget();
2012</script>
2012
2013
2014<!-- Разработчикам привет -->
2015
2016
2017
2018        </div>
2019    </div>
2020
2021
2022    <div class="toast-wrapper" data-controller="toast">
2023    <template id="toast">
2024        <div class="toast rounded shadow-sm bg-white mb-3"
2025             role="alert"
2026             aria-live="assertive"
2027             aria-atomic="true"
2028             data-bs-delay="5000"
2029             data-bs-autohide="true">
2030            <div class="toast-body p-3 d-flex">
2031                <p class="mb-0">
2032                    <span class="text-{type}">
2033                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="me-2" viewBox="0 0 16 16" role="img" path="bs.circle-fill" componentName="orchid-icon">
2034  <circle cx="8" cy="8" r="8"></circle>
2035</svg>
2036
2037                    </span>
2038                    {message}
2039                </p>
2040                <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close"></button>
2041            </div>
2042        </div>
2043    </template>
2044
2045
2046    
2047</div>
2048
2049
2050</div>
2051
2052
2053
2054</body>
2055</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.