tor-webwml.git

1) ## translation metadata

2) # Revision: $Revision$

3) # Translation-Priority: 3-low
4) 

5) #include "donatehead.wmi" TITLE="Donate to keep Tor alive!" CHARSET="UTF-8"
6) 

7)   <div class="donation">

8) 

9)     <div class="quote-section">
10)       <div class="container">
11)         <div class="row">

12)           

13)           <div class="col-sm-3 img-section">
14)               <img src="$(IMGROOT)/shari.png" class="img-thumbnail img-responsive champion" alt="Shari Steele">
15)           </div>

16) 

17)           <div class="col-sm-9 col-xs-offset-0">
18)             <blockquote>
19)               Tor is an essential part of the Internet freedom infrastructure, and I'm looking forward to working with the Tor Project to continue to grow the movement.
20)               <footer class="pull-right source-quote"><cite title="Source Title">Shari Steele</cite></footer>
21)             </blockquote>

22)           </div>

23) 

24)         </div><!-- container -->
25)       </div><!-- row -->
26)     </div><!-- quote-section -->
27) 
28)     <div class="paypal-donate">
29)       <div class="container">
30)         <div class="row">
31)           <div class="col-sm-7">
32)             <h2 class="main-text">Your support is critical to our success</h2>
33)             <hr>
34)             <p style="text-align:left;">Donate $23 or more, get swag, take a picture and share it with us via <code><a href="https://twitter.com/search?q=%23SupportTor" target="_blank">#supportTor</a></code> hashtag.</p>
35)               
36)             <noscript class="perks">
37)               <h4 style="text-align:left; padding-top:10px;"><b>Perks</b></h4>
38)               <p style="text-align:left;">Donate $23+ to get a <b>pack of stickers</b></p>
39)               <p style="text-align:left;">Donate $100+ to get a <b>Tor supporter tshirt</b></p>
40)               <p style="text-align:left;">Donate $500+ to get a <b>hoodie</b></p>
41)             </noscript>
42) 

43)             <h4 style="text-align:left; padding-top:10px;"><b>Perks</b></h4>

44)             <div class="col-sm-4 no-padding"><img id="stickers" class="img-responsive half-opacity" src="$(IMGROOT)/swag-stickers-lg.png" alt="stickers"></div>
45)             <div class="col-sm-4 no-padding"><img id="tshirt" class="img-responsive half-opacity" src="$(IMGROOT)/swag-tees-lg.png" alt="tshirt"></div>
46)             <div class="col-sm-4 no-padding"><img id="hoody" class="img-responsive half-opacity" src="$(IMGROOT)/swag-hoody-lg.png" alt="hoody"></div>
47)           </div>
48)           
49)           <div class="donate-section col-sm-5">
50)             <form id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
51)               <div class="row col-md-offset-0 combined-input">
52)                 <div class="left col-xs-6 btn btn-default btn-lg active">
53)                   <label class="choiceLabel">
54)                     <input class="sr-only" name="cmd" id="blankRadio1" type="radio" value="_donations" aria-label="one_time"checked >
55)                     <span>One-time</span>
56)                   </label>
57)                 </div>
58)                 <div class="right col-xs-6 btn btn-default btn-lg ">
59)                   <label class="choiceLabel">
60)                     <input class="sr-only" name="cmd" id="blankRadio2" type="radio" value="_xclick-subscriptions" aria-label="monthly">
61)                     <span>Monthly</span>
62)                   </label>
63)                 </div>

64)               </div>

65) 

66)               <div class="btn-group btn-group-lg" role="group" style="margin-bottom: 30px;">
67)                 <div style="padding-bottom:5px;" class="col-xs-6">
68)                   <button value="10" id="amount10" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn">$10</button>
69)                 </div>
70)                 <div style="padding-bottom:5px;" class="col-xs-6">
71)                   <button value="23" id="amount23" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a sticker!">$23</button>
72)                 </div>
73)                 <div style="padding-bottom:5px;" class="col-xs-6">
74)                   <button value="100" id="amount100" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a tshirt!">$100</button>
75)                 </div>
76)                 <div style="padding-bottom:5px;" class="col-xs-6">
77)                   <button value="256" id="amount256" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a tshirt!">$256</button>
78)                 </div>
79)                 <div style="padding-bottom:5px;" class="col-xs-6">
80)                   <button value="500" id="amount500" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a hoody!">$500</button>
81)                 </div>
82)                 <div class="col-xs-6 form-group-lg">
83)                   <label class="sr-only" for="exampleInputAmount">1</label>
84)                   <div class="input-group">
85)                     <div class="input-group-addon">$</div>
86)                     <input type="number" min="5" step="1" name="custom_amnt" class="form-control" id="exampleInputAmount" placeholder="other amount">
87)                   </div>

88)                 </div>
89)               </div>

