File size: 3,712 Bytes
9d3f668 | 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 | <!DOCTYPE html>
<html lang="nso">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Join a Class — Leotša</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f2;color:#1a1a1a;min-height:100vh;display:flex;flex-direction:column}
.hdr{background:#fff;padding:14px 16px;border-bottom:1px solid #e5e5e0;display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:10px;background:#1D9E75;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.title{font-size:15px;font-weight:600}.sub{font-size:11px;color:#999}
.body{flex:1;padding:28px 16px;max-width:440px;margin:0 auto;width:100%}
.card{background:#fff;border:1px solid #e5e5e0;border-radius:14px;padding:24px;margin-bottom:16px}
.emoji{font-size:48px;text-align:center;display:block;margin-bottom:16px}
h2{font-size:20px;font-weight:700;margin-bottom:6px;text-align:center}
p{font-size:14px;color:#666;margin-bottom:20px;text-align:center;line-height:1.5}
label{display:block;font-size:12px;font-weight:600;color:#666;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
input{width:100%;padding:14px;border:1.5px solid #ddd;border-radius:10px;font-size:16px;font-family:inherit;margin-bottom:16px;background:#fff;outline:none;color:#1a1a1a}
input:focus{border-color:#1D9E75}
.code-input{font-family:monospace;font-size:22px;letter-spacing:3px;text-align:center;text-transform:uppercase;color:#1D9E75;font-weight:700}
.btn{width:100%;padding:14px;background:#1D9E75;color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer}
.btn:active{opacity:.8}
.err{background:#fef2f2;color:#b91c1c;border:1px solid #fca5a5;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:14px}
.hint{font-size:12px;color:#999;text-align:center;margin-top:14px}
.teacher-link{text-align:center;margin-top:8px;font-size:13px;color:#666}
.teacher-link a{color:#1D9E75;text-decoration:none;font-weight:600}
{% if class_name %}
.active-banner{background:#E1F5EE;border:1px solid #9FE1CB;border-radius:10px;padding:12px 14px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
{% endif %}
</style>
</head>
<body>
<div class="hdr">
<div class="logo">🎮</div>
<div><div class="title">Leotša la Sepedi</div><div class="sub">Join a Class</div></div>
</div>
<div class="body">
<div class="card">
<span class="emoji">🏫</span>
<h2>Tsena Lekalaseng</h2>
<p>Enter the class code from your teacher and your name to join.</p>
{% if error %}<div class="err">⚠️ {{ error }}</div>{% endif %}
<form method="post">
{% csrf_token %}
<label>Class Code</label>
<input
class="code-input"
type="text"
name="code"
maxlength="8"
placeholder="LSP-XXXX"
value="{{ prefill }}"
autocomplete="off"
autocorrect="off"
spellcheck="false"
required>
<label>Your name</label>
<input
type="text"
name="name"
placeholder="e.g. Lerato M."
autocomplete="off"
required>
<button class="btn" type="submit">Join Class →</button>
</form>
<p class="hint">Your teacher will share the class code with you.</p>
</div>
<div class="teacher-link">
Are you a teacher? <a href="/teacher/">Go to the Teacher Portal →</a>
</div>
</div>
<script>
// Auto-uppercase the class code input
document.querySelector('.code-input').addEventListener('input', function(){
this.value = this.value.toUpperCase();
});
</script>
</body>
</html>
|