Окошко куки (cookie)

<div class="btn-cookie-fixed">Cookie configure</div>
        <div class="form-cookie">
            <div class="form-cont">
                <div class="form-cookie-configure">
                    <div class="configure-cont">
                        <div class="title-block">Welcome to Alvi-Beel</div>
                        <div class="entrytext">
                            <p>We and our partners place cookies, access and use non-sensitive information from your device to improve our products and personalize ads and other contents throughout this website. You may accept all or part of these operations. To learn more about cookies, partners, and how we use your data, to review your options or these operations for each partner, visit our <a href="/privacy-policy/" target="_blank">privacy center.</a></p>
                        </div>


                        <div class="conf-item">
                            <div class="conf-item-title">
                                <span class="btn-toggle"></span>
                                <label class="check">
                                    <input type="checkbox" class="main-checkbox" name="itemcheck_9" checked>
                                    <span class="title-check">Storing and/or accessing information on a terminal</span>
                                </label>
                            </div>
                            <div class="conf-item-cont">
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_10" checked>
                                    <span class="title-check">Authentication and authorization management</span>
                                </label>
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_11" checked>
                                    <span class="title-check">Authentication and authorization management <p>Cookies, device identifiers, or other information can be stored or accessed on your device for the purposes presented to you.Learn More: Store and/or access information on a device</p></span>
                                </label>
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_12" checked>
                                    <span class="title-check">Functionality <p>Essential to make the website function properly.</p></span>
                                </label>
                            </div>
                        </div>
                        <div class="conf-item">
                            <div class="conf-item-title">
                                <span class="btn-toggle"></span>
                                <label class="check">
                                    <input type="checkbox" class="main-checkbox" name="itemcheck_9" checked>
                                    <span class="title-check">Storing and/or accessing information on a terminal</span>
                                </label>
                            </div>
                            <div class="conf-item-cont">
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_10" checked>
                                    <span class="title-check">Authentication and authorization management</span>
                                </label>
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_11" checked>
                                    <span class="title-check">Authentication and authorization management <p>Cookies, device identifiers, or other information can be stored or accessed on your device for the purposes presented to you.Learn More: Store and/or access information on a device</p></span>
                                </label>
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_12" checked>
                                    <span class="title-check">Functionality <p>Essential to make the website function properly.</p></span>
                                </label>
                            </div>
                        </div>
                        <div class="conf-item">
                            <div class="conf-item-title">
                                <span class="btn-toggle"></span>
                                <label class="check">
                                    <input type="checkbox" class="main-checkbox" name="itemcheck_9" checked>
                                    <span class="title-check">Storing and/or accessing information on a terminal</span>
                                </label>
                            </div>
                            <div class="conf-item-cont">
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_10" checked>
                                    <span class="title-check">Authentication and authorization management</span>
                                </label>
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_11" checked>
                                    <span class="title-check">Authentication and authorization management <p>Cookies, device identifiers, or other information can be stored or accessed on your device for the purposes presented to you.Learn More: Store and/or access information on a device</p></span>
                                </label>
                                <label class="check">
                                    <input type="checkbox" name="itemcheck_12" checked>
                                    <span class="title-check">Functionality <p>Essential to make the website function properly.</p></span>
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="btn-block-modal">
                        <div class="btn btn-save-cookie">Save</div>
                    </div>
                </div>

                <div class="form-cookie-text">
                    <div class="title-block">Do you agree to let us use cookies?</div>
                    <div class="descr"><p>We and our partners use cookies and trackers to</p></div>

                    <div class="entrytext">
                        <ul>
                            <li>Provide live support and access to our help center</li>
                            <li>Generate insights to improve the interface and functionalities</li>
                            <li>Help you navigate in the console and to display important information such as updates</li>
                            <li>Measure marketing campaign effectiveness and offer updates about our products</li>
                            <li>Manage authentication and monitor technical errors in our product</li>
                        </ul>
                        <p>Others, non-mandatory, may be used for personalized ads and content, ad and content measurement, audience insights and product development, precise geolocation data, and identification through device scanning, store and/or access information on a device. If you give your consent, it will be valid across all Didomi subdomains. If you refuse cookies, you will not be able to use the chatbot on the Didomi console. You can withdraw your consent at any time by clicking on consent choices at the bottom right of the page. To learn more, visit our <a href="/privacy-policy/" target="_blank">privacy center.</a></p>
                    </div>
                    <div class="btn-block-modal">
                        <a class="btn btn-cookie-config btn-border" href="#">Configure</a>
                        <a class="btn btn-close-site btn-white" href="#">I disagree</a>
                        <a class="btn btn-close-cookie" href="#">I agree</a>
                    </div>
                </div>
            </div>
        </div>
