feat: add frontend UI for SimpleNote Web

- Vanilla JS frontend with dark theme
- Dashboard with sidebar (libraries tree, tags), document grid, search
- Document viewer with markdown rendering and metadata panel
- Document editor with split write/preview and formatting toolbar
- Login screen with token authentication
- All styled according to UI/UX specs (dark theme, accent #00d4aa)
- API client for all endpoints
- Responsive design
This commit is contained in:
Hiro
2026-03-28 11:44:42 +00:00
parent c3e48596f3
commit c4921c8e73
12 changed files with 2280 additions and 0 deletions

29
public/js/views/login.js Normal file
View File

@@ -0,0 +1,29 @@
// Login View
export function renderLogin({ onLogin }) {
return `
<div class="login-screen">
<div class="login-card">
<h1>📝 SimpleNote</h1>
<p>Enter your API token to continue</p>
<form class="login-form" id="login-form">
<div class="form-group">
<input type="password" id="token-input" placeholder="API Token" autocomplete="off" required>
</div>
<p class="login-error" id="login-error">Invalid token. Please try again.</p>
<button type="submit" class="btn btn-primary" style="width:100%">Login</button>
</form>
</div>
</div>
<script>
document.getElementById('login-form').onsubmit = async (e) => {
e.preventDefault();
const token = document.getElementById('token-input').value;
const error = await onLogin(token);
if (error) {
document.getElementById('login-error').classList.add('visible');
}
};
</script>
`;
}