Сейчас узнаем, какой подарок выпадет именно Вам.
Вращайте колесо!
<a href="#open-wheel"></a>

<script>
$( document ).ready(function() {
    
//Список секторов : Цвет - Текст - ссылка на иконку    
let wheelOption = [
    
    ['#DCDFF8' , '<b>Лекция</b> "Гомоцистеин, холестерин и миелин". Терпугова О.В.', '' ],
    ['#DCDFF8' , '<b>Фитомарафон.</b> Внукова Марина Николаевна', '' ],
    ['#DCDFF8' , '<b>Пакет курсов</b> "Хранитель здоровья" бесплатно', '' ],
    ['#DCDFF8' , 'Сертификат <b>на 50000 руб</b> (на обучение)', '' ],
    ['#DCDFF8' , '<b>Поддержка кураторов</b> на 1 месяц', '' ],
    
    ['#DCDFF8' , '<b>Сборник</b> чек-листов UniProf', '' ],
    ['#DCDFF8' , 'Дополнительная <b>скидка 10%</b>', '' ],
    

];



setTimeout(function(){
    window.dispatchEvent(new Event('resize'));
    $('a[href="#open-wheel"]').addClass('open-wheel');
}, 1000);



//Вероятность
let prob = true; // true - включить смещение вероятности ; false - отключить
let probability = [10, 10, 20, 15, 15, 15, 15]; //Распределение вероятности в процентах


let probabilityFinal = [];
let probMem = 0;
$.each(probability,function(index,value){
    probMem +=value; 
    probabilityFinal.push(probMem);
});




//Создаём элемент в Zero
let sector = wheelOption.length;
$('.wheelfortune').append('<div class="wheel_wrp"></div>');
$('.wheelfortune').html($('.wheel_wrp'));
let wheelRec = $('.wheelfortune').closest('.t-rec');
wheelRec.addClass('wheel-pos slide-wheel');
$('.close-wheel').fadeOut(200);
//Кол-во оборотов до остановки
let maxRevolution = 25;
//Время вращения
let spinTime = 3;


let spinFinish = false;
let resizeTxt;
let diameter;



//Создание колеса
function creatingWheel(){
//Диаметр колеса
diameter = $('.wheel_wrp').width();
//Угол сектора
let angle = Number(((360*Math.PI)/(sector*180)).toFixed(3));
//Катет сектора
let sectorHalfWidth = 0.5*diameter*Math.tan(angle/2);
//Заполняем сектора
for (let i=0; i<sector; i++){
$('.wheel_wrp').append('<div class="wheel_sector bg-sector'+i+'"></div><div class="wheel_line line-sector'+i+'"></div><div class="wheel_textcont text-sector'+i+'"><div></div></div>');
//Формируем угол поворота и задаём цвет
$('.bg-sector'+i+'').css({
    "transform":"rotate("+(360*i/sector+90)+"deg)",
    "border-color": ""+wheelOption[i][0]+" transparent"
});

//Отрисовка границ сектора
$('.line-sector'+i+'').css({
    "width" : diameter/2+"px",
    "transform" : "rotate("+((360*i/sector)+(180*(sector-1))/sector)+"deg)",
    "height":"2px",
    "top" : "calc(50% - 1px)",
    "transform-origin" : diameter/2+"px 1px"
});


//Расставляем текст
$('.text-sector'+i+' div').html(wheelOption[i][1]);

// Формируем угол для текста
$('.text-sector'+i+'').css({"transform":"rotate("+(360*i/sector+90)+"deg)"});
};


//Форма сектора
$('.wheel_sector').css({
    "border-width": (diameter/2)+"px "+sectorHalfWidth+"px 0",
    "transform-origin": ""+sectorHalfWidth+"px "+(diameter/2)+"px",
    "left":((diameter/2)-sectorHalfWidth)+"px"
});

//Форма текста
$('.wheel_textcont').css({
    "width": (diameter/2)+"px",
    "height": (diameter/2)+"px",
    "transform-origin": ""+(diameter/4)+"px "+(diameter/2)+"px",
    "left":((diameter/2)-(diameter/4))+"px",
});
}; creatingWheel();

//Вращение колеса
function spinWheel(deg){
    
    $('.wheel_wrp').css({
       "height": diameter+"px",
       "transform" : "rotate("+deg+"deg)",
       "transition": "transform "+spinTime+"s cubic-bezier(0, 0.76, 0.5, 1.01)"
    });
};spinWheel(0);
//Случайный сектор    
function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
let finalSector = -1;


//Отправка формы
$('.wheel_form').delegate(".t-submit", "click", function(){
    
   
    
    
    if (prob) {
        //Получаем финальный сектор 

        finalSector = getRandomInRange(0, 100);
        $.each(probabilityFinal,function(index,value){
            if(finalSector <= value) {
                finalSector = index;
                return false;
            }; 
        });
    }else{
        //Получаем финальный сектор 
        finalSector = getRandomInRange(0, sector-1);
    };
    

    
    let prizTxt = wheelOption[finalSector][1];
    //let prizeImg = wheelOption[finalSector][2];
    spinFinish = true;
   
   resizeTxt = prizTxt.replace(/<\/?[^>]+>/g,' ');
        $('input[name="sector_prize"]').val(resizeTxt);
    
    
    
    
    setTimeout(function(){
        if ( $('.wheel_form .t-form').hasClass("js-send-form-success")){
            localStorage['_wh_send'] = 'sf';
            $('.spin_wheel .tn-atom').click();
            
            blockForm();
            $('body').removeClass('t-body_success-popup-showed');
            
            

            
        };
    }, 1000);
    
 
});





//При нажатии на кнопку вращения
$('.spin_wheel .tn-atom').click(function(e) {
    
    $('.wheel_wrp').addClass('stop-animation');
    
    setTimeout(function(){
        
    //Поворачиваем колесо
    spinWheel(  (maxRevolution*360 +  (finalSector*360)/sector)*(-1) );
    //if (finalSector==0) finalSector=sector;
    //Выводим текст и картинку
    setTimeout(function(){
    let prizTxt = wheelOption[finalSector][1];
    //let prizeImg = wheelOption[finalSector][2];
    spinFinish = true;
    finalStep('Ваш приз:<br>'+prizTxt);
    //Сохраняем результат
    let finalResult  = {
        text: prizTxt , 
        //img: prizeImg ,
        sect:finalSector
    };
    localStorage.setItem('_code_w', JSON.stringify(finalResult));
    }, spinTime*1000);
    
        
    }, 250);
    

});


//Проверка прошлого вращения
let prevResult = localStorage.getItem('_code_w');let prevList;
let prevSend = localStorage['_wh_send'];


if (prevResult) {
    
    $('.wheel_wrp').addClass('stop-animation');
    
    prevList = JSON.parse(prevResult);
    spinFinish = true;
    //$('.wheel_form button').attr('type','submit');
    let preffTxt = '<u>Ваш прошлый приз</u><br>';
    if(prevSend){
        preffTxt = '<u>Заявка уже была отправлена</u><br>';
        blockForm();
        spinFinish = false;
    };
    
    blockForm();
    
    setTimeout(function(){
        $('.wheel_form').addClass('form_noactive');
        
    }, 500);

    setTimeout(function(){
        $('.wheel_form button').attr('type','button');
    }, 3500);
    
    finalStep(preffTxt+prevList.text, prevList.img);
    //spinWheel( (prevList.sect*360)/sector );
    // spinWheel(  ((prevList.sect*360)/sector)*(-1) );
    
};

//Блокируем форму
function blockForm(){
if(!prevResult || prevSend ){
    
$('.wheel_form').addClass('form_noactive');
    //$('.wheel_form').hide();
    $('.wheel_form').addClass('form_noactive');
    setTimeout(function(){
        //$('.wheel_form button').attr('type','button');
        
    }, 3500);
};
};//blockForm();


//Отрисовка финального шага
function finalStep(prizTxt){
    //Удаляем кнопку
    //$('.spin_wheel').remove();    
    $('.present_text .tn-atom').html(prizTxt);
    $('.present_img img').attr({
        //'data-original':prizeImg,
        //'src':prizeImg
    });
    //Открываем форму
   if(spinFinish){ 
    //$('.wheel_form').removeClass('form_noactive');
    //$('.wheel_form button').attr('type','submit');
   };
    //Заполняем поле
    //setTimeout(function(){
        resizeTxt = prizTxt.replace(/<\/?[^>]+>/g,' ');
        $('input[name="sector_prize"]').val(resizeTxt);
    //}, 2500);
};
//Изменение размера окна
 $( window ).resize(function() {
    
    
 clearTimeout(window.resizedFinished); 
 window.resizedFinished = setTimeout(function(){

        setTimeout(function(){
       // window.dispatchEvent(new Event('resize'));
    }, 1000);


    
    $('.wheel_wrp').empty();creatingWheel();
    if(finalSector>=0) { spinWheel( ((finalSector*360)/sector)*(-1) )
    }else if (prevResult) {
        spinWheel( ((prevList.sect*360)/sector)*(-1) );
    }else{spinWheel();
    };
    setTimeout(function(){    
        if(!spinFinish){  //$('.wheel_form button').attr('type','button');
        }else{ $('input[name="sector_prize"]').val(resizeTxt) };
    }, 3500);    
 }, 1500);
 });  

//Показать блок
let firstOpen = true;
$(document).on('click','.open-wheel', function(event){ event.preventDefault();
    $('body').addClass('wheel-open-body');
    wheelRec.addClass('wheel-time').removeClass('slide-wheel');
    if(firstOpen && !prevResult ) {//spinWheel(360); 
    firstOpen = false};
    setTimeout(function(){
       $('.close-wheel').fadeIn(200);
       //t_lazyload_update();
    }, 550);
});

//Скрыть блок
function closeWheel(){ $('body').removeClass('wheel-open-body');$('.close-wheel').fadeOut(0); wheelRec.addClass('slide-wheel');};
$('.close-wheel').click(function(){closeWheel();});
$(document).keydown(function(eventObject){
	if(eventObject.which == 27 && !wheelRec.hasClass('slide-wheel')){closeWheel()};
});


});



