| <!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> |
| |
| document.querySelector('.code-input').addEventListener('input', function(){ |
| this.value = this.value.toUpperCase(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
