Donation page responsivness

diff --git a/static/css/style.css b/static/css/style.css
index 3be2ffc9ecf520d535cd697d0b734e353382c3b0..4c3db9bef6036faa46afd797bccd0b9432a17623 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5469,10 +5469,61 @@ a.pswp__share--download:hover {
 .pswp--minimal--dark .pswp__top-bar {
   background: none; }
 
 .pswp--minimal--dark .pswp__top-bar {
   background: none; }
 

+.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; }
+  @media (min-width: 576px) {
+    .donation {
+      margin-bottom: 1078px; } }
+  @media (min-width: 768px) {
+    .donation {
+      margin-bottom: 668px; } }
+  @media (min-width: 992px) {
+    .donation {
+      margin-bottom: 522px; } }
+  @media (min-width: 1200px) {
+    .donation {
+      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); }
 .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); }

+  @media (max-width: 767px) {
+    .donation-card {
+      background-color: transparent;
+      box-shadow: none;
+      border-radius: 0; } }
+  .donation-card h3 a {
+    color: white; }
+  @media (max-width: 767px) {
+    .donation-card .card {
+      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); } }
+  @media (max-width: 575px) {
+    .donation-card .card {
+      border-radius: 0;
+      box-shadow: none;
+      margin-bottom: 0; } }
+  .donation-card .info {
+    border-radius: 4px 0 0 4px; }
+    @media (max-width: 767px) {
+      .donation-card .info {
+        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); } }
+    @media (max-width: 575px) {
+      .donation-card .info {
+        border-radius: 0;
+        box-shadow: none; } }

 
 .ownamount {
   overflow: hidden;
 
 .ownamount {
   overflow: hidden;


@@ -5495,7 +5546,10 @@ input.radiobtn:not(old) + label {
   background-image: url("/static/img/icons/icon-radiobtn-off.png");
   background-repeat: no-repeat;
   background-position: 0 0;
   background-image: url("/static/img/icons/icon-radiobtn-off.png");
   background-repeat: no-repeat;
   background-position: 0 0;

-  padding-left: 38px; }
+  padding-left: 40px; }
+  @media (min-width: 992px) {
+    input.radiobtn:not(old) + label {
+      padding-left: 28px; } }

 
 input.radiobtn:not(old):checked + label {
   background-image: url("/static/img/icons/icon-radiobtn-on.png"); }
 
 input.radiobtn:not(old):checked + label {
   background-image: url("/static/img/icons/icon-radiobtn-on.png"); }


@@ -5506,9 +5560,11 @@ input.radiobtn:not(old):checked + label {
   padding: 24px;
   position: relative;
   padding: 24px 20px; }
   padding: 24px;
   position: relative;
   padding: 24px 20px; }

+  .inline-card #amount {
+    margin-left: -8px; }

 
 label.amount {
 
 label.amount {

-  width: 84px;
+  width: 76px;

   height: 48px;
   display: block;
   background-color: white;
   height: 48px;
   display: block;
   background-color: white;


@@ -5517,8 +5573,52 @@ label.amount {
   font-size: 20px;
   color: #42a5f5;
   text-align: center;
   font-size: 20px;
   color: #42a5f5;
   text-align: center;

-  margin: 0 8px 16px 8px;
+  margin: 0 4px 12px 4px;

   padding: 8px 0 0 0; }
   padding: 8px 0 0 0; }

+  @media (min-width: 576px) {
+    label.amount {
+      width: 84px;
+      margin: 0 8px 16px 8px; } }
+
+label.cc img {
+  height: 24px; }
+
+@media (max-width: 1199px) {
+  #ccpayment,
+  #paymentpaypal,
+  #sepapayment {
+    padding-bottom: 24px;
+    margin-bottom: 32px; }
+    #ccpayment label img,
+    #paymentpaypal label img,
+    #sepapayment label img {
+      position: relative; } }
+
+@media (min-width: 992px) {
+  #ccpayment {
+    margin-top: 16px; }
+    #ccpayment label {
+      background-position: 0 4px; } }
+
+@media (max-width: 1199px) {
+  #paymentpaypal label img {
+    top: -7px; } }
+
+@media (min-width: 992px) {
+  #paymentpaypal {
+    margin-top: 14px; }
+    #paymentpaypal label {
+      background-position: 0 6px; } }
+
+@media (min-width: 1200px) {
+  #paymentpaypal {
+    margin-top: 0; }
+    #paymentpaypal label {
+      background-position: 0 20px; } }
+
+@media (min-width: 992px) {
+  #sepapayment {
+    padding-top: 20px; } }

 
 input[name=amount] {
   display: none; }
 
 input[name=amount] {
   display: none; }


