<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>葫芦数学 · Hulu Math</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='%23808C95'/><stop offset='100%' stop-color='%239AA5AE'/></linearGradient></defs><ellipse cx='32' cy='22' rx='14' ry='10' fill='url(%23g)'/><rect x='18' y='28' width='28' height='28' rx='14' fill='url(%23g)'/><text x='32' y='47' text-anchor='middle' font-size='20' font-weight='bold' fill='white' font-family='sans-serif'>葫</text></svg>">
  <link rel="stylesheet" href="/static/css/desktop.css?v=19">
</head>
<body>

<div class="app-wrapper">
  <div class="mobile-topbar"><button class="hamburger" onclick="toggleSidebar()">☰</button><div class="topbar-logo"><div class="topbar-logo-icon">葫</div><span class="topbar-logo-text">葫芦数学</span></div><div class="lang-switch mobile-lang"><button class="lang-btn active" data-lang="zh" onclick="switchLang('zh')">中</button><button class="lang-btn" data-lang="en" onclick="switchLang('en')">EN</button></div></div>
  <div class="app-layout">
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>

    <!-- Sidebar -->
    <aside class="sidebar" id="sidebar">
      <div class="sidebar-logo"><div class="sidebar-logo-icon">葫</div><span class="sidebar-logo-text">葫芦数学</span><div class="lang-switch"><button class="lang-btn active" data-lang="zh" onclick="switchLang('zh')">中</button><button class="lang-btn" data-lang="en" onclick="switchLang('en')">EN</button></div></div>
      <div class="sidebar-search" style="position:relative">
        <input type="text" id="globalSearch" placeholder="搜索内容..." oninput="handleGlobalSearch()" onfocus="handleGlobalSearch()">
        <div class="search-results" id="searchResults"></div>
      </div>
      <nav class="sidebar-nav">
        <button class="nav-item active" data-page="home" onclick="navigateTo('home')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M9 21v-6h6v6"/></svg></span> 首页</button>
        <button class="nav-item" data-page="discover" onclick="navigateTo('discover')"><span class="nav-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2 5-5 2 2-5z"/></svg></span> 发现</button>
        <button class="nav-item" data-page="toolbox" onclick="navigateTo('toolbox')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 6L3 18l3 3 5.7-5.7a4.5 4.5 0 0 0 6-6L14 13l-3-3z"/></svg></span> 工具箱</button>
        <button class="nav-item" data-page="knowledge" onclick="navigateTo('knowledge')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M2 5h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H2z"/><path d="M22 5h-7a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H22z"/></svg></span> 知识卡片</button>
        <button class="nav-item" data-page="story" onclick="navigateTo('story')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M4 4l11 11"/><path d="M4 4v4l3 3"/><path d="M20 4l-11 11"/><path d="M20 4v4l-3 3"/><path d="m5 15 4 4"/><path d="m19 15-4 4"/><path d="m3 21 3-3"/><path d="m21 21-3-3"/></svg></span> 葫芦侠行</button>
          <button class="nav-item" data-page="simulator" onclick="navigateTo('simulator')"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="10" rx="5"/><path d="M7 11v2"/><path d="M6 12h2"/><circle cx="16.5" cy="11" r=".6"/><circle cx="18.5" cy="13" r=".6"/></svg></span> 数学人生</button>
        <button class="nav-item" data-page="favorites" onclick="navigateTo('favorites')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M12 20.5C7 16.5 3 13.3 3 9.3 3 6.4 5.2 4.5 7.7 4.5c1.7 0 3.3.9 4.3 2.4 1-1.5 2.6-2.4 4.3-2.4 2.5 0 4.7 1.9 4.7 4.8 0 4-4 7.2-9 11.2z"/></svg></span> 我的收藏</button>
        <button class="nav-item" data-page="cards" onclick="navigateTo('cards')"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M8 10h8M8 14h5"/><circle cx="18" cy="9" r="2"/></svg></span> 我的卡册</button>
        <button class="nav-item" data-page="profile" onclick="navigateTo('profile')"><span class="nav-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5"/></svg></span> 个人中心</button>
      </nav>
      <div class="sidebar-footer"><div class="sidebar-avatar" id="sidebarAvatar" style="background:#5B6AF0">葫</div><div><div class="sidebar-user-name" id="sidebarName">游客用户</div><div class="sidebar-user-id">Hulu Math</div></div></div>
    </aside>

    <!-- Main -->
    <main class="main-content" id="mainContent"><div class="main-content-inner">

    <!-- Home (Desmos-style) -->
    <div class="page active" id="page-home">
      <!-- Hero with canvas animation -->
      <div class="ds-hero">
        <h1 class="ds-hero-title" data-i18n="staticHeroTitle">葫芦数学 · 用玩的方式打开数学</h1>
        <p class="ds-hero-sub" data-i18n="staticHeroSub">数学不是公式，是你理解世界的方式</p>
        <canvas id="heroCanvas" width="900" height="200" class="ds-hero-canvas"></canvas>
        <button class="ds-hero-cta" data-i18n="staticHeroCTA" onclick="navigateTo('discover')">开始探索 →</button>
      </div>
      <!-- Pet area -->
      <div id="homePetArea"></div>
      <div class="card-gallery-wrap" id="homeCardGallery" style="display:none">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
          <span style="font-size:13px;font-weight:600;color:#8A8580">🎴 数学人物小卡 · <span id="cardCountText">0/16</span></span>
        </div>
        <div class="card-gallery-scroll" id="cardGalleryScroll"></div>
      </div>
      <!-- Feature cards grid (Desmos tool-grid style) -->
      <h2 class="ds-section-title" data-i18n="staticExploreTitle">探索数学的万千可能</h2>
      <div class="ds-card-grid" id="homeFeatureCards"></div>
      <h2 class="ds-section-title" data-i18n="staticTryTitle">试试这些</h2>
      <div class="ds-card-grid ds-card-grid-3" id="homeExtraCards"></div>
      <!-- Daily math fact -->
      <div class="ds-footer-note" id="homeDailyFact"></div>
      <div style="text-align:center;margin-top:12px">
        <button class="draw-btn" id="homeGachaBtn" onclick="openGacha()" style="display:none">🏮 抽卡 · <span id="homeDrawCount">0</span>次机会</button>
      </div>
    </div>

    <!-- Discover (Numberphile-style, dual-column) -->
    <div class="page" id="page-discover">
      <div class="np-greeting" data-i18n="staticDiscoverGreet">Hello there. 这里收集了来自各专业志愿者的数学科普视频。</div>
      <div id="dimMap"></div>
      <div class="dim-tabs" id="dimTabs"></div>
      <div class="filter-bar" id="discoverFilters"></div>
      <div class="np-video-list" id="discoverVideos"><div class="spinner"></div></div>
    </div>

    <!-- Toolbox -->
    <div class="page" id="page-toolbox">
      <div class="page-header"><h1 class="page-title" data-i18n="staticToolboxTitle">🧰 工具箱</h1><p class="page-subtitle" data-i18n="staticToolboxSub">动手做数学——口算、计算、查询、绘图</p></div>
      <div class="tool-grid">
        <div class="tool-card" onclick="openTool('mathrace')"><div class="tool-card-icon">⚡</div><div class="tool-card-name" data-i18n="staticToolMathrace">口算竞赛</div><div class="tool-card-desc" data-i18n="staticToolMathraceDesc">限时60秒，挑战你的心算速度</div></div>
        <div class="tool-card" onclick="openTool('calculator')"><div class="tool-card-icon">🔢</div><div class="tool-card-name" data-i18n="staticToolCalc">计算器</div><div class="tool-card-desc" data-i18n="staticToolCalcDesc">支持加减乘除、幂运算、三角函数</div></div>
        <div class="tool-card" onclick="openTool('symbols')"><div class="tool-card-icon">Σ</div><div class="tool-card-name" data-i18n="staticToolSym">数学符号查询</div><div class="tool-card-desc" data-i18n="staticToolSymDesc">点击符号查看含义和LaTeX写法</div></div>
        <div class="tool-card" onclick="openTool('grapher')"><div class="tool-card-icon">📈</div><div class="tool-card-name" data-i18n="staticToolGraph">函数图形绘图</div><div class="tool-card-desc" data-i18n="staticToolGraphDesc">输入 f(x)，实时绘制函数曲线</div></div>
      </div>
    </div>

    <!-- Knowledge Cards -->
    <div class="page" id="page-knowledge">
      <div class="page-header"><h1 class="page-title" data-i18n="staticKnowledgeTitle">📚 知识卡片</h1><p class="page-subtitle" data-i18n="staticKnowledgeSub">轻量数学发现，每天一个新概念</p></div>
      <div class="filter-bar" id="knowledgeFilters"></div>
      <div class="knowledge-grid" id="knowledgeGrid"><div class="spinner"></div></div>
      <div class="draw-progress-bar" id="knowledgeDrawProgress" onclick="openGacha()" style="display:none">
        <span class="draw-progress-icon">🏮</span>
        <span id="drawProgressText">再读 3 张知识卡片即可抽卡</span>
        <div class="draw-progress-track"><div class="draw-progress-fill" id="drawProgressFill" style="width:0%"></div></div>
      </div>
    </div>

    <!-- Story -->
    <div class="page" id="page-story">
      <div class="page-header"><h1 class="page-title" data-i18n="staticStoryTitle">⚔️ 葫芦侠行</h1><p class="page-subtitle" data-i18n="staticStorySub">北宋数学武侠互动文字冒险 · 8章93节点 · 8+种结局</p></div>
      <div class="story-container" id="storyContainer"><div id="storyStats" class="story-stats"></div><div id="storyScene"><div class="spinner"></div></div><div id="storyChoices" class="story-choices"></div></div>
    </div>

    <!-- Simulator -->
    <div class="page" id="page-simulator">
      <div class="page-header"><h1 class="page-title" data-i18n="staticSimTitle">🧬 数学人生</h1><p class="page-subtitle" data-i18n="staticSimSub">四大主题 · 更多数学人生敬请期待</p></div>
      <div id="mathLifeHub"></div>
      <div class="sim-container" id="legacySimPlayer" style="display:none"><div id="simStats" class="sim-stats"></div><div id="simScene"></div><div id="simChoices" style="display:flex;flex-direction:column;gap:10px;margin-top:20px"></div></div>
      <div id="mathTeenPlayer" style="display:none"></div>
      <div id="mathAlumniPlayer" style="display:none"></div>
    </div>

    <!-- Favorites -->
    <div class="page" id="page-favorites">
      <div class="page-header"><h1 class="page-title">❤️ 我的收藏</h1><p class="page-subtitle">已收藏的视频和知识卡片</p></div>
      <div class="fav-grid" id="favGrid"><div class="spinner"></div></div>
    </div>

    <!-- Profile -->
    <div class="page" id="page-profile">
      <div class="page-header"><h1 class="page-title" data-i18n="staticProfileTitle">👤 个人中心</h1></div>
      <div id="profileContent"><div class="spinner"></div></div>
    </div>

    <!-- Card Collection -->
    <div class="page" id="page-cards">
      <div class="page-header"><h1 class="page-title">🎴 我的卡册</h1><p class="page-subtitle">收集全部16位数学人物 · <span id="cardsProgress">0/16</span></p></div>
      <div style="text-align:center;margin-bottom:20px">
        <button class="draw-btn" id="cardsDrawBtn" onclick="openGacha()">🏮 抽卡 · <span id="cardsDrawCount">0</span>次机会</button>
      </div>
      <div class="cards-collection-grid" id="cardsCollectionGrid"><div class="spinner"></div></div>
    </div>

    </div></main>
  </div>