.form-cookie{
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 200;
    box-sizing: border-box;
    transform: translate(-200%, 0);
    transition: 0.5s all;
    width: 50%;
    
    @media(max-width: 1000px){
        left: 10px;
        width: auto;
    }
    p, li{
        @media(max-width: 1000px){
            font-size: 12px;
            line-height: 16px;
        }
    }
    .form-cont{
        padding: 30px;
        background: @w;
        border: @border;
        background: @bg;
        border-radius: 10px;
        
        @media(max-width: 1000px){
            padding: 30px 20px;
            padding-right: 10px;
        }
        .title-block{
            margin-bottom: 5px;
        }
        .descr{
            display: block;
            margin-bottom: 15px;
            
            p{
                font-weight: 500;
            }
        }
        .entrytext{
            ul li,
            p{
                margin-bottom: 10px;
            }
            ul li{
                padding-left: 12px;
                margin-bottom: 3px;
                
                &::before{
                    top: 6px;
                }
            }
            a{
                color: @color-1;
                
                &:hover{
                    color: @text;
                }
            }
        }
        .btn-block-modal{
            margin-top: 20px;
            
            .btn-border{
                margin-right: 5px;
            }
            .btn{
                @media(max-width: 800px){
                    margin-top: 5px;
                }
            }
        }
    }
}
.form-cookie-active{
    transform: translate(0, 0);
}

.btn-cookie-fixed{
    position: fixed;
    right: 10px;
    bottom: 10px;
    
    border: none;
    outline: none;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    vertical-align: text-top;
    box-sizing: border-box;
    transition: 0.5s all;
    
    padding: 20px 40px;
    padding-top: 14px;
    border-radius: 40px;
    background: @bg;
    color: @text;
    border: @border;
    z-index: 100;
    
    @media(max-width: 800px){
        padding: 9px 20px;
        padding-top: 6px;
        transform: translate(-50%, 0);
        left: 50%;
        right: auto;
        width: 160px;
    }
    &:hover{
        color: @w;
        background: @text;
    }
}

