Slides (strategische HTML-Präsentationen)

I couldn't save the HTML to a file because the Write tool is disabled in this session. Slide 1's full HTML is inline below, and you can paste it into acme-metrics-pitch.html.

I used the slides skill's Product Demo and YC Seed structures, condensed to six slides. Its emotion arc runs curiosity → frustration → hope → trust → urgency. The skill recommends pattern breaks at the 1/3 and 2/3 points, so slides 2 and 4 use full-bleed treatments.

6-slide plan

• Slide 4 numbers: The traction figures are placeholders. Use real or clearly labeled fictional numbers.
• Slide 5: I merged Market and Business Model to stay at six slides. Team and Financials are dropped, so add them to the appendix if investors will expect them.

Slide 1 HTML

This is the skill's base template with slide 1 filled in. It includes the navigation, progress bar and responsive breakpoints. The slide counter shows "1 / 1" until the other slides exist.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acme Metrics — Investor Pitch</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
    <style>
        :root {
            --color-primary: #FF6B6B;
            --color-secondary: #FF8E53;
            --color-background: #0D0D0D;
            --primitive-gradient-primary: linear-gradient(135deg, #FF6B6B, #FF8E53);
            --typography-font-heading: 'Space Grotesk', sans-serif;
            --typography-font-body: 'Inter', sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: var(--color-background);
            color: #fff;
            font-family: var(--typography-font-body);
            overflow: hidden;
        }

        .slide-deck { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
        @media (min-width: 769px) {
            .slide-deck {
                max-width: calc(100vh * 16 / 9);
                max-height: calc(100vw * 9 / 16);
                margin: auto;
                position: absolute;
                inset: 0;
            }
        }

        .slide {
            position: absolute;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 60px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s;
            background: var(--color-background);
            overflow: hidden;
        }
        .slide.active { opacity: 1; visibility: visible; }

        .slide-content {
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 16px;
        }

        h1, h2 { font-family: var(--typography-font-heading); }
        .slide-title {
            font-size: clamp(32px, 6vw, 80px);
            background: var(--primitive-gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.1;
            max-width: 16ch;
        }

        /* Title slide: centered column + gradient-glow treatment */
        .slide-title-layout::before {
            content: '';
            position: absolute;
            width: 60%; aspect-ratio: 1;
            background: radial-gradient(circle, rgba(255,107,107,0.22), transparent 65%);
            filter: blur(40px);
            pointer-events: none;
        }
        .slide-title-layout .slide-content { position: relative; z-index: 1; }

        .eyebrow {
            font-size: clamp(12px, 1.4vw, 16px);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--color-secondary);
        }
        .subtitle {
            font-size: clamp(16px, 2vw, 26px);
            color: #B8B8D0;
            max-width: 38ch;
            line-height: 1.4;
        }
        .byline { margin-top: 24px; font-size: clamp(12px, 1.2vw, 14px); color: rgba(255,255,255,0.45); }

        .animate-fade-up > * { opacity: 0; animation: fadeUp 0.6s ease-out forwards; }
        .animate-fade-up > *:nth-child(1) { animation-delay: 0.05s; }
        .animate-fade-up > *:nth-child(2) { animation-delay: 0.2s; }
        .animate-fade-up > *:nth-child(3) { animation-delay: 0.35s; }
        .animate-fade-up > *:nth-child(4) { animation-delay: 0.5s; }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            .slide { padding: 32px 24px; }
            .slide-title { font-size: clamp(28px, 5vw, 48px); }
        }
        @media (max-width: 480px) {
            .slide { padding: 24px 16px; }
            .slide-title { font-size: clamp(22px, 6vw, 36px); }
            .nav-controls { bottom: 16px; gap: 12px; }
            .nav-btn { width: 32px; height: 32px; font-size: 14px; }
        }

        .progress-bar {
            position: fixed; top: 0; left: 0; height: 3px;
            background: var(--color-primary);
            transition: width 0.3s; z-index: 1000;
        }
        .nav-controls {
            position: fixed; bottom: 30px; left: 50%;
            transform: translateX(-50%);
            display: flex; align-items: center; gap: 20px; z-index: 1000;
        }
        .nav-btn {
            background: rgba(255,255,255,0.1); border: none; color: #fff;
            width: 40px; height: 40px; border-radius: 50%;
            cursor: pointer; font-size: 18px;
        }
        .nav-btn:hover { background: rgba(255,255,255,0.2); }
        .slide-counter { color: rgba(255,255,255,0.6); font-size: 14px; }
    </style>
</head>
<body>
    <div class="progress-bar" id="progressBar"></div>

    <div class="slide-deck">

        <!-- Slide 1: Title / Hook (AIDA — Attention) -->
        <div class="slide slide-title-layout active">
            <div class="slide-content animate-fade-up">
                <span class="eyebrow">Acme Metrics</span>
                <h1 class="slide-title">Your finance team is paying for software nobody uses.</h1>
                <p class="subtitle">Usage analytics that show finance teams which tools earn their budget.</p>
                <p class="byline">Seed round · Investor presentation</p>
            </div>
        </div>

        <!-- Slides 2–6 to be added -->

    </div>

    <div class="nav-controls">
        <button class="nav-btn" onclick="prevSlide()">←</button>
        <span class="slide-counter"><span id="current">1</span> / <span id="total">6</span></span>
        <button class="nav-btn" onclick="nextSlide()">→</button>
    </div>

    <script>
        let current = 1;
        const total = document.querySelectorAll('.slide').length;
        document.getElementById('total').textContent = total;

        function showSlide(n) {
            if (n < 1) n = 1;
            if (n > total) n = total;
            current = n;
            document.querySelectorAll('.slide').forEach((s, i) => {
                s.classList.toggle('active', i === n - 1);
            });
            document.getElementById('current').textContent = n;
            document.getElementById('progressBar').style.width = (n / total * 100) + '%';
        }
        function nextSlide() { showSlide(current + 1); }
        function prevSlide() { showSlide(current - 1); }

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
            if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
        });
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.nav-controls')) nextSlide();
        });

        showSlide(1);
    </script>
</body>
</html>

• Tokens: I used the skill's default coral/dark palette and font fallbacks inline. The design-system scripts (embed-tokens, search-slides.py) weren't available, so no brand tokens were generated. If Acme Metrics has real brand colors, swap them into :root.
• Chart.js: The script tag is already loaded for the traction slide on slide 4.

I can write slides 2–6 next, or save the file once Write access is available.