baskbuddy-zby/pages/youth-number-guide.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>青核 Youthome - 青号指南</title>
  <link rel="stylesheet" href="../colors_and_type.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  :root {
    /* Traework 设计令牌 - 圆角/间距/阴影/高度 */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --height-btn: 44px;
    --height-input: 44px;
    --height-nav: 64px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.06);
    --shadow-btn: 0 2px 8px rgba(38, 194, 187, 0.25);
    --shadow-btn-hover: 0 4px 16px rgba(38, 194, 187, 0.35);
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-float: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.03);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-blur: blur(20px);
    --glass-border: rgba(255, 255, 255, 0.3);

  }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', sans-serif;
      background: #0d1117;
      color: #fff;
      overflow: hidden;
            overflow-x: hidden;}

    .page-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      position: relative;
      background: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
      overflow: hidden;
    }

    /* 装饰星星背景 */
    .stars {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #fff;
      border-radius: 50%;
      opacity: 0.3;
      animation: twinkle 3s infinite;
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.8; }
    }

    /* 跳过按钮 */
    .skip-btn {
      position: absolute;
      top: 54px;
      right: 16px;
      padding: 6px 14px;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      font-size: 12px;
      color: rgba(255,255,255,0.8);
      border: none;
      cursor: pointer;
      z-index: 20;
    }

    /* 轮播内容 */
    .slides-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .slide {
      width: 375px;
      flex-shrink: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
    }

    .slide-icon {
      width: 120px;
      height: 120px;
      border-radius: 30px;
      background: linear-gradient(135deg, #26C2BB 0%, #54CAC5 50%, #7EDDD9 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
      box-shadow: 0 8px 32px rgba(38, 194, 187, 0.35);
      position: relative;
      animation: float 4s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .slide-icon::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 100%);
      border-radius: 30px 30px 0 0;
    }

    .slide-icon svg {
      color: #fff;
      position: relative;
      z-index: 1;
    }

    .slide-title {
      font-size: 22px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
      text-align: center;
    }

    .slide-desc {
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      line-height: 1.6;
      text-align: center;
    }

    .slide-desc .highlight {
      color: #26C2BB;
      font-weight: 600;
    }

    /* 指示器 */
    .indicators {
      position: absolute;
      bottom: 160px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.25);
      transition: all 0.3s ease;
    }

    .indicator.active {
      width: 24px;
      border-radius: 4px;
      background: #26C2BB;
    }

    /* 底部按钮 */
    .bottom-action {
      position: absolute;
      bottom: 60px;
      left: 16px;
      right: 16px;
      z-index: 10;
    }

    .start-btn {
      width: 100%;
      height: 48px;
      background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 50%, #1FA8A2 100%);
      color: #fff;
      border: none;
      border-radius: 24px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(38, 194, 187, 0.35);
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.4s ease;
    }

    .start-btn.show {
      opacity: 1;
      transform: translateY(0);
    }

    .next-btn {
      display: none;
      width: 100%;
      height: 48px;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
    }
  
    /* SVG 图标统一尺寸 */
    .icon-svg {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1em;
      height: 1em;
      vertical-align: middle;
      line-height: 1;
    }
    .icon-svg svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
    }
    /* 侧栏图标 */
    .sidebar-icon .icon-svg { width: 22px; height: 22px; font-size: 22px; }
    /* 社团logo图标 */
    .club-logo .icon-svg { width: 28px; height: 28px; font-size: 28px; color: #fff; }
    /* 头图大图标 */
    .hero-icon .icon-svg { width: 56px; height: 56px; font-size: 56px; opacity: 0.3; }
    /* meta 小图标 */
    .club-meta .icon-svg { width: 12px; height: 12px; font-size: 12px; }
    /* 分类选择网格图标 */
    .cat-option .icon-svg { width: 26px; height: 26px; font-size: 26px; }
    /* logo预览图标 */
    .logo-preview .icon-svg { width: 40px; height: 40px; font-size: 40px; color: #fff; }
    /* 提示图标 */
    .notice-icon .icon-svg { width: 18px; height: 18px; font-size: 18px; }

  </style>
</head>
<body>
  <div class="page-container" data-dom-id="page-container">
    <!-- 星星背景 -->
    <div class="stars" id="stars"></div>

    <button class="skip-btn" onclick="finish()">跳过</button>

    <!-- 轮播 -->
    <div class="slides-wrap" id="slidesWrap">
      <div class="slide">
        <div class="slide-icon">
          <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
            <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
            <path d="M2 2l7.586 7.586"></path>
            <circle cx="11" cy="11" r="2"></circle>
          </svg>
        </div>
        <div class="slide-title">开通青春号</div>
        <div class="slide-desc">
          成为校园创作者，让更多同学看到你的<span class="highlight">优质内容</span>，打造个人校园 IP
        </div>
      </div>

      <div class="slide">
        <div class="slide-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 32px rgba(118, 75, 162, 0.35);">
          <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
            <path d="M2 17l10 5 10-5"></path>
            <path d="M2 12l10 5 10-5"></path>
          </svg>
        </div>
        <div class="slide-title">专属创作权益</div>
        <div class="slide-desc">
          专属认证标识、更高<span class="highlight">曝光推荐</span>、内容收益分成、优先参与官方活动
        </div>
      </div>

      <div class="slide">
        <div class="slide-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 8px 32px rgba(245, 87, 108, 0.35);">
          <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
          </svg>
        </div>
        <div class="slide-title">立即开始创作</div>
        <div class="slide-desc">
          发布优质内容，积累粉丝，<span class="highlight">赢取丰厚奖励</span>，开启校园创作之旅
        </div>
      </div>
    </div>

    <!-- 指示器 -->
    <div class="indicators" id="indicators">
      <div class="indicator active"></div>
      <div class="indicator"></div>
      <div class="indicator"></div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-action">
      <button class="start-btn" id="startBtn" onclick="finish()">立即开通青春号</button>
    </div>
  </div>

  <script>
    // 生成星星
    (function() {
      const stars = document.getElementById('stars');
      for (let i = 0; i < 50; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        star.style.left = Math.random() * 100 + '%';
        star.style.top = Math.random() * 100 + '%';
        star.style.animationDelay = Math.random() * 3 + 's';
        star.style.opacity = (0.2 + Math.random() * 0.5).toFixed(2);
        star.style.width = (1 + Math.random() * 2).toFixed(1) + 'px';
        star.style.height = star.style.width;
        stars.appendChild(star);
      }
    })();

    let currentSlide = 0;
    const totalSlides = 3;
    const slidesWrap = document.getElementById('slidesWrap');
    const indicators = document.querySelectorAll('.indicator');
    const startBtn = document.getElementById('startBtn');

    function goToSlide(index) {
      currentSlide = Math.max(0, Math.min(totalSlides - 1, index));
      slidesWrap.style.transform = `translateX(-${currentSlide * 375}px)`;
      indicators.forEach((ind, i) => {
        ind.classList.toggle('active', i === currentSlide);
      });
      if (currentSlide === totalSlides - 1) {
        startBtn.classList.add('show');
      } else {
        startBtn.classList.remove('show');
      }
    }

    // 触摸滑动
    let startX = 0;
    let currentX = 0;
    let isDragging = false;

    document.querySelector('.slides-wrap').addEventListener('touchstart', function(e) {
      startX = e.touches[0].clientX;
      isDragging = true;
    });

    document.querySelector('.slides-wrap').addEventListener('touchend', function(e) {
      if (!isDragging) return;
      isDragging = false;
      const diff = e.changedTouches[0].clientX - startX;
      if (diff < -30 && currentSlide < totalSlides - 1) {
        goToSlide(currentSlide + 1);
      } else if (diff > 30 && currentSlide > 0) {
        goToSlide(currentSlide - 1);
      }
    });

    // 点击也可切换
    let clickCount = 0;
    document.querySelector('.slides-wrap').addEventListener('click', function() {
      clickCount++;
      setTimeout(() => {
        if (clickCount === 1 && currentSlide < totalSlides - 1) {
          goToSlide(currentSlide + 1);
        }
        clickCount = 0;
      }, 200);
    });

    function finish() {
      alert('跳转动态首页');
    }
  </script>
</body>
</html>