campaign,de: bootstrap checkout pages
authorJustus Winter <justus@g10code.com>
Fri, 19 May 2017 09:38:39 +0000 (11:38 +0200)
committerJustus Winter <justus@g10code.com>
Fri, 19 May 2017 09:38:39 +0000 (11:38 +0200)
web/donate/checkout-bc.de.org
web/donate/checkout-cc.de.org
web/donate/checkout-se.de.org

index 5bfb401..3b89347 100644 (file)
@@ -1,24 +1,91 @@
-#+TITLE: GnuPG - Donate - Donate Bitcoins
+#                                                    -*- html -*-
+#+TITLE: GnuPG - Spenden - Bitcoins spenden
 #+STARTUP: showall
 #+SETUPFILE: "../share/setup.inc"
 
-* Spenden an das GnuPG Projekt mit Bitcoins
+#+BEGIN_HTML
+<!--custom-page-->  <!-- this disables all standard processing. -->
+  <!-- bootstrap core and site css -->
+  <link href="/share/3rdparty/bootstrap/bootstrap-gnupg.css" rel="stylesheet">
+  <link href="/share/campaign/campaign.css" rel="stylesheet">
 
-  Gespendete Bitcoins gehen an den [[https://www.gnupg.org/verein][GnuPG e.V.]]
+  <script defer src="/share/3rdparty/jquery/jquery.min.js"></script>
+  <script defer src="/share/3rdparty/bootstrap/bootstrap.min.js"></script>
 
-#+BEGIN_HTML
-  <p>
-  Senden Sie Ihre Bitcoins an
-  <a href="bitcoin:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-  ><tt>xxxxxxxxxxxxxxxxx&shy;xxxxxxxxxxxxxxxxx</tt></a>.
-  </p>
-#+END_HTML
+</head>
+  <body lang="en">
+    <!-- Fixed navbar -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+      <div class="container">
 
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed"
+                  data-toggle="collapse" data-target="#navbar"
+                  aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <img class="navbar-brand" alt="GnuPG"
+               src="/share/gnupg-lock-white-250x250.png">
+        </div>
 
-  *Vielen Dank im Vorraus für Ihre Spende.*
+        <div id="navbar" class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="/donate/index.de.html">Home</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </nav>
 
-#+BEGIN_HTML
-  <ul>
-    <li><a href="/index.de.html">Fortsetzen</a></li>
-  </ul>
+    <div class="camp-gutter container">
+      <div class="row">
+        <div class="col-md-7 col-md-offset-2">
+          <h2>Summary</h2>
+          <p>
+           Gespendete Bitcoins gehen an den
+           <a href="https://www.gnupg.org/verein">GnuPG e.V.</a>
+          </p>
+
+          <p>
+           Senden Sie Ihre Bitcoins an
+          <a href="bitcoin:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+          ><tt>xxxxxxxxxxxxxxxxx&shy;xxxxxxxxxxxxxxxxx</tt></a>.
+          </p>
+
+          <p>
+            <strong>Vielen Dank im Vorraus für Ihre Spende.</strong>
+          </p>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-sm-5 col-md-offset-2">
+          <p>
+            <a class="btn btn-default btn-sm" href="/donate/index.de.html">Fortsetzen</a>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="camp-gutter container-fluid" id="camp-footer">
+      <div class="container">
+        <div class="row">
+          <div id="cpyright">
+            <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">
+              <img alt="CC-BY-SA 4.0" style="border: 0"
+                    src="/share/cc-by-sa_80x15.png"/></a>&nbsp;
+            This web page is
+            Copyright 2017 The GnuPG Project and licensed under a
+            <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
+            Creative Commons Attribution-ShareAlike 4.0 International License</a>.  See
+            <a href="/copying.html">copying</a> for details.
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </body>
+</html>
 #+END_HTML
index 04735d0..5c7b7e0 100644 (file)
+#                                                    -*- html -*-
 #+TITLE: GnuPG - Spenden - Zahlen mit Kreditkarte
 #+STARTUP: showall
 #+SETUPFILE: "../share/setup.inc"
 
 #+BEGIN_HTML
 <!--custom-page-->  <!-- this disables all standard processing. -->
-<link rel="stylesheet" href="/share/site.css" type="text/css" />
+  <!-- bootstrap core and site css -->
+  <link href="/share/3rdparty/bootstrap/bootstrap-gnupg.css" rel="stylesheet">
+  <link href="/share/campaign/campaign.css" rel="stylesheet">
+
+  <script defer src="/share/3rdparty/jquery/jquery.min.js"></script>
+  <script defer src="/share/3rdparty/bootstrap/bootstrap.min.js"></script>
+
 </head>
-<body lang="en">
+  <body lang="en">
+<style>
+.control-label {
+  padding-top: 0 !important;
+}
+
+.form-control-static {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 0 !important;
+}
+</style>
+    <!-- Fixed navbar -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+      <div class="container">
+
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed"
+                  data-toggle="collapse" data-target="#navbar"
+                  aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <img class="navbar-brand" alt="GnuPG"
+               src="/share/gnupg-lock-white-250x250.png">
+        </div>
 
-<p>
-Informationen zu Ihrer gewünschten Spende:
-</p>
+        <div id="navbar" class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="/donate/index.de.html">Home</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </nav>
 
-<table border="0" cellpadding="0" cellspacing="4" id="checkoutSummary">
- <tr>
-   <td align="right">Betrag:</td>
-   <td><!--AMOUNT-->
-       <!--CURRENCY-->
-       <!--RECUR_TEXT--></td>
- </tr>
- <tr>
-   <td align="right">Name:</td>
-   <td><!--NAME--></td>
- </tr>
- <tr>
-   <td align="right">E-Mail:</td>
-   <td><!--MAIL--></td>
- </tr>
- <tr>
-   <td align="right" valign="top">Nachricht:</td>
-   <td><!--MESSAGE_FMT--></td>
- </tr>
-</table>
+    <div class="camp-gutter container">
+      <div class="row">
+        <div class="col-md-7 col-md-offset-2">
+          <h2>Summary</h2>
+          <p>Informationen zu Ihrer gewünschten Spende:</p>
+          <form class="form-horizontal">
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Betrag</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--AMOUNT--> <!--CURRENCY--> <!--RECUR_TEXT--></p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Name</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--NAME--></p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">E-Mail</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--MAIL--></p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Nachricht</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--MESSAGE_FMT--></p>
+              </div>
+            </div>
+          </form>
+          <p>
+           Falls etwas nicht korrekt ist, benutzen Sie bitte den
+           Zurück-Knopf weiter unten auf dieser Seite.  Wenn die
+           Daten korrekt sind, können sie nun mit der Spende
+           fortfahren.
+          </p>
 
-<p>
-  Falls etwas nicht korrekt ist, benutzen Sie bitte den Zurück-Knopf
-  weiter unten auf dieser Seite.  Wenn die Daten korrekt sind, können
-  sie nun mit der Spende fortfahren.
-</p>
+          <noscript>
+            <div class="alert alert-danger" role="alert">
+              <p>
+               <strong>Bitte schalten Sie Javascript ein.</strong>
+               Aus Sicherheitsgründen ist es empfehlenswert
+               Javascript im Browser abzuschalten.  Wir möchten
+               jedoch die Kreditkarteninformationen nicht selbst
+               verarbeiten, sondern den Services eines
+               Zahlungsabwicklers in Anspruch nehmen und die
+               sensiblen Informationen direkt von Ihrem Browser an
+               diese übermitteln.  Bitte schalten Sie deswegen
+               Javascript für <emph>gnupg.org</emph>
+               und <emph>stripe.com</emph> ein.
+              </p>
+            </div>
+          </noscript>
 
-  <noscript>
-    <p>
-      <strong>Bitte schalten Sie Javascript ein.</strong>
-    </p>
-    <p id="smallnote">
-      Aus Sicherheitsgründen ist es empfehlenswert Javascript im
-      Browser abzuschalten.  Wir möchten jedoch die
-      Kreditkarteninformationen nicht selbst verarbeiten, sondern den
-      Services eines Zahlungsabwicklers in Anspruch nehmen und die
-      sensiblen Informationen direkt von Ihrem Browser an diese
-      übermitteln.  Bitte schalten Sie deswegen Javascript
-      für <emph>gnupg.org</emph> und <emph>stripe.com</emph> ein.
-    </p>
-  </noscript>
+        </div>
+      </div>
+      <div class="row">
+        <!-- ERRORSTR -->
+      </div>
+      <div class="row">
+        <div class="col-sm-5 col-md-offset-2">
+          <p>
+            <form action="/cgi-bin/procdonate.cgi" method="POST" class="form-inline">
+              <input type="hidden" name="mode" value="checkout-stripe">
+              <input type="hidden" name="sessid" value="<!--SESSID-->">
+              <script
+                src="https://checkout.stripe.com/checkout.js"
+                class="stripe-button"
+                data-key="<!--STRIPEPUBKEY-->"
+                data-image="/share/gnupg-badge-128x128.png"
+                data-name="GnuPG"
+                data-description="Spende an das GnuPG Projekt"
+                data-locale="<!--STRIPELOCALE-->"
+                data-amount="<!--STRIPEAMOUNT-->"
+                data-currency="<!--CURRENCY-->"
+                data-panel-label="Donate {{amount}} <!--RECUR_TEXT-->"
+                data-label="<!--STRIPE_DATA_LABEL_VALUE-->"
+                <!--STRIPE_DATA_EMAIL-->
+              >
+              </script>
+            </form>
+          </p>
+          <p>
+            <form action="/cgi-bin/procdonate.cgi" method="POST" class="form-inline">
+              <input type="hidden" name="mode" value="re-main">
+              <input type="hidden" name="sessid" value="<!--SESSID-->">
+              <input type="hidden" name="lang" value="<!--LANG-->">
+              <input type="submit" class="btn btn-default btn-sm" value="Back" />
+            </form>
+          </p>
+        </div>
+      </div>
+    </div>
 
-  <!--ERRORSTR-->
-  <div class="buttonbox">
-  <p>
-    <form action="/cgi-bin/procdonate.cgi" method="POST">
-      <input type="hidden" name="mode" value="checkout-stripe">
-      <input type="hidden" name="sessid" value="<!--SESSID-->">
-      <script
-        src="https://checkout.stripe.com/checkout.js"
-        class="stripe-button"
-        data-key="<!--STRIPEPUBKEY-->"
-        data-image="/share/gnupg-badge-128x128.png"
-        data-name="GnuPG"
-        data-description="Donation to the GnuPG project"
-        data-locale="<!--STRIPELOCALE-->"
-        data-amount="<!--STRIPEAMOUNT-->"
-        data-currency="<!--CURRENCY-->"
-        data-panel-label="Donate {{amount}} <!--RECUR_TEXT-->"
-        data-label="<!--STRIPE_DATA_LABEL_VALUE-->"
-        <!--STRIPE_DATA_EMAIL-->
-      >
-      </script>
-    </form>
-  </p>
-  <form action="/cgi-bin/procdonate.cgi" method="POST">
-    <input type="hidden" name="mode" value="re-main">
-    <input type="hidden" name="sessid" value="<!--SESSID-->">
-    <input type="hidden" name="lang" value="<!--LANG-->">
-    <input type="submit" class="donate-button-low" value="Zurück" />
-  </form>
-  </div>
+    <div class="camp-gutter container-fluid" id="camp-footer">
+      <div class="container">
+        <div class="row">
+          <div id="cpyright">
+            <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">
+              <img alt="CC-BY-SA 4.0" style="border: 0"
+                    src="/share/cc-by-sa_80x15.png"/></a>&nbsp;
+            This web page is
+            Copyright 2017 The GnuPG Project and licensed under a
+            <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
+            Creative Commons Attribution-ShareAlike 4.0 International License</a>.  See
+            <a href="/copying.html">copying</a> for details.
+          </div>
+        </div>
+      </div>
+    </div>
 
-</body>
+  </body>
 </html>
 #+END_HTML
index a42218e..a4c32dd 100644 (file)
-#+TITLE: GnuPG - Donate - Checkout using SEPA
+#                                                    -*- html -*-
+#+TITLE: GnuPG - Spenden - Zahlen mit SEPA
 #+STARTUP: showall
 #+SETUPFILE: "../share/setup.inc"
 
-* Spenden an das GnuPG Projekt mit SEPA
+#+BEGIN_HTML
+<!--custom-page-->  <!-- this disables all standard processing. -->
+  <!-- bootstrap core and site css -->
+  <link href="/share/3rdparty/bootstrap/bootstrap-gnupg.css" rel="stylesheet">
+  <link href="/share/campaign/campaign.css" rel="stylesheet">
 
-  Mit SEPA-Überweisungen kann man Geld zwischen den 34
-  Mitgliedsstaaten der EU sowie sechs angegliederten Staaten
-  transferieren.
+  <script defer src="/share/3rdparty/jquery/jquery.min.js"></script>
+  <script defer src="/share/3rdparty/bootstrap/bootstrap.min.js"></script>
 
-#+BEGIN_HTML
-  <table border="0" cellpadding="0" cellspacing="4" id="checkoutSummary">
-   <tr>
-     <td align="right">Name:&nbsp;</td>
-     <td><!--NAME--></td>
-   </tr>
-   <tr>
-     <td align="right">E-Mail:&nbsp;</td>
-     <td><!--MAIL--></td>
-   </tr>
-   <tr>
-     <td align="right" valign="top">Nachricht:&nbsp;</td>
-     <td><!--MESSAGE_FMT--></td>
-   </tr>
-  </table>
-#+END_HTML
+</head>
+  <body lang="en">
+    <style>
+.control-label {
+  padding-top: 0 !important;
+}
 
-  Bitte überweisen Sie Ihre Spende auf dieses Konto:
+.form-control-static {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 0 !important;
+}
+    </style>
 
-#+BEGIN_HTML
-  <table border="0" cellpadding="0" cellspacing="4" id="checkoutSummary">
-   <tr>
-     <td align="right">Kontoinhaber:&nbsp;</td>
-     <td>g10 Code GmbH</td>
-   </tr>
-   <tr>
-     <td align="right">IBAN:&nbsp;</td>
-     <td>DE76 3015 0200 0002 1086 03</td>
-   </tr>
-   <tr>
-     <td align="right">BIC:&nbsp;</td>
-     <td>WELADED1KSD</td>
-   </tr>
-   <tr>
-     <td align="right">Verwendungszweck:&nbsp;</td>
-     <td><!--SEPA_REF--></td>
-   </tr>
-   <tr>
-     <td align="right">Betrag:&nbsp;</td>
-     <td><!--AMOUNT-->
-         EUR</td>
-   </tr>
-  </table>
-#+END_HTML
+    <!-- Fixed navbar -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+      <div class="container">
 
-  Bitte achten Sie darauf, dass die unter Verwendungszweck angegebene
-  Referenznummer stimmt, damit wir Ihre Spende zuordnen können und Sie
-  in der Liste der Spender aufführen können, falls Sie das wünschen.
-  Die Referenznummer verliert ihre Gültigkeit nach 30 Tagen, bitte
-  überweisen Sie rechtzeitig.  Sie können einen anderen Betrag
-  überweisen, aber bitte überweisen Sie mindestens 5 Euro damit wir
-  unsere Verwaltungskosten decken können.  Sie können die
-  Referenznummer auch für Daueraufträge verwenden.
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed"
+                  data-toggle="collapse" data-target="#navbar"
+                  aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <img class="navbar-brand" alt="GnuPG"
+               src="/share/gnupg-lock-white-250x250.png">
+        </div>
 
-  *Vielen Dank im Vorraus für Ihre Spende.*
+        <div id="navbar" class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="/donate/index.de.html">Home</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </nav>
 
-#+BEGIN_HTML
-  <ul>
-    <li><a href="/index.de.html">Fortsetzen</a></li>
-  </ul>
+    <div class="camp-gutter container">
+      <div class="row">
+        <div class="col-md-7 col-md-offset-2">
+          <h2>Übersicht</h2>
+          <p>
+           Mit SEPA-Überweisungen kann man Geld zwischen den 34
+           Mitgliedsstaaten der EU sowie sechs angegliederten Staaten
+           transferieren.
+          </p>
+          <form class="form-horizontal">
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Name</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--NAME--></p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Mail</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--MAIL--></p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Message</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--MESSAGE_FMT--></p>
+              </div>
+            </div>
+          </form>
+
+          <p>
+           Bitte überweisen Sie Ihre Spende auf dieses Konto:
+          </p>
+
+          <form class="form-horizontal">
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Kontoinhaber</label>
+              <div class="col-sm-9">
+                <p class="form-control-static">g10 Code GmbH</p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">IBAN</label>
+              <div class="col-sm-9">
+                <p class="form-control-static">DE76 3015 0200 0002 1086 03</p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">BIC</label>
+              <div class="col-sm-9">
+                <p class="form-control-static">WELADED1KSD</p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Verwendungszweck</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--SEPA_REF--></p>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Betrag</label>
+              <div class="col-sm-9">
+                <p class="form-control-static"><!--AMOUNT--> EUR</p>
+              </div>
+            </div>
+          </form>
+
+          <p>
+           Bitte achten Sie darauf, dass die unter Verwendungszweck
+           angegebene Referenznummer stimmt, damit wir Ihre Spende
+           zuordnen können und Sie in der Liste der Spender aufführen
+           können, falls Sie das wünschen.  Die Referenznummer
+           verliert ihre Gültigkeit nach 30 Tagen, bitte überweisen
+           Sie rechtzeitig.  Sie können einen anderen Betrag
+           überweisen, aber bitte überweisen Sie mindestens 5 Euro
+           damit wir unsere Verwaltungskosten decken können.  Sie
+           können die Referenznummer auch für Daueraufträge
+           verwenden.
+          </p>
+          <p>
+            <strong>Vielen Dank im Vorraus für Ihre Spende.</strong>
+          </p>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-sm-5 col-md-offset-2">
+          <p>
+            <a class="btn btn-default btn-sm" href="/donate/index.de.html">Fortsetzen</a>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="camp-gutter container-fluid" id="camp-footer">
+      <div class="container">
+        <div class="row">
+          <div id="cpyright">
+            <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">
+              <img alt="CC-BY-SA 4.0" style="border: 0"
+                    src="/share/cc-by-sa_80x15.png"/></a>&nbsp;
+            This web page is
+            Copyright 2017 The GnuPG Project and licensed under a
+            <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
+            Creative Commons Attribution-ShareAlike 4.0 International License</a>.  See
+            <a href="/copying.html">copying</a> for details.
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </body>
+</html>
 #+END_HTML