90)               <div style="padding: 0 15px;">
91)                 <h5 class="error-msg">The minimum donation amount is $5</h5>
92)                 <button id="donate-btn" class="btn btn-primary btn-lg btn-block donate-button" style="padding:10px;">Donate</button>
93)                 <h5>via PayPal (doesn't require an account)</h5>
94)                 <h4><a href="<page donate/donate-options>">Other Ways to Donate</a></h4>
95)               </div>
96)               
97)               <!-- PAYPAL ESSENTIAL INPUTS -->

98)               <input type="hidden" id="amount" name="amount" value="">
99)               <input type="hidden" id="a3" name="a3" value="0">
100)               <input type="hidden" id="p3" name="p3" value="1">
101)               <input type="hidden" id="t3" name="t3" value="M">
102)               <input type="hidden" name="sra" value="1">
103)               <input type="hidden" name="src" value="1">
104)               <input type="hidden" name="no_shipping" value="1">
105)               <input type="hidden" name="no_note" value="1">
106)               <input type="hidden" name="business" value="donations@torproject.org">
107)               <input type="hidden" id="item_name" name="item_name" value="Donation to the Tor Project">
108)               <input type="hidden" name="return" value="https://www.torproject.org/donate/thankyou">
109)               <input type="hidden" name="cancel_return" value="https://www.torproject.org/getinvolved/volunteer">

110) 

111)             </form>
112)           </div><!-- donate-section -->
113)         </div><!-- row -->
114)       </div><!-- container -->
115)     </div><!-- paypal-donate -->

116)     

117)   </div><!-- donation -->
118) 

119) 

120) 
121)   <script type="text/javascript" src="$(DOCROOT)/js/jquery.min.js"></script>
122)   <script type="text/javascript">
123)   function displayVals() {
124)     var amount = $( this ).filter(".amnt-btn").val();

125)     if (amount == null) {

126)       amount = $("#exampleInputAmount").val();
127)       if ($('#amount').val() == "") {
128)         amount = 23
129)         $( "#amount23" ).addClass('active');
130)       } else if (this.id == "exampleInputAmount") {

131)         $( "button" ).removeClass('active');
132)         $( this ).addClass('active');

133)       }
134)     } else {
135)       $( ".amnt-btn" ).removeClass('active');
136)       $( this ).addClass('active');
137)       $('#amount').val(amount);
138)     }
139)     $('#amount').val(amount);
140)     $('#a3').val(amount);
141)     
142)     $("button[name='amnt']").click(function () {
143)       $(".form-control").val(null);
144)       $(".error-msg").css("display","none");
145)     });
146) 

147) 
148)     // Perks functionality

149)     if (23 <= parseInt($("#amount").val()) && parseInt($("#amount").val()) < 100) {
150)       $("#stickers").css("opacity","1");
151)       $("#tshirt").css("opacity","0.5");
152)       $("#hoody").css("opacity","0.5");
153)     }else if (100 <= parseInt($("#amount").val()) && parseInt($("#amount").val()) < 500) {
154)       $("#tshirt").css("opacity","1");
155)       $("#stickers").css("opacity","0.5");
156)       $("#hoody").css("opacity","0.5");
157)     }else if (500 <= parseInt($("#amount").val())) {
158)       $("#hoody").css("opacity","1");
159)       $("#stickers").css("opacity","0.5");
160)       $("#tshirt").css("opacity","0.5");
161)     }else{
162)       $("#hoody").css("opacity","0.5");
163)       $("#stickers").css("opacity","0.5");
164)       $("#tshirt").css("opacity","0.5");

165)     }

166) 
167)   }
168)   $( document ).ready(function() {
169)     $("button[name='amnt']").click(displayVals);
170)     $("#exampleInputAmount").click(displayVals);
171)     $("#exampleInputAmount").change(displayVals);
172)     displayVals();

173)     

174) 

175)     // Paypal donate validation when changing other amount input 

176)     $("#exampleInputAmount").change(function(){
177)       if ($("#amount").val() == "" || parseInt($("#amount").val()) < 5) {
178)         $(".error-msg").css("display","block");
179)       } else{
180)         $(".error-msg").css("display","none");
181)       }
182)     });
183) 

184)     // Paypal donate validation when clicking on donate button 

185)     $("#donate-btn").click(function(event){
186)       if ($("#amount").val() == "" || parseInt($("#amount").val()) < 5) {
187)         event.preventDefault();
188)         $(".error-msg").css("display","block");
189)       } else{
190)         $(".error-msg").css("display","none");
191)       }
192)     });
193) 

194) 
195)     // monthly or one-time donate functionality

196)     $(".left").click(function(){
197)       $(".left").addClass('active');
198)       $(".right").removeClass('active');
199)     });
200)     $(".right").click(function(){
201)       $(".right").addClass('active');
202)       $(".left").removeClass('active');
203)     });
204)     
205)   });
206) 
207) 
208)   </script>
209)