mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-11 17:29:37 +02:00
[dyad] wrote 3 file(s)
This commit is contained in:
Michael committed
1 parent
85f191f234
commit
3c0bd5adf2
3 files changed
+392
No files matched your search
@@ -0,0 +1,170 @@
|
|||||||
|
/* Base styles */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #3B82F6;
|
||||||
|
--background-color: #FAFAFA;
|
||||||
|
--card-background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #111827;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utility classes */
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
.transition {
|
||||||
|
transition: all 200ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form elements */
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"],
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border: 1px solid #E5E7EB;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="password"]:focus,
|
||||||
|
textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
ring: 2px var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #2563EB;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Note item in sidebar */
|
||||||
|
.note-item {
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-item:hover {
|
||||||
|
background-color: #F3F4F6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-item.active {
|
||||||
|
background-color: #EFF6FF;
|
||||||
|
border-left: 3px solid var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Todo items */
|
||||||
|
.todo-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
background-color: #F9FAFB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-item input[type="checkbox"] {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-item.completed {
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #6B7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Image thumbnails */
|
||||||
|
.image-thumbnail {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-thumbnail img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-thumbnail .delete-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.25rem;
|
||||||
|
right: 0.25rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 9999px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Admin panel styles */
|
||||||
|
.user-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background-color: #F9FAFB;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-item .actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 200ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-editor {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Notes & Todos</title>
|
||||||
|
<link rel="stylesheet" href="/css/styles.css">
|
||||||
|
<link href="https://unpkg.com/lucide-icons/dist/css/lucide.css" rel="stylesheet">
|
||||||
|
<script src="https://unpkg.com/lucide-icons"></script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#FAFAFA] text-gray-900">
|
||||||
|
<!-- Auth Container -->
|
||||||
|
<div id="auth-container" class="min-h-screen flex items-center justify-center">
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md w-96">
|
||||||
|
<h1 class="text-2xl font-bold mb-6 text-center">Connexion</h1>
|
||||||
|
<form id="login-form" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium mb-1">Nom d'utilisateur</label>
|
||||||
|
<input type="text" id="username" class="w-full p-2 border rounded" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium mb-1">Mot de passe</label>
|
||||||
|
<input type="password" id="password" class="w-full p-2 border rounded" required>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="w-full bg-[#3B82F6] text-white p-2 rounded hover:bg-blue-600 transition">
|
||||||
|
Se connecter
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main App Container -->
|
||||||
|
<div id="app-container" class="hidden min-h-screen">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200 overflow-y-auto">
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h1 class="text-xl font-bold">Notes & Todos</h1>
|
||||||
|
<button id="new-note-btn" class="p-2 rounded-full hover:bg-gray-100">
|
||||||
|
<i data-lucide="plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="relative mb-4">
|
||||||
|
<input type="text" id="search-notes" placeholder="Rechercher..."
|
||||||
|
class="w-full pl-8 pr-3 py-2 border rounded bg-gray-50">
|
||||||
|
<i data-lucide="search" class="absolute left-2 top-2.5 text-gray-400 w-4 h-4"></i>
|
||||||
|
</div>
|
||||||
|
<div id="notes-list" class="space-y-2">
|
||||||
|
<!-- Notes will be dynamically inserted here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="ml-64 p-8">
|
||||||
|
<header class="flex justify-between items-center mb-8">
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button id="archive-note-btn" class="text-gray-600 hover:text-gray-900">
|
||||||
|
<i data-lucide="archive"></i>
|
||||||
|
</button>
|
||||||
|
<button id="delete-note-btn" class="text-gray-600 hover:text-red-600">
|
||||||
|
<i data-lucide="trash-2"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<span id="user-info" class="text-sm text-gray-600"></span>
|
||||||
|
<button id="logout-btn" class="text-gray-600 hover:text-gray-900">
|
||||||
|
<i data-lucide="log-out"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="note-editor" class="bg-white rounded-lg shadow-sm p-6 max-w-4xl mx-auto">
|
||||||
|
<input type="text" id="note-title" placeholder="Titre"
|
||||||
|
class="w-full text-2xl font-bold mb-4 border-none focus:outline-none">
|
||||||
|
<div id="note-content" contenteditable="true"
|
||||||
|
class="min-h-[200px] mb-4 focus:outline-none"></div>
|
||||||
|
|
||||||
|
<div class="border-t pt-4">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<h3 class="font-medium">Todos</h3>
|
||||||
|
<button id="add-todo-btn" class="ml-2 p-1 rounded-full hover:bg-gray-100">
|
||||||
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="todos-list" class="space-y-2">
|
||||||
|
<!-- Todos will be dynamically inserted here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t mt-4 pt-4">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<h3 class="font-medium">Images</h3>
|
||||||
|
<label for="image-upload" class="ml-2 p-1 rounded-full hover:bg-gray-100 cursor-pointer">
|
||||||
|
<i data-lucide="image-plus" class="w-4 h-4"></i>
|
||||||
|
</label>
|
||||||
|
<input type="file" id="image-upload" class="hidden" accept="image/*">
|
||||||
|
</div>
|
||||||
|
<div id="images-list" class="grid grid-cols-4 gap-4">
|
||||||
|
<!-- Images will be dynamically inserted here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Admin Panel -->
|
||||||
|
<div id="admin-panel" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
||||||
|
<div class="bg-white rounded-lg p-6 w-[600px]">
|
||||||
|
<div class="flex justify-between items-center mb-4">
|
||||||
|
<h2 class="text-xl font-bold">Gestion des utilisateurs</h2>
|
||||||
|
<button id="close-admin-btn" class="text-gray-600 hover:text-gray-900">
|
||||||
|
<i data-lucide="x"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4">
|
||||||
|
<button id="add-user-btn" class="bg-[#3B82F6] text-white px-4 py-2 rounded">
|
||||||
|
Ajouter un utilisateur
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="users-list" class="space-y-2">
|
||||||
|
<!-- Users will be dynamically inserted here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/js/auth.js"></script>
|
||||||
|
<script src="/js/notes.js"></script>
|
||||||
|
<script src="/js/admin.js"></script>
|
||||||
|
<script src="/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
class AuthService {
|
||||||
|
constructor() {
|
||||||
|
this.token = localStorage.getItem('token');
|
||||||
|
this.user = JSON.parse(localStorage.getItem('user'));
|
||||||
|
this.loginForm = document.getElementById('login-form');
|
||||||
|
this.logoutBtn = document.getElementById('logout-btn');
|
||||||
|
this.userInfo = document.getElementById('user-info');
|
||||||
|
|
||||||
|
this.setupEventListeners();
|
||||||
|
this.updateUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
setupEventListeners() {
|
||||||
|
this.loginForm.addEventListener('submit', (e) => this.handleLogin(e));
|
||||||
|
this.logoutBtn.addEventListener('click', () => this.handleLogout());
|
||||||
|
}
|
||||||
|
|
||||||
|
async handleLogin(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const username = document.getElementById('username').value;
|
||||||
|
const password = document.getElementById('password').value;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/auth/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ username, password })
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(data.message || 'Erreur de connexion');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.token = data.token;
|
||||||
|
this.user = data.user;
|
||||||
|
localStorage.setItem('token', this.token);
|
||||||
|
localStorage.setItem('user', JSON.stringify(this.user));
|
||||||
|
|
||||||
|
this.updateUI();
|
||||||
|
window.app.init(); // Initialize main app after login
|
||||||
|
} catch (error) {
|
||||||
|
alert(error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleLogout() {
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
localStorage.removeItem('user');
|
||||||
|
this.token = null;
|
||||||
|
this.user = null;
|
||||||
|
this.updateUI();
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUI() {
|
||||||
|
const authContainer = document.getElementById('auth-container');
|
||||||
|
const appContainer = document.getElementById('app-container');
|
||||||
|
const adminPanel = document.getElementById('admin-panel');
|
||||||
|
|
||||||
|
if (this.token && this.user) {
|
||||||
|
authContainer.classList.add('hidden');
|
||||||
|
appContainer.classList.remove('hidden');
|
||||||
|
this.userInfo.textContent = this.user.username;
|
||||||
|
|
||||||
|
// Show admin panel button if user is admin
|
||||||
|
if (this.user.is_admin) {
|
||||||
|
const adminBtn = document.createElement('button');
|
||||||
|
adminBtn.className = 'ml-4 text-sm text-gray-600 hover:text-gray-900';
|
||||||
|
adminBtn.textContent = 'Admin';
|
||||||
|
adminBtn.onclick = () => adminPanel.classList.remove('hidden');
|
||||||
|
this.userInfo.parentNode.insertBefore(adminBtn, this.logoutBtn);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
authContainer.classList.remove('hidden');
|
||||||
|
appContainer.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getHeaders() {
|
||||||
|
return {
|
||||||
|
'Authorization': `Bearer ${this.token}`,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize auth service
|
||||||
|
window.auth = new AuthService();
|
||||||
Reference in new issue
Block a user