79 lines
3.2 KiB
HTML
79 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>RealRobots IDE — Teacher</title>
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
<link rel="stylesheet" href="/src/teacher.css" />
|
|
</head>
|
|
<body class="teacher-body">
|
|
<header id="teacher-toolbar">
|
|
<div class="toolbar-left">
|
|
<span class="app-title">RealRobots IDE — Teacher</span>
|
|
<span id="teacher-status" class="status-disconnected">Connecting…</span>
|
|
<span id="teacher-count" class="teacher-count"></span>
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<span id="user-badge" class="user-badge"></span>
|
|
<a href="./" id="teacher-back" title="Back to IDE">Back to IDE</a>
|
|
<button id="teacher-logout" title="Sign out">Sign out</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="teacher-main">
|
|
<div id="teacher-empty" class="teacher-empty hidden">
|
|
<p>No students online right now.</p>
|
|
<p class="teacher-empty-hint">Students show up here when they sign in on the main IDE.</p>
|
|
</div>
|
|
<div id="teacher-grid" class="teacher-grid"></div>
|
|
</main>
|
|
|
|
<!-- Focused student modal -->
|
|
<div id="student-overlay" class="hidden">
|
|
<div id="student-modal">
|
|
<div class="login-header">
|
|
<h3 id="student-modal-title">Student</h3>
|
|
<button id="student-modal-close" title="Close">×</button>
|
|
</div>
|
|
<div id="student-modal-preview" class="student-modal-preview"></div>
|
|
<div class="student-modal-actions">
|
|
<button id="student-push-btn">Push my current blocks to this student</button>
|
|
</div>
|
|
<div id="student-modal-status" class="login-status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden workspace the teacher edits in the main IDE is loaded here via localStorage
|
|
so we can serialize and push it to students. -->
|
|
<div id="teacher-hidden-ws" aria-hidden="true"></div>
|
|
|
|
<!-- Login modal reused so teachers that aren't signed in can sign in here -->
|
|
<div id="login-overlay" class="hidden">
|
|
<div id="login-modal">
|
|
<div class="login-header">
|
|
<h3>Sign in</h3>
|
|
<button id="login-close" title="Close">×</button>
|
|
</div>
|
|
<p class="login-description">Sign in with your teacher account to see students live.</p>
|
|
<div class="login-tabs">
|
|
<button type="button" id="login-tab-login" class="login-tab active">Sign in</button>
|
|
<button type="button" id="login-tab-register" class="login-tab">Create account</button>
|
|
</div>
|
|
<form id="login-form" class="login-form" autocomplete="off">
|
|
<label class="login-field-label" for="login-username">Username</label>
|
|
<input type="text" id="login-username" autocomplete="username" spellcheck="false" />
|
|
<label class="login-field-label" for="login-password">Password</label>
|
|
<input type="password" id="login-password" autocomplete="current-password" />
|
|
<div class="login-actions">
|
|
<button type="submit" id="login-submit">Sign in</button>
|
|
</div>
|
|
</form>
|
|
<div id="login-status" class="login-status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/teacher.js"></script>
|
|
</body>
|
|
</html>
|