make a new feature called font to use it is when someone types @font a upload file button will show up where the user cna upload the font this will now make it so groq ai will update the code with that font that the user uploaded make it  so for example say change the @font: upload this will save in the user server side so if they do @font again it shows up, now write the full complete code:<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Notion-like Live HTML Editor with Draggable Elements and Smooth Sync</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            display: flex;
            flex-direction: column;
            background-color: #ffffff;
        }
        .editor-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        .panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #e0e0e0;
        }
        .panel:last-child {
            border-right: none;
        }
        .panel-header {
            background-color: #f7f7f7;
            padding: 12px 16px;
            border-bottom: 1px solid #e0e0e0;
            font-weight: 600;
            font-size: 14px;
            color: #37352f;
            display: flex;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .panel-tab {
            cursor: pointer;
            padding: 8px 16px;
            background-color: #e0e0e0;
            margin-right: 8px;
            border-radius: 4px 4px 0 0;
        }
        .panel-tab.active {
            background-color: #ffffff;
        }
        .panel-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .panel textarea {
            flex: 1;
            padding: 16px;
            border: none;
            resize: none;
            outline: none;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            font-size: 14px;
            line-height: 1.5;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            color: #37352f;
            background-color: #ffffff;
            overflow-y: auto;
        }
        .preview-container {
            flex: 1;
            border-left: 1px solid #e0e0e0;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        .chat-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: #f7f7f7;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
        }
        .chat-input {
            display: flex;
            padding: 16px;
            background-color: #ffffff;
            border-top: 1px solid #e0e0e0;
            position: sticky;
            bottom: 0;
            z-index: 10;
        }
        .chat-input input {
            flex: 1;
            padding: 8px 12px;
            font-size: 14px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            outline: none;
        }
        .chat-input button {
            margin-left: 8px;
            padding: 8px 16px;
            background-color: #f7f7f7;
            color: #37352f;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        .chat-input button:hover {
            background-color: #e0e0e0;
        }
        .message {
            max-width: 80%;
            margin-bottom: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.4;
        }
        .message.user {
            align-self: flex-end;
            background-color: #d3e5ff;
            color: #1a1a1a;
        }
        .message.bot {
            align-self: flex-start;
            background-color: #ffffff;
            color: #1a1a1a;
            border: 1px solid #e0e0e0;
        }
        @media (max-width: 768px) {
            .editor-container {
                flex-direction: column;
            }
            .panel {
                border-right: none;
                border-bottom: 1px solid #e0e0e0;
            }
            .panel:last-child {
                border-bottom: none;
            }
            .preview-container {
                height: 50vh;
            }
        }
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <div class="panel" id="leftPanel">
            <div class="panel-header">
                <div class="panel-tab active" data-tab="htmlEditor">HTML Editor</div>
                <div class="panel-tab" data-tab="chat">Chat</div>
            </div>
            <div class="panel-content">
                <textarea id="codeEditor" placeholder="Type your HTML, CSS, and JavaScript here"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Preview with Draggable Elements and Smooth Sync</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
                'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.5;
            color: #37352f;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        h1 {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 8px;
            cursor: move;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        p {
            font-size: 16px;
            margin-bottom: 16px;
            cursor: move;
            position: absolute;
            top: 120px;
            left: 50px;
        }
        .callout {
            background-color: #f7f6f3;
            border-radius: 3px;
            padding: 16px;
            margin-bottom: 16px;
            cursor: move;
            position: absolute;
            top: 200px;
            left: 50px;
        }
    </style>
</head>
<body>
    <h1 id="draggable-h1" style="top: 50px; left: 50px;">Draggable Heading</h1>
    <p id="draggable-p" style="top: 120px; left: 50px;">Drag me around!</p>
    <div class="callout" id="draggable-callout" style="top: 200px; left: 50px;">
        <p>This is a draggable callout box.</p>
    </div>
    <script>
        // Make elements draggable
        function makeDraggable(element) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            let initialLeft = 0, initialTop = 0;
            element.onmousedown = dragMouseDown;

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                pos3 = e.clientX;
                pos4 = e.clientY;
                initialLeft = element.offsetLeft;
                initialTop = element.offsetTop;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                const top = (element.offsetTop - pos2);
                const left = (element.offsetLeft - pos1);

                element.style.top = top + "px";
                element.style.left = left + "px";
            }

            function closeDragElement() {
                document.onmouseup = null;
                document.onmousemove = null;

                // Send updated position to parent
                const top = element.offsetTop;
                const left = element.offsetLeft;
                window.parent.postMessage({ id: element.id, top: top, left: left }, '*');
            }
        }

        // Apply draggable to all elements
        const draggableElements = document.querySelectorAll('#draggable-h1, #draggable-p, #draggable-callout');
        draggableElements.forEach(el => {
            makeDraggable(el);
        });
    </script>
