Michael/noteflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/noteflow.git synced 2026-10-11 17:29:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

[dyad] wrote 2 file(s)

Browse Source
This commit is contained in:
Michael committed 2025-11-06 14:55:45 +01:00
1 parent b282e9fc00
commit 442dc19689
2 files changed
+600 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/index.html
+599 -4
View File
@@ -4,11 +4,606 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes & Todos</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
<style>
/* 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;
}
.bg-white {
background-color: white;
}
.bg-gray-50 {
background-color: #F9FAFB;
}
.text-center {
text-align: center;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.text-2xl {
font-size: 1.5rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-sm {
font-size: 0.875rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-auto {
margin-left: auto;
}
.p-1 {
padding: 0.25rem;
}
.p-2 {
padding: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pt-4 {
padding-top: 1rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-full {
border-radius: 9999px;
}
.border {
border: 1px solid #E5E7EB;
}
.border-t {
border-top: 1px solid #E5E7EB;
}
.border-r {
border-right: 1px solid #E5E7EB;
}
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.w-full {
width: 100%;
}
.w-96 {
width: 24rem;
}
.w-64 {
width: 16rem;
}
.w-4 {
width: 1rem;
}
.h-4 {
height: 1rem;
}
.min-h-screen {
min-height: 100vh;
}
.min-h-\[200px\] {
min-height: 200px;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gap-4 {
gap: 1rem;
}
.space-y-2 > * + * {
margin-top: 0.5rem;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
.space-x-4 > * + * {
margin-left: 1rem;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.left-0 {
left: 0;
}
.top-0 {
top: 0;
}
.left-2 {
left: 0.5rem;
}
.top-2\.5 {
top: 0.625rem;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow-y-auto {
overflow-y: auto;
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.text-gray-400 {
color: #9CA3AF;
}
.text-gray-500 {
color: #6B7280;
}
.text-gray-600 {
color: #4B5563;
}
.text-gray-900 {
color: #111827;
}
.text-white {
color: white;
}
.text-red-600 {
color: #DC2626;
}
.text-blue-600 {
color: #2563EB;
}
.hover\:bg-gray-100:hover {
background-color: #F3F4F6;
}
.hover\:text-gray-900:hover {
color: #111827;
}
.hover\:text-red-600:hover {
color: #DC2626;
}
.focus\:outline-none:focus {
outline: none;
}
/* 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 */
button {
cursor: pointer;
}
.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;
}
/* Layout */
aside {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 16rem;
background-color: white;
border-right: 1px solid #E5E7EB;
overflow-y: auto;
}
main {
margin-left: 16rem;
padding: 2rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
aside {
width: 100%;
height: auto;
position: relative;
}
main {
margin-left: 0;
}
.note-editor {
margin: 1rem;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Le reste du HTML reste inchangé -->
<!-- ... -->
<!-- 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" style="width: 100%; background-color: #3B82F6; color: white; padding: 0.5rem; border-radius: 0.375rem; font-weight: 500; transition: all 200ms;">
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">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-2 top-2.5 text-gray-400 w-4 h-4"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
</button>
<button id="delete-note-btn" class="text-gray-600 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
</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">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="mb-4">
<button id="add-user-btn" style="background-color: #3B82F6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem;">
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>
server.js
+1 -9
View File
@@ -42,15 +42,7 @@ app.use(helmet({
}));
app.use(cors());
app.use(express.json());
// Serve static files with correct MIME types
app.use(express.static('public', {
setHeaders: (res, path) => {
if (path.endsWith('.css')) {
res.setHeader('Content-Type', 'text/css');
}
}
}));
app.use(express.static('public'));
// Set JWT_SECRET environment variable if not set
if (!process.env.JWT_SECRET) {