Files
notifications-admin/app/templates/views/tour/3.html
Chris Hill-Scott 47b86e70df Use SVG images for tour
SVG images will look sharper and scale more cleanly. However they are
not supported on older browsers[1]

> The <picture> element allows for fallback images when the browser
> doesn't support a specified image format.

`<picture>` is supported in the latest versions of Chrome, Firefox, IE
(Edge), Safari and Android, so all these browsers will get the SVG
version.

Older browsers will fall back to the PNG version.

[1] http://caniuse.com/#feat=svg
[2] https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-as-img-picture
[3] http://caniuse.com/#feat=SVG
2016-04-04 16:55:06 +01:00

41 lines
1.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/banner.html" import banner_wrapper %}
{% block page_title %}
{{heading}} GOV.UK Notify
{% endblock %}
{% block maincolumn_content %}
{% call banner_wrapper(type='tour') %}
<h2 class="heading-large">Add recipients</h2>
<p>
Add recipients by uploading a .csv spreadsheet:
</p>
<p>
<picture>
<source
type="image/svg+xml"
srcset="/static/images/tour/{{ current_page }}.svg"
alt="A screenshot of a spreadsheet containing data about three people"
width="554" height="118"
>
<img
src="/static/images/tour/{{ current_page }}.png"
width="554" height="118"
alt="A screenshot of a spreadsheet containing data about three people"
>
</picture>
</p>
<p>
Developers, you can add data automatically using an API
</p>
<a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
Next
</a>
{% endcall %}
{% endblock %}