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/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 %}