psy4

Sleeping

App Files Files Community

DmitrMakeev commited on Jul 28

Commit

72ae086

•

1 Parent(s): 0ff5c80

Update koleso.html

Browse files

Files changed (1) hide show

koleso.html +121 -121

koleso.html CHANGED Viewed

@@ -68,127 +68,127 @@ body {
   </head>
   <body>
-    <div id="wheelOfFortune">
-      <canvas id="wheel" width="300" height="300"></canvas>
-      <div id="spin">Пуск</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); // Вывод значения в консоль
-  }
-  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;
     }
-  }
-}
-window.onload = init;
-</script>
-  </body>
 </html>

   </head>
   <body>
+  <div id="wheelOfFortune">
+    <canvas id="wheel" width="300" height="300"></canvas>
+    <div id="spin">Пуск</div>
+  </div>
+  <!-- Форма ввода данных -->
+  <div id="registrationForm" style="display: none;">
+    <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>
+  </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>