</div>

<!-- Float hub: merged AI + MathBTI expandable button -->
<div class="float-hub" id="floatHub">
  <div class="float-hub-expand">
    <button class="float-hub-child ai" onclick="toggleAIPanel();closeHub()" data-i18n-type="title" data-i18n="staticAIToggleTitle" title="AI数学助教">💬<span class="float-hub-label" data-i18n="staticAIToggleTitle">AI数学助教</span></button>
    <a href="/mathbti" target="_blank" class="float-hub-child mbti" data-i18n-type="title" data-i18n="staticMbtiTooltip" title="测测你的数学人格">🧬<span class="float-hub-label" data-i18n="staticMbtiTooltip">测测你的数学人格</span></a>
    <button class="float-hub-child cards" onclick="openGacha();closeHub()" data-i18n-type="title" title="抽卡"><span style="font-size:18px">🏮</span><span class="float-hub-label">抽卡</span></button>
  </div>
  <button class="float-hub-btn" onclick="toggleHub()" title="更多">✦</button>
</div>

<!-- AI Panel -->
<div class="ai-panel" id="aiPanel">
  <div class="ai-panel-header"><span data-i18n="staticAIHeader">💬 AI 数学助教</span><button class="ai-panel-close" onclick="toggleAIPanel()">✕</button></div>
  <div class="ai-panel-messages" id="aiMessages"><div class="chat-msg assistant"><div class="chat-bubble" data-i18n="staticAIWelcome">你好！我是葫芦数学的AI助教 👋<br><br>试试问我：学数学对学医有什么用？</div></div></div>
  <div class="ai-panel-input-area"><input type="text" id="chatInput" placeholder="输入问题..." data-i18n="staticAIPlaceholder" onkeydown="if(event.key==='Enter')sendChat()"><button class="ai-send-btn" onclick="sendChat()">➤</button></div>
