<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Advanced Blip Creator</title>
</head>
<body>
    <div id="nui-bg" style="display: none;">
        <div id="tablet" class="tablet">
            <div id="tablet-main">
                <h1>Advanced Blip Creator</h1>
                <div class="name">
                    <label>Name:</label>
                    <input type="text" id="blipName" placeholder="Enter Blip Name">
                </div>
                <div class="coords">
                    <label>X: <input type="text" id="coordX" readonly></label>
                    <label>Y: <input type="text" id="coordY" readonly></label>
                    <label>Z: <input type="text" id="coordZ" readonly></label>
                </div>
                <button id="getCoords" class="get-coords-button">Get Coords</button>
                <div class="controls">
                    <div class="sprite">
                        <label>Blip Sprite:</label>
                        <input type="text" id="blipSprite" placeholder="Enter Sprite ID">
                    </div>
                    <div class="scale">
                        <label>Scale:</label>
                        <select id="blipScale">
                            <option value="0.5">0.5</option>
                            <option value="0.6">0.6</option>
                            <option value="0.7">0.7</option>
                            <option value="0.8">0.8</option>
                            <option value="0.9">0.9</option>
                            <option value="1.1">1.1</option>
                            <option value="1.2">1.2</option>
                            <option value="1.3">1.3</option>
                            <option value="1.4">1.4</option>
                            <option value="1.5">1.5</option>
                            <option value="1.6">1.6</option>
                            <option value="1.7">1.7</option>
                            <option value="1.8">1.8</option>
                            <option value="1.9">1.9</option>
                            <option value="2.0">2.0</option>
                        </select>
                    </div>
                </div>
                <div class="color">
                    <label>Color:</label>
                    <div id="blipColorPalette" class="color-palette">
                    </div>
                </div>
                <input type="hidden" id="blipColor" value="0">
                <div class="button-group">
                    <button id="createBlip" class="create-button">Create Blip</button>
                    <button id="showBlipList" class="list-button">Existing Blips</button>
                    <button id="close" class="close-button">Close</button>
                </div>
            </div>

            <div id="tablet-blipList" style="display: none;">
                <h1>Existing Blips</h1>
                <ul id="blipList" class="blip-list"></ul>
                <button id="back" class="close-button">Back</button>
            </div>

            <div id="tablet-editBlip" style="display: none;">
                <h1>Edit Blip</h1>
                <div class="name">
                    <label>Name:</label>
                    <input type="text" id="editBlipName" placeholder="Edit Blip Name">
                </div>
                <div class="coords">
                    <label>X: <input type="text" id="editCoordX"></label>
                    <label>Y: <input type="text" id="editCoordY"></label>
                    <label>Z: <input type="text" id="editCoordZ"></label>
                </div>
                <button id="editGetCoords" class="get-coords-button">Get Coords</button>
                <div class="controls">
                    <div class="sprite">
                        <label>Blip Sprite:</label>
                        <input type="text" id="editBlipSprite" placeholder="Enter Sprite ID">
                    </div>
                    <div class="scale">
                        <label>Scale:</label>
                        <select id="editBlipScale">
                            <option value="0.5">0.5</option>
                            <option value="0.6">0.6</option>
                            <option value="0.7">0.7</option>
                            <option value="0.8">0.8</option>
                            <option value="0.9">0.9</option>
                            <option value="1.1">1.1</option>
                            <option value="1.2">1.2</option>
                            <option value="1.3">1.3</option>
                            <option value="1.4">1.4</option>
                            <option value="1.5">1.5</option>
                            <option value="1.6">1.6</option>
                            <option value="1.7">1.7</option>
                            <option value="1.8">1.8</option>
                            <option value="1.9">1.9</option>
                            <option value="2.0">2.0</option>
                        </select>
                    </div>
                </div>
                <div class="color">
                    <label>Color:</label>
                    <div id="editBlipColorPalette" class="color-palette">
                    </div>
                </div>
                <input type="hidden" id="editBlipColor" value="0">
                <div class="button-group">
                    <button id="confirmEdit" class="create-button">Confirm</button>
                    <button id="cancelEdit" class="close-button">Cancel</button>
                </div>
            </div>

        </div>
    </div>
    <script src="ui.js"></script>
</body>
</html>