From: Sven Hoehn Date: Wed, 29 Nov 2017 19:02:00 +0000 (+0100) Subject: new donation page with basic styling. X-Git-Url: http://git.ipfire.org/?p=people%2Fshoehn%2Fipfire.org.git;a=commitdiff_plain;h=a33e1b4bc0081dc256afe99f88e918b628de3074 new donation page with basic styling. --- diff --git a/static/css/style.css b/static/css/style.css index 6b635f5..dbc7cd0 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1248,6 +1248,250 @@ mark, .offset-xl-11 { margin-left: 91.6666666667%; } } +.form-control { + display: block; + width: 100%; + padding: 0.5rem 0.75rem; + font-size: 1rem; + line-height: 1.25; + color: #464a4c; + background-color: #fff; + background-image: none; + background-clip: padding-box; + border: 2px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } + .form-control::-ms-expand { + background-color: transparent; + border: 0; } + .form-control:focus { + color: #464a4c; + background-color: #fff; + border-color: #5cb3fd; + outline: none; } + .form-control::placeholder { + color: #636c72; + opacity: 1; } + .form-control:disabled, .form-control[readonly] { + background-color: #eceeef; + opacity: 1; } + .form-control:disabled { + cursor: not-allowed; } + +select.form-control:not([size]):not([multiple]) { + height: calc(2.25rem + 4px); } + +select.form-control:focus::-ms-value { + color: #464a4c; + background-color: #fff; } + +.form-control-file, +.form-control-range { + display: block; } + +.col-form-label { + padding-top: calc(0.5rem - 2px * 2); + padding-bottom: calc(0.5rem - 2px * 2); + margin-bottom: 0; } + +.col-form-label-lg { + padding-top: calc(0.75rem - 2px * 2); + padding-bottom: calc(0.75rem - 2px * 2); + font-size: 20px; } + +.col-form-label-sm { + padding-top: calc(0.25rem - 2px * 2); + padding-bottom: calc(0.25rem - 2px * 2); + font-size: 0.875rem; } + +.col-form-legend { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + margin-bottom: 0; + font-size: 1rem; } + +.form-control-static { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + margin-bottom: 0; + line-height: 1.25; + border: solid transparent; + border-width: 2px 0; } + .form-control-static.form-control-sm, .form-control-static.form-control-lg { + padding-right: 0; + padding-left: 0; } + +.form-control-sm { + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + border-radius: 0.2rem; } + +select.form-control-sm:not([size]):not([multiple]) { + height: 1.8125rem; } + +.form-control-lg { + padding: 0.75rem 1.5rem; + font-size: 20px; + border-radius: 0.3rem; } + +select.form-control-lg:not([size]):not([multiple]) { + height: 3.1666666667rem; } + +.form-group { + margin-bottom: 1rem; } + +.form-text { + display: block; + margin-top: 0.25rem; } + +.form-check { + position: relative; + display: block; + margin-bottom: 0.5rem; } + .form-check.disabled .form-check-label { + color: #636c72; + cursor: not-allowed; } + +.form-check-label { + padding-left: 1.25rem; + margin-bottom: 0; + cursor: pointer; } + +.form-check-input { + position: absolute; + margin-top: 0.25rem; + margin-left: -1.25rem; } + .form-check-input:only-child { + position: static; } + +.form-check-inline { + display: inline-block; } + .form-check-inline .form-check-label { + vertical-align: middle; } + .form-check-inline + .form-check-inline { + margin-left: 0.75rem; } + +.form-control-feedback { + margin-top: 0.25rem; } + +.form-control-success, +.form-control-warning, +.form-control-danger { + padding-right: 2.25rem; + background-repeat: no-repeat; + background-position: center right 0.5625rem; + background-size: 1.125rem 1.125rem; } + +.has-success .form-control-feedback, +.has-success .form-control-label, +.has-success .col-form-label, +.has-success .form-check-label, +.has-success .custom-control { + color: #5cb85c; } + +.has-success .form-control { + border-color: #5cb85c; } + +.has-success .input-group-addon { + color: #5cb85c; + border-color: #5cb85c; + background-color: #eaf6ea; } + +.has-success .form-control-success { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"); } + +.has-warning .form-control-feedback, +.has-warning .form-control-label, +.has-warning .col-form-label, +.has-warning .form-check-label, +.has-warning .custom-control { + color: #f0ad4e; } + +.has-warning .form-control { + border-color: #f0ad4e; } + +.has-warning .input-group-addon { + color: #f0ad4e; + border-color: #f0ad4e; + background-color: white; } + +.has-warning .form-control-warning { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"); } + +.has-danger .form-control-feedback, +.has-danger .form-control-label, +.has-danger .col-form-label, +.has-danger .form-check-label, +.has-danger .custom-control { + color: #d9534f; } + +.has-danger .form-control { + border-color: #d9534f; } + +.has-danger .input-group-addon { + color: #d9534f; + border-color: #d9534f; + background-color: #fdf7f7; } + +.has-danger .form-control-danger { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"); } + +.form-inline { + display: flex; + flex-flow: row wrap; + align-items: center; } + .form-inline .form-check { + width: 100%; } + @media (min-width: 576px) { + .form-inline label { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0; } + .form-inline .form-group { + display: flex; + flex: 0 0 auto; + flex-flow: row wrap; + align-items: center; + margin-bottom: 0; } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; } + .form-inline .form-control-static { + display: inline-block; } + .form-inline .input-group { + width: auto; } + .form-inline .form-control-label { + margin-bottom: 0; + vertical-align: middle; } + .form-inline .form-check { + display: flex; + align-items: center; + justify-content: center; + width: auto; + margin-top: 0; + margin-bottom: 0; } + .form-inline .form-check-label { + padding-left: 0; } + .form-inline .form-check-input { + position: relative; + margin-top: 0; + margin-right: 0.25rem; + margin-left: 0; } + .form-inline .custom-control { + display: flex; + align-items: center; + justify-content: center; + padding-left: 0; } + .form-inline .custom-control-indicator { + position: static; + display: inline-block; + margin-right: 0.25rem; + vertical-align: text-bottom; } + .form-inline .has-feedback .form-control-feedback { + top: 0; } } + .btn { display: inline-block; font-weight: 600; @@ -5053,6 +5297,56 @@ a.pswp__share--download:hover { .pswp--minimal--dark .pswp__top-bar { background: none; } +.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); } + +.currency-dropdown, +.ownamount { + overflow: hidden; + width: 95%; + height: 48px; + padding: 0 16px; + 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; } + +.inline-card { + border-radius: 8px; + background-color: #eceff1; + padding: 24px; } + +label.amount { + width: 84px; + 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: #42a5f5; + text-align: left; + margin: 0 8px 16px 8px; + padding-top: 8px; } + +input[name=amount] { + display: none; } + +input[name=amount]:checked + label { + background-image: linear-gradient(120deg, #4fc3f7, #1976d2); + color: white; } + body { min-height: 100vh; display: flex; @@ -5693,6 +5987,12 @@ button:focus { color: #1976d2; border-color: #1976d2; } +.bg-blue-grey-900 { + background-color: #263238; } + +.bg-blue-grey-50 { + background-color: #eceff1; } + img.img-fluid { width: 100%; max-width: 100%; diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss new file mode 100644 index 0000000..6033dc9 --- /dev/null +++ b/static/scss/_donation.scss @@ -0,0 +1,57 @@ +.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); +} + +.currency-dropdown, +.ownamount { + overflow: hidden; + width: 95%; + height: 48px; + padding: 0 16px; + border-radius: 2px; + 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; + } +} + +.inline-card { + border-radius: 8px; + background-color: $blue-grey-50; + padding: 24px; +} + +label.amount { + width: 84px; + 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: left; + margin: 0 8px 16px 8px; + padding-top: 8px; +} + +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; +} \ No newline at end of file diff --git a/static/scss/style.scss b/static/scss/style.scss index 037ede6..7cd5aec 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -21,7 +21,7 @@ // @import "bootstrap-4.0.0-alpha.6/scss/code"; @import "bootstrap-4.0.0-alpha.6/scss/grid"; // @import "bootstrap-4.0.0-alpha.6/scss/tables"; -// @import "bootstrap-4.0.0-alpha.6/scss/forms"; +@import "bootstrap-4.0.0-alpha.6/scss/forms"; @import "bootstrap-4.0.0-alpha.6/scss/buttons"; // Components @@ -57,6 +57,9 @@ @import "photoswipe/main"; @import "photoswipe/default-skin/default-skin"; +// Donation Box +@import "_donation"; + body { min-height: 100vh; display: flex; @@ -98,6 +101,14 @@ body { border-color: $blue-700; } +.bg-blue-grey-900 { + background-color: $blue-grey-900; +} + +.bg-blue-grey-50 { + background-color: $blue-grey-50; +} + // Images img { &.img-fluid { diff --git a/templates/donate.html b/templates/donate.html index 7ec0cda..5b70c5e 100644 --- a/templates/donate.html +++ b/templates/donate.html @@ -6,134 +6,177 @@
-

