Update prototype v3

app/assets/sass/main.scss

@@ -11,3 +11,18 @@
 .nhsuk-summary-list__actions {
   border-bottom: none;
 }
+
+.nhsuk-phase-banner {
+  padding: 10px 0;
+  border-bottom: 1px solid #d8dde0;
+}
+.nhsuk-phase-banner__content {
+  display: flex;
+  align-items: center;
+}
+.nhsuk-phase-banner__content .nhsuk-tag {
+  margin-right: 10px;
+}
+.nhsuk-phase-banner__text {
+  margin: 0;
+}

app/views/index.html

@@ -1,7 +1,7 @@
 <!-- Use this page as the index for your project -->
 <!-- ADDING CUSTOM CSS - Add your custom CSS or Sass in /app/assets/sass/main.scss -->
 <!-- Extends the layout from /views/layout.html -->
-{% extends 'layouts/layout_home.html' %}
+{% extends "layouts/layout_home.html" %}
 
 <!-- Set the page title -->
 {% block pageTitle %}
@@ -26,40 +26,40 @@ <h1 class="nhsuk-u-margin-bottom-4">Check if you need a lung scan online prototy
 {% block content %}
 <div class="nhsuk-grid-row">
   <div class="nhsuk-grid-column-two-thirds">
-    
+
     <!-- Prototype v3 -->
     <h2>Prototype version 3.0 - pre-pilot</h2>
     <p class="nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-2">Last updated: 16 April 2026</p>
     <p>Multiple changes have been made to v3, including major revisions to the tobacco smoking screens.</p>
     <a class="nhsuk-button nhsuk-button--secondary" href="/prototype_v3/start-page">
       Open prototype
     </a>
-    
+
     <!-- Section break -->
     <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
-    
+
     <!-- Prototype v2 -->
     <h2>Prototype version 2.0 - pre-pilot</h2>
     <p class="nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-2">Last updated: 12 November 2025</p>
     <p>This prototype is to be used for testing during the pre-pilot phase of the service.</p>
     <a class="nhsuk-button nhsuk-button--secondary" href="/prototype_v2/start-page">
       Open prototype
     </a>
-    
+
     <!-- Section break -->
     <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
-    
+
     <!-- Prototype v1 -->
     <h2>Prototype version 1.0</h2>
     <p class="nhsuk-body-s nhsuk-u-secondary-text-colour nhsuk-u-margin-bottom-2">Last updated: 31 July 2025</p>
     <p>This is the first version of our prototype.</p>
     <a class="nhsuk-button nhsuk-button--secondary" href="/prototype_v1/start-page">
       Open prototype
     </a>
-    
+
     <!-- Section break -->
     <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
-    
+
     <!-- Design History -->
     <h3>Design history</h3>
     <p>These are our design history posts and new ones will be added as they are published.</p>
@@ -71,24 +71,24 @@ <h3>Design history</h3>
       <li>11 August 2025 - <a href="https://design-history.prevention-services.nhs.uk/lung-health-check/2025/08/lung-health-check-prototype/">Designing and testing a prototype</a></li>
       <li>9 June 2025 - <a href="https://design-history.prevention-services.nhs.uk/lung-health-check/2025/06/health-assessments-discovery/">Health assessments discovery</a></li>
     </ul>
-    
+
     <!-- Section break -->
     <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
-    
+
     <!-- Design Standards -->
     <h3>Design standards</h3>
     <p>We use the <a href="https://service-manual.nhs.uk/">NHS Design Principles</a> and <a href="https://www.gov.uk/service-manual/service-standard">GDS Service Standards</a> to guide our work and ensure that the services we are delivering are equitable and inclusive.</p>
-    
+
     <!-- Section break -->
     <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
-    
+
     <!-- Key links -->
     <h3>Key links</h3>
     <ul class="nhsuk-list">
       <li><a href="https://github.com/NHSDigital/prototype-lung-health-check">Lung health check online prototype on Github</a></li>
       <li><a href="https://service-manual.nhs.uk/design-system/prototyping">Getting started with prototyping</a></li>
     </ul>
-    
+
   </div>
 </div>
-{% endblock %}
+{% endblock %}

app/views/layout.html

@@ -5,60 +5,42 @@
 -->
 <!-- Extends the prototype kit template which in turn extends the NHS.UK frontend template -->
 {% extends "prototype-kit-template.njk" %}
