generatePreviewHtml static method

String generatePreviewHtml(
  1. FlintWidget content, {
  2. String title = 'Flint UI Preview',
})

Generate a complete HTML file for preview

Implementation

static String generatePreviewHtml(FlintWidget content,
    {String title = 'Flint UI Preview'}) {
  return '''
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>$title</title>
  <style>
      ${_getPreviewStyles()}
  </style>
</head>
<body>
  <div class="flint-preview-container">
      <div class="preview-header">
          <h1>📧 Flint UI Template Preview</h1>
          <div class="preview-controls">
              <button onclick="toggleDevice('desktop')">Desktop</button>
              <button onclick="toggleDevice('tablet')">Tablet</button>
              <button onclick="toggleDevice('mobile')">Mobile</button>
              <button onclick="copyHtml()">Copy HTML</button>
              <button onclick="downloadHtml()">Download HTML</button>
          </div>
      </div>

      <div class="device-preview" id="devicePreview">
          <div class="device-frame desktop">
              <div class="email-content">
                  ${content.toHtml()}
              </div>
          </div>
      </div>

      <div class="preview-footer">
          <div class="html-source">
              <h3>Generated HTML:</h3>
              <pre><code id="htmlCode">${_escapeHtml(content.toHtml())}</code></pre>
          </div>
          <div class="text-source">
              <h3>Plain Text Version:</h3>
              <pre><code id="textCode">${_escapeHtml(content.toText())}</code></pre>
          </div>
      </div>
  </div>

  <script>
      ${_getPreviewScript()}
  </script>
</body>
</html>
''';
}