Browse code

New donate page draft

Sebastian Hahn authored on18/09/2015 21:09:56
Showing7 changed files
... ...
@@ -1125,7 +1125,6 @@ small {
1125 1125
 
1126 1126
 	.dbox.donate ul.amounts li {
1127 1127
 		display: inline-block;
1128
-		margin-left: 15px;
1129 1128
 		}
1130 1129
 
1131 1130
 	.dbox.donate ul.amounts li label {
... ...
@@ -2,29 +2,32 @@
2 2
 # Revision: $Revision$
3 3
 # Translation-Priority: 3-low
4 4
 
5
-#include "head.wmi" TITLE="Tor Project: Donate to Tor" CHARSET="UTF-8"
5
+#include "donatehead.wmi" TITLE="Tor Project: Donate to Tor" CHARSET="UTF-8"
6 6
 <div id="content" class="clearfix">
7
-  <div id="breadcrumbs">
7
+<!--  <div id="breadcrumbs">
8 8
     <a href="<page index>">Home &raquo; </a>
9 9
     <a href="<page donate/donate>">Donate</a>
10
-  </div>
10
+  </div> -->
11 11
 <div id="maincol">
12 12
   <h1>Make A Donation</h1>
13 13
    <p><strong>Your support is critical to our success.</strong> The
14
-   Tor Project is a US 501(c)(3) non-profit dedicated to research,
15
-   development, and education about online anonymity and privacy. Donations
16
-   to The Tor Project may be tax deductible to persons who are in the
17
-   US; or who pay taxes in countries with reciprocity with the US on
18
-   charitable donations. Our tax ID number is 20-8096820. We are listed on
19
-  <a href="http://www2.guidestar.org/organizations/20-8096820/tor-project.aspx">GuideStar</a>.</p>
14
+   Tor Project is a US non-profit organization dedicated to research,
15
+   development, and education about online anonymity and privacy.
16
+  </p>
20 17
 
21 18
 <!-- BEGIN PAYPAL -->
22 19
 <script type="text/javascript" src="$(DOCROOT)/js/jquery.min.js"></script>
23 20
 <script type="text/javascript">
24 21
 function displayVals() {
22
+		var radioVal = jQuery('input[@name="amount"]:checked').val();
23
+      if (radioVal == 'other') {
24
+        jQuery('#amount').show();
25
+      } else {
26
+        jQuery('#amount').val("");
27
+        jQuery('#amount').hide();
28
+      }
25 29
       var t3 = jQuery('#t3').val();
26 30
       var amount = jQuery('#amount').val();
27
-		var radioVal = jQuery('input[@name="amount"]:checked').val();
28 31
       if(t3 != 0){
29 32
        if( !amount ) {
30 33
 		    jQuery('#a3').val(radioVal);
... ...
@@ -51,6 +54,7 @@ function displayVals() {
51 54
 
52 55
 jQuery(function(){
53 56
  	jQuery("input[@name='amount']:checked").change(displayVals);
57
+ 	jQuery("input[name='amount']").click(displayVals);
54 58
  	jQuery("#amount").change(displayVals);
55 59
  	jQuery("#t3").change(displayVals);
56 60
  	displayVals();
... ...
@@ -59,12 +63,9 @@ jQuery(function(){
59 63
 </script>
60 64
 
61 65
   <div class="hundred toptwenty">
62
-    <a name="paypal"></a>
63
-		<h2>Donate via PayPal</h2>
64
-	<div class="dbox donate">
66
+	<div class="dbox donate" style="text-align: center;">
65 67
 	   <form id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
66 68
 		  <p class="type">
67
-			<label for="type">Donation Type:</label>
68 69
 			<select id="t3" name="t3">
69 70
 			 <option value="0">One-time Donation</option>
70 71
 			 <option value="M">Monthly Subscription</option>
... ...
@@ -72,32 +73,27 @@ jQuery(function(){
72 73
 			<small id="ppinfo">Does Not Require a PayPal
73 74
 Account</small>
74 75
 		  </p>
75
-	      <div class="drow">
76
-	 		 <div>
77
-	       <input style="float: right;" type="image" src="$(IMGROOT)/paypal-donate-button.gif" name="submit" alt="Subscribe to Tor with PayPal - it's fast, free and secure!"> 
76
+	      <div class="drow" style="text-align: center;">
77
+	 		 <div style="text-align: center;">
78 78
 			  <ul class="amounts">
79
-		      <li><input type="radio" class="radio" name="amount" value="5.00"><label for="5">5</label></li>
80
-		      <li><input type="radio" class="radio" name="amount" value="10.00"><label for="10">10&nbsp;</label></li>
81
-		      <li><input type="radio" class="radio" name="amount" value="20.00"><label for="20">20&nbsp;</label></li>
82
-		      <li><input type="radio" class="radio" name="amount" value="50.00"><label for="50">50&nbsp;</label></li>
83
-		      <li><input type="radio" class="radio" name="amount" value="100.00" checked="checked"><label for="100">100&nbsp;</label></li><br>
84
-		      <li><input type="radio" class="radio" name="amount" value="250.00"><label for="250">250</label></li>
85
-		      <li><input type="radio" class="radio" name="amount" value="500.00"><label for="500">500</label></li>
86
-	  	      <li><input type="radio" class="radio" name="amount" value="1000.00"><label for="1000">1000</label></li>
87
-		      <li><input type="text" id="amount" class="amount" name="amount"></li>
88 79
               <li>
89
-	        <span>
90 80
 		      <select name="currency_code" class="cur">
91 81
 			    <option value="USD" selected="selected">$</option>
92 82
 			    <option value="EUR">&euro;</option>
93 83
 			    <option value="GBP">&pound;</option>
94 84
 			    <option value="YEN">&yen;</option>
95 85
 			   </select>
96
-			  </span>
97
-            </li>
86
+             </li>
87
+		      <li><input type="radio" class="radio" name="amount" value="5.00"><label for="5">5&nbsp;</label></li>
88
+		      <li><input type="radio" class="radio" name="amount" value="23.00"><label for="23">23&nbsp;</label></li>
89
+		      <li><input type="radio" class="radio" name="amount" value="100.00" checked="checked"><label for="100">100&nbsp;</label></li>
90
+		      <li><input type="radio" class="radio" name="amount" value="256.00"><label for="256">256</label></li>
91
+		      <li><input type="radio" class="radio" name="amount" value="500.00"><label for="500">500</label></li>
92
+		      <li><input id="other" type="radio" class="radio" name="amount" value="other"><label for="other">other</label></li>
93
+		      <li><input style="display: none;" type="text" id="amount" class="amount" name="amount"></li>
98 94
 		    </ul>
99 95
 		   </div>
100
-		   <div>
96
+		   <div style="text-align: center;">
101 97
 			 <input type="hidden" id="a3" name="a3" value="0">
102 98
 <!--			 <input class="donate-btn" type="submit" name="donate" value="Donate" alt="Subscribe to Tor with PayPal - it's fast, free and secure!"> -->
103 99
 		   </div>
... ...
@@ -112,21 +108,23 @@ Account</small>
112 108
 		     <input type="hidden" name="return" value="https://www.torproject.org/donate/thankyou">
113 109
 		     <input type="hidden" name="cancel_return" value="https://www.torproject.org/getinvolved/volunteer">
114 110
 		  </div>
111
+          <div style="text-align: center;">
112
+	       <input type="image" src="$(IMGROOT)/paypal_logo.gif" name="submit" alt="Subscribe to Tor with PayPal - it's fast, free and secure!"> 
113
+          </div>
115 114
 	 </form>
116 115
 	</div>
117 116
   </div>
118 117
 <!-- END PAYPAL -->
119
-  <div class="hundred toptwenty">
120
-		<h2>Other options</h2>
121
-        We have many other donation and sponsorship <a href="<page donate/donate-options>">options</a> available.
118
+  <div class="hundred toptwenty" style="text-align: center;">
119
+        <a href="<page donate/donate-options>">Other ways to donate</a>
122 120
   </div>
123 121
 <!-- END MAINCOL -->
124 122
 </div>
125
-  <div id = "sidecol">
126
-#include "side-donate.wmi"
127
-#include "info.wmi"
128
-  </div>
123
+<!--  <div id = "sidecol"> -->
124
+# include "side-donate.wmi"
125
+# include "info.wmi"
126
+<!--  </div> -->
129 127
   <!-- END SIDECOL -->
130 128
 <!-- END CONTENT -->
131 129
 </div>
132
-#include <foot.wmi>
130
+# include <foot.wmi>
... ...
@@ -14,6 +14,11 @@
14 14
         '<blog>'                      , 'Blog',
15 15
 	'about/contact'			, 'Contact',
16 16
     );
17
+    my @donatenav = (
18
+        'index'                        , 'Home',
19
+        'about/overview'              , 'About Tor',
20
+        'about/contact'               , 'Contact',
21
+    );
17 22
     my @calltoaction = (
18 23
         'download/download-easy'                , 'Download',
19 24
         'getinvolved/volunteer'            , 'Volunteer',
20 25
new file mode 100644
21 26
Binary files /dev/null and b/images/paypal_logo.gif differ
22 27
new file mode 100644
23 28
Binary files /dev/null and b/images/paypal_logo.png differ
24 29
new file mode 100644
... ...
@@ -0,0 +1,105 @@
1
+#! /usr/bin/wml
2
+<: use strict; :>
3
+<: use warnings; :>
4
+#use "perl-globals.wmi"
5
+#use "links.wmi"
6
+#use "versions.wmi"
7
+#use "navigation.wmi"
8
+
9
+<!DOCTYPE html>
10
+ <html>
11
+ <head>
12
+
13
+   <meta charset="utf-8">
14
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
15
+   <meta name="viewport" content="width=device-width, initial-scale=1">
16
+   <meta name="author" content="The Tor Project, Inc.">
17
+   <meta name="keywords" content="anonymity online, tor, tor project, censorship circumvention, traffic analysis, anonymous communications research">
18
+   <meta property="og:image" content="https://www.torproject.org/images/tor-logo.jpg">
19
+
20
+   <title>$(TITLE)</title>
21
+
22
+   <link rel="icon" href="$(IMGROOT)/favicon.ico">
23
+   <ifneq "$(REDIRECT)" "" "<meta http-equiv="refresh" content="0;url=$(DOCROOT)/$(REDIRECT)">">
24
+   <ifneq "$(REDIRECT_GLOBAL)" "" "<meta http-equiv="refresh" content="0;url=$(REDIRECT_GLOBAL)">">
25
+
26
+   # begin WML to generate css/js paths 
27
+   <ifneq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/$(STYLESHEET)" rel="stylesheet">">
28
+   <ifeq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/css/master.css" rel="stylesheet">">
29
+
30
+   #<link href="css/master.css" rel="stylesheet">
31
+   <!--[if lte IE 8]>
32
+   <link href="$(DOCROOT)/css/ie8-and-down.css" rel="stylesheet">
33
+   <![endif]-->
34
+   <!--[if lte IE 7]>
35
+   <link href="$(DOCROOT)/css/ie7-and-down.css" rel="stylesheet">
36
+   <![endif]-->
37
+   <!--[if IE 6]>
38
+   <link href="$(DOCROOT)/css/ie6.css" rel="stylesheet">
39
+   <![endif]-->
40
+ #  <script language="javascript" type="text/javascript" src="$(DOCROOT)/global.js"></script>
41
+   # end WML to generate css/js paths 
42
+ 
43
+</head>
44
+<body>
45
+<div id="wrap">
46
+  <div id="header">
47
+    <h1 id="logo"><a href="<page index>">Tor</a></h1>
48
+      # navigation menu generation
49
+      <div id="nav">
50
+        <ul>
51
+        <:{
52
+            # create a hash and maintain order of keys
53
+            my %donatenav;
54
+            my @keys;
55
+            while (@donatenav) {
56
+              my $key = shift @donatenav;
57
+              my $val = shift @donatenav;
58
+              push @keys, $key;
59
+              $donatenav{$key} = $val;
60
+            }
61
+
62
+            my $page = $WML_SRC_BASENAME;
63
+            my $lang = "$(LANG)";
64
+
65
+            for my $key (@keys) {
66
+              my ($dir, $base) = $key =~ m,^(?:(.*)/)?(.*?)$,;  
67
+
68
+              # in directory of active link, set class active 
69
+              my $class;
70
+              if ((defined $dir) and ($WML_SRC_DIRNAME =~/$dir/) or ($WML_SRC_BASENAME eq $base)) {
71
+                $class = 'class="active"';
72
+              } else {
73
+                $class = '';
74
+              }
75
+
76
+	            $dir = '.' unless defined $dir;
77
+                
78
+              # translated version
79
+              if (-e "$(DOCROOT)/$dir/$lang/$base.wml") {
80
+                  printf '<li><a '.$class.' href="%s">%s</a></li>'."\n",
81
+                         stripDotSlashs("$(DOCROOT)/$dir/$base.html.$(LANG)"),$donatenav{$key};
82
+              } 
83
+              # english version
84
+              elsif (-e "$(DOCROOT)/$dir/en/$base.wml") {
85
+              	printf '<li><a '.$class.' href="%s">%s</a></li>'."\n",
86
+                  stripDotSlashs("$(DOCROOT)/$dir/$base.html"), $donatenav{$key};
87
+              }
88
+              # full url
89
+              elsif ($key =~/^http/) {
90
+                printf '<li><a href="%s">%s</a></li>'."\n", $key, $donatenav{$key};
91
+              } else {
92
+                warn "$WML_SRC_FILENAME has a [page $key] (parses to
93
+docdir: $(DOCROOT)/; dir: $dir; base: $base -> $(DOCROOT)/$dir/$lang/$base.wml), but that doesn't exist.";
94
+              }
95
+            }
96
+        }:>
97
+        </ul>
98
+      </div>
99
+      <!-- END NAV -->
100
+     # end navigation generation
101
+  </div>
102
+  <!-- END HEADER -->
103
+
104
+#<ifneq "$(REDIRECT)" "" "Redirecting to <a href="$(DOCROOT)/$(REDIRECT)">$(DOCROOT)/$(REDIRECT)</a>.">
105
+#<ifneq "$(REDIRECT_GLOBAL)" "" "Redirecting to <a href="$(REDIRECT_GLOBAL)">$(REDIRECT_GLOBAL)</a>.">
... ...
@@ -14,6 +14,11 @@
14 14
         '<blog>'                      , 'Blog',
15 15
         'about/contact'               , 'Contact',
16 16
     );
17
+    my @donatenav = (
18
+        'index'                        , 'Home',
19
+        'about/overview'              , 'About Tor',
20
+        'about/contact'               , 'Contact',
21
+    );
17 22
     my @calltoaction = (
18 23
         'download/download-easy'           , 'Download',
19 24
         'getinvolved/volunteer'            , 'Get Involved',