</div>

<!-- Modal -->
<div class="modal-overlay" id="toolModal" onclick="if(event.target===this)closeToolModal()">
  <div class="modal-content" style="position:relative">
    <button class="modal-close-btn" style="position:absolute" onclick="closeToolModal()">✕</button>
    <div id="toolModalContent" class="tool-modal-body"></div>
  </div>
</div>

  <script src="/static/js/desktop.js?v=21"></script>

<!-- 抽卡弹窗 -->
<div class="gacha-overlay" id="gachaOverlay" style="display:none" onclick="if(event.target===this)closeGacha()">
  <div class="gacha-modal" id="gachaModal">
    <button class="gacha-close" onclick="closeGacha()">✕</button>
    <div id="gachaIdle">
      <div class="gacha-gourd" id="gachaGourd" onclick="doDraw()" title="点击葫芦抽卡！">🏮</div>
      <div class="gacha-title">葫芦抽卡</div>
      <div class="gacha-sub">摇晃葫芦，抽取数学人物小卡</div>
      <div class="gacha-draws">剩余抽卡次数：<b id="gachaDrawCount">0</b></div>
      <div id="gachaPityHint" style="font-size:11px;color:#ABA6A1;margin-top:4px"></div>
    </div>
    <div id="gachaResult" style="display:none"></div>
  </div>
</div>

<!-- 卡片详情弹窗 -->
<div class="card-detail-overlay" id="cardDetailOverlay" style="display:none" onclick="if(event.target===this)closeCardDetail()">
  <div class="card-detail-modal" id="cardDetailModal"></div>
</div>

</body>
</html>
