cursor-/index.html at main · Ezhe-coder/cursor- · 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>备忘录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="app-header" role="banner">
        <h1 class="app-title">备忘录</h1>
        <div class="actions">
            <input id="searchInput" class="search-input" type="search" placeholder="搜索标题或内容..." aria-label="搜索备忘录">
            <button id="newNoteButton" class="btn primary" aria-label="新建备忘录">新建</button>
        </div>
    </header>

    <main class="app-main" role="main">
        <section class="note-editor" aria-labelledby="editorTitle">
            <h2 id="editorTitle" class="visually-hidden">编辑备忘录</h2>
            <form id="noteForm" autocomplete="off">
                <input type="hidden" id="noteId">
                <div class="form-row">
                    <label for="noteTitle">标题</label>
                    <input id="noteTitle" name="title" type="text" placeholder="输入标题" required maxlength="200">
                </div>
                <div class="form-row">
                    <label for="noteContent">内容</label>
                    <textarea id="noteContent" name="content" placeholder="输入内容..." rows="6" required></textarea>
                </div>
                <div class="form-row inline">
                    <label for="noteColor">颜色</label>
                    <select id="noteColor" name="color">
                        <option value="#fff9c4">淡黄</option>
                        <option value="#c8e6c9">淡绿</option>
                        <option value="#bbdefb">淡蓝</option>
                        <option value="#ffe0b2">淡橙</option>
                        <option value="#f8bbd0">淡粉</option>
                    </select>
                    <label for="notePinned" class="checkbox">
                        <input id="notePinned" type="checkbox"> 置顶
                    </label>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn primary" id="saveButton">保存</button>
                    <button type="reset" class="btn" id="resetButton">清空</button>
                </div>
            </form>
        </section>

        <section class="note-list" aria-labelledby="listTitle">
            <h2 id="listTitle" class="section-title">所有备忘录</h2>
            <div id="notesContainer" class="notes-grid" aria-live="polite"></div>
            <div id="emptyState" class="empty-state" hidden>暂无备忘录，点击“新建”开始。</div>
        </section>
    </main>

    <template id="noteCardTemplate">
        <article class="note-card" tabindex="0">
            <header class="note-card__header">
                <h3 class="note-card__title"></h3>
                <div class="note-card__controls">
                    <button class="icon-btn pin-btn" title="置顶/取消置顶" aria-label="切换置顶">📌</button>
                    <button class="icon-btn edit-btn" title="编辑" aria-label="编辑">✏️</button>
                    <button class="icon-btn delete-btn" title="删除" aria-label="删除">🗑️</button>
                </div>
            </header>
            <div class="note-card__content"></div>
            <footer class="note-card__footer">
                <time class="note-card__time" datetime=""></time>
            </footer>
        </article>
    </template>

    <script src="app.js" defer></script>
    <script>
        // 简单自检：页面加载后验证关键节点是否存在
        window.addEventListener('DOMContentLoaded', () => {
            const ids = ['searchInput','newNoteButton','noteForm','notesContainer'];
            const missing = ids.filter(id => !document.getElementById(id));
            console.log('[SelfCheck] required elements', missing.length ? { ok:false, missing } : { ok:true });
        });
    </script>
</body>
<noscript>此应用需要启用 JavaScript。</noscript>
</html>