Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WD-9610 Rebrand Raspi download thank you #13712

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion templates/download/desktop/thank-you.html
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ <h1>Thank you for your contribution</h1>
{% endif %}
</div>
<div class="col">
{% include 'shared/_server-download-newsletter.html' %}
{% with returnUrl="/download/desktop", ga_event_title="Ubuntu Desktop download" %}
{% include 'shared/_download-newsletter.html' %}
{% endwith %}
</div>
</div>
</section>
Expand Down
278 changes: 107 additions & 171 deletions templates/download/raspberry-pi/thank-you.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,212 +8,148 @@

{% block meta_copydoc %}https://docs.google.com/document/d/1RXsLbMB-LJVwiG0gAi0HgVEJvZ9_GIU3ESLJ6KmBb54{% endblock meta_copydoc %}

{% block head_extra%}<meta name="robots" content="noindex" />{% endblock %}
{% block head_extra %}<meta name="robots" content="noindex" />{% endblock %}

{% block body_class %}is-paper{% endblock %}

{% block content %}

{% if version %}
<meta http-equiv="refresh" content="3;url={% if version==releases.latest.core_version %}https://cdimage.ubuntu.com/ubuntu-core/{{ version }}/stable/current/ubuntu-{{ architecture }}.img.xz{% else %}https://cdimage.ubuntu.com/releases/{{ version }}/release/ubuntu-{{ version }}-preinstalled-{{ architecture }}.img.xz{% endif %}">


{% endif %}

<section class="p-strip--suru-topped" style="overflow: visible;">
<div class="row u-vertically-center">
<div class="col-7">
<section class="p-strip is-shallow u-no-padding--bottom">
<div class="row--50-50">
<div class="col">
{% if version %}
<h1>Thank you for downloading<br />
<h1>Thank you for downloading<br class="u-hide--small" />
Ubuntu {% if version==releases.latest.core_version %}Core {% endif %}{{ version }}<br />
for Raspberry Pi</h1>
<p>Your download should start automatically. If it doesn't, <a href="{% if version==releases.latest.core_version %}https://cdimage.ubuntu.com/ubuntu-core/{{ version }}/stable/current/ubuntu-{{ architecture }}.img.xz{% else %}https://cdimage.ubuntu.com/releases/{{ version }}/release/ubuntu-{{ version }}-preinstalled-{{ architecture }}.img.xz{% endif %}">download now</a>.</p>
<p>Your download should start automatically. If it doesn't,
<a href="{% if version==releases.latest.core_version %}https://cdimage.ubuntu.com/ubuntu-core/{{ version }}/stable/current/ubuntu-{{ architecture }}.img.xz{% else %}https://cdimage.ubuntu.com/releases/{{ version }}/release/ubuntu-{{ version }}-preinstalled-{{ architecture }}.img.xz{% endif %}">download now</a>.<br />
{% with version=version, system=architecture, architecture=architecture %}
{% include "download/shared/_verify-checksums.html" %}
{% include "download/shared/_verify-checksums.html" %}
{% endwith %}
{% else %}
</p>
{% else %}
<h1>Thank you</h1>
<h4>However, you have not selected an image to download.</h4>
<p>Go to the <a href="/download/raspberry-pi">download page</a> to select an image.</p>
{% endif %}
</div>
<div class="col-5 u-hide--medium u-hide--small u-align--center">
{{
image(
url="https://assets.ubuntu.com/v1/9f09965f-1+-+Download+and+install+Ubuntu+Server+on+Raspberry+Pi.svg",
alt="",
height="227",
width="350",
hi_def=True,
loading="auto"
) | safe
}}
</div>
<p>However, you have not selected an image to download.<br />Go to the <a href="/download/raspberry-pi">download page</a> to select an image.</p>
{% endif %}
</div>
</section>
<div class="col">
{% with returnUrl="/download/raspberry-pi", ga_event_title="Raspberry Pi download" %}
{% include 'shared/_download-newsletter.html' %}
{% endwith %}
</div>
</div>
</section>

