<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<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.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
.eye-demo {
background: radial-gradient(circle at 35% 35%, #4a5568, #2d3748);
border-radius: 50%;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.pupil {
background: radial-gradient(circle at 30% 30%, #000, #1a202c);
border-radius: 50%;
position: absolute;
transition: all 0.3s ease;
}
.iris {
background: radial-gradient(circle at 35% 35%, #48bb78, #2f855a);
border-radius: 50%;
position: absolute;
}
.eyelid {
background: #2d3748;
position: absolute;
border-radius: 50%;
transition: transform 0.2s ease;
}
.blink {
animation: blink 3s infinite;
}
@keyframes blink {
0%, 90%, 100% { transform: scaleY(1); }
95% { transform: scaleY(0.1); }
}
</style>
</head>
<body class="bg-base-100 min-h-screen">
<!-- 导航栏 -->
<div class="navbar bg-base-200 shadow-lg">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</div>
</div>
<a class="btn btn-ghost text-xl">
<i class="fas fa-eye text-red-500 mr-2"></i>
AI恶魔之眼
</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="#intro">产品介绍</a></li>
<li><a href="#features">核心功能</a></li>
<li><a href="#control">控制方式</a></li>
<li><a href="#setup">快速入门</a></li>
</ul>
</div>
</div>
<!-- Hero区域 -->
<div class="hero min-h-screen bg-gradient-to-br from-gray-900 to-black">
<div class="hero-content text-center text-white">
<div class="max-w-4xl">
<h1 class="text-5xl font-bold mb-6">AI恶魔之眼</h1>
<p class="text-xl mb-8">智能仿生眼睛模拟系统 - 赋予设备灵魂之窗</p>
<!-- 动态眼睛演示 -->
<div class="flex justify-center mb-8">
<div class="eye-demo w-64 h-64 blink relative">
<div class="iris w-40 h-40 top-12 left-12"></div>
<div class="pupil w-20 h-20 top-22 left-22"></div>
<div class="eyelid w-64 h-32 top-0 blink"></div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div class="stat bg-base-200 bg-opacity-50 rounded-lg p-4">
<div class="stat-title text-white">真实人眼模拟</div>
<div class="stat-value text-red-400">100%</div>
<div class="stat-desc text-gray-300">仿真度</div>
</div>
<div class="stat bg-base-200 bg-opacity-50 rounded-lg p-4">
<div class="stat-title text-white">情绪驱动</div>
<div class="stat-value text-green-400">AI</div>
<div class="stat-desc text-gray-300">智能联动</div>
</div>
<div class="stat bg-base-200 bg-opacity-50 rounded-lg p-4">
<div class="stat-title text-white">多设备适配</div>
<div class="stat-value text-blue-400">∞</div>
<div class="stat-desc text-gray-300">应用场景</div>
</div>
</div>
</div>
</div>
</div>
<!-- 产品介绍 -->
<section id="intro" class="py-16 bg-base-100">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">产品简介</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<h3 class="text-2xl font-semibold mb-4">什么是AI恶魔之眼?</h3>
<p class="text-lg mb-6">
AI恶魔之眼是一款具备动态视觉效果与仿生眼睛模拟功能的智能显示产品,通过先进的AI技术实现真实人眼的各种动态特效,为智能设备赋予生动的"灵魂之窗"。
</p>
<div class="space-y-4">
<div class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>真实人眼模拟:虹膜样式变换、眨眼动画、瞳孔缩放</span>
</div>
<div class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>自定义内容上传:支持图片、GIF动图个性化展示</span>
</div>
<div class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>情绪驱动切换:结合AI助手自动切换眼睛样式</span>
</div>
<div class="flex items-center">
<i class="fas fa-check text-green-500 mr-3"></i>
<span>多设备适配:电动车、智能小车、人形机器人等</span>
</div>
</div>
</div>
<div class="flex justify-center">
<div class="mockup-phone">
<div class="camera"></div>
<div class="display">
<div class="artboard artboard-demo phone-1 bg-black">
<div class="eye-demo w-32 h-32 mx-auto mt-8 blink">
<div class="iris w-20 h-20 top-6 left-6"></div>
<div class="pupil w-10 h-10 top-11 left-11"></div>
<div class="eyelid w-32 h-16 top-0 blink"></div>
</div>
<div class="text-white text-center mt-4">
<p>AI恶魔之眼</p>
<p class="text-sm text-gray-400">在线控制中...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心功能 -->
<section id="features" class="py-16 bg-base-200">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12">核心功能特性</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 功能1 -->
<div class="card bg-base-100 shadow-xl">
<figure class="px-10 pt-10">