<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced HTML to PowerPoint Example</title>
<meta name="description" content="Demonstrates new HTML conversion capabilities">
</head>
<body>
<h1>Advanced HTML Conversion Features</h1>
<p>This presentation showcases the enhanced HTML to PowerPoint capabilities</p>
<h2>Enhanced CSS Support</h2>
<p style="color: #E74C3C; font-size: 32pt; font-weight: bold; margin: 20px;">
This text has custom color, size, and weight with margins
</p>
<div style="padding: 15px; border: 2px solid #3498DB; background-color: #EBF5FB;">
<p style="margin: 0; line-height: 1.6;">
This content has padding, borders, background color, and custom line height.
</p>
</div>
<h2>Real Image Embedding</h2>
<p>The parser now downloads and embeds actual images:</p>
<img src="https://via.placeholder.com/600x300/2ECC71/ffffff?text=Real+Image+Embedding" alt="Embedded Image">
<h2>Hyperlink Support</h2>
<p>Visit the <a href="https://github.com/anthropics/ppt-rs">ppt-rs GitHub repository</a> for more information.</p>
<p>Check out <a href="https://crates.io/crates/ppt-rs">ppt-rs on crates.io</a></p>
<h2>Letter Spacing and Typography</h2>
<p style="font-family: 'Georgia', serif; letter-spacing: 1px; font-size: 24pt;">
This text uses Georgia font with increased letter spacing for elegant typography.
</p>
<h2>Enhanced Table Support</h2>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Status</th>
<th>Complexity</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSS Parsing</td>
<td>✅ Enhanced</td>
<td>Medium</td>
</tr>
<tr>
<td>Image Download</td>
<td>✅ Working</td>
<td>High</td>
</tr>
<tr>
<td>Hyperlinks</td>
<td>✅ Supported</td>
<td>Low</td>
</tr>
</tbody>
</table>
<h2>Code Block Example</h2>
<pre><code>fn main() {
println!("Enhanced HTML conversion!");
// This code block will be preserved with syntax highlighting
}</code></pre>
<h2>Complex Layout Example</h2>
<div style="display: flex; gap: 20px;">
<div style="flex: 1; padding: 10px; background: #F8F9FA;">
<h3 style="color: #2C3E50;">Section 1</h3>
<p>Content with background color and padding</p>
</div>
<div style="flex: 1; padding: 10px; background: #FFF3CD;">
<h3 style="color: #856404;">Section 2</h3>
<p>Another section with different styling</p>
</div>
</div>
<h2>Text Styling Options</h2>
<p>
<strong style="color: #E74C3C;">Bold red text</strong>,
<em style="color: #3498DB;">Italic blue text</em>, and
<span style="text-decoration: underline; color: #27AE60;">Underlined green text</span>
</p>
<h2>Advanced Spacing</h2>
<p style="margin-top: 30px; margin-bottom: 15px; padding: 20px; background-color: #D5DBDB;">
This paragraph demonstrates custom margins and padding with a background color.
</p>
<h2>Summary of New Capabilities</h2>
<ul>
<li>Enhanced CSS property parsing (margins, padding, borders, etc.)</li>
<li>Real image downloading and embedding from URLs</li>
<li>Hyperlink preservation and handling</li>
<li>Better style inheritance and cascade</li>
<li>Improved error handling and fallbacks</li>
<li>Support for complex nested structures</li>
</ul>
<hr>
<h1>Advanced Features</h1>
<p>Demonstrating more sophisticated HTML elements and styling</p>
<h2>Typography Examples</h2>
<p style="font-size: 36pt;">Extra large text (36pt)</p>
<p style="font-size: 24pt;">Large text (24pt)</p>
<p style="font-size: 18pt;">Regular text (18pt)</p>
<p style="font-size: 14pt;">Small text (14pt)</p>
<h2>Color Palette</h2>
<p style="color: #E74C3C;">Red text example</p>
<p style="color: #3498DB;">Blue text example</p>
<p style="color: #2ECC71;">Green text example</p>
<p style="color: #F39C12;">Orange text example</p>
<p style="color: #9B59B6;">Purple text example</p>
<h2>Background Colors</h2>
<div style="background-color: #FFEBEE; padding: 15px; margin: 10px 0;">
<p style="margin: 0; color: #C62828;">Light red background with dark red text</p>
</div>
<div style="background-color: #E3F2FD; padding: 15px; margin: 10px 0;">
<p style="margin: 0; color: #1565C0;">Light blue background with dark blue text</p>
</div>
<h2>Border Styles</h2>
<div style="border: 2px solid #E74C3C; padding: 15px; margin: 10px 0;">
<p style="margin: 0;">Solid red border</p>
</div>
<div style="border: 3px dashed #3498DB; padding: 15px; margin: 10px 0;">
<p style="margin: 0;">Dashed blue border</p>
</div>
<div style="border: 4px dotted #2ECC71; padding: 15px; margin: 10px 0;">
<p style="margin: 0;">Dotted green border</p>
</div>
<h2>Combined Styling Example</h2>
<div style="
padding: 20px;
margin: 15px 0;
border: 2px solid #9B59B6;
background-color: #F3E5F5;
border-radius: 8px;
">
<h3 style="color: #7B1FA2; margin-top: 0;">Styled Container</h3>
<p style="margin: 0; line-height: 1.6;">
This container combines multiple CSS properties: padding, margins, borders,
background color, and border radius for a polished appearance.
</p>
</div>
<h2>Conclusion</h2>
<p>
These enhanced HTML parsing capabilities enable conversion of sophisticated web content
into professional PowerPoint presentations with faithful styling preservation.
</p>
<blockquote>
"The enhanced HTML parser makes ppt-rs the most comprehensive solution for
web-to-PowerPoint conversion in Rust."
</blockquote>
</body>
</html>