<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人工智能汇报</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { height: 100%; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
        body { font-family: 'Inter', sans-serif; background: #0c1929; color: #e2e8f0; height: 100%; overflow-x: hidden; line-height: 1.5; }
        .slide { width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); padding: clamp(1rem, 4vw, 4rem); background: linear-gradient(135deg, #0c1929 0%, #0f2744 50%, #0c1929 100%); flex-wrap: wrap; }
        .slide-content { flex: 1; min-width: 280px; max-width: 580px; }
        .slide-image { flex: 0 0 auto; width: min(42%, 420px); display: flex; align-items: center; justify-content: center; }
        .slide-image img { max-width: 100%; max-height: min(65vh, 400px); object-fit: contain; border-radius: 8px; }
        .slide-title { font-size: clamp(1.5rem, 5vw, 3.5rem); font-weight: 700; margin-bottom: clamp(1rem, 3vw, 2rem); color: #f0f9ff; }
        .points-list { list-style: none; }
        .point-item { font-size: clamp(0.875rem, 1.8vw, 1.25rem); margin-bottom: clamp(0.4rem, 1vh, 0.75rem); padding-left: 1em; position: relative; color: #cbd5e1; }
        .point-item::before { content: "•"; position: absolute; left: 0; color: #38bdf8; font-weight: bold; }
        @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    </style>
</head>
<body>
<section class="slide">
    <div class="slide-content">
        <h1 class="slide-title">人工智能汇报</h1>
        <ul class="points-list">
            <li class="point-item">项目名称</li>
        </ul>
    </div>
<div class="slide-image"><img src="https://dashscope-result-wlcb-acdr-1.oss-cn-wulanchabu-acdr-1.aliyuncs.com/1d/45/20260226/77c9ad12/0baca9fc-b0cd-418d-935b-7d74ec693572404971056.png?Expires=1772180771&OSSAccessKeyId=LTAI5tKPD3TMqf2Lna1fASuh&Signature=foJdopsqX33Ejkrr%2F%2FOFX9zZtg4%3D" alt=""></div>
</section>
<section class="slide">
    <div class="slide-content">
        <h1 class="slide-title">目录</h1>
        <ul class="points-list">
            <li class="point-item">第一部分</li>
            <li class="point-item">第二部分</li>
        </ul>
    </div>
<div class="slide-image"><img src="https://dashscope-result-wlcb-acdr-1.oss-cn-wulanchabu-acdr-1.aliyuncs.com/1d/a5/20260226/77c9ad12/6e343e0c-5dca-486d-b371-27b50dca7e873676623726.png?Expires=1772180790&OSSAccessKeyId=LTAI5tKPD3TMqf2Lna1fASuh&Signature=WKazotrH6INQWrXhTKM0r1Q7yls%3D" alt=""></div>
</section>
<section class="slide">
    <div class="slide-content">
        <h2 class="slide-title">正文</h2>
        <ul class="points-list">
            <li class="point-item">要点一</li>
            <li class="point-item">要点二</li>
        </ul>
    </div>
<div class="slide-image"><img src="https://dashscope-result-wlcb-acdr-1.oss-cn-wulanchabu-acdr-1.aliyuncs.com/1d/8a/20260226/77c9ad12/7db27c36-597b-4f25-bf19-658dcc0a46ea2623282465.png?Expires=1772180809&OSSAccessKeyId=LTAI5tKPD3TMqf2Lna1fASuh&Signature=7A24U4PDR4%2Fclw%2BPr9%2Fd87lPNiQ%3D" alt=""></div>
</section>
<script>
(function(){
    document.addEventListener("keydown", function(e) {
        if (e.key === "ArrowRight" || e.key === " ") { e.preventDefault(); window.scrollBy(0, window.innerHeight); }
        if (e.key === "ArrowLeft") { e.preventDefault(); window.scrollBy(0, -window.innerHeight); }
    });
})();
</script>
</body>
</html>