summaryrefslogtreecommitdiff
path: root/talermerchantdemos/donations/templates
diff options
context:
space:
mode:
authorChristian Grothoff <christian@grothoff.org>2020-10-11 16:15:15 +0200
committerChristian Grothoff <christian@grothoff.org>2020-10-11 16:15:15 +0200
commitaa06ddd3cf1de03922fc4e45e46ef3476a69e3f8 (patch)
treec1b72c6ac23d657b0ca0eddf7078813731333cef /talermerchantdemos/donations/templates
parent449f1d5765ffffcf2c708f4ccf6278e9c79081d0 (diff)
downloadtaler-merchant-demos-aa06ddd3cf1de03922fc4e45e46ef3476a69e3f8.tar.gz
taler-merchant-demos-aa06ddd3cf1de03922fc4e45e46ef3476a69e3f8.tar.bz2
taler-merchant-demos-aa06ddd3cf1de03922fc4e45e46ef3476a69e3f8.zip
add i18n and new menu structure to donations page
Diffstat (limited to 'talermerchantdemos/donations/templates')
-rw-r--r--talermerchantdemos/donations/templates/base.html55
-rw-r--r--talermerchantdemos/donations/templates/base.html.j2115
-rw-r--r--talermerchantdemos/donations/templates/checkout.html59
-rw-r--r--talermerchantdemos/donations/templates/checkout.html.j246
-rw-r--r--talermerchantdemos/donations/templates/error.html22
-rw-r--r--talermerchantdemos/donations/templates/error.html.j224
-rw-r--r--talermerchantdemos/donations/templates/fulfillment.html11
-rw-r--r--talermerchantdemos/donations/templates/fulfillment.html.j222
-rw-r--r--talermerchantdemos/donations/templates/index.html42
-rw-r--r--talermerchantdemos/donations/templates/index.html.j244
-rw-r--r--talermerchantdemos/donations/templates/provider-not-supported.html.j2 (renamed from talermerchantdemos/donations/templates/provider-not-supported.html)0
11 files changed, 251 insertions, 189 deletions
diff --git a/talermerchantdemos/donations/templates/base.html b/talermerchantdemos/donations/templates/base.html
deleted file mode 100644
index 7456dca..0000000
--- a/talermerchantdemos/donations/templates/base.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!--
- This file is part of GNU TALER.
- Copyright (C) 2014, 2015, 2016 INRIA
-
- TALER is free software; you can redistribute it and/or modify it under the
- terms of the GNU Lesser General Public License as published by the Free Software
- Foundation; either version 2.1, or (at your option) any later version.
-
- TALER is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
-
- You should have received a copy of the GNU Lesser General Public License along with
- TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
--->
-
-<html data-taler-nojs="true">
-<head>
- <title>Taler Donation Demo</title>
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pure.css') }}" />
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='demo.css') }}" />
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='taler-fallback.css') }}" id="taler-presence-stylesheet" />
- {% block styles %}{% endblock %}
- {% block scripts %}{% endblock %}
-</head>
-
-<body>
- <div class="demobar">
- <h1><span class="tt adorn-brackets">Taler Demo</span></h1>
- <h1><span class="it"><a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS') }}">Donations</a></span></h1>
- <p>This is the donation page, you can make donations (with an imaginary currency for now) to free software projects.</p>
- <ul>
- <li><a href="{{ env('TALER_ENV_URL_INTRO', '#') }}">Introduction</a></li>
- <li><a href="{{ env('TALER_ENV_URL_BANK', '#') }}">Bank</a></li>
- <li><a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG', '#') }}">Essay Shop</a></li>
- <li><a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') }}">Donations</a></li>
- <li><a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') }}">Tipping/Survey</a></li>
- <li><a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') }}">Back-office</a></li>
- </ul>
- <p>You can learn more about Taler on our main <a href="https://taler.net">website</a>.</p>
- </div>
-
- <section id="main" class="content">
- {% block main %}
- This is the main content of the page.
- {% endblock %}
- <hr />
- <div class="copyright">
- <p>Copyright &copy; 2014&mdash;2017 INRIA</p>
- <a href="/javascript" data-jslicense="1" class="jslicenseinfo">JavaScript license information</a>
- </div>
- </section>
-</body>
-</html>
diff --git a/talermerchantdemos/donations/templates/base.html.j2 b/talermerchantdemos/donations/templates/base.html.j2
new file mode 100644
index 0000000..b67658b
--- /dev/null
+++ b/talermerchantdemos/donations/templates/base.html.j2
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!--
+ This file is part of GNU TALER.
+ Copyright (C) 2014, 2015, 2016, 2020 Taler Systems SA
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU Lesser General Public License as published by the Free Software
+ Foundation; either version 2.1, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License along with
+ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+-->
+
+<html data-taler-nojs="true">
+<head>
+ <title>{{ gettext("Taler Donation Demo") }}</title>
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pure.css') }}" />
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='demo.css') }}" />
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='navbar.css') }}" />
+ <style>
+ .warn {
+ background-color: #aa393977;
+ padding: 1em;
+ }
+ @keyframes hoveranim {
+ from {left:0;}
+ to {left:1vw;}
+ }
+ @keyframes hoveranimrevert {
+ from {left:1vw;}
+ to {left:0;}
+ }
+ .notice {
+ border-radius: 1em;
+ background: #0333;
+ border-left: 0.3em solid #033;
+ padding-left: 1em;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ margin-top: 2em;
+ margin-bottom: 2em;
+ }
+ .notice {
+ position: relative;
+ left: 0;
+ animation-name: hoveranimrevert;
+ animation-duration: 1s;
+ }
+ .notice:hover {
+ left: 1vw;
+ animation-name: hoveranim;
+ animation-duration: 1s;
+ }
+ #main a:link, #main a:visited, #main a:hover, #main a:active {
+ color: black;
+ }
+ </style>
+
+ {% block styles %}{% endblock %}
+ {% block scripts %}{% endblock %}
+</head>
+
+<body>
+ <header class="demobar" style="display: flex; flex-direction: column;">
+ <h1><span class="tt adorn-brackets">{{ gettext("Taler Demo") }}</span></h1>
+ <h1><span class="it"><a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS') }}">{{gettext("Donations")}}</a></span></h1>
+ <p>{{
+ gettext ("This is the donation page.") + "<br>" +
+ gettext ("Using this page you can make donations (in an imaginary currency) to Free Software projects.")
+ }}
+ </p>
+ </header>
+
+ <div style="display:flex; flex-direction: column;" class="navcontainer">
+ <nav class="demolist">
+ <a href="{{ env('TALER_ENV_URL_INTRO', '#') }}">{{gettext("Introduction")}}</a>
+ <a href="{{ env('TALER_ENV_URL_BANK', '#') }}">{{gettext("Bank")}}</a>
+ <a href="{{ env('TALER_ENV_URL_MERCHANT_BLOG', '#') }}">{{gettext("Essay Shop")}}</a>
+ <a href="{{ env('TALER_ENV_URL_MERCHANT_DONATIONS', '#') }}" class="active>">{{gettext("Donations")}}</a>
+ <a href="{{ env('TALER_ENV_URL_MERCHANT_SURVEY', '#') }}">{{gettext("Tipping/Survey")}}</a>
+ <!-- a href="{{ env('TALER_ENV_URL_BACKOFFICE', '#') }}">{{gettext("Back-office")}}</a -->
+ <span class="right">
+ {{ gettext("English [en]") }}
+ <!-- <input type="checkbox"> -->
+ <div class="nav">
+ <br>
+ <!--<hr style="width: 100%;">-->
+ {% if lang != 'en' %}
+ <a href="/en/" class="navbtn">English [en]</a><br>
+ {% endif %}
+ {% if lang != 'de' %}
+ <a href="/de/" class="navbtn">Deutsch [de]</a><br>
+ {% endif %}
+ </div>
+ </span>
+ </nav>
+ </div>
+
+ <section id="main" class="content">
+ {% block main %}
+ This is the main content of the page.
+ {% endblock %}
+ <hr />
+ <div>
+ <p>{{ gettext('You can learn more about Taler on our main <a href="{site}">website</a>.').format(site="https://taler.net/") }}</p>
+ <div style="flex-grow:1"></div>
+ <p>Copyright &copy; 2014&mdash;2020 Taler Systems SA</p>
+ </div>
+ </section>
+</body>
+</html>
diff --git a/talermerchantdemos/donations/templates/checkout.html b/talermerchantdemos/donations/templates/checkout.html
deleted file mode 100644
index 5c3e116..0000000
--- a/talermerchantdemos/donations/templates/checkout.html
+++ /dev/null
@@ -1,59 +0,0 @@
-{% extends "templates/base.html" %}
-
-{% block main %}
-<article>
- <h1>Select your payment method</h1>
-
- <p>
- This is an example for a "checkout" page of a Web shop.
- On the previous page, you have created the shopping cart
- and decided which product to buy (i.e. which project to
- donate KUDOS to). Now in this page, you are asked to
- select a payment option. As Taler is not yet universally
- used, we expect merchants will offer various payment options.
- </p>
- <p>
- The page also demonstrates how to only enable (or show) the Taler
- option if Taler is actually supported by the browser. For example,
- if you disable the Taler extension now, the Taler payment option
- will be disabled in the page. Naturally, you could also trivially
- hide the Taler option entirely by changing the visibility instead.
- </p>
- <p>
- Note that you MUST select Taler here for the demo to continue,
- as the other payment options are just placeholders and not
- really working in the demonstration. Also, it is of course
- possible to ask the user to make this choice already on the
- previous page (with the shopping cart), we just separated the
- two steps to keep each step as simple as possible.
- </p>
-
- <form name="tform" action="{{ url_for('donate') }}" method="get">
- <div id="opt-form" align="left"><br>
- <input type="hidden" name="donation_receiver" value="{{ donation_receiver }}">
- <input type="hidden" name="donation_amount" value="{{ donation_amount }}">
- <input type="hidden" name="donation_donor" value="{{ donation_donor }}">
-
- <input type="radio" name="payment_system" value="lisa" id="radio-lisa">
- <label for="radio-lisa">Lisa</input>
- <br/>
-
- <input type="radio" name="payment_system" value="ycard" id="radio-ycard">
- <label for="radio-ycard">You Card</label>
- <br/>
-
- <input type="radio" name="payment_system" value="cardme" id="radio-cardme">
- <label for="radio-cardme">Card Me</label>
- <br/>
-
- <input type="radio" name="payment_system" value="taler" checked id="radio-taler">
- <label for=radio-taler">Taler</label>
- <br/>
-
- <input id="select-payment-method" type="submit" value="Ok"></input>
- </div>
- </form>
-
-</article>
-
-{% endblock main %}
diff --git a/talermerchantdemos/donations/templates/checkout.html.j2 b/talermerchantdemos/donations/templates/checkout.html.j2
new file mode 100644
index 0000000..5251fdf
--- /dev/null
+++ b/talermerchantdemos/donations/templates/checkout.html.j2
@@ -0,0 +1,46 @@
+{% extends "templates/base.html.j2" %}
+
+{% block main %}
+<article>
+ <h1>{{ gettext("Select your payment method") }}</h1>
+
+ <p>
+ {{
+ gettext('This is an example for a "checkout" page of a Web shop. On the previous page, you have created the shopping cart and decided which product to buy (i.e. which project to donate KUDOS to). Now in this page, you are asked to select a payment option. As Taler is not yet universally used, we expect merchants will offer various payment options.')
+ }}
+ </p>
+ <p>
+ {{
+ gettext('Note that you MUST select Taler here for the demo to continue, as the other payment options are just placeholders and not really working in the demonstration. Also, it is of course possible to ask the user to make this choice already on the previous page (with the shopping cart), we just separated the two steps to keep each step as simple as possible.')
+ }}
+ </p>
+
+ <form name="tform" action="{{ url_for('donate',lang=lang) }}" method="get">
+ <div id="opt-form" align="left"><br>
+ <input type="hidden" name="donation_receiver" value="{{ donation_receiver }}">
+ <input type="hidden" name="donation_amount" value="{{ donation_amount }}">
+ <input type="hidden" name="donation_donor" value="{{ donation_donor }}">
+
+ <input type="radio" name="payment_system" value="lisa" id="radio-lisa">
+ <label for="radio-lisa">Lisa</input>
+ <br/>
+
+ <input type="radio" name="payment_system" value="ycard" id="radio-ycard">
+ <label for="radio-ycard">You Card</label>
+ <br/>
+
+ <input type="radio" name="payment_system" value="cardme" id="radio-cardme">
+ <label for="radio-cardme">Card Me</label>
+ <br/>
+
+ <input type="radio" name="payment_system" value="taler" checked id="radio-taler">
+ <label for=radio-taler">Taler</label>
+ <br/>
+
+ <input id="select-payment-method" type="submit" value="{{gettext("Confirm selection")}}"></input>
+ </div>
+ </form>
+
+</article>
+
+{% endblock main %}
diff --git a/talermerchantdemos/donations/templates/error.html b/talermerchantdemos/donations/templates/error.html
deleted file mode 100644
index 0d4bd02..0000000
--- a/talermerchantdemos/donations/templates/error.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{% extends "templates/base.html" %}
-{% block main %}
- <h1>An Error Occurred</h1>
-
- <p>{{ message }}</p>
-
- {% if status_code %}
- <p>The backend returned status code {{ status_code }}.</p>
- {% endif %}
-
- {% if json %}
- <p>Backend Response:</p>
- <pre>{{ json }}</pre>
- {% endif %}
-
- {% if stack %}
- <p>Stack trace:</p>
- <pre>
- {{ stack }}
- </pre>
- {% endif %}
-{% endblock main %}
diff --git a/talermerchantdemos/donations/templates/error.html.j2 b/talermerchantdemos/donations/templates/error.html.j2
new file mode 100644
index 0000000..ffc2e1f
--- /dev/null
+++ b/talermerchantdemos/donations/templates/error.html.j2
@@ -0,0 +1,24 @@
+{% extends "templates/base.html.j2" %}
+{% block main %}
+ <h1>{{ gettext("Error encountered") }}</h1>
+
+ <p>{{ message }}</p>
+
+ {% if status_code %}
+ <p>
+ {{ gettext ("The backend returned status code {code}.").format(code=status_code) }}.
+ </p>
+ {% endif %}
+
+ {% if json %}
+ <p>{{gettext("Backend response:")}}</p>
+ <pre>{{ json }}</pre>
+ {% endif %}
+
+ {% if stack %}
+ <p>{{gettext("Stack trace:")}}</p>
+ <pre>
+ {{ stack }}
+ </pre>
+ {% endif %}
+{% endblock main %}
diff --git a/talermerchantdemos/donations/templates/fulfillment.html b/talermerchantdemos/donations/templates/fulfillment.html
deleted file mode 100644
index 17d8cd8..0000000
--- a/talermerchantdemos/donations/templates/fulfillment.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "templates/base.html" %}
-
-{% block main %}
-<h1>Donation Receipt</h1>
-<p> Thank you, <strong>{{ donation_donor }}</strong>, for donating <strong>{{ donation_amount }}</strong> to <strong>{{ donation_receiver }}</strong>.</p>
-
-<p>Please keep the order identifier <strong>{{ order_id }}</strong> as a receipt for your donation. You can show other people that you donated
-by sharing <a href={{ request.url }}>this link</a> with them.</p>
-
-<p>You can always make <a href="{{ url_for('index') }}">another donation</a></p>
-{% endblock main %}
diff --git a/talermerchantdemos/donations/templates/fulfillment.html.j2 b/talermerchantdemos/donations/templates/fulfillment.html.j2
new file mode 100644
index 0000000..df9f30b
--- /dev/null
+++ b/talermerchantdemos/donations/templates/fulfillment.html.j2
@@ -0,0 +1,22 @@
+{% extends "templates/base.html.j2" %}
+
+{% block main %}
+<h1>{{ gettext("Donation Receipt") }}</h1>
+<p>
+ {{
+ gettext("Thank you, <strong>{donor}</strong>, for donating <strong>{amount}</strong> to <strong>{receiver}</strong>.").format(donor=donation_donor,amount=donation_amount,receiver=donation_receiver)
+ }}
+</p>
+<p>
+ {{
+ gettext("Please keep the order identifier <strong>{id}</strong> as a receipt for your donation.").format(id=order_id) +
+ gettext('You can show other people that you donated by sharing <a href="{link}">this link</a> with them.').format(link=request.url)
+ }}
+</p>
+
+<p>
+ {{
+ gettext('You can always make <a href="{link}">another donation</a>.').format(link=url_for('index'))
+ }}
+</p>
+{% endblock main %}
diff --git a/talermerchantdemos/donations/templates/index.html b/talermerchantdemos/donations/templates/index.html
deleted file mode 100644
index cbb3c35..0000000
--- a/talermerchantdemos/donations/templates/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
-{% extends "templates/base.html" %}
-
-{% block main %}
-<h1 lang="en">Welcome to the Taler Donation "Shop" Demo</h1>
-
-<p>This toy donations website shows the user experience for donations with Taler.
-You are paying with an imaginary currency ({{ merchant_currency }}).
-</p>
-
-<div>
- <p>Please select a project, the amount (*) of {{ merchant_currency }} you
- wish to donate, and enter the name that will appear on your receipt:</p>
-
- <form name="tform" action="checkout" method="GET" class="pure-form">
- <div class="participation" id="fake-shop">
- <select name="donation_receiver">
- <option value="GNUnet">GNUnet</option>
- <option value="Taler">GNU Taler</option>
- <option value="Tor">Tor</option>
- </select>
- <select id="taler-donation" name="donation_amount">
- <option value="{{ merchant_currency }}:0.1">0.1 {{ merchant_currency }}</option>
- <option value="{{ merchant_currency }}:1">1 {{ merchant_currency }}</option>
- <option value="{{ merchant_currency }}:6">5 {{ merchant_currency }}</option>
- <option value="{{ merchant_currency }}:10">10 {{ merchant_currency }}</option>
- </select>
- <input type="text" name="donation_donor" value="Anonymous Donor" />
- <input type="submit" class="pure-button pure-button-primary" value="Donate!" />
- </div>
- </form>
- <p>
- (*) To make it a bit more fun, the 5 {{ merchant_currency }} option is
- deliberately implemented with a fault: the merchant will try to make you
- donate 6 {{ merchant_currency }} instead of the 5 {{ merchant_currency }} you
- got to see. But do not worry, you will be given the opportunity to review
- the final offer from the merchant in a window secured by the Taler
- extension. That way, you can spot the error before committing to an
- incorrect contract.
- </p>
-</div>
-
-{% endblock %}
diff --git a/talermerchantdemos/donations/templates/index.html.j2 b/talermerchantdemos/donations/templates/index.html.j2
new file mode 100644
index 0000000..91122f3
--- /dev/null
+++ b/talermerchantdemos/donations/templates/index.html.j2
@@ -0,0 +1,44 @@
+{% extends "templates/base.html.j2" %}
+
+{% block main %}
+<h1>{{ gettext("Taler donation demonstrator") }}</h1>
+
+<p>
+{{
+ gettext("This donations website shows the user experience for donations with Taler.") + "<br>" +
+ gettext("You can make donations in an toy currency ({currency})").format(currency=merchant_currency)
+}}
+</p>
+
+<div>
+ <p>
+ {{
+ gettext("Please select a project, the amount (*) of {currency} you wish to donate, and enter the name that will appear on your receipt:").format(currency=merchant_currency)
+ }}
+ </p>
+
+ <form name="tform" action="{{ url_for('checkout',lang=lang) }}" method="GET" class="pure-form">
+ <div class="participation" id="fake-shop">
+ <select name="donation_receiver">
+ <option value="GNUnet">GNUnet</option>
+ <option value="Taler">GNU Taler</option>
+ <option value="Tor">Tor</option>
+ </select>
+ <select id="taler-donation" name="donation_amount">
+ <option value="{{ merchant_currency }}:0.1">0.1 {{ merchant_currency }}</option>
+ <option value="{{ merchant_currency }}:1">1 {{ merchant_currency }}</option>
+ <option value="{{ merchant_currency }}:6">5 {{ merchant_currency }}</option>
+ <option value="{{ merchant_currency }}:10">10 {{ merchant_currency }}</option>
+ </select>
+ <input type="text" name="donation_donor" value="{{gettext("Anonymous Donor")}}" />
+ <input type="submit" class="pure-button pure-button-primary" value="{{gettext("Donate!")}}" />
+ </div>
+ </form>
+ <p>
+ {{
+ gettext("(*) To make it a bit more fun, the 5 {currency} option is deliberately implemented with a fault: the merchant will try to make you donate 6 {currency} instead of the 5 {currency} shown in the form. But do not worry, you will be given the opportunity to review the final offer from the merchant in a window secured by the Taler extension. That way, you can spot the error before committing to an incorrect contract or amount.").format(currency=merchant_currency)
+ }}
+ </p>
+</div>
+
+{% endblock %}
diff --git a/talermerchantdemos/donations/templates/provider-not-supported.html b/talermerchantdemos/donations/templates/provider-not-supported.html.j2
index 88f2000..88f2000 100644
--- a/talermerchantdemos/donations/templates/provider-not-supported.html
+++ b/talermerchantdemos/donations/templates/provider-not-supported.html.j2