Improve pacing and sequence of information in the broadcast tour

This commit refines which information we show on each page.

Specifically we’re
- adding some wording (‘at exactly the same time’) to try to communicate
  the immediacy
- giving the ‘loud noises’ message it’s own screen to really draw
  attention to it
- moving the ‘no phone numbers bit’ later in the journey, and
  experimenting with explaining why that is, to make it clearer how it’s
  different to a text message

app/templates/views/broadcast/tour/2.html

@@ -3,8 +3,8 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  In an emergency, you can broadcast an alert to every mobile phone in
-  the affected area.
+  In an emergency, broadcast an alert to every mobile phone in
+  the affected area at exactly the same time.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -15,12 +15,9 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          In an emergency, you can broadcast an alert to every mobile phone in
-          the affected&nbsp;area.
+          In an emergency, broadcast an alert to every mobile phone in
+          the affected area at exactly the same time.
         </h1>
-        <p class="govuk-body heading-medium">
-          You do not need to know people’s phone&nbsp;numbers.
-        </p>
         <p class="govuk-body heading-medium govuk-!-margin-bottom-6">
           <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=3) }}'>
             Continue

app/templates/views/broadcast/tour/3.html

@@ -3,7 +3,7 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  An emergency alert looks a bit like a text message.
+  The phone will make a loud alarm noise, even if it’s set on silent.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
@@ -14,12 +14,8 @@
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          An emergency alert looks a bit like a text&nbsp;message.
+          The phone will make a loud alarm noise, even if it’s set on silent.
         </h1>
-        <p class="govuk-body heading-medium">
-          It also makes a loud alarm noise, even if the phone is set
-          on silent.
-        </p>
         <p class="govuk-body heading-medium">
           <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=4) }}'>
             Continue
@@ -28,6 +24,7 @@
       </div>
       <div class="govuk-grid-column-one-half">
         <img src="{{ asset_url('images/broadcast-tour/3.png') }}" alt="">
+        <link rel="preload" href="{{ asset_url('images/broadcast-tour/4.png') }}" as="image">
       </div>
     </div>
   </div>

app/templates/views/broadcast/tour/4.html

@@ -3,40 +3,32 @@
 {% extends "admin_template.html" %}
 
 {% block per_page_title %}
-  You’re in training mode.
+  An alert looks a bit like a text message.
 {% endblock %}
 
 {% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
 
 {% block content %}
 
-  <div class="navigation-service">
-    <div class="navigation-service-name govuk-!-font-weight-bold">
-      {{ current_service.name }} <span class="navigation-service-type--training">Training</span>
-    </div>
-  </div>
-
-  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+  <div class="banner-tour banner-tour-no-fixed-height govuk-!-margin-top-0">
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
+      <div class="govuk-grid-column-one-half">
         <h1 class="heading-medium">
-          You’re in training mode.
+          An alert looks a bit like a text message.
         </h1>
         <p class="govuk-body heading-medium">
-          There’s no risk of broadcasting a real alert.
+          It’s broadcast directly from a mobile phone mast, so you don’t
+          need to know anyone’s phone number.
         </p>
         <p class="govuk-body heading-medium">
-          Get used to the system now, so you know what to do in an&nbsp;emergency.
-        </p>
-        <p class="govuk-body heading-medium">
-          When you’re ready, you can turn off training mode.
-        </p>
-        <p class="govuk-body heading-medium">
-          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
-            Continue to dashboard
+          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".broadcast_tour", service_id=current_service.id, step_index=5) }}'>
+            Continue
           </a>
         </p>
       </div>
+      <div class="govuk-grid-column-one-half">
+        <img src="{{ asset_url('images/broadcast-tour/4.png') }}" alt="">
+      </div>
     </div>
   </div>
 

app/templates/views/broadcast/tour/5.html

@@ -0,0 +1,43 @@
+{% from "components/banner.html" import banner_wrapper %}
+
+{% extends "admin_template.html" %}
+
+{% block per_page_title %}
+  You’re in training mode.
+{% endblock %}
+
+{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
+
+{% block content %}
+
+  <div class="navigation-service">
+    <div class="navigation-service-name govuk-!-font-weight-bold">
+      {{ current_service.name }} <span class="navigation-service-type--training">Training</span>
+    </div>
+  </div>
+
+  <div class="banner-tour banner-tour-no-fixed-height banner-tour-with-service-name">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="heading-medium">
+          You’re in training mode.
+        </h1>
+        <p class="govuk-body heading-medium">
+          There’s no risk of broadcasting a real alert.
+        </p>
+        <p class="govuk-body heading-medium">
+          Get used to the system now, so you know what to do in an&nbsp;emergency.
+        </p>
+        <p class="govuk-body heading-medium">
+          When you’re ready, you can turn off training mode.
+        </p>
+        <p class="govuk-body heading-medium">
+          <a class="govuk-link govuk-link--no-visited-state" href='{{ url_for(".service_dashboard", service_id=current_service.id) }}'>
+            Continue to dashboard
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+{% endblock %}