darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 14:09:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Updating site to use USWDS styles (#509)

Browse Source 
* Updated header and footer
* Updated fonts
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Adjusted grid templating
* Added images to assets
* Update app/templates/components/uk_components/footer/template.njk

Co-authored-by: Steven Reilly <stvnrlly@users.noreply.github.com>
This commit is contained in:
Jonathan Bobel
2023-06-06 15:28:24 -04:00
committed by GitHub
parent ff350fee00
commit f342e0fb6c
152 changed files with 1094 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
app/templates/views/signedout.html
View File

@@ -11,8 +11,118 @@
{% block content %}
<div class="product-page-intro">
<div class="product-page-intro-wrapper" data-module="homepage">
<section aria-label="Introduction">
<div class="grid-container usa-section usa-section--dark padding-top-4 padding-bottom-5">
<div class="grid-row grid-gap display-flex flex-align-center">
<div class="tablet:grid-col-7">
<h1 class="font-serif-2xl usa-hero__heading">Send text messages to your users</h1>
<p class="font-sans-lg margin-bottom-5">Try U.S. Notify now if you work in federal, state, or local government.</p>
<div class="usa-button-group">
<a class="usa-button usa-button--big" href="{{ url_for('main.register' )}}">Create an account</a>
or <a class="usa__link margin-x-1" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
it before
</div>
</div>
<div class="tablet:grid-col-4 grid-offset-1">
<img src="{{ asset_url('images/product/proposition-illustration.png') }}"
alt="An illustration of notifications to a phone, a laptop, and a letter.">
</div>
</div>
</div>
</section>
<section class="grid-container usa-section">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-5 usa-prose">
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
Control your content
</h2>
<p>You do not need any technical knowledge to create message templates.</p>
</div>
<div class="tablet:grid-col-6 grid-offset-1">
<img src="{{ asset_url('images/product/01-templates-no-chrome.svg') }}"
alt="Example screenshot of adding a new text message template">
</div>
</div>
</section>
<section class="grid-container usa-section">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-5 usa-prose">
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
See how your messages perform
</h2>
<p>Track how many messages you’ve sent and find out which ones are not being delivered.</p>
</div>
<div class="tablet:grid-col-6 grid-offset-1">
<img src="{{ asset_url('images/product/02-reporting-no-chrome.svg') }}"
alt="A screenshot of U.S. Notify showing counts of emails and text messages sent">
</div>
</div>
</section>
<section class="grid-container usa-section border-top border-base-lighter">
<div class="grid-row grid-gap">
<h2 class="font-heading-xl margin-top-0 margin-bottom-3 bold">
Send messages manually or automatically
</h2>
</div>
<div class="grid-row grid-gap">
<div class="tablet:grid-col-6 usa-prose">
<p>Upload a spreadsheet of phone numbers and Notify sends the messages.</p>
<img src="{{ asset_url('images/product/03-spreadsheet-no-chrome.svg') }}"
alt="A screenshot of a spreadsheet with columns for email address, name and color">
</div>
<div class="tablet:grid-col-6 usa-prose">
<p>
Integrate the U.S. Notify API with your web&nbsp;application or
back office system.
</p>
<img src="{{ asset_url('images/product/04-api-no-chrome.svg') }}"
alt="A screenshot of some computer code with a notify.send_email function">
</div>
</div>
</section>
<section id="whos-using-notify" class="grid-container usa-section border-top border-base-lighter padding-top-4 padding-bottom-5">
<div class="grid-row grid-gap flex-column">
<h2 class="font-heading-xl display-flex flex-justify-center margin-top-0 bold">
Who’s using U.S. Notify
</h2>
<p class="display-flex flex-justify-center font-body-sm margin-bottom-3">
See the
<a class="usa-link margin-left-05" href="{{ url_for('main.performance') }}">list of services and
organizations</a>.
</p>
</div>
<div class="grid-row">
<div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
<span class="usa-sr-only">There are</span>
<div class="large-number">{{ counts.organisations|format_thousands }}</div>
<p class="font-body-lg">Organizations</p>
</div>
<div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
<span class="usa-sr-only">and</span>
<div class="large-number">{{ counts.services|format_thousands }}</div>
<p class="font-body-lg">Services</p>
<span class="usa-sr-only">using Notify.</span>
</div>
</div>
</section>
<section class="grid-container usa-section border-top border-base-lighter usa-prose">
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
The team
</h2>
<p class="usa-body">
U.S. Notify is built and maintained by the Public Benefits Studio, within the General Services Administration's
Technology Transformation Services.
</p>
<p class="usa-body">
<a class="usa-link" href="{{ url_for('main.support') }}">Contact us</a> if you have a
question or want
to give feedback.
</p>
</section>
<!-- <div class="product-page-intro"></div> -->
<!-- <div class="product-page-intro-wrapper" data-module="homepage">
<nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
</nav>
@@ -21,7 +131,7 @@
<h1>
Send text messages to your users
</h1>
<p class="govuk-body">
<p>
Try U.S. Notify now if you work in federal, state, or local government.
</p>
<div class="button-container">
@@ -50,13 +160,13 @@
<h2>
Control your content
</h2>
<p class="govuk-body">
You do not need any technical knowledge to create messages.
<p>
You do not need any technical knowledge to create message templates.
</p>
</div>
<div class="govuk-grid-column-one-half">
<img
src="{{ asset_url('images/product/01-templates-no-chrome.svg') }}"
src="{{ asset_url('images/product/01-templates.svg') }}"
alt="Example screenshot of adding a new text message template">
</div>
</div>
@@ -67,14 +177,14 @@
<h2>
See how your messages perform
</h2>
<p class="govuk-body">
<p>
Track how many messages you’ve sent and
find out which ones are not being delivered.
</p>
</div>
<div class="govuk-grid-column-one-half">
<img
src="{{ asset_url('images/product/02-reporting-no-chrome.svg') }}"
src="{{ asset_url('images/product/02-reporting.svg') }}"
alt="A screenshot of U.S. Notify showing counts of emails and text messages sent"
>
</div>
@@ -86,21 +196,21 @@
</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p class="govuk-body">
<p>
Upload a spreadsheet of phone&nbsp;numbers and Notify sends the messages.
</p>
<img
src="{{ asset_url('images/product/03-spreadsheet-no-chrome.svg') }}"
src="{{ asset_url('images/product/03-spreadsheet.svg') }}"
alt="A screenshot of a spreadsheet with columns for email address, name and color"
>
</div>
<div class="govuk-grid-column-one-half">
<p class="govuk-body">
<p>
Integrate the U.S. Notify API with your web&nbsp;application or
back office system.
</p>
<img
src="{{ asset_url('images/product/04-api-no-chrome.svg') }}"
src="{{ asset_url('images/product/04-api.svg') }}"
alt="A screenshot of some computer code with a notify.send_email function"
>
</div>
@@ -122,13 +232,13 @@
<span class="govuk-visually-hidden">using Notify.</span>
</div>
</div>
<!-- <p class="govuk-body">
<p>
See the
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.performance') }}">list of services and organizations</a>.
</p> -->
</p>
</div>
</div>
<!-- <div class="product-page-section">
<div class="product-page-section">
<div class="with-keyline bottom-gutter-2">
<h2>Pricing</h2>
<div class="govuk-grid-row bottom-gutter">
@@ -147,28 +257,28 @@
<p class="align-with-big-number-hint">
There’s no monthly charge, no setup fee and no&nbsp;procurement process.
</p>
<p class="govuk-body">Find out more about <a class="govuk-link govuk-link--no-visited-state" href="https://www.notifications.service.gov.uk/pricing">pricing</a>.
<p>Find out more about <a class="govuk-link govuk-link--no-visited-state" href="https://www.notifications.service.gov.uk/pricing">pricing</a>.
</p>
</div>
</div>
</div>
</div> -->
</div>
<div class="product-page-section">
<div class="govuk-grid-row bottom-gutter-2">
<div class="govuk-grid-row margin-bottom-">
<div class="govuk-grid-column-full">
<h2 class="with-keyline">
The team
</h2>
<p class="govuk-body">
<p>
U.S. Notify is built and maintained by the Public Benefits Studio, within the General Services Administration's Technology Transformation Services.
</p>
<p class="govuk-body">
<p>
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.support') }}">Contact us</a> if you have a question or want
to give feedback.
</p>
</div>
</div>
</div>
</div>-->
{% endblock %}