<!DOCTYPE html>
<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>