<section class="p-strip--light">
<div class="row">
<div class="col-8">
<h2>Installation instructions</h2>
<p>The simplest way to install Ubuntu is to use the <a href="https://www.raspberrypi.com/software/">Raspberry Pi Imager</a> which enables you to select an Ubuntu image during installation. Follow our tutorials below to learn how.</p>
</div>
<section class="p-section">
<hr class="p-rule is-fixed-width" />
<div class="row--50-50 p-section--shallow">
<div class="col">
<h2>Installation instructions</h2>
</div>
<div class="col">
<p>The simplest way to install Ubuntu is to use the <a href="https://www.raspberrypi.com/software/">Raspberry Pi Imager</a> which enables you to select an Ubuntu image during installation. Follow our tutorials below to learn how.</p>
</div>
<div class="row p-divider">
{% if version == releases.latest.core_version %}
<div class="col-4 blog-p-card--post">
<header class="blog-p-card__header--tutorial">
<p class="p-muted-heading u-no-margin--bottom">
core, UC20
</p>
</header>
<div class="blog-p-card__content">
<h3 class="p-heading--3 u-no-margin--top u-no-margin--bottom">
<a class="p-link--soft" href="/core/docs/uc20/install-raspberry-pi">Installing Ubuntu Core 20 on a Raspberry Pi</a>
</div>
<div class="row">
<div class="col-12 col-medium-6 col-start-large-4">
<hr class="p-rule is-fixed-width" />
<div class="row">
{% if version == releases.latest.core_version %}
<div class="col-4 col-medium-2">
<h3 class="p-heading--5">
<a href="/core/docs/uc20/install-raspberry-pi">Installing Ubuntu Core 20 on a Raspberry Pi</a>
</h3>
<p class="u-sv3">A complete guide to installing Ubuntu Core on a Raspberry Pi 4 (4GB or 8GB).</p>
<p>A complete guide to installing Ubuntu Core on a Raspberry Pi 4 (4GB or 8GB).</p>
</div>
<footer class="blog-p-card__footer">
Difficulty: <span class="l-tutorials-meter l-tutorials-meter--2">2 out of 5</span>
</footer>
</div>
{% else %}
<div class="col-4 blog-p-card--post">
<header class="blog-p-card__header--tutorial">
<p class="p-muted-heading u-no-margin--bottom">
iot, desktop
</p>
</header>
<div class="blog-p-card__content">
<h3 class="p-heading--3 u-no-margin--top u-no-margin--bottom">
<a class="p-link--soft" href="/tutorials/how-to-install-ubuntu-desktop-on-raspberry-pi-4">How to install Ubuntu Desktop on Raspberry Pi 4</a>
{% else %}
<div class="col-4 col-medium-2">
<h3 class="p-heading--5">
<a href="/tutorials/how-to-install-ubuntu-desktop-on-raspberry-pi-4">How to install Ubuntu Desktop on Raspberry Pi 4</a>
</h3>
<p class="u-sv3">A complete guide to installing Ubuntu Desktop on a Raspberry Pi 4 (2GB or above).</p>
<p>A complete guide to installing Ubuntu Desktop on a Raspberry Pi 4 (2GB or above).</p>
</div>
<footer class="blog-p-card__footer">
Difficulty: <span class="l-tutorials-meter l-tutorials-meter--1">1 out of 5</span>
</footer>
</div>
{% endif %}
<div class="col-4 blog-p-card--post p-divider__block">
<header class="blog-p-card__header--tutorial">
<h5 class="p-muted-heading u-no-margin--bottom">
iot, server
</h5>
</header>
<div class="blog-p-card__content">
<h3 class="p-heading--3 u-no-margin--top u-no-margin--bottom">
<a class="p-link--soft" href="/tutorials/how-to-install-ubuntu-on-your-raspberry-pi">How to install Ubuntu Server on your Raspberry Pi</a>
{% endif %}
<div class="col-4 col-medium-2">
<h3 class="p-heading--5">
<a href="/tutorials/how-to-install-ubuntu-on-your-raspberry-pi">How to install Ubuntu Server on your Raspberry Pi</a>
</h3>
<p class="u-sv3">A complete guide to installing Ubuntu Server on your Raspberry Pi 4, 3 or 2 in a couple minutes. In a headless setup or with a screen and with a Wi-Fi or ethernet connection.</p>
<p>A complete guide to installing Ubuntu Server on your Raspberry Pi 4, 3 or 2 in a couple minutes. In a headless setup or with a screen and with a Wi-Fi or ethernet connection.</p>
</div>
<footer class="blog-p-card__footer">
Difficulty: <span class="l-tutorials-meter l-tutorials-meter--2">2 out of 5</span>
</footer>
</div>
<div class="col-4 blog-p-card--post p-divider__block">
<header class="blog-p-card__header--tutorial">
<h5 class="p-muted-heading u-no-margin--bottom">
iot, core
</h5>
</header>
<div class="blog-p-card__content">
<h3 class="p-heading--3 u-no-margin--top u-no-margin--bottom">
<a class="p-link--soft" href="/download/raspberry-pi-core">Install Ubuntu Core on a Raspberry Pi</a>
<div class="col-4 col-medium-2">
<h3 class="p-heading--5">
<a href="/download/raspberry-pi-core">Install Ubuntu Core on a Raspberry Pi</a>
</h3>
<p class="u-sv3">Walk through the steps of flashing Ubuntu Core on a Raspberry Pi 2, 3, 4 or CM4. At the end of this process, you will have a board ready for production or testing snaps.</p>
<p>Walk through the steps of flashing Ubuntu Core on a Raspberry Pi 4, 3, 2 or CM4. At the end of this process, you will have a board ready for production or testing snaps.</p>
</div>
<footer class="blog-p-card__footer">
Difficulty: <span class="l-tutorials-meter l-tutorials-meter--3">3 out of 5</span>
</footer>
</div>
</div>
</section>

