Приза в виде колеса-рулетки

Light tomorrow with today
Always celebrate small wins. Even if you failed at the beginning, it’s okay. You can always start all over again.
Show Gift
Испытай удачу, крути колесо фортуны!

<script>
$( document ).ready(function() {
    
//Список секторов : Цвет - Текст - ссылка на иконку    
let wheelOption = [
    
    ['#93cde0' , 'Cертификат на 1000 рублей на покупку абонемента ' ],
    ['#FFFFFF' , '30% на любую услугу' ],
    ['#93cde0' , 'Бесплатно подмышечные впадины' ],
    ['#FFFFFF' , 'Все тело за 3990 рублей' ],
    ['#93cde0' , 'Глубокое бикини за 990 рублей' ],
    ['#FFFFFF' , '25% скидка на любую услугу или абонемент ' ],
    
];



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



//Вероятность
let prob = false; // true - включить смещение вероятности ; false - отключить

let probability = [2, 2, 2, 1, 1, 1, 1, 20, 70]; //Распределение вероятности в процентах

//let probability = [20, 20, 20, 20, 20]; //Распределение вероятности в процентах

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 = 5;
//Время вращения
let spinTime = 1;
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":"4px",
    "top" : "calc(50% - 2px)",
    "transform-origin" : diameter/2+"px 2px"
});
//Расставляем текст
$('.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) {

    //Поворачиваем колесо
    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);
    
    
});


//Проверка прошлого вращения
let prevResult = localStorage.getItem('_code_w');let prevList;
let prevSend = localStorage['_wh_send'];
if (prevResult) {
    
    
    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;
$('.open-wheel').click(function(){
    $('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>
/*Общий Контейнер*/
.wheel_wrp {
    width: inherit;
    box-sizing: border-box;
    box-shadow: 0 0 0 10px #ffffff, 0 0 15px 3px #ababab;
    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: #fff; /*Цвет линии*/
    transform: rotate(0deg);
    height: 4px;
    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: 16px;
    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){

.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 img {
    width: 45px;
    margin-top: 20px;
}

.wheel_textcont {
    font-weight: 300;
    font-size: 10px;
}
.wheel_textcont div {
    margin-top: 20px;
    width: 88px;
}



}
.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:999;
}
.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;
}



</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.