Advanced HTML Demo

A comprehensive demonstration of HTML content with multiple interactive elements, PDF lightboxes, and custom styling.

Demo • 8 pages2024

# Advanced HTML Demo This page demonstrates various HTML capabilities within the writing system. ## Multiple PDF Documents You can embed multiple PDF documents with different lightbox configurations:

## Interactive Data Visualization You can also include interactive charts and visualizations:

Interactive Chart Demo

📈

Data Point 1

📊

Data Point 2

🎯

Data Point 3

## Custom Form Elements You can even include interactive forms:

Feedback Form

## Code Blocks with Syntax Highlighting You can include code examples with custom styling:

// Example JavaScript for PDF Lightbox
function openPDFLightbox(pdfUrl, title = 'Document') {
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  `;
  
  const pdfViewer = document.createElement('iframe');
  pdfViewer.src = pdfUrl;
  pdfViewer.style.cssText = `
    width: 90%;
    height: 90%;
    border: none;
    border-radius: 8px;
    background-color: white;
  `;
  
  overlay.appendChild(pdfViewer);
  document.body.appendChild(overlay);
}