<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
  <title></title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="popup game-result">
        <div class="game-result-window"></div>
    </div>
    <div class="popup task-decription">
        
    </div>
    <div class="top-controls">
        <div class="user-avatar"></div>
        <div class="ticket-buttons-wrapper">
            <div class="get-tickets">
                <button class="tickets-button"><div class="reward"><span>+1</span> <span class="ticket-icon"></span></div></button>
                <span>получить билет</span>
            </div>
            <div class="tickets-balance">
                <button class="tickets-button"><span>130</span> <span class="ticket-icon"></span></button>
                <span>доступно билетов</span>
            </div>
        </div>
        
    </div>
    <div class="tab" id="tab1" style="position: fixed;">
        
    </div>
    <div class="roulette-wrapper">
        <div class="contenedor-ruleta">
            <div class="background-circle-outline"></div>
            <div class="background-circle">
                
            </div>
            <div class="ruleta"></div>
            
    
        </div>
    </div>
    
    <div class="spin-button">
        <div>
            <button>КРУТИТЬ РУЛЕТКУ</button>
        </div>
    </div>
    <div class="bottom-controls">
        <div class="controls-wheel active" data-tab="tab1"></div>
        <div class="controls-friends" data-tab="tab2"></div>
        <div class="controls-referrals" data-tab="tab3"></div>
    </div>
    <div class="tab tasks" id="tab2">
        <div class="info-wrapper">

        </div>
        <div class="task-list">
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>

            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>


            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>



            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>


            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>



            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>


            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="task-icon"></div>
                    <div class="task-description">
                        <h2>задание 1</h2>
                    <div class="reward"><span>+1</span> <span class="ticket-icon"></span></div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            
        </div>

    </div>
    <div class="tab referrals" id="tab3">
        <div class="info-wrapper">

        </div>
        <div class="task-list">
            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>

           
            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>

            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>

            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>
            <div>
                <div class="task-main">
                    <div class="user-avatar"></div>
                    <div class="task-description">
                        <h2>ник</h2>
                    
                    <div class="reward"><span>@тен</span> </div>
                    </div>
                    
                </div>
                <div class="task-start-button">
                    <button>Начать</button>
                </div>
            </div>

            
        </div>
    </div>
    <script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>
</html>
