add user marknig pages

templates/rad/user_marking.html

@@ -0,0 +1,65 @@
+{% extends "base.html" %}
+{% block content %}
+<h1 class="mb-4">Marking: Exams you can mark</h1>
+
+<style>
+  .htmx-indicator { display: none; }
+  .htmx-request .htmx-indicator { display: inline-block; }
+</style>
+
+<div class="row">
+  <div class="col-12">
+    <p class="text-muted">Click an exam type to load exams — each section loads independently.</p>
+  </div>
+</div>
+
+<div class="row g-4">
+  {% for app in apps %}
+    <div class="col-md-6">
+      <div class="card">
+        <div class="card-body d-flex align-items-center justify-content-between">
+          <h5 class="card-title mb-0">{{ app|capfirst }}</h5>
+          <div>
+            <button class="btn btn-sm btn-primary" hx-get="{% url 'user_marking_partial' app %}" hx-target="#marking-{{ app }}" hx-swap="innerHTML" hx-indicator="#indicator-{{ app }}">Load / Refresh</button>
+            <div id="indicator-{{ app }}" class="htmx-indicator ms-2 spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
+          </div>
+        </div>
+        <div id="marking-{{ app }}" class="card-body border-top">
+          <div class="text-muted small">No data loaded — click the button to load.</div>
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>
+
+<script>
+  // Show/hide indicators referenced by triggering element's hx-indicator attribute
+  document.body.addEventListener('htmx:beforeRequest', function(evt){
+    try{
+      var elt = evt.detail.elt || evt.target;
+      var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
+      if(sel){
+        var indicator = document.querySelector(sel);
+        if(indicator) indicator.classList.add('visible');
+      }
+    }catch(e){console.warn(e)}
+  });
+
+  document.body.addEventListener('htmx:afterRequest', function(evt){
+    try{
+      var elt = evt.detail.elt || evt.target;
+      var sel = elt && elt.getAttribute && elt.getAttribute('hx-indicator');
+      if(sel){
+        var indicator = document.querySelector(sel);
+        if(indicator) indicator.classList.remove('visible');
+      }
+    }catch(e){console.warn(e)}
+  });
+</script>
+
+<style>
+  .htmx-indicator { display: none; }
+  .htmx-indicator.visible { display: inline-block !important; }
+</style>
+
+{% endblock %}