<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infinite Craft Clone</title>
    <style>
        /* Reset and Basic Styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            height: 100vh;
            background-color: #f0f0f0;
        }

        /* Sidebar Styles */
        #sidebar {
            width: 200px;
            background-color: #2c3e50;
            padding: 20px;
            overflow-y: auto;
            border-right: 2px solid #34495e;
        }
        #sidebar h2 {
            color: #ecf0f1;
            margin-bottom: 15px;
            text-align: center;
        }
        .element {
            background-color: #3498db;
            color: #fff;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            cursor: grab;
            text-align: center;
            transition: background-color 0.3s;
        }
        .element:hover {
            background-color: #2980b9;
        }

        /* Game Area Styles */
        #game-area {
            flex: 1;
            position: relative;
            background-color: #bdc3c7;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #canvas {
            width: 90%;
            height: 90%;
            background-color: #ecf0f1;
            border: 2px dashed #95a5a6;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }

        /* Draggable Item Styles */
        .draggable {
            position: absolute;
            padding: 10px 15px;
            background-color: #e74c3c;
            color: #fff;
            border-radius: 5px;
            cursor: grab;
            transition: transform 0.2s;
            user-select: none;
        }
        .draggable.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        /* Result Modal Styles */
        #result-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(44, 62, 80, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s, visibility 0.3s;
        }
        #result-content {
            background-color: #ecf0f1;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            max-width: 80%;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        #result-content h3 {
            margin-bottom: 15px;
            color: #2c3e50;
        }
        #result-content p {
            font-size: 1.2em;
            color: #34495e;
        }
        #close-modal {
            margin-top: 20px;
            padding: 8px 16px;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #close-modal:hover {
            background-color: #2980b9;
        }

        /* API Key Modal Styles */
        #api-key-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(44, 62, 80, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s, visibility 0.3s;
        }
        #api-key-content {
            background-color: #ecf0f1;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            max-width: 400px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        #api-key-content h3 {
            margin-bottom: 15px;
            color: #2c3e50;
        }
        #api-key-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 2px solid #bdc3c7;
            border-radius: 5px;
            font-size: 1em;
        }
        #save-api-key-btn {
            padding: 10px 20px;
            background-color: #27ae60;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #save-api-key-btn:hover {
            background-color: #1e8449;
        }
        #api-key-warning {
            margin-top: 10px;
            font-size: 0.9em;
            color: #c0392b;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            #sidebar {
                width: 150px;
            }
            .element {
                padding: 8px;
                font-size: 0.9em;
            }
            #canvas {
                width: 95%;
                height: 85%;
            }
        }
    </style>
