<commit_before>{% extends "layout.html" %}

{% block page_title %}
  GOV.UK prototype kit
{% endblock %}

{% block content %}

<main id="content" role="main">

  <div class="grid-row">
    <div class="column-two-thirds">
      <h1 class="heading-xlarge">
      	<span class="heading-secondary">Performance data for</span>
      	Services tagged with &ldquo;Transport&rdquo;
      </h1>
    </div>
    <div class="column-third">
      <br><br>
      <div class="notice">
        <i class="icon icon-file-download">
          <span class="visuallyhidden">Download file</span>
        </i>
        <strong class="bold-small">
          <a href="#">Download compiled data (CSV, 10kb)</a>
        </strong>
      </div>
    </div>
  </div>

  <div class="grid-row">
    <div class="time-period-selector">
      <ul>
        <li>View data for past</li>
        <li><a href="#">3 months</a></li>
        <li id="time-selected">6 months</li>
        <li><a href="#">1 year</a></li>
        <li><a href="#">2 years</a></li>
      </ul>  
    </div>  
  </div>

  <!-- summary -->

  <div class="grid-row data-summary">
    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xlarge">78</h2>
        <p class="bold-xsmall">services in total
        <br><a href="#service-list">View full list</a></p>
      </div>
    </div>
    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xlarge">836k</h2>
        <p class="bold-xsmall">transactions handled
        <br><a href="#transactions">More info</a></p>
      </div>
    </div> 
    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xlarge">72%</h2>
        <p class="bold-xsmall">of transactions performed online
        <br><a href="#channel-breakdown">More info</a></p>
      </div>
    </div>   
  </div>

  <hr>

  <!-- channel breakdown - need to change service data to be a table layout so numbers can align correctly -->

  <div class="grid-row" id="channel-breakdown">

    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xxlarge">72%</h2>
        <p class="bold-medium">of transactions were performed online</p>
        <p class="lede"><span class="data-increase-arrow">&#9650;</span> +1.2% increase</p>
        <p class="font-xsmall">
          <span class="bold-xsmall">Breakdown</span><br>
          72% online<br>
          15% paper<br>
          10% phone<br>
          8% face to face<br>
        </p>
      </div>
    </div>  

    <div class="column-two-thirds">
      <h4 class="heading-small"><span class="data-increase-arrow">&#9650;</span> Services with increasing online transactions</h4>
      <ul class="list">
        <li>+10% <a href="#">Apply for a provisional driving license</a></li>
        <li>+9% <a href="#">Vehicle tax checks by individuals</a></li>
        <li>+8% <a href="#">Vehicle tax renewals</a></li>
        <li>+7% <a href="#">Driving license checks by third parties</a></li>
        <li>+6% <a href="#">Reports of destroyed or damaged vehicles</a></li>
      </ul>
      <br>
      <h4 class="heading-small"><span class="data-decrease-arrow">&#9660;</span> Services with decreasing online transactions</h4>
      <ul class="list">
        <li>&minus;10% <a href="#">Driving instructor applications</a></li>
        <li>&minus;9% <a href="#">Replace a tax disc</a></li>
        <li>&minus;8% <a href="#">Digital tachograph card applications</a></li>
        <li>&minus;7% <a href="#">HGV and PSV test bookings</a></li>
        <li>&minus;6% <a href="#">Report death of driver</a></li>
      </ul>
    </div> 

  </div>  

  <br>

  <div class="grid-row">
    <div class="column-two-thirds">
      <details>
        <summary><span class="summary font-xsmall">How is this data calculated?</span></summary>
        <div class="panel panel-border-narrow">
          <p>Data for online users is collected via Google Analytics. Other channels are collected by etc. etc.</p>
        </div>
      </details>
    </div>
  </div>  

  <hr>

  <!-- transactions info -->

  <div class="grid-row" id="transactions">

    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xxlarge">836k</h2>
        <p class="bold-medium">transactions handled in total</p>
      </div>
    </div>  

    <div class="column-two-thirds">
      <h4 class="heading-small">Services with highest total transactions</h4>
      <ul class="list">
        <li>1.2m <a href="#">Apply for a provisional driving license</a></li>
        <li>987k <a href="#">Vehicle tax checks by individuals</a></li>
        <li>880k <a href="#">Vehicle tax renewals</a></li>
        <li>781k <a href="#">Driving license checks by third parties</a></li>
        <li>685k <a href="#">Reports of destroyed or damaged vehicles</a></li>
      </ul> 
      <br>

      <h4 class="heading-small">Services with lowest total transactions</h4>
      <ul class="list">
        <li>1,200 <a href="#">Driving instructor applications</a></li>
        <li>1,003 <a href="#">Replace a tax disc</a></li>
        <li>66 <a href="#">Digital tachograph card applications</a></li>
        <li>35 <a href="#">HGV and PSV test bookings</a></li>
        <li>5 <a href="#">Report death of driver</a></li>
      </ul>
    </div> 

  </div>

  <div class="grid-row">
    <div class="column-two-thirds">
      <details>
        <summary><span class="summary font-xsmall">How is this data calculated?</span></summary>
        <div class="panel panel-border-narrow">
          <p>Data for online users is collected via Google Analytics. Other channels are collected by etc. etc.</p>
        </div>
      </details>
    </div>
  </div> 

  <hr>

  <!-- full list of services -->

  <div class="grid-row" id="service-list">

    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xxlarge">78</h2>
        <p class="bold-medium">services tagged with "transport"</p>
      </div>
    </div> 

    <div class="column-two-thirds">
      <h4 class="bold-medium">Department of Transport</h4>
      <ul class="list">
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
      </ul>
      <h4 class="bold-medium">Department of something else</h4>
      <ul class="list">
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li><commit_msg>Tiny typographic change on theme page<commit_after>{% extends "layout.html" %}