@@ -5529,25 +5629,49 @@ input[name=amount]:checked + label {
 
 .or {
   display: block;
 
 .or {
   display: block;

-  height: 200px;
-  width: 1px;
+  height: 1px;
+  width: 90%;

   border: 1px solid rgba(38, 50, 56, 0.3);
   position: absolute;
   border: 1px solid rgba(38, 50, 56, 0.3);
   position: absolute;

-  left: 350px;
-  top: 12px; }
+  left: 5%;
+  top: 212px; }
+  @media (min-width: 576px) {
+    .or {
+      top: 222px; } }
+  @media (min-width: 992px) {
+    .or {
+      height: 200px;
+      width: 1px;
+      border: 1px solid rgba(38, 50, 56, 0.3);
+      left: 257px;
+      top: 12px; } }
+  @media (min-width: 1200px) {
+    .or {
+      left: 350px; } }

   .or:before {
     content: "OR";
     font-family: 'Ubuntu', sans-serif;
     font-size: 16px;
     font-weight: 500;
   .or:before {
     content: "OR";
     font-family: 'Ubuntu', sans-serif;
     font-size: 16px;
     font-weight: 500;

+    text-align: center;

     color: rgba(38, 50, 56, 0.3);
     background-color: #eceff1;
     display: block;
     position: absolute;
     color: rgba(38, 50, 56, 0.3);
     background-color: #eceff1;
     display: block;
     position: absolute;

-    top: 12px;
-    left: -12px;
-    width: 24px;
+    top: -13px;
+    left: 50%;
+    margin-left: -20px;
+    width: 40px;

     height: 24px; }
     height: 24px; }

+    @media (min-width: 992px) {
+      .or:before {
+        text-align: left;
+        display: block;
+        top: 12px;
+        left: -12px;
+        margin-left: 0;
+        width: 24px;
+        height: 24px; } }

 
 body {
   min-height: 100vh;
 
 body {
   min-height: 100vh;


@@ -5576,7 +5700,7 @@ h3 {
     h3 {
       font-size: 24px;
       line-height: 32px;
     h3 {
       font-size: 24px;
       line-height: 32px;

-      font-weight: 300;
+      font-weight: 500;

       margin-bottom: 0; } }
   h3.headline {
     text-align: center;
       margin-bottom: 0; } }
   h3.headline {
     text-align: center;


@@ -5643,6 +5767,7 @@ p {
   @media (min-width: 768px) {
     .display-2 {
       font-size: 40px;
   @media (min-width: 768px) {
     .display-2 {
       font-size: 40px;

+      font-weight: 500;

       line-height: 56px;
       margin-bottom: 3rem; } }
 
       line-height: 56px;
       margin-bottom: 3rem; } }
 


@@ -6186,6 +6311,11 @@ button:focus {
 .i_secure {
   fill: rgba(38, 50, 56, 0.3); }
 
 .i_secure {
   fill: rgba(38, 50, 56, 0.3); }
 

+.i_arrow_down_2 {
+  fill: white;
+  opacity: .75;
+  transform: translateY(3px); }
+

 .amber-800 {
   color: #ff8f00;
   border-color: #ff8f00; }
 .amber-800 {
   color: #ff8f00;
   border-color: #ff8f00; }

diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss
index 09a733b434db7c94645dac87b125995455037b22..322b00cd6ef5169f8dbcda9d38145463544c19fd 100644 (file)
--- a/static/scss/_donation.scss
+++ b/static/scss/_donation.scss
@@ -1,7 +1,63 @@
+.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);
 .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 {
 }
 
 .ownamount {


@@ -28,7 +84,10 @@ input.radiobtn:not(old) + label {
        background-image: url("/static/img/icons/icon-radiobtn-off.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url("/static/img/icons/icon-radiobtn-off.png");
        background-repeat: no-repeat;
        background-position: 0 0;

-       padding-left: 38px;
+       padding-left: 40px;
+       @include media-breakpoint-up(lg) {
+               padding-left: 28px;
+       }

 }
 
 input.radiobtn:not(old):checked + label {
 }
 
 input.radiobtn:not(old):checked + label {


@@ -41,10 +100,13 @@ input.radiobtn:not(old):checked + label {
        padding: 24px;
        position: relative;
        padding: 24px 20px;
        padding: 24px;
        position: relative;
        padding: 24px 20px;

+       #amount {
+               margin-left: -8px;
+       }

 }
 
 label.amount {
 }
 
 label.amount {

-       width: 84px;
+       width: 76px;

        height: 48px;
        display: block;
        background-color: white;
        height: 48px;
        display: block;
        background-color: white;


@@ -53,8 +115,63 @@ label.amount {
        font-size: 20px;
        color: $blue-400;
        text-align: center;
        font-size: 20px;
        color: $blue-400;
        text-align: center;

-       margin: 0 8px 16px 8px;
+       margin: 0 4px 12px 4px;

        padding: 8px 0 0 0;
        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] {
 }
 
 input[name=amount] {


@@ -68,24 +185,48 @@ input[name=amount]:checked + label {
 
 .or {
        display: block;
 
 .or {
        display: block;

-       height: 200px;
-       width: 1px;
+       height: 1px;
+       width: 90%;

        border: 1px solid $blue-grey-300;
        position: absolute;
        border: 1px solid $blue-grey-300;
        position: absolute;

-       left: 350px;
-       top: 12px;
+       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;
        &: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;
                color: $blue-grey-300;
                background-color: $blue-grey-50;
                display: block;
                position: absolute;

-               top: 12px;
-               left: -12px;
-               width: 24px;
+               top: -13px;
+               left: 50%;
+               margin-left: -20px;
+               width: 40px;

                height: 24px;
                height: 24px;

+               @include media-breakpoint-up(lg) {
+                       text-align: left;
+                       display: block;
+                       top: 12px;
+                       left: -12px;
+                       margin-left: 0;
+                       width: 24px;
+                       height: 24px;
+               }

        }
 }
\ No newline at end of file
        }
 }
\ No newline at end of file

diff --git a/static/scss/_fonts.scss b/static/scss/_fonts.scss
index c6826c558173dcd41d633bd2c673bd11ea747670..37539b38656c678a2cdf636f5a861f662e251f1a 100644 (file)
--- a/static/scss/_fonts.scss
+++ b/static/scss/_fonts.scss
@@ -17,7 +17,7 @@ h3 {
        @include media-breakpoint-up(md) {
                font-size: 24px;
                line-height: 32px;
        @include media-breakpoint-up(md) {
                font-size: 24px;
                line-height: 32px;

-               font-weight: 300;
+               font-weight: 500;

                margin-bottom: 0;
        }
        &.headline {
                margin-bottom: 0;
        }
        &.headline {


@@ -94,6 +94,7 @@ p {
        margin-bottom: 40px;
        @include media-breakpoint-up(md) {
                font-size: 40px;
        margin-bottom: 40px;
        @include media-breakpoint-up(md) {
                font-size: 40px;

+               font-weight: 500;

                line-height: 56px;
                margin-bottom: 3rem;
        }
                line-height: 56px;
                margin-bottom: 3rem;
        }

diff --git a/static/scss/_icons.scss b/static/scss/_icons.scss
index 28c5e750c70be30c9077129a13e262c9bec37c38..1a420bb2a9e9f620c1c1d052ec401af015208b90 100644 (file)
--- a/static/scss/_icons.scss
+++ b/static/scss/_icons.scss
@@ -71,4 +71,10 @@
 
 .i_secure {
        fill: $blue_grey_300;
 
 .i_secure {
        fill: $blue_grey_300;

+}
+
+.i_arrow_down_2 {
+       fill: white;
+       opacity: .75;
+       transform: translateY(3px);

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/templates/donate.html b/templates/donate.html
index 13e45f43a44fc56bd4bc509319c9c5970b9d128b..db86ea4e0cc9c815b8401f41033f16d7515afcc4 100644 (file)
--- a/templates/donate.html
+++ b/templates/donate.html
@@ -3,86 +3,26 @@
 {% block title %}{{ _("Donate") }}{% end block %}
  
 {% block container %}
 {% block title %}{{ _("Donate") }}{% end block %}
  
 {% block container %}

-       <div class="container">
-               <div class="row">
-                       <section class="features-content col-12 text-center">
-                               <h2 class="display-2">{{ _("Donate") }}</h2>
-                               
-                               <div class="row justify-content-center mb-6">
-                                       <div class="col-12">
-                                               <div class="row">
-                                                       <div class="donation-card d-flex flex-row text-left">
-                                                               <div class="col-4 bg-blue-grey-900 text-white p-5 pt-6" style="border-radius: 4px 0 0 4px">
-                                                                       <div class="mb-6">
-                                                                               <h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
-                                                                               {% if lang == "de" %}
-                                                                                       <p class="copy">
-                                                                                               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.
-                                                                                       </p>
-                                                               
-                                                                                       <p class="copy">
-                                                                                               Jede einzelne Spende hilft IPFire noch weiter zu verbessern...
-                                                                                       </p>
-                                                                               {% else %}
-                                                                                       <p class="copy">
-                                                                                               IPFire is an Open Source software project.
-                                                                                       </p>
-                                                               
-                                                                                       <p class="copy">
-                                                                                               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.
-                                                                                       </p>
-                                                               
-                                                                                       <p class="copy">
-                                                                                               Your donation helps us to make IPFire even better...
-                                                                                       </p>
-                                                                       </div>
-                                                                               
-                                                                       <div class="mb-6">                                                                              
-                                                                               <h3>Why should I donate?</h3>
-                                                       
-                                                                               <p class="copy">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.
-                                                                               </p>
-                                                                               
-                                                                               <p class="copy">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.
-                                                                               </p>
-                                                                               
-                                                                               <p class="copy">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!
-                                                                               </p>
-                                                                       </div>
-                                                               
-                                                                       <div class="mb-6">
-                                                                               <h3>How much should I give?</h3>
-                                                                               
-                                                                               <p class="copy">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.
-                                                                               </p>
-                                                                       </div>
-                                                               {% end %}
-                                                               </div>                          
-                                                               <div class="col pl-5 pr-5">
-                                                                       <div class="card p-3 pt-6">
-                                                                               <div class="row">
-                                                                                       <div class="col d-flex flex-column">
+       <section class="donation">
+               <div class="container">
+                       <div class="row">
+                               <section class="features-content col-12 text-center">
+                                       <h2 class="display-2">{{ _("Donate") }}</h2>
+                                       
+                                       <div class="row justify-content-center mb-6">
+                                               <div class="col-12 col-sm-11 col-xl-12">
+                                                       <div class="row">
+                                                               <div class="donation-card d-flex flex-column flex-md-row-reverse text-left col p-0">
+                                                                       <div class="card p-4 p-sm-6 p-md-4 pt-6">
+                                                                               <div class="row py-md-3 px-md-6">
+                                                                                       <div class="col-12 col-lg-6 d-flex flex-column mb-6 mb-lg-0">

                                                                                                <h4 class="mb-5">Choose a currency</h4>
                                                                                                <div class="row pt-4">
                                                                                                <h4 class="mb-5">Choose a currency</h4>
                                                                                                <div class="row pt-4">

-                                                                                                       <div class="col">
+                                                                                                       <div class="col col-sm-4 col-md-5">

                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked>
                                                                                                                <label for="euro" class="form-check-label radiobtn">€uro</label>
                                                                                                        </div>
                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked>
                                                                                                                <label for="euro" class="form-check-label radiobtn">€uro</label>
                                                                                                        </div>

-                                                                                                       <div class="col">
+                                                                                                       <div class="col col-sm-4 col-md-5">

                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd">
                                                                                                                <label for="usd" class="form-check-label radiobtn">USD $</label>
                                                                                                        </div>
                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd">
                                                                                                                <label for="usd" class="form-check-label radiobtn">USD $</label>
                                                                                                        </div>


@@ -92,11 +32,11 @@
                                                                                        <div class="col d-flex flex-column">
                                                                                                <h4 class="mb-5">Frequency</h4>
                                                                                                <div class="row pt-4">
                                                                                        <div class="col d-flex flex-column">
                                                                                                <h4 class="mb-5">Frequency</h4>
                                                                                                <div class="row pt-4">

-                                                                                                       <div class="col">
+                                                                                                       <div class="col col-sm-4 col-md-5 col-lg-6">

                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked>
                                                                                                                <label for="one-time-payment" class="form-check-label radiobtn">One time</label>
                                                                                                        </div>
                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked>
                                                                                                                <label for="one-time-payment" class="form-check-label radiobtn">One time</label>
                                                                                                        </div>

-                                                                                                       <div class="col">
+                                                                                                       <div class="col col-sm-4 col-md-5">

                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly">
                                                                                                                <label for="monthly-payment" class="form-check-label radiobtn">Monthly</label>
                                                                                                        </div>
                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly">
                                                                                                                <label for="monthly-payment" class="form-check-label radiobtn">Monthly</label>
                                                                                                        </div>


@@ -105,12 +45,12 @@
                                                                                </div>
                                                                        
                                                                                <div class="row mt-6">
                                                                                </div>
                                                                        
                                                                                <div class="row mt-6">

-                                                                                       <div class="inline-card bg-blue-grey-50 w-100">
+                                                                                       <div class="inline-card bg-blue-grey-50 col-11 mx-auto">

                                                                                                <div class="or"></div>
                                                                                                <div class="or"></div>

-                                                                                               <div class="row mb-6">
-                                                                                                       <div class="col">
+                                                                                               <div class="row mb-4 mb-sm-6 mb-lg-0">
+                                                                                                       <div class="col-12 col-lg-6 mb-6">

                                                                                                                <h4 class="mb-5">Choose an amount</h4>
                                                                                                                <h4 class="mb-5">Choose an amount</h4>

-                                                                                                               <div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;" id="amount">
+                                                                                                               <div class="form-group d-flex flex-row flex-wrap" id="amount">

                                                                                                                        <input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
                                                                                                                        <label for="10" class="form-check-label amount"><span id="amount_10">10</span><span class="currency">€</span></label>
                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
                                                                                                                        <label for="10" class="form-check-label amount"><span id="amount_10">10</span><span class="currency">€</span></label>
                                                                                                                        


@@ -137,7 +77,7 @@
                                                                                                                </div>
                                                                                                        </div>
                                                                                                </div>
                                                                                                                </div>
                                                                                                        </div>
                                                                                                </div>

-                                                                                               <div class="row mt-6">
+                                                                                               <div class="row mt-5 mt-sm-6 mb-5 mb-lg-0 mt-lg-0">

                                                                                                        <div class="col d-flex flex-row">
                                                                                                                <h4 class="mr-3">Choose payment</h4>
                                                                                                                <svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg>
                                                                                                        <div class="col d-flex flex-row">
                                                                                                                <h4 class="mr-3">Choose payment</h4>
                                                                                                                <svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg>


@@ -145,10 +85,10 @@
                                                                                                        </div>
                                                                                                </div>
                                                                                                
                                                                                                        </div>
                                                                                                </div>
                                                                                                

-                                                                                               <div class="row d-flex pl-4 pr-4 mb-6">
-                                                                                                       <div class="col">
+                                                                                               <div class="row d-flex flex-column flex-lg-row pl-4 pr-4 md-4 mb-lg-0 mb-xl-6">
+                                                                                                       <div class="col col-lg-6 col-xl-4" id="ccpayment">

                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked>
                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked>

-                                                                                                               <label for="creditcard" class="form-check-label radiobtn" style="background-position: 0 20px">
+                                                                                                               <label for="creditcard" class="form-check-label radiobtn cc">

                                                                                                                        <picture>
                                                                                                                                <source srcset="{{ static_url("img/amex.png") }},
                                                                                                                                        {{ static_url("img/amex@2x.png") }} 2x,
                                                                                                                        <picture>
                                                                                                                                <source srcset="{{ static_url("img/amex.png") }},
                                                                                                                                        {{ static_url("img/amex@2x.png") }} 2x,


@@ -157,7 +97,7 @@
                                                                                                                                         srcset="{{ static_url("img/amex.png") }},
                                                                                                                                        {{ static_url("img/amex@2x.png") }} 2x,
                                                                                                                                        {{ static_url("img/amex@3x.png") }} 3x "
                                                                                                                                         srcset="{{ static_url("img/amex.png") }},
                                                                                                                                        {{ static_url("img/amex@2x.png") }} 2x,
                                                                                                                                        {{ static_url("img/amex@3x.png") }} 3x "

-                                                                                                                                       alt="Amex" class="m-4">
+                                                                                                                                       alt="Amex" class="m-xl-2">

                                                                                                                        </picture>
                                                                                                                        
                                                                                                                        <picture>
                                                                                                                        </picture>
                                                                                                                        
                                                                                                                        <picture>


@@ -168,7 +108,7 @@
                                                                                                                                         srcset="{{ static_url("img/mastercard.png") }},
                                                                                                                                        {{ static_url("img/mastercard@2x.png") }} 2x,
                                                                                                                                        {{ static_url("img/mastercard@3x.png") }} 3x "
                                                                                                                                         srcset="{{ static_url("img/mastercard.png") }},
                                                                                                                                        {{ static_url("img/mastercard@2x.png") }} 2x,
                                                                                                                                        {{ static_url("img/mastercard@3x.png") }} 3x "

-                                                                                                                                       alt="Mastercard" class="m-4">
+                                                                                                                                       alt="Mastercard" class="m-xl-2">

                                                                                                                        </picture>
                                                                                                                        
                                                                                                                        <picture>
                                                                                                                        </picture>
                                                                                                                        
                                                                                                                        <picture>


@@ -178,49 +118,141 @@
                                                                                                                                <img src="{{ static_url("img/visa.png") }}"
                                                                                                                                         srcset="{{ static_url("img/visa.png") }},
                                                                                                                                        {{ static_url("img/visa@2x.png") }} 2x,
                                                                                                                                <img src="{{ static_url("img/visa.png") }}"
                                                                                                                                         srcset="{{ static_url("img/visa.png") }},
                                                                                                                                        {{ static_url("img/visa@2x.png") }} 2x,

-                                                                                                                                       {{ static_url("img/visax@3x.png") }} 3x "
-                                                                                                                                       alt="Visa" class="m-4">
+                                                                                                                                       {{ static_url("img/visa@3x.png") }} 3x "
+                                                                                                                                       alt="Visa" class="m-xl-2">

                                                                                                                        </picture>
                                                                                                                </label>
                                                                                                        </div>
                                                                                                        
                                                                                                                        </picture>
                                                                                                                </label>
                                                                                                        </div>
                                                                                                        

-                                                                                                       <div class="col" style="padding-top: 20px;">
+                                                                                                       <div class="col col-lg-6 col-xl-4" id="sepapayment">

                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
                                                                                                                <label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label>
                                                                                                        </div>
                                                                                                                <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
                                                                                                                <label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label>
                                                                                                        </div>

+                                                                                                       
+                                                                                                       <div class="col col-lg-6 col-xl-4" id="paymentpaypal">
+                                                                                                               <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="paypal" value="paypal">
+                                                                                                               <label for="paypal" class="form-check-label radiobtn">
+                                                                                                                       <picture>
+                                                                                                                               <source srcset="{{ static_url("img/paypal.png") }},
+                                                                                                                                       {{ static_url("img/paypal@2x.png") }} 2x,
+                                                                                                                                       {{ static_url("img/paypal@3x.png") }} 3x ">
+                                                                                                                               <img src="{{ static_url("img/paypal.png") }}"
+                                                                                                                                        srcset="{{ static_url("img/paypal.png") }},
+                                                                                                                                       {{ static_url("img/paypal@2x.png") }} 2x,
+                                                                                                                                       {{ static_url("img/paypal@3x.png") }} 3x "
+                                                                                                                                       alt="PayPal" class="m-xl-4">
+                                                                                                                       </picture>
+                                                                                                               </label>
+                                                                                                       </div>

                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                
                                                                                <button type="button" class="btn btn-primary btn-lg m-0" style="position: relative; top: -24px; left: 50%; transform: translateX(-50%);">Donate Now</button>
                                                                        
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                
                                                                                <button type="button" class="btn btn-primary btn-lg m-0" style="position: relative; top: -24px; left: 50%; transform: translateX(-50%);">Donate Now</button>
                                                                        

-                                                                               <p class="small text-left mt-6 mb-6">
+                                                                               <p class="small text-left mt-5 mb-6">

                                                                                        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.
                                                                                </p>
                                                                        </div>
                                                                                        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.
                                                                                </p>
                                                                        </div>

+                                                                       
+                                                                       <div class="info col-md-4 bg-blue-grey-900 text-white p-5 pt-6">
+                                                                               <div class="mb-6">
+                                                                                       <h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
+                                                                                       {% if lang == "de" %}
+                                                                                               <p class="copy">
+                                                                                                       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.
+                                                                                               </p>
+                                                                       
+                                                                                               <p class="copy">
+                                                                                                       Jede einzelne Spende hilft IPFire noch weiter zu verbessern...
+                                                                                               </p>
+                                                                                       {% else %}
+                                                                                               <p class="copy">
+                                                                                                       IPFire is an Open Source software project.
+                                                                                               </p>
+                                                                       
+                                                                                               <p class="copy">
+                                                                                                       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.
+                                                                                               </p>
+                                                                       
+                                                                                               <p class="copy">
+                                                                                                       Your donation helps us to make IPFire even better...
+                                                                                               </p>
+                                                                               </div>
+                                                                                       
+                                                                               <div class="mb-6 d-flex justify-content-between">                                                                               
+                                                                                       <h3><a href="#whydonate">Why should I donate?</a></h3><a href="#whydonate"><svg class="icon i_arrow_down_2 ml-4"><use xlink:href="#arrow-down-2"/></svg></a>
+                                                                               </div>
+                                                                       
+                                                                               <div class="mb-6 d-flex justify-content-between">
+                                                                                       <h3><a href="#howmuch">How much should I give?</a></h3><a href="#howmuch"><svg class="icon i_arrow_down_2 ml-4"><use xlink:href="#arrow-down-2"/></svg></a>
+                                                                               </div>
+                                                                       {% end %}
+                                                                       </div>

                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>

-                               </div>
-                               
+                               </section>
+                       </div>
+               </div>
+       </section>
+       
+       <section>
+               <div class="container"> 

                                <div class="row text-left">
                                <div class="row text-left">

-                                       <div class="col-5">
+                                       <div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
+                                               <div class="mb-6" id="whydonate">                                                                               
+                                                       <h3>Why should I donate?</h3>
+                               
+                                                       <p class="copy">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.
+                                                       </p>
+                                                       
+                                                       <p class="copy">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.
+                                                       </p>
+                                                       
+                                                       <p class="copy">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!
+                                                       </p>
+                                               </div>
+                                       
+                                               <div class="mb-6" id="howmuch">
+                                                       <h3>How much should I give?</h3>
+                                                       
+                                                       <p class="copy">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.
+                                                       </p>
+                                               </div>

                                        </div>
                                        
                                        </div>
                                        

-                                       <div class="col-5 offset-2">
+                                       <div class="col-10 col-md-4 offset-sm-1 offset-xl-2">

                                                <h3>Frequently Asked Questions</h3>
                                                <h3>Frequently Asked Questions</h3>

+                                               <p class="copy">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.</p>

                                        </div>
                                </div>
                                        </div>
                                </div>

-                       </section>

                </div>
                </div>

-       </div>
+       </section>

 
 <!-- Icons -->
 <svg aria-hidden="true" style="display: none">
        <symbol id="secure" viewBox="0 0 24 24">
                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
        </symbol>
 
 <!-- Icons -->
 <svg aria-hidden="true" style="display: none">
        <symbol id="secure" viewBox="0 0 24 24">
                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
        </symbol>

+       <symbol id="arrow-down-2" viewBox="0 0 24 24">
+               <path d="M11,3v14.2l-3.6-3.6L6,15l6,6l6-6l-1.4-1.4L13,17.2V3H11z"/>
+       </symbol>

 </svg>
 
 <script type="text/javascript">
 </svg>
 
 <script type="text/javascript">


@@ -247,6 +279,7 @@ $(document).ready(function(){
                        document.getElementById("amount_100").innerHTML="100";
                        $("input#250").attr("value", "250");
                        document.getElementById("amount_250").innerHTML="250";
                        document.getElementById("amount_100").innerHTML="100";
                        $("input#250").attr("value", "250");
                        document.getElementById("amount_250").innerHTML="250";

+                       document.getElementById("paymentpaypal").style.visibility = 'visible';

                }
                else if ($(this).val() == "monthly") {
                        $("input#10").attr("value", "2");
                }
                else if ($(this).val() == "monthly") {
                        $("input#10").attr("value", "2");


@@ -261,6 +294,7 @@ $(document).ready(function(){
                        document.getElementById("amount_100").innerHTML="10";
                        $("input#250").attr("value", "12");
                        document.getElementById("amount_250").innerHTML="12";
                        document.getElementById("amount_100").innerHTML="10";
                        $("input#250").attr("value", "12");
                        document.getElementById("amount_250").innerHTML="12";

+                       document.getElementById("paymentpaypal").style.visibility = 'hidden';

                }
        })
 });
                }
        })
 });

diff --git a/templates/modules/menu.html b/templates/modules/menu.html
index 32673be1240ba76232a6bad945eef2d237ad2905..48377f9ace7c56c92a3c321a75d1b571f7a79010 100644 (file)
--- a/templates/modules/menu.html
+++ b/templates/modules/menu.html
@@ -1,4 +1,4 @@
-<div class="hidden-xl-up">
+<div class="hidden-lg-up">

        <div class="tux">
                <h1>IP<strong>Fire</strong></h1>
        </div>
        <div class="tux">
                <h1>IP<strong>Fire</strong></h1>
        </div>