# Role：数字界面设计师 ## Background：用户希望创建一个现代化的音乐API页面，这表明用户可能是一位音乐平台开发者或产品经理，寻求专业的设计解决方案。 ## Attention：注意要点和动机激励 - 确保设计满足现代化、简洁、大气的要求。 - 集成主流音乐平台的icon和emoji。 - 设计需体现专业性和上档次。 ## Profile： - Author: prompt-optimizer - Version: 1.0 - Language: 中文 - Description: 数字界面设计师，专注于创建美观、功能性强且符合用户需求的数字界面。 ### Skills: - 熟练掌握数字界面设计原则和最佳实践。 - 能够使用设计软件（如Sketch, Adobe XD等）进行界面设计。 - 具备用户体验（UX）设计能力，理解用户需求和交互逻辑。 - 精通图标和表情符号的设计。 - 了解前端开发技术，能够与开发团队有效沟通。 ## Goals: - 设计一个现代化的音乐API页面。 - 确保页面简洁、美观、大气。 - 集成主流音乐平台的icon和emoji。 - 提供专业的设计方案，满足用户需求。 - 保证设计符合前端开发标准。 ## Constrains: - 设计需符合现代审美和用户体验原则。 - 必须集成主流音乐平台的icon和emoji。 - 设计需易于阅读和维护。 - 设计需与现有技术栈兼容。 - 设计需考虑到可访问性。 ## Workflow: 1. 研究用户需求和目标受众。 2. 设计页面布局和用户流程。 3. 创建视觉元素，包括icon和emoji。 4. 设计页面风格和色彩方案。 5. 与开发团队沟通，确保设计可实施。 ## OutputFormat: - 提供设计稿，包括高保真度的图像或原型。 - 设计文档，详细说明设计决策和用户交互逻辑。 - 设计规范，包括图标和emoji的使用指南。 ## Suggestions: - 持续关注设计趋势和用户反馈，以保持设计的现代感。 - 使用用户测试来验证设计的有效性和用户体验。 - 学习并应用最新的设计工具和技术。 - 与开发团队合作，确保设计实现的高效性。 - 定期回顾和更新设计，以适应技术和市场变化。 - Initial Deployment
3a87a20 verified | <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MusicAPI Hub - 现代化音乐API平台</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: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .api-endpoint { | |
| font-family: monospace; | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| padding: 12px 16px; | |
| border-radius: 6px; | |
| overflow-x: auto; | |
| } | |
| .music-wave { | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| } | |
| .music-wave span { | |
| height: 20px; | |
| display: block; | |
| width: 4px; | |
| background-color: #6366f1; | |
| border-radius: 2px; | |
| animation: wave 1.2s infinite ease-in-out; | |
| } | |
| .music-wave span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .music-wave span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| .music-wave span:nth-child(4) { | |
| animation-delay: 0.6s; | |
| } | |
| .music-wave span:nth-child(5) { | |
| animation-delay: 0.8s; | |
| } | |
| @keyframes wave { | |
| 0%, 100% { | |
| transform: scaleY(0.5); | |
| } | |
| 50% { | |
| transform: scaleY(1.5); | |
| } | |
| } | |
| .platform-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .platform-icon:hover { | |
| transform: scale(1.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- 导航栏 --> | |
| <nav class="bg-white shadow-md py-4 sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold mr-2"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| <span class="text-xl font-bold text-primary">MusicAPI Hub</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#features" class="hover:text-primary transition">功能</a> | |
| <a href="#documentation" class="hover:text-primary transition">文档</a> | |
| <a href="#pricing" class="hover:text-primary transition">价格</a> | |
| <a href="#contact" class="hover:text-primary transition">联系</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-lg border border-primary text-primary hover:bg-primary hover:text-white transition">登录</button> | |
| <button class="px-4 py-2 rounded-lg gradient-bg text-white hover:opacity-90 transition">注册</button> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- 英雄区域 --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">强大的音乐API解决方案</h1> | |
| <p class="text-xl mb-8 opacity-90">集成全球主流音乐平台，为您的应用提供丰富的音乐数据与功能</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="px-6 py-3 bg-white text-primary rounded-lg font-semibold hover:bg-opacity-90 transition">开始使用</button> | |
| <button class="px-6 py-3 bg-transparent border border-white text-white rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition">查看文档</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-80 h-80 bg-white bg-opacity-10 rounded-full absolute -top-10 -left-10"></div> | |
| <div class="w-80 h-80 bg-white bg-opacity-5 rounded-full absolute -bottom-10 -right-10"></div> | |
| <div class="relative bg-white bg-opacity-5 backdrop-blur-md rounded-2xl p-6 border border-white border-opacity-20 shadow-xl"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-music text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-semibold">Blinding Lights</h3> | |
| <p class="text-sm opacity-80">The Weeknd</p> | |
| </div> | |
| </div> | |
| <div class="music-wave"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="h-1 bg-white bg-opacity-20 rounded-full mb-2"> | |
| <div class="h-1 bg-white rounded-full w-1/3"></div> | |
| </div> | |
| <div class="flex justify-between text-sm opacity-80"> | |
| <span>1:23</span> | |
| <span>3:45</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-center space-x-8"> | |
| <button class="text-xl opacity-80 hover:opacity-100"><i class="fas fa-step-backward"></i></button> | |
| <button class="w-12 h-12 rounded-full bg-white text-primary flex items-center justify-center hover:bg-opacity-90"><i class="fas fa-play"></i></button> | |
| <button class="text-xl opacity-80 hover:opacity-100"><i class="fas fa-step-forward"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 平台集成区域 --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">集成主流音乐平台</h2> | |
| <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">我们的API无缝连接全球最受欢迎的音乐服务平台，为您提供一站式的音乐数据解决方案</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="flex flex-col items-center p-6 rounded-xl bg-gray-50 card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-4"> | |
| <i class="fab fa-youtube text-red-600 text-2xl platform-icon"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">YouTube Music</h3> | |
| <p class="text-sm text-gray-600 text-center">全球最大的音乐视频平台</p> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-xl bg-gray-50 card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4"> | |
| <i class="fab fa-spotify text-green-600 text-2xl platform-icon"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Spotify</h3> | |
| <p class="text-sm text-gray-600 text-center">领先的音乐流媒体服务</p> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-xl bg-gray-50 card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i class="fab fa-apple text-blue-600 text-2xl platform-icon"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Apple Music</h3> | |
| <p class="text-sm text-gray-600 text-center">高品质音乐体验</p> | |
| </div> | |
| <div class="flex flex-col items-center p-6 rounded-xl bg-gray-50 card-hover"> | |
| <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-compact-disc text-purple-600 text-2xl platform-icon"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">SoundCloud</h3> | |
| <p class="text-sm text-gray-600 text-center">发现新兴艺术家</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 功能特性 --> | |
| <section id="features" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">强大功能特性</h2> | |
| <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">我们的API提供丰富而强大的功能，满足各种音乐相关的开发需求</p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm card-hover"> | |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white text-xl mb-4"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">高级音乐搜索</h3> | |
| <p class="text-gray-600">通过歌曲名、艺术家、专辑或歌词快速搜索海量音乐库</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm card-hover"> | |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white text-xl mb-4"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">元数据获取</h3> | |
| <p class="text-gray-600">获取完整的歌曲信息，包括专辑封面、流派、时长等元数据</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm card-hover"> | |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white text-xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">艺人信息</h3> | |
| <p class="text-gray-600">访问详细的艺人资料、热门歌曲和相关艺术家</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm card-hover"> | |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white text-xl mb-4"> | |
| <i class="fas fa-list"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">播放列表管理</h3> | |
| <p class="text-gray-600">创建、读取、更新和删除跨平台的播放列表</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm card-hover"> | |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white text-xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">排行榜数据</h3> | |
| <p class="text-gray-600">获取全球和各地区的实时音乐排行榜数据</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm card-hover"> | |
| <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center text-white text-xl mb-4"> | |
| <i class="fas fa-recommendation"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">个性化推荐</h3> | |
| <p class="text-gray-600">基于用户听歌历史和偏好生成个性化推荐</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- API文档示例 --> | |
| <section id="documentation" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">API文档示例</h2> | |
| <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">清晰简洁的API设计，让集成变得简单快捷</p> | |
| <div class="bg-gray-50 rounded-2xl p-6 md:p-8"> | |
| <div class="flex flex-wrap gap-3 mb-6"> | |
| <span class="px-3 py-1 bg-primary bg-opacity-10 text-primary rounded-full text-sm">GET</span> | |
| <span class="px-3 py-1 bg-green-500 bg-opacity-10 text-green-500 rounded-full text-sm">搜索</span> | |
| <span class="px-3 py-1 bg-blue-500 bg-opacity-10 text-blue-500 rounded-full text-sm">公开</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">搜索歌曲</h3> | |
| <p class="text-gray-600 mb-6">通过关键词搜索歌曲，返回匹配的歌曲列表及相关信息。</p> | |
| <div class="api-endpoint mb-6"> | |
| GET https://api.musichub.com/v1/search?q=query&type=track&limit=10 | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-semibold mb-2">参数</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex"> | |
| <span class="inline-block w-32 font-mono text-sm text-gray-600">q</span> | |
| <span class="flex-1">搜索关键词</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="inline-block w-32 font-mono text-sm text-gray-600">type</span> | |
| <span class="flex-1">搜索类型 (track, album, artist, playlist)</span> | |
| </li> | |
| <li class="flex"> | |
| <span class="inline-block w-32 font-mono text-sm text-gray-600">limit</span> | |
| <span class="flex-1">返回结果数量 (默认10，最大50)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">响应示例</h4> | |
| <pre class="bg-gray-900 text-gray-200 p-4 rounded-lg overflow-x-auto"> | |
| { | |
| "tracks": { | |
| "items": [ | |
| { | |
| "id": "5fJ2s...", | |
| "name": "Blinding Lights", | |
| "artists": [ | |
| { | |
| "id": "1Xyo...", | |
| "name": "The Weeknd" | |
| } | |
| ], | |
| "album": { | |
| "id": "2nLO...", | |
| "name": "After Hours", | |
| "images": [ | |
| { | |
| "url": "https://i.scdn.co/image/ab67616d0000b273...", | |
| "height": 640, | |
| "width": 640 | |
| } | |
| ] | |
| }, | |
| "duration_ms": 200040, | |
| "preview_url": "https://p.scdn.co/mp3-preview/..." | |
| } | |
| ], | |
| "total": 100, | |
| "limit": 10, | |
| "offset": 0 | |
| } | |
| }</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 价格方案 --> | |
| <section id="pricing" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">灵活的价格方案</h2> | |
| <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">选择适合您需求的价格计划，从小型项目到企业级应用</p> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 flex flex-col"> | |
| <h3 class="text-2xl font-semibold mb-4">免费版</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$0</span> | |
| <span class="text-gray-600">/月</span> | |
| </div> | |
| <ul class="space-y-3 mb-8 flex-1"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>每月100次API请求</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>基础搜索功能</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>基础元数据访问</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i class="fas fa-times mt-1 mr-2"></i> | |
| <span>无高级功能</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i class="fas fa-times mt-1 mr-2"></i> | |
| <span>无个性化推荐</span> | |
| </li> | |
| </ul> | |
| <button class="px-6 py-3 border border-primary text-primary rounded-lg font-semibold hover:bg-primary hover:text-white transition">选择免费版</button> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md border-2 border-primary relative flex flex-col"> | |
| <div class="absolute -top-3 left-1/2 transform -translate-x-1/2"> | |
| <span class="px-4 py-1 bg-primary text-white text-sm font-semibold rounded-full">最受欢迎</span> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">专业版</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$29</span> | |
| <span class="text-gray-600">/月</span> | |
| </div> | |
| <ul class="space-y-3 mb-8 flex-1"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>每月10,000次API请求</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>高级搜索功能</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>完整元数据访问</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>播放列表管理</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>基本个性化推荐</span> | |
| </li> | |
| </ul> | |
| <button class="px-6 py-3 gradient-bg text-white rounded-lg font-semibold hover:opacity-90 transition">选择专业版</button> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200 flex flex-col"> | |
| <h3 class="text-2xl font-semibold mb-4">企业版</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$99</span> | |
| <span class="text-gray-600">/月</span> | |
| </div> | |
| <ul class="space-y-3 mb-8 flex-1"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>无限制API请求</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>所有高级功能</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>实时数据访问</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>高级个性化推荐</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>专属技术支持</span> | |
| </li> | |
| </ul> | |
| <button class="px-6 py-3 border border-primary text-primary rounded-lg font-semibold hover:bg-primary hover:text-white transition">联系销售</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 联系区域 --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">开始使用MusicAPI Hub</h2> | |
| <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">立即注册获取API密钥，或联系我们的团队了解更多信息</p> | |
| <div class="grid md:grid-cols-2 gap-12 max-w-4xl mx-auto"> | |
| <div> | |
| <form class="space-y-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2" for="name">姓名</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的姓名"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2" for="email">邮箱</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的邮箱"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2" for="message">消息</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的消息"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 gradient-bg text-white rounded-lg font-semibold hover:opacity-90 transition">发送消息</button> | |
| </form> | |
| </div> | |
| <div> | |
| <div class="bg-gray-50 p-6 rounded-xl h-full"> | |
| <h3 class="text-xl font-semibold mb-4">联系信息</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-primary bg-opacity-10 flex items-center justify-center text-primary mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">邮箱</h4> | |
| <p class="text-gray-600">support@musichubapi.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-primary bg-opacity-10 flex items-center justify-center text-primary mr-4"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">电话</h4> | |
| <p class="text-gray-600">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-lg bg-primary bg-opacity-10 flex items-center justify-center text-primary mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">地址</h4> | |
| <p class="text-gray-600">123 Music Street, San Francisco, CA 94103</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-semibold mb-4">关注我们</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 页脚 --> | |
| <footer class="bg-dark text-gray-400 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white font-bold mr-2"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| <span class="text-white font-bold">MusicAPI Hub</span> | |
| </div> | |
| <p class="mb-4">为开发者提供强大的音乐API解决方案，集成全球主流音乐平台。</p> | |
| <p>© 2023 MusicAPI Hub. 保留所有权利。</p> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">产品</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">功能</a></li> | |
| <li><a href="#" class="hover:text-white transition">使用场景</a></li> | |
| <li><a href="#" class="hover:text-white transition">价格</a></li> | |
| <li><a href="#" class="hover:text-white transition">API文档</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">资源</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">开发文档</a></li> | |
| <li><a href="#" class="hover:text-white transition">API参考</a></li> | |
| <li><a href="#" class="hover:text-white transition">教程</a></li> | |
| <li><a href="#" class="hover:text-white transition">博客</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">公司</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">关于我们</a></li> | |
| <li><a href="#" class="hover:text-white transition">联系我们</a></li> | |
| <li><a href="#" class="hover:text-white transition">隐私政策</a></li> | |
| <li><a href="#" class="hover:text-white transition">服务条款</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-sm text-center"> | |
| <p>本产品与YouTube、Spotify、Apple Music、SoundCloud或其他音乐平台没有附属、关联、授权、认可关系。</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // 简单的音乐播放器动画控制 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const playButton = document.querySelector('.fa-play'); | |
| if (playButton) { | |
| playButton.addEventListener('click', function() { | |
| this.classList.toggle('fa-play'); | |
| this.classList.toggle('fa-pause'); | |
| const waves = document.querySelectorAll('.music-wave span'); | |
| waves.forEach(wave => { | |
| wave.style.animationPlayState = wave.style.animationPlayState === 'paused' ? 'running' : 'paused'; | |
| }); | |
| }); | |
| } | |
| // 导航菜单滚动平滑效果 | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| </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=ixingchen/unmapi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |