added "or" line and javascript switching for currency and frequency

[people/shoehn/ipfire.org.git] / templates / donate.html

diff --git a/templates/donate.html b/templates/donate.html
index 2ba97074e1748d3f593397276d03655438051861..13e45f43a44fc56bd4bc509319c9c5970b9d128b 100644 (file)
--- a/templates/donate.html
+++ b/templates/donate.html
@@ -71,8 +71,7 @@
                                                                                </p>
                                                                        </div>
                                                                {% end %}
-                                                               </div>
-                                                               
+                                                               </div>                          
                                                                <div class="col pl-5 pr-5">
                                                                        <div class="card p-3 pt-6">
                                                                                <div class="row">
@@ -106,28 +105,29 @@
                                                                                </div>
                                                                        
                                                                                <div class="row mt-6">
-                                                                                       <div class="inline-card bg-blue-grey-50 w-100 p-5">
+                                                                                       <div class="inline-card bg-blue-grey-50 w-100">
+                                                                                               <div class="or"></div>
                                                                                                <div class="row mb-6">
                                                                                                        <div class="col">
                                                                                                                <h4 class="mb-5">Choose an amount</h4>
-                                                                                                               <div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;">
+                                                                                                               <div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;" id="amount">
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
-                                                                                                                       <label for="10" class="form-check-label amount">10<span class="currency"></span></label>
+                                                                                                                       <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="25" value="25">
-                                                                                                                       <label for="25" class="form-check-label amount">25<span class="currency"></span></label>
+                                                                                                                       <label for="25" class="form-check-label amount"><span id="amount_25">25</span><span class="currency">€</span></label>
                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="50" value="50">
-                                                                                                                       <label for="50" class="form-check-label amount">50<span class="currency"><span class="currency"></label>
+                                                                                                                       <label for="50" class="form-check-label amount"><span id="amount_50">50</span><span class="currency">€</span></label>
                                                                                                                        
-                                                                                                                       <input class="amount-check" type="radio" name="amount" id="50" value="50">
-                                                                                                                       <label for="50" class="form-check-label amount">75<span class="currency"></span></label>
+                                                                                                                       <input class="amount-check" type="radio" name="amount" id="75" value="50">
+                                                                                                                       <label for="50" class="form-check-label amount"><span id="amount_75">75</span><span class="currency">€</span></label>
                                                                                                                
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="100" value="100">
-                                                                                                                       <label for="100" class="form-check-label amount">100<span class="currency"></span></label>
+                                                                                                                       <label for="100" class="form-check-label amount"><span id="amount_100">100</span><span class="currency">€</span></label>
                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="250" value="250">
-                                                                                                                       <label for="250" class="form-check-label amount">250<span class="currency"></span></label>
+                                                                                                                       <label for="250" class="form-check-label amount"><span id="amount_250">250</span><span class="currency">€</span></label>
                                                                                                                </div>                                                                                  
                                                                                                        </div>
                                                                                                        <div class="col">
@@ -222,5 +222,48 @@
                <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>
 </svg>
+
+<script type="text/javascript">
+$(document).ready(function(){
+       $("input[name='currency']").on("change", function(){
+               if ($(this).val() == "euro") {
+                       $('.currency').html('€');
+               }
+               else if ($(this).val() == "usd") {
+                       $('.currency').html('$');
+               }
+       });
+       $("input[name='frequency']").on("change", function(){
+               if ($(this).val() == "single") {
+                       $("input#10").attr("value", "10");
+                       document.getElementById("amount_10").innerHTML="10";
+                       $("input#25").attr("value", "25");
+                       document.getElementById("amount_25").innerHTML="25";
+                       $("input#50").attr("value", "50");
+                       document.getElementById("amount_50").innerHTML="50";
+                       $("input#75").attr("value", "75");
+                       document.getElementById("amount_75").innerHTML="75";
+                       $("input#100").attr("value", "100");
+                       document.getElementById("amount_100").innerHTML="100";
+                       $("input#250").attr("value", "250");
+                       document.getElementById("amount_250").innerHTML="250";
+               }
+               else if ($(this).val() == "monthly") {
+                       $("input#10").attr("value", "2");
+                       document.getElementById("amount_10").innerHTML="2";
+                       $("input#25").attr("value", "3");
+                       document.getElementById("amount_25").innerHTML="3";
+                       $("input#50").attr("value", "5");
+                       document.getElementById("amount_50").innerHTML="5";
+                       $("input#75").attr("value", "7");
+                       document.getElementById("amount_75").innerHTML="7";
+                       $("input#100").attr("value", "10");
+                       document.getElementById("amount_100").innerHTML="10";
+                       $("input#250").attr("value", "12");
+                       document.getElementById("amount_250").innerHTML="12";
+               }
+       })
+});
+</script>
        
 {% end block %}