New donate page draft

2025-02-26 05:05:58 +00:00 · 2015-09-18 21:09:56 +02:00 · 2015-09-18 21:09:56 +02:00 · d24a004760
commit d24a004760
parent 9aabcefb9a
7 changed files with 151 additions and 39 deletions
--- a/css/layout.css
+++ b/css/layout.css
@ -1125,7 +1125,6 @@ small {

 	.dbox.donate ul.amounts li {
 		display: inline-block;
-		margin-left: 15px;
 		}

 	.dbox.donate ul.amounts li label {
--- a/donate/en/donate.wml
+++ b/donate/en/donate.wml
@ -2,29 +2,32 @@
 # Revision: $Revision$
 # Translation-Priority: 3-low

-#include "head.wmi" TITLE="Tor Project: Donate to Tor" CHARSET="UTF-8"
+#include "donatehead.wmi" TITLE="Tor Project: Donate to Tor" CHARSET="UTF-8"
 <div id="content" class="clearfix">
-  <div id="breadcrumbs">
+<!--  <div id="breadcrumbs">
    <a href="<page index>">Home &raquo; </a>
    <a href="<page donate/donate>">Donate</a>
-  </div>
+  </div> -->
 <div id="maincol">
  <h1>Make A Donation</h1>
   <p><strong>Your support is critical to our success.</strong> The
-   Tor Project is a US 501(c)(3) non-profit dedicated to research,
-   development, and education about online anonymity and privacy. Donations
-   to The Tor Project may be tax deductible to persons who are in the
-   US; or who pay taxes in countries with reciprocity with the US on
-   charitable donations. Our tax ID number is 20-8096820. We are listed on
-  <a href="http://www2.guidestar.org/organizations/20-8096820/tor-project.aspx">GuideStar</a>.</p>
+   Tor Project is a US non-profit organization dedicated to research,
+   development, and education about online anonymity and privacy.
+  </p>

 <!-- BEGIN PAYPAL -->
 <script type="text/javascript" src="$(DOCROOT)/js/jquery.min.js"></script>
 <script type="text/javascript">
 function displayVals() {
+		var radioVal = jQuery('input[@name="amount"]:checked').val();
+      if (radioVal == 'other') {
+        jQuery('#amount').show();
+      } else {
+        jQuery('#amount').val("");
+        jQuery('#amount').hide();
+      }
      var t3 = jQuery('#t3').val();
      var amount = jQuery('#amount').val();
-		var radioVal = jQuery('input[@name="amount"]:checked').val();
      if(t3 != 0){
       if( !amount ) {
 		    jQuery('#a3').val(radioVal);
@ -51,6 +54,7 @@ function displayVals() {

 jQuery(function(){
 	jQuery("input[@name='amount']:checked").change(displayVals);
+ 	jQuery("input[name='amount']").click(displayVals);
 	jQuery("#amount").change(displayVals);
 	jQuery("#t3").change(displayVals);
 	displayVals();
@ -59,12 +63,9 @@ jQuery(function(){
 </script>

  <div class="hundred toptwenty">
-    <a name="paypal"></a>
-		<h2>Donate via PayPal</h2>
-	<div class="dbox donate">
+	<div class="dbox donate" style="text-align: center;">
 	   <form id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
 		  <p class="type">
-			<label for="type">Donation Type:</label>
 			<select id="t3" name="t3">
 			 <option value="0">One-time Donation</option>
 			 <option value="M">Monthly Subscription</option>
@ -72,32 +73,27 @@ jQuery(function(){
 			<small id="ppinfo">Does Not Require a PayPal
 Account</small>
 		  </p>
-	      <div class="drow">
-	 		 <div>
-	       <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!"> 
+	      <div class="drow" style="text-align: center;">
+	 		 <div style="text-align: center;">
 			  <ul class="amounts">
-		      <li><input type="radio" class="radio" name="amount" value="5.00"><label for="5">5</label></li>
-		      <li><input type="radio" class="radio" name="amount" value="10.00"><label for="10">10&nbsp;</label></li>
-		      <li><input type="radio" class="radio" name="amount" value="20.00"><label for="20">20&nbsp;</label></li>
-		      <li><input type="radio" class="radio" name="amount" value="50.00"><label for="50">50&nbsp;</label></li>
-		      <li><input type="radio" class="radio" name="amount" value="100.00" checked="checked"><label for="100">100&nbsp;</label></li><br>
-		      <li><input type="radio" class="radio" name="amount" value="250.00"><label for="250">250</label></li>
-		      <li><input type="radio" class="radio" name="amount" value="500.00"><label for="500">500</label></li>
-	  	      <li><input type="radio" class="radio" name="amount" value="1000.00"><label for="1000">1000</label></li>
-		      <li><input type="text" id="amount" class="amount" name="amount"></li>
              <li>
-	        <span>
 		      <select name="currency_code" class="cur">
 			    <option value="USD" selected="selected">$</option>
 			    <option value="EUR">&euro;</option>
 			    <option value="GBP">&pound;</option>
 			    <option value="YEN">&yen;</option>
 			   </select>
-			  </span>
-            </li>
+             </li>
+		      <li><input type="radio" class="radio" name="amount" value="5.00"><label for="5">5&nbsp;</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="23.00"><label for="23">23&nbsp;</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="100.00" checked="checked"><label for="100">100&nbsp;</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="256.00"><label for="256">256</label></li>
+		      <li><input type="radio" class="radio" name="amount" value="500.00"><label for="500">500</label></li>
+		      <li><input id="other" type="radio" class="radio" name="amount" value="other"><label for="other">other</label></li>
+		      <li><input style="display: none;" type="text" id="amount" class="amount" name="amount"></li>
 		    </ul>
 		   </div>
-		   <div>
+		   <div style="text-align: center;">
 			 <input type="hidden" id="a3" name="a3" value="0">
 <!--			 <input class="donate-btn" type="submit" name="donate" value="Donate" alt="Subscribe to Tor with PayPal - it's fast, free and secure!"> -->
 		   </div>
@ -112,21 +108,23 @@ Account</small>
 		     <input type="hidden" name="return" value="https://www.torproject.org/donate/thankyou">
 		     <input type="hidden" name="cancel_return" value="https://www.torproject.org/getinvolved/volunteer">
 		  </div>
+          <div style="text-align: center;">
+	       <input type="image" src="$(IMGROOT)/paypal_logo.gif" name="submit" alt="Subscribe to Tor with PayPal - it's fast, free and secure!"> 
+          </div>
 	 </form>
 	</div>
  </div>
 <!-- END PAYPAL -->
-  <div class="hundred toptwenty">
-		<h2>Other options</h2>
-        We have many other donation and sponsorship <a href="<page donate/donate-options>">options</a> available.
+  <div class="hundred toptwenty" style="text-align: center;">
+        <a href="<page donate/donate-options>">Other ways to donate</a>
  </div>
 <!-- END MAINCOL -->
 </div>
-  <div id = "sidecol">
-#include "side-donate.wmi"
-#include "info.wmi"
-  </div>
+<!--  <div id = "sidecol"> -->
+# include "side-donate.wmi"
+# include "info.wmi"
+<!--  </div> -->
  <!-- END SIDECOL -->
 <!-- END CONTENT -->
 </div>
-#include <foot.wmi>
+# include <foot.wmi>
--- a/en/navigation.wmi
+++ b/en/navigation.wmi
@ -14,6 +14,11 @@
        '<blog>'                      , 'Blog',
 	'about/contact'			, 'Contact',
    );
+    my @donatenav = (
+        'index'                        , 'Home',
+        'about/overview'              , 'About Tor',
+        'about/contact'               , 'Contact',
+    );
    my @calltoaction = (
        'download/download-easy'                , 'Download',
        'getinvolved/volunteer'            , 'Volunteer',
--- a/images/paypal_logo.gif
+++ b/images/paypal_logo.gif
--- a/images/paypal_logo.png
+++ b/images/paypal_logo.png
--- a/include/donatehead.wmi
+++ b/include/donatehead.wmi
@ -0,0 +1,105 @@
+#! /usr/bin/wml
+<: use strict; :>
+<: use warnings; :>
+#use "perl-globals.wmi"
+#use "links.wmi"
+#use "versions.wmi"
+#use "navigation.wmi"
+
+<!DOCTYPE html>
+ <html>
+ <head>
+
+   <meta charset="utf-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   <meta name="author" content="The Tor Project, Inc.">
+   <meta name="keywords" content="anonymity online, tor, tor project, censorship circumvention, traffic analysis, anonymous communications research">
+   <meta property="og:image" content="https://www.torproject.org/images/tor-logo.jpg">
+
+   <title>$(TITLE)</title>
+
+   <link rel="icon" href="$(IMGROOT)/favicon.ico">
+   <ifneq "$(REDIRECT)" "" "<meta http-equiv="refresh" content="0;url=$(DOCROOT)/$(REDIRECT)">">
+   <ifneq "$(REDIRECT_GLOBAL)" "" "<meta http-equiv="refresh" content="0;url=$(REDIRECT_GLOBAL)">">
+
+   # begin WML to generate css/js paths 
+   <ifneq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/$(STYLESHEET)" rel="stylesheet">">
+   <ifeq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/css/master.css" rel="stylesheet">">
+
+   #<link href="css/master.css" rel="stylesheet">
+   <!--[if lte IE 8]>
+   <link href="$(DOCROOT)/css/ie8-and-down.css" rel="stylesheet">
+   <![endif]-->
+   <!--[if lte IE 7]>
+   <link href="$(DOCROOT)/css/ie7-and-down.css" rel="stylesheet">
+   <![endif]-->
+   <!--[if IE 6]>
+   <link href="$(DOCROOT)/css/ie6.css" rel="stylesheet">
+   <![endif]-->
+ #  <script language="javascript" type="text/javascript" src="$(DOCROOT)/global.js"></script>
+   # end WML to generate css/js paths 
+ 
+</head>
+<body>
+<div id="wrap">
+  <div id="header">
+    <h1 id="logo"><a href="<page index>">Tor</a></h1>
+      # navigation menu generation
+      <div id="nav">
+        <ul>
+        <:{
+            # create a hash and maintain order of keys
+            my %donatenav;
+            my @keys;
+            while (@donatenav) {
+              my $key = shift @donatenav;
+              my $val = shift @donatenav;
+              push @keys, $key;
+              $donatenav{$key} = $val;
+            }
+
+            my $page = $WML_SRC_BASENAME;
+            my $lang = "$(LANG)";
+
+            for my $key (@keys) {
+              my ($dir, $base) = $key =~ m,^(?:(.*)/)?(.*?)$,;  
+
+              # in directory of active link, set class active 
+              my $class;
+              if ((defined $dir) and ($WML_SRC_DIRNAME =~/$dir/) or ($WML_SRC_BASENAME eq $base)) {
+                $class = 'class="active"';
+              } else {
+                $class = '';
+              }
+
+	            $dir = '.' unless defined $dir;
+                
+              # translated version
+              if (-e "$(DOCROOT)/$dir/$lang/$base.wml") {
+                  printf '<li><a '.$class.' href="%s">%s</a></li>'."\n",
+                         stripDotSlashs("$(DOCROOT)/$dir/$base.html.$(LANG)"),$donatenav{$key};
+              } 
+              # english version
+              elsif (-e "$(DOCROOT)/$dir/en/$base.wml") {
+              	printf '<li><a '.$class.' href="%s">%s</a></li>'."\n",
+                  stripDotSlashs("$(DOCROOT)/$dir/$base.html"), $donatenav{$key};
+              }
+              # full url
+              elsif ($key =~/^http/) {
+                printf '<li><a href="%s">%s</a></li>'."\n", $key, $donatenav{$key};
+              } else {
+                warn "$WML_SRC_FILENAME has a [page $key] (parses to
+docdir: $(DOCROOT)/; dir: $dir; base: $base -> $(DOCROOT)/$dir/$lang/$base.wml), but that doesn't exist.";
+              }
+            }
+        }:>
+        </ul>
+      </div>
+      <!-- END NAV -->
+     # end navigation generation
+  </div>
+  <!-- END HEADER -->
+
+#<ifneq "$(REDIRECT)" "" "Redirecting to <a href="$(DOCROOT)/$(REDIRECT)">$(DOCROOT)/$(REDIRECT)</a>.">
+#<ifneq "$(REDIRECT_GLOBAL)" "" "Redirecting to <a href="$(REDIRECT_GLOBAL)">$(REDIRECT_GLOBAL)</a>.">
--- a/include/navigation.wmi
+++ b/include/navigation.wmi
@ -14,6 +14,11 @@
        '<blog>'                      , 'Blog',
        'about/contact'               , 'Contact',
    );
+    my @donatenav = (
+        'index'                        , 'Home',
+        'about/overview'              , 'About Tor',
+        'about/contact'               , 'Contact',
+    );
    my @calltoaction = (
        'download/download-easy'           , 'Download',
        'getinvolved/volunteer'            , 'Get Involved',