js实现json的网页ppt生成及预览演示代码-html代码-BFW代码库

js实现json的网页ppt生成及预览演示代码

代码语言：html

所属分类：其他

代码描述：js实现json的网页ppt生成及预览演示代码，让ai生成json格式的ppt内容，提示词：你现在是一个资深的 PPT 设计专家和前端开发大师。我想让你为我的 HTML 幻灯片应用生成一个合法的 JSON 数组，主题是“人类与AI共存”。我的 HTML 幻灯片渲染逻辑直接读取这个 JSON 数组，数组中的每一项代表一张幻灯片，格式如下： [ { "background": "CSS背景颜色或渐变样式 (例如 '#020617' 或 'linear-gradient(135deg, #1e1

代码标签： js json 网页 ppt 生成预览演示代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-Slides 幻灯片演示与编辑器</title>
    <!-- 引入 Tailwind CSS 用于快速构建现代 UI -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #3b82f6; /* 默认蓝色主题 */
        }
        .theme-bg { background-color: var(--primary-color); }
        .theme-text { color: var(--primary-color); }
        .theme-border { border-color: var(--primary-color); }
        .theme-ring:focus { --tw-ring-color: var(--primary-color); }
        
        /* 幻灯片 16:9 比例容器 */
        .slide-aspect {
            aspect-ratio: 16 / 9;
            max-height: 70vh;
        }
        /* 全屏时的样式 */
        :-webkit-full-screen .slide-aspect {
            max-height: 100vh;
            width: 100vw;
            aspect-ratio: auto;
        }
        :-ms-fullscreen .slide-aspect {
            max-height: 100vh;
            width: 100vw;
            aspect-ratio: auto;
        }
        :fullscreen .slide-aspect {
            max-height: 100vh;
            width: 100vw;
            aspect-ratio: auto;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 font-sans min-h-screen flex flex-col overflow-hidden">

    <!-- 导航栏 / 控制面板 -->
    <header class="bg-gray-800 border-b border-gray-700 px-6 py-3 flex justify-between items-center z-10">
        <div class="flex items-center space-x-4">
            <span class="text-xl font-bold flex items-center gap-2">
                <i class="fa-solid fa-circle-play theme-text"></i> AI-Slides
            </span>
            <span id="shareBadge" class="hidden text-xs px-2 py-1 rounded bg-yellow-600 text-white font-semibold">
                只读分享模式
            </span>
        </div>
        
        <!-- 中间控制按钮 -->
        <div class="flex items-center space-x-2">
            <button onclick="prevSlide()" class="p-2 bg-gray-700 hover:bg-gray-600 rounded transition" title="上一页 (←)">
                <i class="fa-solid fa-chevron-left"></i>
            </button>
            <span id="slideIndicator" class="px-3 py-1 bg-gray-900 rounded text-sm font-mono">0 / 0</span>
            <button onclick="nextSlide()" class="p-2 bg-gray-700 hover:.........完整代码请登录后点击上方下载按钮下载查看