<section class="p-strip">
<div class="u-fixed-width">
<h2>Make something great today</h2>
<p>Check out these project ideas to help you get started.</p>
</div>
<div class="row p-divider">
<div class="col-3 p-divider__block">
<div class="p-heading-icon--muted">
<div class="p-heading-icon__header">
{{ image (
url="https://assets.ubuntu.com/v1/e2315503-tutorial.svg",
alt="",
width="231",
height="150",
hi_def=True,
loading="lazy",
attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}
) | safe
}}
<h4 class="p-heading-icon__title">Tutorial</h4>
</div>
<h3 class="p-heading--4"><a href="/blog/linux-gaming-tutorial-raspberry-pi-minecraft-server-on-ubuntu-desktop">Raspberry Pi Tutorial: Host a Minecraft
server on Ubuntu Desktop</a></h3>
</div>
</section>

<section class="p-section">
<hr class="p-rule is-fixed-width" />
<div class="row">
<div class="col-6">
<h2>Make something great today</h2>
</div>
<div class="col-3 p-divider__block">
<div class="p-heading-icon--muted">
<div class="p-heading-icon__header">
{{ image (
url="https://assets.ubuntu.com/v1/e2315503-tutorial.svg",
alt="",
width="231",
height="150",
hi_def=True,
loading="lazy",
attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}
) | safe
}}
<h4 class="p-heading-icon__title">Tutorial</h4>
</div>
<h3 class="p-heading--4"><a href="/blog/common-sense-using-the-raspberry-pi-sense-hat-on-ubuntu-impish-indri">Common Sense &mdash; using the Raspberry
Pi Sense HAT on Ubuntu Impish Indri</a></h3>
</div>
<div class="col-6">
<ul class="p-list--divided">
<li class="p-list__item">
<a href="/blog/linux-gaming-tutorial-raspberry-pi-minecraft-server-on-ubuntu-desktop">Raspberry Pi Tutorial: Host a Minecraft server on Ubuntu Desktop</a>
</li>
<li class="p-list__item">
<a href="/blog/common-sense-using-the-raspberry-pi-sense-hat-on-ubuntu-impish-indri">Common Sense &mdash; using the Raspberry Pi Sense HAT on Ubuntu Impish Indri</a>
</li>
<li class="p-list__item">
<a href="/blog/homelab-clusters-lxd-micro-cloud-on-raspberry-pi">Homelab clusters: LXD micro cloud on Raspberry Pi</a>
</li>
<li class="p-list__item">
<a href="https://maas.io/tutorials/build-your-own-bare-metal-cloud-using-a-raspberry-pi-cluster-with-maas#1-overview">Build your own bare metal cloud using a Raspberry Pi cluster with MAAS</a>
</li>
</ul>
</div>
<div class="col-3 p-divider__block">
<div class="p-heading-icon--muted">
<div class="p-heading-icon__header">
{{ image (
url="https://assets.ubuntu.com/v1/e2315503-tutorial.svg",
alt="",
width="231",
height="150",
hi_def=True,
loading="lazy",
attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}
) | safe
}}
<h4 class="p-heading-icon__title">Tutorial</h4>
</div>
<h3 class="p-heading--4"><a href="/blog/homelab-clusters-lxd-micro-cloud-on-raspberry-pi">Homelab clusters: LXD micro cloud on Raspberry Pi</a></h3>
</div>
</section>

