205 lines
13 KiB
HTML
205 lines
13 KiB
HTML
{% load static %}
|
||
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="葫芦数学：发现你的数学人格，经历属于你的数学人生。">
|
||
<title>葫芦数学 · 数学人生宇宙</title>
|
||
<link rel="stylesheet" href="{% static 'css/app.css' %}">
|
||
</head>
|
||
<body>
|
||
<div class="ambient ambient-one"></div>
|
||
<div class="ambient ambient-two"></div>
|
||
<div class="app-shell">
|
||
<aside class="sidebar">
|
||
<a class="brand" href="/" aria-label="葫芦数学首页">
|
||
<span class="brand-mark">H</span>
|
||
<span><strong>葫芦数学</strong><small>HULU MATH</small></span>
|
||
</a>
|
||
<nav class="nav" aria-label="主导航">
|
||
<button class="nav-item active" data-view="home"><span>01</span>首页</button>
|
||
<button class="nav-item" data-view="life"><span>02</span>数学人生</button>
|
||
<button class="nav-item" data-view="contest"><span>03</span>比赛</button>
|
||
<button class="nav-item" data-view="toolbox"><span>04</span>工具箱</button>
|
||
<button class="nav-item" data-view="discover"><span>05</span>探索发现</button>
|
||
<button class="nav-item" data-view="profile"><span>06</span>我的</button>
|
||
</nav>
|
||
<div class="sidebar-foot">
|
||
<div class="system-status"><i></i>系统在线</div>
|
||
<button id="auth-button" class="ghost-button">登录 / 注册</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<header class="topbar">
|
||
<p id="eyebrow">今日坐标 · 数学人生宇宙</p>
|
||
<div class="topbar-actions">
|
||
<a id="admin-entry" class="admin-entry" href="/admin/" hidden>
|
||
<span>运营后台</span><b>↗</b>
|
||
</a>
|
||
<div class="user-chip" id="user-chip"><span class="avatar">游</span><span>游客</span></div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="view active" id="view-home">
|
||
<div class="hero-grid">
|
||
<article class="hero">
|
||
<div>
|
||
<span class="kicker">YOUR MATHEMATICAL LIFE</span>
|
||
<h1>你会成为怎样的<br><em>数学人？</em></h1>
|
||
<p>从一次人格选择开始，走进真实骨架与虚构剧情交织的数学人生。你的判断、关系和机会，将共同写下答案。</p>
|
||
</div>
|
||
<div class="hero-actions">
|
||
<button class="primary-button" id="start-mathbti">开始 MathBTI <b>→</b></button>
|
||
<button class="text-button" data-jump="life">暂不测试，自由选择人生</button>
|
||
</div>
|
||
<div class="hero-index">∞</div>
|
||
</article>
|
||
<article class="daily-card">
|
||
<span class="card-label">TODAY'S MOVE</span>
|
||
<div class="pulse-orbit"><span>60</span><small>秒</small></div>
|
||
<h2>今日口算对决</h2>
|
||
<p>同一组题，不同的判断速度。正式成绩完全由服务端记录。</p>
|
||
<button class="dark-button" data-jump="contest">进入比赛</button>
|
||
</article>
|
||
</div>
|
||
|
||
<section class="section">
|
||
<div class="section-heading">
|
||
<div><span class="kicker">FOUR SPIRITS</span><h2>四种数学精神</h2></div>
|
||
<p>不锁定路线，只提供更适合你的第一站。</p>
|
||
</div>
|
||
<div class="spirit-grid">
|
||
<article class="spirit believer"><b>01</b><h3>信仰者</h3><p>当答案还不存在，你是否仍愿意相信推理？</p><span>严谨 · 纯粹 · 求真</span></article>
|
||
<article class="spirit communicator"><b>02</b><h3>传播者</h3><p>你会守住发现，还是让更多人理解它？</p><span>表达 · 教育 · 联结</span></article>
|
||
<article class="spirit practitioner"><b>03</b><h3>应用者</h3><p>数字进入现实之后，谁来承担模型的代价？</p><span>建模 · 决策 · 责任</span></article>
|
||
<article class="spirit intuitive"><b>04</b><h3>直觉者</h3><p>当形式尚未成形，你敢不敢追随结构感？</p><span>想象 · 洞察 · 创造</span></article>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<section class="view" id="view-life">
|
||
<div class="page-title"><span class="kicker">MATH LIFE HALL</span><h1>数学人生大厅</h1><p>长篇旗舰人生、人物 Skill 与特别篇，共用同一份成长档案。</p></div>
|
||
<div id="story-list" class="content-grid loading">正在读取已发布人生…</div>
|
||
</section>
|
||
|
||
<section class="view" id="view-contest">
|
||
<div class="page-title"><span class="kicker">CONTEST ARENA</span><h1>比赛</h1><p>实时 1v1、今日挑战和单人闯关，按水平赛道独立计算。</p></div>
|
||
<div class="track-switch" id="track-switch">
|
||
<button class="active" data-track="standard">标准</button><button data-track="beginner">入门</button><button data-track="advanced">进阶</button>
|
||
</div>
|
||
<div id="contest-list" class="content-grid loading">正在读取比赛…</div>
|
||
</section>
|
||
|
||
<section class="view" id="view-toolbox">
|
||
<div class="page-title"><span class="kicker">MATHEMATICAL WORKBENCH</span><h1>工具箱</h1><p>计算、查询、绘图与表达，把想法直接变成可以继续工作的对象。</p></div>
|
||
<div class="tool-grid" id="tool-grid">
|
||
<button class="tool-card" data-tool="mental"><span>⚡</span><b>口算竞技</b><small>限时挑战你的心算速度</small></button>
|
||
<button class="tool-card active" data-tool="calculator"><span>123</span><b>科学计算器</b><small>四则、幂运算与三角函数</small></button>
|
||
<button class="tool-card" data-tool="symbols"><span>Σ</span><b>数学符号查询</b><small>含义、读法与 LaTeX 写法</small></button>
|
||
<button class="tool-card" data-tool="graph"><span>⌁</span><b>函数图形绘制</b><small>输入 f(x)，实时观察曲线</small></button>
|
||
<button class="tool-card" data-tool="latex"><span>TeX</span><b>LaTeX Lab</b><small>编辑、预览、课程与公式库</small></button>
|
||
</div>
|
||
|
||
<div class="tool-workspace active" id="tool-calculator">
|
||
<div class="workspace-heading"><div><span class="kicker">CALCULATOR</span><h2>科学计算器</h2></div><p>支持 + − × ÷、括号、幂、sin、cos、tan、sqrt、log 与常数 π。</p></div>
|
||
<div class="calculator-shell">
|
||
<div class="calculator-display"><small id="calc-history">准备计算</small><output id="calc-output">0</output></div>
|
||
<input id="calc-input" class="formula-input" autocomplete="off" value="sqrt(144) + 2^5" aria-label="计算表达式">
|
||
<div class="calculator-actions"><button data-calc-example="sin(pi/6)">sin(π/6)</button><button data-calc-example="log(100)">log(100)</button><button data-calc-example="(18+7)*4">(18+7)×4</button><button id="calc-run" class="primary-button">计算</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tool-workspace" id="tool-symbols">
|
||
<div class="workspace-heading"><div><span class="kicker">SYMBOL ATLAS</span><h2>数学符号查询</h2></div><input id="symbol-search" class="search-input" placeholder="搜索：积分、集合、约等于…"></div>
|
||
<div id="symbol-list" class="symbol-grid"></div>
|
||
</div>
|
||
|
||
<div class="tool-workspace" id="tool-graph">
|
||
<div class="workspace-heading"><div><span class="kicker">FUNCTION PLOTTER</span><h2>函数图形绘制</h2></div><p>变量使用 x，支持与计算器相同的函数。</p></div>
|
||
<div class="graph-shell">
|
||
<div class="graph-controls"><label>f(x)<input id="graph-expression" class="formula-input" value="sin(x) + x/3"></label><label>显示范围<input id="graph-range" type="range" min="5" max="30" value="10"><span id="graph-range-label">−10 到 10</span></label><button id="graph-run" class="primary-button">绘制函数</button><p id="graph-error"></p></div>
|
||
<canvas id="graph-canvas" width="900" height="480" aria-label="函数曲线图"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tool-workspace" id="tool-latex">
|
||
<div class="workspace-heading"><div><span class="kicker">LATEX LAB</span><h2>数学表达实验室</h2></div><p>源码、实时预览与版本保存。</p></div>
|
||
<div class="editor-shell">
|
||
<div class="editor-pane"><label for="latex-source">LaTeX 源码</label><textarea id="latex-source" spellcheck="false">\\int_{0}^{1} x^2\\,dx = \\frac{1}{3}</textarea></div>
|
||
<div class="preview-pane"><span>实时预览</span><div id="latex-preview">\int_{0}^{1} x^2\,dx = \frac{1}{3}</div><button id="save-formula" class="primary-button">保存到我的公式</button></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="view" id="view-discover">
|
||
<div class="page-title discover-title"><span class="kicker">DISCOVER THROUGH VIDEO</span><h1>探索发现</h1><p>Hello there. 这里收集来自各专业志愿者的数学科普视频，也连接你的五维成长。</p></div>
|
||
<section class="ability-map">
|
||
<div class="map-heading"><div><h2>五维能力地图</h2><p>观看视频，点亮数学精灵的五种能力</p></div><div id="ability-legend" class="ability-legend"></div></div>
|
||
<div class="map-stage">
|
||
<svg class="map-lines" viewBox="0 0 1000 360" preserveAspectRatio="none" aria-hidden="true">
|
||
<path d="M500 178 L500 42 M500 178 L825 80 M500 178 L735 305 M500 178 L260 305 M500 178 L175 80"/>
|
||
<path d="M500 42 L825 80 L735 305 L260 305 L175 80 Z"/>
|
||
</svg>
|
||
<button class="ability-node node-vision" data-ability="vision"><span>◉</span><b>数学眼光</b><small>0</small></button>
|
||
<button class="ability-node node-humanities" data-ability="humanities"><span>▤</span><b>数学人文</b><small>0</small></button>
|
||
<button class="ability-node node-detection" data-ability="detection"><span>⌕</span><b>数学侦探</b><small>0</small></button>
|
||
<button class="ability-node node-modeling" data-ability="modeling"><span>⌁</span><b>数学建模</b><small>0</small></button>
|
||
<button class="ability-node node-connection" data-ability="connection"><span>⛓</span><b>数学联结</b><small>0</small></button>
|
||
<div class="pet-node"><b>葫</b><span>数学精灵</span></div>
|
||
</div>
|
||
<p class="map-hint">点击地图节点，进入对应维度的视频流</p>
|
||
</section>
|
||
<section class="video-browser">
|
||
<div class="filter-row ability-filters" id="ability-filters"></div>
|
||
<div class="filter-row discipline-filters" id="discipline-filters"></div>
|
||
<div class="video-section-heading"><div><span class="kicker">VIDEO STREAM</span><h2 id="video-stream-title">全部视频</h2></div><span id="video-result-count">0 条内容</span></div>
|
||
<div id="video-list" class="video-grid loading">正在读取视频流…</div>
|
||
</section>
|
||
</section>
|
||
|
||
<section class="view" id="view-profile">
|
||
<div class="page-title"><span class="kicker">MY ARCHIVE</span><h1>我的数学档案</h1><p>身份、五维能力、人生路径、比赛和表达记录都在这里。</p></div>
|
||
<div id="profile-panel" class="profile-panel"><p>登录后查看完整档案。</p><button class="primary-button" data-open-auth>登录 / 注册</button></div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<dialog id="auth-dialog">
|
||
<button class="dialog-close" aria-label="关闭">×</button>
|
||
<div class="dialog-tabs"><button class="active" data-auth-tab="login">登录</button><button data-auth-tab="register">邀请码注册</button></div>
|
||
<form id="login-form" class="auth-form">
|
||
<h2>继续你的数学人生</h2>
|
||
<label>用户名<input name="username" autocomplete="username" required></label>
|
||
<label>密码<input type="password" name="password" autocomplete="current-password" required></label>
|
||
<button class="primary-button" type="submit">登录</button>
|
||
</form>
|
||
<form id="register-form" class="auth-form hidden">
|
||
<h2>建立数学档案</h2>
|
||
<label>邀请码<input name="invite_code" required></label>
|
||
<label>用户名<input name="username" pattern="[A-Za-z0-9_]{3,30}" required></label>
|
||
<label>昵称<input name="nickname" maxlength="40" required></label>
|
||
<label>密码<input type="password" name="password" minlength="8" required></label>
|
||
<label>当前赛道<select name="track"><option value="beginner">入门</option><option value="standard" selected>标准</option><option value="advanced">进阶</option></select></label>
|
||
<button class="primary-button" type="submit">注册并进入</button>
|
||
</form>
|
||
<p id="auth-error" class="form-error"></p>
|
||
</dialog>
|
||
|
||
<dialog id="experience-dialog" class="experience-dialog">
|
||
<button class="dialog-close" aria-label="关闭">×</button>
|
||
<div id="experience-content"></div>
|
||
</dialog>
|
||
|
||
<dialog id="video-dialog" class="video-dialog">
|
||
<button class="dialog-close" aria-label="关闭">×</button>
|
||
<div id="video-dialog-content"></div>
|
||
</dialog>
|
||
|
||
<div class="toast" id="toast" role="status"></div>
|
||
<div class="csrf-token">{% csrf_token %}</div>
|
||
<script src="{% static 'js/app.js' %}" defer></script>
|
||
</body>
|
||
</html>
|