| <!DOCTYPE html>
|
| <html lang="fr">
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>AskLAQ</title>
|
|
|
| <style>
|
| body { font-family: Arial; margin:20px; background:#fafafa; }
|
| h2 { text-align:center; margin-bottom:20px; }
|
| #chat { border:1px solid #ccc; background:#fff; padding:12px; border-radius:10px; height:400px; overflow-y:auto; }
|
| #question { width:70%; padding:10px; border-radius:8px; border:1px solid #ccc; font-size:14px; }
|
| #sendBtn { padding:10px 16px; font-size:14px; border:none; border-radius:8px; background:#1976D2; color:#fff; cursor:pointer; }
|
| #sendBtn:hover { background:#1565C0; }
|
| .user-msg { background:#E3F2FD; padding:10px; border-radius:10px; margin:6px 0; }
|
| .bot-msg { background:#F1F8E9; padding:10px; border-radius:10px; margin:6px 0; }
|
| .recs a { color:#1565C0; cursor:pointer; text-decoration:none; display:block; margin-left:12px; }
|
| .recs a:hover { text-decoration:underline; }
|
| #info { margin-top:10px; background:#f5f5f5; padding:10px; border-radius:8px; border:1px solid #e0e0e0; }
|
| #conf-bar { width:100%; height:18px; background:#ddd; border-radius:8px; margin:6px 0; }
|
| #conf-fill { height:100%; background:#43A047; width:0%; border-radius:8px; text-align:right; padding-right:4px; color:#fff; font-size:12px; line-height:18px; }
|
| .stars { margin-top:8px; }
|
| .star { font-size:26px; color:#FFC107; cursor:pointer; margin-right:4px; }
|
| </style>
|
| </head>
|
|
|
| <body>
|
|
|
| <h2>Assistant d’Analyse Conversationnelle</h2>
|
|
|
| <div id="chat">
|
| <div>💬 <b>Bienvenue 👋</b><br>Analyse des relations <i>Pourquoi / Comment</i>.</div>
|
| </div>
|
|
|
| <div style="margin-top:12px;">
|
| <input type="text" id="question" placeholder="Tapez votre question…">
|
| <button id="sendBtn">🚀 Envoyer</button>
|
| </div>
|
|
|
|
|
| <div id="info">
|
| <p>🧭 Intent : <span id="intent">—</span></p>
|
| <p>🎯 Question correspondante : <span id="matched">—</span></p>
|
|
|
| <div id="conf-bar">
|
| <div id="conf-fill">0%</div>
|
| </div>
|
|
|
|
|
| <div class="stars">
|
| <span class="star" data-value="1">☆</span>
|
| <span class="star" data-value="2">☆</span>
|
| <span class="star" data-value="3">☆</span>
|
| <span class="star" data-value="4">☆</span>
|
| <span class="star" data-value="5">☆</span>
|
| </div>
|
|
|
|
|
| <div style="margin-top:6px; text-align:left;">
|
| 👉 <a href="https://forms.gle/9kHtHPrhTpBcFJhJ7"
|
| target="_blank"
|
| style="color:#1976D2; font-weight:bold; text-decoration:none;">
|
| Questionnaire de satisfaction
|
| </a>
|
| </div>
|
| </div>
|
|
|
| <script src="/static/script.js"></script>
|
|
|
| </body>
|
| </html>
|
|
|