{% block page_title %}
  GOV.UK prototype kit
{% endblock %}

{% block content %}

<main id="content" role="main">

  <div class="grid-row">
    <div class="column-two-thirds">
      <h1 class="heading-xlarge">
      	<span class="heading-secondary">Performance data for</span>
      	Services tagged with &ldquo;Transport&rdquo;
      </h1>
    </div>
    <div class="column-third">
      <br><br>
      <div class="notice">
        <i class="icon icon-file-download">
          <span class="visuallyhidden">Download file</span>
        </i>
        <strong class="bold-small">
          <a href="#">Download compiled data (CSV, 10kb)</a>
        </strong>
      </div>
    </div>
  </div>

  <div class="grid-row">
    <div class="time-period-selector">
      <ul>
        <li>View data for past</li>
        <li><a href="#">3 months</a></li>
        <li id="time-selected">6 months</li>
        <li><a href="#">1 year</a></li>
        <li><a href="#">2 years</a></li>
      </ul>  
    </div>  
  </div>

  <!-- summary -->

  <div class="grid-row data-summary">
    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xlarge">78</h2>
        <p class="bold-xsmall">services in total
        <br><a href="#service-list">View full list</a></p>
      </div>
    </div>
    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xlarge">836k</h2>
        <p class="bold-xsmall">transactions handled
        <br><a href="#transactions">More info</a></p>
      </div>
    </div> 
    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xlarge">72%</h2>
        <p class="bold-xsmall">of transactions performed online
        <br><a href="#channel-breakdown">More info</a></p>
      </div>
    </div>   
  </div>

  <hr>

  <!-- channel breakdown - need to change service data to be a table layout so numbers can align correctly -->

  <div class="grid-row" id="channel-breakdown">

    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xxlarge">72%</h2>
        <p class="bold-medium">of transactions were performed online</p>
        <p class="lede"><span class="data-increase-arrow">&#9650;</span> +1.2% increase</p>
        <p class="font-xsmall">
          <span class="bold-xsmall">Breakdown</span><br>
          72% online<br>
          15% paper<br>
          10% phone<br>
          8% face to face<br>
        </p>
      </div>
    </div>  

    <div class="column-two-thirds">
      <h4 class="heading-small"><span class="data-increase-arrow">&#9650;</span> Services with increasing online transactions</h4>
      <ul class="list">
        <li>+10% <a href="#">Apply for a provisional driving license</a></li>
        <li>+9% <a href="#">Vehicle tax checks by individuals</a></li>
        <li>+8% <a href="#">Vehicle tax renewals</a></li>
        <li>+7% <a href="#">Driving license checks by third parties</a></li>
        <li>+6% <a href="#">Reports of destroyed or damaged vehicles</a></li>
      </ul>
      <br>
      <h4 class="heading-small"><span class="data-decrease-arrow">&#9660;</span> Services with decreasing online transactions</h4>
      <ul class="list">
        <li>&minus;10% <a href="#">Driving instructor applications</a></li>
        <li>&minus;9% <a href="#">Replace a tax disc</a></li>
        <li>&minus;8% <a href="#">Digital tachograph card applications</a></li>
        <li>&minus;7% <a href="#">HGV and PSV test bookings</a></li>
        <li>&minus;6% <a href="#">Report death of driver</a></li>
      </ul>
    </div> 

  </div>  

  <br>

  <div class="grid-row">
    <div class="column-two-thirds">
      <details>
        <summary><span class="summary font-xsmall">How is this data calculated?</span></summary>
        <div class="panel panel-border-narrow">
          <p>Data for online users is collected via Google Analytics. Other channels are collected by etc. etc.</p>
        </div>
      </details>
    </div>
  </div>  

  <hr>

  <!-- transactions info -->

  <div class="grid-row" id="transactions">

    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xxlarge">836k</h2>
        <p class="bold-medium">transactions handled in total</p>
      </div>
    </div>  

    <div class="column-two-thirds">
      <h4 class="heading-small">Services with highest total transactions</h4>
      <ul class="list">
        <li>1.2m <a href="#">Apply for a provisional driving license</a></li>
        <li>987k <a href="#">Vehicle tax checks by individuals</a></li>
        <li>880k <a href="#">Vehicle tax renewals</a></li>
        <li>781k <a href="#">Driving license checks by third parties</a></li>
        <li>685k <a href="#">Reports of destroyed or damaged vehicles</a></li>
      </ul> 
      <br>

      <h4 class="heading-small">Services with lowest total transactions</h4>
      <ul class="list">
        <li>1,200 <a href="#">Driving instructor applications</a></li>
        <li>1,003 <a href="#">Replace a tax disc</a></li>
        <li>66 <a href="#">Digital tachograph card applications</a></li>
        <li>35 <a href="#">HGV and PSV test bookings</a></li>
        <li>5 <a href="#">Report death of driver</a></li>
      </ul>
    </div> 

  </div>

  <div class="grid-row">
    <div class="column-two-thirds">
      <details>
        <summary><span class="summary font-xsmall">How is this data calculated?</span></summary>
        <div class="panel panel-border-narrow">
          <p>Data for online users is collected via Google Analytics. Other channels are collected by etc. etc.</p>
        </div>
      </details>
    </div>
  </div> 

  <hr>

  <!-- full list of services -->

  <div class="grid-row" id="service-list">

    <div class="column-one-third">
      <div class="data">
        <h2 class="bold-xxlarge">78</h2>
        <p class="bold-medium">services tagged with "transport"</p>
      </div>
    </div> 

    <div class="column-two-thirds">
      <h4 class="heading-small">Department of Transport</h4>
      <ul class="list">
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
      </ul>
      <h4 class="heading-small">Department of something else</h4>
      <ul class="list">
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
        <li><a href="#">Name of service</a></li>
{'fraction_non_alphanumeric': 0.20005802988539098, 'fraction_numerical': 0.015377919628608733, 'mean_word_length': 2.588495575221239, 'pattern_counts': {'":': 0, '<': 659, '<?xml version=': 0, '>': 659, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6709003', 'n_tokens_mistral': 4715, 'n_tokens_neox': 4448, 'n_words': 1102}