| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AskLAQ Assistant</title> |
| |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>> |
| |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| |
| <style> |
| :root { |
| |
| --bg-color: #343541; |
| --chat-bg: #444654; |
| --text-color: #ECECF1; |
| --input-bg: #40414F; |
| --border-color: rgba(255,255,255,0.1); |
| --accent-color: #10A37F; |
| --accent-hover: #1A7F64; |
| --bot-icon-bg: #10A37F; |
| --user-icon-bg: #5436DA; |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| font-family: 'Inter', sans-serif; |
| } |
| |
| body { |
| background-color: var(--bg-color); |
| color: var(--text-color); |
| display: flex; |
| height: 100vh; |
| overflow: hidden; |
| flex-direction: column; |
| } |
| |
| |
| header { |
| padding: 1rem 2rem; |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| background-color: var(--bg-color); |
| z-index: 10; |
| } |
| |
| header h1 { |
| font-size: 1.2rem; |
| font-weight: 500; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .status-container { |
| font-size: 0.85rem; |
| color: #ccc; |
| display: flex; |
| gap: 15px; |
| align-items: center; |
| } |
| |
| .status-badge { |
| background: var(--chat-bg); |
| padding: 4px 10px; |
| border-radius: 12px; |
| border: 1px solid var(--border-color); |
| } |
| |
| |
| .chat-container { |
| flex: 1; |
| overflow-y: auto; |
| scroll-behavior: smooth; |
| } |
| |
| .message-row { |
| padding: 1.5rem 0; |
| border-bottom: 1px solid rgba(0,0,0,0.1); |
| } |
| |
| .message-row.bot { |
| background-color: var(--chat-bg); |
| border-bottom: 1px solid rgba(0,0,0,0.2); |
| } |
| |
| .message-content { |
| max-width: 800px; |
| margin: 0 auto; |
| display: flex; |
| gap: 1.5rem; |
| padding: 0 1rem; |
| } |
| |
| .avatar { |
| width: 30px; |
| height: 30px; |
| border-radius: 4px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1rem; |
| flex-shrink: 0; |
| } |
| |
| .avatar.user { background-color: var(--user-icon-bg); } |
| .avatar.bot { background-color: var(--bot-icon-bg); } |
| |
| .message-body { |
| flex: 1; |
| line-height: 1.6; |
| font-size: 1rem; |
| overflow-wrap: break-word; |
| } |
| |
| |
| .rich-content { |
| margin-top: 1rem; |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| |
| .service-card { |
| background-color: var(--bg-color); |
| border: 1px solid var(--border-color); |
| border-radius: 8px; |
| padding: 1.2rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 1rem; |
| } |
| |
| .service-info h3 { |
| font-size: 1.1rem; |
| margin-bottom: 0.3rem; |
| font-weight: 600; |
| } |
| |
| .service-info p { |
| font-size: 0.9rem; |
| color: #aaa; |
| } |
| |
| .btn { |
| background-color: var(--accent-color); |
| color: white; |
| border: none; |
| padding: 0.6rem 1rem; |
| border-radius: 6px; |
| cursor: pointer; |
| font-weight: 500; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| transition: background 0.2s ease; |
| font-size: 0.9rem; |
| white-space: nowrap; |
| } |
| |
| .btn:hover { background-color: var(--accent-hover); } |
| |
| .btn-outline { |
| background-color: transparent; |
| border: 1px solid var(--border-color); |
| } |
| .btn-outline:hover { |
| background-color: rgba(255,255,255,0.05); |
| } |
| |
| .btn-nav { |
| background-color: #2563EB; |
| color: white; |
| } |
| .btn-nav:hover { |
| background-color: #1D4ED8; |
| } |
| |
| .service-actions { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| } |
| |
| |
| .map-container { |
| height: 250px; |
| width: 100%; |
| border-radius: 8px; |
| border: 1px solid var(--border-color); |
| z-index: 1; |
| } |
| |
| |
| .recs-container { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| margin-top: 1rem; |
| } |
| |
| .rec-chip { |
| background-color: var(--bg-color); |
| border: 1px solid var(--border-color); |
| color: var(--text-color); |
| padding: 0.5rem 1rem; |
| border-radius: 20px; |
| cursor: pointer; |
| font-size: 0.85rem; |
| transition: all 0.2s ease; |
| } |
| |
| .rec-chip:hover { |
| background-color: rgba(255,255,255,0.1); |
| border-color: var(--accent-color); |
| } |
| |
| |
| .analytics-data { |
| font-size: 0.85rem; |
| color: #888; |
| margin-top: 1rem; |
| display: flex; |
| gap: 15px; |
| padding-top: 0.8rem; |
| border-top: 1px solid rgba(255, 255, 255, 0.05); |
| } |
| |
| .analytics-data span { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| } |
| |
| |
| .input-area { |
| padding: 2rem; |
| background: linear-gradient(180deg, transparent, var(--bg-color) 20%); |
| } |
| |
| .input-form { |
| max-width: 800px; |
| margin: 0 auto; |
| position: relative; |
| display: flex; |
| align-items: flex-end; |
| background-color: var(--input-bg); |
| border: 1px solid var(--border-color); |
| border-radius: 12px; |
| box-shadow: 0 0 15px rgba(0,0,0,0.1); |
| padding: 8px; |
| transition: border-color 0.2s ease, box-shadow 0.2s ease; |
| } |
| |
| .input-form.focused { |
| border-color: rgba(255,255,255,0.2); |
| box-shadow: 0 0 15px rgba(0,0,0,0.2); |
| } |
| |
| .input-form textarea { |
| flex: 1; |
| background: transparent; |
| border: none; |
| color: var(--text-color); |
| padding: 8px 12px; |
| font-size: 1rem; |
| resize: none; |
| outline: none; |
| max-height: 200px; |
| overflow-y: auto; |
| min-height: 24px; |
| line-height: 1.5; |
| } |
| |
| .send-btn { |
| background-color: var(--accent-color); |
| color: white; |
| border: none; |
| border-radius: 8px; |
| width: 32px; |
| height: 32px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: background 0.2s ease; |
| margin-bottom: 2px; |
| margin-right: 4px; |
| flex-shrink: 0; |
| } |
| |
| .send-btn[disabled] { |
| background-color: transparent; |
| color: #666; |
| cursor: not-allowed; |
| } |
| |
| .send-btn:not([disabled]):hover { |
| background-color: var(--accent-hover); |
| } |
| |
| |
| .typing-indicator { |
| display: inline-flex; |
| gap: 4px; |
| padding: 4px 0; |
| } |
| |
| .typing-dot { |
| width: 6px; |
| height: 6px; |
| background-color: #888; |
| border-radius: 50%; |
| animation: typing 1.4s infinite ease-in-out both; |
| } |
| |
| .typing-dot:nth-child(1) { animation-delay: -0.32s; } |
| .typing-dot:nth-child(2) { animation-delay: -0.16s; } |
| |
| @keyframes typing { |
| 0%, 80%, 100% { transform: scale(0); } |
| 40% { transform: scale(1); } |
| } |
| |
| |
| .message-body strong { font-weight: 600; color: #fff; } |
| .message-body p { margin-bottom: 0.8rem; } |
| .message-body p:last-child { margin-bottom: 0; } |
| .message-body a { color: var(--accent-color); text-decoration: none; } |
| .message-body a:hover { text-decoration: underline; } |
| |
| |
| ::-webkit-scrollbar { width: 8px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; } |
| ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); } |
| |
| |
| @media (max-width: 768px) { |
| .input-area { padding: 1rem; } |
| .message-content { padding: 0 0.5rem; gap: 1rem; } |
| .service-card { flex-direction: column; align-items: flex-start; } |
| header { padding: 1rem; } |
| .status-container { display: none; } |
| } |
| |
| .survey-link { |
| text-align: center; |
| margin-top: 12px; |
| font-size: 0.8rem; |
| color: #888; |
| } |
| |
| .survey-link a { |
| color: #888; |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| |
| .survey-link a:hover { |
| color: var(--accent-color); |
| text-decoration: underline; |
| } |
| |
| |
| .modal { |
| display: none; |
| position: fixed; |
| z-index: 1000; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0,0,0,0.8); |
| } |
| |
| .modal-content { |
| background-color: var(--chat-bg); |
| margin: 5vh auto; |
| padding: 20px; |
| border: 1px solid var(--border-color); |
| border-radius: 12px; |
| width: 90%; |
| max-width: 1000px; |
| box-shadow: 0 4px 20px rgba(0,0,0,0.5); |
| } |
| |
| .modal-content h2 { |
| margin-top: 0; |
| margin-bottom: 15px; |
| font-weight: 500; |
| } |
| |
| .close-modal { |
| color: #aaa; |
| float: right; |
| font-size: 28px; |
| font-weight: bold; |
| cursor: pointer; |
| } |
| |
| .close-modal:hover { |
| color: white; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <header> |
| <h1> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><path d="M21 8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2"></path></svg> |
| AskLAQ |
| </h1> |
| <div class="status-container"> |
| <button id="global-map-btn" class="btn btn-outline" style="padding: 4px 10px; font-size: 0.8rem; margin-right: 10px;">🗺️ Carte des Services</button> |
| <div class="status-badge" id="global-intent">Intent: En attente</div> |
| <div class="status-badge" id="global-confidence">Confiance: --%</div> |
| </div> |
| </header> |
|
|
| <div class="chat-container" id="chat"> |
| |
| <div class="message-row bot"> |
| <div class="message-content"> |
| <div class="avatar bot"> |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path><path d="M7 10v4"></path><path d="M11 10v4"></path></svg> |
| </div> |
| <div class="message-body"> |
| <p>Bonjour ! Je suis l'assistant <strong>AskLAQ</strong>.</p> |
| <p>Je suis prêt à analyser vos questions et à vous orienter vers les meilleurs services. Comment puis-je vous aider aujourd'hui ?</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="input-area"> |
| <div class="input-form" id="input-container"> |
| <textarea id="question" rows="1" placeholder="Envoyer un message à AskLAQ..."></textarea> |
| <button id="sendBtn" class="send-btn" disabled> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg> |
| </button> |
| </div> |
| <div class="survey-link"> |
| AskLAQ peut faire des erreurs. <a href="https://docs.google.com/forms/d/e/1FAIpQLSeU80CFppkSmMxCB6K2opel8MSc0Qi8QfKvQtXlIXeHfX7_TQ/viewform?fbzx=9108896931053451286" target="_blank">Aidez-nous à l'améliorer avec ce questionnaire de satisfaction</a>. |
| </div> |
| </div> |
|
|
| |
| <div id="global-map-modal" class="modal"> |
| <div class="modal-content"> |
| <span class="close-modal" id="close-modal-span">×</span> |
| <h2>Carte Globale des Services</h2> |
| <div id="global-map" style="height: 60vh; width: 100%; border-radius: 8px;"></div> |
| </div> |
| </div> |
|
|
| |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> |
| |
| <script src="/static/script.js"></script> |
| </body> |
| </html> |
|
|
