{% extends "regulations/generic_universal.html" %}
{% block title %}About eRegulations{% endblock %}
{% load static from staticfiles %}
{% load macros %}

{% comment %}
    Application about page
{% endcomment %}

{% block body %}

<header id="site-header" class="reg-header">
    {% include "regulations/main-header.html" %}
</header>

<div class="about-content wrap">

    <div class="title-hero">
        <div class="inner-wrap group">
          <h2 class="hero-heading">About eRegulations</h2>
        </div> <!-- /.inner-wrap -->
    </div> <!-- /.hero -->

    {% block about-intro %}
    <section class="about-section group" id="about-intro">
    <div class="inner-wrap group">
        <div class="content-primary column-l">
            <p>eRegulations makes regulations <a href="#read" class="standard">easier to read</a> and <a href="#navigation" class="standard">navigate</a>. It
            clarifies regulations by bringing <a href="#related-info">related information</a> and <a href="#timeline" class="standard">regulatory history</a>
            to the forefront. It is a work in progress by the
            {% external_link url="http://consumerfinance.gov" text="Consumer Financial Protection Bureau" %}
            and
            {% external_link url="https://18f.gsa.gov" text="18F" %};
            it is a public domain work of the United States Government.</p>
        </div>

        <div class="content-secondary column-r well dev-well">
            <span class="cf-icon cf-icon-github"></span><span class="icon-text">Github</span>
            <h3>Developers</h3>
            <p>eRegulations is an open source project. Visit 
              {% external_link url="https://eregs.github.io/" text="the project repository" %}
              to learn more and contribute.</p>
        </div>
    </div>
    <div id="read" class="inner-wrap easy-read group">
        <h3>Easier to read</h3>

        <div class="content-secondary column-r bump">
            <p><strong>Clear typography</strong> makes regulations legible and easy to scan.</p>
            <p><strong>Responsive design</strong> adapts the tool to fit to your screen.</p>
            <img src="{%static "regulations/img/responsive.png" %}" class="s-bump about-screenshot responsive-img" alt="Responsive screens icons">
        </div>

        <div class="content-primary column-l">
            <img src="{%static "regulations/img/easy-01.png" %}" class="s-bump about-screenshot" alt="eRegulations application screenshot">
        </div>
    </div>
    </section>
    {% endblock %}
    {% block about-navigation %}
    <section class="about-section group" id="navigation">
        <div class="inner-wrap">
        <h3>Easy to navigate</h3>

        <div class="column-3">
            <div class="easy-nav">
            <span class="cf-icon cf-icon-table-of-contents icon-callout"></span>
            <p>Persistent <strong>table of contents</strong> for fast access to any section of the regulation.</p>
            <ul class="bullet">
                <li>Organized by subpart and section of the regulation</li>
                <li>Section you are in stays highlighted at all times</li>
                <li>Can be collapsed to increase space for the regulation text</li>
            </ul>
            </div> <!-- /.easy-nav -->
        </div>

        <div class="column-3">
            <div class="easy-nav">
            <span class="cf-icon cf-icon-history icon-callout"></span>
            <p><strong>Regulation timeline</strong> shows recent revisions of the regulation organized by effective date.</p>

            <p class="learn-more"><a href="#timeline" class="go shrink">Learn more in Regulation History</a></p>
            </div> <!-- /.easy-nav -->

            <div class="easy-nav">
            <span class="icon-callout">§</span>
            <p><strong>Wayfinding in the header</strong> makes it easy to know where you are in the regulation and what revision you’re viewing.</p>
            </div> <!-- /.easy-nav -->
        </div>

        <div class="column-3">
            <div class="easy-nav">
            <span class="cf-icon cf-icon-search icon-callout"></span>
            <p><strong>Search</strong> function to find where specified text appears in a regulation.</p>
            <ul class="bullet">
                <li>Search in past or future revisions of a regulation</li>
                <li>Preview result context on the results page</li>
                <li>Highlighting of search terms on results page</li>
            </ul>
            </div> <!-- /.easy-nav -->
        </div>

        <img src="{%static "regulations/img/nav-wayfinding.gif" %}" class="bump responsive-img" alt="eRegulations navigation screenshot">
    </div>
    </section>
    {% endblock %}

    {% block about-related-info %}
    <section class="about-section group" id="related-info">
        <div class="inner-wrap">
        <h3>Related information</h3>

        <div class="content-primary column-r">
            <img src="{%static "regulations/img/related-01.png" %}" alt="eRegulations defined terms, linked references, and official interpretation screenshot">
            <img src="{%static "regulations/img/related-02.png" %}" class="bump" alt="eRegulations section-by-section analysis screenshot">
        </div>

        <div class="content-secondary column-l">
            <ol class="about-ol">
                <li><strong>Defined terms</strong> are highlighted in the text and displayed in the right sidebar so you can keep your place.</li>
                <li>References to other parts of the regulation are <strong>linked</strong>.</li>
                <li><strong>Official interpretations</strong> from Supplement I are brought inline with the regulation for easy access and comparisons.</li>
                <li><strong>Section-by-section analysis</strong> from the preamble of Federal Register notices is available directly in the tool.
                    <ul class="bullet">
                        <li>Read in-depth analysis of changes to the regulation</li>
                        <li>Understand the reasoning behind those changes</li>
                    </ul>
                <small class="small-disclaimer">Limited section-by-section available. Check the Federal Register for more.</small></li>
            </ol>
        </div>

    </div>
    </section>
    {% endblock %}

    {% block about-timeline %}
    <section class="about-section group" id="timeline">
        <div class="inner-wrap">
        <h3>Regulation timeline</h3>

        <div class="content-secondary column-l">
            <img src="{%static "regulations/img/regtimeline-01.png" %}" class="s-bump" alt="eRegulations timeline navigation screenshot">
        </div>

        <div class="content-primary column-r">
            <p class="about-timeline">The <strong>regulation timeline</strong> shows recent revisions of the regulation organized by latest effective date.</p>

            <ol class="about-ol bump">
                <li>The <strong>date picker</strong> allows users to find what revision was effective on a specific date.</li>
                <li><strong>Federal Register notice(s)</strong> associated with a revision are presented and organized by publication date. These links will
                take you to the notice on the Office of the Federal Register’s website.</li>
                <li><strong>Compare</strong> any two revisions of the regulation, word for word, by selecting a date in the menu.</li>
            </ol>

            <img src="{%static "regulations/img/regtimeline-02.png" %}" alt="eRegulations revision comparison screenshot">
        </div>
    </div>
    </section>
    {% endblock %}

</div>

{% include "regulations/full_footer.html" %}

{% block endscripts %}
{% endblock %}
{% endblock %}
