<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>atMP3</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #121212 0%, #1E1E1E 100%);
      color: #f0f0f0;
      min-height: 100vh;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    /* 布局容器 */
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* 导航栏 */
    nav {
      position: fixed;
      width: 100%;
      z-index: 100;
      background-color: rgba(18, 18, 18, 0.8);
      backdrop-filter: blur(4px);
      transition: all 0.3s ease;
    }

    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(90deg, #8B5CF6, #EC4899);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-text {
      font-size: 24px;
      font-weight: bold;
    }

    .nav-links {
      display: none;
      gap: 32px;
    }

    .nav-links a {
      color: #ddd;
      transition: color 0.3s ease;
    }

    .nav-links a:hover {
      color: #8B5CF6;
    }

    .menu-btn {
      display: block;
      font-size: 24px;
      cursor: pointer;
    }

    /* 英雄区域 */
    header {
      padding: 120px 0 80px;
      text-align: center;
    }

    .hero-title {
      font-size: clamp(2.5rem, 6vw, 4rem);
      font-weight: bold;
      margin-bottom: 24px;
      line-height: 1.2;
    }

    .text-gradient {
      background: linear-gradient(90deg, #8B5CF6, #EC4899);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-desc {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: #bbb;
      max-width: 600px;
      margin: 0 auto 40px;
    }

    /* 手机展示 */
    .phone-display {
      max-width: 300px;
      margin: 60px auto;
      position: relative;
    }

    .phone-frame {
      border: 8px solid #1E1E1E;
      border-radius: 48px;
      padding: 10px;
      box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    }

    .phone-screen {
      width: 100%;
      aspect-ratio: 9/19;
      background-color: #121212;
      border-radius: 36px;
      overflow: hidden;
      position: relative;
    }

    .app-simulation {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 16px;
      display: flex;
      flex-direction: column;
    }

    .album-cover {
      margin-top: 48px;
      align-self: center;
      position: relative;
      width: 180px;
      height: 180px;
    }

    .record {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #000;
      animation: spin 20s linear infinite;
    }

    .record-inner {
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      border-radius: 50%;
      overflow: hidden;
      border: 4px solid #1E1E1E;
    }

    .record-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .record-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(90deg, #8B5CF6, #EC4899);
    }

    .song-info {
      margin-top: 32px;
      text-align: center;
    }

    .song-title {
      font-size: 18px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .song-artist {
      font-size: 14px;
      color: #888;
      margin-top: 4px;
    }

    .progress-bar {
      margin-top: 24px;
      padding: 0 8px;
    }

    .progress-bg {
      height: 4px;
      background-color: #333;
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      width: 35%;
      background: linear-gradient(90deg, #8B5CF6, #EC4899);
    }

    .progress-time {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }

    .controls {
      margin-top: auto;
      margin-bottom: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 32px;
    }

    .control-btn {
      color: #888;
      font-size: 24px;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .control-btn:hover {
      color: #fff;
    }

    .play-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(90deg, #8B5CF6, #EC4899);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .play-btn:hover {
      transform: scale(1.05);
    }

    /* 下载按钮 */
    .download-btn {
      display: inline-block;
      margin-top: 20px;
      padding: 14px 32px;
      background: linear-gradient(90deg, #8B5CF6, #EC4899);
      color: white;
      font-weight: 600;
      border-radius: 30px;
      font-size: 18px;
      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
      transition: transform 0.3s ease;
    }

    .download-btn:hover {
      transform: scale(1.05);
    }

    /* 特点区域 */
    #features {
      padding: 100px 0;
      background-color: rgba(30, 30, 30, 0.3);
    }

    .section-title {
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      font-weight: bold;
      text-align: center;
      margin-bottom: 60px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .feature-card {
      background-color: rgba(30, 30, 30, 0.5);
      border-radius: 16px;
      padding: 30px;
      transition: transform 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-5px);
    }

    .feature-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: rgba(139, 92, 246, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .feature-icon i {
      font-size: 24px;
      color: #8B5CF6;
    }

    .feature-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .feature-desc {
      color: #bbb;
      font-size: 16px;
    }

    /* 关于区域 */
    #about {
      padding: 100px 0;
    }

    .about-content {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .about-text {
      flex: 1;
    }

    .about-text p {
      margin-bottom: 20px;
      color: #ddd;
      font-size: 16px;
    }

    .about-images {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .screenshot {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      transform: rotate(3deg);
      transition: transform 0.3s ease;
    }

    .screenshot:hover {
      transform: rotate(3deg) scale(1.05);
    }

    .screenshot img {
      width: 100%;
      display: block;
    }

    .screenshot:nth-child(2) {
      transform: rotate(-2deg);
      margin-top: 30px;
    }

    .screenshot:nth-child(2):hover {
      transform: rotate(-2deg) scale(1.05);
    }

    /* 下载区域 */
    #download {
      padding: 100px 0;
      background-color: rgba(30, 30, 30, 0.3);
      text-align: center;
    }

    .download-desc {
      max-width: 600px;
      margin: 0 auto 40px;
      color: #ddd;
      font-size: 16px;
    }

    .download-options {
      display: flex;
      flex-direction: column;
      gap: 20px;
      justify-content: center;
      align-items: center;
    }

    .download-option {
      display: flex;
      align-items: center;
      gap: 12px;
      background-color: #121212;
      padding: 16px 24px;
      border-radius: 12px;
      width: 100%;
      max-width: 300px;
      transition: transform 0.3s ease;
      cursor: pointer;
    }

    .download-option:hover {
      transform: translateY(-5px);
    }

    .download-icon {
      font-size: 32px;
    }

    .download-info {
      text-align: left;
    }

    .download-label {
      font-size: 12px;
      color: #888;
    }

    .download-name {
      font-weight: 600;
    }

    .version-info {
      margin-top: 40px;
      display: inline-block;
      padding: 12px 24px;
      background-color: #121212;
      border-radius: 8px;
      color: #888;
      font-size: 14px;
    }

    /* 页脚 */
    footer {
      padding: 60px 0 30px;
      background-color: #121212;
    }

    .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-logo-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(90deg, #8B5CF6, #EC4899);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer-logo-text {
      font-size: 20px;
      font-weight: bold;
    }

    .social-links {
      display: flex;
      gap: 20px;
    }

    .social-link {
      color: #888;
      font-size: 18px;
      transition: color 0.3s ease;
    }

    .social-link:hover {
      color: #8B5CF6;
    }

    .copyright {
      color: #666;
      font-size: 14px;
      margin-top: 20px;
    }

    /* 动画 */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* 响应式设计 */
    @media (min-width: 768px) {
      .nav-links {
        display: flex;
      }

      .menu-btn {
        display: none;
      }

      .features-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .about-content {
        flex-direction: row;
      }

      .download-options {
        flex-direction: row;
      }

      .download-option {
        width: auto;
      }
    }

    /* 图标字体简易实现 */
    .icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .icon-music {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E");
    }

    .icon-play {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    }

    .icon-pause {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
    }

    .icon-step-back {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.59 7.41L15.17 11H2v2h13.17l-3.59 3.59L13 18l6-6-6-6-1.41 1.41zM20 6v12h2V6h-2z'/%3E%3C/svg%3E");
    }

    .icon-step-forward {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5 13l4 4V9l-4 4zm11 0c0-1.66-1.34-3-3-3s-3 1.34-3 3 1.34 3 3 3 3-1.34 3-3zm6-12H2v18h20V1z'/%3E%3C/svg%3E");
    }

    .icon-android {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233ddc84'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
    }

    .icon-file {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B5CF6'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z'/%3E%3C/svg%3E");
    }

    .icon-facebook {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm3 8h-1.35c-.538 0-.65.221-.65.778V10h2l-.209 2H15v7h-3v-7H10v-2h2V7.692C12 5.923 12.931 5 15.029 5H18v3z'/%3E%3C/svg%3E");
    }

    .icon-twitter {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E");
    }

    .icon-instagram {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
    }

    .icon-github {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6.605 9.492c.962-.695 1.797-1.562 2.457-2.558-.94-1.063-2.278-1.755-3.767-1.94h-1.697c-.088-.778-.36-1.457-.81-2.006 1.441-.417 2.767-.63 3.957-.63 4.336 0 7.865 3.529 7.865 7.865a7.852 7.852 0 0 1-2.128 5.205c-.963-.695-2.168-1.44-3.583-2.235 1.406-3.896-.27-8.354-4.14-8.354-1.178 0-2.25.346-3.158.908-.907-.111-1.773-.334-2.558-.636-.945 1.063-1.637 2.398-1.827 3.843-.81-.46-1.48-.734-2.158-.81 1.442.416 2.767.63 3.957.63 4.335 0 7.865-3.529 7.865-7.865 0-.11-.007-.22-.015-.33l-1.623.945c.01.108.015.217.015.33 0 2.12-.87 3.988-2.333 5.388 1.097-.11 2.138-.382 3.085-.815-.806 1.22-1.87 2.22-3.123 2.948-.881-.954-2.05-1.57-3.307-1.797l-.284 1.065c-1.149.217-2.359.335-3.618.335-4.335 0-7.865-3.529-7.865-7.865 0-.662.085-1.312.248-1.941 1.489.2 2.81.893 3.809 1.941-.8.026-1.562.04-2.313.04-4.335 0-7.865 3.529-7.865 7.865s3.53 7.865 12 7.865c1.26 0 2.469-.118 3.64-.335l-.391-1.09c-1.196.335-2.466.53-3.766.53-4.335 0-7.865-3.529-7.865-7.865 0-1.063.19-2.067.53-3.016 1.408.418 2.768.63 3.958.63 1.25 0 2.459-.118 3.619-.336l.309 1.09c1.16-.336 2.268-.814 3.307-1.514z'/%3E%3C/svg%3E");
    }

    .icon-info {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B5CF6'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    }
  </style>
</head>

<body>
  <!-- 导航栏 -->
  <nav id="navbar">
    <div class="container nav-container">
      <div class="logo">
        <div class="logo-icon">
          <span class="icon icon-music"></span>
        </div>
        <div class="logo-text">atMP3</div>
      </div>
      
      <!-- 桌面导航 -->
      <div class="nav-links">
        <a href="#features">特点</a>
        <a href="#about">关于</a>
        <a href="#download">下载</a>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <div class="menu-btn">
        <span class="icon icon-step-forward"></span>
      </div>
    </div>
  </nav>

  <!-- 英雄区域 -->
  <header>
    <div class="container">
      <h1 class="hero-title">
        用<span class="text-gradient">艺术感</span>聆听音乐
      </h1>
      <p class="hero-desc">
        Melodify 音乐播放器将简约美学与卓越音质完美结合，为您带来沉浸式音乐体验
      </p>
      
      <!-- 手机展示 -->
      <div class="phone-display">
        <!-- 手机边框 -->
        <div class="phone-frame">
          <!-- 屏幕内容 -->
          <div class="phone-screen">
            <!-- 模拟APP界面 -->
            <div class="app-simulation">
              <!-- 专辑封面 -->
              <div class="album-cover">
                <!-- 黑胶唱片效果 -->
                <div class="record">
                  <div class="record-inner">
                    <img src="https://picsum.photos/seed/album/300/300" alt="专辑封面">
                  </div>
                  <div class="record-center"></div>
                </div>
              </div>
              
              <!-- 歌曲信息 -->
              <div class="song-info">
                <div class="song-title">月光下的旋律</div>
                <div class="song-artist">艺术家名称</div>
              </div>
              
              <!-- 进度条 -->
              <div class="progress-bar">
                <div class="progress-bg">
                  <div class="progress-fill"></div>
                </div>
                <div class="progress-time">
                  <span>1:23</span>
                  <span>3:45</span>
                </div>
              </div>
              
              <!-- 控制按钮 -->
              <div class="controls">
                <div class="control-btn">
                  <span class="icon icon-step-back"></span>
                </div>
                <div class="play-btn">
                  <span class="icon icon-pause"></span>
                </div>
                <div class="control-btn">
                  <span class="icon icon-step-forward"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 下载按钮 -->
      <a href="#download" class="download-btn">
        <span class="icon icon-play" style="display: inline-block; width: 1em; height: 1em; margin-right: 8px;"></span>
        立即下载
      </a>
    </div>
  </header>

  <!-- 特点区域 -->
  <section id="features">
    <div class="container">
      <h2 class="section-title">
        简约而不简单的<span class="text-gradient">音乐体验</span>
      </h2>
      
      <div class="features-grid">
        <!-- 特点1 -->
        <div class="feature-card">
          <div class="feature-icon">
            <span class="icon icon-music"></span>
          </div>
          <h3 class="feature-title">艺术感界面</h3>
          <p class="feature-desc">精心设计的视觉效果，黑胶唱片旋转动画，带来沉浸式音乐欣赏体验。</p>
        </div>
        
        <!-- 特点2 -->
        <div class="feature-card">
          <div class="feature-icon">
            <span class="icon icon-step-forward"></span>
          </div>
          <h3 class="feature-title">卓越音质</h3>
          <p class="feature-desc">支持多种音频格式，优化的音频引擎，还原音乐本真质感。</p>
        </div>
        
        <!-- 特点3 -->
        <div class="feature-card">
          <div class="feature-icon">
            <span class="icon icon-step-back"></span>
          </div>
          <h3 class="feature-title">简洁操作</h3>
          <p class="feature-desc">直观的控制界面，极简设计理念，让您专注于音乐本身。</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 关于区域 -->
  <section id="about">
    <div class="container">
      <div class="about-content">
        <div class="about-text">
          <h2 class="section-title" style="text-align: left; margin-bottom: 20px;">
            重新定义<span class="text-gradient">音乐播放</span>
          </h2>
          <p>
            Melodify 诞生于对简约美学的追求和对音乐体验的热爱。我们厌倦了复杂冗余的音乐播放器界面，它们分散了人们对音乐本身的注意力。
          </p>
          <p>
            这款播放器采用黑胶唱片的视觉隐喻，配合流畅的动画效果，让音乐播放过程本身也成为一种视觉享受。
          </p>
          <p>
            无论是在家中放松，还是在路上通勤，Melodify 都能为您提供纯粹而优雅的音乐体验。
          </p>
        </div>
        
        <div class="about-images">
          <!-- 截图1 -->
          <div class="screenshot">
            <img src="https://picsum.photos/seed/music1/300/600" alt="播放器截图">
          </div>
          <!-- 截图2 -->
          <div class="screenshot">
            <img src="https://picsum.photos/seed/music2/300/600" alt="播放器截图">
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 下载区域 -->
  <section id="download">
    <div class="container">
      <h2 class="section-title">
        开始您的<span class="text-gradient">艺术聆听</span>之旅
      </h2>
      <p class="download-desc">
        下载 Melodify 音乐播放器，体验简约美学与卓越音质的完美融合。支持 Android 6.0 及以上版本。
      </p>
      
      <div class="download-options">
        <div class="download-option">
          <div class="download-icon">
            <span class="icon icon-android"></span>
          </div>
          <div class="download-info">
            <div class="download-label">下载</div>
            <div class="download-name">Google Play</div>
          </div>
        </div>
        
        <div class="download-option">
          <div class="download-icon">
            <span class="icon icon-file"></span>
          </div>
          <div class="download-info">
            <div class="download-label">直接下载</div>
            <div class="download-name">APK 文件</div>
          </div>
        </div>
      </div>
      
      <div class="version-info">
        <span class="icon icon-info" style="display: inline-block; width: 1em; height: 1em; margin-right: 8px;"></span>
        当前版本: 1.0.0 | 大小: 8.5 MB | 要求: Android 6.0+
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer>
    <div class="container">
      <div class="footer-content">
        <div class="footer-logo">
          <div class="footer-logo-icon">
            <span class="icon icon-music" style="width: 0.8em; height: 0.8em;"></span>
          </div>
          <div class="footer-logo-text">Melodify</div>
        </div>
        
        <div class="social-links">
          <a href="#" class="social-link">
            <span class="icon icon-facebook"></span>
          </a>
          <a href="#" class="social-link">
            <span class="icon icon-twitter"></span>
          </a>
          <a href="#" class="social-link">
            <span class="icon icon-instagram"></span>
          </a>
          <a href="#" class="social-link">
            <span class="icon icon-github"></span>
          </a>
        </div>
        
        <div class="copyright">
          &copy; 2023 Melodify. 保留所有权利。
        </div>
      </div>
    </div>
  </footer>

  <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
      const nav = document.getElementById('navbar');
      if (window.scrollY > 50) {
        nav.style.padding = '8px 0';
        nav.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
      } else {
        nav.style.padding = '16px 0';
        nav.style.boxShadow = 'none';
      }
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
        }
      });
    });
  </script>
</body>
</html>
