mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-11 17:29:37 +02:00
Claude
e3755d273d
## Base de données: - Table settings (key-value pour paramètres globaux) - Table rss_feeds (url, title, description, enabled, last_fetched_at) - Table rss_articles (feed_id, title, link, description, pub_date, content) - Index optimisés pour performance ## Routes Settings (/api/settings): - GET /api/settings - Récupérer tous les paramètres - GET /api/settings/:key - Récupérer un paramètre - PUT /api/settings/:key - Mettre à jour un paramètre - DELETE /api/settings/:key - Supprimer un paramètre - Middleware requireAdmin sur toutes les routes ## Routes RSS (/api/rss): - GET /api/rss/feeds - Liste des flux RSS (admin) - POST /api/rss/feeds - Ajouter flux RSS avec parsing validation (admin) - PUT /api/rss/feeds/:id - Activer/désactiver flux (admin) - DELETE /api/rss/feeds/:id - Supprimer flux (admin) - POST /api/rss/fetch - Récupérer articles de tous flux actifs (admin) - GET /api/rss/articles - Récupérer 10 derniers articles (tous users) - POST /api/rss/summarize - Générer résumé OpenRouter (admin) - GET /api/rss/models - Liste modèles OpenRouter (admin) ## Intégration OpenRouter: - Appel API avec clé, modèle et prompt configurables - Résumé intelligent des 10 derniers articles - Prompt par défaut optimisé pour résumés d'actualités - Support GPT-4, Claude 3, Gemini, Llama 3, Mistral, etc. - Gestion erreurs et timeout ## Parser RSS: - rss-parser installé pour parsing flux - Gestion articles avec contenu, description, date - Détection doublons par URL - Update automatique infos flux ## Frontend HTML: - Modal admin avec système à onglets (Users/RSS/OpenRouter) - Modal changement mot de passe sans prompt navigateur - Box RSS dans page principale affichage 10 derniers articles - Bouton résumé IA dans header box RSS - Inputs pour gestion flux RSS - Configuration OpenRouter (API key, modèle, prompt, activation) - Sélecteur modèles avec recherche Prochaine étape: CSS + JavaScript pour fonctionnalités
302 lines
15 KiB
HTML
302 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NoteFlow - Notes & Tasks</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="/css/reset.css">
|
|
<link rel="stylesheet" href="/css/variables.css">
|
|
<link rel="stylesheet" href="/css/layout.css">
|
|
<link rel="stylesheet" href="/css/components.css">
|
|
<link rel="stylesheet" href="/css/animations.css">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-container">
|
|
<!-- Logo -->
|
|
<div class="logo">
|
|
<svg class="logo-icon" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="8" y="6" width="24" height="28" rx="2" fill="currentColor"/>
|
|
<rect x="10" y="8" width="20" height="24" rx="1" fill="white"/>
|
|
<line x1="13" y1="13" x2="27" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="13" y1="18" x2="24" y2="18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="13" y1="23" x2="27" y2="23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<circle cx="15" cy="28" r="2" fill="none" stroke="currentColor" stroke-width="1.2"/>
|
|
<path d="M 14 28 L 14.8 28.8 L 16.5 27" stroke="currentColor" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span class="logo-text">NoteFlow</span>
|
|
</div>
|
|
|
|
<!-- Search -->
|
|
<div class="search-container">
|
|
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>
|
|
<input type="text" id="searchInput" placeholder="Rechercher des notes..." class="search-input">
|
|
<button id="searchClear" class="search-clear" style="display: none;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- User -->
|
|
<div class="user-menu">
|
|
<button class="user-button" id="userInfo">
|
|
<svg class="user-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
<span id="userName">User</span>
|
|
<svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</button>
|
|
<div class="user-dropdown" id="userDropdown">
|
|
<button class="dropdown-item" id="adminBtn" style="display: none;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M12 1v6m0 6v6m5.657-13.657L14 9l-2.343-2.343M9 14l-3.657 3.657M1 12h6m6 0h6m-13.657 5.657L9 14l2.343 2.343M14 9l3.657-3.657"></path>
|
|
</svg>
|
|
Administration
|
|
</button>
|
|
<button class="dropdown-item" id="logoutBtn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<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>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div class="content-container">
|
|
<!-- Notes Section -->
|
|
<div class="notes-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Notes</h2>
|
|
<div class="section-actions">
|
|
<div class="view-filters">
|
|
<button class="view-filter active" data-view="active">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
|
</svg>
|
|
Actives
|
|
</button>
|
|
<button class="view-filter" data-view="archived">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<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>
|
|
Archivées
|
|
</button>
|
|
</div>
|
|
<button class="btn-new-note" id="newNoteBtn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
Nouvelle note
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="notes-grid" id="notesGrid">
|
|
<!-- Notes will be inserted here dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Todo Box -->
|
|
<div class="todo-box">
|
|
<div class="todo-box-header">
|
|
<h2 class="todo-box-title">Quick Tasks</h2>
|
|
<span class="todo-counter" id="todoCounter">0 tâches</span>
|
|
</div>
|
|
|
|
<div class="todo-input-wrapper">
|
|
<input type="text" id="todoInput" class="todo-input" placeholder="Ajouter une tâche...">
|
|
<button id="addTodoBtn" class="btn-add-todo">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<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="todo-filters">
|
|
<button class="filter-btn active" data-filter="all">Toutes</button>
|
|
<button class="filter-btn" data-filter="active">Actives</button>
|
|
<button class="filter-btn" data-filter="completed">Terminées</button>
|
|
</div>
|
|
|
|
<div class="todo-list" id="todoList">
|
|
<!-- Todos will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RSS Box -->
|
|
<div class="rss-box">
|
|
<div class="rss-box-header">
|
|
<h2 class="rss-box-title">📰 Actualités</h2>
|
|
<button class="btn-summarize" id="summarizeRssBtn" title="Générer un résumé avec IA">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
|
|
<path d="M2 17l10 5 10-5"></path>
|
|
<path d="M2 12l10 5 10-5"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="rss-articles-list" id="rssArticlesList">
|
|
<p class="rss-empty">Aucun article pour le moment</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modal Admin -->
|
|
<div class="modal-backdrop" id="adminModal" style="display: none;">
|
|
<div class="modal-content admin-modal">
|
|
<div class="modal-header">
|
|
<h2>Administration</h2>
|
|
<button class="modal-close" id="closeAdminModal">✕</button>
|
|
</div>
|
|
|
|
<div class="admin-tabs">
|
|
<button class="admin-tab active" data-tab="users">👥 Utilisateurs</button>
|
|
<button class="admin-tab" data-tab="rss">📰 Flux RSS</button>
|
|
<button class="admin-tab" data-tab="openrouter">🤖 OpenRouter</button>
|
|
</div>
|
|
|
|
<!-- Onglet Utilisateurs -->
|
|
<div class="admin-tab-content" id="tab-users">
|
|
<div class="admin-actions">
|
|
<button class="action-btn" id="createUserBtn">+ Créer un utilisateur</button>
|
|
</div>
|
|
|
|
<div class="users-table-container">
|
|
<table class="users-table" id="usersTable">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Nom d'utilisateur</th>
|
|
<th>Admin</th>
|
|
<th>Créé le</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usersTableBody">
|
|
<!-- Users will be inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Onglet RSS -->
|
|
<div class="admin-tab-content" id="tab-rss" style="display: none;">
|
|
<div class="admin-actions">
|
|
<input type="url" id="rssUrlInput" class="rss-url-input" placeholder="https://example.com/feed.xml">
|
|
<button class="action-btn" id="addRssFeedBtn">+ Ajouter un flux</button>
|
|
<button class="action-btn btn-secondary" id="fetchRssBtn">🔄 Récupérer les articles</button>
|
|
</div>
|
|
|
|
<div class="rss-feeds-list" id="rssFeedsList">
|
|
<!-- Feeds will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Onglet OpenRouter -->
|
|
<div class="admin-tab-content" id="tab-openrouter" style="display: none;">
|
|
<div class="openrouter-settings">
|
|
<div class="setting-group">
|
|
<label for="openrouterApiKey">Clé API OpenRouter</label>
|
|
<input type="password" id="openrouterApiKey" class="setting-input" placeholder="sk-or-...">
|
|
<small>Obtenez votre clé sur <a href="https://openrouter.ai" target="_blank">openrouter.ai</a></small>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label for="openrouterModel">Modèle</label>
|
|
<input type="text" id="modelSearch" class="setting-input" placeholder="Rechercher un modèle...">
|
|
<select id="openrouterModel" class="setting-select" size="8">
|
|
<!-- Models will be inserted here -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label for="rssSummaryEnabled">
|
|
<input type="checkbox" id="rssSummaryEnabled">
|
|
Activer les résumés automatiques
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label for="rssSummaryPrompt">Prompt de résumé</label>
|
|
<textarea id="rssSummaryPrompt" class="setting-textarea" rows="10" placeholder="Le prompt sera chargé..."></textarea>
|
|
</div>
|
|
|
|
<button class="action-btn" id="saveOpenRouterSettings">💾 Sauvegarder les paramètres</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Change Password -->
|
|
<div class="modal-backdrop" id="changePasswordModal" style="display: none;">
|
|
<div class="modal-content small-modal">
|
|
<div class="modal-header">
|
|
<h3>Changer le mot de passe</h3>
|
|
<button class="modal-close" id="closeChangePasswordModal">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="changePasswordUsername"></p>
|
|
<div class="form-group">
|
|
<label for="newPassword">Nouveau mot de passe</label>
|
|
<input type="password" id="newPassword" class="form-input" placeholder="Minimum 6 caractères">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPassword">Confirmer le mot de passe</label>
|
|
<input type="password" id="confirmPassword" class="form-input">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn-cancel" id="cancelChangePassword">Annuler</button>
|
|
<button class="btn-confirm" id="confirmChangePassword">Changer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de Confirmation -->
|
|
<div class="modal-backdrop" id="confirmModal" style="display: none;">
|
|
<div class="modal-content confirm-modal">
|
|
<div class="confirm-icon" id="confirmIcon">⚠️</div>
|
|
<h3 class="confirm-title" id="confirmTitle">Confirmer l'action</h3>
|
|
<p class="confirm-message" id="confirmMessage">Êtes-vous sûr de vouloir continuer ?</p>
|
|
<div class="confirm-actions">
|
|
<button class="btn-cancel" id="confirmCancel">Annuler</button>
|
|
<button class="btn-confirm" id="confirmOk">Confirmer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden file input -->
|
|
<input type="file" id="imageInput" accept="image/*" style="display: none;">
|
|
<input type="file" id="fileInput" style="display: none;">
|
|
|
|
<!-- JavaScript -->
|
|
<script src="/js/complete-app.js"></script>
|
|
</body>
|
|
</html>
|