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