</head>
<body>

    <!-- Sidebar with Elements -->
    <div id="sidebar">
        <h2>Elements</h2>
        <!-- Elements will be dynamically added here -->
    </div>

    <!-- Game Area -->
    <div id="game-area">
        <div id="canvas"></div>
    </div>

    <!-- Result Modal -->
    <div id="result-modal">
        <div id="result-content">
            <h3>New Item Created!</h3>
            <p id="result-text"></p>
            <button id="close-modal">Close</button>
        </div>
    </div>

    <!-- API Key Modal -->
    <div id="api-key-modal">
        <div id="api-key-content">
            <h3>Enter OpenAI API Key</h3>
            <input type="password" id="api-key-input" placeholder="sk-...">
            <button id="save-api-key-btn">Save API Key</button>
            <p id="api-key-warning">⚠️ Your API key will be stored in the browser's local storage. This is insecure.</p>
        </div>
    </div>

    <script>
        // Predefined list of elements
        const availableElements = [
            'Wood', 'Stone', 'Iron', 'Gold', 'Diamond',
            'Coal', 'Water', 'Lava', 'Sand', 'Gravel',
            'Leather', 'Wool', 'Glass', 'Redstone', 'Obsidian'
        ];

        let apiKey = '';
        let draggableId = 0; // Unique ID for each draggable item

        // DOM Elements
        const sidebar = document.getElementById('sidebar');
        const canvas = document.getElementById('canvas');
        const resultModal = document.getElementById('result-modal');
        const resultText = document.getElementById('result-text');
        const closeModalBtn = document.getElementById('close-modal');
        const apiKeyModal = document.getElementById('api-key-modal');
        const apiKeyInput = document.getElementById('api-key-input');
        const saveApiKeyBtn = document.getElementById('save-api-key-btn');

        // Initialize Application
        window.onload = () => {
            // Check if API key exists in localStorage
            const storedKey = localStorage.getItem('openai_api_key');
            if (storedKey) {
                apiKey = storedKey;
                loadElements();
            } else {
                showApiKeyModal();
            }
        };

        // Show API Key Modal
        function showApiKeyModal() {
            apiKeyModal.style.visibility = 'visible';
            apiKeyModal.style.opacity = '1';
        }

        // Hide API Key Modal
        function hideApiKeyModal() {
            apiKeyModal.style.visibility = 'hidden';
            apiKeyModal.style.opacity = '0';
        }

        // Save API Key
        saveApiKeyBtn.addEventListener('click', () => {
            const key = apiKeyInput.value.trim();
            if (key.startsWith('sk-') && key.length > 20) { // Basic validation
                apiKey = key;
                localStorage.setItem('openai_api_key', apiKey);
                hideApiKeyModal();
                loadElements();
            } else {
                alert('Please enter a valid OpenAI API key.');
            }
        });

        // Load Elements into Sidebar
        function loadElements() {
            availableElements.forEach(element => {
                const elemDiv = document.createElement('div');
                elemDiv.classList.add('element');
                elemDiv.setAttribute('draggable', 'true');
                elemDiv.textContent = element;
                elemDiv.addEventListener('dragstart', dragStart);
                sidebar.appendChild(elemDiv);
            });
        }

        // Drag Start Handler
        function dragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.textContent);
        }

        // Drag Over Handler for Canvas
        canvas.addEventListener('dragover', (e) => {
            e.preventDefault();
        });

        // Drop Handler for Canvas
        canvas.addEventListener('drop', (e) => {
            e.preventDefault();
            const elementName = e.dataTransfer.getData('text/plain');
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            createDraggableElement(elementName, x, y);
            attemptCombination();
        });

        // Create Draggable Element in Canvas
        function createDraggableElement(name, x, y) {
            const draggable = document.createElement('div');
            draggable.classList.add('draggable');
            draggable.textContent = name;
            draggable.style.left = `${x - 50}px`; // Centering the element
            draggable.style.top = `${y - 20}px`;
            draggable.setAttribute('draggable', 'true');
            draggable.setAttribute('id', `draggable-${draggableId++}`);

            // Drag Event Listeners
            draggable.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('text/plain', e.target.id);
                setTimeout(() => {
                    draggable.classList.add('dragging');
                }, 0);
            });

            draggable.addEventListener('dragend', (e) => {
                draggable.classList.remove('dragging');
                const rect = canvas.getBoundingClientRect();
                const newX = e.clientX - rect.left - 50;
                const newY = e.clientY - rect.top - 20;
                draggable.style.left = `${newX}px`;
                draggable.style.top = `${newY}px`;
                attemptCombination();
            });

            canvas.appendChild(draggable);
        }

        // Close Result Modal
        closeModalBtn.addEventListener('click', () => {
            resultModal.style.visibility = 'hidden';
            resultModal.style.opacity = '0';
        });

        // Show Result Modal
        function showResultModal(newItem) {
            resultText.textContent = newItem;
            resultModal.style.visibility = 'visible';
            resultModal.style.opacity = '1';
        }

        // Attempt to Combine Elements
        async function attemptCombination() {
            const elements = getElementsInCanvas();

            if (elements.length >= 2) {
                const elementNames = elements.map(el => el.textContent);
                const uniqueElements = [...new Set(elementNames)];
                if (uniqueElements.length < 2) return; // Avoid combining same elements multiple times

                const prompt = `Combine the following elements: ${uniqueElements.join(', ')}. What is the resulting item? Provide just the name of the new item.`;

                // Call OpenAI API
                try {
                    const response = await fetch('https://api.openai.com/v1/chat/completions', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${apiKey}`
                        },
                        body: JSON.stringify({
                            model: 'gpt-3.5-turbo',
                            messages: [
                                { role: 'system', content: 'You are an assistant that combines elements to create new items in a crafting system.' },
                                { role: 'user', content: prompt }
                            ],
                            max_tokens: 20,
                            temperature: 0.7
                        })
                    });

                    if (!response.ok) {
                        const errorData = await response.json();
                        throw new Error(errorData.error.message || `API Error: ${response.status}`);
                    }

                    const data = await response.json();
                    const newItem = data.choices[0].message.content.trim();

                    if (newItem) {
                        showResultModal(newItem);
                        createDraggableElement(newItem, canvas.clientWidth / 2, canvas.clientHeight / 2);
                        // Optionally, remove combined elements
                        removeElementsByNames(uniqueElements);
                    } else {
                        console.log('No valid item returned.');
                    }

                } catch (error) {
                    console.error(error);
                    alert(`Error: ${error.message}`);
                }
            }
        }

        // Get All Elements in Canvas
        function getElementsInCanvas() {
            return Array.from(canvas.querySelectorAll('.draggable'));
        }

        // Remove Elements by Names
        function removeElementsByNames(names) {
            const draggables = getElementsInCanvas();
            draggables.forEach(el => {
                if (names.includes(el.textContent)) {
                    canvas.removeChild(el);
                }
            });
        }

    </script>
</body>
</html>

Good, but make it so it is more like infinite craft. Make it so when I drag and drop it into the game thing, it doesn't automatically make something. I have to drag an element over another one to make it form something new. Also, make it have a more modern design, with a more polished look and animations. Also, make it so it doesn't just anything else, just the thing that it created and an emoji that represents it. Also, make it so every single thing that is generated and non generated has an emoji that represents what it is, and make it so the AI only generates something like "🐈 Cat" and not something + something = something.