-{% from "tag/macro.njk" import tag %}
-{% from "panel/macro.njk" import panel %}
 
 {% block head %}
  <!-- Add your custom CSS or Sass in /app/assets/sass/main.scss -->
 <link href="/assets/sass/main.css" rel="stylesheet">
-<style>
-  .nhsuk-phase-banner {
-    padding: 10px 0;
-    border-bottom: 1px solid #d8dde0;
-  }
-  .nhsuk-phase-banner__content {
-    display: flex;
-    align-items: center;
-  }
-  .nhsuk-phase-banner__content .nhsuk-tag {
-    margin-right: 10px;
-  }
-  .nhsuk-phase-banner__text {
-    margin: 0;
-  }
-</style>
 {% endblock %}
 
 <!-- Set the page title -->
 {% block pageTitle %}
-Check if you need a lung scan
+{{ serviceName }} - NHS
 {% endblock %}
 
 <!-- Edit the header -->
 <!-- Header code examples can be found at https://service-manual.nhs.uk/design-system/components/header -->
 {% block header %}
 {{ header({
-logo: {
-href: "/",
-ariaLabel: "Check if you need a lung scan"
-},
-service: {
-text: "Check if you need a lung scan",
-href: "/"
-},
-account: {
-items: [
-{
-text: "Alex Smith",
-href: "#",
-icon: true
-},
-{
-text: "Log out",
-href: "/prototype_v3/start-journey"
-}
-]
-} if data['logged-in']
+  logo: {
+    href: "/",
+    ariaLabel: "Check if you need a lung scan"
+  },
+  service: {
+    text: "Check if you need a lung scan",
+    href: "/"
+  },
+  account: {
+    items: [
+      {
+        text: "Alex Smith",
+        href: "#",
+        icon: true
+      },
+      {
+        text: "Log out",
+        href: "/prototype_v3/start-journey"
+      }
+    ]
+  } if data['logged-in']
 }) }}
 
 <!-- Phase banner (inside header block) -->
@@ -70,8 +52,7 @@
         classes: "nhsuk-tag--blue"
       }) }}
       <p class="nhsuk-phase-banner__text nhsuk-body-s">
-  We are testing a new service – your <a class="nhsuk-link" href="https://feedback.digital.nhs.uk/jfe/form/SV_d4MPGuH486oxASW" target="_blank" rel="noopener noreferrer">feedback</a> will help us to improve it.
-</p>
+        We are testing a new service – your <a class="nhsuk-link" href="https://feedback.digital.nhs.uk/jfe/form/SV_d4MPGuH486oxASW" target="_blank" rel="noopener noreferrer">feedback</a> will help us to improve it.
       </p>
     </div>
   </div>
@@ -82,48 +63,46 @@
 <!-- Footer code examples can be found at https://service-manual.nhs.uk/design-system/components/footer -->
 {% block footer %}
 {{ footer({
-meta: {
-items: [
-{
-href: "/prototype_v3/accessibility-statement",
-text: "Accessibility statement"
-},
-{
-href: "/prototype_v3/contact-us",
-text: "Contact us"
-},
-{
-href: "/prototype_v3/cookies",
-text: "Cookies"
-},
-{
-href: "/prototype_v3/privacy-policy",
-text: "Privacy policy"
-},
-{
-href: "/prototype_v3/terms-of-use",
-text: "Terms of use"
-}
-]
-}
+  meta: {
+    items: [
+      {
+        href: "/prototype_v3/accessibility-statement",
+        text: "Accessibility statement"
+      },
+      {
+        href: "/prototype_v3/contact-us",
+        text: "Contact us"
+      },
+      {
+        href: "/prototype_v3/cookies",
+        text: "Cookies"
+      },
+      {
+        href: "/prototype_v3/privacy-policy",
+        text: "Privacy policy"
+      },
+      {
+        href: "/prototype_v3/terms-of-use",
+        text: "Terms of use"
+      }
+    ]
+  }
 }) }}
 
-<div class="nhsuk-footer__testing-links" style="background-color: #f0f4f5; border-top: 1px solid #d8dde0;">
+<div class="nhsuk-footer__testing-links">
   <div class="nhsuk-width-container">
