Firebase Studio App

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0; 
            padding: 0; 
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9; 
        }
        .content-wrapper {
           max-width: 800px;
           margin: 20px auto; 
           background: white; 
           padding: 30px;
           border-radius: 8px;
           box-shadow: 0 2px 10px rgba(0,0,0,0.1);
           box-sizing: border-box; 
        }
         h1 { color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px; }
         p { line-height: 1.6; color: var(--foreground); }
         .my-button {
           background-color: hsl(var(--primary));
           color: hsl(var(--primary-foreground));
           padding: 12px 25px; border: none; border-radius: var(--radius);
           cursor: pointer; font-size: 1rem; transition: background-color 0.2s ease;
           box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
         .my-button:hover { background-color: hsl(var(--primary) / 0.9); }
         .highlight { background-color: yellow; font-weight: bold; }
         blockquote { border-left: 4px solid hsl(var(--border)); padding-left: 15px; margin-left: 0; font-style: italic; color: hsl(var(--muted-foreground)); }
         img { max-width: 100%; height: auto; display: block; margin: 10px 0; }
         .preview-iframe-content > body { padding: 0 !important; margin: 0 !important; }
    </style>
</head>
<body>
  <div class="content-wrapper">
    <h1>Welcome to Visual HTMLizer!</h1>
    <p>This container has a <code>max-width: 800px</code> and is centered on the page. The preview should respect this width, and the export should capture the content at this width.</p>
    <p>This is a sample HTML document rendered in the preview pane. You can <span class="highlight">edit the HTML code</span> on the left and see the changes reflected here instantly.</p>
    <blockquote>Clicking on an element in this preview will highlight the corresponding code in the editor. Try clicking this text!</blockquote>
    <p>Use the editor to experiment with different HTML tags and CSS styles. The styles defined above use CSS variables from the application's theme.</p>
    <img src="https://picsum.photos/800/200" alt="Placeholder Image" data-ai-hint="abstract landscape">
    <div style="background-color: #3a0276; color: white; padding: 40px; margin: 30px 0; text-align: center; border-radius: 5px;">
      <p style="font-size: 1.5rem; font-weight: bold; margin: 0 0 20px 0; line-height: 1.4;">“First love memories carry both pain and tenderness. Embrace them as chapters of growth, not as your entire story.”</p>
    </div>
    <button class="my-button">Click Me</button>
  </div>
</body>
</html>

Preview