Convert this PowerPoint to an interactive web presentation:
product-overview-q1.pptx

Add:
- Slide transitions (smooth fade)
- Hover tooltips on key metrics
- Interactive chart on slide 8 (replace static image)
- Keyboard navigation + progress bar
- Auto-advance option for kiosk mode
- Mobile-responsive layout

Host-ready: single HTML file for Vercel/Netlify

from pptx import Presentation
import json

prs = Presentation('product-overview-q1.pptx')
slides_data = []

for i, slide in enumerate(prs.slides):
    slide_info = {
        'index': i + 1,
        'title': '',
        'content': [],
        'images': [],
        'notes': ''
    }
    for shape in slide.shapes:
        if shape.has_text_frame:
            text = shape.text_frame.text
            if shape == slide.shapes.title:
                slide_info['title'] = text
            else:
                slide_info['content'].append(text)
        if shape.shape_type == 13:  # Image
            slide_info['images'].append({
                'width': shape.width,
                'height': shape.height,
                'position': {'left': shape.left, 'top': shape.top}
            })
    if slide.has_notes_slide:
        slide_info['notes'] = slide.notes_slide.notes_text_frame.text
    slides_data.append(slide_info)

<!-- Interactive chart replacing static PowerPoint image -->
<div class="slide" data-slide="8">
  <h2>Revenue Growth</h2>
  <div class="chart-container">
    <svg viewBox="0 0 600 300" class="interactive-chart">
      <!-- Bars with hover interaction -->
      <g class="bar-group" data-quarter="Q1" data-value="$2.1M">
        <rect x="50" y="180" width="60" height="120"
              fill="#4F46E5" rx="4"
              onmouseover="showTooltip(this)"
              onmouseout="hideTooltip()" />
        <text x="80" y="270" text-anchor="middle"
              fill="#94A3B8" font-size="14">Q1</text>
      </g>
      <!-- ... more bars with hover tooltips ... -->
    </svg>
    <div id="tooltip" class="chart-tooltip">
      <span class="tooltip-quarter"></span>
      <span class="tooltip-value"></span>
      <span class="tooltip-growth"></span>
    </div>
  </div>
</div>

<script>
function showTooltip(el) {
  const tooltip = document.getElementById('tooltip');
  const group = el.parentElement;
  tooltip.querySelector('.tooltip-quarter').textContent =
    group.dataset.quarter;
  tooltip.querySelector('.tooltip-value').textContent =
    group.dataset.value;
  tooltip.style.display = 'block';
  tooltip.style.left = el.getBoundingClientRect().x + 'px';
  tooltip.style.top = (el.getBoundingClientRect().y - 60) + 'px';
}
</script>