From e894e02445c837ede89ee6385bd628109ca68108 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Tue, 28 Apr 2026 14:11:19 +0100
Subject: [PATCH] feat: Refactor collection take start template for improved
 layout and user experience

Co-authored-by: Copilot <copilot@github.com>
---
 .../atlas/collection_take_start.html          | 148 ++++++++++++------
 1 file changed, 103 insertions(+), 45 deletions(-)

diff --git a/atlas/templates/atlas/collection_take_start.html b/atlas/templates/atlas/collection_take_start.html
index 90ca5c4d..1350220e 100644
--- a/atlas/templates/atlas/collection_take_start.html
+++ b/atlas/templates/atlas/collection_take_start.html
@@ -1,69 +1,127 @@
 {% extends 'atlas/base.html' %}
 
 {% block content %}
-    <h2>Start: {{collection.name}}{% if cid_exam.completed %} <span class="stamp-white">REVIEW</span>{% endif %}</h2>
+    <style>
+        .take-start-hero {
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            background: linear-gradient(135deg, rgba(13, 110, 253, 0.22), rgba(25, 135, 84, 0.2));
+            border-radius: .75rem;
+            padding: 1rem 1.25rem;
+            margin-bottom: 1rem;
+        }
+
+        .take-start-card {
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: .75rem;
+            padding: 1rem;
+        }
+
+        .take-start-meta {
+            display: grid;
+            grid-template-columns: 9rem 1fr;
+            gap: .35rem .75rem;
+        }
+
+        .take-start-meta dt {
+            font-weight: 600;
+            color: var(--bs-secondary-color);
+            margin: 0;
+        }
+
+        .take-start-meta dd {
+            margin: 0;
+        }
+    </style>
+
+    <section class="take-start-hero">
+        <div class="d-flex flex-wrap align-items-center gap-2 justify-content-between">
+            <h2 class="mb-0">Start: {{ collection.name }}</h2>
+            {% if cid_exam.completed %}
+                <span class="badge bg-light text-dark">Review Mode</span>
+            {% endif %}
+        </div>
+        <p class="mb-0 mt-2 text-body-secondary">Open the collection and begin or resume your session.</p>
+    </section>
 
     {% if request.user.is_authenticated and valid_user %}
-        User: {{request.user}}<br/>
+        <section class="take-start-card">
+            <dl class="take-start-meta mb-3">
+                <dt>User</dt>
+                <dd>{{ request.user }}</dd>
 
+                {% if cid_exam %}
+                    <dt>Started</dt>
+                    <dd>{{ cid_exam.start_time }}</dd>
 
-        {% if cid_exam %}
-            Started: {{cid_exam.start_time}} <br/>
+                    {% if cid_exam.completed %}
+                        <dt>Ended</dt>
+                        <dd>{{ cid_exam.end_time }}</dd>
+                    {% endif %}
+                {% endif %}
+            </dl>
 
+            <div class="d-flex flex-wrap gap-2">
+                <a class="btn btn-primary"
+                   href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
+                    {% if cid_exam.completed %}Review{% else %}Start{% endif %}
+                </a>
 
-            {% if cid_exam.completed %}
-                Ended: {{cid_exam.end_time}} <br/>
-            {% endif %}
-        {% endif %}
-
-        <a href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
-            {% if cid_exam.completed %}
-                <button>Review</button>
-            {% else %}
-                <button>Start</button>
-            {% endif %}
-        </a>
-            {% if cid_exam.completed %}
-                <a href="{% url 'atlas:collection_take_overview_user' pk=collection.pk %}"><button>Overview</button></a>
-            {% endif %}
+                {% if cid_exam.completed %}
+                    <a class="btn btn-outline-secondary"
+                       href="{% url 'atlas:collection_take_overview_user' pk=collection.pk %}">Overview</a>
+                {% endif %}
+            </div>
+        </section>
     {% else %}
-        Enter your CID and passcode in the below boxes. (Registered user should login <a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">here</a>)<br />
-        <p><input id="cid-box" type="text" value="Candidate ID"></p>
-        <p><input id="passcode-box" type="text" value="Passcode"></p>
+        <section class="take-start-card">
+            <p class="mb-3">
+                Enter your CID and passcode below.
+                Registered users can
+                <a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">log in here</a>.
+            </p>
 
-        <button>Start</button>
+            <div class="row g-2 align-items-end">
+                <div class="col-12 col-md-5">
+                    <label class="form-label" for="cid-box">Candidate ID</label>
+                    <input id="cid-box" class="form-control" type="text" value="Candidate ID">
+                </div>
+                <div class="col-12 col-md-5">
+                    <label class="form-label" for="passcode-box">Passcode</label>
+                    <input id="passcode-box" class="form-control" type="text" value="Passcode">
+                </div>
+                <div class="col-12 col-md-2 d-grid">
+                    <button id="start-candidate-btn" class="btn btn-primary" type="button">Start</button>
+                </div>
+            </div>
+        </section>
 
         <script type="text/javascript">
             $(document).ready(function () {
-                window.location.search.substr(1).split("&").forEach((item) =>
-                    {
-                        s = item.split("=");
-                        if (s[0] == "cid") {
-                            $("#cid-box").val(s[1]);
-
-                        }
-                        if (s[0] == "passcode") {
-                            $("#passcode-box").val(s[1]);
-                        }
-                    });
-
-
-                $("#cid-box, #passcode-box").keypress(function(e) {
-                        // Enter pressed?
-                    console.log(e)
-                    if(e.which == 10 || e.which == 13) {
-                        $("button").click();
+                window.location.search.substr(1).split("&").forEach((item) => {
+                    const s = item.split("=");
+                    if (s[0] === "cid") {
+                        $("#cid-box").val(s[1]);
+                    }
+                    if (s[0] === "passcode") {
+                        $("#passcode-box").val(s[1]);
                     }
                 });
 
-                $("button").click(() => {
-                    let cid = $("#cid-box").val();
-                    let passcode = $("#passcode-box").val();
+                $("#cid-box, #passcode-box").keypress(function (e) {
+                    if (e.which === 10 || e.which === 13) {
+                        $("#start-candidate-btn").click();
+                    }
+                });
+
+                $("#start-candidate-btn").click(() => {
+                    const cid = $("#cid-box").val();
+                    const passcode = $("#passcode-box").val();
 
                     if (Number.isInteger(parseInt(cid))) {
                         window.location.replace("{% url 'atlas:collection_case_view_take' pk=collection.pk case_number=0 cid='0000000' passcode='ZZZZZZ' %}".replace("0000000", cid).replace("ZZZZZZ", passcode));
                     } else {
-                        alert("Please enter a valid Candidate ID (CID).")
+                        alert("Please enter a valid Candidate ID (CID).");
                     }
                 });
             });