starNote/note.html at master · wywxt/starNote · 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>笔记 · 星笔记</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='g' cx='35%25' cy='30%25'><stop offset='0' stop-color='%23cfe0ff'/><stop offset='1' stop-color='%236a7bf0'/></radialGradient></defs><circle cx='16' cy='16' r='11' fill='url(%23g)'/><ellipse cx='16' cy='16' rx='15' ry='6' fill='none' stroke='%238a9ef5' stroke-width='1.2' transform='rotate(-24 16 16)'/></svg>">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="page-note">

<div class="bg" aria-hidden="true">
  <span class="bg__blob bg__blob--a"></span>
  <span class="bg__blob bg__blob--b"></span>
  <span class="bg__blob bg__blob--c"></span>
</div>

<header class="topbar">
  <div class="topbar__inner">
    <a class="brand" href="index.html" title="回到星图首页">
      <span class="brand__mark"></span>
      <span class="brand__text">星笔记<em>StarNotes</em></span>
    </a>
    <button class="icon-btn" id="btn-back" title="返回上一级">←</button>
    <nav class="crumbs" id="crumbs" aria-label="位置"></nav>
    <div class="topbar__spacer"></div>
    <a class="btn btn--ghost" href="calendar.html" data-cal-link title="日历与每日任务">日历</a>
    <button class="btn btn--ghost" id="btn-rename" title="修改名称或颜色">编辑星球</button>
  </div>
</header>

<div class="note-wrap" id="note-body">

  <!-- 大纲侧栏：可收起 -->
  <aside class="outline" id="outline" aria-label="大纲">
    <p class="outline__head">大纲</p>
    <nav class="outline__list" id="outline-list"></nav>
  </aside>

  <main class="note-main">

    <div class="note-head">
      <button class="btn btn--ghost btn--toggle" id="btn-outline" title="收起 / 展开大纲" aria-label="收起或展开大纲">大纲</button>
      <div class="note-head__text">
        <h1 class="note-title" id="note-title">笔记</h1>
        <p class="note-meta" id="note-meta"></p>
      </div>
    </div>

    <!-- 块类型：点一下就切换当前块 -->
    <div class="blkbar" id="blkbar" role="toolbar" aria-label="段落类型"></div>

    <!-- 块编辑器 -->
    <div class="blocks" id="blocks"></div>

  </main>
</div>

<script src="js/store.js"></script>
<script src="js/ui.js"></script>
<script src="js/blocks.js"></script>
<script src="js/page-note.js"></script>
</body>
</html>