redo this whole ui in the style of apple.com website. <html><head><base href="https://websim.dev/">
<title>WebSim Code Editor</title>
<script src="https://cdn.jsdelivr.net/npm/@chakra-ui/react@2.8.0/dist/chakra-ui.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@chakra-ui/css/dist/chakra-ui.min.css" rel="stylesheet">
<style>
:root {
  --primary: #E50914;
  --dark: #000000;
  --light: #FFFFFF;
  --grey: #141414;
  --transition-time: 0.3s;
}

[data-theme="dark"] {
  --primary: #E50914;
  --dark: #FFFFFF; 
  --light: #000000;
  --grey: #141414;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, -apple-system;
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  background: var(--grey);
  transition: all var(--transition-time) ease;
}

.header {
  background: var(--light);
  color: var(--dark);
  padding: 0.5rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  font-size: 0.8rem;
}

.header h1 {
  font-size: 1rem;
}

.container {
  display: flex;
  height: calc(100vh - 45px);
  gap: 0.5rem;
  padding: 0.5rem;
  transition: all var(--transition-time) ease;
}

.code-panel {
  min-width: 30%;
  max-width: 70%;
  background: var(--light);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 10px rgba(229,9,20,0.1);
  color: var(--dark);
  padding: 1rem;
  position: relative;
  transition: all var(--transition-time) ease;
  border-radius: 12px;
  overflow: hidden;
}

.code-panel.minimized {
  min-width: 60px;
  max-width: 60px;
  padding: 0.5rem;
}

.preview-panel {
  min-width: 30%;
  flex-grow: 1;
  background: var(--grey);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all var(--transition-time) ease;
  overflow: auto;
  padding: 1rem;
  border-radius: 12px;
}

.preview-panel.expanded {
  min-width: calc(100% - 70px);
}

.resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}

.code-editor {
  width: 100%;
  height: calc(100% - 40px);
  background: var(--light);
  color: var(--dark);
  border: 1px solid var(--grey);
  resize: none;
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  font-size: 13px;
  padding: 0.75rem;
  outline: none;
  border-radius: 8px;
  transition: opacity var(--transition-time) ease;
}

.button-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.code-panel-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  position: relative;
}