</body>
</html>
                </textarea>
                <div class="chat-container" style="display: none;">
                    <div class="chat-messages" id="chatMessages"></div>
                    <div class="chat-input">
                        <input type="text" id="chatInput" placeholder="Type your message...">
                        <button id="sendButton">Send</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="preview-container">
            <iframe id="preview"></iframe>
        </div>
    </div>

    <script>
        const codeEditor = document.getElementById('codeEditor');
        const previewFrame = document.getElementById('preview');
        const chatMessages = document.getElementById('chatMessages');
        const chatInput = document.getElementById('chatInput');
        const sendButton = document.getElementById('sendButton');
        const tabs = document.querySelectorAll('.panel-tab');
        const panelContent = document.querySelector('.panel-content');

        function updatePreview() {
            const code = codeEditor.value;
            const blob = new Blob([code], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            previewFrame.src = url;
        }

        let timeout = null;
        codeEditor.addEventListener('input', function() {
            clearTimeout(timeout);
            timeout = setTimeout(updatePreview, 100);
        });

        updatePreview();

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                if (tab.dataset.tab === 'htmlEditor') {
                    codeEditor.style.display = 'block';
                    panelContent.querySelector('.chat-container').style.display = 'none';
                } else {
                    codeEditor.style.display = 'none';
                    panelContent.querySelector('.chat-container').style.display = 'flex';
                }
            });
        });

        const GROQ_API_KEY = '<TRUFFLEHOG_REDACTED_GROQ>'; // Replace with your Groq API key
        const GROQ_API_URL = 'https://api.groq.com/openai/v1/chat/completions';

        async function sendMessageToGroq(messages) {
            try {
                const response = await fetch(GROQ_API_URL, {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${GROQ_API_KEY}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        model: 'llama-3.1-70b-versatile',
                        messages: messages
                    })
                });

                if (!response.ok) {
                    throw new Error('Failed to get response from Groq API');
                }

                const data = await response.json();
                return data.choices[0].message.content;
            } catch (error) {
                console.error('Error:', error);
                return 'Sorry, there was an error processing your request.';
            }
        }

        function addMessage(message, isUser = true) {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messageElement.classList.add('message');
            messageElement.classList.add(isUser ? 'user' : 'bot');
            chatMessages.appendChild(messageElement);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        sendButton.addEventListener('click', async () => {
            const message = chatInput.value.trim();
            if (message) {
                addMessage(message);
                chatInput.value = '';
                chatInput.disabled = true;
                sendButton.disabled = true;

                let assistantResponse = '';
                const systemPrompt = `You are an AI assistant that helps users edit HTML code. Modify the user's existing code based on their request. Only provide the modified code without any additional explanations or comments. Ensure that you only make the necessary changes and keep the rest of the code unchanged, and do not add any extra characters or formatting.`;

                const messages = [
                    {
                        role: 'system',
                        content: systemPrompt
                    },
                    {
                        role: 'user',
                        content: `Here is my current code:\n\n${codeEditor.value}\n\nI want the following changes: ${message}`
                    }
                ];

                // AI modifies the code based on the user's request
                assistantResponse = await sendMessageToGroq(messages);
                messages.push({ role: 'assistant', content: assistantResponse });

                // Remove any non-code text
                assistantResponse = assistantResponse.replace(/^[\s\S]*?(<!DOCTYPE html>)/i, '$1').trim();

                // Update the code editor with the final response
                codeEditor.value = assistantResponse;
                updatePreview();
                addMessage('Code updated in the editor', false);

                chatInput.disabled = false;
                sendButton.disabled = false;
                chatInput.focus();
            }
        });

        chatInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendButton.click();
            }
        });

        // Listen for messages from the iframe (preview)
        window.addEventListener('message', (event) => {
            if (event.data && event.data.id) {
                const elementId = event.data.id;
                const top = event.data.top;
                const left = event.data.left;

                // Update the code in the code editor
                let code = codeEditor.value;
                const regex = new RegExp(`(id="${elementId}".*?style=")([^"]*)"`, 's');
                const newStyle = `top: ${top}px; left: ${left}px;`;

                code = code.replace(regex, (match, p1, p2) => {
                    // Merge new position with existing styles
                    let styles = p2;

                    // Remove existing top and left styles
                    styles = styles.replace(/top:\s*[^;]+;/g, '');
                    styles = styles.replace(/left:\s*[^;]+;/g, '');

                    // Add new top and left styles
                    styles = styles.trim();
                    if (styles && !styles.endsWith(';')) {
                        styles += ';';
                    }
                    styles += ` ${newStyle}`;

                    return `${p1}${styles.trim()}"`;
                });

                // Update the code editor and preview
                codeEditor.value = code;

                // Update preview immediately without debounce
                updatePreview();
            }
        });
    </script>
</body>
</html>