{{ _("Donate now") }}

+

{{ _("Donate") }}

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

- IPFire ist ein Open-Source-Softwareprojekt. -

- -

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

- {% end %} -
-
- -
-
- {% module DonationInputBox() %} -
-
- -
- {% if wishlist_items %} -
-
-
-
-
-

- {{ _("Current crowd funding projects on the IPFire Wishlist") }} -

+
+
+
+
+
+

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

+ {% end %}
-
- {% module WishlistItems(wishlist_items) %} + +
+
+
+
+

Choose a currency

+
+ +
+
+ +
+

Frequency

+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+

Choose an amount

+
+ + + + + + + + + + + + + + +
+
+
+
+

Enter your own

+ +
+
+
+
+
+

Choose payment

+
+
+ +

Secure

+
+
+ +
+ + +
+
+
+ + + +

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

+
-
- {% end %} -
- -
-
-

{{ _("Donate by Bank Transfer") }}

-

{{ _("IBAN") }}
- DE86 4265 0150 1020 0768 89

- -

{{ _("BIC-/SWIFT-Code") }}
- WELADED1REK

+
+ +
+
+
+

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

+
-

- {% if reason_for_transfer %} - {{ _("Reason for transfer") }} - {{ reason_for_transfer }} - {% end %} -

+
+

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

