From: Sven Hoehn Date: Tue, 5 Dec 2017 19:02:11 +0000 (+0100) Subject: change the icon, the button style and text on the donation page X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=83985f528fe42ff567e47c421971f595c5fe6195;p=ipfire.org.git change the icon, the button style and text on the donation page --- diff --git a/static/css/style.css b/static/css/style.css index dbc7cd01..4f3aa67a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -5302,7 +5302,6 @@ a.pswp__share--download:hover { 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); } -.currency-dropdown, .ownamount { overflow: hidden; width: 95%; @@ -5311,16 +5310,23 @@ a.pswp__share--download:hover { border-radius: 2px; border: none; } -.dropdown-wrapper, .ownamount { background-color: rgba(38, 50, 56, 0.08); border-bottom: 2px solid #263238; width: 90%; } -.currency-dropdown { - background-color: transparent; } - .currency-dropdown:focus { - outline: none; } +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: 38px; } + +input.radiobtn:not(old):checked + label { + background-image: url("/static/img/icons/icon-radiobtn-on.png"); } .inline-card { border-radius: 8px; @@ -5971,6 +5977,9 @@ button:focus { .i_server { fill: #ff8f00; } +.i_secure { + fill: rgba(38, 50, 56, 0.3); } + .amber-800 { color: #ff8f00; border-color: #ff8f00; } @@ -5987,6 +5996,9 @@ button:focus { color: #1976d2; border-color: #1976d2; } +.blue_grey_300 { + color: rgba(38, 50, 56, 0.3); } + .bg-blue-grey-900 { background-color: #263238; } diff --git a/static/img/amex.png b/static/img/amex.png new file mode 100644 index 00000000..6c36bf45 Binary files /dev/null and b/static/img/amex.png differ diff --git a/static/img/amex@2x.png b/static/img/amex@2x.png new file mode 100644 index 00000000..104a5da0 Binary files /dev/null and b/static/img/amex@2x.png differ diff --git a/static/img/amex@3x.png b/static/img/amex@3x.png new file mode 100644 index 00000000..27d7747d Binary files /dev/null and b/static/img/amex@3x.png differ diff --git a/static/img/icons/icon-lock.svg b/static/img/icons/icon-lock.svg new file mode 100644 index 00000000..1a3eecbc --- /dev/null +++ b/static/img/icons/icon-lock.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/icons/icon-radiobtn-off.png b/static/img/icons/icon-radiobtn-off.png new file mode 100644 index 00000000..4c1f3e8c Binary files /dev/null and b/static/img/icons/icon-radiobtn-off.png differ diff --git a/static/img/icons/icon-radiobtn-off.svg b/static/img/icons/icon-radiobtn-off.svg new file mode 100644 index 00000000..3ded16ba --- /dev/null +++ b/static/img/icons/icon-radiobtn-off.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/static/img/icons/icon-radiobtn-off@2x.png b/static/img/icons/icon-radiobtn-off@2x.png new file mode 100644 index 00000000..e66d4acd Binary files /dev/null and b/static/img/icons/icon-radiobtn-off@2x.png differ diff --git a/static/img/icons/icon-radiobtn-off@3x.png b/static/img/icons/icon-radiobtn-off@3x.png new file mode 100644 index 00000000..02b005bf Binary files /dev/null and b/static/img/icons/icon-radiobtn-off@3x.png differ diff --git a/static/img/icons/icon-radiobtn-on.png b/static/img/icons/icon-radiobtn-on.png new file mode 100644 index 00000000..c48db166 Binary files /dev/null and b/static/img/icons/icon-radiobtn-on.png differ diff --git a/static/img/icons/icon-radiobtn-on.svg b/static/img/icons/icon-radiobtn-on.svg new file mode 100644 index 00000000..357c4180 --- /dev/null +++ b/static/img/icons/icon-radiobtn-on.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/static/img/icons/icon-radiobtn-on@2x.png b/static/img/icons/icon-radiobtn-on@2x.png new file mode 100644 index 00000000..79a61d2b Binary files /dev/null and b/static/img/icons/icon-radiobtn-on@2x.png differ diff --git a/static/img/icons/icon-radiobtn-on@3x.png b/static/img/icons/icon-radiobtn-on@3x.png new file mode 100644 index 00000000..517d4096 Binary files /dev/null and b/static/img/icons/icon-radiobtn-on@3x.png differ diff --git a/static/img/mastercard.png b/static/img/mastercard.png new file mode 100644 index 00000000..9ca87724 Binary files /dev/null and b/static/img/mastercard.png differ diff --git a/static/img/mastercard@2x.png b/static/img/mastercard@2x.png new file mode 100644 index 00000000..bd2132f5 Binary files /dev/null and b/static/img/mastercard@2x.png differ diff --git a/static/img/mastercard@3x.png b/static/img/mastercard@3x.png new file mode 100644 index 00000000..dfdef22f Binary files /dev/null and b/static/img/mastercard@3x.png differ diff --git a/static/img/visa.png b/static/img/visa.png new file mode 100644 index 00000000..4dc8bbef Binary files /dev/null and b/static/img/visa.png differ diff --git a/static/img/visa@2x.png b/static/img/visa@2x.png new file mode 100644 index 00000000..f84d83ce Binary files /dev/null and b/static/img/visa@2x.png differ diff --git a/static/img/visa@3x.png b/static/img/visa@3x.png new file mode 100644 index 00000000..add22619 Binary files /dev/null and b/static/img/visa@3x.png differ diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss index 6033dc93..82322f3b 100644 --- a/static/scss/_donation.scss +++ b/static/scss/_donation.scss @@ -4,7 +4,6 @@ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); } -.currency-dropdown, .ownamount { overflow: hidden; width: 95%; @@ -14,17 +13,26 @@ border: none; } -.dropdown-wrapper, .ownamount { background-color: rgba($blue-grey-900, .08); border-bottom: 2px solid $blue-grey-900; width: 90%; } -.currency-dropdown { - background-color: transparent; - &:focus { - outline: none; - } + +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: 38px; +} + +input.radiobtn:not(old):checked + label { + background-image: url("/static/img/icons/icon-radiobtn-on.png"); } .inline-card { diff --git a/static/scss/_icons.scss b/static/scss/_icons.scss index cc679dc2..28c5e750 100644 --- a/static/scss/_icons.scss +++ b/static/scss/_icons.scss @@ -67,4 +67,8 @@ .i_server { fill: $amber-800; +} + +.i_secure { + fill: $blue_grey_300; } \ No newline at end of file diff --git a/static/scss/style.scss b/static/scss/style.scss index 7cd5aec1..1eb92eb8 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -101,6 +101,10 @@ body { border-color: $blue-700; } +.blue_grey_300 { + color: $blue_grey_300; +} + .bg-blue-grey-900 { background-color: $blue-grey-900; } diff --git a/templates/donate.html b/templates/donate.html index 5b70c5e1..2ba97074 100644 --- a/templates/donate.html +++ b/templates/donate.html @@ -13,33 +13,64 @@
-

IPFire is an Open Source software project.

- {% if lang == "de" %} -

- Die Entwicklung und die Fortführung des Projekts wird allein - von einer Gruppe von Freiwilligen getragen, die ein Produkt - entwickelt hat, das tagtäglich von Hunderttausenden genutzt - wird. -

+
+

IPFire is an Open Source software project.

+ {% if lang == "de" %} +

+ Die Entwicklung und die Fortführung des Projekts wird allein + von einer Gruppe von Freiwilligen getragen, die ein Produkt + entwickelt hat, das tagtäglich von Hunderttausenden genutzt + wird. +

+ +

+ Jede einzelne Spende hilft IPFire noch weiter zu verbessern... +

+ {% else %} +

+ 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?

-

- Jede einzelne Spende hilft IPFire noch weiter zu verbessern... +

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.

- {% else %} -

- IPFire is an Open Source software project. + +

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.

- -

- 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. + +

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!

- -

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

+ +
+

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.

- {% end %} +
+ {% end %}
@@ -47,11 +78,15 @@

Choose a currency

-
- +
+
+ + +
+
+ + +
@@ -59,16 +94,12 @@

Frequency

- + +
- + +
@@ -79,51 +110,84 @@

Choose an amount

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

Enter your own

- +
-
-

Choose payment

-
-
- -

Secure

+
+

Choose payment

+ +

Secure

-
- - +
+
+ + +
+ +
+ + +
@@ -142,34 +206,6 @@
-
-

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. -

-
@@ -179,5 +215,12 @@
+ + + {% end block %}