Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Assistant Conseil IA</title> | |
| <!-- Importation de la police Inter pour un look moderne --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Importation de FontAwesome pour les icônes --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #2563eb; | |
| --primary-hover: #1d4ed8; | |
| --bg-color: #f8fafc; | |
| --card-bg: #ffffff; | |
| --text-main: #1e293b; | |
| --text-secondary: #64748b; | |
| --border-color: #e2e8f0; | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
| --radius: 16px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-x: hidden; | |
| } | |
| /* HEADER */ | |
| header { | |
| background: var(--card-bg); | |
| padding: 1rem 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border-color); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .anycoder-link { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| background: #f1f5f9; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| transition: all 0.2s; | |
| } | |
| .anycoder-link:hover { | |
| background: #e2e8f0; | |
| color: var(--primary-color); | |
| } | |
| /* MAIN CONTAINER */ | |
| main { | |
| flex: 1; | |
| padding: 1rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| transition: all 0.3s ease; | |
| } | |
| /* EMPTY STATE (HOME) */ | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 70vh; | |
| text-align: center; | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .search-icon-large { | |
| font-size: 4rem; | |
| color: var(--primary-color); | |
| margin-bottom: 1.5rem; | |
| opacity: 0.8; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .hero-text { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .hero-subtext { | |
| color: var(--text-secondary); | |
| margin-bottom: 2rem; | |
| } | |
| /* SEARCH BAR AREA */ | |
| .search-container { | |
| width: 100%; | |
| position: relative; | |
| margin-bottom: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| /* When results exist, move search to top */ | |
| main.has-results .search-container { | |
| position: sticky; | |
| top: 0; | |
| background: var(--bg-color); /* Match body bg for seamless feel */ | |
| padding: 10px 0; | |
| z-index: 50; | |
| } | |
| main.has-results .empty-state { | |
| display: none; | |
| } | |
| .search-box { | |
| display: flex; | |
| align-items: center; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 50px; | |
| padding: 0.8rem 1.2rem; | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.2s; | |
| } | |
| .search-box:focus-within { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); | |
| transform: translateY(-1px); | |
| } | |
| .search-input { | |
| flex: 1; | |
| border: none; | |
| outline: none; | |
| font-size: 1rem; | |
| color: var(--text-main); | |
| background: transparent; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .search-btn { | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background 0.2s; | |
| margin-left: 10px; | |
| } | |
| .search-btn:hover { | |
| background: var(--primary-hover); | |
| } | |
| /* HISTORY CHIPS */ | |
| .history-section { | |
| width: 100%; | |
| margin-top: 1rem; | |
| display: none; /* Hidden by default */ | |
| } | |
| main.has-results .history-section { | |
| display: block; | |
| } | |
| .history-title { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .history-list { | |
| display: flex; | |
| gap: 10px; | |
| overflow-x: auto; | |
| padding-bottom: 10px; | |
| scrollbar-width: none; /* Firefox */ | |
| } | |
| .history-list::-webkit-scrollbar { | |
| display: none; /* Chrome/Safari */ | |
| } | |
| .history-chip { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .history-chip:hover { | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| /* RESULTS AREA */ | |
| .results-area { | |
| width: 100%; | |
| margin-top: 1rem; | |
| padding-bottom: 2rem; | |
| display: none; | |
| animation: slideUp 0.4s ease-out; | |
| } | |
| main.has-results .results-area { | |
| display: block; | |
| } | |
| /* RESULT CARD */ | |
| .advice-card { | |
| background: var(--card-bg); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-md); | |
| overflow: hidden; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| } | |
| .card-header { | |
| position: relative; | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .card-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s; | |
| } | |
| .advice-card:hover .card-image { | |
| transform: scale(1.05); | |
| } | |
| .card-content { | |
| padding: 1.5rem; | |
| } | |
| .card-title { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| margin-bottom: 0.8rem; | |
| color: var(--text-main); | |
| } | |
| .card-text { | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: 1.2rem; | |
| font-size: 0.95rem; | |
| } | |
| .action-section { | |
| background: #f8fafc; | |
| border-radius: 12px; | |
| padding: 1rem; | |
| border: 1px solid #f1f5f9; | |
| } | |
| .action-title { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| margin-bottom: 0.8rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--primary-color); | |
| } | |
| .tips-list { | |
| list-style: none; | |
| } | |
| .tips-list li { | |
| position: relative; | |
| padding-left: 20px; | |
| margin-bottom: 8px; | |
| font-size: 0.9rem; | |
| color: var(--text-main); | |
| } | |
| .tips-list li::before { | |
| content: "•"; | |
| color: var(--primary-color); | |
| font-weight: bold; | |
| position: absolute; | |
| left: 0; | |
| } | |
| .examples-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: 10px; | |
| margin-top: 1rem; | |
| } | |
| .example-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 10px; | |
| background: white; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| font-size: 0.8rem; | |
| } | |
| .example-icon { | |
| font-size: 1.2rem; | |
| margin-bottom: 5px; | |
| color: #10b981; /* Success green */ | |
| } | |
| /* LOADING STATE */ | |
| .loading { | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 2rem; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| /* ANIMATIONS */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* RESPONSIVE */ | |
| @media (max-width: 600px) { | |
| .card-header { height: 160px; } | |
| .card-content { padding: 1rem; } | |
| .hero-text { font-size: 1.2rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="logo"> | |
| <i class="fa-solid fa-robot"></i> ConseilBot | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <main id="main-container"> | |
| <!-- Search Bar --> | |
| <div class="search-container"> | |
| <div class="search-box"> | |
| <i class="fa-solid fa-magnifying-glass" style="color: #94a3b8; margin-right: 10px;"></i> | |
| <input type="text" id="user-input" class="search-input" placeholder="Posez votre question (ex: gagner argent...)" autocomplete="off"> | |
| <button id="search-btn" class="search-btn"> | |
| <i class="fa-solid fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Empty State (Home) --> | |
| <div class="empty-state" id="empty-state"> | |
| <i class="fa-solid fa-magnifying-glass search-icon-large"></i> | |
| <h1 class="hero-text">Comment puis-je vous aider ?</h1> | |
| <p class="hero-subtext">Posez une question sur l'argent, le travail, la santé...</p> | |
| </div> | |
| <!-- Loading Spinner --> | |
| <div class="loading" id="loading"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Results Area --> | |
| <div class="results-area" id="results-area"></div> | |
| <!-- History Section --> | |
| <div class="history-section"> | |
| <div class="history-title">Vos recherches récentes</div> | |
| <div class="history-list" id="history-list"> | |
| <!-- History items injected here --> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // DOM Elements | |
| const mainContainer = document.getElementById('main-container'); | |
| const inputField = document.getElementById('user-input'); | |
| const searchBtn = document.getElementById('search-btn'); | |
| const resultsArea = document.getElementById('results-area'); | |
| const historyList = document.getElementById('history-list'); | |
| const loadingSpinner = document.getElementById('loading'); | |
| const emptyState = document.getElementById('empty-state'); | |
| // Base de connaissances simulée (Mock AI) | |
| const knowledgeBase = [ | |
| { | |
| keywords: ['argent', 'argent', 'revenu', 'richesse', 'cash', 'salaire'], | |
| title: "Comment gagner de l'argent ?", | |
| text: "Gagner de l'argent demande du temps, de la stratégie et de la persévérance. Il n'existe pas de méthode miracle, mais plusieurs voies s'offrent à vous selon vos compétences.", | |
| image: "https://picsum.photos/seed/money/800/400.jpg", | |
| tips: [ | |
| "Développez une compétence recherchée (code, design, marketing).", | |
| "Utilisez les plateformes de freelance (Upwork, Malt, ComeUp).", | |
| "Commencez un side business en parallèle de votre emploi.", | |
| "Investissez dans votre éducation avant d'investir dans des actifs." | |
| ], | |
| examples: [ | |
| { icon: "fa-laptop-code", text: "Freelance Dev" }, | |
| { icon: "fa-pen-nib", text: "Rédaction Web" }, | |
| { icon: "fa-store", text: "Dropshipping" }, | |
| { icon: "fa-chart-line", text: "Bourse / ETF" } | |
| ] | |
| }, | |
| { | |
| keywords: ['développement personnel', 'confiance', 'mieux être', 'mental', 'motivation', 'succès'], | |
| title: "Améliorer son développement personnel", | |
| text: "Le développement personnel est un processus continu pour comprendre mieux qui vous êtes, atteindre votre potentiel maximum et réaliser vos aspirations.", | |
| image: "https://picsum.photos/seed/mindset/800/400.jpg", | |
| tips: [ | |
| "Pratiquez la gratitude quotidienne pour changer votre perspective.", | |
| "Lisez des livres ou écoutez des podcasts inspirants.", | |
| "Fixez des objectifs SMART (Spécifiques, Mesurables, etc.).", | |
| "Prenez soin de votre corps (sport, sommeil, alimentation)." | |
| ], | |
| examples: [ | |
| { icon: "fa-book", text: "Lecture" }, | |
| { icon: "fa-brain", text: "Méditation" }, | |
| { icon: "fa-dumbbell", text: "Sport" }, | |
| { icon: "fa-users", text: "Networking" } | |
| ] | |
| }, | |
| { | |
| keywords: ['productivité', 'travailler', 'efficace', 'organisation', 'temps', 'concentration'], | |
| title: "Booster sa productivité", | |
| text: "La productivité ne consiste pas à travailler plus, mais à travailler mieux. Il s'agit d'optimiser votre temps et votre énergie pour produire des résultats de qualité.", | |
| image: "https://picsum.photos/seed/work/800/400.jpg", | |
| tips: [ | |
| "Utilisez la technique Pomodoro (25min travail, 5min pause).", | |
| "Éliminez les distractions (notifications, téléphone).", | |
| "Faites la tâche la plus difficile en premier (Eat the frog).", | |
| "Utilisez des outils de gestion de tâches (Notion, Todoist)." | |
| ], | |
| examples: [ | |
| { icon: "fa-clock", text: "Pomodoro" }, | |
| { icon: "fa-list-check", text: "To-Do List" }, | |
| { icon: "fa-bell-slash", text: "Mode Focus" }, | |
| { icon: "fa-calendar", text: "Time Blocking" } | |
| ] | |
| }, | |
| { | |
| keywords: ['santé', 'manger', 'sport', 'forme', 'poids', ' régime'], | |
| title: "Conseils pour une meilleure santé", | |
| text: "La santé est un investissement sur le long terme. De petits changements dans vos habitudes quotidiennes peuvent avoir un impact énorme sur votre bien-être physique et mental.", | |
| image: "https://picsum.photos/seed/health/800/400.jpg", | |
| tips: [ | |
| "Buvez au moins 1.5L d'eau par jour.", | |
| "Privilégiez les aliments non transformés (fruits, légumes).", | |
| "Faites 30 minutes d'activité physique modérée par jour.", | |
| " Dormez 7 à 8 heures par nuit pour permettre la récupération." | |
| ], | |
| examples: [ | |
| { icon: "fa-apple-whole", text: "Alimentation" }, | |
| { icon: "fa-person-running", text: "Cardio" }, | |
| { icon: "fa-bed", text: "Sommeil" }, | |
| { icon: "fa-glass-water", text: "Hydratation" } | |
| ] | |
| } | |
| ]; | |
| // Réponse par défaut (Fallback) | |
| const defaultResponse = { | |
| title: "Analyse en cours...", | |
| text: "Je n'ai pas encore une réponse spécifique dans ma base de données pour cette requête précise. Cependant, voici une approche générale pour résoudre votre problème :", | |
| image: "https://picsum.photos/seed/tech/800/400.jpg", | |
| tips: [ | |
| "Décomposez le problème en petites étapes.", | |
| "Recherchez des informations fiables sur Google.", | |
| "Demandez conseil à des experts ou des communautés.", | |
| "Testez différentes solutions et mesurez les résultats." | |
| ], | |
| examples: [ | |
| { icon: "fa-google", text: "Recherche Web" }, | |
| { icon: "fa-comments", text: "Forums" }, | |
| { icon: "fa-video", text: "Tutoriels" }, | |
| { icon: "fa-flask", text: "Expérimentation" } | |
| ] | |
| }; | |
| // Initialisation | |
| document.addEventListener('DOMContentLoaded', () => { | |
| loadHistory(); | |
| inputField.focus(); | |
| }); | |
| // Event Listeners | |
| searchBtn.addEventListener('click', handleSearch); | |
| inputField.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') handleSearch(); | |
| }); | |
| // Fonction principale de recherche | |
| function handleSearch() { | |
| const query = inputField.value.trim().toLowerCase(); | |
| if (!query) return; | |
| // UI Updates | |
| showLoading(true); | |
| mainContainer.classList.remove('has-results'); | |
| emptyState.style.display = 'none'; | |
| resultsArea.innerHTML = ''; | |
| resultsArea.style.display = 'none'; | |
| // Simulation du délai de réflexion IA (500ms à 1500ms) | |
| const delay = Math.floor(Math.random() * 800) + 500; | |
| setTimeout(() => { | |
| const response = findBestMatch(query); | |
| renderResponse(response); | |
| saveToHistory(inputField.value); // Sauvegarde le texte original | |
| showLoading(false); | |
| mainContainer.classList.add('has-results'); | |
| }, delay); | |
| } | |
| // Logique de recherche de correspondance | |
| function findBestMatch(query) { | |
| // Recherche simple par mots-clés | |
| for (const item of knowledgeBase) { | |
| const match = item.keywords.some(keyword => query.includes(keyword)); | |
| if (match) return item; | |
| } | |
| return defaultResponse; | |
| } | |
| // Affichage du résultat | |
| function renderResponse(data) { | |
| resultsArea.style.display = 'block'; | |
| const card = document.createElement('div'); | |
| card.className = 'advice-card'; | |
| // Construction des exemples HTML | |
| const examplesHtml = data.examples.map(ex => ` | |
| <div class="example-item"> | |
| <i class="fa-solid ${ex.icon} example-icon"></i> | |
| <span>${ex.text}</span> | |
| </div> | |
| `).join(''); | |
| // Construction des conseils HTML | |
| const tipsHtml = data.tips.map(tip => `<li>${tip}</li>`).join(''); | |
| card.innerHTML = ` | |
| <div class="card-header"> | |
| <img src="${data.image}" alt="Illustration" class="card-image"> | |
| </div> | |
| <div class="card-content"> | |
| <h2 class="card-title">${data.title}</h2> | |
| <p class="card-text">${data.text}</p> | |
| <div class="action-section"> | |
| <div class="action-title"> | |
| <i class="fa-solid fa-lightbulb"></i> Conseils Pratiques | |
| </div> | |
| <ul class="tips-list"> | |
| ${tipsHtml} | |
| </ul> | |
| </div> | |
| <div class="examples-grid"> | |
| ${examplesHtml} | |
| </div> | |
| </div> | |
| `; | |
| resultsArea.appendChild(card); | |
| } | |
| // Gestion de l'historique | |
| function saveToHistory(query) { | |
| let history = JSON.parse(localStorage.getItem('adviceHistory')) || []; | |
| // Supprimer les doublons | |
| history = history.filter(item => item.toLowerCase() !== query.toLowerCase()); | |
| // Ajouter au début | |
| history.unshift(query); | |
| // Limiter à 10 éléments | |
| if (history.length > 10) history.pop(); | |
| localStorage.setItem('adviceHistory', JSON.stringify(history)); | |
| renderHistory(history); | |
| } | |
| function loadHistory() { | |
| const history = JSON.parse(localStorage.getItem('adviceHistory')) || []; | |
| renderHistory(history); | |
| } | |
| function renderHistory(history) { | |
| historyList.innerHTML = ''; | |
| if (history.length === 0) return; | |
| history.forEach(item => { | |
| const chip = document.createElement('div'); | |
| chip.className = 'history-chip'; | |
| chip.innerHTML = `<i class="fa-regular fa-clock"></i> ${item}`; | |
| chip.addEventListener('click', () => { | |
| inputField.value = item; | |
| handleSearch(); | |
| }); | |
| historyList.appendChild(chip); | |
| }); | |
| } | |
| // Utilitaire de chargement | |
| function showLoading(show) { | |
| loadingSpinner.style.display = show ? 'flex' : 'none'; | |
| } | |
| </script> | |
| </body> | |
| </html> |