LiteNotes/index.html at main · VladislavVovk/LiteNotes · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiteNotes - Minimalist Notes</title>
    <!-- Vite handles image paths relative to index.html, so /src/images/ is correct -->
    <link rel="icon" href="/src/images/blue_icon.png" type="image/png">

    <!-- Use local FontAwesome for Vite compatibility -->
    <link rel="stylesheet" href="/src/fontawesome/css/all.min.css">
    <!-- Use local fonts if needed, or keep Google Fonts CDN commented out -->
    <link rel="stylesheet" href="/src/styles.css">
    <meta name="description" content="LiteNotes is a minimalist, secure, and fast note-taking app with end-to-end encryption, offline support, and cloud sync. Take notes anywhere, anytime, privately.">
    <meta name="robots" content="index,follow">
    <link rel="canonical" href="https://litenotes.xyz/">
    <meta property="og:title" content="LiteNotes - Minimalist Notes App">
    <meta property="og:description" content="Minimalist, secure, and fast note-taking app with encryption, offline support, and cloud sync.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://litenotes.xyz/">
    <meta property="og:image" content="https://litenotes.xyz/images/blue_icon.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="LiteNotes - Minimalist Notes App">
    <meta name="twitter:description" content="Minimalist, secure, and fast note-taking app with encryption, offline support, and cloud sync.">
    <meta name="twitter:image" content="https://litenotes.xyz/images/blue_icon.png">
</head>
<body class="font-inter">
 <!-- Auth Modal -->
 <div id="auth-modal" class="modal-overlay">
    <div class="modal-content">
        <button id="modal-close-btn" class="modal-close-btn">&times;</button>
        <div class="auth-header">
            <h1 id="modal-title">Sign In</h1>
            <p class="auth-subtitle" id="modal-subtitle">Sync your notes across devices</p>
        </div>
        <div id="login-form">
            <div class="form-group">
                <label for="username" class="form-label">Username</label>
                <input type="text" id="username" class="form-input" placeholder="Enter your username" dir="auto">
            </div>
            <div class="form-group">
                <label for="password" class="form-label">Password</label>
                <input type="password" id="password" class="form-input" placeholder="Enter your password" dir="auto">
            </div>
            <button id="login-button" class="btn btn-primary">Sign In</button>
            <div class="auth-footer">
                Don't have an account? <span id="show-register" class="auth-link">Register</span>
                <br>
                <span id="show-forgot-password" class="auth-link" style="margin-top: 10px; display: inline-block;">Forgot Password?</span>
            </div>
        </div>
        <div id="register-form" style="display: none;">
            <div class="form-group">
                <label for="reg-username" class="form-label">Username</label>
                <input type="text" id="reg-username" class="form-input" placeholder="Choose a username" dir="auto">
            </div>
            <div class="form-group">
                <label for="reg-password" class="form-label">Password</label>
                <input type="password" id="reg-password" class="form-input" placeholder="Choose a password" dir="auto">
            </div>
            <div class="form-group">
                <label for="reg-email" class="form-label">Email (Optional - for password recovery)</label>
                <input type="email" id="reg-email" class="form-input" placeholder="Enter your email (optional)" dir="auto">
            </div>
            <button id="register-button" class="btn btn-primary">Create Account</button>
            <div class="auth-footer">
                Already have an account? <span id="show-login" class="auth-link">Sign In</span>
            </div>
        </div>
        <div id="forgot-password-form" style="display: none;">
            <div class="form-group">
                <label for="forgot-email" class="form-label">Email</label>
                <input type="email" id="forgot-email" class="form-input" placeholder="Enter your account email" dir="auto">
            </div>
            <button id="forgot-password-button" class="btn btn-primary">Send Reset Link</button>
            <div class="auth-footer">
                Remember your password? <span id="show-login-from-forgot" class="auth-link">Sign In</span>
            </div>
        </div>
    </div>
</div>

<!-- Merge Notes Modal -->
<div id="merge-notes-modal" class="modal-overlay">
    <div class="modal-content">
        <div class="auth-header">
            <h1>Merge Notes</h1>
            <p class="auth-subtitle">You have unsaved local notes</p>
        </div>
        <div class="merge-content">
            <p>Would you like to upload your local notes to your account?</p>
        </div>
        <div class="merge-actions">
            <button id="merge-cancel-btn" class="btn btn-secondary">No, Discard</button>
            <button id="merge-confirm-btn" class="btn btn-primary">Yes, Upload</button>
        </div>
    </div>
</div>