+
+
-

- {% if lang == "de" %} - - Da das IPFire-Projekt keine registrierte gemeinnützige Organisation - ist, können keine steuerlich abzugsfähige Spendenquittungen erstellt - werden. - - {% else %} - - The IPFire project is not a registered non-profit organisation. -
- Hence we are not able to issue a tax-deductible contribution receipt - for your donation. - - {% end %} -

- - -
-

{{ _("Recurring Donations") }}

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

- Monatliche Spenden helfen uns das Projekt auf eine solide Basis zu stellen - und ermöglichen es die weitere Entwicklung voranzutreiben. - Unabhängig davon, ob dies zügige Sicherheitsupdates, oder das Einbauen von neuen - Funktionen bedeutet, sind monatliche Spenden die Basis, um den Fortbestand des - Projekts langfristig zu gewährleisten. -

- -

- PayPal erlaubt in einigen Ländern eine monatliche Spende, oder du - erstellst einfach einen Dauerauftrag bei deiner Bank. -

- {% else %} -

- A great way to support the IPFire project is a recurring donation. - These will help to keep the project solidly funded and help us to - keep up our development efforts. Either if that is prompt - security updates or introducing new features, recurring donations - are the foundation to keep this project running. -

- -

- PayPal allows to set up recurring donations in some countries - or you can set up a standing order at your bank if you are - want to donate by using bank transfer. -

- {% end %} -
-
+
+

Frequently Asked Questions

+
+
+