238 lines
8.2 KiB
Plaintext
238 lines
8.2 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Добавить предмет</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #1d1f2e;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-image: url('https://www.transparenttextures.com/patterns/diagonal-stripes.png');
|
|
background-size: cover;
|
|
}
|
|
|
|
h1 {
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
color: #00ff99;
|
|
margin-bottom: 20px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
form {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
max-width: 600px;
|
|
box-shadow: 0 4px 12px rgba(0, 255, 153, 0.5);
|
|
}
|
|
|
|
label {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
color: #00ff99;
|
|
}
|
|
|
|
input, select, textarea {
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin: 10px 0;
|
|
background-color: #333;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
box-shadow: 0 4px 8px rgba(0, 255, 153, 0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
background-color: #444;
|
|
box-shadow: 0 4px 10px rgba(0, 255, 153, 0.6);
|
|
}
|
|
|
|
button {
|
|
background-color: #00ff99b9;
|
|
border: none;
|
|
color: #fff;
|
|
padding: 12px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #00e67b;
|
|
}
|
|
|
|
#effects-container {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.effect-block {
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 255, 153, 0.3);
|
|
}
|
|
|
|
#add-effect, #remove-effect {
|
|
background-color: #ff3d00;
|
|
color: white;
|
|
padding: 10px 15px;
|
|
font-size: 1rem;
|
|
margin: 10px 5px 20px 0;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: 5px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#add-effect:hover, #remove-effect:hover {
|
|
background-color: #ff5722;
|
|
}
|
|
|
|
#add-effect {
|
|
background-color: #00ff9998;
|
|
}
|
|
|
|
#remove-effect {
|
|
background-color: #ff0000;
|
|
}
|
|
|
|
/*Чекбокс в стиле Apple*/
|
|
input[type="checkbox"] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #333;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
background: #00ff99;
|
|
}
|
|
|
|
input[type="checkbox"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 9px;
|
|
height: 5px;
|
|
background: none;
|
|
top: 4px;
|
|
left: 4px;
|
|
border: 3px solid #333;
|
|
border-top: none;
|
|
border-right: none;
|
|
transform: rotate(-45deg);
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<h1>CampFire Game Item Editor</h1>
|
|
<form action="/add-item" method="POST">
|
|
<label for="text_id">Text ID:</label>
|
|
<input type="text" id="text_id" name="text_id" required><br><br>
|
|
|
|
<label for="name">Название:</label>
|
|
<input type="text" id="name" name="name" required><br><br>
|
|
|
|
<label for="description">Описание:</label>
|
|
<textarea id="description" name="description" required></textarea><br><br>
|
|
|
|
<label for="price">Цена:</label>
|
|
<input type="number" id="price" name="price" required><br><br>
|
|
|
|
<label for="rarity">Редкость (1-5):</label>
|
|
<input type="number" id="rarity" name="rarity" min="1" max="5" required><br><br>
|
|
|
|
<label for="type">Тип:</label>
|
|
<input type="text" id="type" name="type" required><br><br>
|
|
|
|
<label for="duration">Длительность (сек.):</label>
|
|
<input type="number" id="duration" name="duration"><br><br>
|
|
|
|
<label for="canBeEquipped">Можно надеть?</label>
|
|
<input type="checkbox" id="canBeEquipped" name="canBeEquipped"><br><br>
|
|
|
|
<label for="img">Ссылка на изображение:</label>
|
|
<input type="text" id="img" name="img"><br><br>
|
|
|
|
<label for="dropChance">Шанс выпадения (0-1):</label>
|
|
<input type="number" id="dropChance" name="dropChance" min="0" max="1" step="0.01" value="1" required><br><br>
|
|
|
|
<div id="effects-container">
|
|
<div class="effect-block">
|
|
<label for="effectType">Выберите эффект:</label>
|
|
<select name="effectType[]" required>
|
|
<option value="heal">Восстановление здоровья</option>
|
|
<option value="damage_boost">Увеличение урона</option>
|
|
<option value="max_health_boost">Увеличение максимального здоровья</option>
|
|
<option value="stamina_penalty">Штраф к выносливости</option>
|
|
<option value="stamina_recover">Восстановление стамины</option>
|
|
<option value="intelligence_boost">Увеличение интеллекта</option>
|
|
<option value="resilience_boost">Увеличение устойчивости</option>
|
|
<option value="endurance_boost">Увеличение выносливости</option>
|
|
<option value="force_penalty">Штраф к урону</option>
|
|
<option value="intelligence_penalty">Штраф к интеллекту</option>
|
|
<option value="resilience_penalty">Штраф к устойчивости</option>
|
|
<option value="endurance_penalty">Штраф к выносливости</option>
|
|
</select><br><br>
|
|
|
|
<label for="effectAmount">Количество:</label>
|
|
<input type="number" name="effectAmount[]" required><br><br>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" id="add-effect">Добавить эффект</button>
|
|
<button type="button" id="remove-effect">Удалить последний эффект</button><br><br>
|
|
|
|
<button type="submit">Добавить предмет</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('add-effect').addEventListener('click', function() {
|
|
var newEffect = document.querySelector('.effect-block').cloneNode(true);
|
|
document.getElementById('effects-container').appendChild(newEffect);
|
|
});
|
|
|
|
document.getElementById('remove-effect').addEventListener('click', function() {
|
|
var effectsContainer = document.getElementById('effects-container');
|
|
if (effectsContainer.children.length > 1) {
|
|
effectsContainer.removeChild(effectsContainer.lastChild);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|