Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Wheel of Fortune</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: black; | |
| color: white; | |
| font-family: Arial, sans-serif; | |
| } | |
| .container { | |
| text-align: center; | |
| } | |
| #wheelOfFortune { | |
| border: 2px solid #f82; /* Оранжевая окантовка для колеса */ | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| #wheel { | |
| border: 2px solid #f82; /* Оранжевая окантовка для колеса */ | |
| border-radius: 50%; | |
| } | |
| #spin { | |
| margin-top: 20px; | |
| padding: 10px 20px; | |
| border: 2px solid #f82; /* Оранжевая окантовка для кнопки Пуск */ | |
| border-radius: 5px; | |
| background-color: black; | |
| color: white; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| #spin:hover { | |
| background-color: #f82; /* Оранжевый фон при наведении на кнопку Пуск */ | |
| } | |
| #registrationForm { | |
| display: none; | |
| background-color: black; | |
| padding: 30px; /* Увеличенный padding для формы */ | |
| border: 2px solid #f82; /* Оранжевая окантовка для формы */ | |
| border-radius: 10px; | |
| text-align: center; | |
| width: 90%; | |
| max-width: 400px; | |
| } | |
| #registrationForm h1 { | |
| color: #f82; /* Оранжевый цвет для заголовка */ | |
| margin-bottom: 20px; | |
| } | |
| #registrationForm input[type="text"], | |
| #registrationForm input[type="email"], | |
| #registrationForm input[type="tel"] { | |
| width: calc(100% - 22px); | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| border: 2px solid #f82; /* Оранжевая окантовка для полей ввода */ | |
| border-radius: 5px; | |
| background-color: black; | |
| color: lightgray; /* Светло-серый цвет текста в полях ввода */ | |
| } | |
| #registrationForm input[type="checkbox"] { | |
| margin-right: 5px; | |
| } | |
| #registrationForm button { | |
| width: 100%; | |
| padding: 15px; /* Увеличенная высота кнопки */ | |
| border: none; | |
| border-radius: 5px; | |
| background-color: #f82; /* Оранжевая кнопка */ | |
| color: black; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| #registrationForm button:hover { | |
| background-color: #ff9900; /* Светло-оранжевый при наведении */ | |
| } | |
| @media (max-width: 600px) { | |
| #registrationForm { | |
| width: 95%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div id="wheelOfFortune"> | |
| <h1>Ирина Дель Соль</h1> | |
| <canvas id="wheel" width="300" height="300"></canvas> | |
| <div id="spin">Пуск</div> | |
| <p>Текст под колесом</p> | |
| <a href="#">Ссылка под колесом</a> | |
| </div> | |
| <!-- Форма ввода данных --> | |
| <div id="registrationForm" style="display: none;"> | |
| <h1>Ирина Дель Соль</h1> | |
| <form id="registration"> | |
| <input type="text" id="name" name="name" placeholder="Ваше имя" required><br> | |
| <input type="email" id="email" name="email" placeholder="Ваш email" required><br> | |
| <input type="tel" id="phone" name="phone" placeholder="Ваш телефон" required><br> | |
| <label><input type="checkbox" id="newsletter" name="newsletter"> Согласен на рассылку</label><br> | |
| <label><input type="checkbox" id="privacyPolicy" name="privacyPolicy" required> Знаком с политикой конфиденциальности</label><br> | |
| <button type="submit">Зарегистрироваться</button> | |
| </form> | |
| <p>Текст под формой</p> | |
| <a href="#">Ссылка под формой</a> | |
| </div> | |
| </div> | |
| <script> | |
| const sectors = [ | |
| { color: '#f82', label: 'VIP', probability: 94 }, | |
| { color: '#0bf', label: '10', probability: 1 }, | |
| { color: '#fb0', label: '200', probability: 1 }, | |
| { color: '#0fb', label: '50', probability: 1 }, | |
| { color: '#b0f', label: '100', probability: 1 }, | |
| { color: '#f0b', label: '5', probability: 1 }, | |
| { color: '#bf0', label: '500', probability: 1 } | |
| ]; | |
| const rand = (m, M) => Math.random() * (M - m) + m; | |
| const tot = sectors.length; | |
| const spinEl = document.querySelector('#spin'); | |
| const ctx = document.querySelector('#wheel').getContext('2d'); | |
| const dia = ctx.canvas.width; | |
| const rad = dia / 2; | |
| const PI = Math.PI; | |
| const TAU = 2 * PI; | |
| const arc = TAU / sectors.length; | |
| const friction = 0.991; // 0.995=soft, 0.99=mid, 0.98=hard | |
| let angVel = 0; // Angular velocity | |
| let ang = 0; // Angle in radians | |
| const getIndex = () => Math.floor(tot - (ang / TAU) * tot) % tot; | |
| function drawSector(sector, i) { | |
| const ang = arc * i; | |
| ctx.save(); | |
| // COLOR | |
| ctx.beginPath(); | |
| ctx.fillStyle = sector.color; | |
| ctx.moveTo(rad, rad); | |
| ctx.arc(rad, rad, rad, ang, ang + arc); | |
| ctx.lineTo(rad, rad); | |
| ctx.fill(); | |
| // TEXT | |
| ctx.translate(rad, rad); | |
| ctx.rotate(ang + arc / 2); | |
| ctx.textAlign = 'right'; | |
| ctx.fillStyle = '#fff'; | |
| ctx.font = 'bold 21px sans-serif'; // Уменьшенный размер шрифта на 30% | |
| ctx.fillText(sector.label, rad - 10, 10); | |
| // | |
| ctx.restore(); | |
| } | |
| function rotate() { | |
| const sector = sectors[getIndex()]; | |
| ctx.canvas.style.transform = `rotate(${ang - PI / 2}rad)`; | |
| spinEl.textContent = !angVel ? 'Удача!' : sector.label; | |
| spinEl.style.background = sector.color; | |
| } | |
| function frame() { | |
| if (!angVel) return; | |
| angVel *= friction; // Decrement velocity by friction | |
| if (angVel < 0.002) { | |
| angVel = 0; // Bring to stop | |
| const sector = sectors[getIndex()]; | |
| localStorage.setItem('hasSpun', 'true'); | |
| console.log('Result:', sector.label); // Вывод значения в консоль | |
| showRegistrationForm(); // Показать форму после остановки колеса | |
| } | |
| ang += angVel; // Update angle | |
| ang %= TAU; // Normalize angle | |
| rotate(); | |
| } | |
| function engine() { | |
| frame(); | |
| requestAnimationFrame(engine); | |
| } | |
| function init() { | |
| if (!localStorage.getItem('hasSpun')) { | |
| localStorage.setItem('hasSpun', 'false'); | |
| } | |
| sectors.forEach(drawSector); | |
| rotate(); // Initial rotation | |
| engine(); // Start engine | |
| spinEl.addEventListener('click', () => { | |
| if (localStorage.getItem('hasSpun') === 'false') { | |
| localStorage.setItem('hasSpun', 'true'); | |
| angVel = rand(0.25, 0.45); | |
| spinWheel(); | |
| } else { | |
| console.log('You have already spun the wheel.'); | |
| } | |
| }); | |
| } | |
| function spinWheel() { | |
| const probabilities = sectors.map(sector => sector.probability); | |
| const totalProbability = probabilities.reduce((a, b) => a + b, 0); | |
| const random = Math.random() * totalProbability; | |
| let cumulativeProbability = 0; | |
| for (let i = 0; i < sectors.length; i++) { | |
| cumulativeProbability += sectors[i].probability; | |
| if (random < cumulativeProbability) { | |
| ang = (i + 0.5) * arc; | |
| break; | |
| } | |
| } | |
| } | |
| function showRegistrationForm() { | |
| const wheelOfFortune = document.getElementById('wheelOfFortune'); | |
| const registrationForm = document.getElementById('registrationForm'); | |
| wheelOfFortune.style.display = 'none'; // Скрыть колесо | |
| registrationForm.style.display = 'block'; // Показать форму | |
| } | |
| window.onload = init; | |
| </script> | |
| </body> | |
| </html> |