File size: 4,629 Bytes
04d1c4d ae6e9b7 04d1c4d ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc 92e7826 5f320dc ae6e9b7 5f320dc ae6e9b7 5f320dc 72ae086 5f320dc 72ae086 5f320dc 72ae086 5f320dc 72ae086 ae6e9b7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!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 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>
<input type="color" id="color">
<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> |