simple-notes/index.html at main · thinkagain886/simple-notes · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易笔记</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 左侧编辑区 -->
        <div class="editor-section">
            <div class="editor-header">
                <input
                    type="text"
                    id="noteTitle"
                    class="note-title"
                    placeholder="笔记标题..."
                    autocomplete="off"
                >
                <div class="toolbar">
                    <button id="newBtn" class="btn btn-new" title="新建">➕ 新建</button>
                    <button id="saveBtn" class="btn btn-save" title="保存 (Ctrl+S)">💾 保存</button>
                    <button id="settingsBtn" class="btn btn-settings" title="设置">⚙️ 设置</button>
                </div>
            </div>
            <textarea
                id="noteContent"
                class="note-content"
                placeholder="开始写笔记..."
            ></textarea>
            <div class="status-bar">
                <span id="statusText" class="status-text">就绪</span>
                <span id="wordCount" class="word-count">0 字</span>
            </div>
        </div>

        <!-- 右侧列表 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>📝 笔记列表</h2>
                <div class="cloud-status" id="cloudStatus">
                    <span id="cloudStatusText">云同步未开启</span>
                </div>
                <input type="text" id="searchBox" class="search-box" placeholder="🔍 搜索...">
            </div>
            <div class="note-stats">共 <span id="noteCount">0</span> 条笔记</div>
            <ul id="noteList" class="note-list"></ul>
            <div class="sidebar-footer">
                <button id="exportBtn" class="btn-footer">📤 导出数据</button>
                <button id="importBtn" class="btn-footer">📥 导入数据</button>
                <input type="file" id="importFile" accept=".json" style="display:none">
                <button id="clearAllBtn" class="btn-footer btn-danger-footer">🗑️ 清空全部</button>
            </div>
        </div>
    </div>

    <!-- 设置弹窗 -->
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>⚙️ 设置</h2>
                <span id="closeSettings" class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="settings-section">
                    <h3>☁️ 云端同步配置</h3>
                    <div class="form-group">
                        <label>Supabase URL</label>
                        <input type="text" id="supabaseUrl" placeholder="https://xxxxx.supabase.co">
                        <small>从 Supabase 项目设置中获取</small>
                    </div>
                    <div class="form-group">
                        <label>Supabase Anon Key</label>
                        <input type="password" id="supabaseKey" placeholder="eyJhbGci...">
                        <small>从 Supabase 项目 API 设置中获取</small>
                    </div>
                    <div class="form-group">
                        <button id="testConnectionBtn" class="btn btn-primary">🔌 测试连接</button>
                        <span id="connectionStatus"></span>
                    </div>
                    <div class="form-group checkbox-group">
                        <label><input type="checkbox" id="enableCloudSync"> 启用云端同步</label>
                    </div>
                    <div id="syncOptions" style="display:none;">
                        <div class="form-group checkbox-group">
                            <label><input type="checkbox" id="enableAutoSync"> 启用自动同步</label>
                        </div>
                        <div id="autoSyncSettings" style="display:none;">
                            <div class="form-group">
                                <label>停顿同步时间（秒）</label>
                                <input type="number" id="autoSaveDelay" value="3" min="1" max="60">
                                <small>停止输入多久后自动同步到云端</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <h3>💾 数据管理</h3>
                    <div class="form-group">
                        <button id="clearConfigBtn" class="btn btn-danger">🗑️ 清除云端配置</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="saveSettingsBtn" class="btn btn-primary">保存设置</button>
                <button id="cancelSettingsBtn" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div id="confirmModal" class="modal">
        <div class="modal-content confirm-dialog">
            <div class="modal-body">
                <p id="confirmMessage">确定要删除这条笔记吗？</p>
            </div>
            <div class="modal-footer">
                <button id="confirmYes" class="btn btn-danger">删除 (Enter)</button>
                <button id="confirmNo" class="btn btn-secondary">取消 (Esc)</button>
            </div>
        </div>
    </div>

    <!-- 提示框 -->
    <div id="toast" class="toast"></div>

    <script src="js/storage.js"></script>
    <script src="js/supabase.js"></script>
    <script src="js/settings.js"></script>
    <script src="js/app.js"></script>
</body>
</html>