</script>   



<style>


.wheelfortune:after {
    content: "";
    background-image: url(https://static.tildacdn.com/tild3236-6337-4938-b630-623732643935/Group_237866.png);
    background-position: center;
    background-size: contain;
    width: 15%;
    height: 15%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



.wheel_wrp.stop-animation{
    animation: none;
}


.wheel_form span.t-checkbox__labeltext {
    font-size: 10px;
}

.wheel_form span.t-checkbox__labeltext a {
    color: #000 !important;
    text-decoration: underline !important;
}

.wheel_wrp {
    animation: idle-rotation linear 60s infinite;
}

@keyframes idle-rotation{

0% {
transform: rotate(0);
}

100% {
transform: rotate(360deg);
}
    
}



.wheel_form span.t-checkbox__labeltext {
    font-size: 10px;
}

.wheel_form span.t-checkbox__labeltext a {
    color: #000 !important;
    text-decoration: underline !important;
}

/*Общий Контейнер*/
.wheel_wrp {
    width: inherit;
    box-sizing: border-box;
    box-shadow: 0 0 0 10px rgb(197 141 214 / 7%), 0 0 15px 3px #c58dd6;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
/*Ось колеса в центре*/
.wheel_wrp:after {
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/*Оформление сектора*/
.wheel_sector{
    width: 0px;
    height: 0px;
    border-style: solid;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Оформление разделительных линий*/
.wheel_line {
    background-color: #001F30; /*Цвет линии*/
    transform: rotate(0deg);
    height: 6px;
    position: absolute;
    z-index: 99;
}
/*Оформление текста*/
.wheel_textcont {
    position: absolute;
    top: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    font-family: 'Open Sans',Arial,sans-serif;
    font-weight: 400;
    color: #000;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}
.wheel_textcont div {
    transform: rotate(-90deg);
    margin-top: 70px;
    width: 160px;
}
/*Иконка*/
.wheel_textcont img {
    width: 45px;
    transform: rotate(-90deg);
    margin-top: 15px;
    display: none;
}
/*Адаптив текст + иконка*/
@media screen and (max-width:640px){


.wheelfortune {
    transform: rotate(90deg);
}

.wheel_textcont img {
    width: 65px;
    margin-top: 25px;
}

.wheel_textcont {
    font-weight: 400;
    font-size: 12px;
}
.wheel_textcont div {
    margin-top: 54px;
    width: 120px;
}

}


@media screen and (max-width:480px){


.wheel_textcont {
    font-weight: 300;
    font-size: 12px;
}
.wheel_textcont div {
    margin-top: 65px;
    width: 130px;
}



}
.spin_wheel , .open-wheel , .close-wheel{ cursor:pointer}
.spin_wheel {  transition: all 0.2s linear}
.spin_wheel:hover {filter: sepia(1)}
.form_noactive{
    opacity:0.4;
    pointer-events:none;
}
.wheel_form .t-input-subtitle{
    text-align: center;
}

/*Показать блок*/
.wheel-pos{
    position:fixed;
    width:100%;
    top:0;
    z-index:99999;
}
.wheel-time{transition: transform 0.5s ease-in-out}
.slide-wheel{transform: translateX(-100%)}
.wheel-open-body{overflow:hidden}



.spin_wheel {
    opacity: 0;
    pointer-events: none;
}
.spin_wheel.show-btn {
    opacity: 1;
    pointer-events: auto;
}

div#tildaformsuccesspopup {
    display: none !important;
}


.wheelfortune:after {
    content: "";
    background-image: url(https://static.tildacdn.com/tild3236-6337-4938-b630-623732643935/Group_237866.png);
    background-position: center;
    background-size: contain;
    width: 15%;
    height: 15%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wheelfortune:before {
    content: "";
    background-image: url(https://static.tildacdn.com/tild3235-6362-4731-b739-323663346330/_1.png);
    background-position: center;
    background-size: contain;
    width: 125%;
    height: 125%;
    position: absolute;
    z-index:19;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
}
</style>
Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.
Made on
Tilda