<!-- Main App -->
<main id="app-container" class="container sidebar-hidden" style="display: none;">
    <div class="sidebar">
        <div class="sidebar-header">
            <div id="user-info-section" class="user-section" style="display: none;">
                <div class="user-avatar" id="user-initial"></div>
                <div class="username" id="display-username">Username</div>
                <div class="logout-btn" id="logout-btn" title="Logout">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
            </div>
            <div id="signin-prompt" style="display: none;">
                <button id="show-login-btn" class="btn btn-primary">Sign in to Sync</button>
            </div>
            <div class="create-note" id="create-note-btn">
                <i class="fas fa-plus"></i> New Note
            </div>
        </div>
        <div class="notes-list" id="notes-list">
            <!-- Notes will be listed here -->
        </div>
        <!-- Theme Palette -->
        <div class="theme-palette" id="theme-palette">
            <div class="palette-columns">
                <div class="palette-column">
                <div class="palette-section-title">Color Theme</div>
                <!-- Light themes first -->
                <div class="theme-option" data-theme="light">
                    <div class="theme-color light"></div>
                    <div class="theme-name">Light</div>
                </div>
                <div class="theme-option" data-theme="sepia">
                    <div class="theme-color sepia"></div>
                    <div class="theme-name">Sepia</div>
                </div>
                <div class="theme-option" data-theme="mint">
                    <div class="theme-color mint"></div>
                    <div class="theme-name">Mint</div>
                </div>
                <div class="theme-option" data-theme="blue">
                    <div class="theme-color blue"></div>
                    <div class="theme-name">Blue</div>
                </div>
                <div class="theme-option" data-theme="lavender">
                    <div class="theme-color lavender"></div>
                    <div class="theme-name">Lavender</div>
                </div>
                <div class="theme-option" data-theme="rose-gold">
                    <div class="theme-color rose-gold"></div>
                    <div class="theme-name">Rose Gold</div>
                </div>
                <!-- Dark themes second -->
                <div class="theme-option" data-theme="slate">
                    <div class="theme-color slate"></div>
                    <div class="theme-name">Slate</div>
                </div>
                <div class="theme-option" data-theme="midnight">
                    <div class="theme-color midnight"></div>
                    <div class="theme-name">Midnight</div>
                </div>

                <div class="theme-option" data-theme="forest">
                    <div class="theme-color forest"></div>
                    <div class="theme-name">Forest</div>
                </div>
                <div class="theme-option" data-theme="monochrome">
                    <div class="theme-color monochrome"></div>
                    <div class="theme-name">Monochrome</div>
                </div>
            </div>

                <div class="palette-column">
                <div class="palette-section-title">Typography</div>
                <div class="font-option" data-font="inter">
                    <div class="theme-name">Inter Sans</div>
                </div>
                <div class="font-option" data-font="mono">
                    <div class="theme-name">SF Mono</div>
                </div>
                <div class="font-option" data-font="serif">
                    <div class="theme-name">Merriweather</div>
                </div>
                <div class="font-option" data-font="space">
                    <div class="theme-name">Space Mono</div>
                </div>
            </div>

                <div class="palette-column">
                    <div class="palette-section-title">Background</div>
                    <div class="background-option" data-background="none">
                        <div class="background-preview none"></div>
                        <div class="background-name">None</div>
                    </div>
                    <div class="background-option" data-background="dots">
                        <div class="background-preview dots"></div>
                        <div class="background-name">Dots</div>
                    </div>
                    <div class="background-option" data-background="grid">
                        <div class="background-preview grid"></div>
                        <div class="background-name">Grid</div>
                    </div>
                    <div class="background-option" data-background="Diamonds">
                        <div class="background-preview Diamonds"></div>
                        <div class="background-name">Diamonds</div>
                    </div>
                    <div class="background-option" data-background="scatter">
                        <div class="background-preview scatter"></div>
                        <div class="background-name">Scatter</div>
                    </div>
                    <div class="background-option" data-background="paper">
                        <div class="background-preview paper"></div>
                        <div class="background-name">Paper</div>
                    </div>
                    <div class="background-option" data-background="soft-lines">
                        <div class="background-preview soft-lines"></div>
                        <div class="background-name">Soft Lines</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Info Popup -->
        <div class="info-popup" id="info-popup">
            <a href="/home" target="_blank" class="info-link">Home</a>
            <a href="https://github.com/cybertron957/litenotes" target="_blank" class="info-link">Github</a>
        </div>
    </div>
    <div class="sidebar-toggle" id="sidebar-toggle">
        <i class="fas fa-bars"></i>
    </div>
    <div class="main-content">
        <div id="note-view">
            <div class="empty-state">
                <i class="fas fa-file-alt"></i>
                <h2>No note selected</h2>
                <p>Select a note from the sidebar or create a new one to get started.</p>
            </div>
        </div>
    </div>

    <!-- Buttons outside sidebar/main content -->
    <div class="theme-toggle" id="theme-toggle">
        <i class="fas fa-palette"></i>
    </div>
    <!-- Info Button -->
    <div class="info-toggle" id="info-toggle">
         <i class="fas fa-info-circle"></i>
     </div>
</main>

<!-- Delete Confirmation Popup -->
<div id="delete-confirm-popup" class="popup-overlay">
    <div class="popup-content">
        <p>Delete this note?</p>
        <div class="popup-actions">
            <button id="delete-cancel-btn" class="popup-btn popup-btn-secondary">No</button>
            <button id="delete-confirm-btn" class="popup-btn popup-btn-primary">Yes</button>
        </div>
    </div>
</div>


    <div id="toast" class="toast"></div>

    <!-- Socket.IO client - Keep this, served by server -->
    <!-- <script src="/socket.io/socket.io.js" defer></script> -->
    <!-- Main script inside src - Use type="module" for Vite -->
    <script type="module" src="/src/scripts.js" defer></script>
     <!-- Analytics script (Keep as is) -->
     <script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>

</body>
</html>