-    <div style="padding: 20px 0;">
-      <h3 style="margin-top: 0; margin-bottom: 15px; font-size: 24px;">For testing</h3>
-      <ul class="nhsuk-footer__list" style="list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 20px;">
-        <li class="nhsuk-footer__list-item" style="margin-bottom: 8px;">
-          <a class="nhsuk-footer__list-item-link" href="/prototype_v3/index-allpages" style="color: #000000; font-weight: bold;">Pages index</a>
-        </li>
-        <li class="nhsuk-footer__list-item" style="margin-bottom: 8px;">
-          <a class="nhsuk-footer__list-item-link" href="/prototype_v3/skip-to-tobacco" style="color: #000000; font-weight: bold;">Skip to tobacco - current smoker (testing)</a>
-        </li>
-        <li class="nhsuk-footer__list-item" style="margin-bottom: 8px;">
-          <a class="nhsuk-footer__list-item-link" href="/prototype_v3/skip-to-tobacco-former" style="color: #000000; font-weight: bold;">Skip to tobacco - former smoker (testing)</a>
-        </li>
-      </ul>
-    </div>
+    <h3 class="nhsuk-heading-m nhsuk-u-margin-top-5">For testing</h3>
+    <ul class="nhsuk-footer__list nhsuk-u-margin-bottom-5 nhsuk-u-padding-bottom-5">
+      <li class="nhsuk-footer__list-item">
+        <a class="nhsuk-footer__list-item-link nhsuk-u-font-weight-bold" href="/prototype_v3/index-allpages">Pages index</a>
+      </li>
+      <li class="nhsuk-footer__list-item">
+        <a class="nhsuk-footer__list-item-link nhsuk-u-font-weight-bold" href="/prototype_v3/skip-to-tobacco">Skip to tobacco - current smoker (testing)</a>
+      </li>
+      <li class="nhsuk-footer__list-item">
+        <a class="nhsuk-footer__list-item-link nhsuk-u-font-weight-bold" href="/prototype_v3/skip-to-tobacco-former">Skip to tobacco - former smoker (testing)</a>
+      </li>
+    </ul>
   </div>
 </div>
 {% endblock %}
@@ -132,4 +111,4 @@ <h3 style="margin-top: 0; margin-bottom: 15px; font-size: 24px;">For testing</h3
   {{ super() }}
   <script type="module" src="/assets/javascript/main.js"></script>
   {% block pageScripts %}{% endblock %}
-{% endblock %}
+{% endblock %}

app/views/layouts/form.html

@@ -3,14 +3,13 @@
 {# {% set mainClasses = "nhsuk-main-wrapper--s" %} #}
 {% set hub = "Services" %}
 
-
 {% block pageTitle -%}
-  {%- if flash.error %}Error: {% endif %}{{ pageHeading }} - NHS Health Check online - NHS
+  {%- if flash.error %}Error: {% endif %} {{ pageHeading }} - {{ serviceName }} - NHS
 {%- endblock %}
 
 {% block beforeContent %}
 
-  {% if data.webOrNative == 'native' %}
+  {% if data.webOrNative == "native" %}
     {% if backLink === true or backLink !== false %}
       {% if containerFullWidth === true %}
         <div class="nhsuk-width-container">
@@ -27,9 +26,9 @@
 
   {% else %}
     {{ backLink({
-      "text": "Back",
-      "classes": "",
-      "attributes": {
+      text: "Back",
+      classes: "",
+      attributes: {
           onclick: "history.back()"
       }
     }) }}
@@ -43,12 +42,12 @@
 
       {% if flash.error %}
         {{ errorSummary({
-          "titleText": "There is a problem",
-          "errorList": flash.error
+          titleText: "There is a problem",
+          errorList: flash.error
         }) }}
       {% endif %}
-    
-      <form action="{{formAction | safe }}" method="{{ formMethod or 'post' }}" novalidate>
+
+      <form action="{{ formAction | safe }}" method="{{ formMethod or 'post' }}" novalidate>
 
         {% block formContent %}
         {% endblock %}

app/views/layouts/layout_home.html

@@ -1,6 +1,6 @@
-<!-- 
+<!--
   This is the main layout where you can:
-    - change the header and footer 
+    - change the header and footer
     - add custom CSS and JavaScript
 -->
 
@@ -21,10 +21,10 @@
 {{ header({
   logo: {
     href: "/",
-    ariaLabel: "Check if you need a lung scan"
+    ariaLabel: serviceName
   },
   service: {
-    text: "Check if you need a lung scan",
+    text: serviceName,
     href: "/"
   }
 }) }}