psy_vk

Running

App Files Files Community

DmitrMakeev commited on Sep 5, 2024

Commit

5f320dc

verified ·

1 Parent(s): 4f47adf

Update koleso.html

Browse files

Files changed (1) hide show

koleso.html +104 -201

koleso.html CHANGED Viewed

@@ -3,234 +3,137 @@
 <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>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wheel of Fortune Sectors Editor</title>
+  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.css" />
   <style>
     body {
       font-family: Arial, sans-serif;
       text-align: center;
+      background-color: #f0f0f0;
+      margin: 0;
+      padding: 0;
     }
+    h1 {
+      background-color: #4CAF50;
+      color: white;
       padding: 20px;
+      margin: 0;
+      border-bottom: 2px solid #388E3C;
     }
+    .input-row {
+      display: flex;
+      justify-content: center;
+      gap: 10px;
       margin-top: 20px;
     }
+    .input-row input, .input-row select {
       padding: 10px;
+      font-size: 16px;
+      border: 1px solid #ccc;
       border-radius: 5px;
     }
+    #jsoneditor {
+      width: 50%;
+      height: 300px;
+      margin: 20px auto;
     }
+    #addSector, #saveToClipboard {
+      color: white;
+      background-color: #4CAF50;
       border: none;
       cursor: pointer;
+      padding: 10px 20px;
+      font-size: 16px;
+      border-radius: 5px;
+      margin-top: 20px;
     }
+    #addSector:hover, #saveToClipboard:hover {
+      background-color: #388E3C;
     }
+    .jsoneditor-menu {
+      background-color: #4CAF50 !important;
+      border-bottom: 1px solid #388E3C !important;
+    }
+    .jsoneditor {
+      border: 1px #4CAF50 !important;
+      border-bottom: 2px solid #388E3C !important;
     }
   </style>
 </head>
 <body>
+  <h1>Редактор секторов колеса фортуны</h1>
+  <div>
+    <div class="input-row">
+      <label for="color">Цвет:</label>
+      <select id="color">
+        <option value="#f82">Красный</option>
+        <option value="#0bf">Голубой</option>
+        <option value="#fb0">Желтый</option>
+        <option value="#0fb">Зеленый</option>
+        <option value="#b0f">Фиолетовый</option>
+        <option value="#f0b">Розовый</option>
+        <option value="#bf0">Зеленый</option>
+      </select>
+      <label for="label">Лейбл:</label>
+      <input type="text" id="label" placeholder="Введите лейбл">
+      <label for="probability">Вероятность:</label>
+      <input type="number" id="probability" placeholder="Введите вероятность">
     </div>
+    <button id="addSector">Добавить сектор</button>
+    <button id="saveToClipboard">Сохранить в буфер обмена</button>
   </div>
+  <div id="jsoneditor"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
   <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const container = document.getElementById('jsoneditor');
+      const options = {
+        mode: 'code',
+        modes: ['code', 'tree'],
+        onError: function(err) {
+          alert(err.toString());
+        }
+      };
+      const editor = new JSONEditor(container, options);
+      let sectorsList = [];
+      editor.set(sectorsList);
+      document.getElementById('addSector').addEventListener('click', function() {
+        const color = document.getElementById('color').value;
+        const label = document.getElementById('label').value;
+        const probability = document.getElementById('probability').value;
+        if (label && probability) {
+          sectorsList.push({ color, label, probability: parseInt(probability, 10) });
+          editor.set(sectorsList);
+          document.getElementById('label').value = '';
+          document.getElementById('probability').value = '';
         } else {
+          alert('Please fill in both label and probability.');
         }
       });
+      document.getElementById('saveToClipboard').addEventListener('click', function() {
+        const json = editor.get();
+        const jsonString = JSON.stringify(json, null, 0); // Добавляем в одну строку без отступов
+        navigator.clipboard.writeText(jsonString).then(function() {
+          Toastify({
+            text: "Сектора скопированы!",
+            duration: 3000, // Показывать 3 секунды
+            newWindow: true,
+            close: true,
+            gravity: "top", // Показывать сверху
+            position: "center", // Позиционировать по центру
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            stopOnFocus: true // Останавливать таймер при фокусе на сообщении
+          }).showToast();
+        }, function(err) {
+          console.error('Could not copy text: ', err);
+        });
+      });
+    });
   </script>
 </body>
 </html>