<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSim Code Editor</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-primary: #f5f5f7;
            --bg-secondary: #ffffff;
            --text-primary: #1d1d1f;
            --text-secondary: #86868b;
            --accent-color: #0070c9;
            --border-color: #d2d2d7;
            --shadow-light: rgba(0,0,0,0.08);
            --shadow-medium: rgba(0,0,0,0.16);
        }

        [data-theme="dark"] {
            --bg-primary: #1d1d1f;
            --bg-secondary: #121212;
            --text-primary: #f5f5f7;
            --text-secondary: #86868b;
            --border-color: #424245;
            background: radial-gradient(circle at top right, 
                rgba(29, 29, 31, 0.8) 0%, 
                rgba(18, 18, 18, 1) 70%);
            background-attachment: fixed;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.5;
            transition: background-color 0.3s, color 0.3s;
            font-size: 12px;
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 15px;
            background-color: rgba(255,255,255,0.7);
            backdrop-filter: saturate(180%) blur(15px);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
            height: 40px;
        }

        .top-bar-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
        }

        .top-bar-logo img {
            width: 20px;
            height: 20px;
        }

        .top-bar-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .theme-toggle {
            position: relative;
            width: 50px;
            height: 24px;
            background-color: #e0e0e0;
            border-radius: 12px;
            overflow: hidden;
            transition: background-color 0.3s;
        }

        .theme-toggle-slider {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            transition: transform 0.3s;
        }

        .theme-toggle input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .theme-toggle input:checked ~ .theme-toggle-slider {
            transform: translateX(26px);
        }

        .copy-btn {
            background-color: var(--accent-color);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 5px 10px;
            font-size: 11px;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
        }

        .copy-btn:active {
            transform: scale(0.95);
        }

        .container {
            display: flex;
            height: calc(100vh - 40px);
            overflow: hidden;
        }

        .code-panel {
            width: 50%;
            background-color: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .code-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid var(--border-color);
        }

        .code-panel-collapse {
            background: none;
            border: none;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s;
        }

        .code-panel-collapse:hover {
            opacity: 1;
        }

        .code-editor {
            flex-grow: 1;
            background-color: var(--bg-secondary);
            border: none;
            outline: none;
            resize: none;
            padding: 15px;
            font-family: 'SF Mono', Menlo, Consolas, monospace;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-primary);
        }

        .preview-panel {
            position: relative;
            width: 50%;
            background-color: var(--bg-primary);
            display: flex;
            flex-direction: column;
        }

        .resize-handle {
            position: absolute;
            left: -5px;
            top: 0;
            bottom: 0;
            width: 10px;
            cursor: col-resize;
            z-index: 10;
        }

        #preview {
            flex-grow: 1;
            border: none;
            background-color: white;
        }

        .chatbot-trigger {
            position: fixed;
            bottom: 15px;
            right: 15px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background-color: var(--accent-color);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px var(--shadow-medium);
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .chatbot-trigger svg {
            width: 18px;
            height: 18px;
        }
    </style>
</head>
<body>
    <div class="top-bar">
        <div class="top-bar-logo">
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiAyMlMzIDExIDMgN2E5IDkgMCAxIDEgMTggMGMwIDQtOSAxNS05IDE1eiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iOSIgcj0iMyIvPjwvc3ZnPg==" alt="WebSim Logo">
            <span>WebSim</span>
        </div>
        <div class="top-bar-controls">
            <div class="theme-toggle">
                <input type="checkbox" id="theme-toggle-input">
                <div class="theme-toggle-slider"></div>
            </div>
            <button class="copy-btn" onclick="copyCode()">Copy</button>
        </div>
    </div>

    <div class="container">
        <div class="code-panel">
            <div class="code-panel-header">
                <span>Code Editor</span>
                <button class="code-panel-collapse" onclick="toggleCodePanel()">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </button>
            </div>
            <textarea class="code-editor" id="codeEditor" spellcheck="false" oninput="updatePreview()" placeholder="Start typing your HTML, CSS, or JavaScript..."></textarea>
        </div>
        
        <div class="preview-panel">
            <div class="resize-handle"></div>
            <iframe id="preview" style="width: 100%; height: 100%; border: none;"></iframe>
        </div>
    </div>

    <button class="chatbot-trigger" onclick="toggleChatbot()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
    </button>

    <script>
        // Theme Toggle
        const themeToggleInput = document.getElementById('theme-toggle-input');
        const body = document.body;

        themeToggleInput.addEventListener('change', () => {
            if (themeToggleInput.checked) {
                body.setAttribute('data-theme', 'dark');
            } else {
                body.removeAttribute('data-theme');
            }
        });

        // Copy Code Function
        function copyCode() {
            const codeEditor = document.getElementById('codeEditor');
            codeEditor.select();
            document.execCommand('copy');
            
            const copyBtn = document.querySelector('.copy-btn');
            copyBtn.textContent = 'Copied!';
            copyBtn.style.backgroundColor = '#2ecc71';
            
            setTimeout(() => {
                copyBtn.textContent = 'Copy';
                copyBtn.style.backgroundColor = '';
            }, 1000);
        }

        // Code Panel Toggle
        function toggleCodePanel() {
            const codePanel = document.querySelector('.code-panel');
            const previewPanel = document.querySelector('.preview-panel');
            
            codePanel.classList.toggle('collapsed');
            
            if (codePanel.classList.contains('collapsed')) {
                codePanel.style.width = '50px';
                previewPanel.style.width = 'calc(100% - 50px)';
            } else {
                codePanel.style.width = '50%';
                previewPanel.style.width = '50%';
            }
        }

        // Resizable Preview Pane
        const resizeHandle = document.querySelector('.resize-handle');
        const codePanel = document.querySelector('.code-panel');
        const previewPanel = document.querySelector('.preview-panel');
        let isResizing = false;

        resizeHandle.addEventListener('mousedown', initResize);

        function initResize(e) {
            isResizing = true;
            document.addEventListener('mousemove', resize);
            document.addEventListener('mouseup', stopResize);
        }

        function resize(e) {
            if (!isResizing) return;
            
            const containerWidth = document.querySelector('.container').offsetWidth;
            const newCodePanelWidth = (e.clientX / containerWidth) * 100;
            
            if (newCodePanelWidth > 20 && newCodePanelWidth < 80) {
                codePanel.style.width = `${newCodePanelWidth}%`;
                previewPanel.style.width = `${100 - newCodePanelWidth}%`;
            }
        }

        function stopResize() {
            isResizing = false;
            document.removeEventListener('mousemove', resize);
            document.removeEventListener('mouseup', stopResize);
        }

        // Preview Functions
        function updatePreview() {
            const codeEditor = document.getElementById('codeEditor');
            const preview = document.getElementById('preview');
            const code = codeEditor.value;
            
            const previewDocument = preview.contentDocument || preview.contentWindow.document;
            previewDocument.open();
            
            const wrappedCode = code.trim().startsWith('<html') ? 
                code : 
                `<html><body>${code}</body></html>`;
            
            previewDocument.write(wrappedCode);
            previewDocument.close();
        }

        // Initialize empty preview
        document.addEventListener('DOMContentLoaded', () => {
            const preview = document.getElementById('preview');
            const previewDocument = preview.contentDocument || preview.contentWindow.document;
            previewDocument.open();
            previewDocument.write('<!-- Enter your code in the editor to see preview -->');
            previewDocument.close();
        });

        // Chatbot Placeholder
        function toggleChatbot() {
            alert('Chatbot functionality coming soon!');
        }
    </script>
</body>
</html>

add sun moon icons to light dark button, style copy button in apple design, make icon color on bot trigger white, move copy button to the code editor header, make collapse button a sideway facing not downward facing, only button to be visible and thin line from top to bottom in collapsed state, header should be a gradiented black blurry in dark mode. also suggest enhancements.