Archived
huluxia
d85e2ead34
- 新增完整的我的页面，包含用户资料展示、使用统计和个人信息编辑功能 - 添加收藏和卡册的快捷入口网格 - 简化导航栏，将原分散的个人中心、我的收藏、我的卡册入口合并为单个「我的」标签 - 编写新页面对应的CSS样式并更新静态资源版本号 - 在数学人生页面添加葫芦侠行的快捷跳转入口
192 lines
14 KiB
HTML
192 lines
14 KiB
HTML
<!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=20">
|
|
</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="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="mine" onclick="navigateTo('mine')"><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>
|
|
|
|
<!-- Mine (我的) -->
|
|
<div class="page" id="page-mine">
|
|
<div id="mineContent"><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=22"></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>
|