.form-cookie-configure{
    display: none;
    
    .configure-cont{
        padding-right: 20px;
        overflow-y: scroll;
        max-height: 75vh;
        
        @media(max-width: 1000px){
            padding-right: 5px;
            max-height: 65vh;
        }
        &::-webkit-scrollbar {
            width: 12px;
            
            @media(max-width: 800px){
                width: 5px;
            }
        }
        &::-webkit-scrollbar-track {
            background: transition;
            border-radius: 20px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #bababa;
            border-radius: 20px;
            border: 3px solid #dedede;
        }
    }
    .entrytext{
        margin-bottom: 20px;
        
        @media(max-width: 1000px){
            margin-bottom: 5px;
        }
    }
}
.conf-item{
    padding-top: 20px;
    padding-bottom: 30px;
    border-bottom: @border;
    border-bottom-color: #000000;
    
    @media(max-width: 1000px){
        padding-top: 10px;
        padding-bottom: 10px;
    }
    &:last-child{
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
    }
    .check{
        position: relative;
        display: block;
        padding-right: 45px;
        transition: 0.3s all;

        @media(max-width: 1000px){
            padding-right: 30px;
        }
        .title-check{
            transition: 0.3s all;
            font-weight: bold;
            display: block;
            
            &::before{
                content: '';
                position: absolute;
                right: 0;
                top: -4px;
                width: 30px;
                height: 30px;
                background: #fff;
                border: 1px solid @text;
                border-radius: 10px;
                transition: 0.3s all;
                background-position: center center;
                cursor: pointer;
                
                @media(max-width: 1000px){
                    width: 20px;
                    height: 20px;
                    border-radius: 5px;
                    top: 2px;
                }
            }
            p{
                display: block;
                margin-top: 5px;
                font-weight: normal;
                transition: 0.3s all;
                color: @text-gray;
            }
        }
        input[type=checkbox]{
            display: none;

            &:checked + .title-check{
                color: @color-1;
            }
            &:checked + .title-check p{
                opacity: 0.5;
            }
            &:checked + .title-check::before{
                background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%;
                background-size: 80%;
                border-color: @color-1;
            }
        }
    }
    
    .conf-item-title{
        padding-top: 4px;
        padding-left: 50px;
        position: relative;
        min-height: 30px;
        
        @media(max-width: 1000px){
            padding-left: 30px;
            padding-top: 0;
        }
        .btn-toggle{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #dddddd url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat 50% 50%;
            background-size: 14px;
            cursor: pointer;
            transition: 0.3s all;
            
            @media(max-width: 1000px){
                top: 2px;
                width: 20px;
                height: 20px;
            }
            &:hover{
                background: @text url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat 50% 50%;
                background-size: 14px;
            }
        }
        .active{
            background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat 50% 50%;
            background-size: 14px;
            transform: rotate(180deg);
        }
    }
    
    .conf-item-cont{
        margin-top: 20px;
        padding-left: 50px;
        position: relative;
        display: none;
        
        @media(max-width: 1000px){
            padding-left: 30px;
        }
        &::before{
            content: '';
            position: absolute;
            left: 15px;
            top: 0;
            height: 100%;
            width: 1px;
            background: @color-1;
            
            @media(max-width: 1000px){
                left: 10px;
            }
        }
        
        .check{
            padding-bottom: 15px;
            margin-bottom: 15px;
            border-bottom: 1px solid #e6e6e6;
            
            @media(max-width: 1000px){
                padding-bottom: 10px;
                margin-bottom: 10px;
            }
            &:last-child{
                margin-bottom: 0;
                padding-bottom: 0;
                border: none;
            }
        }
    }
}

//окно куки закрытие открытие
(function () {
    $(document).ready(function () {
        // Проверяем наличие куки для определения состояния окна
        var hasCookie = document.cookie.indexOf("modalShown=true") >= 0;

        if (!hasCookie) {
            // Открываем окно через 3 секунды
            setTimeout(function () {
                $(".form-cookie").addClass("form-cookie-active");

                // Устанавливаем куку с информацией о показе окна, сроком на 1 день
                var date = new Date();
                date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); // 1 день
                var expires = "expires=" + date.toUTCString();
                document.cookie = "modalShown=true; " + expires;
            }, 1000);
        } else {
            // Если кука уже существует, скрываем кнопку
            // $(".psiholog-btn").hide();
        }

        // Закрытие окна при клике на кнопку закрытия
        $(".btn-close-cookie").click(function () {
            $(".form-cookie").removeClass("form-cookie-active");
            return false;
        });

        // Закрытие окна при клике на кнопку закрытия
        $(".btn-cookie-fixed").click(function () {
            $(".form-cookie").addClass("form-cookie-active");
            return false;
        });

        // Закрытие окна при клике на кнопку
        $(".btn-close-site").click(function () {
            $(".form-cookie").removeClass("form-cookie-active");
        });
    });
})();
//окно куки закрытие открытие