<section class="p-section--deep">
<div class="row">
<hr class="p-rule"/>
<div class="col-3 col-medium-6">
<div class="p-section--shallow">
<h2 class="p-text--small-caps"><a href="/blog/tag/raspberry-pi">Latest from&nbsp;our&nbsp;blog&nbsp;&rsaquo;</a></h2>
</div>
</div>
<div class="col-3 p-divider__block">
<div class="p-heading-icon--muted">
<div class="p-heading-icon__header">
{{ image (
url="https://assets.ubuntu.com/v1/e2315503-tutorial.svg",
alt="",
width="231",
height="150",
hi_def=True,
loading="lazy",
attrs={"class": "p-heading-icon__img p-heading-icon__img--small"}
) | safe
}}
<h4 class="p-heading-icon__title">Tutorial</h4>
</div>
<h3 class="p-heading--4"><a href="https://maas.io/tutorials/build-your-own-bare-metal-cloud-using-a-raspberry-pi-cluster-with-maas#1-overview">Build
your own bare metal cloud using a Raspberry Pi cluster with MAAS</a></h3>
<div class="col-9 col-medium-6">
<div class="row p-section--shallow" id="blog-latest">
</div>
</div>
</div>

<template style="display:none" id="blog-template">
<div class="col-3 col-medium-2">
<div class="article-image u-blog-thumbnails p-image-wrapper"></div>
<h3 class="p-heading--5"><a class="article-link article-title"></a></h3>
<p class="article-excerpt"></p>
</div>
</template>
</section>

{% with section_classes='p-strip--light is-bordered', heading_topic='Raspberry Pi', tag_name='raspberry-pi', tag_id='1672', limit='4' %}
{% include "shared/_latest_news_strip.html" %}
{% endwith %}
<script src="{{ versioned_static('js/dist/latest-news.js') }}"></script>
<script>
canonicalLatestNews.fetchLatestNews(
{
articlesContainerSelector: "#blog-latest",
articleTemplateSelector: "#blog-template",
excerptLength: 200,
tagId: 1672,
limit: 3,
linkImage: true,
}
)
</script>

{% endblock %}
4 changes: 3 additions & 1 deletion templates/download/server/thank-you.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ <h1 class="js-download-option">Thank you for downloading Ubuntu Server {{ versio
</p>
</div>
<div class="col">
{% include 'shared/_server-download-newsletter.html' %}
{% with returnUrl="/download/server", ga_event_title="Ubuntu Server download" %}
{% include 'shared/_download-newsletter.html' %}
{% endwith %}
</div>
</div>
</section>
Expand Down
35 changes: 35 additions & 0 deletions templates/shared/_download-newsletter.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<div>
<h2>Sign up for our newsletter</h2>
<p>Get the latest Ubuntu news and updates in your inbox.</p>
</div>

<form action="/marketo/submit" method="post" id="mktoForm_4960" onsubmit="ga('send', 'Newsletter', 'Signup', '{{ ga_event_title }} newsletter signup');">
<label for="email">Email*:</label>
<input required id="email" name="email" maxlength="255" type="email" pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$" />

<div class="p-section--shallow">
<label class="p-checkbox">
<input required class="p-checkbox__input" value="yes" aria-labelledby="canonicalUpdatesOptIn" name="canonicalUpdatesOptIn" type="checkbox">
<span class="p-checkbox__label" id="canonicalUpdatesOptIn">I agree to receive information about Canonical's products and services.</span>
</label>
<p>By submitting this form, I confirm that I have read and agree to <a href="/legal/data-privacy/contact">Canonical's Privacy Notice</a> and <a href="/legal/data-privacy">Privacy Policy</a>.</p>
<hr />
<button type="submit" class="p-button--positive">Subscribe now</button>
</div>

<div class="p-section--shallow">
<input value="4960" name="formid" type="hidden">
<input type="hidden" name="Consent_to_Processing__c" value="yes" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="returnURL" value="{{ returnUrl }}#newsletter-signup" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_campaign" id="utm_campaign"
value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_medium" id="utm_medium" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_source" id="utm_source" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_content" id="utm_content" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" name="utm_term" id="utm_term" value="" />
<input type="hidden" aria-hidden="true" aria-label="hidden field" id="preferredLanguage" name="preferredLanguage"
maxlength="255" value="" />
<input type="hidden" name="thankyoumessage"
value="Thank you for signing up for our newsletter!<br/>In these regular emails you will find the latest updates from Ubuntu and upcoming events where you can meet our team.">
</div>
</form>
Loading
Loading