Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Playable Ads: Evoking Player Flow State</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#8B5CF6', | |
| accent: '#EC4899', | |
| dark: '#1E293B', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Noto Sans SC', sans-serif; | |
| background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); | |
| color: #E2E8F0; | |
| scroll-behavior: smooth; | |
| } | |
| .flow-card { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(124, 58, 237, 0.3); | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .flow-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3); | |
| border-color: rgba(124, 58, 237, 0.6); | |
| } | |
| .section-title { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, #8B5CF6, #EC4899); | |
| border-radius: 2px; | |
| } | |
| .highlight { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .highlight::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -5px; | |
| width: calc(100% + 10px); | |
| height: 100%; | |
| background: rgba(139, 92, 246, 0.3); | |
| z-index: -1; | |
| transform: skewX(-15deg); | |
| } | |
| .hero-pattern { | |
| background: radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.15) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 20%); | |
| } | |
| .flow-icon { | |
| width: 80px; | |
| height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, #4F46E5, #8B5CF6); | |
| box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); | |
| margin: 0 auto 20px; | |
| } | |
| .strategy-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid #8B5CF6; | |
| } | |
| .strategy-card:hover { | |
| transform: translateX(5px); | |
| background: rgba(55, 48, 163, 0.2); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #8B5CF6, #EC4899); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-gray-900/80 backdrop-blur-sm z-50 border-b border-purple-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600"> | |
| <i class="fas fa-gamepad mr-2"></i>Playable Ads Insights | |
| </span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#intro" class="text-purple-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">简介</a> | |
| <a href="#flow-elements" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">心流要素</a> | |
| <a href="#strategies" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">创意策略</a> | |
| <a href="#conclusion" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition">结语</a> | |
| <a href="http://www.dorodorothy.com/" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition"> | |
| 试玩案例 <i class="fas fa-external-link-alt ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="md:hidden hidden pb-4 border-t border-purple-900/50"> | |
| <div class="px-2 pt-2 space-y-1"> | |
| <a href="#intro" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">简介</a> | |
| <a href="#flow-elements" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">心流要素</a> | |
| <a href="#strategies" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">创意策略</a> | |
| <a href="#conclusion" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">结语</a> | |
| <a href="http://www.dorodorothy.com/" target="_blank" class="bg-purple-600 hover:bg-purple-700 text-white block px-3 py-2 rounded-md text-base font-medium text-center"> | |
| 试玩案例 <i class="fas fa-external-link-alt ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="intro" class="pt-24 pb-16 md:pt-32 md:pb-24 hero-pattern"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6"> | |
| <span class="gradient-text">Playable广告</span> 如何在短时间内唤醒玩家心流 | |
| </h1> | |
| <p class="text-xl text-purple-200 mb-8">游克游戏美术/技术总监 彭晓宇 分享</p> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="flow-card p-6 mb-8"> | |
| <p class="text-lg md:text-xl leading-relaxed"> | |
| 在游戏营销中，Playable广告让用户从被动观看转为主动体验，以短暂试玩来感受游戏乐趣。相比传统视频/图片广告，这种互动形式能带来更强的沉浸感和正向体验，显著提升转化率。 | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10"> | |
| <div class="flow-card p-6"> | |
| <div class="text-pink-500 text-3xl mb-4"> | |
| <i class="fas fa-stopwatch"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">时间有限</h3> | |
| <p class="text-gray-300">广告只有数十秒时间展示游戏魅力</p> | |
| </div> | |
| <div class="flow-card p-6"> | |
| <div class="text-purple-500 text-3xl mb-4"> | |
| <i class="fas fa-scenery"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">情境单一</h3> | |
| <p class="text-gray-300">难以展示游戏完整的世界观和剧情</p> | |
| </div> | |
| <div class="flow-card p-6"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">投入度低</h3> | |
| <p class="text-gray-300">玩家尚未建立与游戏的情感连接</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Flow Elements Section --> | |
| <section id="flow-elements" class="py-16 md:py-24"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 section-title">心流五要素框架</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| 心流理论指出，一个人完全沉浸于某项活动时，会表现出五大特征 | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8"> | |
| <!-- Goal Clarity --> | |
| <div class="flow-card p-6"> | |
| <div class="flow-icon"> | |
| <i class="fas fa-bullseye text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">目标清晰</h3> | |
| <p class="text-gray-300 mb-4"> | |
| 玩家只有在目标明确的情况下才能全心投入。如果广告里的目标不明确，玩家会困惑"我到底要干什么?"，很难进入心流。 | |
| </p> | |
| <div class="bg-gray-800 rounded-lg p-4 mt-4"> | |
| <h4 class="font-bold text-purple-300 mb-2">创意解决方案：</h4> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>情绪预埋：在广告开篇植入微剧情或情境对白</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>套壳互动：将玩法套入剧情场景或测试场景</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Timely Feedback --> | |
| <div class="flow-card p-6"> | |
| <div class="flow-icon"> | |
| <i class="fas fa-bolt text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">及时反馈</h3> | |
| <p class="text-gray-300 mb-4"> | |
| 及时的反馈能强化行为和动机。当玩家的每个动作都能立即看到结果或奖励时，更容易保持投入。 | |
| </p> | |
| <div class="bg-gray-800 rounded-lg p-4 mt-4"> | |
| <h4 class="font-bold text-purple-300 mb-2">创意解决方案：</h4> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>节奏压缩：加快游戏节奏和反馈频率</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>爽点前置：将游戏中后期的高潮爽感提前引爆</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Challenge Matching --> | |
| <div class="flow-card p-6"> | |
| <div class="flow-icon"> | |
| <i class="fas fa-balance-scale text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">挑战匹配</h3> | |
| <p class="text-gray-300 mb-4"> | |
| 心流状态下，挑战难度与玩家技能水平匹配，既不无聊也不焦虑。Playable广告面向的是从未接触过游戏的新用户。 | |
| </p> | |
| <div class="bg-gray-800 rounded-lg p-4 mt-4"> | |
| <h4 class="font-bold text-purple-300 mb-2">创意解决方案：</h4> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>错位融合：用简单有趣的玩法包装复杂玩法</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>玩法补足：增加额外交互环节提升难度层次</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Focused Immersion --> | |
| <div class="flow-card p-6"> | |
| <div class="flow-icon"> | |
| <i class="fas fa-binoculars text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">专注沉浸</h3> | |
| <p class="text-gray-300 mb-4"> | |
| 专注沉浸指的是玩家全神贯注于眼前的活动，达到忘我的境地。如果广告缺乏情境代入，只剩下冷冰冰的机械互动，用户的心理防线始终是紧绷的。 | |
| </p> | |
| <div class="bg-gray-800 rounded-lg p-4 mt-4"> | |
| <h4 class="font-bold text-purple-300 mb-2">创意解决方案：</h4> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>情绪预埋：通过剧情片段和情感元素创造沉浸入口</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>错位融合：在保持情境连贯的前提下加入趣味桥段</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Time Distortion --> | |
| <div class="flow-card p-6"> | |
| <div class="flow-icon"> | |
| <i class="fas fa-hourglass-half text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-center">时间感淡化</h3> | |
| <p class="text-gray-300 mb-4"> | |
| 当一个人完全沉浸时，常常会失去对时间流逝的敏感，感觉"时间过得飞快"。在Playable广告中，我们希望玩家觉得短短30秒转瞬即逝。 | |
| </p> | |
| <div class="bg-gray-800 rounded-lg p-4 mt-4"> | |
| <h4 class="font-bold text-purple-300 mb-2">创意解决方案：</h4> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>节奏压缩 & 爽点前置：维持高能量输出</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>多层互动节奏：设计多层次的互动体验</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Creative Strategies --> | |
| <section id="strategies" class="py-16 md:py-24 bg-gray-900/50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 section-title">六大Playable创意策略</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| 通过创意设计弥补游戏原生体验在广告环境下的不足 | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="strategy-card p-6 bg-gray-800/50"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-compress text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">节奏压缩</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| 直接加快游戏节奏和反馈频率，跳过冗长前戏，提炼出最快速的反馈循环。 | |
| </p> | |
| </div> | |
| <div class="strategy-card p-6 bg-gray-800/50"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-pink-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-puzzle-piece text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">玩法补足</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| 对于反馈机制单一、正向刺激不足的玩法，插入额外的小任务来制造即时反馈。 | |
| </p> | |
| </div> | |
| <div class="strategy-card p-6 bg-gray-800/50"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-theater-masks text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">情绪预埋</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| 在广告开篇植入一段微剧情或情境对白，赋予玩家角色使命，提供行动理由。 | |
| </p> | |
| </div> | |
| <div class="strategy-card p-6 bg-gray-800/50"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-random text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">错位融合</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| 用另一种简单有趣的玩法去包装复杂玩法，通俗演绎原本复杂晦涩的玩法。 | |
| </p> | |
| </div> | |
| <div class="strategy-card p-6 bg-gray-800/50"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-forward text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">爽点前置</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| 将游戏中后期才出现的高潮爽感提前引爆，赋予玩家顶级权限。 | |
| </p> | |
| </div> | |
| <div class="strategy-card p-6 bg-gray-800/50"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-cube text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">套壳互动</h3> | |
| </div> | |
| <p class="text-gray-300"> | |
| 将广告互动伪装成一个"小测验"或挑战，赋予用户明确的通关标准。 | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-16 flow-card p-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-48 h-48 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center"> | |
| <i class="fas fa-gamepad text-white text-5xl"></i> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-gray-800 border-2 border-purple-500 rounded-lg p-3 w-32"> | |
| <p class="text-center text-sm font-bold text-purple-300">转化率提升</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-8"> | |
| <h3 class="text-2xl font-bold mb-4">创意策略的核心价值</h3> | |
| <p class="text-gray-300 mb-4"> | |
| 通过六大创意策略的组合运用，Playable广告能够弥补游戏原生体验在广告环境下的不足，在短时间内引导玩家进入心流状态，让他们瞬间领略游戏魅力核心，从而被激发兴趣，完成转化。 | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line text-white"></i> | |
| </div> | |
| <p class="text-sm">平均提升<span class="font-bold text-purple-300"> 35-50% </span>的转化率</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Conclusion --> | |
| <section id="conclusion" class="py-16 md:py-24"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flow-card p-8"> | |
| <div class="text-center mb-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 section-title">结语</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| 重塑体验，以创意之钥直达心流与爽点 | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <p class="text-lg leading-relaxed mb-6"> | |
| 围绕心流五要素的Playable广告创意方法论，为我们提供了一套从缺陷到对策的系统思路。从识别各游戏类型在广告环境中的天然短板，到运用节奏压缩、玩法补足、情绪预埋、错位融合、爽点前置、套壳互动等非常规手段逐一破解，我们始终紧扣着同一个宗旨——重塑而非复刻游戏体验。 | |
| </p> | |
| <p class="text-lg leading-relaxed mb-6"> | |
| 优秀的Playable广告不在于机械复制游戏全貌，而在于激活游戏的乐趣：通过创意的压缩与重组，在有限时间里直击玩家兴奋点。我们放大游戏的优点，弱化其缺点，以玩家心理体验为中心大胆想象改造。 | |
| </p> | |
| <div class="bg-gray-800 rounded-xl p-6 border-l-4 border-purple-500 mb-8"> | |
| <p class="text-lg font-bold text-center gradient-text"> | |
| "当玩家在广告中被乐趣深深打动，转化行为也就水到渠成" | |
| </p> | |
| </div> | |
| <p class="text-lg leading-relaxed"> | |
| 在策略和创意的加持下，Playable广告的设计已不单是对游戏的缩影呈现，更是一场对玩家心理的精彩拿捏——以创意之钥开启玩家快乐之门，直达游戏乐趣的核心。相信运用上述方法论，我们能够打造出让玩家沉浸、惊喜、欲罢不能的广告体验，在短短瞬间点燃他们对游戏的热情，同时创造出营销转化的奇迹！ | |
| </p> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="http://www.dorodorothy.com/" target="_blank" class="inline-block bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-3 px-8 rounded-full text-lg transition transform hover:scale-105"> | |
| 体验案例演示 <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600"> | |
| <i class="fas fa-gamepad mr-2"></i>Playable Ads Insights | |
| </h3> | |
| <p class="text-gray-400 mt-2">游克游戏美术/技术总监 彭晓宇 分享</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-weibo text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-weixin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| <p>© 2023 Playable Ads Insights. 本内容仅用于学习交流。</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking a link | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| }); | |
| }); | |
| // Add active class to navigation items when scrolling | |
| const sections = document.querySelectorAll('section'); | |
| const navLinks = document.querySelectorAll('nav a'); | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.clientHeight; | |
| if (pageYOffset >= (sectionTop - sectionHeight / 3)) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| navLinks.forEach(link => { | |
| link.classList.remove('text-purple-300'); | |
| if (link.getAttribute('href').includes(current)) { | |
| link.classList.add('text-purple-300'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Atongmu333/vm3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |