416 lines
26 KiB
HTML
416 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>绘境AI游戏生态平台 | 投资人演示版</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#5B5FFF',
|
||
dark: '#0F1123',
|
||
light: '#F5F7FF',
|
||
success: '#22C55E',
|
||
warn: '#FF9500'
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter','system-ui','sans-serif']
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.text-gradient {
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
.bg-glass {
|
||
background: rgba(255,255,255,0.08);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255,255,255,0.12);
|
||
}
|
||
.scroll-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
.animate-pulse-slow {
|
||
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
}
|
||
@keyframes float {
|
||
0%,100%{transform: translateY(0)}
|
||
50%{transform: translateY(-10px)}
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-dark text-white overflow-x-hidden scroll-hide">
|
||
<!-- 顶部导航 -->
|
||
<header class="fixed top-0 left-0 w-full z-50 bg-glass">
|
||
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
||
<!-- 只修改了这里的Logo大小 h-10 -->
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E9%80%A0%E6%A2%A6logo.png" alt="绘境AI Logo" class="h-10 w-auto">
|
||
<h1 class="text-xl md:text-2xl font-bold text-white"><span class="text-primary">全民 AI 游戏创作生态平台</span></h1>
|
||
</div>
|
||
<div class="hidden md:flex gap-8 text-sm text-gray-300">
|
||
<a href="#loop" class="hover:text-primary transition">商业闭环</a>
|
||
<a href="#create" class="hover:text-primary transition">AI创作</a>
|
||
<a href="#flow" class="hover:text-primary transition">游戏信息流</a>
|
||
<a href="#publish" class="hover:text-primary transition">全域分发</a>
|
||
<a href="#profit" class="hover:text-primary transition">商业化</a>
|
||
</div>
|
||
<button class="px-4 py-2 bg-primary rounded-lg text-sm hover:bg-primary/90 transition">投资人演示版</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 首屏 Hero -->
|
||
<section class="min-h-screen flex flex-col justify-center items-center relative pt-20 px-6">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-primary/20 to-transparent opacity-40"></div>
|
||
<div class="container mx-auto text-center relative z-10">
|
||
<div class="inline-block px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm mb-6">
|
||
兆亿次元 · 国内首个全链路AI游戏变现生态
|
||
</div>
|
||
<h2 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight mb-6">
|
||
一句话生成小游戏<br/>
|
||
<span class="bg-gradient-to-r from-primary to-blue-400 text-gradient">自有抖音流量 · 五渠道全域变现</span>
|
||
</h2>
|
||
<p class="text-gray-300 text-base md:text-lg max-w-3xl mx-auto mb-10">
|
||
零门槛AI无感创作｜0秒沉浸式游戏流｜一键全网分发｜数据AI迭代｜全自动广告现金流闭环
|
||
</p>
|
||
<div class="flex flex-wrap justify-center gap-4 mb-16">
|
||
<button onclick="scrollToCreate()" class="px-8 py-4 bg-primary rounded-xl text-lg font-medium hover:bg-primary/90 transition shadow-lg shadow-primary/30">
|
||
体验AI一键生成游戏
|
||
</button>
|
||
<button onclick="scrollToLoop()" class="px-8 py-4 bg-white/10 rounded-xl text-lg font-medium hover:bg-white/20 transition border border-white/20">
|
||
查看商业闭环
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 核心闭环流程图 -->
|
||
<div id="loop" class="w-full bg-glass rounded-2xl p-6 md:p-10">
|
||
<h3 class="text-xl md:text-2xl font-bold mb-8">完整商业闭环流水线</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-8 gap-3 text-sm md:text-base">
|
||
<div class="p-4 rounded-lg bg-primary/20 border border-primary/30 text-center animate-pulse-slow">用户入口</div>
|
||
<div class="flex items-center justify-center"><i class="fa fa-arrow-right text-primary"></i></div>
|
||
<div class="p-4 rounded-lg bg-primary/20 border border-primary/30 text-center animate-pulse-slow">AI无感创作</div>
|
||
<div class="flex items-center justify-center"><i class="fa fa-arrow-right text-primary"></i></div>
|
||
<div class="p-4 rounded-lg bg-primary/20 border border-primary/30 text-center animate-pulse-slow">一键发布</div>
|
||
<div class="flex items-center justify-center"><i class="fa fa-arrow-right text-primary"></i></div>
|
||
<div class="p-4 rounded-lg bg-primary/20 border border-primary/30 text-center animate-pulse-slow">全域流量</div>
|
||
<div class="flex items-center justify-center"><i class="fa fa-arrow-right text-primary"></i></div>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-3 text-sm md:text-base mt-4">
|
||
<div class="p-4 rounded-lg bg-warn/20 border border-warn/30 text-center">多渠道数据回流</div>
|
||
<div class="p-4 rounded-lg bg-warn/20 border border-warn/30 text-center">AI智能迭代优化</div>
|
||
<div class="p-4 rounded-lg bg-success/20 border border-success/30 text-center">持续推流增长</div>
|
||
<div class="p-4 rounded-lg bg-success/20 border border-success/30 text-center">持续广告变现</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 三大核心模块 -->
|
||
<section class="py-20 px-6">
|
||
<div class="container mx-auto">
|
||
<div class="text-center mb-16">
|
||
<h3 class="text-3xl font-bold mb-4">三大核心模块 · 全自动流水线</h3>
|
||
<p class="text-gray-400 max-w-2xl mx-auto">生产、流量、放量三位一体，彻底解决小游戏行业制作难、流量少、变现难三大痛点</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="bg-glass rounded-2xl p-8 hover:scale-105 transition duration-300">
|
||
<div class="w-14 h-14 rounded-xl bg-primary/20 flex items-center justify-center mb-6">
|
||
<i class="fa fa-magic text-2xl text-primary"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold mb-3">AI无感创作（生产端）</h4>
|
||
<p class="text-gray-400">0门槛、无代码、无美术，一句话60秒生成可玩、可上架、可变现的标准化信息流小游戏，海量模板适配短视频流量规则。</p>
|
||
</div>
|
||
<div class="bg-glass rounded-2xl p-8 hover:scale-105 transition duration-300">
|
||
<div class="w-14 h-14 rounded-xl bg-primary/20 flex items-center justify-center mb-6">
|
||
<i class="fa fa-play-circle text-2xl text-primary"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold mb-3">抖音式游戏流（流量端）</h4>
|
||
<p class="text-gray-400">自研竖屏全屏滑动信息流，0秒加载点开即玩，新人作品保底流量，抖音赛马算法，自建平台私域流量闭环。</p>
|
||
</div>
|
||
<div class="bg-glass rounded-2xl p-8 hover:scale-105 transition duration-300">
|
||
<div class="w-14 h-14 rounded-xl bg-primary/20 flex items-center justify-center mb-6">
|
||
<i class="fa fa-rocket text-2xl text-primary"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold mb-3">一键五渠道分发（放量端）</h4>
|
||
<p class="text-gray-400">一次创作全自动适配自有平台、抖音、微信、快手、TapTap，自动打包、合规、提审，一份源码五倍流量五倍收益。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 1.AI无感创作演示 -->
|
||
<section id="create" class="py-20 px-6 bg-white/5">
|
||
<div class="container mx-auto">
|
||
<div class="flex flex-col md:flex-row gap-10 items-center">
|
||
<div class="md:w-1/2">
|
||
<h3 class="text-3xl font-bold mb-6">AI无感游戏创作<br/><span class="text-primary">普通人0门槛做商业小游戏</span></h3>
|
||
<p class="text-gray-400 mb-6 leading-relaxed">无需美术、编程、关卡、数值、广告配置，仅需一句话、一张参考图，AI 60秒全自动生成完整可玩、可上架、可变现的竖屏信息流小游戏。</p>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li class="flex items-center gap-3"><i class="fa fa-check text-success"></i>纯无感操作，无拖拽、无代码、零学习成本</li>
|
||
<li class="flex items-center gap-3"><i class="fa fa-check text-success"></i>生成即玩、生成即合规、适配全渠道流量规则</li>
|
||
<li class="flex items-center gap-3"><i class="fa fa-check text-success"></i>内置千套爆款模板，自带3秒开局引流钩子</li>
|
||
<li class="flex items-center gap-3"><i class="fa fa-check text-success"></i>AI自动植入合规广告位，直接商业化变现</li>
|
||
</ul>
|
||
</div>
|
||
<div class="md:w-1/2 w-full">
|
||
<div class="bg-glass rounded-2xl p-6">
|
||
<h5 class="text-lg font-medium mb-4">在线AI生成演示</h5>
|
||
<textarea id="aiInput" class="w-full bg-dark border border-gray-700 rounded-lg p-4 text-white h-28 resize-none focus:outline-none focus:border-primary transition" placeholder="输入你的游戏需求...示例：竖屏闯关小游戏、军事风格、3秒开局钩子、适配短视频信息流、自带合规广告点位"></textarea>
|
||
<div class="mt-4 flex gap-4">
|
||
<button id="genBtn" onclick="startGenerate()" class="w-full py-3 bg-primary rounded-lg font-medium hover:bg-primary/90 transition">
|
||
AI一键生成游戏
|
||
</button>
|
||
</div>
|
||
<div id="genLoading" class="hidden mt-6">
|
||
<p class="text-gray-400 text-sm mb-2">AI正在自动生成：世界观、美术、关卡、广告、适配...</p>
|
||
<div class="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
|
||
<div id="progressBar" class="h-full bg-primary w-0 transition-all duration-[6000ms]"></div>
|
||
</div>
|
||
</div>
|
||
<div id="genResult" class="hidden mt-6 p-4 bg-success/10 border border-success/30 rounded-lg">
|
||
<p class="text-success font-medium"><i class="fa fa-check-circle"></i> 生成完成！已产出可玩商业化小游戏</p>
|
||
<div class="flex gap-3 mt-4">
|
||
<button class="px-4 py-2 bg-white/10 rounded text-sm">立即游玩</button>
|
||
<button class="px-4 py-2 bg-white/10 rounded text-sm">简单微调</button>
|
||
<button onclick="scrollToPublish()" class="px-4 py-2 bg-primary rounded text-sm">一键全网发布</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2.抖音式游戏流演示 -->
|
||
<section id="flow" class="py-20 px-6">
|
||
<div class="container mx-auto">
|
||
<div class="flex flex-col md:flex-row-reverse gap-10 items-center">
|
||
<div class="md:w-1/2">
|
||
<h3 class="text-3xl font-bold mb-6">抖音式沉浸式游戏流<br/><span class="text-primary">自建私域流量，上瘾式留存</span></h3>
|
||
<p class="text-gray-400 mb-6 leading-relaxed">颠覆传统小游戏列表模式，采用短视频信息流逻辑，上下滑动切换、0秒加载点开即玩，打造平台自有高留存、高日活流量池。</p>
|
||
<div class="bg-glass rounded-xl p-5 mb-6">
|
||
<h5 class="font-medium mb-3">独家流量扶持机制</h5>
|
||
<ul class="space-y-2 text-sm text-gray-300">
|
||
<li class="flex items-center gap-3"><i class="fa fa-fire text-warn"></i>新人作品保底基础曝光，零成本冷启动</li>
|
||
<li class="flex items-center gap-3"><i class="fa fa-line-chart text-warn"></i>抖音同款赛马算法，数据越好流量越多</li>
|
||
<li class="flex items-center gap-3"><i class="fa fa-repeat text-warn"></i>流量内部闭环，不外流、持续沉淀私域用户</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="md:w-1/2 flex justify-center">
|
||
<div class="w-[260px] h-[480px] rounded-3xl overflow-hidden border-4 border-gray-800 relative bg-black animate-float">
|
||
<div class="absolute top-2 left-0 right-0 text-center text-xs text-gray-500 z-10">上下滑动演示</div>
|
||
<div id="phoneFlow" class="w-full h-full overflow-hidden relative">
|
||
<div class="w-full h-full bg-gradient-to-b from-indigo-600/80 to-purple-900/80 flex items-center justify-center text-xl font-bold">游戏作品 A</div>
|
||
<div class="w-full h-full bg-gradient-to-b from-orange-600/80 to-red-900/80 flex items-center justify-center text-xl font-bold absolute top-full left-0">游戏作品 B</div>
|
||
<div class="w-full h-full bg-gradient-to-b from-green-600/80 to-teal-900/80 flex items-center justify-center text-xl font-bold absolute top-[200%] left-0">游戏作品 C</div>
|
||
</div>
|
||
<div class="absolute right-3 bottom-20 flex flex-col gap-4 items-center">
|
||
<div class="w-10 h-10 rounded-full bg-white/20"></div>
|
||
<i class="fa fa-heart text-xl text-white/80"></i>
|
||
<i class="fa fa-star text-xl text-white/80"></i>
|
||
<i class="fa fa-share text-xl text-white/80"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3.一键五渠道分发 -->
|
||
<section id="publish" class="py-20 px-6 bg-white/5">
|
||
<div class="container mx-auto">
|
||
<div class="text-center mb-12">
|
||
<h3 class="text-3xl font-bold mb-4">一键五渠道全域分发</h3>
|
||
<p class="text-gray-400 max-w-2xl mx-auto">一次创作、一次点击，全自动覆盖五大流量入口，私域保底+公域收割，收益最大化</p>
|
||
</div>
|
||
<div class="max-w-3xl mx-auto bg-glass rounded-2xl p-8">
|
||
<h5 class="text-lg font-medium mb-6">发布渠道选择</h5>
|
||
<div class="space-y-4">
|
||
<label class="flex items-center gap-3 p-3 bg-primary/10 rounded-lg border border-primary/30 cursor-pointer">
|
||
<input type="checkbox" checked class="w-5 h-5">
|
||
<span>绘境自有抖音游戏流（默认必选 · 保底流量）</span>
|
||
</label>
|
||
<label class="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/10 cursor-pointer hover:bg-white/10 transition">
|
||
<input type="checkbox" class="w-5 h-5">
|
||
<span>抖音小游戏（亿级公域流量）</span>
|
||
</label>
|
||
<label class="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/10 cursor-pointer hover:bg-white/10 transition">
|
||
<input type="checkbox" class="w-5 h-5">
|
||
<span>微信小程序（社交留存流量）</span>
|
||
</label>
|
||
<label class="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/10 cursor-pointer hover:bg-white/10 transition">
|
||
<input type="checkbox" class="w-5 h-5">
|
||
<span>快手小游戏（下沉流量）</span>
|
||
</label>
|
||
<label class="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/10 cursor-pointer hover:bg-white/10 transition">
|
||
<input type="checkbox" class="w-5 h-5">
|
||
<span>TapTap（核心游戏用户）</span>
|
||
</label>
|
||
</div>
|
||
<button class="w-full mt-8 py-4 bg-primary rounded-xl text-lg font-medium">一键全网自动发布 & 提审</button>
|
||
<p class="text-gray-400 text-sm mt-4 text-center">自动适配图标、封面、文案、合规、打包、API提审，全程无人干预</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 商业化体系 -->
|
||
<section id="profit" class="py-20 px-6">
|
||
<div class="container mx-auto">
|
||
<div class="text-center mb-16">
|
||
<h3 class="text-3xl font-bold mb-4">成熟商业化变现体系</h3>
|
||
<p class="text-gray-400 max-w-2xl mx-auto">全自动广告现金流，玩家零付费、创作者赚钱、平台稳收益，多层级生态盈利无单一依赖</p>
|
||
</div>
|
||
|
||
<!-- 收益单价 -->
|
||
<div class="grid md:grid-cols-3 gap-6 mb-16">
|
||
<div class="bg-glass rounded-2xl p-6 text-center">
|
||
<h4 class="text-warn text-2xl font-bold mb-2">0.3-1.2元/次</h4>
|
||
<p class="text-gray-400">激励视频有效观看（高收益）</p>
|
||
</div>
|
||
<div class="bg-glass rounded-2xl p-6 text-center">
|
||
<h4 class="text-warn text-2xl font-bold mb-2">5-15元/千次</h4>
|
||
<p class="text-gray-400">插屏广告曝光收益</p>
|
||
</div>
|
||
<div class="bg-glass rounded-2xl p-6 text-center">
|
||
<h4 class="text-warn text-2xl font-bold mb-2">0.8-2元/千次</h4>
|
||
<p class="text-gray-400">Banner横幅曝光收益</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 三层用户体系 -->
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="bg-glass rounded-2xl p-8">
|
||
<div class="text-primary font-bold text-xl mb-4">小白创作者</div>
|
||
<p class="text-gray-400 text-sm mb-4">学生/宝妈/副业零基础用户</p>
|
||
<ul class="text-sm text-gray-300 space-y-2">
|
||
<li>✅ 一句话AI生成游戏</li>
|
||
<li>✅ 免费模板一键套用</li>
|
||
<li>✅ 分成80% 超高广告分成</li>
|
||
<li>✅ 满5元T+1快速提现</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-glass rounded-2xl p-8">
|
||
<div class="text-primary font-bold text-xl mb-4">进阶创作者</div>
|
||
<p class="text-gray-400 text-sm mb-4">游戏达人/兼职深耕创作者</p>
|
||
<ul class="text-sm text-gray-300 space-y-2">
|
||
<li>✅ 可视化拖拽精修</li>
|
||
<li>✅ AI智能作品优化</li>
|
||
<li>✅ 素材市场交易收益</li>
|
||
<li>✅ 分成75% + 流量加权</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-glass rounded-2xl p-8">
|
||
<div class="text-primary font-bold text-xl mb-4">专业工作室</div>
|
||
<p class="text-gray-400 text-sm mb-4">团队/MCN/独立制作人</p>
|
||
<ul class="text-sm text-gray-300 space-y-2">
|
||
<li>✅ 多人云端协同创作</li>
|
||
<li>✅ B端政企定制商单</li>
|
||
<li>✅ IP孵化&授权变现</li>
|
||
<li>✅ 高毛利商业项目收益</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 落地规划 + 壁垒 -->
|
||
<section class="py-20 px-6 bg-white/5">
|
||
<div class="container mx-auto">
|
||
<div class="grid md:grid-cols-2 gap-12">
|
||
<div>
|
||
<h3 class="text-2xl font-bold mb-6">6个月落地 roadmap</h3>
|
||
<ul class="space-y-4">
|
||
<li class="flex gap-4">
|
||
<span class="text-primary font-medium w-16">1-2月</span>
|
||
<span class="text-gray-300">AI创作+游戏流基础Demo搭建，完成核心演示能力</span>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<span class="text-primary font-medium w-16">3月</span>
|
||
<span class="text-gray-300">打通四渠道分发中台，实现一键全网发布</span>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<span class="text-primary font-medium w-16">4月</span>
|
||
<span class="text-gray-300">极致体验打磨：0秒加载、滑动流畅、弱网适配</span>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<span class="text-primary font-medium w-16">5月</span>
|
||
<span class="text-gray-300">上线赛马算法、新人流量扶持、分层结算体系</span>
|
||
</li>
|
||
<li class="flex gap-4">
|
||
<span class="text-primary font-medium w-16">6月</span>
|
||
<span class="text-gray-300">全商业闭环打通，正式冷启动商业化上线</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold mb-6">项目核心壁垒</h3>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li class="flex items-start gap-3"><i class="fa fa-shield text-primary mt-1"></i><span><strong>技术壁垒：</strong>对标Astrocade的国产AI游戏全自动生成+多端标准化适配方案</span></li>
|
||
<li class="flex items-start gap-3"><i class="fa fa-shield text-primary mt-1"></i><span><strong>流量壁垒：</strong>自建抖音式私域信息流，新人保底流量，解决行业最大痛点</span></li>
|
||
<li class="flex items-start gap-3"><i class="fa fa-shield text-primary mt-1"></i><span><strong>变现壁垒：</strong>一次创作五渠道全自动变现，落地即产生稳定现金流</span></li>
|
||
<li class="flex items-start gap-3"><i class="fa fa-shield text-primary mt-1"></i><span><strong>生态壁垒：</strong>三层全民创作者体系，实现平台内容自增长</span></li>
|
||
<li class="flex items-start gap-3"><i class="fa fa-shield text-primary mt-1"></i><span><strong>迭代壁垒：</strong>全渠道数据回流反哺AI，作品持续迭代复利增长</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="py-10 text-center text-gray-500 text-sm">
|
||
<p>绘境AI游戏生态平台 · 投资人演示版 | 全链路AI游戏创作变现闭环平台</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// 滚动定位
|
||
function scrollToCreate(){document.getElementById('create').scrollIntoView({behavior:'smooth'})}
|
||
function scrollToLoop(){document.getElementById('loop').scrollIntoView({behavior:'smooth'})}
|
||
function scrollToPublish(){document.getElementById('publish').scrollIntoView({behavior:'smooth'})}
|
||
|
||
// AI生成动画演示
|
||
function startGenerate(){
|
||
const btn = document.getElementById('genBtn')
|
||
const loading = document.getElementById('genLoading')
|
||
const result = document.getElementById('genResult')
|
||
const progress = document.getElementById('progressBar')
|
||
|
||
btn.disabled = true
|
||
btn.innerText = '生成中...'
|
||
loading.classList.remove('hidden')
|
||
result.classList.add('hidden')
|
||
progress.style.width = '100%'
|
||
|
||
setTimeout(()=>{
|
||
loading.classList.add('hidden')
|
||
result.classList.remove('hidden')
|
||
btn.disabled = false
|
||
btn.innerText = 'AI一键生成游戏'
|
||
progress.style.width = '0%'
|
||
},6000)
|
||
}
|
||
|
||
// 手机滑动模拟
|
||
const phoneFlow = document.getElementById('phoneFlow')
|
||
let index = 0
|
||
setInterval(()=>{
|
||
index ++
|
||
if(index>2) index=0
|
||
phoneFlow.style.transform = `translateY(-${index*100}%)`
|
||
phoneFlow.style.transition = 'all 0.5s ease'
|
||
},3000)
|
||
</script>
|
||
</body>
|
||
</html> |