Ayr 441/start screen

app/main/routes.py

@@ -146,6 +146,11 @@ def record():
     return render_template("record.html", consignment_files=record_details)
 
 
+@bp.route("/start-page", methods=["GET"])
+def start_page():
+    return render_template("start-page.html")
+
+
 @bp.route("/browse", methods=["GET"])
 def browse():
     return render_template("browse.html")
@@ -201,6 +206,11 @@ def privacy():
     return render_template("privacy.html")
 
 
+@bp.route("/how-to-use-this-service", methods=["GET"])
+def how_to_use():
+    return render_template("how-to-use-this-service.html")
+
+
 @bp.app_errorhandler(HTTPException)
 def http_exception(error):
     return render_template(f"{error.code}.html"), error.code

app/static/src/css/start-page.css

@@ -0,0 +1,38 @@
+/* css for start-page */
+
+.govuk-button--start {
+    margin-left: 3px;
+    font-weight: 700;
+    font-size: 1.5rem;
+    display: inline-flex;
+    justify-content: center;
+    min-height: auto;
+    margin-top: 20px;
+    margin-bottom: 30px;
+}
+
+.govuk-button {
+    position: relative;
+    padding-top: 8px;
+    padding-left: 7px;
+    padding-right: 10px;
+    padding-bottom: 7px;
+    text-align: center;
+    border: 2px solid transparent;
+}
+
+p.govuk-body {
+    margin-bottom: -40px;
+    display: inline-block;
+}
+
+.govuk-heading-l {
+    margin-bottom: 30px;
+    margin-top: -40px;
+    font-weight: 700;
+}
+
+.govuk-heading-m {
+    margin-bottom: 20px;
+    font-weight: 700;
+}

app/templates/base.html

@@ -17,6 +17,8 @@
   <!--[if IE 8]><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='govuk-frontend-ie8-4.7.0.min.css') }}" /><![endif]-->
    <!-- custom css stylesheet -->
    <link rel="stylesheet" type="text/css" src="{{ url_for('static', filename='poc-search.css') }}" />
+   <link rel="stylesheet" type="text/css" src="{{ url_for('static', filename='start-page.css') }}" />
+
    <!-- custom css stylesheet end -->
   {% assets "css" %}<link href="{{ ASSET_URL }}" rel="stylesheet">{% endassets %}
 {% endblock %}
@@ -163,6 +165,7 @@
   }) }}
 {% endblock %}
 
+
 {% block bodyEnd %}
   <!--[if gt IE 8]><!-->
   <script src="{{ url_for('static', filename='govuk-frontend-4.7.0.min.js') }}"> </script>

app/templates/main/how-to-use-this-service.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block pageTitle %}How to use this service – {{config['SERVICE_NAME']}} – GOV.UK{% endblock %}
+
+{% block beforeContent %}
+  {{ super() }}
+
+{% endblock %}
+{% block content %}
+
+<h1 class="govuk-heading-l">How to use this service</h1>
+
+{% endblock %}

app/templates/main/search.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {%- from 'govuk_frontend_jinja/components/radios/macro.html' import govukRadios -%}
-{%- from 'govuk_frontend_jinja/components/inset-text/macro.html' import govukInsetText -%}
+
 
 
 

app/templates/start-page.html

@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+{%- from 'govuk_frontend_jinja/components/inset-text/macro.html' import govukInsetText -%}
+
+{% block pageTitle %}Start page – {{config['SERVICE_NAME']}} – GOV.UK{% endblock %}
+
+{% block beforeContent %}
+  {{ super() }}
+
+{% endblock %}
+
+{% block content %}
+
+<div class="govuk-width-container">
+    <main class="govuk-main-wrapper">
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h1 class="govuk-heading-l">Access your records</h1>
+          <p class="govuk-body">Use this service to access digital records at The National Archives.</p>
+          <a href="#" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
+            Start now
+            <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+              <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
+            </svg></a>
+            <div class="govuk-!-padding-bottom-7"></div>
+            <h2 class="govuk-heading-m">Before you start</h2>
+            <p class="govuk-body">This service is in private beta. Please refer to our <a href="{{ url_for('main.how_to_use') }}" class="govuk-link">How to use this service</a> page
+                for information about using Access Your Records.</p>
+        </div>
+      </div>
+    </main>
+  </div>
+  {% endblock %}

pyproject.toml

@@ -45,6 +45,7 @@ pur = "7.3.1"
 pytest-cov = "4.1.0"
 safety = "2.3.4"
 pytest-flask = "^1.2.0"
+pre-commit = "^3.5.0"
 
 [build-system]
 requires = ["poetry-core"]