quicklearn-agent/index.html at main · fly1d/quicklearn-agent · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#eef0eb" />
    <meta name="description" content="输入网址或名词，快速理解并继续追问。" />
    <title>秒懂 · 快速学习</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <script src="https://unpkg.com/lucide@0.468.0/dist/umd/lucide.min.js" defer></script>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <div class="page-context" aria-hidden="true">
      <span>QUICK</span><strong>LEARN</strong>
      <p>Keep the useful part.</p>
    </div>

    <main class="learning-widget" id="learningWidget" aria-label="秒懂快速学习">
      <header class="widget-header">
        <button class="brand-button" id="newButton" aria-label="开始新学习" title="新学习">
          <span class="brand-mark"><i data-lucide="sparkles"></i></span>
          <span class="brand-copy"><strong>秒懂</strong><small>快速学习</small></span>
        </button>
        <div class="header-status"><span></span>在线</div>
        <button class="icon-button" id="minimizeButton" aria-label="隐藏窗口" title="隐藏窗口"><i data-lucide="minus"></i></button>
      </header>

      <section class="widget-body" id="widgetBody">
        <section class="start-view" id="startView">
          <div class="start-symbol"><i data-lucide="scan-search"></i></div>
          <p class="eyebrow">QUICK LEARN</p>
          <h1>现在想了解什么？</h1>
          <p class="start-copy">给我一个网址或名词。</p>

          <form class="main-form" id="mainForm">
            <i data-lucide="link-2"></i>
            <input id="mainInput" aria-label="网址或名词" autocomplete="off" placeholder="例如：MCP、React、网页链接" />
            <button type="submit" aria-label="开始分析" title="开始分析"><i data-lucide="arrow-up"></i></button>
          </form>

          <div class="example-list">
            <button data-example="MCP"><i data-lucide="hash"></i>MCP</button>
            <button data-example="Prompt Engineering"><i data-lucide="hash"></i>Prompt Engineering</button>
            <button data-example="https://example.com"><i data-lucide="link"></i>网页</button>
          </div>
        </section>

        <section class="loading-view" id="loadingView" hidden>
          <div class="thinking-mark"><i data-lucide="sparkles"></i></div>
          <div class="thinking-lines"><span></span><span></span><span></span></div>
          <p>正在整理 <strong id="loadingTopic"></strong></p>
        </section>

        <section class="clarify-view" id="clarifyView" hidden>
          <div class="agent-row">
            <span class="agent-avatar"><i data-lucide="sparkles"></i></span>
            <span>先确认一下</span>
          </div>
          <h2 id="clarifyQuestion"></h2>
          <div class="clarify-options" id="clarifyOptions"></div>
          <form class="clarify-form" id="clarifyForm">
            <input id="clarifyInput" aria-label="补充描述" placeholder="补充领域或使用场景" />
            <button type="submit" aria-label="提交补充" title="提交"><i data-lucide="arrow-right"></i></button>
          </form>
        </section>

        <section class="conversation-view" id="conversationView" hidden>
          <div class="conversation" id="conversation"></div>
        </section>
      </section>

      <form class="follow-up-form" id="followUpForm" hidden>
        <input id="followUpInput" aria-label="继续提问" autocomplete="off" placeholder="继续问：怎么用？更多例子？" />
        <button type="submit" aria-label="发送问题" title="发送"><i data-lucide="arrow-up"></i></button>
      </form>
    </main>

    <button class="launcher" id="launcher" aria-label="显示秒懂" title="显示秒懂" hidden>
      <i data-lucide="sparkles"></i>
    </button>

    <div class="toast" id="toast" role="status" aria-live="polite"></div>
    <script src="/app.js" defer></script>
  </body>
</html>