.toggle-btn, .copy-btn, .theme-toggle, .hamburger-btn {
  padding: 0.4rem 0.8rem;
  background: var(--primary);
  color: var(--light);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.toggle-btn:hover, .copy-btn:hover, .theme-toggle:hover, .hamburger-btn:hover {
  background: #c70811;
}

.hamburger-btn {
  padding: 0.4rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.hamburger-btn svg {
  width: 16px;
  height: 16px;
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.minimized .code-editor,
.minimized .copy-btn {
  opacity: 0;
  pointer-events: none;
}

.minimized .hamburger-btn {
  transform: translateY(-50%) rotate(180deg);
  opacity: 1;
  pointer-events: all;
  left: 50%;
  transform: translate(-50%, -50%);
}

.copy-btn {
  margin-left: 40px; /* Make space for hamburger button */
}

/* Add new styles for chatbot */
.chatbot-trigger {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--primary);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.chatbot-trigger:hover {
  transform: scale(1.1);
}

.chatbot-window {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 300px;
  height: 400px;
  background: var(--light);
  border-radius: 12px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.chatbot-window.active {
  display: flex;
}

.chatbot-header {
  padding: 1rem;
  background: var(--primary);
  color: var(--light);
  font-weight: 500;
}

.chatbot-messages {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.4;
}

.chatbot-input {
  display: flex;
  padding: 1rem;
  gap: 0.5rem;
  border-top: 1px solid var(--grey);
}

.chatbot-input input {
  flex-grow: 1;
  padding: 0.5rem;
  border: 1px solid var(--grey);
  border-radius: 6px;
  outline: none;
  font-size: 0.9rem;
}

.chatbot-input button {
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: var(--light);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.message {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 6px;
  max-width: 80%;
}

.user-message {
  background: var(--grey);
  border: 1px solid rgba(255,255,255,0.1);
  margin-left: auto;
}

.bot-message {
  background: var(--primary);
  color: var(--light);
}

.message pre {
  background: var(--grey);
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.message code {
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  font-size: 0.9em;
  white-space: pre-wrap;
}
</style>
</head>
<body>

<div class="header">
  <h1>WebSim Code Editor</h1>
  <div class="button-group">
    <button onclick="toggleTheme()" class="theme-toggle" id="themeToggle">
      <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
      </svg>
    </button>
  </div>
</div>

<div class="container">
  <div class="code-panel" id="codePanel">
    <div class="code-panel-buttons">
      <button class="hamburger-btn" onclick="toggleCodePanel()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </button>
      <button class="copy-btn" onclick="copyCode()">Copy Code</button>
    </div>
    <textarea class="code-editor" id="codeEditor" spellcheck="false" oninput="updatePreview()"></textarea>
    <div class="resize-handle"></div>
  </div>
  <div class="preview-panel" id="previewPanel">
    <iframe id="preview" style="width: 100%; height: 100%; border: none; border-radius: 8px;"></iframe>
  </div>
</div>

<button class="chatbot-trigger" onclick="toggleChatbot()">
  <svg width="24" height="24" 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>

<div class="chatbot-window" id="chatbotWindow">
  <div class="chatbot-header">WebSim Coding Assistant</div>
  <div class="chatbot-messages" id="chatbotMessages"></div>
  <div class="chatbot-input">
    <input type="text" id="chatbotInput" placeholder="Ask me to create or enhance code...">
    <button onclick="sendMessage()">Send</button>
  </div>
</div>

<script>
function toggleTheme() {
  const body = document.body;
  const themeToggle = document.getElementById('themeToggle');
  const currentTheme = body.getAttribute('data-theme');
  
  if (currentTheme === 'dark') {
    body.removeAttribute('data-theme');
    themeToggle.innerHTML = `
      <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
      </svg>
    `;
  } else {
    body.setAttribute('data-theme', 'dark');
    themeToggle.innerHTML = `
      <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
      </svg>
    `;
  }
}

function toggleCodePanel() {
  const codePanel = document.getElementById('codePanel');
  const previewPanel = document.getElementById('previewPanel');
  
  codePanel.classList.toggle('minimized');
  previewPanel.classList.toggle('expanded');
}

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

resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', () => {
    isResizing = false;
    document.removeEventListener('mousemove', handleMouseMove);
  }, { once: true });
});

function handleMouseMove(e) {
  if (!isResizing) return;
  
  const container = document.querySelector('.container');
  const containerRect = container.getBoundingClientRect();
  const newWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;
  
  if (newWidth >= 30 && newWidth <= 70) {
    codePanel.style.width = `${newWidth}%`;
    previewPanel.style.width = `${100 - newWidth}%`;
  }
}

function copyCode() {
  const codeEditor = document.getElementById('codeEditor');
  codeEditor.select();
  document.execCommand('copy');
}

function updatePreview() {
    const codeEditor = document.getElementById('codeEditor');
    const preview = document.getElementById('preview');
    const code = codeEditor.value;
    
    // Get the iframe's document
    const previewDocument = preview.contentDocument || preview.contentWindow.document;
    
    // Clear the existing content
    previewDocument.open();
    
    // Ensure code is contained within HTML structure
    const wrappedCode = code.trim().startsWith('<html') ? 
      code : 
      `<html><body>${code}</body></html>`;
    
    // Write the new content
    previewDocument.write(wrappedCode);
    
    // Close the document
    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();
});

// Add chatbot functionality
let chatHistory = [];

function toggleChatbot() {
  const chatbotWindow = document.getElementById('chatbotWindow');
  chatbotWindow.classList.toggle('active');
}

function addMessage(content, isUser = false) {
  const messagesContainer = document.getElementById('chatbotMessages');
  const messageDiv = document.createElement('div');
  messageDiv.classList.add('message');
  messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
  
  // Handle markdown-style code blocks
  if (content.includes('```')) {
    const formattedContent = content.replace(/```([\s\S]*?)```/g, (match, code) => {
      return `<pre><code>${code.trim()}</code></pre>`;
    });
    messageDiv.innerHTML = formattedContent;
  } else {
    messageDiv.textContent = content;
  }
  
  messagesContainer.appendChild(messageDiv);
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

async function sendMessage() {
  const input = document.getElementById('chatbotInput');
  const message = input.value.trim();
  
  if (!message) return;
  
  // Add user message to UI
  addMessage(message, true);
  input.value = '';
  
  try {
    const response = await fetch('/api/enhanced_coding_chatbot', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        user_query: message,
        context: chatHistory
      })
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    const botResponse = data.response || data.conversation || 'No response available';
    
    // Handle code blocks differently
    if (botResponse.includes('```')) {
      const codeMatch = botResponse.match(/```(?:\w+\n)?([\s\S]*?)```/);
      if (codeMatch && codeMatch[1]) {
        const codeEditor = document.getElementById('codeEditor');
        const newCode = codeMatch[1].trim();
        
        // If there's existing code, attempt to merge/insert new code
        if (codeEditor.value) {
          // Parse existing code to find appropriate section
          if (newCode.includes('<style>')) {
            // Insert CSS into existing styles
            const styleMatch = codeEditor.value.match(/<style>([\s\S]*?)<\/style>/);
            if (styleMatch) {
              const updatedStyles = codeEditor.value.replace(
                /<style>([\s\S]*?)<\/style>/,
                `<style>${styleMatch[1]}\n${newCode.replace(/<\/?style>/g, '')}</style>`
              );
              codeEditor.value = updatedStyles;
            }
          } else if (newCode.includes('<script>')) {
            // Insert JavaScript into existing scripts
            const scriptMatch = codeEditor.value.match(/<script>([\s\S]*?)<\/script>/);
            if (scriptMatch) {
              const updatedScripts = codeEditor.value.replace(
                /<script>([\s\S]*?)<\/script>/,
                `<script>${scriptMatch[1]}\n${newCode.replace(/<\/?script>/g, '')}</script>`
              );
              codeEditor.value = updatedScripts;
            }
          } else {
            // Insert HTML content before closing body tag
            codeEditor.value = codeEditor.value.replace(
              '</body>',
              `${newCode}\n</body>`
            );
          }
        } else {
          // If no existing code, just set the new code
          codeEditor.value = newCode;
        }
        
        updatePreview(); // Update preview with merged code
        
        // Show cleaned message without code blocks in chat
        const messageWithoutCode = botResponse.replace(/```[\s\S]*?```/g, '[Code has been merged into editor]');
        addMessage(messageWithoutCode);
      } else {
        addMessage(botResponse);
      }
    } else {
      addMessage(botResponse);
    }
    
    chatHistory.push({ role: 'user', content: message });
    chatHistory.push({ role: 'assistant', content: botResponse });
    
  } catch (error) {
    console.error('Error:', error);
    addMessage('Sorry, I encountered an error processing your request. Please try again.', false);
  }
}

document.getElementById('chatbotInput').addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    sendMessage();
  }
});
</script>
</body></html>