//вкладки в куки
(function(){
    $(document).ready(function(){
        $('.conf-item-title .btn-toggle').click(function(){
            $(this).parent().next('.conf-item-cont').slideToggle();
            $(this).toggleClass('active');
        });
    });
})();
//вкладки в куки

//открыть конфигурацию куки
(function(){
    $(document).ready(function(){
        $('.btn-cookie-config').click(function(){
            $('.form-cookie-text').slideToggle();
            $('.form-cookie-configure').slideToggle();
        });
    });
})();
//открыть конфигурацию куки

//выбор чекбоксов
(function(){
    $(document).ready(function () {
        // Обработчик для главных чекбоксов
        $('.main-checkbox').change(function () {
            const isChecked = $(this).prop('checked');
            $(this).closest('.conf-item').find('.conf-item-cont input[type="checkbox"]').prop('checked', isChecked);

            // Проверяем, если хотя бы один чекбокс внутри .conf-item-cont не выбран, снимаем выбор с главного чекбокса
            if (!isChecked && $(this).closest('.conf-item').find('.conf-item-cont input[type="checkbox"]:checked').length === 0) {
                $(this).prop('checked', false);
            }
        });

        // Обработчик для чекбоксов внутри .conf-item-cont
        $('.conf-item-cont input[type="checkbox"]').change(function () {
            const allChecked = $(this).closest('.conf-item').find('.conf-item-cont input[type="checkbox"]').length === $(this).closest('.conf-item').find('.conf-item-cont input[type="checkbox"]:checked').length;
            $(this).closest('.conf-item').find('.main-checkbox').prop('checked', allChecked);
        });

        $('.btn-save-cookie').click(function () {
            $('.form-cookie-text').slideToggle();
            $('.form-cookie-configure').slideToggle();
        });
    });
})();
//выбор чекбоксов

//сохраняем состояние чекбоксов в куки
$(document).ready(function () {
    // Восстанавливаем состояние чекбоксов из localStorage при загрузке страницы
    restoreCheckboxesState();

    // Обработчик для главных чекбоксов
    $('.main-checkbox').change(function () {
        const isChecked = $(this).prop('checked');
        $(this).closest('.conf-item').find('.conf-item-cont input[type="checkbox"]').prop('checked', isChecked);

        // Сохраняем состояние выбранных чекбоксов в localStorage
        saveCheckboxesState();
    });

    // Обработчик для чекбоксов внутри .conf-item-cont
    $('.conf-item-cont input[type="checkbox"]').change(function () {
        const allChecked = $(this).closest('.conf-item').find('.conf-item-cont input[type="checkbox"]').length === $(this).closest('.conf-item').find('.conf-item-cont input[type="checkbox"]:checked').length;
        $(this).closest('.conf-item').find('.main-checkbox').prop('checked', allChecked);

        // Сохраняем состояние выбранных чекбоксов в localStorage
        saveCheckboxesState();
    });

    // Функция для восстановления состояния чекбоксов из localStorage
    function restoreCheckboxesState() {
        const checkboxStateString = localStorage.getItem('checkboxState');

        if (checkboxStateString) {
            const checkboxState = JSON.parse(checkboxStateString);

            for (const name in checkboxState) {
                $(`input[name="${name}"]`).prop('checked', checkboxState[name]);
            }
        }
    }

    // Функция для сохранения состояния выбранных чекбоксов в localStorage
    function saveCheckboxesState() {
        const checkboxes = $('input[name^="itemcheck_"]');
        const checkboxState = {};

        checkboxes.each(function () {
            checkboxState[$(this).attr('name')] = $(this).prop('checked');
        });

        localStorage.setItem('checkboxState', JSON.stringify(checkboxState));
    }

    // Автоматически сохраняем состояние выбранных чекбоксов при загрузке страницы
    saveCheckboxesState();
});
//сохраняем состояние чекбоксов в куки
Контакты

Работаем: с ПН по ПТ, с 08:00 до 17:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи