<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葫芦数学 · Hulu Math</title>
<link rel="stylesheet" href="/static/css/style.min.css?v=10.0">
</head>
<body>

<!-- =========================================================
  葫芦数学 · MVP v6.0 — 底部TabBar布局
  仿微信小程序风格：底部导航 + 顶部内容区
  ========================================================= -->

<div class="app-container">

  <!-- ====== 顶部状态栏 ====== -->
  <header class="top-bar" id="topBar">
    <div class="top-bar-brand">
      <span class="brand-icon-sm">葫</span>
      <span class="brand-text-sm">葫芦数学</span>
    </div>
    <div class="top-bar-actions">
      <button class="icon-btn" onclick="openChat()" title="AI问答">?</button>
    </div>
  </header>

  <!-- ====== 内容区 ====== -->
  <main class="content-area">

    <!-- 搜索栏 -->
    <div class="search-header" id="searchHeader">
      <div class="search-bar-wrap">
        <span class="search-icon">🔍</span>
        <input type="text" id="videoSearch" placeholder="搜索你想看的数学内容..." oninput="handleSearch()">
      </div>
    </div>

    <!-- 子导航 (热门/推荐/专业分区) -->
    <div class="sub-nav" id="subNav">
      <button class="sub-nav-btn active" data-tab="recommend" onclick="switchSubTab('recommend')">推荐</button>
      <button class="sub-nav-btn" data-tab="hot" onclick="switchSubTab('hot')">热门</button>
      <button class="sub-nav-btn" data-tab="discipline" onclick="switchSubTab('discipline')">专业分区</button>
    </div>

    <!-- 知识 / 我的 标题 -->
    <div class="section-title-bar" id="sectionTitleBar" style="display:none;">
      <h1 class="section-title" id="contentTitle">知识 · 数学发现</h1>
    </div>

    <!-- 剧本广场（数学人生入口） -->
    <div class="script-square" id="scriptSquare" style="display:none;">
      <!-- 快捷继续 -->
      <div class="ss-continue" id="ssContinue" style="display:none;">
        <div class="ss-continue-card" id="ssContinueCard" onclick="">
          <div class="ss-continue-badge">▶ 继续冒险</div>
          <div class="ss-continue-info">
            <div class="ss-continue-title" id="ssContinueTitle"></div>
            <div class="ss-continue-sub" id="ssContinueSub"></div>
          </div>
          <div class="ss-continue-arrow">→</div>
        </div>
      </div>

      <!-- 精选剧本大卡 -->
      <div class="ss-section-title">精选剧本</div>
      <div class="ss-hero-cards" id="ssHeroCards">
        <!-- JS 动态渲染 -->
      </div>

      <!-- 即将上线小卡 -->
      <div class="ss-section-title">即将上线</div>
      <div class="ss-coming-cards" id="ssComingCards">
        <!-- JS 动态渲染 -->
      </div>
    </div>

    <!-- 剧本内子导航（退出剧本用） -->
    <div class="life-sub-nav" id="lifeSubNav" style="display:none;">
      <button class="life-sub-btn" onclick="backToSquare()">← 剧本广场</button>
      <button class="life-sub-btn active" data-life="story" onclick="switchLifeTab('story')">📖 葫芦侠行</button>
      <button class="life-sub-btn" data-life="simulator" onclick="switchLifeTab('simulator')">🎓 专业模拟器</button>
    </div>

    <!-- 模块简介 -->
    <div class="module-banner" id="moduleBanner">
      <span class="banner-icon">◎</span>
      <div class="banner-text">
        <div class="banner-title">发现值得一看的数学内容</div>
        <div class="banner-sub">从大学专业到现实问题，快速进入你感兴趣的主题</div>
      </div>
    </div>

    <!-- 学科分类筛选 (仅在点击具体分区后显示) -->
    <div class="category-filter" id="categoryFilter" style="display: none;">
      <button class="cat-btn active" data-cat="all" onclick="filterCategory('all')">全部</button>
    </div>

    <!-- 专业分区网格 (类似B站分区页) -->
    <div class="discipline-grid-container" id="disciplineGridContainer" style="display: none;">
      <div class="grid-section-title">全部分区</div>
      <div class="discipline-grid" id="disciplineGrid">
        <!-- JS 动态渲染图标 -->
      </div>
    </div>

    <!-- 选中分区后的顶部导航 -->
    <div class="discipline-active-header" id="disciplineActiveHeader" style="display: none;">
      <button class="back-to-grid" onclick="backToDisciplineGrid()">
        <span class="back-icon">←</span>
        <span id="activeDisciplineName">专业名</span>
      </button>
    </div>

    <!-- 加载状态 -->
    <div class="loading" id="loadingArea">
      <div class="spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 视频列表（数人/数思用） -->
    <div class="video-list" id="videoList"></div>

    <!-- ====== 数说专属：发现Feed ====== -->
    <!-- Hero大卡 -->
    <div class="shushuo-hero" id="shushuoHero" style="display:none;">
      <div class="hero-card">
        <div class="hero-badge">✦ 今日数学发现</div>
        <div class="hero-title" id="heroTitle">数学不是公式，是你理解世界的方式</div>
        <div class="hero-desc" id="heroDesc">每天一个数学概念，让思维变得更清晰</div>
        <div class="hero-stats">
          <span>📖 3个概念</span><span>⏱ 阅读约15分钟</span>
        </div>
      </div>
    </div>
    <!-- 横向滚动话题 -->
    <div class="shushuo-topics" id="shushuoTopics" style="display:none;">
      <div class="topics-scroll" id="topicsScroll">
        <!-- JS 动态渲染 -->
      </div>
    </div>
    <!-- 信息流卡片 -->
    <div class="shushuo-feed" id="shushuoFeed" style="display:none;">
      <!-- JS 动态渲染 -->
    </div>

    <!-- 数学人生故事容器 -->
    <div id="storyContainer" style="display:none;"></div>

    <!-- 模拟器容器 -->
    <div id="simulatorContainer" style="display:none;"></div>

    <!-- 我的页面 -->
    <div class="profile-page" id="profilePage" style="display:none;">
      <div class="profile-card" onclick="openAvatarPicker()">
        <div class="profile-main">
          <div class="profile-avatar" id="profileAvatar">葫</div>
          <div class="profile-meta">
            <div class="profile-name" id="profileName">游客用户</div>
            <div class="profile-id" id="profileId">ID: ---</div>
            <div class="profile-tags">
              <span>数学爱好者</span>
              <span>开放体验版</span>
            </div>
          </div>
        </div>
        <div class="profile-edit">编辑资料</div>
      </div>

      <div class="profile-stats">
        <div class="profile-stat" onclick="showHistory()">
          <div class="profile-stat-num">0</div>
          <div class="profile-stat-label">已看内容</div>
        </div>
        <div class="profile-stat" onclick="showFavorites()">
          <div class="profile-stat-num">0</div>
          <div class="profile-stat-label">收藏专题</div>
        </div>
        <div class="profile-stat">
          <div class="profile-stat-num">2</div>
          <div class="profile-stat-label">剧情存档</div>
        </div>
      </div>

      <div class="profile-section">
        <div class="profile-section-title">个人信息</div>
        <div class="profile-menu-card">
          <div class="profile-menu-item" onclick="editNickname()">
            <div class="profile-menu-left"><span class="menu-icon">◉</span><span>昵称与头像</span></div>
            <span class="menu-arrow">›</span>
          </div>
          <div class="profile-menu-item">
            <div class="profile-menu-left"><span class="menu-icon">◎</span><span>兴趣方向</span></div>
            <span class="menu-arrow">›</span>
          </div>
          <div class="profile-menu-item">
            <div class="profile-menu-left"><span class="menu-icon">◌</span><span>学习偏好</span></div>
            <span class="menu-arrow">›</span>
          </div>
        </div>
      </div>

      <div class="profile-section">
        <div class="profile-section-title">我的内容</div>
        <div class="profile-menu-card">
          <div class="profile-menu-item" onclick="showFavorites()">
            <div class="profile-menu-left"><span class="menu-icon">◇</span><span>我的收藏</span></div>
            <span class="menu-arrow">›</span>
          </div>
          <div class="profile-menu-item" onclick="showHistory()">
            <div class="profile-menu-left"><span class="menu-icon">▣</span><span>观看记录</span></div>
            <span class="menu-arrow">›</span>
          </div>
          <div class="profile-menu-item">
            <div class="profile-menu-left"><span class="menu-icon">◆</span><span>数学人生存档</span></div>
            <span class="menu-arrow">›</span>
          </div>
        </div>
      </div>

      <div class="profile-section">
        <div class="profile-section-title">更多</div>
        <div class="profile-menu-card">
          <div class="profile-menu-item">
            <div class="profile-menu-left"><span class="menu-icon">✦</span><span>设置与帮助</span></div>
            <span class="menu-arrow">›</span>
          </div>
          <div class="profile-menu-item">
            <div class="profile-menu-left"><span class="menu-icon">⊕</span><span>意见反馈</span></div>
            <span class="menu-arrow">›</span>
          </div>
        </div>
      </div>
    </div>

  </main>

  <!-- ====== 底部导航栏 TabBar ====== -->
  <nav class="bottom-tab-bar">
    <button class="tab-btn active" data-module="发现" onclick="switchModule('发现')">
      <span class="tab-icon tab-icon-discover"></span>
      <span class="tab-label">发现</span>
    </button>
    <button class="tab-btn" data-module="知识" onclick="switchModule('知识')">
      <span class="tab-icon tab-icon-knowledge"></span>
      <span class="tab-label">知识</span>
    </button>
    <button class="tab-btn" data-module="数学人生" onclick="switchModule('数学人生')">
      <span class="tab-icon tab-icon-life"></span>
      <span class="tab-label">数学人生</span>
    </button>
    <button class="tab-btn" data-module="我的" onclick="switchModule('我的')">
      <span class="tab-icon tab-icon-mine"></span>
      <span class="tab-label">我的</span>
    </button>
  </nav>
</div>

<!-- ====== AI 聊天弹出层 ====== -->
<div class="chat-overlay" id="chatOverlay">
  <div class="chat-panel">
    <div class="chat-header">
      <div class="chat-header-left">
        <div class="ai-avatar">?</div>
        <span>AI 数学助教</span>
      </div>
      <button class="chat-close" onclick="closeChat()">✕</button>
    </div>
    <div class="chat-messages" id="chatMessages">
      <div class="chat-msg assistant">
        <div class="msg-bubble">
          你好！我是数学桥梁计划的 AI 助教<br><br>
          <b>试试问我：</b><br>
          · 学数学对学医有什么用？<br>
          · 数学在建筑里怎么用？<br>
          · 为什么学数学很重要？
        </div>
      </div>
    </div>
    <div class="quick-asks">
      <button class="quick-ask" onclick="quickAsk('学数学对学医有什么用？')">数学与医学</button>
      <button class="quick-ask" onclick="quickAsk('数学在建筑里怎么用？')">数学与建筑</button>
      <button class="quick-ask" onclick="quickAsk('AI和数学有什么关系？')">数学与AI</button>
      <button class="quick-ask" onclick="quickAsk('为什么学数学很重要？')">为什么要学</button>
    </div>
    <div class="chat-input-area">
      <input type="text" id="chatInput" placeholder="输入你的问题..." onkeydown="if(event.key==='Enter')sendMessage()">
      <button class="send-btn" onclick="sendMessage()">➤</button>
    </div>
  </div>
</div>

<!-- ====== 视频弹窗 ====== -->
<div class="video-modal" id="videoModal">
  <div class="video-modal-content">
    <div class="video-modal-header">
      <h3 id="videoModalTitle">视频标题</h3>
      <button onclick="closeVideo()">✕</button>
    </div>
    <div class="video-player-area">
      <div class="video-placeholder">
        <div class="play-icon">▶</div>
        <p id="videoPlaceholderText">点击下方按钮在浏览器中查看完整课程</p>
      </div>
    </div>
    <div class="video-info">
      <p class="video-desc" id="videoModalDesc"></p>
      <div class="video-meta">
        <span id="videoModalAuthor">--</span>
        <span id="videoModalCat">--</span>
      </div>
    </div>
    <div class="video-actions">
      <button class="btn-secondary" onclick="toggleVideoFav()" id="videoModalFav">☆ 收藏</button>
      <button class="btn-secondary" onclick="closeVideo();openChat();quickAsk(document.getElementById('videoModalTitle').textContent+' 这个视频讲了什么？')">? 问AI</button>
      <button class="btn-primary" id="videoLinkBtn" onclick="openVideoLink()">查看原视频</button>
    </div>
  </div>
</div>

<!-- ====== 个人中心列表面板 ====== -->
<div class="profile-list-panel" id="profileListPanel" style="display:none;">
  <div class="plp-header">
    <button class="plp-back" onclick="hideProfileListPanel()">← 返回</button>
    <span class="plp-title" id="profileListTitle">列表</span>
  </div>
  <div class="plp-content" id="profileListContent"></div>
</div>

<!-- ====== 头像选择器 ====== -->
<div class="avatar-picker-overlay" id="avatarPickerOverlay" onclick="closeAvatarPicker(event)">
  <div class="avatar-picker-card" onclick="event.stopPropagation()">
    <div class="picker-title">选择头像</div>
    <div class="picker-emoji-grid" id="pickerEmojiGrid"></div>
    <div class="picker-color-row" id="pickerColorRow"></div>
    <div class="picker-actions">
      <button class="picker-btn" onclick="editNickname()">✏️ 改昵称</button>
      <button class="picker-btn primary" onclick="closeAvatarPicker()">完成</button>
    </div>
  </div>
</div>

<!-- ====== 模拟器结局面板 ====== -->
<div class="ending-overlay" id="endingOverlay" onclick="closeEnding()">
  <div class="ending-card" onclick="event.stopPropagation()">
    <div class="ending-badge" id="endingBadge">🎓</div>
    <h3 class="ending-type" id="endingType">结局</h3>
    <p class="ending-title" id="endingTitle"></p>
    <div class="ending-stats" id="endingStats"></div>
    <p class="ending-scene" id="endingScene"></p>
    <button class="picker-btn primary" onclick="closeEnding();resetSimulator()">重新开始</button>
    <button class="picker-btn" onclick="closeEnding()">关闭</button>
  </div>
</div>

<!-- ====== 存档面板 ====== -->
<div class="save-panel-overlay" id="savePanelOverlay" onclick="closeSavePanel()">
  <div class="save-panel" onclick="event.stopPropagation()">
    <div class="save-panel-header">
      <button class="sp-back" onclick="closeSavePanel()">← 返回</button>
      <span class="sp-title">存档管理</span>
    </div>
    <div class="save-slots" id="saveSlots">
      <!-- JS 动态渲染 -->
    </div>
  </div>
</div>

<!-- ====== 结局画廊 ====== -->
<div class="gallery-overlay" id="galleryOverlay" onclick="closeGallery()">
  <div class="gallery-panel" onclick="event.stopPropagation()">
    <div class="gallery-header">
      <button class="sp-back" onclick="closeGallery()">← 返回</button>
      <span class="sp-title">结局画廊</span>
      <span class="gallery-progress" id="galleryProgress"></span>
    </div>
    <div class="gallery-grid" id="galleryGrid">
      <!-- JS 动态渲染 -->
    </div>
  </div>
</div>

<script src="/static/js/app.min.js?v=10.1"></script>
</body>
</html>
