noteflow/public/index.html

<!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">
    <!-- Remplacer les CDN Lucide par une version locale -->
    <script src="/js/lucide.min.js" defer></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">
                        <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" 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>