File size: 5,004 Bytes
87344df e63672e 87344df e63672e 87344df e63672e 1e29076 e63672e 87344df 1e29076 e63672e 1e29076 6e796e2 e63672e 6e796e2 e63672e 6e796e2 1e29076 e63672e 1e29076 e63672e 87344df 1e29076 e63672e 87344df 1e29076 87344df e63672e 1e29076 87344df 1e29076 6e796e2 1e29076 e63672e 87344df 68432fb 1e29076 87344df 1e29076 e63672e 1e29076 e63672e 1e29076 e63672e 1e29076 e63672e 1e29076 e63672e 1e29076 e63672e 1e29076 e63672e 1e29076 87344df | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIM - Learning Companion</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<!-- Language toggle (visible on all screens) -->
<button id="btn-lang" class="btn-lang" title="Switch language">FR</button>
<!-- ===== Setup Screen ===== -->
<div id="setup-screen" class="screen active">
<h1>AIM</h1>
<p class="subtitle" data-i18n="subtitle">Socratic Learning Companion</p>
<div class="form-group">
<label for="topic-input" data-i18n="topicLabel">Exploration topic</label>
<input type="text" id="topic-input" data-i18n-placeholder="topicPlaceholder" placeholder="E.g.: Artificial intelligence in professional training">
</div>
<div class="form-group">
<label data-i18n="docsLabel">Reference documents (optional)</label>
<div class="upload-zone" id="upload-zone">
<div class="upload-icon">+</div>
<div class="upload-text" data-i18n="uploadText">Drag your files here or click to select</div>
<div class="upload-hint" data-i18n="uploadHint">PDF, PPTX, TXT or ZIP — multiple files allowed</div>
<input type="file" id="file-input" multiple accept=".pdf,.pptx,.ppt,.txt,.zip" hidden>
</div>
<div class="upload-list" id="upload-list"></div>
<div class="upload-status" id="upload-status"></div>
</div>
<div class="form-group">
<label data-i18n="modeLabel">Mode</label>
<div class="mode-selector">
<div class="mode-btn selected" data-mode="TUTOR">
<div class="mode-title" data-i18n="modeTutor">Tutor</div>
<div class="mode-desc" data-i18n="modeTutorDesc">Supportive guidance, open-ended questions</div>
</div>
<div class="mode-btn" data-mode="CRITIC">
<div class="mode-title" data-i18n="modeCritic">Critic</div>
<div class="mode-desc" data-i18n="modeCriticDesc">Devil's advocate, tests logical weaknesses</div>
</div>
</div>
</div>
<button id="btn-start" class="btn-primary" disabled data-i18n="btnStart">Start session</button>
</div>
<!-- ===== Chat Screen ===== -->
<div id="chat-screen" class="screen">
<div class="chat-header">
<div class="chat-header-left">
<span id="mode-badge" class="badge badge-mode"></span>
<span id="topic-badge" class="badge badge-topic"></span>
<span id="docs-badge" class="badge badge-docs" style="display:none"></span>
</div>
<div class="chat-header-right">
<button id="btn-end-session" class="btn-end" data-i18n="btnEnd">End session</button>
<button id="btn-reset" class="btn-reset" data-i18n="btnRestart">Restart</button>
</div>
</div>
<div class="phase-indicator" id="phase-dots" style="display:none"></div>
<div class="phase-labels" id="phase-labels" style="display:none"></div>
<div class="messages" id="messages">
<div class="typing-indicator" id="typing">
<span></span><span></span><span></span>
</div>
</div>
<div class="input-bar">
<input type="text" id="chat-input" data-i18n-placeholder="chatPlaceholder" placeholder="Type your thoughts here...">
<button id="btn-send" class="btn-send" data-i18n="btnSend">Send</button>
</div>
</div>
<!-- ===== Analysis Screen ===== -->
<div id="analysis-screen" class="screen">
<h2 data-i18n="reportTitle">Session Report</h2>
<div class="scores-grid" id="scores-grid"></div>
<div class="analysis-section">
<h3 data-i18n="summaryTitle">Summary</h3>
<p id="analysis-summary"></p>
</div>
<div class="analysis-section">
<h3 data-i18n="strengthsTitle">Key strengths</h3>
<ul id="analysis-strengths"></ul>
</div>
<div class="analysis-section">
<h3 data-i18n="weaknessesTitle">Areas for improvement</h3>
<ul id="analysis-weaknesses"></ul>
</div>
<div class="analysis-section">
<h3 data-i18n="rhythmTitle">Pace</h3>
<p><span data-i18n="rhythmText">Responses under 8 seconds:</span> <span id="rhythm-count" class="rhythm-badge">0</span></p>
</div>
<div class="analysis-actions">
<button id="btn-export" class="btn-secondary" data-i18n="btnExport">Export JSON</button>
<button id="btn-new-session" class="btn-primary" data-i18n="btnNewSession">New session</button>
</div>
</div>
<script src="/static/app.js"></script>
</body>
</html>
|