From: Michael Tremer Date: Tue, 17 Jul 2018 09:37:30 +0000 (+0100) Subject: Refactor donation page X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=95b30f84bbd2177073de4f57023578d74d5e3139;p=ipfire.org.git Refactor donation page Signed-off-by: Michael Tremer --- diff --git a/Makefile.am b/Makefile.am index 9a2ac226..9db1b204 100644 --- a/Makefile.am +++ b/Makefile.am @@ -101,6 +101,7 @@ webdir = $(backenddir)/web templates_DATA = \ src/templates/base.html \ src/templates/base-1.html \ + src/templates/donate.html \ src/templates/error.html \ src/templates/error-404.html \ src/templates/error-500.html \ @@ -129,7 +130,6 @@ templates_staticdir = $(templatesdir)/static SCSS_FILES = \ src/scss/style.scss \ - src/scss/_donation.scss \ src/scss/_fonts.scss \ src/scss/_icons.scss \ src/scss/_variables.scss @@ -158,9 +158,21 @@ static_fonts_DATA = \ static_fontsdir = $(staticdir)/fonts static_images_DATA = \ + src/static/img/amex.png \ + src/static/img/amex@2x.png \ + src/static/img/amex@3x.png \ src/static/img/appliance-pro.png \ src/static/img/header-background.jpg \ - src/static/img/ipfire-tux.png + src/static/img/ipfire-tux.png \ + src/static/img/mastercard.png \ + src/static/img/mastercard@2x.png \ + src/static/img/mastercard@3x.png \ + src/static/img/paypal.png \ + src/static/img/paypal@2x.png \ + src/static/img/paypal@3x.png \ + src/static/img/visa.png \ + src/static/img/visa@2x.png \ + src/static/img/visa@3x.png static_imagesdir = $(staticdir)/img diff --git a/src/scss/_donation.scss b/src/scss/_donation.scss deleted file mode 100644 index d4b62ca9..00000000 --- a/src/scss/_donation.scss +++ /dev/null @@ -1,232 +0,0 @@ -.donation { - background-image: url('../img/header-background.jpg'); - background-size: cover; - background-attachment: fixed; - background-position: center center; - width: 100vw; - height: 768px; - margin-bottom: 1122px; - @include media-breakpoint-up(sm) { - margin-bottom: 1078px; - } - @include media-breakpoint-up(md) { - margin-bottom: 668px; - } - @include media-breakpoint-up(lg) { - margin-bottom: 522px; - } - @include media-breakpoint-up(xl) { - height: 800px; - margin-bottom: 328px; - } -} - -.donation-card { - border-radius: 4px; - background-color: white; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); - @include media-breakpoint-down(sm) { - background-color: transparent; - box-shadow: none; - border-radius: 0; - } - h3 a { - color: white; - } - .card { - @include media-breakpoint-down(sm) { - height: 1100px; - margin-bottom: 32px; - border-radius: 4px; - background-color: white; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); - } - @include media-breakpoint-down(xs) { - border-radius: 0; - box-shadow: none; - margin-bottom: 0; - } - } - .info { - border-radius: 4px 0 0 4px; - @include media-breakpoint-down(sm) { - border-radius: 4px; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); - } - @include media-breakpoint-down(xs) { - border-radius: 0; - box-shadow: none; - } - } -} - -.ownamount { - overflow: hidden; - width: 95%; - height: 48px; - padding: 0 16px; - border-radius: 2px; - border: none; -} - -.ownamount { - background-color: rgba($blue-grey-900, .08); - border-bottom: 2px solid $blue-grey-900; - width: 90%; -} - -input.radiobtn:not(old) { - display: none; -} - -input.radiobtn:not(old) + label { - display: inline-block; - background-image: url("/static/img/icons/icon-radiobtn-off.png"); - background-repeat: no-repeat; - background-position: 0 0; - padding-left: 40px; - @include media-breakpoint-up(lg) { - padding-left: 28px; - } -} - -input.radiobtn:not(old):checked + label { - background-image: url("/static/img/icons/icon-radiobtn-on.png"); -} - -.inline-card { - border-radius: 8px; - background-color: $blue-grey-50; - padding: 24px; - position: relative; - padding: 24px 20px; - #amount { - margin-left: -8px; - } -} - -label.amount { - width: 76px; - height: 48px; - display: block; - background-color: white; - border-radius: 2px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23); - font-size: 20px; - color: $blue-400; - text-align: center; - margin: 0 4px 12px 4px; - padding: 8px 0 0 0; - @include media-breakpoint-up(sm) { - width: 84px; - margin: 0 8px 16px 8px; - } -} - -label.cc img { - height: 24px; -} - -#ccpayment, -#paymentpaypal, -#sepapayment { - @include media-breakpoint-down(lg) { - padding-bottom: 24px; - margin-bottom: 32px; - label img { - position: relative; - } - } -} - -#ccpayment { - @include media-breakpoint-up(lg) { - margin-top: 16px; - label { - background-position: 0 4px; - } - } -} - -#paymentpaypal { - @include media-breakpoint-down(lg) { - label img { - top: -7px; - } - } - @include media-breakpoint-up(lg) { - margin-top: 14px; - label { - background-position: 0 6px; - } - } - @include media-breakpoint-up(xl) { - margin-top: 0; - label { - background-position: 0 20px; - } - } -} - -#sepapayment { - @include media-breakpoint-up(lg) { - padding-top: 20px; - } -} - -input[name=amount] { - display: none; -} - -input[name=amount]:checked + label { - background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210)); - color: white; -} - -.or { - display: block; - height: 1px; - width: 90%; - border: 1px solid $blue-grey-300; - position: absolute; - left: 5%; - top: 212px; - @include media-breakpoint-up(sm) { - top: 222px; - } - @include media-breakpoint-up(lg) { - height: 200px; - width: 1px; - border: 1px solid $blue-grey-300; - left: 257px; - top: 12px; - } - @include media-breakpoint-up(xl) { - left: 350px; - } - &:before { - content: "OR"; - font-family: 'Ubuntu', sans-serif; - font-size: 16px; - font-weight: 500; - text-align: center; - color: $blue-grey-300; - background-color: $blue-grey-50; - display: block; - position: absolute; - top: -13px; - left: 50%; - margin-left: -20px; - width: 40px; - height: 24px; - @include media-breakpoint-up(lg) { - text-align: left; - display: block; - top: 12px; - left: -12px; - margin-left: 0; - width: 24px; - height: 24px; - } - } -} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 780493bd..d5dc326c 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -35,6 +35,7 @@ $cyan: #00bcd4; // Theme $primary: $red-900; $secondary: white; +$light: $blue-grey-50; $dark: $blue-grey-900; $yiq-text-dark: $primary; @@ -68,7 +69,7 @@ $lead-font-size: 1.5rem; $small-font-size: 87.5%; // Headings -$headings-font-weight: 300; +$headings-font-weight: 400; $headings-line-height: 1.5; $headings-margin-bottom: 1.5rem; $headings-color: $blue-grey-900; diff --git a/src/scss/style.scss b/src/scss/style.scss index 3e08f7d2..e9e086ad 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -27,15 +27,13 @@ @import "../bootstrap/scss/media"; @import "../bootstrap/scss/list-group"; @import "../bootstrap/scss/close"; +@import "../bootstrap/scss/modal"; @import "../bootstrap/scss/utilities"; @import "../bootstrap/scss/print"; // Include fonts @import "fonts"; -// Donation Box -@import "_donation"; - // Custom stuff @import '_icons'; diff --git a/src/static/img/paypal.png b/src/static/img/paypal.png new file mode 100644 index 00000000..112fcdbf Binary files /dev/null and b/src/static/img/paypal.png differ diff --git a/src/static/img/paypal@2x.png b/src/static/img/paypal@2x.png new file mode 100644 index 00000000..345891e9 Binary files /dev/null and b/src/static/img/paypal@2x.png differ diff --git a/src/static/img/paypal@3x.png b/src/static/img/paypal@3x.png new file mode 100644 index 00000000..21ca749c Binary files /dev/null and b/src/static/img/paypal@3x.png differ diff --git a/src/templates/donate.html b/src/templates/donate.html index cfb06a07..a2093366 100644 --- a/src/templates/donate.html +++ b/src/templates/donate.html @@ -1,234 +1,341 @@ {% extends "base-1.html" %} - + {% block title %}{{ _("Donate") }}{% end block %} - + {% block container %} + {% set amounts = (10, 25, 50, 75, 100, 250) %} + +

{{ _("Donate") }}

+
-
-
-

{{ _("Donate") }}

- -
- {% raw xsrf_form_html() %} - -
-
-
-
-
-
-
-

Choose a currency

-
-
- - -
-
- - -
-
-
- -
-

Frequency

-
-
- - -
-
- - -
-
-
-
- -
-
-
-
-
-

Choose an amount

-
- - - - - - - - - - - - - - - - - -
-
-
-
-

Enter your own

- +
+
+
+
+
+
+
IPFire is an Open Source software project.
+ +

+ IPFire is an Open Source software project. +

+ +

+ Development and keeping the project healthy is carried out by a + group of volunteers who have built a very successful product, + which hundreds of thousands of people use every day. +

+ +

+ Your donation helps us to make IPFire even better... +

+
+ +
+ + {% raw xsrf_form_html() %} + +
+
+
+
+
+
+
+
Choose a currency
+ +
+ + +
+ +
+ + +
+
+ +
+
Frequency
+ +
+ + +
+ +
+ + +
+
-
-
-
-
-

Choose payment

- -

Secure

-
-
- -
-
- - -
- -
- - -
- -
- - + +
+
{{ _("Choose an amount") }}
+ +
+ {% for amount in amounts %} + + {% end %} +
+ +
+ + +
+ +
+
+ +
+
+
Choose payment
+ +
+ + +
+ +
+ + + +
+ +
+ + + +
+
+
+ +
+
+
+
+
+ + +
+
+ + +
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+ + +
+
+ +
+
+ +
+
+ + +
+ +

+ There should also be some area for the small-print since we need to tell people who they are donating to and that we don't do any refunds, etc. +

- - - -

- There should also be some area for the small-print since we need to tell people who they are donating to and that we don't do any refunds, etc. -

- -
-
-

IPFire is an Open Source software project.

- -

- IPFire is an Open Source software project. -

- -

- Development and keeping the project healthy is carried out by a - group of volunteers who have built a very successful product, - which hundreds of thousands of people use every day. -

- -

- Your donation helps us to make IPFire even better... -

-
- -
-

Why should I donate?

-
- -
-

How much should I give?

-
-
-
+
- +
- +
-
+
-
+

Why should I donate?

- +

We are proud of what we are doing here at IPFire. We create a free firewall distribution that is free to use for everyone anywhere in the world. To do that, we need to provide the infrastructure to distribute it to our users and provide the right tools for our developers to help them to make IPFire better every day.

- +

Donations from individuals and corporations are the only way to keep all of our services free for everyone. They pay for hosting, advertising, purchase equipment and to fund the work of the people behind it.

- +

Our ambition is to compete with projects backed by large corporations and proprietary solutions and we cannot do that without you. Become a supporter today!

- +

How much should I give?

- +

Donations range from single digits donations to hundreds. For us it is important to give something back to help this project to succeed. If you want to help, please do so and encourage others to do so, too.

- +

Frequently Asked Questions

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

@@ -246,50 +353,48 @@ +{% end block %} + +{% block javascript %} + - + $("#modal-upsell").modal("show"); + } + }); + }); + {% end block %}